/* 20 designs. Base tokens in style.css are "noir"; each block below overrides tokens and a few shapes.
   Active design = <html data-theme="…">, set by app.js from config.js `design` (or ?design= preview). */

/* ---------- shared layout variants (set per design in designs.js) ---------- */
/* hero: inset / arch / round / tilt – headline first, banner as a cropped picture below */
html:is([data-hero="inset"],[data-hero="arch"],[data-hero="round"],[data-hero="tilt"]) .hero{display:flex;flex-direction:column}
html:is([data-hero="inset"],[data-hero="arch"],[data-hero="round"],[data-hero="tilt"]) .hero-in{order:1;padding-bottom:22px}
html:is([data-hero="inset"],[data-hero="arch"],[data-hero="round"],[data-hero="tilt"]) .hero-img{order:2;margin:0 16px;border-radius:var(--r);overflow:hidden;background:none}
html:is([data-hero="inset"],[data-hero="arch"],[data-hero="round"],[data-hero="tilt"]) .hero-img img{aspect-ratio:4/3;object-fit:cover;object-position:center 26%;max-height:none}
html[data-hero="arch"] .hero-img{border-radius:999px 999px var(--r-sm) var(--r-sm);max-width:420px;align-self:center;width:calc(100% - 32px)}
html[data-hero="arch"] .hero-img img{aspect-ratio:3/4}
html[data-hero="arch"] .hero-in{text-align:center}html[data-hero="arch"] .hero h1,html[data-hero="arch"] .hero p{margin-left:auto;margin-right:auto}html[data-hero="arch"] .hero .ctas{justify-content:center}
html[data-hero="round"] .hero-img{border-radius:50%;width:min(340px,80vw);align-self:center;margin:0 auto}
html[data-hero="round"] .hero-img img{aspect-ratio:1}
html[data-hero="tilt"] .hero-img{transform:rotate(-2.5deg);border:3px solid #000;box-shadow:8px 8px 0 #000;border-radius:0;margin:6px 22px 10px}
/* hero: ambient – banner becomes a dark blurred backdrop behind the text */
html[data-hero="ambient"] .hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:min(92vh,720px)}
html[data-hero="ambient"] .hero-img{position:absolute;inset:0}
html[data-hero="ambient"] .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:blur(3px) brightness(.42) saturate(1.2);transform:scale(1.06)}
html[data-hero="ambient"] .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--bg) 98%)}
html[data-hero="ambient"] .hero-in{position:relative;z-index:1;padding-top:120px;padding-bottom:28px}
html[data-hero="ambient"] .hero h1{font-size:clamp(40px,11vw,76px);color:#fff}
html[data-hero="ambient"] .hero p{color:rgba(255,255,255,.82)}
/* hero: spotlight – no banner, a big product shot */
html[data-hero="spotlight"] .hero-img{display:none}
html[data-hero="spotlight"] .hero::before{content:"";display:block;margin:16px 16px 0;height:min(78vw,420px);border-radius:var(--r);background:url(img/p/40w_white_no_bg.webp?v=2) center/62% no-repeat,var(--img-bg)}
html[data-hero="spotlight"] .hero-in{padding-top:22px}
@media(min-width:900px){html[data-hero="spotlight"] .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1200px;margin:0 auto}html[data-hero="spotlight"] .hero-in{display:block}html[data-hero="spotlight"] .hero .trust{margin-top:22px}}
/* hero: type – editorial, words only */
html[data-hero="type"] .hero-img{display:none}
html[data-hero="type"] .hero-in{padding-top:40px;display:block}
html[data-hero="type"] .hero h1{font-size:clamp(52px,15vw,120px);line-height:.92;max-width:none}
html[data-hero="type"] .hero .eyebrow{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:18px}
/* cards: centred text */
html.l-center .card-b{text-align:center;align-items:center}
html.l-center .card-foot{flex-direction:column;gap:8px;width:100%}
html.l-center .card-foot .add{width:100%;border-radius:var(--pill);height:38px}
/* tab bar: floating pill */
html.l-float{--tab:78px}
html.l-float .tabbar{left:12px;right:12px;bottom:calc(10px + var(--safe-b));height:62px;padding-bottom:0;border-radius:22px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.25)}
/* header: logo on the left */
@media(max-width:899px){html.l-logo-left .top .logo{position:static;transform:none}html.l-logo-left .top #menuBtn{order:3}html.l-logo-left .top .top-actions{order:2}}

/* 2. Ivory Luxe */
html[data-theme="ivory"]{--bg:#f7f2e9;--bg2:#efe7d8;--card:#fffdf8;--line:#e0d5c1;--line-hover:#b9a988;--ink:#1b1712;--ink2:#4a4236;--muted:#7d725f;--lime:#b08a3e;--lime-ink:#fff;--glass:rgba(247,242,233,.92);--img-bg:linear-gradient(#fff,#f3ece0);--thumb-bg:#f3ece0;--serif:"Playfair Display",serif;--sans:Jost,sans-serif;--r:2px;--r-sm:2px;--pill:2px;--shadow:0 18px 40px rgba(60,40,10,.12);--danger:#b3261e;--ok:#3f7d4a}
html[data-theme="ivory"] .announce{background-color:#1b1712;color:#f0d9a6;letter-spacing:1.5px;text-transform:uppercase;font-size:11px}
html[data-theme="ivory"] .btn{letter-spacing:2px;text-transform:uppercase;font-size:13px}
html[data-theme="ivory"] .btn:not(.btn-ghost){background:#1b1712;color:#f7f2e9}
html[data-theme="ivory"] .price{color:#1b1712}
html[data-theme="ivory"] .eyebrow{color:#b08a3e}

/* 3. Pure Minimal */
html[data-theme="minimal"]{--bg:#fff;--bg2:#f6f6f6;--card:#fff;--line:#e6e6e6;--line-hover:#111;--ink:#111;--ink2:#444;--muted:#777;--lime:#111;--lime-ink:#fff;--glass:rgba(255,255,255,.94);--img-bg:#f4f4f4;--thumb-bg:#f4f4f4;--serif:Inter,sans-serif;--sans:Inter,sans-serif;--r:0px;--r-sm:0px;--pill:0px;--shadow:0 10px 30px rgba(0,0,0,.08);--h-ls:-.03em;--danger:#d00;--ok:#1a7f37}
html[data-theme="minimal"] .sec-head h2,html[data-theme="minimal"] .page-head h1,html[data-theme="minimal"] .hero h1,html[data-theme="minimal"] .pinfo h1{font-weight:800}
html[data-theme="minimal"] .card{border:0;background:none}
html[data-theme="minimal"] .card-b{padding:10px 0 0}
html[data-theme="minimal"] .card:hover{transform:none;box-shadow:none}
html[data-theme="minimal"] .price{color:#111}
html[data-theme="minimal"] .announce{background-color:#111;color:#fff}
html[data-theme="minimal"] .eyebrow{color:#777}
html[data-theme="minimal"] .cat{border:0}

/* 4. Electric Blue */
html[data-theme="electric"]{--bg:#060b1d;--bg2:#0b1430;--card:rgba(20,34,74,.55);--line:#1d2b55;--line-hover:#3a5cc7;--ink:#eaf1ff;--ink2:#b9c6e6;--muted:#8796bd;--lime:#22d3ee;--lime-ink:#031018;--glass:rgba(6,11,29,.85);--img-bg:radial-gradient(circle at 50% 40%,#eaf6ff 0,#c6d8f3 75%);--thumb-bg:#dfeaf9;--serif:Sora,sans-serif;--sans:Sora,sans-serif;--r:20px;--r-sm:14px;--h-ls:-.02em}
html[data-theme="electric"] body{background:radial-gradient(1200px 600px at 80% -10%,#123a8a55,transparent),radial-gradient(900px 500px at -10% 40%,#0e749033,transparent),var(--bg)}
html[data-theme="electric"] .card,html[data-theme="electric"] .box,html[data-theme="electric"] .cat{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-theme="electric"] .btn:not(.btn-ghost){background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#031018}
html[data-theme="electric"] .sec-head h2,html[data-theme="electric"] .page-head h1,html[data-theme="electric"] .hero h1,html[data-theme="electric"] .pinfo h1{font-weight:700}

/* 5. Sunset Glow */
html[data-theme="sunset"]{--bg:#fff4ec;--bg2:#ffe8da;--card:#fff;--line:#f7d4c0;--line-hover:#f08a5d;--ink:#2b1408;--ink2:#5b3a2a;--muted:#9a6f5b;--lime:#ff6a3d;--lime-ink:#fff;--glass:rgba(255,244,236,.92);--img-bg:radial-gradient(circle at 50% 35%,#fff 0,#ffe9dc 78%);--thumb-bg:#ffeee4;--serif:Outfit,sans-serif;--sans:Outfit,sans-serif;--r:26px;--r-sm:18px;--shadow:0 20px 40px rgba(240,100,60,.18)}
html[data-theme="sunset"] .btn:not(.btn-ghost),html[data-theme="sunset"] .add,html[data-theme="sunset"] .badge{background:linear-gradient(135deg,#ff8a3d,#ff3d6e);color:#fff}
html[data-theme="sunset"] .announce{background-color:transparent;background:linear-gradient(90deg,#ff8a3d,#ff3d6e);color:#fff}
html[data-theme="sunset"] .card{box-shadow:0 10px 30px rgba(240,100,60,.12);border:0}
html[data-theme="sunset"] .sec-head h2,html[data-theme="sunset"] .page-head h1,html[data-theme="sunset"] .hero h1,html[data-theme="sunset"] .pinfo h1{font-weight:800}

/* 6. Brutalist */
html[data-theme="brutal"]{--bg:#fffdf2;--bg2:#fff;--card:#fff;--line:#000;--line-hover:#000;--ink:#000;--ink2:#222;--muted:#444;--lime:#ffe500;--lime-ink:#000;--glass:#fffdf2;--img-bg:#f2efe2;--thumb-bg:#f2efe2;--serif:"Space Grotesk",sans-serif;--sans:"Space Grotesk",sans-serif;--r:0px;--r-sm:0px;--pill:0px;--shadow:6px 6px 0 #000;--h-case:uppercase;--h-ls:-.02em;--danger:#ff2d2d;--ok:#00a651}
html[data-theme="brutal"] .card,html[data-theme="brutal"] .cat,html[data-theme="brutal"] .box,html[data-theme="brutal"] .stats div,html[data-theme="brutal"] .why div,html[data-theme="brutal"] .compare,html[data-theme="brutal"] .perks{border:3px solid #000;box-shadow:6px 6px 0 #000}
html[data-theme="brutal"] .btn{border:3px solid #000;box-shadow:4px 4px 0 #000;font-family:"Space Mono",monospace;text-transform:uppercase}
html[data-theme="brutal"] .btn:active{transform:translate(4px,4px);box-shadow:none}
html[data-theme="brutal"] .card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #000}
html[data-theme="brutal"] .add{border:2px solid #000;border-radius:0}
html[data-theme="brutal"] .price{color:#000;background:#ffe500;padding:0 4px}
html[data-theme="brutal"] .announce{background-color:#000;color:#ffe500;font-family:"Space Mono",monospace}
html[data-theme="brutal"] .top,html[data-theme="brutal"] .tabbar{border-color:#000;border-width:3px}
html[data-theme="brutal"] .tabbar .on{color:#000;background:#ffe500}
html[data-theme="brutal"] .sec-head h2,html[data-theme="brutal"] .page-head h1,html[data-theme="brutal"] .hero h1,html[data-theme="brutal"] .pinfo h1{font-weight:700}
html[data-theme="brutal"] .eyebrow{color:#000;background:#ffe500;display:inline-block;padding:2px 6px}

/* 7. Emerald Pro */
html[data-theme="emerald"]{--bg:#06140f;--bg2:#0b1f18;--card:#0f2a20;--line:#1c3f31;--line-hover:#2f6b52;--ink:#eafff5;--ink2:#bfe3d2;--muted:#86b3a0;--lime:#3ee6a0;--lime-ink:#032015;--glass:rgba(6,20,15,.88);--img-bg:radial-gradient(circle at 50% 40%,#fff 0,#dff3ea 75%);--thumb-bg:#e6f5ee;--serif:Poppins,sans-serif;--sans:Poppins,sans-serif;--r:18px;--r-sm:12px}
html[data-theme="emerald"] .sec-head h2,html[data-theme="emerald"] .page-head h1,html[data-theme="emerald"] .hero h1,html[data-theme="emerald"] .pinfo h1{font-weight:700}

/* 8. Soft Pastel */
html[data-theme="pastel"]{--bg:#f6f1ff;--bg2:#efe6ff;--card:#fff;--line:#e4d7fb;--line-hover:#b79af0;--ink:#2a1f45;--ink2:#4f4470;--muted:#8a7fae;--lime:#8b5cf6;--lime-ink:#fff;--glass:rgba(246,241,255,.92);--img-bg:radial-gradient(circle at 50% 40%,#fff 0,#f1e9ff 78%);--thumb-bg:#f3edff;--serif:Nunito,sans-serif;--sans:Nunito,sans-serif;--r:30px;--r-sm:20px;--shadow:0 18px 40px rgba(120,80,200,.15)}
html[data-theme="pastel"] .card{border:0;box-shadow:0 8px 24px rgba(120,80,200,.10)}
html[data-theme="pastel"] .announce{background-color:#ffd6ec;color:#6b2150}
html[data-theme="pastel"] .add{background:#ffd6ec;color:#6b2150}
html[data-theme="pastel"] .sec-head h2,html[data-theme="pastel"] .page-head h1,html[data-theme="pastel"] .hero h1,html[data-theme="pastel"] .pinfo h1{font-weight:900}

/* 9. Industrial (list-style product cards on phones) */
html[data-theme="industrial"]{--bg:#1c1f22;--bg2:#24282c;--card:#2a2f34;--line:#3a4046;--line-hover:#ff7a00;--ink:#f1f3f4;--ink2:#c9cdd1;--muted:#9aa1a8;--lime:#ff7a00;--lime-ink:#160a00;--glass:rgba(28,31,34,.92);--img-bg:linear-gradient(#e9ecef,#d5d9dd);--thumb-bg:#dfe3e6;--serif:"Barlow Condensed",sans-serif;--sans:Barlow,sans-serif;--r:4px;--r-sm:3px;--pill:4px;--h-case:uppercase;--h-ls:.02em}
html[data-theme="industrial"] .announce{background:repeating-linear-gradient(-45deg,#ff7a00 0 14px,#1c1f22 14px 28px);color:#fff;text-shadow:0 1px 2px #000}
html[data-theme="industrial"] .btn{text-transform:uppercase;letter-spacing:1px;font-family:"Barlow Condensed",sans-serif;font-size:17px}
html[data-theme="industrial"] .sec-head h2,html[data-theme="industrial"] .page-head h1,html[data-theme="industrial"] .hero h1,html[data-theme="industrial"] .pinfo h1{font-weight:800}
@media(max-width:699px){
  html[data-theme="industrial"] main .grid{grid-template-columns:1fr;gap:10px}
  html[data-theme="industrial"] main .grid .card{flex-direction:row}
  html[data-theme="industrial"] main .grid .card-img{width:38%;flex:none}
  html[data-theme="industrial"] main .grid .card-b{justify-content:center}
  html[data-theme="industrial"] main .grid .heart{right:auto;left:calc(38% - 44px)}
}

/* 10. Royal Gold */
html[data-theme="royal"]{--bg:#1a0f1f;--bg2:#241529;--card:#2c1a32;--line:#45294d;--line-hover:#d4af37;--ink:#fbf3e4;--ink2:#e2d3bd;--muted:#b49fb0;--lime:#d4af37;--lime-ink:#1a0f1f;--glass:rgba(26,15,31,.9);--img-bg:radial-gradient(circle at 50% 40%,#fffaf0 0,#efe2c8 75%);--thumb-bg:#f3e9d6;--serif:"Playfair Display",serif;--sans:Lato,sans-serif;--r:6px;--r-sm:4px;--pill:6px}
html[data-theme="royal"] .card,html[data-theme="royal"] .cat,html[data-theme="royal"] .box{border-color:#5c3a64;outline:1px solid rgba(212,175,55,.25);outline-offset:-6px}
html[data-theme="royal"] .btn:not(.btn-ghost){background:linear-gradient(135deg,#f5d77a,#b8892a);letter-spacing:1px;text-transform:uppercase;font-size:13px}
html[data-theme="royal"] .sec-head h2,html[data-theme="royal"] .page-head h1,html[data-theme="royal"] .hero h1{font-style:italic}

/* 11. Nordic Calm */
html[data-theme="nordic"]{--bg:#f5f5f2;--bg2:#ecece7;--card:#fff;--line:#e1e1da;--line-hover:#9aa5b1;--ink:#22272e;--ink2:#4a525c;--muted:#7c858f;--lime:#4a6fa5;--lime-ink:#fff;--glass:rgba(245,245,242,.93);--img-bg:#f0efea;--thumb-bg:#f0efea;--serif:"DM Sans",sans-serif;--sans:"DM Sans",sans-serif;--r:12px;--r-sm:8px;--pill:10px;--shadow:0 16px 40px rgba(30,40,60,.08);--h-ls:-.02em}
html[data-theme="nordic"] section{padding:56px 0}
html[data-theme="nordic"] .card{border:0}
html[data-theme="nordic"] .announce{background-color:#dfe6ef;color:#22272e;font-weight:500}
html[data-theme="nordic"] .sec-head h2,html[data-theme="nordic"] .page-head h1,html[data-theme="nordic"] .hero h1,html[data-theme="nordic"] .pinfo h1{font-weight:500}

/* 12. Retro 70s */
html[data-theme="retro"]{--bg:#fbf0d9;--bg2:#f5e2bb;--card:#fff8ea;--line:#e2c58e;--line-hover:#c2502a;--ink:#3b1f0e;--ink2:#5e3a22;--muted:#8d6a4c;--lime:#c2502a;--lime-ink:#fff8ea;--glass:rgba(251,240,217,.94);--img-bg:radial-gradient(circle at 50% 40%,#fffaf0 0,#f8e6c2 78%);--thumb-bg:#f8e9cc;--serif:Shrikhand,cursive;--sans:Rubik,sans-serif;--r:22px;--r-sm:14px}
html[data-theme="retro"] .announce{background:linear-gradient(90deg,#e8a13a 0 33%,#d9702e 33% 66%,#c2502a 66%);color:#fff8ea}
html[data-theme="retro"] .card,html[data-theme="retro"] .cat,html[data-theme="retro"] .box{border:2px solid #3b1f0e}
html[data-theme="retro"] .btn{border:2px solid #3b1f0e}
html[data-theme="retro"] .add{background:#e8a13a;color:#3b1f0e;border:2px solid #3b1f0e}
html[data-theme="retro"] .sec-head h2,html[data-theme="retro"] .page-head h1,html[data-theme="retro"] .hero h1,html[data-theme="retro"] .pinfo h1{font-weight:400}

/* 13. Cyber Grid */
html[data-theme="cyber"]{--bg:#05040a;--bg2:#0c0a16;--card:#0f0c1d;--line:#2a2350;--line-hover:#ff2bd6;--ink:#f2eaff;--ink2:#cfc3f0;--muted:#8f84b8;--lime:#00f0ff;--lime-ink:#05040a;--glass:rgba(5,4,10,.88);--img-bg:radial-gradient(circle at 50% 40%,#f4f0ff 0,#c9c1e6 78%);--thumb-bg:#ddd7f0;--serif:Orbitron,sans-serif;--sans:Rajdhani,sans-serif;--r:0px;--r-sm:0px;--pill:0px;--h-case:uppercase;--h-ls:.04em}
html[data-theme="cyber"] body{background:linear-gradient(rgba(255,43,214,.07) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(0,240,255,.07) 1px,transparent 1px) 0 0/32px 32px,var(--bg);font-size:16px}
html[data-theme="cyber"] .card,html[data-theme="cyber"] .cat,html[data-theme="cyber"] .box{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
html[data-theme="cyber"] .card:hover{box-shadow:0 0 0 1px #ff2bd6,0 0 24px rgba(255,43,214,.4)}
html[data-theme="cyber"] .btn:not(.btn-ghost){background:linear-gradient(90deg,#00f0ff,#ff2bd6);color:#05040a;text-transform:uppercase;letter-spacing:2px}
html[data-theme="cyber"] .price{color:#00f0ff;text-shadow:0 0 10px rgba(0,240,255,.6)}
html[data-theme="cyber"] .eyebrow{color:#ff2bd6}
html[data-theme="cyber"] .announce{background-color:#ff2bd6;color:#05040a}
html[data-theme="cyber"] .sec-head h2,html[data-theme="cyber"] .page-head h1,html[data-theme="cyber"] .hero h1,html[data-theme="cyber"] .pinfo h1{font-weight:800;font-size:clamp(22px,6vw,40px)}

/* 14. Ocean Fresh */
html[data-theme="ocean"]{--bg:#fbfefe;--bg2:#eef8f8;--card:#fff;--line:#d6ecec;--line-hover:#0e9f9a;--ink:#0b2b33;--ink2:#2f5560;--muted:#6b8c93;--lime:#0e9f9a;--lime-ink:#fff;--glass:rgba(251,254,254,.93);--img-bg:radial-gradient(circle at 50% 40%,#fff 0,#e7f6f5 78%);--thumb-bg:#eaf6f6;--serif:Manrope,sans-serif;--sans:Manrope,sans-serif;--r:16px;--r-sm:12px;--shadow:0 18px 40px rgba(14,100,110,.12);--h-ls:-.02em}
html[data-theme="ocean"] .announce{background-color:#0b2b33;color:#9ff0e9}
html[data-theme="ocean"] .add{background:#e2f5f4;color:#0e9f9a}
html[data-theme="ocean"] .sec-head h2,html[data-theme="ocean"] .page-head h1,html[data-theme="ocean"] .hero h1,html[data-theme="ocean"] .pinfo h1{font-weight:800}

/* 15. Editorial */
html[data-theme="editorial"]{--bg:#fbfaf7;--bg2:#f2f0ea;--card:#fbfaf7;--line:#1a1a1a;--line-hover:#1a1a1a;--ink:#141414;--ink2:#333;--muted:#666;--lime:#c8102e;--lime-ink:#fff;--glass:rgba(251,250,247,.95);--img-bg:#efede6;--thumb-bg:#efede6;--serif:Fraunces,serif;--sans:"Source Sans 3",sans-serif;--r:0px;--r-sm:0px;--pill:0px;--shadow:none}
html[data-theme="editorial"] .grid{gap:0;border-top:1px solid #1a1a1a;border-left:1px solid #1a1a1a}
html[data-theme="editorial"] .grid .card{border:0;border-right:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a}
html[data-theme="editorial"] .card:hover{transform:none;box-shadow:none;background:#f2f0ea}
html[data-theme="editorial"] .card-t{font-family:Fraunces,serif;font-size:17px}
html[data-theme="editorial"] .sec-head{border-bottom:3px double #1a1a1a;padding-bottom:10px}
html[data-theme="editorial"] .top{border-bottom:3px double #1a1a1a}
html[data-theme="editorial"] .announce{background-color:#141414;color:#fbfaf7;font-family:Fraunces,serif;font-style:italic}
html[data-theme="editorial"] .price{color:#141414}
html[data-theme="editorial"] .eyebrow{color:#c8102e}
html[data-theme="editorial"] .add{border-radius:0;background:#141414;color:#fff}
html[data-theme="editorial"] .sec-head h2,html[data-theme="editorial"] .page-head h1,html[data-theme="editorial"] .hero h1,html[data-theme="editorial"] .pinfo h1{font-weight:700}

/* 16. Aurora Glass */
html[data-theme="aurora"]{--bg:#0b0d1f;--bg2:rgba(255,255,255,.06);--card:rgba(255,255,255,.08);--line:rgba(255,255,255,.14);--line-hover:rgba(255,255,255,.35);--ink:#fff;--ink2:#dfe3ff;--muted:#aab0d6;--lime:#7cf5c8;--lime-ink:#08101c;--glass:rgba(11,13,31,.6);--img-bg:radial-gradient(circle at 50% 40%,#fff 0,#e7e9ff 78%);--thumb-bg:#eceeff;--serif:"Plus Jakarta Sans",sans-serif;--sans:"Plus Jakarta Sans",sans-serif;--r:24px;--r-sm:16px}
html[data-theme="aurora"] body{background:radial-gradient(60% 50% at 10% 0%,#7c3aed66,transparent 70%),radial-gradient(50% 40% at 100% 20%,#06b6d455,transparent 70%),radial-gradient(60% 50% at 50% 100%,#10b98144,transparent 70%),#0b0d1f;background-attachment:fixed}
html[data-theme="aurora"] .card,html[data-theme="aurora"] .cat,html[data-theme="aurora"] .box,html[data-theme="aurora"] .stats div,html[data-theme="aurora"] .why div,html[data-theme="aurora"] .perks,html[data-theme="aurora"] .foot{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-theme="aurora"] .btn:not(.btn-ghost){background:linear-gradient(135deg,#7cf5c8,#7c9cff)}
html[data-theme="aurora"] .announce{background-color:transparent;background:linear-gradient(90deg,#7c3aed,#06b6d4,#10b981);color:#fff}
html[data-theme="aurora"] .sec-head h2,html[data-theme="aurora"] .page-head h1,html[data-theme="aurora"] .hero h1,html[data-theme="aurora"] .pinfo h1{font-weight:800}

/* 17. Crimson Bold */
html[data-theme="crimson"]{--bg:#141414;--bg2:#1c1c1c;--card:#202020;--line:#333;--line-hover:#e11d2e;--ink:#fafafa;--ink2:#d4d4d4;--muted:#9b9b9b;--lime:#e11d2e;--lime-ink:#fff;--glass:rgba(20,20,20,.9);--img-bg:radial-gradient(circle at 50% 40%,#fff 0,#e9e9e9 78%);--thumb-bg:#eee;--serif:Montserrat,sans-serif;--sans:Montserrat,sans-serif;--r:8px;--r-sm:6px;--pill:8px;--h-case:uppercase;--h-ls:-.01em}
html[data-theme="crimson"] .sec-head h2,html[data-theme="crimson"] .page-head h1,html[data-theme="crimson"] .hero h1,html[data-theme="crimson"] .pinfo h1{font-weight:900}
html[data-theme="crimson"] .sec-head h2::after{content:"";display:block;width:48px;height:4px;background:#e11d2e;margin-top:10px}
html[data-theme="crimson"] .btn{text-transform:uppercase;letter-spacing:1px}
html[data-theme="crimson"] .price{color:#fff}

/* 18. Sand & Clay */
html[data-theme="earth"]{--bg:#f4ede3;--bg2:#ebe1d2;--card:#faf6f0;--line:#dccdb7;--line-hover:#b5653f;--ink:#2e2219;--ink2:#54443a;--muted:#8a7765;--lime:#b5653f;--lime-ink:#fff;--glass:rgba(244,237,227,.93);--img-bg:radial-gradient(circle at 50% 40%,#fffdf9 0,#efe5d6 78%);--thumb-bg:#efe5d6;--serif:Lora,serif;--sans:Karla,sans-serif;--r:14px 4px;--r-sm:10px 3px;--pill:12px}
html[data-theme="earth"] .announce{background-color:#5b6b46;color:#f4ede3}
html[data-theme="earth"] .add{background:#5b6b46;color:#fff}
html[data-theme="earth"] .eyebrow{color:#5b6b46}
html[data-theme="earth"] .price{color:#b5653f}

/* 19. Midnight Violet */
html[data-theme="violet"]{--bg:#0d0b1e;--bg2:#141130;--card:#191537;--line:#2c2658;--line-hover:#a78bfa;--ink:#f3f0ff;--ink2:#d0c9f5;--muted:#9890c4;--lime:#a78bfa;--lime-ink:#fff;--glass:rgba(13,11,30,.88);--img-bg:radial-gradient(circle at 50% 40%,#fff 0,#ebe6ff 78%);--thumb-bg:#efebff;--serif:Urbanist,sans-serif;--sans:Urbanist,sans-serif;--r:22px;--r-sm:14px;--h-ls:-.02em}
html[data-theme="violet"] .btn:not(.btn-ghost),html[data-theme="violet"] .add,html[data-theme="violet"] .badge{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
html[data-theme="violet"] .announce{background-color:transparent;background:linear-gradient(90deg,#6d28d9,#db2777);color:#fff}
html[data-theme="violet"] .price{background:linear-gradient(90deg,#c4b5fd,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="violet"] .sec-head h2,html[data-theme="violet"] .page-head h1,html[data-theme="violet"] .hero h1,html[data-theme="violet"] .pinfo h1{font-weight:800}

/* 20. Volt Yellow */
html[data-theme="volt"]{--bg:#0a0a0a;--bg2:#141414;--card:#161616;--line:#2b2b2b;--line-hover:#ffd400;--ink:#fff;--ink2:#d6d6d6;--muted:#9d9d9d;--lime:#ffd400;--lime-ink:#0a0a0a;--glass:rgba(10,10,10,.92);--img-bg:#f1f1f1;--thumb-bg:#f1f1f1;--serif:"Archivo Black",sans-serif;--sans:Archivo,sans-serif;--r:0px;--r-sm:0px;--pill:0px;--h-case:uppercase;--h-ls:-.02em}
html[data-theme="volt"] .sec-head h2,html[data-theme="volt"] .page-head h1,html[data-theme="volt"] .hero h1,html[data-theme="volt"] .pinfo h1{font-weight:400}
html[data-theme="volt"] .card{border-width:0 0 4px;border-color:#ffd400}
html[data-theme="volt"] .btn{text-transform:uppercase;font-family:"Archivo Black",sans-serif;font-weight:400;letter-spacing:.5px}
html[data-theme="volt"] .stats div{background:#ffd400;border:0}
html[data-theme="volt"] .stats b{color:#0a0a0a}
html[data-theme="volt"] .stats span{color:#0a0a0a}
html[data-theme="minimal"] .top .logo img{animation:none}