/* 8 Seconds To Buy — picks (DE/EN). Layout owned by the site session; content lives in buy-data.json. */
.buy-root{grid-column:1/-1;display:flex;flex-direction:column;gap:18px}
.buy-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:26px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(244,195,79,.12),transparent 45%),rgba(15,17,24,.9)}
.buy-head h3{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.03em;margin:6px 0 8px}
.buy-head p{margin:0;color:#b9bec8;max-width:640px;font-size:16px}
.buy-lang{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:999px;padding:4px;background:#0c0e13}
.buy-lang button{border:0;background:none;color:#aab0ba;font-weight:900;letter-spacing:.06em;padding:9px 16px;border-radius:999px;cursor:pointer}
.buy-lang button.active{background:#f4c34f;color:#141414}
.buy-disclosure{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border:1px solid rgba(244,195,79,.28);border-radius:16px;background:rgba(244,195,79,.06)}
.buy-disclosure p{margin:0;font-size:13.5px;color:#d8dbe2;line-height:1.5}
.buy-root .product-cats{display:flex;gap:8px;flex-wrap:wrap}
.buy-root .product-cats button{padding:9px 16px;font-weight:700}
.product-cats button.active{background:#f4c34f;color:#141414;border-color:#f4c34f}
.buy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.buy-card{border:1px solid var(--line);background:rgba(15,17,24,.9);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .25s}
.buy-card:hover{border-color:rgba(244,195,79,.45);transform:translateY(-4px)}
.buy-card[hidden]{display:none}
.buy-card h4{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.buy-card-top{display:flex;align-items:center;gap:10px}
.buy-icon{font-size:30px}
.buy-cat{font-size:12px;letter-spacing:.14em;font-weight:900;color:var(--gold);text-transform:uppercase}
.buy-ad{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(244,195,79,.4);border-radius:999px;padding:3px 9px;color:#f4c34f;flex:none}
.buy-disclosure .buy-ad{margin-left:0}
.buy-ad-inline{margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.buy-rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:14px;color:#aab0ba}
.buy-rating b{color:#f4c34f;font-size:16px}
.buy-badge{font-size:12px;border:1px solid #f4c34f66;border-radius:999px;padding:2px 10px;color:#f4c34f}
.buy-what{margin:0;font-size:15.5px;line-height:1.55;color:#e4e7ec}
.buy-facts{display:grid;gap:8px}
.buy-facts>div{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.04);font-size:14px;color:#c6cbd3;line-height:1.45}
.buy-facts b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8f96a2}
.buy-facts .buy-caveat{background:rgba(244,195,79,.07);color:#ecd9a3}
.buy-facts .buy-caveat b{color:#c9ae63}
.buy-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.buy-cta{flex:1 1 100%;text-align:center;background:linear-gradient(135deg,#ffd76a,#f4c34f);color:#141414;font-weight:900;border-radius:16px;padding:15px 18px;text-decoration:none;font-size:16px;transition:filter .2s,transform .2s}
.buy-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.buy-alt{border:1px solid var(--line);color:#d4d7dd;border-radius:999px;padding:9px 15px;text-decoration:none;font-size:13.5px}
.buy-alt:hover{border-color:#f4c34f}
.buy-src{margin:0;font-size:12px;color:#7f8793;line-height:1.5}
.buy-how{border:1px solid var(--line);border-radius:18px;padding:0 20px;background:rgba(15,17,24,.7)}
.buy-how summary{cursor:pointer;padding:16px 0;font-weight:800;list-style:none}
.buy-how summary::after{content:"+";float:right;color:#f4c34f;font-size:20px}
.buy-how[open] summary::after{content:"–"}
.buy-how p{margin:0 0 18px;color:#aab0ba;line-height:1.6}
.buy-empty{color:#9aa1ad}
@media (max-width:680px){
  .buy-head{flex-direction:column;padding:20px}
  .buy-grid{grid-template-columns:1fr}
  .buy-card{padding:20px}
}

/* ================= v14: hero, category tiles, feature card, presentation mode ================= */
.buy-hero{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;padding:clamp(24px,4vw,46px);border:1px solid rgba(244,195,79,.25);border-radius:30px;overflow:hidden;background:radial-gradient(circle at 85% 20%,rgba(244,195,79,.22),transparent 45%),radial-gradient(circle at 0 100%,rgba(70,120,255,.16),transparent 50%),linear-gradient(160deg,#141109,#0b0c11)}
.bh-copy h3{font-size:clamp(34px,5.4vw,66px);line-height:.98;letter-spacing:-.045em;margin:10px 0 14px;background:linear-gradient(120deg,#fff,#ffe29a 55%,#f4c34f);-webkit-background-clip:text;background-clip:text;color:transparent}
.bh-copy p{font-size:clamp(16px,1.6vw,19px);color:#c9ced8;max-width:560px;margin:0}
.bh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0 18px}
.buy-show-btn{border:0;cursor:pointer;background:linear-gradient(135deg,#ffd76a,#f4c34f);color:#141414;font-weight:900;font-size:16px;border-radius:16px;padding:15px 22px;box-shadow:0 14px 40px -12px rgba(244,195,79,.65);transition:transform .2s,filter .2s}
.buy-show-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bh-pills{display:flex;flex-wrap:wrap;gap:8px}
.bh-pills span{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#c6cbd3;font-size:13.5px}
.bh-pills b{color:#f4c34f;font-size:16px;margin-right:2px}
.bh-art{position:relative;aspect-ratio:1;max-width:340px;justify-self:center;width:100%}
.bh-art img{position:absolute;inset:8%;width:84%;height:84%;object-fit:cover;border-radius:50%;box-shadow:0 30px 80px -20px rgba(70,120,255,.55);animation:bhfloat 7s ease-in-out infinite}
.bh-orb{position:absolute;border-radius:50%;border:1px solid rgba(244,195,79,.35);inset:0;animation:bhspin 30s linear infinite}
.bh-orb.o2{inset:-7%;border-style:dashed;opacity:.5;animation-duration:50s;animation-direction:reverse}
.bh-orb.o3{inset:-16%;opacity:.25;animation-duration:80s}
@keyframes bhfloat{50%{transform:translateY(-10px) scale(1.02)}}
@keyframes bhspin{to{transform:rotate(360deg)}}

.cat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.cat-tile{--cc:#f4c34f;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px 12px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 14%,#11141b),#0e1016);cursor:pointer;text-align:left;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.cat-tile:hover:not(.off){transform:translateY(-3px);border-color:var(--cc)}
.cat-tile.active{border-color:var(--cc);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 25%,transparent)}
.cat-tile.off{opacity:.45;cursor:default}
.ct-i{font-size:26px;line-height:1}.ct-l{font-weight:800;font-size:15px}
.ct-n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc);font-weight:900}

.buy-visual{--cc:#f4c34f;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--cc) 45%,#1a1c24),#0d0f14 75%);border:1px solid color-mix(in srgb,var(--cc) 35%,transparent)}
.buy-visual .bv-icon{font-size:clamp(46px,7vw,74px);filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));z-index:2;animation:bhfloat 6s ease-in-out infinite}
.buy-visual .bv-8{position:absolute;right:-6px;bottom:-34px;font-size:150px;font-weight:1000;line-height:1;color:color-mix(in srgb,var(--cc) 22%,transparent)}
.buy-visual .bv-ring{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--cc) 50%,transparent);animation:bhspin 40s linear infinite}
.buy-visual.big{aspect-ratio:auto;min-height:100%;border-radius:22px}
.buy-visual.big .bv-icon{font-size:clamp(80px,12vw,150px)}
.buy-visual.big .bv-8{font-size:280px;bottom:-70px}

.buy-feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;padding:22px;border:1px solid rgba(244,195,79,.35);border-radius:28px;background:radial-gradient(circle at 100% 0,rgba(244,195,79,.12),transparent 50%),rgba(15,17,24,.92)}
.bf-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.bf-body h4{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.03em}
.bf-tag{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#141414;background:#f4c34f;border-radius:999px;padding:4px 11px}
.buy-facts.two{grid-template-columns:1fr 1fr}
.buy-card .buy-visual{margin-bottom:2px}

.buy-cta-ad{margin-left:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:900;border:1px solid #14141466;border-radius:999px;padding:2px 7px;vertical-align:2px}
.buy-deals{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 24px;border:1px dashed rgba(244,195,79,.4);border-radius:22px;background:rgba(244,195,79,.05)}
.buy-deals b{font-size:18px}.buy-deals p{margin:4px 0 0;color:#aab0ba;font-size:14px;max-width:560px}
.buy-deals .buy-cta{flex:0 0 auto}
.buy-check{padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:rgba(15,17,24,.7)}
.buy-check h4{margin:0 0 10px;font-size:18px}
.buy-check ol{margin:0;padding-left:20px;display:grid;gap:6px;color:#c6cbd3;line-height:1.5}

/* ---- presentation mode (fullscreen slides, 8 s each) ---- */
.buy-show{position:fixed;inset:0;z-index:330;display:flex;flex-direction:column;background:radial-gradient(circle at 80% 10%,rgba(244,195,79,.18),transparent 45%),radial-gradient(circle at 10% 100%,rgba(70,120,255,.16),transparent 50%),#07080c;color:var(--text);overflow:auto}
.sh-stage{flex:1;display:grid;place-items:center;padding:clamp(18px,4vw,56px);animation:shIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes shIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.sh-intro{text-align:center;max-width:900px}
.sh-8{font-size:clamp(150px,26vw,300px);line-height:.85;font-weight:1000;background:linear-gradient(160deg,#fff6ce,#e4ab46 60%,#b87720);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 60px rgba(236,181,70,.35))}
.sh-intro h2{font-size:clamp(34px,6vw,76px);letter-spacing:-.04em;margin:8px 0 10px;line-height:1}
.sh-intro p{color:#b9bec8;font-size:clamp(16px,2vw,24px);margin:0}
.sh-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.sh-chips span{--cc:#f4c34f;padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--cc) 50%,transparent);background:color-mix(in srgb,var(--cc) 12%,transparent);font-weight:800}
.sh-assoc{margin-top:26px!important;font-size:14px!important;color:#8f96a2!important}
.sh-pick{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,50px);width:min(1180px,100%);align-items:stretch}
.sh-pick .buy-visual{min-height:clamp(260px,50vh,560px)}
.sh-text{display:flex;flex-direction:column;gap:16px;justify-content:center;min-width:0}
.sh-text h2{margin:0;font-size:clamp(30px,4.6vw,58px);line-height:1.05;letter-spacing:-.04em}
.sh-text .buy-what{font-size:clamp(16px,1.7vw,21px)}
.sh-text .buy-rating{font-size:clamp(14px,1.4vw,17px)}
.sh-text .buy-facts>div{font-size:clamp(14px,1.3vw,17px)}
.sh-text .buy-cta{font-size:clamp(16px,1.6vw,20px);padding:18px 22px}
.sh-count{font-size:13px;color:#8f96a2;font-weight:800}
.sh-bar{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,rgba(7,8,12,.96) 40%);padding-top:14px}
.sh-prog{height:4px;background:rgba(255,255,255,.1)}
.sh-prog i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#f4c34f,#ff7ab8);animation:shprog 8s linear forwards}
.sh-prog i.paused{animation-play-state:paused}
@keyframes shprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sh-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.sh-ctrl button{border:1px solid var(--line);background:#131620;color:#e9ecf2;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}
.sh-ctrl button:hover:not(:disabled){border-color:#f4c34f}
.sh-ctrl button:disabled{opacity:.35;cursor:default}
.sh-ctrl .ghost{background:none}
.sh-dots{display:flex;gap:8px;padding:0 6px}
.sh-dots button{width:10px;height:10px;padding:0;border-radius:50%;background:#3a3f4c;border:0}
.sh-dots button.on{background:#f4c34f;transform:scale(1.3)}

@media (max-width:900px){
  .buy-hero{grid-template-columns:1fr}.bh-art{max-width:220px;order:-1}
  .buy-feature,.sh-pick{grid-template-columns:1fr}
  .buy-visual.big{min-height:180px}
  .sh-pick .buy-visual{min-height:170px}
}
@media (max-width:680px){
  .buy-facts.two{grid-template-columns:1fr}
  .cat-tiles{grid-template-columns:repeat(3,1fr)}
  .buy-deals{padding:18px}.buy-deals .buy-cta{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.bh-art img,.bh-orb,.buy-visual .bv-icon,.buy-visual .bv-ring,.sh-stage{animation:none!important}}

/* ================= v15: AI artwork (hero + category icons), Amazon wording ================= */
.buy-hero{grid-template-columns:1fr;min-height:clamp(380px,46vw,520px);align-content:center;background:linear-gradient(90deg,rgba(7,8,12,.96) 0%,rgba(7,8,12,.86) 34%,rgba(7,8,12,.25) 66%,rgba(7,8,12,.05) 100%),url(assets/img/buy-hero.webp) 78% center/cover no-repeat,#0b0c11}
.bh-copy{max-width:600px;position:relative;z-index:2}
.ct-img{width:58px;height:58px;object-fit:cover;margin:-4px 0 0 -6px;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cat-tile:hover:not(.off) .ct-img{transform:scale(1.12) rotate(-3deg)}
.cat-tile.off .ct-img{filter:grayscale(.7) opacity(.8)}
.buy-visual .bv-img{position:relative;z-index:2;width:min(62%,150px);aspect-ratio:1;object-fit:cover;-webkit-mask-image:radial-gradient(circle,#000 56%,transparent 71%);mask-image:radial-gradient(circle,#000 56%,transparent 71%);filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));animation:bhfloat 6s ease-in-out infinite}
.buy-visual.big .bv-img{width:min(64%,300px)}
.buy-on{display:inline-block;margin-left:6px;font-size:.42em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#f4c34f;border:1px solid #f4c34f66;border-radius:999px;padding:2px 10px;vertical-align:middle;white-space:nowrap}
.buy-pricenote{flex:1 1 100%;text-align:center;font-size:12.5px;color:#9aa1ad;margin-top:-2px}
.sh-chips span img{width:30px;height:30px;object-fit:cover;vertical-align:middle;margin-right:8px;border-radius:50%}
.buy-show{background:linear-gradient(180deg,rgba(7,8,12,.82),rgba(7,8,12,.94)),url(assets/img/buy-hero.webp) center/cover no-repeat,#07080c}
@media (max-width:900px){
  .buy-hero{background:linear-gradient(180deg,rgba(7,8,12,.55) 0%,rgba(7,8,12,.9) 55%,rgba(7,8,12,.97) 100%),url(assets/img/buy-hero.webp) 70% top/cover no-repeat,#0b0c11;align-content:end;min-height:460px}
}
@media (prefers-reduced-motion:reduce){.buy-visual .bv-img{animation:none!important}}

/* ---- optional Amazon price widget (click to load) ---- */
.buy-widget{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:2px}
.buy-widget small{color:#8f96a2;font-size:12px;line-height:1.4}
.buy-widget-frame{width:100%;max-width:420px;border:1px solid var(--line);border-radius:14px;background:#fff}

/* legibility: compliance labels must never be tiny */
.buy-ad,.ct-n,.buy-cta-ad,.buy-ad-inline{font-size:12px}
.buy-on{font-size:12px;letter-spacing:.06em}