/* Product detail (doc section 8.3). Built from the reference design language. */
.breadcrumb { padding-top: 1.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--muted-foreground); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current] { color: var(--foreground); }

/* minmax(0, ...) on these grids keeps admin-entered content (tables, long URLs) from widening the page on mobile. */
.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 1.5rem; padding-bottom: 5rem; }
.gallery { display: flex; flex-direction: column; gap: 1rem; }
.gallery-main { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 1.65rem; background: var(--secondary); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: .75rem; }
.thumb { width: 4.5rem; height: 4.5rem; overflow: hidden; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }

.product-info { display: flex; flex-direction: column; gap: 1.25rem; }
.product-info h1 { font-size: 2.5rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; color: #20322d; }
.ruo-subtitle { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); }
.product-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--muted-foreground); }
.product-price { display: flex; align-items: baseline; gap: .75rem; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.product-price .compare { font-size: 1rem; font-weight: 400; color: var(--muted-foreground); }
.field-group { display: flex; flex-direction: column; gap: .5rem; }
.field-label { font-size: .875rem; font-weight: 500; }
.product-info .variant { height: 2.5rem; padding: 0 1rem; font-size: .8125rem; }

.buy-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.qty { display: inline-flex; height: 3rem; align-items: center; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); }
.qty-btn { width: 2.75rem; height: 100%; font-size: 1.125rem; color: var(--muted-foreground); }
.qty-btn:hover { color: var(--foreground); }
.qty input { width: 2.75rem; height: 100%; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-to-cart { flex: 1; height: 3rem; min-width: 12rem; border-radius: 9999px; }
.add-to-cart:disabled { cursor: not-allowed; opacity: .5; }
.sku { font-family: var(--font-mono); font-size: .75rem; color: var(--muted-foreground); }

.product-coa { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; font-size: .875rem; color: var(--muted-foreground); }
.product-coa[hidden] { display: none; }
.product-coa svg { color: var(--primary); }
.product-coa a { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.product-trust { display: flex; flex-direction: column; gap: .625rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: .875rem; }
.product-trust li { display: flex; align-items: center; gap: .625rem; }
.product-trust svg { color: var(--primary); }

.details-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.details-main { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.details-main h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; }
.prose-sm { display: flex; flex-direction: column; gap: .875rem; min-width: 0; overflow-wrap: break-word; line-height: 1.7; color: color-mix(in srgb, var(--foreground) 85%, transparent); }
.prose-sm img { max-width: 100%; height: auto; }
.prose-sm table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .875rem; }
.prose-sm th, .prose-sm td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.references { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.25rem; list-style: decimal; font-size: .875rem; }
.references a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.details-specs { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); align-self: start; }
.spec-table { display: flex; flex-direction: column; }
.spec-table div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
.spec-table div:last-child { border-bottom: 0; }
.spec-table dt { color: var(--muted-foreground); }
.spec-table dd { font-family: var(--font-mono); font-size: .8125rem; text-align: right; word-break: break-word; }
.spec-note { font-size: .75rem; color: var(--muted-foreground); }
.lab-reports { display: flex; flex-direction: column; gap: .75rem; }
.lab-reports li { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); font-size: .8125rem; }
.lab-reports li:last-child { border-bottom: 0; padding-bottom: 0; }
.lab-reports a { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--primary); }
.components { display: flex; flex-direction: column; gap: .75rem; }
.components li { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); font-size: .875rem; }
.components li:last-child { border-bottom: 0; padding-bottom: 0; }
.mono { font-family: var(--font-mono); font-size: .75rem; }

.ruo-notice { display: flex; gap: 1rem; margin-top: 3rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); font-size: .875rem; line-height: 1.65; color: var(--muted-foreground); }
.ruo-notice svg { color: var(--primary); margin-top: .125rem; }
.ruo-notice strong { color: var(--foreground); }

.related .related-link { font-size: .875rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) {
  .product-info h1 { font-size: 3.25rem; }
}
@media (min-width: 1024px) {
  .product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .gallery { position: sticky; top: 8rem; }
  .details-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; }
}