/* ============================================================
   Peakspan · Classic storefront + product detail
   Quiet-luxury health technology. Navy/obsidian canvas,
   cool-blue brand gradient, pulse-red laser accent (sparing).
   Sora display / Inter body. Original Peakspan work.
   NOTE: class names used by classic.mjs / cart-ui.mjs are
   preserved exactly (product-card, variant-option, spec-list,
   product-gallery__main/thumbs, etc.). Data hooks untouched.
   ============================================================ */

@font-face{font-family:Inter;src:url('../fonts/inter-300.woff2') format('woff2');font-weight:300;font-display:swap}

body.classic,body.detail-page{
  --ink:#05070c;
  --ink-1:#070b14;
  --ink-2:#0a1220;
  --ink-3:#0c1626;
  --ink-4:#10203a;
  --edge:rgba(150,180,224,.14);
  --edge-2:rgba(150,180,224,.26);
  --edge-strong:rgba(180,206,240,.4);
  --text:#eef3fb;
  --muted:rgba(212,224,244,.68);
  --faint:rgba(196,212,238,.44);
  --pulse:#ff4b3e;
  --pulse-soft:rgba(255,75,62,.5);
  --cool:#4aa8ff;
  --cool-deep:#2f6fb0;
  background:var(--ink);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}

/* ---- Shared chrome, retinted navy for the classic surfaces ---- */
body.classic .announcement,
body.detail-page .announcement{
  position:relative;background:var(--ink-1);color:rgba(226,236,250,.82);
  font-weight:600;letter-spacing:.16em;
  border-bottom:1px solid var(--edge);
}
body.classic .announcement::before,
body.detail-page .announcement::before{
  content:'';position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--pulse) 22%,var(--pulse) 78%,transparent);
  opacity:.9;
}
body.classic .announcement .shell,
body.detail-page .announcement .shell{min-height:34px}
body.classic .announcement span:first-child::before,
body.detail-page .announcement span:first-child::before{
  content:'';display:inline-block;width:6px;height:6px;margin-right:9px;
  border-radius:50%;background:var(--pulse);box-shadow:0 0 0 3px rgba(255,75,62,.16);
  vertical-align:middle;
}
body.classic .announcement span:nth-child(2),
body.detail-page .announcement span:nth-child(2){color:var(--faint);font-weight:500}

body.classic .site-header,
body.detail-page .site-header{
  background:rgba(6,10,18,.72);border-bottom:1px solid var(--edge);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
}
body.classic .bag-button,
body.detail-page .bag-button{border-color:var(--edge-2);border-radius:2px}
body.classic .bag-button:hover,
body.detail-page .bag-button:hover{border-color:var(--edge-strong);background:rgba(255,255,255,.04)}
body.classic .bag-button b,
body.detail-page .bag-button b{background:var(--pulse);color:#0a0f18}

/* Product rail → dark navigator band */
body.classic .product-rail,
body.detail-page .product-rail{background:var(--ink-1);color:var(--text);border-bottom:1px solid var(--edge)}
body.classic .product-rail a,
body.detail-page .product-rail a{border-right:1px solid var(--edge)}
body.classic .product-rail a:first-child,
body.detail-page .product-rail a:first-child{border-left:1px solid var(--edge)}
body.classic .product-rail a:hover,
body.detail-page .product-rail a:hover{background:rgba(74,168,255,.08)}
body.classic .product-rail small,
body.detail-page .product-rail small{color:var(--faint)}
body.classic .product-rail i,
body.detail-page .product-rail i{color:var(--pulse)}

/* Footer → deep navy with cool wash */
body.classic .site-footer,
body.detail-page .site-footer{
  background:linear-gradient(180deg,var(--ink-1),var(--ink));
  border-top:1px solid var(--edge);padding-top:78px;
}
body.classic .site-footer h3,
body.detail-page .site-footer h3{color:var(--faint)}
body.classic .site-footer a:hover,
body.detail-page .site-footer a:hover{color:var(--cool)}
body.classic .site-footer__bottom,
body.detail-page .site-footer__bottom{border-top-color:var(--edge)}

/* Buttons on classic surfaces */
body.classic .button,
body.detail-page .button{border-radius:2px;letter-spacing:.1em}
body.classic .button--signal,
body.detail-page .button--signal{
  background:var(--pulse);border-color:var(--pulse);color:#0b0f18;
  box-shadow:0 12px 34px -18px rgba(255,75,62,.9);
}
body.classic .button--signal:hover,
body.detail-page .button--signal:hover{background:#ff6152;border-color:#ff6152}
body.classic .button--light,
body.detail-page .button--light{
  background:transparent;color:var(--text);border-color:var(--edge-2);
}
body.classic .button--light:hover,
body.detail-page .button--light:hover{background:rgba(255,255,255,.06);border-color:var(--edge-strong)}

body.classic .eyebrow,body.detail-page .eyebrow{color:var(--cool)}

/* Card category eyebrows follow the homepage legend swatches:
   Cold = cool-blue (default above), Heat = amber, Light = pulse-red.
   Keyed off the stable data-add-product hook so it survives the JS
   grid re-render (class names on the static markup would be replaced). */
.product-card:has([data-add-product="layla-sauna"]) .eyebrow{color:#ff8a4b}
.product-card:has([data-add-product="led-face-mask"]) .eyebrow,
.product-card:has([data-add-product="led-panel-450"]) .eyebrow{color:var(--pulse)}

/* The shared cart drawer is a white surface; keep its text dark even though
   the classic/detail body text colour is light. */
body.classic .cart-drawer__panel,
body.detail-page .cart-drawer__panel{color:#050505}
body.classic .cart-drawer__header h2,
body.detail-page .cart-drawer__header h2{color:#050505}

/* ============================================================
   HERO
   ============================================================ */
.classic-main{background:var(--ink)}
.classic-hero{
  position:relative;min-height:min(88vh,880px);display:grid;align-items:end;
  overflow:hidden;border-bottom:1px solid var(--edge);isolation:isolate;
}
.classic-hero__media{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,7,12,.55) 0%,rgba(5,7,12,.2) 30%,rgba(5,7,12,.72) 78%,var(--ink) 100%),
    linear-gradient(90deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.5) 42%,rgba(5,7,12,0) 74%),
    image-set(url('../products/environments/chamber-960.webp') 1x type('image/webp')) center 38%/cover no-repeat;
}
@media (min-width:900px){
  .classic-hero__media{background-image:
    linear-gradient(180deg,rgba(5,7,12,.55) 0%,rgba(5,7,12,.2) 30%,rgba(5,7,12,.72) 78%,var(--ink) 100%),
    linear-gradient(90deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.5) 42%,rgba(5,7,12,0) 74%),
    url('../products/environments/chamber-1920.webp')}
}
.classic-hero__content{position:relative;z-index:2;padding:clamp(96px,13vw,180px) 0 clamp(58px,7vw,92px);max-width:900px}
.hero-kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero-kicker::before{content:'';width:44px;height:2px;background:var(--pulse);box-shadow:0 0 12px var(--pulse-soft)}
.hero-kicker span{font:600 11px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(226,236,250,.86)}
.hero-serif{margin:0 0 10px;font:italic 300 clamp(19px,2.6vw,27px)/1.35 Georgia,'Times New Roman',serif;color:rgba(224,235,250,.82);letter-spacing:.005em}
.classic-hero h1{
  margin:0 0 26px;font:800 clamp(56px,9.2vw,140px)/.84 Sora,sans-serif;
  letter-spacing:-.055em;color:#fff;
}
.classic-hero h1 span{
  background:linear-gradient(180deg,#eaf3ff 0%,var(--cool) 58%,var(--cool-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--cool);
}
.classic-hero p:not(.eyebrow):not(.hero-serif):not(.classic-hero__note){
  max-width:600px;margin:0 0 32px;color:rgba(226,236,250,.78);
  font:300 clamp(16px,1.9vw,20px)/1.6 Inter,sans-serif;
}
.classic-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.classic-hero__note{
  position:absolute;right:26px;bottom:24px;z-index:2;writing-mode:vertical-rl;
  color:rgba(226,236,250,.5);font-size:9px;letter-spacing:.22em;text-transform:uppercase;margin:0;
}

/* ============================================================
   CATALOGUE
   ============================================================ */
.catalogue{padding:clamp(72px,9vw,120px) 0 clamp(96px,11vw,140px);position:relative}
.section-heading{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:44px;
  align-items:end;margin-bottom:26px;
}
.section-heading h2{margin:0;font:800 clamp(40px,6.4vw,84px)/.92 Sora,sans-serif;letter-spacing:-.055em;color:var(--text)}
.section-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}

/* Category legend (Cold / Heat / Light) */
.category-legend{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  margin-bottom:40px;padding-top:22px;border-top:1px solid var(--edge);
}
.category-legend span{display:inline-flex;align-items:center;gap:9px;font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.category-legend i{width:8px;height:8px;border-radius:50%;font-style:normal;display:inline-block}
.category-legend .c-cold{background:var(--cool)}
.category-legend .c-heat{background:#ff8a4b}
.category-legend .c-light{background:var(--pulse)}
.category-legend em{margin-left:auto;font-style:normal;color:var(--faint);font:500 12px/1.5 Inter,sans-serif;letter-spacing:0;text-transform:none}

.catalogue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.product-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;min-width:0;
  background:var(--ink-3);border:1px solid var(--edge);border-radius:6px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
/* shadow painted once, then only composited */
.product-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);opacity:0;transition:opacity .4s ease}
.product-card:hover{transform:translateY(-4px);border-color:var(--edge-strong)}
.product-card:hover::after{opacity:1}
.product-card__media{position:relative;aspect-ratio:1.24/1;overflow:hidden;background:#0a1220;display:block}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.product-card:hover .product-card__media img{transform:scale(1.04)}
.product-card__media::after{
  content:'PRODUCT VISUAL · CONFIGURATION MAY DIFFER';
  position:absolute;left:14px;bottom:12px;padding:6px 9px;border-radius:2px;
  background:rgba(5,7,12,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:rgba(226,236,250,.72);font-size:7.5px;letter-spacing:.16em;
}
.product-card__body{display:grid;grid-template-columns:1fr auto;gap:16px 22px;padding:26px clamp(20px,2vw,30px) 28px}
.product-card__body>div:first-child{min-width:0}
.product-card__body .eyebrow{margin-bottom:10px}
.product-card__body h3{margin:0 0 9px;font:600 clamp(21px,2.5vw,30px)/1.05 Sora,sans-serif;letter-spacing:-.04em;color:var(--text)}
.product-card__body p{max-width:460px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.product-card__meta{text-align:right;align-self:start}
.product-card__meta strong{display:block;margin-bottom:6px;font:600 12px/1 Sora,sans-serif;color:var(--text)}
.product-card__meta span{color:var(--faint);font-size:11px;letter-spacing:.02em}
.product-card__actions{display:flex;grid-column:1/-1;gap:10px;padding-top:6px}
.product-card__actions .button{flex:1;min-height:52px}

/* ============================================================
   STANDARD / VALUES
   ============================================================ */
.classic-values{
  position:relative;background:var(--ink-2);color:var(--text);
  padding:clamp(80px,10vw,120px) 0;border-top:1px solid var(--edge);overflow:hidden;
}
.classic-values::before{
  content:'';position:absolute;top:-30%;right:-10%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(74,168,255,.1),transparent 70%);pointer-events:none;
}
.classic-values__grid{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(48px,7vw,88px);align-items:start}
.classic-values h2{margin:0;font:800 clamp(40px,6vw,78px)/.94 Sora,sans-serif;letter-spacing:-.055em;color:var(--text)}
.classic-values__grid>div:first-child p{margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.7;max-width:340px}
.value-list{border-top:1px solid var(--edge)}
.value-item{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--edge)}
.value-item b{font:600 13px/1 Sora,sans-serif;color:var(--pulse);letter-spacing:.05em}
.value-item h3{margin:0 0 9px;font:600 19px/1.25 Sora,sans-serif;color:var(--text)}
.value-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
body.detail-page{background:var(--ink);color:var(--text)}
.detail-breadcrumb{padding:26px 0 14px;font-size:11px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.detail-breadcrumb a{color:var(--muted);transition:color .16s ease}
.detail-breadcrumb a:hover{color:var(--cool)}

.product-detail{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(370px,.94fr);
  gap:clamp(32px,5vw,72px);padding:14px 0 clamp(70px,8vw,96px);align-items:start;
}

/* Gallery (scrolls) */
.product-gallery{min-width:0}
.product-gallery__main{
  position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:8px;
  background:linear-gradient(160deg,#0e1a2c,#070d18);border:1px solid var(--edge);
}
.product-gallery__main img{width:100%;height:100%;object-fit:cover}
.product-gallery__main span{
  position:absolute;left:14px;bottom:14px;padding:7px 10px;border-radius:2px;
  background:rgba(5,7,12,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:rgba(226,236,250,.72);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
}
.product-gallery__thumbs{display:flex;gap:10px;margin-top:12px;overflow:auto;padding-bottom:2px}
.product-gallery__thumbs button{
  flex:0 0 88px;width:88px;height:88px;padding:0;cursor:pointer;border-radius:5px;overflow:hidden;
  border:1px solid var(--edge);background:#0a1220;transition:border-color .2s ease,transform .2s ease;
}
.product-gallery__thumbs button:hover{border-color:var(--edge-strong);transform:translateY(-2px)}
.product-gallery__thumbs button[aria-current=true]{border-color:var(--pulse);box-shadow:0 0 0 1px var(--pulse)}
.product-gallery__thumbs img{width:100%;height:100%;object-fit:cover}

/* Buy column scrolls with the page. It is intentionally NOT sticky: this
   column is taller than the viewport, so position:sticky could never engage,
   and pinning only the buy box lets the specs/trust rows below it overlap it
   on scroll. The buy box therefore stays in normal flow. */
.product-info{padding-top:4px}
.product-info>.eyebrow{margin-bottom:14px}
.product-info h1{margin:0 0 18px;font:800 clamp(38px,4.9vw,64px)/.92 Sora,sans-serif;letter-spacing:-.055em;color:var(--text)}
.product-info__lead{margin:0 0 24px;color:var(--muted);font:300 16px/1.68 Inter,sans-serif;max-width:52ch}

.buy-box{
  padding:clamp(22px,2.4vw,30px);border:1px solid var(--edge);border-radius:10px;
  background:linear-gradient(180deg,rgba(16,32,58,.5),rgba(10,18,32,.5));
  box-shadow:0 30px 70px -44px rgba(0,0,0,.9);
}
.variant-picker{margin:0 0 20px;padding:0;border:0}
.variant-picker legend{width:100%;margin-bottom:12px;padding:0;font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--faint)}
.variant-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.variant-option{position:relative;min-width:0}
.variant-option input{position:absolute;opacity:0;pointer-events:none}
.variant-option label{
  display:block;height:100%;padding:15px 15px;border:1px solid var(--edge);border-radius:6px;cursor:pointer;
  font-size:11.5px;line-height:1.5;color:var(--faint);background:rgba(255,255,255,.015);
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.variant-option label b{display:block;margin-bottom:5px;font:600 13px Sora,sans-serif;color:var(--text);letter-spacing:-.01em}
.variant-option label:hover{border-color:var(--edge-strong)}
.variant-option input:checked+label{border-color:var(--cool);background:rgba(74,168,255,.09);box-shadow:inset 0 0 0 1px var(--cool);color:var(--muted)}
.variant-option input:focus-visible+label{outline:3px solid var(--cool);outline-offset:3px}

.price-block{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;padding:20px 0 18px;margin-top:2px;border-top:1px solid var(--edge)}
.price-block span{display:block;margin-bottom:7px;color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.16em}
.price-block strong{font:700 clamp(20px,2.4vw,26px)/1 Sora,sans-serif;color:var(--text);letter-spacing:-.02em}
.price-block small{max-width:170px;text-align:right;color:var(--faint);font-size:10.5px;line-height:1.45}

.product-buy{display:grid;gap:10px;margin-top:4px}
.product-buy .button--signal{min-height:60px;font-size:12.5px}
.whatsapp-button{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:54px;padding:0 20px;
  border:1px solid var(--edge-2);border-radius:2px;background:transparent;color:var(--text);cursor:pointer;
  font:600 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  transition:background .16s ease,border-color .16s ease;
}
.whatsapp-button:hover{background:rgba(74,168,255,.08);border-color:var(--cool)}
.whatsapp-button span{color:var(--cool);font-size:15px}
.product-note{margin:16px 0 0;color:var(--faint);font-size:10.5px;line-height:1.6}

.buy-specs{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--edge)}
.buy-specs li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:12.5px;line-height:1.4;border-bottom:1px solid var(--edge)}
.buy-specs li:last-child{border-bottom:0}
.buy-specs b{color:var(--faint);font-weight:500}
.buy-specs span{color:var(--text);text-align:right;font-weight:500}

.buy-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.buy-trust div{padding:14px;border:1px solid var(--edge);border-radius:6px;font-size:10.5px;line-height:1.45;color:var(--muted)}
.buy-trust b{display:block;margin-bottom:5px;font:600 11px Sora,sans-serif;color:var(--text)}

.back-to-shop{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:var(--muted);font:600 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:color .16s ease}
.back-to-shop:hover{color:var(--cool)}
.back-to-shop::before{content:'←';color:var(--pulse)}

/* Lower detail sections */
.detail-sections{background:var(--ink-2);color:var(--text);padding:clamp(72px,8vw,104px) 0;border-top:1px solid var(--edge)}
.detail-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(40px,6vw,72px)}
.detail-grid>div:first-child .eyebrow{margin-bottom:14px}
.detail-grid h2{position:sticky;top:110px;margin:0;font:800 clamp(34px,4.6vw,60px)/.96 Sora,sans-serif;letter-spacing:-.05em;color:var(--text)}
.spec-list{border-top:1px solid var(--edge)}
.spec-list div{display:grid;grid-template-columns:minmax(130px,.7fr) 1.3fr;gap:28px;padding:18px 0;border-bottom:1px solid var(--edge)}
.spec-list dt{color:var(--faint);font-size:12px;letter-spacing:.02em}
.spec-list dd{margin:0;font-size:14px;line-height:1.55;color:var(--text)}
.detail-grid h3{margin:44px 0 0;font:600 16px Sora,sans-serif;color:var(--text)}
.confirm-list{margin:20px 0 0;padding:0;list-style:none}
.confirm-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--edge);font-size:13px;line-height:1.6;color:var(--muted)}
.confirm-list li::before{content:'';width:9px;height:9px;margin-top:6px;border-radius:50%;border:1.5px solid var(--pulse)}

.faq{background:var(--ink);color:var(--text);padding:clamp(72px,8vw,104px) 0}
.faq>.shell>.eyebrow{margin-bottom:14px}
.faq h2{margin:0 0 34px;font:800 clamp(34px,4.6vw,60px)/.96 Sora,sans-serif;letter-spacing:-.05em;color:var(--text)}
.faq details{border-top:1px solid var(--edge)}
.faq details:last-child{border-bottom:1px solid var(--edge)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:600 15px Sora,sans-serif;color:var(--text);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--pulse);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details p{max-width:760px;margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.7}

/* ============================================================
   CHECKOUT (unchanged surface — preserved)
   ============================================================ */
.checkout-page{min-height:70vh;background:#fff;color:#050505;padding:60px 0 100px}
.checkout-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:70px}
.checkout-page h1{margin:0 0 15px;font:600 clamp(45px,7vw,88px)/.9 Sora,sans-serif;letter-spacing:-.07em}
.checkout-page__lead{margin:0 0 34px;color:var(--steel);line-height:1.6}
.checkout-lines{border-top:1px solid var(--line)}
.checkout-line{display:grid;grid-template-columns:110px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.checkout-line img{width:110px;height:120px;object-fit:cover;background:#eee}
.checkout-line h2{margin:0 0 7px;font:600 17px Sora,sans-serif}
.checkout-line p{margin:0 0 10px;color:var(--steel);font-size:12px;line-height:1.5}
.checkout-summary{position:sticky;top:124px;padding:28px;background:#050505;color:#fff}
.checkout-summary h2{margin:0 0 20px;font:600 27px Sora,sans-serif}
.checkout-summary__row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.18);font-size:13px}
.checkout-summary p{color:rgba(255,255,255,.62);font-size:12px;line-height:1.55}
.checkout-summary .button{width:100%;margin-top:10px}
.checkout-summary a:not(.button){display:block;margin-top:14px;text-align:center;color:rgba(255,255,255,.68);font-size:12px;text-decoration:underline}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .catalogue-grid{grid-template-columns:1fr}
  .classic-values__grid,.product-detail,.detail-grid,.checkout-layout{grid-template-columns:1fr}
  .detail-grid h2,.checkout-summary{position:relative;top:auto}
  .section-heading{grid-template-columns:1fr;gap:20px}
}

@media (max-width:680px){
  .classic-hero{min-height:640px}
  .classic-hero__media{background-position:62% 38%,center,center}
  .classic-hero__content{padding-bottom:48px}
  .product-card__body{grid-template-columns:1fr}
  .product-card__meta{text-align:left}
  .product-card__actions{display:grid}
  .category-legend em{margin-left:0;flex-basis:100%}
  .variant-options{grid-template-columns:1fr}
  .buy-trust{grid-template-columns:1fr}
  .price-block{flex-direction:column;align-items:flex-start;gap:8px}
  .price-block small{text-align:left;max-width:none}
  .checkout-line{grid-template-columns:78px 1fr}
  .checkout-line img{width:78px;height:88px}
  .checkout-line> :last-child{grid-column:2}
}

@media (prefers-reduced-motion:reduce){
  .product-card,.product-card__media img,.product-gallery__thumbs button{transition:none}
  .product-card:hover{transform:none}
  .product-card:hover .product-card__media img{transform:none}
}


/* ---------- Gate 3: scroll-driven reveals ---------- */
/* No-JS, no-observer. Non-supporting browsers keep the static end state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .catalogue-grid > .product-card,
    .detail-sections .detail-grid > *,
    .classic-values .value-item{
      animation:revealUp linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    @keyframes revealUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}
/* Skip render work for sections still below the fold */
.detail-sections,.classic-values,.faq{content-visibility:auto;contain-intrinsic-size:auto 640px}
.catalogue-grid > .product-card:nth-child(n+5){content-visibility:auto;contain-intrinsic-size:auto 520px}