@layer components {
  /* The deals pages (/tilbud): one reading column, dense ranked rows, and
     a single loud element - the season strip, in Black Friday's own black. */
  .main--deals {
    --main-width: 60rem;
  }

  .deals-header {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .deals-header__title {
    font-size: clamp(var(--text-2xl), 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
  }

  .deals-header__lead {
    color: oklch(var(--lch-gray-700));
    font-size: var(--text-lg);
    max-inline-size: 42em;
    text-wrap: pretty;

    a {
      color: var(--color-link);
      white-space: nowrap;
    }
  }

  /* A live dot: the list is rejudged every hour. */
  .deals-header__freshness {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-sm);
    gap: var(--inline-space-half);

    &::before {
      border-radius: 50%;
      background: var(--color-positive);
      block-size: 0.5rem;
      box-shadow: 0 0 0 3px var(--color-positive-subtle);
      content: "";
      inline-size: 0.5rem;
    }
  }

  .season {
    display: grid;
    padding: var(--block-space-half);
    border-radius: var(--border-radius);
    background: oklch(var(--lch-gray-950));
    color: var(--color-ink-inverted);
    gap: var(--block-space-half);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin-block-start: var(--block-space-half);
  }

  .season__day {
    display: flex;
    flex-direction: column;
    padding: var(--block-space-half) var(--inline-space-half);
    border-radius: calc(var(--border-radius) - 2px);
    gap: 0.125rem;
  }

  .season__day--past {
    opacity: 0.45;
  }

  .season__day--today,
  .season__day--next {
    background: oklch(var(--lch-white) / 8%);
    box-shadow: inset 0 0 0 1px oklch(var(--lch-green-500) / 70%);
  }

  .season__date {
    font-size: clamp(var(--text-base), 5vw, var(--text-2xl));
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .season__name {
    color: oklch(var(--lch-gray-300));
    font-size: var(--text-xs);
    line-height: 1.3;

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

  .season__when {
    color: oklch(var(--lch-green-400));
    font-size: var(--text-xs);
    font-weight: 600;
  }

  /* One swipeable row on a phone, where a dozen wrapped chips would fill
     the first screen. */
  .deals-jump {
    display: flex;
    gap: var(--block-space-half);
    overflow-x: auto;
    scrollbar-width: none;

    @media (width >= 600px) {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }

  .deals-jump__link {
    display: inline-flex;
    align-items: center;
    padding: 0.375em 0.75em;
    border: var(--border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    gap: 0.4em;
    text-decoration: none;
    white-space: nowrap;

    span {
      color: var(--color-muted);
      font-variant-numeric: tabular-nums;
    }

    &:hover {
      border-color: var(--color-separator);
    }
  }

  .deals-section {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    scroll-margin-block-start: var(--block-space);
  }

  .deals-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--inline-space);
  }

  .deals-section__title {
    font-size: var(--text-xl);
    font-weight: 700;

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      color: var(--color-primary);
    }
  }

  .deals-section__more {
    color: var(--color-link);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .deal-list {
    border-radius: var(--border-radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    list-style: none;
  }

  /* [image] [name, store] [price block] [store link]; on a phone the price
     block moves under the name and the link spans the row. */
  .deal {
    display: grid;
    align-items: center;
    padding: var(--block-space) var(--inline-space);
    gap: var(--block-space-half) var(--inline-space);
    grid-template:
      "image body" auto
      "image pricing" auto
      "link link" auto
      / 3.5rem minmax(0, 1fr);

    & + & {
      border-block-start: var(--border);
    }

    @media (width >= 720px) {
      grid-template: "image body pricing link" auto / 4.5rem minmax(0, 1fr) auto auto;
    }
  }

  .deal__image {
    display: grid;
    overflow: hidden;
    align-self: start;
    border-radius: calc(var(--border-radius) - 2px);
    aspect-ratio: 1;
    background: var(--color-surface);
    color: var(--color-muted);
    grid-area: image;
    place-items: center;

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

  .deal__body {
    grid-area: body;
    min-inline-size: 0;
  }

  .deal__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: var(--text-base);
    font-weight: 600;
    -webkit-line-clamp: 2;
    line-height: 1.35;

    a {
      color: var(--color-ink);
      text-decoration: none;
    }

    a:hover {
      color: var(--color-primary);
    }
  }

  .deal__store {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .deal__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    grid-area: pricing;

    @media (width >= 720px) {
      align-items: end;
      text-align: end;
    }
  }

  .deal__price {
    display: flex;
    align-items: center;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    gap: var(--inline-space-half);
    white-space: nowrap;
  }

  .deal__saving-percent {
    padding: 0.125em 0.4em;
    border-radius: 0.25rem;
    background: var(--color-positive-subtle);
    color: oklch(var(--lch-green-800));
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .deal__reference {
    color: var(--color-tag);
    font-size: var(--text-xs);
    max-inline-size: 30em;
  }

  .deal__saving {
    color: oklch(var(--lch-green-700));
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .deal__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    border-radius: var(--border-radius);
    background-color: var(--color-primary);
    color: var(--color-ink-inverted);
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 0.25em;
    grid-area: link;
    text-decoration: none;
    transition: background-color 150ms;
    white-space: nowrap;

    .material-symbols-outlined {
      font-size: 1.1em;
    }

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

  .deals-empty {
    padding: var(--block-space-double) var(--inline-space);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    color: oklch(var(--lch-gray-700));
    text-align: center;

    a {
      color: var(--color-link);
    }
  }

  .deals-method {
    border-block-start: var(--border);
    padding-block-start: var(--block-space);

    h2:not(:first-child) {
      margin-block-start: var(--block-space-double);
    }

    h3 {
      margin-block-start: var(--block-space);
    }

    ol {
      display: flex;
      flex-direction: column;
      gap: var(--block-space-half);
      list-style: disc;
      margin-block: var(--block-space-half);
      padding-inline-start: 1.25em;
    }
  }

  .deals-banner__subject {
    white-space: nowrap;
  }

  /* The seasonal link on the category pages. */
  .deals-banner {
    display: flex;
    align-items: center;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: var(--border-radius);
    background: oklch(var(--lch-gray-950));
    color: var(--color-ink-inverted);
    font-weight: 600;
    gap: var(--inline-space-half);
    text-decoration: none;

    .material-symbols-outlined {
      color: oklch(var(--lch-green-400));
    }

    > span:last-child {
      margin-inline-start: auto;
    }

    &:hover {
      background: oklch(var(--lch-gray-900));
    }
  }
}