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

    --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));
  }

  .product {
    display: flex;
    flex-direction: column;
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 200ms;
  }

  .product:hover {
    box-shadow: var(--shadow);

    .product__image {
      transform: scale(1.05);
    }

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

  .product__image {
    padding: var(--block-space);
    aspect-ratio: 4/3;
    border-block-end: 1px solid var(--color-border);
    object-fit: contain;
    transition: transform 300ms;
  }

  .product__image-placeholder {
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
  }

  .product__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    padding: var(--block-space);
  }

  .product__info {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin-block-end: 1em;
  }

  .product__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;
    max-inline-size: fit-content;
    text-transform: uppercase;
  }

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

  .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: 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-3xl);
    font-weight: 700;
    gap: 0.3em;
    letter-spacing: -0.025em;
  }

  .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__stores {
    display: flex;
    align-items: center;
    gap: 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 {
    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 {
    color: var(--color-border);
    font-size: 8rem;
  }

  .product-detail__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .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);
  }

  .product-detail__price-box-inner {
    display: flex;
    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__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: flex-start;
    gap: var(--block-space-quarter);
    margin-block-start: var(--block-space-half);
  }

  .product-detail__best-store-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 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;
    }

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

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

    &:hover {
      text-decoration: underline;
    }
  }

  .product-detail__sparkline {
    position: relative;
    inline-size: 99%;
    margin-block-start: var(--block-space);
  }

  .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;

    &: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__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: 1fr 2fr;
    padding-block: var(--block-space-half);

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

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

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

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

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

  .offer-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--block-space);
  }

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

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

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

  .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
  /* ------------------------------------------------------------------------ */

  .offer-row {
    display: grid;
    align-items: center;
    padding: var(--block-space);
    border: var(--border);
    border-radius: var(--border-radius);
    gap: var(--block-space-half);
    transition: background-color 150ms;

    @media (width >= 640px) {
      grid-template-columns: 3fr 4fr 3fr 2fr;
    }

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

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

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

  .offer-row__store {
    display: flex;
    align-items: center;
    font-weight: 600;
    gap: 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;
  }

  .offer-row__variant {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

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

  .offer-row__domain {
    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);
    }
  }

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

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

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

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

    @media (width >= 640px) {
      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;

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

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

  .product-listing__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    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;
  }

  .results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    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);
    margin-block-end: var(--block-space);

    :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: border-color 200ms, box-shadow 200ms;

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