@layer components {

  /* ========================================================= */
  /* PRODUCT SHOWCASE — 4x2 expanding grid                     */
  /* ========================================================= */
  .product-showcase {
    padding: 0 var(--space-lg) var(--space-xl);
    max-inline-size: 1400px;
    margin-inline: auto;
  }

  .showcase-heading {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-block-end: var(--space-lg);
  }

  .product-row {
    display: flex;
    gap: var(--space-sm);
    margin-block-end: var(--space-sm);
    block-size: clamp(12rem, 18vw, 18rem);
  }

  /* ========================================================= */
  /* PRODUCT ITEM                                              */
  /* ========================================================= */
  .product-item {
    flex: 1 1 0;
    min-inline-size: 0;
    position: relative;
    border-radius: var(--radius-card);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    overflow: hidden;
    display: flex;
    cursor: pointer;
    block-size: 100%;
    transition:
      flex var(--dur-slow) var(--ease-spring),
      border-color var(--dur-mid) ease,
      box-shadow var(--dur-mid) ease,
      opacity var(--dur-mid) ease,
      filter var(--dur-mid) ease;
  }

  /* Dim siblings when any item in the row is hovered */
  .product-row:has(.product-item:hover) .product-item:not(:hover) {
    opacity: 0.55;
    filter: brightness(0.7);
  }

  /* Pull-to-expand hint — chevron on the right edge */
  .product-item::after {
    content: "›";
    position: absolute;
    inset-inline-end: 0.5rem;
    inset-block-start: 50%;
    translate: 0 -50%;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 300;
    color: var(--white-40);
    z-index: 2;
    pointer-events: none;
    transition: opacity var(--dur-mid) ease;
    text-shadow: 0 0 8px hsl(0 0% 100% / 0.15);
  }

  .product-item:hover::after {
    opacity: 0;
  }

  .product-item:hover {
    flex: 3 1 0;
    border-color: var(--accent);
    box-shadow:
      0 1rem 3rem hsl(0 0% 0% / 0.4),
      0 0 1.5rem var(--accent-glow);
    opacity: 1;
    filter: none;
  }

  /* ========================================================= */
  /* PRODUCT THUMBNAIL                                         */
  /* ========================================================= */
  .product-thumb {
    position: relative;
    flex-shrink: 0;
    inline-size: clamp(12rem, 18vw, 18rem);
    block-size: 100%;
    background:
      radial-gradient(circle at 40% 40%,
        hsl(var(--thumb-hue) 60% 40% / 0.35),
        transparent 60%),
      radial-gradient(circle at 70% 70%,
        hsl(var(--thumb-hue) 80% 25% / 0.25),
        transparent 50%),
      linear-gradient(145deg,
        hsl(var(--thumb-hue) 30% 12%),
        hsl(var(--thumb-hue) 20% 6%));
    overflow: hidden;
  }

  .product-thumb img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  /* SVG icons (Knowledge) — shrink with padding */
  .view--knowledge .product-thumb img {
    object-fit: contain;
    padding: 22%;
  }

  /* Hide broken image alt text */
  .product-thumb img[alt] {
    color: transparent;
    font-size: 0;
  }

  /* ========================================================= */
  /* PRODUCT DETAIL — hidden, revealed on hover                */
  /* ========================================================= */
  .product-detail {
    position: absolute;
    inset-inline-end: 0;
    inset-block: 0;
    inline-size: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    opacity: 0;
    transform: translateX(1rem);
    transition:
      opacity var(--dur-mid) ease,
      transform var(--dur-mid) var(--ease-out);
    transition-delay: 0ms;
  }

  .product-item:hover .product-detail {
    opacity: 1;
    transform: none;
    transition-delay: 150ms;
  }

  .product-detail h3 {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
  }

  .product-detail p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: auto;
  }

  .product-price {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
  }

  .product-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--white-10);
    background: var(--white-03);
    transition:
      color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      background var(--dur-fast) ease;
  }

  .product-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .product-link::after {
    content: "\2197";
    font-size: 1.1em;
  }

  /* ========================================================= */
  /* RESPONSIVE                                                */
  /* ========================================================= */
  @media (max-width: 48rem) {
    .product-showcase {
      padding: 0 var(--space-sm) var(--space-lg);
    }

    .product-row {
      flex-wrap: wrap;
      block-size: auto;
    }

    .product-item {
      flex: 1 1 calc(50% - var(--space-sm));
      block-size: 10rem;
    }

    .product-item:hover {
      flex: 1 1 calc(50% - var(--space-sm));
    }
  }

  @media (max-width: 30rem) {
    .product-item {
      flex: 1 1 100%;
      block-size: 8rem;
    }

    .product-item:hover {
      flex: 1 1 100%;
    }

    .product-detail {
      padding: var(--space-md);
    }
  }
}