/*
 * Product grid responsive contract.
 *
 * This file is loaded after the compiled site styles so the grid rules below
 * can correct the legacy single-column phone fallbacks without changing the
 * Home Hero product stage (.home-hero-products).
 */

/* Keep every product surface shrinkable inside its grid track. */
.products-page .product-grid,
.home-products-section .home-product-grid,
.related-section .related-grid {
  min-width: 0;
}

.products-page .product-grid > *,
.home-products-section .home-product-grid > *,
.related-section .related-grid > * {
  min-width: 0;
}

/* Keep the detail-page related rail aligned with the shared card geometry. */
.product-shell-page.related-section .related-card {
  grid-template-columns: 160px minmax(0, 1fr);
  min-height: 160px;
}

.product-shell-page.related-section .related-card img {
  height: 160px;
}

/* Tablet / compact desktop: two balanced tracks with fluid gutters. */
@media (min-width: 561px) and (max-width: 900px) {
  .products-page .product-grid,
  .home-products-section .home-product-grid,
  .related-section .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
  }

  .products-page .products-card .product-image {
    height: clamp(220px, 32vw, 285px);
  }

  .home-product-image,
  .home-product-image img {
    height: clamp(260px, 35vw, 350px);
    min-height: 0;
  }

  .related-section .related-card {
    grid-template-columns: clamp(128px, 18vw, 160px) minmax(0, 1fr);
  }

  .related-section .related-card img {
    height: clamp(128px, 18vw, 160px);
  }
}

/*
 * Phones: always use two columns. The minmax(0, 1fr) tracks share the
 * available shell width at both narrow (320px) and standard (390px) widths.
 */
@media (max-width: 560px) {
  .products-page .product-grid,
  .home-products-section .home-product-grid,
  .related-section .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 3vw, 14px);
    width: 100%;
  }

  .product-card,
  .home-product-card,
  .related-card {
    border-radius: clamp(14px, 5vw, 24px);
  }

  /* Catalog cards: compact but still image-led, with no fixed 320px stage. */
  .products-page .products-card .product-image {
    height: clamp(148px, 43vw, 205px);
    min-height: 0;
  }

  .products-page .products-card .product-image img {
    min-height: 0;
    padding: clamp(6px, 2vw, 10px);
  }

  .products-page .products-card .product-number {
    bottom: 8px;
    left: 10px;
    font-size: clamp(18px, 5vw, 24px);
  }

  .products-page .products-card .product-card-body {
    padding: clamp(13px, 3.4vw, 18px) clamp(10px, 3vw, 15px) clamp(14px, 3.5vw, 18px);
  }

  .products-page .products-card .product-card-body .eyebrow {
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: .13em;
    line-height: 1.35;
  }

  .products-page .products-card .product-card-body h2 {
    margin-bottom: 9px;
    font-size: clamp(1.1rem, 5.2vw, 1.55rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .products-page .products-card .product-card-body > p:not(.eyebrow) {
    margin-bottom: 10px;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .products-page .products-card .mini-specs {
    margin: 10px 0 14px;
    font-size: clamp(10px, 2.8vw, 12px);
  }

  .products-page .products-card .mini-specs > div {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 8px;
    min-width: 0;
  }

  .products-page .products-card .mini-specs dt,
  .products-page .products-card .mini-specs dd {
    overflow-wrap: anywhere;
  }

  .products-page .products-card .button {
    width: 100%;
    min-height: 40px;
    gap: 6px;
    padding-inline: 9px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* Home product cards: preserve readable copy beneath a shorter image. */
  .home-product-image {
    height: clamp(148px, 43vw, 205px);
    min-height: 0;
  }

  .home-product-image img {
    height: 100%;
    min-height: 0;
  }

  .home-product-number {
    bottom: 9px;
    left: 11px;
    font-size: clamp(20px, 6vw, 28px);
  }

  .home-product-body {
    min-height: 0;
    padding: clamp(13px, 3.5vw, 18px) clamp(10px, 3vw, 15px) clamp(15px, 3.8vw, 20px);
  }

  .home-product-body h3 {
    margin-bottom: 8px;
    font-size: clamp(1rem, 4.7vw, 1.25rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .home-product-body p {
    min-height: 0;
    margin-bottom: 12px;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .home-product-body .text-link {
    gap: 7px;
    font-size: 10px;
  }

  /* Related cards become stacked within each of the two grid columns. */
  .related-section .related-card {
    grid-template-columns: 1fr;
    min-width: 0;
    min-height: 0;
  }

  .related-section .related-card img {
    width: 100%;
    height: clamp(132px, 39vw, 185px);
  }

  .related-section .related-card div {
    min-width: 0;
    gap: 16px;
    padding: clamp(13px, 3.5vw, 18px) clamp(11px, 3vw, 15px);
  }

  /* The shell detail page has a more specific legacy rule; keep its related
   * cards on the same stacked two-column contract. */
  .product-shell-page.related-section .related-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .product-shell-page.related-section .related-card img {
    height: clamp(132px, 39vw, 185px);
  }

  .related-section .related-card h3 {
    font-size: clamp(1rem, 4.7vw, 1.25rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .related-section .related-card span {
    gap: 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* The shell already owns horizontal padding; keep tracks inside it. */
  .products-page .product-grid img,
  .home-products-section .home-product-grid img,
  .related-section .related-grid img {
    max-width: 100%;
  }
}