/* Product hub and category pages. Loaded after styles.css, pages.css and shell.css. */

.product-page .page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.product-page .page-hero h1 { max-width: 14ch; }
.product-page .page-hero__copy > p:not(.eyebrow) { max-width: 40rem; font-size: 1.05rem; line-height: 1.6; color: var(--color-steel); }
.product-page .page-hero__copy .hero-actions { margin-top: 1.75rem; }
.product-page .page-hero__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-stone); }
.product-page .page-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }
.product-page .page-hero__media--portrait img { object-position: center 30%; }

.product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--color-ink); border-left: 1px solid var(--color-hairline); }
.product-facts > div { padding: 1.4rem; border-right: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); background: var(--color-surface); }
.product-facts dt { color: var(--color-oxblood); font: 400 clamp(1.8rem, 3vw, 2.6rem) / 1 var(--font-display); }
.product-facts dd { margin: 1rem 0 0; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.product-facts small { display: block; margin-top: 0.5rem; color: var(--color-steel); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; }

.product-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-hairline); border-left: 1px solid var(--color-hairline); }
.product-list li { padding: 1.4rem 1.5rem; border-right: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); background: var(--color-surface); }
.product-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.product-list strong { display: block; margin-bottom: 0.4rem; font: 500 1.3rem / 1.15 var(--font-display); }
.product-list p { margin: 0; color: var(--color-steel); line-height: 1.55; }

.product-stages ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-hairline); border-left: 1px solid var(--color-hairline); }
.product-stages li { padding: 1.25rem 1.4rem; border-right: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); background: var(--color-surface); }
.product-stages li:nth-child(7) { grid-column: span 2; }
.product-stages li > span { display: block; margin-bottom: 0.6rem; color: var(--color-oxblood); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.1em; }
.product-stages strong { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.product-stages p { margin: 0; color: var(--color-steel); font-size: 0.9rem; line-height: 1.5; }
.product-stages .text-link { margin-top: 1.5rem; color: var(--color-ink); }

.product-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); }
.product-route article { padding: 1.75rem; background: var(--color-surface); }
.product-route article > span { color: var(--color-oxblood); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.product-route h3 { margin: 0.8rem 0 0.6rem; font: 500 clamp(1.5rem, 2vw, 2rem) / 1.05 var(--font-display); }
.product-route p { margin: 0; color: var(--color-steel); line-height: 1.55; }
.product-route .text-link { margin-top: 1.25rem; color: var(--color-ink); }

.product-markets p { max-width: 44rem; margin: 0 0 1rem; color: var(--color-steel); line-height: 1.6; }
.product-markets ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.product-markets li a { color: var(--color-ink); font-size: 0.88rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-oxblood-soft); text-underline-offset: 0.25rem; }
.product-markets li a:hover { color: var(--color-oxblood); }

.product-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); }
.product-hub-card { display: block; color: inherit; background: var(--color-surface); text-decoration: none; }
.product-hub-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #211c18; }
.product-hub-card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 0.9s var(--ease-standard); }
.product-hub-card:hover img { transform: scale(1.018); }
.product-hub-card > div { padding: 1.5rem; }
.product-hub-card > div > span { color: var(--color-oxblood); font-size: 0.65rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; }
.product-hub-card h2 { margin: 0.5rem 0 0.6rem; font: 400 clamp(1.7rem, 2.4vw, 2.4rem) / 1.05 var(--font-display); }
.product-hub-card p { margin: 0; color: var(--color-steel); line-height: 1.55; }
.product-hub-card b { display: inline-block; margin-top: 1.2rem; color: var(--color-oxblood); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; }

.product-page .faq__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); }

@media (max-width: 1000px) {
  .product-page .page-hero__inner, .product-page .faq__layout, .product-route { grid-template-columns: 1fr; }
  .product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-list, .product-hub-grid { grid-template-columns: 1fr; }
  .product-stages ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-stages li:nth-child(5) { grid-column: auto; }
  .product-stages li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .product-stages ol { grid-template-columns: 1fr; }
}

.product-page .page-hero__inner--single { grid-template-columns: 1fr; }
.product-page .page-hero__inner--single .page-hero__copy > p:not(.eyebrow) { max-width: 46rem; }