/* =========================================================
   Themes. The base site (css/styles.css) is "Classic"; each theme below
   overrides design tokens and adds a few structural touches.
   Selected with <html data-theme="glass|obsidian|editorial">.
   ========================================================= */

/* ---------- theme switcher ---------- */
.theme-switch{position:relative}
.theme-btn{gap:8px;white-space:nowrap}
.theme-btn svg{width:18px;height:18px;flex:none}
.theme-menu{position:absolute;right:0;top:calc(100% + 10px);width:272px;padding:8px;z-index:60;
  background:var(--menu-bg,#fff);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-hover);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.theme-menu[hidden]{display:none}
.theme-menu .tm-title{padding:8px 12px 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.theme-menu button.tm-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:calc(var(--r-sm) + 2px);text-align:left;color:var(--text);transition:background .2s}
.theme-menu button.tm-item:hover,.theme-menu button.tm-item:focus-visible{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.theme-menu .tm-sw{display:flex;flex:none}
.theme-menu .tm-sw i{width:18px;height:18px;border-radius:50%;border:2px solid var(--menu-bg,#fff);margin-left:-6px;box-shadow:0 0 0 1px var(--line)}
.theme-menu .tm-sw i:first-child{margin-left:0}
.theme-menu .tm-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.theme-menu .tm-txt b{font-size:.95rem}
.theme-menu .tm-txt small{color:var(--muted);font-size:.78rem}
.theme-menu .tm-ck{width:18px;height:18px;color:var(--accent);opacity:0;flex:none}
.theme-menu button[aria-checked="true"] .tm-ck{opacity:1}
.theme-menu button[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 8%,transparent)}
@media (max-width:560px){
  .theme-btn .theme-name{display:none}
  .theme-btn{padding:10px 12px}
  .theme-menu{position:fixed;left:12px;right:12px;top:72px;width:auto}
  .top-actions{gap:6px}
}

/* ===================== GLASS ===================== */
html[data-theme="glass"]{
  --font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --font-head:var(--font);
  --bg:#faf7f5; --bg-glow:rgba(225,29,72,.10);
  --card:rgba(255,255,255,.72); --card-h:rgba(255,255,255,.92); --menu-bg:rgba(255,255,255,.95);
  --line:rgba(139,15,12,.12); --text:#191214; --muted:#6b585c;
  --accent:#8b0f0c; --accent2:#e11d48; --radius:26px; --r-lg:34px;
  --shadow:0 12px 36px rgba(139,15,12,.07); --shadow-hover:0 24px 60px rgba(139,15,12,.15);
  --hover-line:rgba(225,29,72,.35); --btn-glow:rgba(225,29,72,.28); --btn-glow-h:rgba(225,29,72,.42);
  --grad:linear-gradient(120deg,#8b0f0c,#e11d48 55%,#f43f5e);
  --topbar-bg:rgba(250,247,245,.72); --card-blur:blur(18px) saturate(140%); --thumb-bg:#f3ece6; --badge-bg:rgba(255,255,255,.92);
  --b1:#e11d48; --b2:#fbbf24; --b3:#38bdf8; --b4:#ec4899; --b5:#8b0f0c;
  --bo1:.20; --bo2:.24; --bo3:.17; --bo4:.15; --bo5:.10;
}
html[data-theme="glass"] .topbar{border-bottom:1px solid var(--line)}
html[data-theme="glass"] .card,html[data-theme="glass"] .choice,html[data-theme="glass"] .specs{
  border-color:rgba(255,255,255,.75);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.85)}
html[data-theme="glass"] .card:hover,html[data-theme="glass"] .choice:hover{border-color:var(--hover-line)}

/* ===================== OBSIDIAN ===================== */
html[data-theme="obsidian"]{
  color-scheme:dark;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --font-head:"Space Grotesk","Plus Jakarta Sans",sans-serif; --head-weight:700;
  --bg:#09090b; --bg-glow:rgba(255,42,81,.10);
  --card:rgba(18,18,24,.82); --card-h:rgba(26,26,36,.95); --menu-bg:#15151c;
  --line:rgba(255,255,255,.11); --text:#f4f4f6; --muted:#a3a3ae;
  --accent:#ff2a51; --accent2:#ff5c7a; --radius:24px; --r-lg:28px;
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-hover:0 0 35px rgba(255,42,81,.35);
  --hover-line:#ff2a51; --btn-glow:rgba(255,42,81,.40); --btn-glow-h:rgba(255,42,81,.62);
  --grad:linear-gradient(120deg,#ff2a51,#ff7a93);
  --topbar-bg:rgba(9,9,11,.85); --thumb-bg:#15151c; --badge-bg:#15151c; --card-blur:blur(16px); --dot-border:#09090b;
  --b1:#00f0ff; --b2:#ff2a51; --b3:#ffb703; --b4:#10b981; --b5:#ff2a51;
  --bo1:.11; --bo2:.15; --bo3:.07; --bo4:.07; --bo5:.10;
}
html[data-theme="obsidian"] .bg{background:radial-gradient(circle at 50% 0%,#171118 0%,#09090b 65%)}
html[data-theme="obsidian"] .bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(circle at 50% 30%,#000 30%,transparent 80%)}
html[data-theme="obsidian"] .topbar{border-bottom:1px solid var(--line)}
html[data-theme="obsidian"] .brand-logo,html[data-theme="obsidian"] .hero-logo{background:#fff;border-radius:14px;padding:4px 8px}
html[data-theme="obsidian"] .choice.products{--glow:rgba(255,42,81,.30)}
html[data-theme="obsidian"] .choice.services{--glow:rgba(0,240,255,.24)}
html[data-theme="obsidian"] .choice .big-ico{color:var(--accent)}
html[data-theme="obsidian"] .card .more,html[data-theme="obsidian"] .choice .go{color:var(--accent2)}
html[data-theme="obsidian"] .btn-primary{background:linear-gradient(135deg,#c8102e,#e11d48);border:1px solid rgba(255,255,255,.18)}
html[data-theme="obsidian"] .dot{box-shadow:0 0 22px color-mix(in srgb,var(--c,#ff2a51) 55%,transparent)}

/* ===================== EDITORIAL ===================== */
html[data-theme="editorial"]{
  --font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --font-head:"Space Grotesk","Plus Jakarta Sans",sans-serif;
  --font-mono:"Space Mono",ui-monospace,Consolas,monospace; --font-script:"Space Mono",ui-monospace,monospace; --head-weight:700; --title-case:uppercase;
  --bg:#f5f2eb; --bg-glow:transparent;
  --card:#fff; --card-h:#fff; --menu-bg:#fff;
  --line:#141414; --text:#141414; --muted:#5a5752;
  --accent:#d00000; --accent2:#d00000; --radius:0px; --r-lg:0px; --r-pill:0px; --r-sm:0px; --dot-radius:0px; --dot-border:#141414;
  --shadow:4px 4px 0 #141414; --shadow-hover:8px 8px 0 #141414; --hover-line:#141414;
  --btn-glow:#141414; --btn-glow-h:#141414; --on-accent:#fff;
  --topbar-bg:#f5f2eb; --thumb-bg:#eae6dc; --badge-bg:#ffd100;
  --hover-lift:translate(-3px,-3px); --hover-lift-choice:translate(-4px,-4px);
}
html[data-theme="editorial"] .bg{background:#f5f2eb}
html[data-theme="editorial"] .bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(20,20,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.05) 1px,transparent 1px);background-size:32px 32px}
html[data-theme="editorial"] .bg i,html[data-theme="editorial"] .bg .fl{display:none}
html[data-theme="editorial"] .topbar{border-bottom:2px solid #141414;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="editorial"] .card,html[data-theme="editorial"] .choice,html[data-theme="editorial"] .specs,
html[data-theme="editorial"] .gallery .main,html[data-theme="editorial"] .btn,html[data-theme="editorial"] .back,
html[data-theme="editorial"] .count,html[data-theme="editorial"] .thumbs button,html[data-theme="editorial"] .theme-menu{border-width:2px;border-color:#141414}
html[data-theme="editorial"] .btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;box-shadow:3px 3px 0 #141414}
html[data-theme="editorial"] .btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #141414}
html[data-theme="editorial"] .btn-primary{background:#d00000;border:2px solid #141414;box-shadow:4px 4px 0 #141414}
html[data-theme="editorial"] .btn-primary:hover{box-shadow:6px 6px 0 #141414}
html[data-theme="editorial"] .back{box-shadow:2px 2px 0 #141414;font-family:var(--font-mono);text-transform:uppercase;font-size:.78rem}
html[data-theme="editorial"] .grad{background:#d00000;color:#fff;-webkit-text-fill-color:#fff;padding:0 .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-theme="editorial"] .dot{border:2px solid #141414;box-shadow:3px 3px 0 #141414}
html[data-theme="editorial"] .count{background:#ffd100;color:#141414;font-family:var(--font-mono);font-weight:700}
html[data-theme="editorial"] .tag,html[data-theme="editorial"] .card .more,html[data-theme="editorial"] .choice .go,
html[data-theme="editorial"] .specs dt,html[data-theme="editorial"] .specs h2,html[data-theme="editorial"] .crumbs{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em}
html[data-theme="editorial"] .specs dt,html[data-theme="editorial"] .crumbs{font-size:.78rem}
html[data-theme="editorial"] .script{color:#141414;font-size:clamp(1rem,2.4vw,1.3rem);letter-spacing:.08em;text-transform:uppercase;background:#ffd100;display:inline-block;padding:2px 10px;border:2px solid #141414}
html[data-theme="editorial"] body.home .script{font-size:clamp(.8rem,2.2vh,1rem)}
html[data-theme="editorial"] .pillar b{text-transform:uppercase;letter-spacing:.02em}
html[data-theme="editorial"] .choice::before{display:none}
html[data-theme="editorial"] .choice .big-ico{color:#141414}
html[data-theme="editorial"] .card.cat .cat-ico{background:var(--thumb-bg)}
html[data-theme="editorial"] .thumbs button[aria-current="true"]{border-color:#d00000}
html[data-theme="editorial"] .foot{border-top:2px solid #141414;font-family:var(--font-mono);text-transform:uppercase;font-size:.74rem}
html[data-theme="editorial"] .theme-menu{box-shadow:6px 6px 0 #141414;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="editorial"] .theme-menu .tm-sw i{border-color:#141414;box-shadow:none}