/* ============================================================
   FROST LABS — SINGLE PRODUCT (loaded only on is_product()).
   Design System v1.0, verbatim. Arrangement-only: every value is a
   v1.0 token. Shared primitives (buttons, badges, fields, tabs,
   product-card, coa-card, trust-strip, section-header, breadcrumb)
   come from base.css and are NOT redefined here.
   ============================================================ */

/* Jump-nav offset so in-page anchors clear the sticky navbar + product-nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 60px); }

/* Hero: gallery 51% / buy box 49% */
.product-hero { display: grid; grid-template-columns: 51fr 49fr; gap: var(--sp-12); align-items: start; padding-top: var(--sp-6); padding-bottom: var(--sp-16); }

/* Gallery — vertical thumbs + large render with premium lighting & glass sheen */
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-4); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--sp-3); }
.gallery__thumb { width: 76px; height: 76px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: #000 radial-gradient(70% 60% at 50% 42%, #101014, #000); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast); }
.gallery__thumb img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: lighten; }
.gallery__thumb.is-active,
.gallery__thumb:hover { border-color: var(--accent); }
.gallery__main { position: relative; aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); background: #000 radial-gradient(58% 60% at 50% 48%, #101014 0%, #000 72%); }
.gallery__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gallery__hero { width: auto; height: auto; max-width: 88%; max-height: 84%; object-fit: contain; mix-blend-mode: lighten; filter: contrast(1.08) brightness(1.03) saturate(1) drop-shadow(0 12px 20px rgba(0,0,0,0.5)); -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.18) 6%, transparent 12%); }
.gallery__main::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.06), transparent 40%); pointer-events: none; z-index: 1; }
.gallery__badge { position: absolute; top: 16px; left: 16px; }

/* Buy box — the conversion core; sticky on desktop */
.buy-box { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.buy-box__eyebrow { display: block; margin-bottom: var(--sp-3); }
.buy-box__title { color: var(--text-primary); font-size: clamp(30px,3.4vw,42px); letter-spacing: -0.03em; line-height: 1.08; }
.buy-box__rating { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: 13px; color: var(--text-secondary); }
.buy-box__rating .stars { color: var(--warning); font-size: 14px; letter-spacing: 1px; }
.buy-box__rating a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.buy-box__rating a:hover { color: var(--accent); }
.buy-box__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: 13px; color: var(--text-secondary); }
.buy-box__price { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-5); }
.buy-box__price .amount { font-size: 34px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.buy-box__price .amount del { color: var(--text-muted); font-weight: 600; font-size: 22px; margin-right: var(--sp-2); }
.buy-box__price .unit { font-size: 13px; color: var(--text-muted); }
.buy-box__rule { border: none; border-top: 1px solid var(--border-subtle); margin: var(--sp-6) 0; }
.buy-box__label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-3); }

/* Bundle selector (DS v1.0 component, verbatim) */
.bundle { display: flex; flex-direction: column; gap: var(--sp-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.bundle-opt { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.bundle-opt:hover { border-color: var(--accent); }
.bundle-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.bundle-opt:focus-within { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.bundle-opt__left { display: flex; align-items: center; gap: 10px; }
.bundle-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-default); display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast); flex-shrink: 0; }
.bundle-opt:has(input:checked) .bundle-radio { border-color: var(--accent); }
.bundle-opt:has(input:checked) .bundle-radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: block; }
.bundle-opt__left > span:not(.bundle-radio) { display: inline-flex; align-items: center; gap: var(--sp-3); }
.bundle-label { font-size: 14px; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--sp-3); }
.bundle-sub { font-size: 11px; color: var(--text-muted); }
.bundle-save { font-size: 11px; font-weight: 600; color: var(--success); }
.bundle-price { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.bundle-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-full); }

/* Quantity + Add to cart */
.buy-box__buy { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-elevated); overflow: hidden; flex-shrink: 0; }
.qty button { width: 44px; height: 48px; background: none; border: none; color: var(--text-primary); font-size: 18px; line-height: 1; transition: color var(--dur-fast); }
.qty button:hover { color: var(--accent); }
.qty input { width: 46px; height: 48px; text-align: center; background: none; border: none; border-inline: 1px solid var(--border-default); color: var(--text-primary); font-size: 15px; font-weight: 600; }
.buy-box__buy .btn { flex: 1; }
.buy-box__buy .btn.loading { opacity: 0.7; pointer-events: none; }
.buy-box__total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--bg-elevated); border-radius: var(--radius-md); }
.buy-box__total .label { font-size: 14px; color: var(--text-secondary); }
.buy-box__total .amount { font-size: 22px; font-weight: 700; color: var(--accent); }

/* Trust ticks + assurances */
.buy-box__ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); font-size: 13px; color: var(--text-secondary); }
.buy-box__ticks li { display: inline-flex; align-items: center; gap: 6px; }
.buy-box__ticks svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }
.buy-box__coa { margin-top: var(--sp-5); }
.assurances { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); }
.assurance { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 13px; color: var(--text-secondary); }
.assurance svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.buy-box__legal { margin-top: var(--sp-6); font-size: 12px; color: var(--text-muted); }

/* Sticky in-page jump nav */
.product-nav { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(12,12,14,0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
.product-nav__list { display: flex; gap: 4px; padding-block: var(--sp-3); overflow-x: auto; scrollbar-width: none; }
.product-nav__list::-webkit-scrollbar { display: none; }
.product-nav__list .tab { white-space: nowrap; }
.product-nav__list .tab[aria-current="page"] { background: var(--bg-overlay); color: var(--text-primary); }

/* Info sections */
.prose { max-width: 720px; }
.prose p { color: var(--text-secondary); margin-bottom: var(--sp-4); line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }

/* COA feature — the strongest trust element on the page */
.coa-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-10); align-items: center; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--sp-10); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.coa-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, var(--accent-dim), transparent 60%); pointer-events: none; }
.coa-feature__doc { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); background: var(--bg-elevated); aspect-ratio: 3/4; }
.coa-feature__doc img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.coa-feature__verified { position: absolute; bottom: 12px; left: 12px; right: 12px; }
.coa-feature__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.coa-feature__purity { font-size: 60px; font-weight: 800; color: var(--success); letter-spacing: -0.03em; line-height: 0.9; }
.coa-feature__purity small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-2); }
.coa-bar { height: 4px; background: var(--border-default); border-radius: var(--radius-full); overflow: hidden; margin: var(--sp-5) 0 var(--sp-6); }
.coa-bar__fill { height: 100%; background: var(--success); border-radius: var(--radius-full); }
.coa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.coa-stat dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-1); }
.coa-stat dd { font-size: 15px; color: var(--text-primary); font-weight: 600; }
.coa-feature__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.coa-feature__actions .btn { flex: 1 1 0; min-width: 160px; }

/* Specifications — Apple tech-spec layout */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-16); }
.spec-group { display: contents; }
.spec-group__title { grid-column: 1/-1; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding: var(--sp-6) 0 var(--sp-2); border-bottom: 1px solid var(--border-default); }
.spec-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle); margin: 0; }
.spec-row dt { font-size: 14px; color: var(--text-muted); }
.spec-row dd { font-size: 15px; color: var(--text-primary); }

/* Reviews */
.reviews__summary { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: center; padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--border-subtle); }
.reviews__avg { text-align: center; min-width: 160px; }
.reviews__score { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); }
.reviews__stars { color: var(--warning); font-size: 18px; letter-spacing: 2px; margin-top: var(--sp-2); }
.reviews__count { margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted); }
.reviews__bars { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 440px; }
.rbar { display: flex; align-items: center; gap: var(--sp-3); font-size: 12px; color: var(--text-muted); }
.rbar__num { width: 28px; text-align: right; }
.rbar__track { flex: 1; height: 6px; background: var(--bg-elevated); border-radius: var(--radius-full); overflow: hidden; }
.rbar__fill { height: 100%; background: var(--warning); border-radius: var(--radius-full); }
.review-list { display: grid; gap: var(--sp-4); }
.review { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); }
.review__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--accent); flex-shrink: 0; }
.review__name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--success); margin-top: 2px; }
.review__verified svg { width: 12px; height: 12px; }
.review__meta { margin-left: auto; text-align: right; }
.review__stars { color: var(--warning); font-size: 13px; letter-spacing: 1px; }
.review__date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.review__title { font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: var(--sp-1); }
.review p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.reviews__cta { margin-top: var(--sp-8); text-align: center; }
.review-form { max-width: 720px; margin-top: var(--sp-8); }
.review-form .field { margin-bottom: var(--sp-3); }

/* Sticky mobile Add-to-Cart bar */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); background: rgba(12,12,14,0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--border-subtle); }
.buybar__name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.buybar__price { font-size: 15px; font-weight: 700; color: var(--accent); }
.buybar .btn { margin-left: auto; }

/* Responsive */
@media (max-width:960px) {
  .product-hero { grid-template-columns: 1fr; gap: var(--sp-8); }
  .gallery { position: static; grid-template-columns: 1fr; gap: var(--sp-3); }
  .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; padding-bottom: var(--sp-1); }
  .buy-box { position: static; }
  .coa-feature { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); }
  .coa-feature__doc { max-width: 320px; margin-inline: auto; }
  .specs { grid-template-columns: 1fr; gap: 0; }
  .reviews__summary { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
  .reviews__bars { margin-inline: auto; }
  body { padding-bottom: 78px; }
  .buybar { display: flex; }
}
@media (max-width:600px) {
  .coa-stats { grid-template-columns: 1fr; }
  .assurances { grid-template-columns: 1fr; }
  .buy-box__buy { flex-wrap: wrap; }
}