@layer components {
  /* Directory of schools, grouped by first letter */
  .directory-header {
    margin-block-end: 2rem;

    .headline {
      margin-block-end: 0.75rem;
    }

    .search-box {
      max-inline-size: 28rem;
    }
  }

  .school-group {
    margin-block-end: 2rem;
  }

  .school-group__letter {
    border-block-end: 1px solid var(--color-line-light);
    color: var(--color-ink-light);
    font-size: var(--text-x-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1rem;
    margin-block-end: 0.75rem;
    padding-block-end: 0.25rem;
    text-transform: uppercase;
  }

  .school-group__list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--school-columns, 1), minmax(0, 1fr));
    list-style: none;

    @media (width >= 640px) {
      --school-columns: 2;
    }

    @media (width >= 1024px) {
      --school-columns: 3;
    }
  }

  .school-link {
    align-items: center;
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-large);
    display: flex;
    gap: 1rem;
    padding: 1rem;
    transition: box-shadow var(--transition), border-color var(--transition);

    &:hover {
      border-color: var(--color-sky-light);
      box-shadow: var(--shadow-medium);
    }

    &:hover .school-link__name {
      color: var(--color-sky);
    }
  }

  /* The first match while filtering, opened by Enter */
  .school-link--highlighted {
    border-color: oklch(74.6% 0.16 232.661);
    box-shadow: 0 0 0 2px var(--color-sky-bright), var(--shadow-medium);
  }

  .school-link__logo {
    block-size: 3rem;
    border-radius: var(--radius);
    flex-shrink: 0;
    inline-size: 3rem;
    object-fit: contain;
  }

  .school-link__initial {
    align-items: center;
    background-color: var(--color-sky-wash);
    color: var(--color-sky);
    display: flex;
    font-size: var(--text-medium);
    font-weight: 700;
    justify-content: center;
  }

  .school-link__text {
    min-inline-size: 0;
  }

  .school-link__name {
    color: var(--color-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition);
    white-space: nowrap;
  }

  .school-link__city {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    line-height: 1.25rem;
    margin-block-start: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A school's own storefront, tinted with its accent color */
  .school-header {
    align-items: center;
    background-color: var(--color-surface);
    border-radius: var(--radius-x-large);
    display: flex;
    gap: 1rem;
    margin-block-end: 1.5rem;
    overflow: hidden;
    padding: 1.25rem;

    @media (width >= 640px) {
      gap: 1.25rem;
      padding: 1.5rem 1.75rem;
    }
  }

  .school-header__logo {
    align-items: center;
    background-color: var(--color-surface);
    block-size: 4rem;
    border-radius: var(--radius-x-large);
    box-shadow: 0 0 0 1px oklch(21% 0.034 264.665 / 5%), var(--shadow-medium);
    display: flex;
    flex-shrink: 0;
    inline-size: 4rem;
    justify-content: center;
    overflow: hidden;

    @media (width >= 640px) {
      block-size: 5rem;
      inline-size: 5rem;
    }

    img {
      block-size: 100%;
      inline-size: 100%;
      object-fit: contain;
    }

    span {
      color: var(--color-ink-lighter);
      font-size: var(--text-2x-large);
      font-weight: 700;
    }
  }

  .school-header__text {
    color: var(--color-ink);
    min-inline-size: 0;
  }

  .school-header__name {
    font-size: var(--text-large);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;

    @media (width >= 640px) {
      font-size: var(--text-2x-large);
    }
  }

  .school-header__plain {
    font-weight: 400;
  }

  .school-header__place {
    color: var(--color-ink-medium);
    font-weight: 400;
  }

  .school-header__label {
    color: var(--color-ink-light);
    font-size: var(--text-xx-small);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-block-start: 0.5rem;
    text-transform: uppercase;
  }

  .school-header__address {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    line-height: 1.375;
    margin-block-start: 0.125rem;
    white-space: pre-line;

    @media (width >= 640px) {
      font-size: var(--text-small);
    }
  }

  /* Small caps label in the school's accent */
  .accent-label {
    color: var(--accent-text);
    font-size: var(--text-xx-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .school-note {
    background-color: var(--color-surface);
    border: var(--border);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius-x-large);
    margin-block-end: 1.5rem;
    overflow: hidden;
    padding: 1.25rem;

    @media (width >= 640px) {
      padding-inline: 1.5rem;
    }

    p:last-child {
      color: var(--color-ink-dark);
      font-size: var(--text-small);
      line-height: 1.25rem;
      margin-block-start: 0.25rem;
      white-space: pre-line;
    }
  }

  /* Upcoming sales and pickups: one banner, or a row of cards */
  .event {
    --event-title-size: var(--text-normal);
    --event-title-line: 1.5rem;
    --event-text-size: var(--text-small);
    --event-text-line: 1.25rem;

    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    border-radius: var(--radius-x-large);
    margin-block-end: 1.5rem;
    overflow: hidden;
    padding: 1.25rem;

    @media (width >= 640px) {
      --event-title-size: var(--text-medium);
      --event-title-line: 1.75rem;

      padding-inline: 1.5rem;
    }
  }

  .event--card {
    --event-title-size: var(--text-small);
    --event-title-line: 1.25rem;
    --event-text-size: var(--text-x-small);
    --event-text-line: 1rem;

    margin-block-end: 0;
    padding: 1rem;

    @media (width >= 640px) {
      --event-title-size: var(--text-small);
      --event-title-line: 1.25rem;

      padding: 1rem;
    }
  }

  .event__title {
    color: var(--color-ink);
    font-size: var(--event-title-size);
    font-weight: 700;
    line-height: var(--event-title-line);
    margin-block-start: 0.125rem;
  }

  .event__when,
  .event__where,
  .event__text {
    font-size: var(--event-text-size);
    line-height: var(--event-text-line);
  }

  .event__when {
    color: var(--color-ink);
    font-weight: 600;
    margin-block-start: 0.25rem;
  }

  .event__where {
    color: var(--color-ink-medium);
    margin-block-start: 0.125rem;
  }

  .event__text {
    color: var(--color-ink-dark);
    margin-block-start: 0.5rem;

    strong {
      font-weight: 500;
    }
  }

  .event__notes {
    white-space: pre-line;

    .event--card & {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
    }
  }

  .event__muted {
    color: var(--color-ink-medium);
  }

  .event__badge {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
  }

  .event__cutoff {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    line-height: 1rem;
  }

  .event-row {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
    overflow: auto hidden;
    padding-block-end: 0.5rem;
    scroll-snap-type: x mandatory;
  }

  /* Leaves a peek of the next card on phones as a scroll hint */
  .event-row__item {
    flex-shrink: 0;
    inline-size: min(18rem, calc(100% - 2rem));
    scroll-snap-align: start;
  }

  .days-left {
    --days-left-tint: oklch(95% 0.052 163.051);
    --days-left-ink: oklch(50.8% 0.118 165.612);

    align-items: center;
    background-color: var(--days-left-tint);
    border-radius: var(--radius-pill);
    color: var(--days-left-ink);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 500;
    line-height: 1rem;
    padding: 0.25rem 0.625rem;
  }

  .days-left--amber {
    --days-left-tint: oklch(96.2% 0.059 95.617);
    --days-left-ink: oklch(55.5% 0.163 48.998);
  }

  .days-left--rose {
    --days-left-tint: oklch(94.1% 0.03 12.58);
    --days-left-ink: oklch(51.4% 0.222 16.935);
  }

  /* Uniform policies as pills; the current one wears the school's color */
  .policy-tabs {
    display: flex;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
    overflow: auto hidden;
    padding-block-end: 0.5rem;
  }

  .policy-tab {
    background-color: var(--color-line-light);
    border-radius: var(--radius-pill);
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;

    &:hover {
      background-color: var(--color-line);
    }

    &[aria-current] {
      background-color: var(--accent);
      color: var(--accent-ink);
    }
  }

  .policy-dialog {
    border-radius: var(--radius-x-large);
    box-shadow: var(--shadow-large);
    inline-size: 100%;
    margin: auto;
    max-inline-size: 24rem;
    outline: none;

    &::backdrop {
      background-color: oklch(21% 0.034 264.665 / 60%);
    }
  }

  .policy-dialog__body {
    padding: 2rem;
    position: relative;
  }

  .policy-dialog__close {
    color: var(--color-ink-light);
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    padding: 0.25rem;
    position: absolute;
    transition: color var(--transition);

    &:hover {
      color: var(--color-ink-soft);
    }

    svg {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  .policy-dialog__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-block-end: 1.5rem;
    text-align: center;

    img {
      block-size: 4rem;
      border-radius: var(--radius-large);
      inline-size: 4rem;
      margin-block-end: 1rem;
      object-fit: contain;
    }

    h2 {
      color: var(--color-ink);
      font-size: var(--text-large);
      font-weight: 700;
      line-height: 1.75rem;
    }
  }

  .policy-dialog__options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .policy-option {
    align-items: center;
    border: var(--border);
    border-radius: var(--radius-large);
    color: var(--color-ink);
    display: flex;
    font-weight: 500;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    transition: border-color var(--transition), background-color var(--transition);

    svg {
      block-size: 1.25rem;
      color: var(--color-ink-light);
      inline-size: 1.25rem;
      transition: color var(--transition);
    }

    &:hover {
      background-color: color-mix(in oklab, var(--accent) 5%, transparent);
      border-color: var(--accent);
      color: var(--accent-text);

      svg {
        color: var(--accent-text);
      }
    }
  }

  /* Product grids */
  .product-grid {
    display: grid;
    gap: 2rem 1rem;
    grid-template-columns: repeat(var(--product-columns, 2), minmax(0, 1fr));
    list-style: none;

    @media (width >= 640px) {
      --product-columns: 3;
    }

    @media (width >= 1024px) {
      --product-columns: 4;
    }
  }

  .product-grid--basics {
    @media (width >= 1024px) {
      --product-columns: 5;
    }
  }

  .school-intro {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    line-height: 1.625;
    margin-block-start: 3rem;
    max-inline-size: 42rem;
  }

  /* A school's colorway, in its grid and in suggestions */
  .product-card {
    --card-accent: var(--accent-text, var(--color-sky-dark));

    display: block;

    &:hover .product-card__name {
      color: var(--card-accent);
    }

    &:hover .product-card__image {
      scale: 1.05;
    }
  }

  .product-card__photo {
    aspect-ratio: 1;
    background-color: var(--color-canvas);
    border-radius: var(--radius-large);
    overflow: hidden;
    position: relative;
  }

  .product-card__image {
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    object-fit: contain;
    padding: 0.5rem;
    position: absolute;
    transition: scale 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .product-card__placeholder {
    align-items: center;
    color: var(--color-ink-lighter);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;

    svg {
      block-size: 3rem;
      inline-size: 3rem;
    }
  }

  .product-card__body {
    padding: 0.75rem;
  }

  .product-card__name {
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.25rem;
    transition: color var(--transition);
  }

  .product-card__price {
    color: var(--card-accent);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.25rem;
    margin-block-start: 0.375rem;
  }
}