@layer components {
  /* A variant's color swatch, shared by listing cards and the product
     page's variant selector. Only the background color is dynamic. */
  .color-dot {
    display: inline-block;
    border: 1px solid oklch(var(--lch-black) / 20%);
    border-radius: 50%;
    block-size: 0.875rem;
    inline-size: 0.875rem;
  }

  /* Phones: sixteen colors fit beside the card's controls only with the
     pile packed tight. */
  .color-dots {
    display: flex;
    align-items: center;
    margin: 0.25rem 0;
    gap: 0.125rem;

    @media (width >= 600px) {
      gap: 0.25rem;
    }
  }

  /* The slot shrinks, the dot inside doesn't: when there are more colors
     than the card can fit, the row overlaps like a pile of avatars
     instead of squishing each dot into an oval. */
  .color-dots__slot {
    display: flex;
    block-size: 0.875rem;
    inline-size: 0.875rem;
    min-inline-size: 0.25rem;
  }

  /* The slot before the "N farger" label keeps its full width, so the
     last dot never bleeds out of the pile and touches the text. */
  .color-dots__slot:nth-last-child(2) {
    flex-shrink: 0;
  }

  .color-dots__slot .color-dot {
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--color-surface);
  }

  .color-dots__count {
    flex-shrink: 0;
    color: oklch(var(--lch-gray-500));
    font-size: 0.75rem;

  }

  .products--grid {
    /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/#aa-heres-the-code */
    --grid-layout-gap: var(--block-space-half);
    --grid-column-count: 4;
    --grid-item-min-width: 240px;

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    gap: var(--grid-layout-gap);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));

    @media (width >= 600px) {
      --grid-layout-gap: var(--block-space);
    }
  }

  /* The card chrome lives on .product-card (bookmarks.css) so the
     action footer shares it; .product is the link that fills the rest.

     Phones: one card per row at full width would show a product and a
     half per screen. A row instead - thumbnail beside the facts - puts
     four or five prices on screen to compare. The category chip goes;
     the image and name already say what the product is. */
  .product {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    flex-grow: 1;

    @media (width >= 600px) {
      flex-direction: column;
    }

    @media (any-hover: hover) {
      &:hover {
        .product__image {
          transform: scale(1.05);
        }

        .product__name {
          color: var(--color-primary-hover);
        }
      }
    }
  }

  /* overflow and font size keep a failed image's alt text inside its box. */
  .product__image {
    overflow: hidden;
    flex-shrink: 0;
    padding: var(--block-space-half);
    aspect-ratio: auto;
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--text-xs);
    inline-size: 7.5rem;
    object-fit: contain;
    transition: transform 300ms;

    @media (width >= 600px) {
      flex-shrink: 1;
      padding: var(--block-space);
      aspect-ratio: 4/3;
      border-block-end: 1px solid var(--color-border);
      border-inline-end: 0 solid;
      inline-size: auto;
    }
  }

  .product__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-tag-bg);
  }

  .product__image--placeholder .material-symbols-outlined {
    color: var(--color-muted);
    font-size: 2.5rem;

    @media (width >= 600px) {
      font-size: 4rem;
    }
  }

  .product__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    padding: var(--block-space-half) var(--inline-space-half) var(--block-space-half) var(--inline-space);
    min-inline-size: 0;

    @media (width >= 600px) {
      padding: var(--block-space);
      min-inline-size: auto;
    }
  }

  /* Phones: clears the save and alert controls stacked in the top corner. */
  .product__info {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin-block-end: var(--block-space-half);
    padding-inline-end: 2.75rem;

    @media (width >= 600px) {
      margin-block-end: 1em;
      padding-inline-end: 0;
    }
  }

  .product__category {
    display: none;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: 1rem;
    background-color: var(--color-tag-bg);
    color: var(--color-tag);
    font-size: var(--text-xs);
    font-weight: 600;
    gap: 0.5em;
    letter-spacing: 0.025em;
    max-inline-size: fit-content;
    text-transform: uppercase;

    @media (width >= 600px) {
      display: inline-flex;
    }
  }

  .product__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.3;
    transition: color 200ms;

    @media (width >= 600px) {
      font-size: var(--text-xl);
      letter-spacing: -0.025em;
      line-height: inherit;
    }
  }

  .product__rating {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-xs);
    gap: 0.25em;
  }

  .product__stars {
    display: flex;
    align-items: center;
    color: var(--color-star);
    font-size: var(--text-sm);
    gap: 0.125em;
  }

  .product__rating-count {
    font-weight: 600;
  }

  .product__prices {
    border-block-start: 0;
    padding-block-start: 0;

    @media (width >= 600px) {
      border-block-start: var(--border);
      padding-block-start: 1em;
    }
  }

  .product__prices-original {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  .product__original-price {
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-decoration: line-through;
  }

  .product__discount {
    padding: 0.25em 0.5em;
    border-radius: var(--border-radius);
    background-color: var(--color-positive-subtle);
    color: var(--color-positive);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .product__current-price {
    display: flex;
    align-items: baseline;
    font-size: var(--text-2xl);
    font-weight: 700;
    gap: 0.3em;
    letter-spacing: -0.025em;

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

  /* "fra": the price is the cheapest colour's. Quiet, so the number
     still reads first. */
  .product__price-from {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
  }

  .product__current-price--none {
    color: var(--color-muted);
    font-size: var(--text-2xl);
    font-weight: 600;

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

  .product__trend {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    gap: 0.15em;

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

  .product__trend--up {
    color: var(--color-negative);
  }

  .product__trend--down {
    color: var(--color-positive);
  }

  .product__stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 0.5em;
  }

  .product__store {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 0.25em;
  }

  .product__store-count {
    border-inline-start: 1px solid var(--color-separator);
    font-size: var(--text-xs);
    padding-inline-start: 0.5em;
  }

  /* Product Detail
  /* ------------------------------------------------------------------------ */

  .product-detail {
    display: grid;
    gap: var(--block-space-double);

    @media (width >= 860px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .product-detail__image-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--block-space-double);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .product-detail__image {
    max-block-size: 400px;
    object-fit: contain;
  }

  .product-detail__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-detail__image-placeholder .material-symbols-outlined {
    color: var(--color-muted);
    font-size: 6rem;
  }

  .product-detail__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;

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

  .product-detail__top-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-block-end: var(--block-space-half);
  }

  .product-detail__category {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: 1rem;
    background-color: var(--color-tag-bg);
    color: var(--color-tag);
    font-size: var(--text-xs);
    font-weight: 600;
    gap: 0.5em;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  .product-detail__brand {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .product-detail__rating {
    display: flex;
    align-items: center;
    gap: 0.25em;
    margin-block-start: var(--block-space-quarter);
  }

  .product-detail__stars {
    display: flex;
    align-items: center;
    color: var(--color-star);
    font-size: var(--text-base);
    gap: 0.125em;
  }

  .product-detail__rating-count {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .product-detail__price-box {
    padding: var(--block-space);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    margin-block-start: var(--block-space);
  }

  /* Phones stack the price over a full-width buy button; side by side,
     the button squeezed the price until ",-" broke onto its own line. */
  .product-detail__price-box-inner {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);

    @media (width >= 600px) {
      flex-direction: row;
      align-items: start;
      justify-content: space-between;
      gap: var(--block-space);
    }
  }

  .product-detail__price-row {
    display: flex;
    flex-direction: column;
  }

  .product-detail__original-price-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  .product-detail__original-price {
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-decoration: line-through;
  }

  .product-detail__discount {
    padding: 0.25em 0.5em;
    border-radius: var(--border-radius);
    background-color: var(--color-positive-subtle);
    color: var(--color-positive);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .product-detail__trend {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    gap: 0.15em;

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

  .product-detail__trend--up {
    color: var(--color-negative);
  }

  .product-detail__trend--down {
    color: var(--color-positive);
  }

  .product-detail__all-time-low {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.5em;
    border-radius: var(--border-radius);
    background-color: var(--color-positive-subtle);
    color: var(--color-positive);
    font-size: var(--text-xs);
    font-weight: 700;
    gap: 0.25em;
    margin-block-start: 0.25em;
    max-inline-size: fit-content;

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

  .product-detail__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--block-space-quarter);
    text-align: center;

    @media (width >= 600px) {
      align-items: flex-start;
      margin-block-start: var(--block-space-half);
      text-align: start;
    }
  }

  .product-detail__best-store-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em;
    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.4em;
    text-decoration: none;
    transition: background-color 150ms;

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

    @media (width >= 600px) {
      padding: 0.5em 0.75em;
    }

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

  .product-detail__best-store-link--secondary {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-muted);
    transition: 150ms;
    transition-property: background-color, border-color, color;

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-separator);
        background-color: var(--color-shade);
        color: var(--color-ink);
      }
    }
  }

  .product-detail__more-stores {
    color: var(--color-primary);
    font-size: var(--text-sm);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .product-detail__sparkline {
    --price-chart-height: 60px;

    margin-block-start: var(--block-space);

    .price-chart {
      margin-inline-end: 0.4rem;
    }
  }

  /* Mirrors .price-history__empty, scaled down to the sparkline slot. */
  .product-detail__sparkline--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-sm);
    gap: var(--block-space-quarter);
    text-align: center;

    > .material-symbols-outlined {
      color: var(--color-border);
      font-size: 2rem;
    }
  }

  .product-detail__sparkline-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-size: var(--text-sm);
    gap: 0.2em;
    margin-block-start: var(--block-space-quarter);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover span:not(.material-symbols-outlined) {
        text-decoration: underline;
      }
    }
  }

  .product-detail__lowest-label {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .product-detail__lowest-price {
    display: flex;
    align-items: baseline;
    font-size: var(--text-3xl);
    font-weight: 700;
    gap: 0.3em;
    letter-spacing: -0.025em;
  }

  .product-detail__lowest-price--stale {
    color: var(--color-muted);
  }

  .product-detail__price-warning {
    display: flex;
    align-items: center;
    color: var(--color-warning-strong);
    font-size: var(--text-sm);
    gap: 0.25em;
    margin-block-start: 0.25em;

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

  .product-detail__shipping {
    font-size: var(--text-sm);
    margin-block-start: 0.25em;
  }

  .product-detail__no-price {
    color: var(--color-muted);
    font-size: var(--text-xl);
  }


  /* Specs
  /* ------------------------------------------------------------------------ */

  .specs {
    padding: var(--block-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .specs__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-block-end: var(--block-space);
  }

  .specs__list {
    display: flex;
    flex-direction: column;
  }

  .specs__row {
    display: grid;
    gap: var(--inline-space);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding-block: var(--block-space-half);

    &:not(:last-child) {
      border-block-end: 1px solid var(--color-border);
    }
  }

  /* Long compound keys ("Bevegelsesdetektering") hyphenate inside their
     column instead of widening it and knocking the values out of line. */
  .specs__key {
    color: var(--color-muted);
    font-size: var(--text-sm);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .specs__value {
    font-size: var(--text-sm);
  }

  /* Key specs: a product kind's normalized specs and what one step costs
  /* ------------------------------------------------------------------------ */

  .key-specs {
    padding: var(--block-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    container-type: inline-size;
  }

  .key-specs__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--block-space-quarter) var(--inline-space);
    margin-block-end: var(--block-space-half);
  }

  .key-specs__title {
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  .key-specs__unit-price {
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .key-specs__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-quarter) var(--inline-space-half);
  }

  .key-specs__chip {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-separator);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 500;
  }

  /* The chips are the variant selector, priced: the price reads as a
     number to compare, not a quiet "fra" as on the category page. */
  .variant-selector__chip-price.key-specs__chip-price {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .key-specs__chip-difference:not(.variant-selector__chip-delta--saves) {
    color: var(--color-ink);
    font-weight: 600;
  }

  /* This card: marked, not a link, so hovering changes nothing. */
  span.variant-selector__chip--selected {
    cursor: default;

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-positive);
        transform: none;
      }
    }
  }

  /* Offer List
  /* ------------------------------------------------------------------------ */

  .offer-list {
    padding: var(--block-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    container-type: inline-size;
  }

  .offer-list__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--block-space-quarter) var(--inline-space);
    margin-block-end: var(--block-space);
  }

  .offer-list__title {
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  /* Item price or price including shipping: one control naming both, so
     the list always says which its prices are in. */
  .price-basis {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    gap: 0.2rem;
  }

  .price-basis__option {
    padding: var(--block-space-quarter) var(--inline-space);
    border: 1px solid transparent;
    border-radius: calc(var(--border-radius) - 0.2rem);
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: 150ms;
    transition-property: background-color, border-color, color;
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-shade);
        color: var(--color-ink);
      }
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &[aria-pressed="true"] {
      border-color: var(--color-primary);
      background-color: var(--color-positive-subtle);
      color: var(--color-primary);
      cursor: default;
    }
  }

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

  .offer-list__divider {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);

    .material-symbols-outlined {
      font-size: var(--text-base);
    }

    &::after {
      flex: 1;
      border-block-start: var(--border);
      content: "";
    }
  }

  .offer-list__empty {
    padding: var(--block-space-double);
    text-align: center;

    .material-symbols-outlined {
      color: var(--color-border);
      font-size: 4rem;
    }

    p {
      color: var(--color-muted);
      margin-block-start: var(--block-space);
    }
  }

  /* Offer Row
  /* ------------------------------------------------------------------------ */

  /* Narrow lists (phones, and tablets where four columns wrap every
     cell) stack each offer in three lines: store and price, purchase
     terms and shipping, then stock and the button. The pricing wrapper
     steps aside so price and stock can land on different lines. */
  .offer-row {
    display: grid;
    align-items: center;
    padding: var(--block-space-half) var(--inline-space);
    border: var(--border);
    border-radius: var(--border-radius);
    gap: var(--block-space-quarter) var(--inline-space-half);
    grid-template:
      "store price" auto
      "variant shipping" auto
      "stock action" auto
      / minmax(0, 1fr) auto;
    transition: background-color 150ms;

    @container (width >= 760px) {
      padding: var(--block-space);
      gap: var(--block-space-half);
      grid-template: none;
      grid-template-columns: 3fr 4fr 3fr 2fr;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-shade);
      }
    }
  }

  .offer-row--lowest {
    border-color: var(--color-primary);
    background-color: var(--color-positive-subtle);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-positive-subtle);
      }
    }
  }

  .offer-row__store {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 600;
    gap: var(--block-space-quarter) var(--inline-space-half);
  }

  .offer-row__badge {
    padding: 0.25em 0.5em;
    border-radius: 1rem;
    background-color: var(--color-positive-subtle);
    color: var(--color-positive);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  /* No clipping here: the purchase terms' wording opens above the row. The
     listing name clips itself. */
  .offer-row__variant {
    min-inline-size: 0;
    white-space: nowrap;

    p {
      overflow: hidden;
      color: var(--color-muted);
      font-size: var(--text-sm);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* Purchase terms: what the store promises beyond the legal minimum, one
     mark each on a line under the listing name, in muted ink. */
  .purchase-terms {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    gap: 0.375rem;
    margin-block-start: var(--block-space-quarter);
  }

  .purchase-term {
    position: relative;
    display: inline-grid;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: help;
    font: inherit;
    place-items: center;

    &:focus-visible {
      border-radius: 4px;
      outline: var(--focus-ring);
      outline-offset: 2px;
    }
  }

  .purchase-term__mark {
    block-size: 1rem;
    fill: none;
    inline-size: 1rem;
    stroke: currentcolor;
    stroke-width: 1.75;
  }

  .purchase-term__detail {
    stroke-width: 1.5;
  }

  .purchase-term__solid {
    fill: currentcolor;
    stroke: none;
  }

  /* One line when it fits; a long condition wraps inside the viewport. */
  .purchase-term__label {
    position: absolute;
    z-index: 1;
    padding: 0.375rem 0.625rem;
    border-radius: var(--border-radius);
    background-color: var(--color-ink);
    color: var(--color-ink-inverted);
    font-size: var(--text-xs);
    font-weight: 500;
    inline-size: max-content;
    inset-block-end: calc(100% + 0.375rem);
    inset-inline-start: 0;
    letter-spacing: normal;
    max-inline-size: min(18rem, calc(100vw - 7rem));
    opacity: 0;
    pointer-events: none;
    text-align: start;
    transition: opacity 100ms;
    visibility: hidden;
    white-space: normal;

    .purchase-term:focus & {
      opacity: 1;
      visibility: visible;
    }

    @media (any-hover: hover) {
      .purchase-term:hover & {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .offer-row__price {
    font-size: var(--text-xl);
    font-weight: 700;
    text-align: end;
  }

  .offer-row__price--lowest {
    color: var(--color-positive);
  }

  .offer-row__store--stale {
    color: var(--color-muted);
  }

  .offer-row__price--stale {
    color: var(--color-muted);
  }

  /* At the row's end edge, under the price: the sum opens toward the
     row's start. A block, so the price's large line height adds no gap. */
  .offer-row__price .foreign-price {
    margin-inline-start: auto;
  }

  .offer-row__price .foreign-price__sum {
    inset-inline: auto 0;
  }

  /* A foreign-currency store's own price under the converted kroner,
     dotted to say it explains itself. The sum from one to the other opens
     below it, clear of the price it adds up to. */
  .foreign-price {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-muted);
    cursor: help;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 500;
    inline-size: fit-content;
    text-align: start;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;

    &:focus-visible {
      border-radius: 4px;
      outline: var(--focus-ring);
      outline-offset: 2px;
    }
  }

  /* A receipt: operators in their own column, amounts right-aligned in
     tabular figures, and a rule over the total. */
  .foreign-price__sum {
    position: absolute;
    z-index: 1;
    display: grid;
    padding: 0.625rem 0.875rem;
    border-radius: var(--border-radius);
    background-color: var(--color-ink);
    box-shadow: var(--shadow);
    color: var(--color-ink-inverted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    gap: 0.25rem 0.5rem;
    grid-template-columns: 1ch auto auto;
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-start: 0;
    opacity: 0;
    pointer-events: none;
    text-align: start;
    transition: opacity 100ms;
    visibility: hidden;
    white-space: nowrap;

    .foreign-price:focus & {
      opacity: 1;
      visibility: visible;
    }

    @media (any-hover: hover) {
      .foreign-price:hover & {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .foreign-price__line {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .foreign-price__line--total {
    border-block-start: 1px solid color-mix(in oklab, currentcolor 35%, transparent);
    font-weight: 700;
    margin-block-start: 0.125rem;
    padding-block-start: 0.375rem;
  }

  .foreign-price__operator {
    color: color-mix(in oklab, currentcolor 60%, transparent);
    text-align: center;
  }

  .foreign-price__rate {
    color: color-mix(in oklab, currentcolor 60%, transparent);
  }

  .foreign-price__amount {
    padding-inline-start: 1.5rem;
    text-align: end;
  }

  .offer-row__freshness,
  .offer-row__stock {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-xs);
    gap: 0.25em;
    margin-block-start: var(--block-space-quarter);

    .material-symbols-outlined {
      font-size: var(--text-sm);
    }

    @container (width >= 760px) {
      justify-content: flex-end;
    }
  }

  /* What shipping adds, under a price: muted when charged, positive when
     free. */
  .offer-shipping {
    display: flex;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .offer-shipping--free {
    color: var(--color-positive);
    font-weight: 600;
  }

  .offer-row__shipping {
    @container (width >= 760px) {
      justify-content: flex-end;
    }
  }

  .offer-row__freshness--stale {
    color: var(--color-warning-strong);
  }

  .offer-row__stock-dot {
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-muted);
    block-size: 0.6em;
    inline-size: 0.6em;
  }

  .offer-row__stock--available .offer-row__stock-dot {
    background-color: var(--color-positive);
  }

  .offer-row__stock--incoming .offer-row__stock-dot {
    background-color: var(--color-warning);
  }

  .offer-row__stock--unavailable .offer-row__stock-dot {
    background-color: var(--color-negative);
  }

  .offer-row__no-price {
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: end;
  }

  .offer-row__action {
    display: flex;
    justify-content: flex-end;
  }

  .offer-row__link {
    display: inline-flex;
    align-items: 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;
    text-decoration: none;
    transition: background-color 150ms;
    white-space: nowrap;

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

  .offer-row__link--secondary {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-muted);

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-separator);
        background-color: var(--color-shade);
        color: var(--color-ink);
      }
    }
  }

  @container (width < 760px) {
    .offer-row__pricing {
      display: contents;
    }

    .offer-row__store {
      grid-area: store;
    }

    /* No room for the store's listing name: clipped, it only repeated
       the product title. */
    .offer-row__variant {
      align-self: start;
      grid-area: variant;

      p {
        display: none;
      }

      .purchase-terms {
        margin-block-start: 0;
      }
    }

    .offer-row__price,
    .offer-row__no-price {
      grid-area: price;
    }

    .offer-row__shipping {
      align-self: start;
      justify-content: flex-end;
      grid-area: shipping;
    }

    .offer-row__freshness,
    .offer-row__stock {
      grid-area: stock;
      margin-block-start: 0;
    }

    .offer-row__action {
      grid-area: action;
    }
  }

  /* Tablet-width lists have room for two lines: the button stands to the
     right of both. */
  @container (480px <= width < 760px) {
    .offer-row {
      grid-template:
        "store price action" auto
        "variant shipping action" auto
        "variant stock action" auto
        / minmax(0, 1fr) auto auto;
    }

    .offer-row__freshness,
    .offer-row__stock {
      justify-content: flex-end;
    }
  }

  /* Product Listing Header
  /* ------------------------------------------------------------------------ */

  .product-listing__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    margin-block-end: var(--block-space);
  }

  .product-listing__title {
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  .product-listing__link {
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  /* No matches: say so and what to try, instead of an empty grid. */
  .results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--block-space-double);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    color: var(--color-muted);
    gap: var(--block-space-half);
    text-align: center;

    > .icon {
      color: var(--color-border);
      font-size: 3rem;
    }

    > p:first-of-type {
      color: var(--color-ink);
      font-weight: 600;
    }
  }

  .results-header {
    display: flex;
    flex-direction: column;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    font-size: var(--text-sm);
    gap: var(--block-space-half);
    margin-block-end: var(--block-space);

    .results-header__row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--block-space-half) var(--inline-space);
    }

    .results-header__count {
      text-wrap: balance;
    }

    .results-header__sort {
      display: flex;
      align-items: center;
      gap: calc(var(--inline-space) / 2);
      margin-inline-start: auto;

      /* Phones: the count and the sort share one row; the menu's own
         label ("Mest populær") says what it is. Hidden from the eye
         only, so the menu keeps its name for screen readers. */
      label {
        position: absolute;
        overflow: hidden;
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        white-space: nowrap;

        @media (width >= 860px) {
          position: static;
          overflow: visible;
          block-size: auto;
          clip-path: none;
          inline-size: auto;
          white-space: inherit;
        }
      }

    }

    .results-header__relaxed {
      border-block-start: 1px solid var(--color-separator);
      color: var(--color-muted);
      font-size: var(--text-xs);
      padding-block-start: var(--block-space-half);
    }

    :is(select) {
      border: 1px solid var(--color-border);
      border-radius: 1.5em;
      appearance: none;
      background-color: var(--color-shade);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-position: right 0.75em center;
      background-repeat: no-repeat;
      padding-block: var(--block-space-half);
      padding-inline: var(--inline-space) 2em;
      transition: 200ms;
      transition-property: border-color, box-shadow;

      &:focus {
        border-color: var(--color-primary);
        box-shadow: var(--shadow);
        outline: none;
      }
    }
  }
}