/* Theme variants. Colors, fonts and radii come from the active theme (variables set in <head>); the html data attributes below switch the look.
   Loaded after every other stylesheet. Without data-tk (before the update runs) nothing here applies. */

/* shapes */
html[data-tk] .glass{border-radius:var(--r-card)}
html[data-tk] .foot .glass{border-radius:var(--r-card)}
html[data-tk] .bar{border-radius:var(--r-bar)}
html[data-tk] .btn{border-radius:var(--r-btn)}
html[data-tk] .field,html[data-tk] .pill,html[data-tk] .qty,html[data-tk] .nav a{border-radius:min(var(--r-btn),999px)}
html[data-tk][data-rad="sharp"] .field,html[data-tk][data-rad="sharp"] .pill,html[data-tk][data-rad="sharp"] .qty,html[data-tk][data-rad="sharp"] .nav a,html[data-tk][data-rad="sharp"] .chip,html[data-tk][data-rad="sharp"] .st{border-radius:4px}
html[data-tk][data-rad="sharp"] .stage,html[data-tk][data-rad="sharp"] .stage3d,html[data-tk][data-rad="sharp"] .ord,html[data-tk][data-rad="sharp"] .line,html[data-tk][data-rad="sharp"] .co .field,html[data-tk][data-rad="sharp"] .acct .field,html[data-tk][data-rad="sharp"] .opt select{border-radius:6px}
html[data-tk][data-rad="soft"] .stage,html[data-tk][data-rad="soft"] .stage3d,html[data-tk][data-rad="soft"] .ord,html[data-tk][data-rad="soft"] .line{border-radius:12px}
html[data-tk][data-rad="sharp"] .ibtn,html[data-tk][data-rad="soft"] .ibtn{border-radius:10px}

/* buttons */
html[data-tk][data-btn="solid"] .btn:not(.ghost){background:var(--accent);box-shadow:none}
html[data-tk][data-btn="solid"] .btn:not(.ghost):hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
html[data-tk][data-btn="outline"] .btn:not(.ghost){background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
html[data-tk][data-btn="outline"] .btn:not(.ghost):hover{background:var(--accent);color:var(--on-accent)}

/* cards and panels */
html[data-tk][data-card="flat"] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:transparent;background:var(--glass-hi)}
html[data-tk][data-card="bordered"] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:2px solid var(--edge);background:color-mix(in srgb,var(--bg) 92%,var(--ink))}

/* header */
html[data-tk][data-hdr="bar"] .top{padding-block:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
html[data-tk][data-hdr="bar"] .bar{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding-block:10px}
html[data-tk][data-hdr="transparent"] .top{position:absolute;inset-inline:0;top:0}
html[data-tk][data-hdr="transparent"] .bar{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* spacing */
html[data-tk][data-dens="compact"] .sec{padding-block:14px 4px}
html[data-tk][data-dens="compact"] .hero{padding-block:18px 12px}
html[data-tk][data-dens="spacious"] .sec{padding-block:48px 14px}
html[data-tk][data-dens="spacious"] .hero{padding-block:60px 40px}

/* page background */
html[data-tk][data-bgs="solid"] body::after{background:var(--bg)}
html[data-tk][data-bgs="gradient"] body::after{background:linear-gradient(160deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,var(--accent) 30%) 55%,color-mix(in srgb,var(--bg) 60%,var(--accent2) 40%) 100%)}

/* effects: bubbles (canvas), light rays, glowing orbs */
html[data-tk]:not([data-fx*="b"]) #bub{display:none}
html[data-tk]:not([data-fx*="r"]) .rays{display:none}
html[data-tk]:not([data-fx*="o"]) .orbs{display:none}

/* theme editor preview: no page scroll lock and no overlays that need a click */
html[data-pv] .fab,html[data-pv] .chatw{pointer-events:none}

/* General mode (SITE_PROFILE=general): no depth gauge, underwater layers or fish button; the normal page scrollbar comes back. */
html[data-profile="general"] #gauge,html[data-profile="general"] #dbadge,html[data-profile="general"] #abyss,html[data-profile="general"] #rays,html[data-profile="general"] .fishbtn{display:none!important}
html[data-profile="general"]{scrollbar-width:auto;-ms-overflow-style:auto}
html[data-profile="general"]::-webkit-scrollbar{display:block}

/* ---- signature looks (platform customer themes only; every rule needs its own data attribute, so the shop is untouched) ---- */
html[data-sig]::before,html[data-sig]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2}
html[data-sig="grain"]::after{opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
html[data-sig="dots"]::after{opacity:.1;background:radial-gradient(var(--ink) 1.2px,transparent 1.4px) 0 0/22px 22px}
html[data-sig="grid"]::after{opacity:.07;background:linear-gradient(var(--ink) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--ink) 1px,transparent 1px) 0 0/44px 44px}
html[data-sig="stripes"]::after{opacity:.06;background:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 16px)}
html[data-sig="spotlight"]::after{opacity:.16;background:radial-gradient(520px 380px at 25% 18%,var(--accent),transparent 70%),radial-gradient(420px 320px at 80% 85%,var(--hot),transparent 70%);animation:sigdrift 26s ease-in-out infinite alternate}
html[data-sig="mesh"]::after{opacity:.13;background:radial-gradient(40vw 40vw at 10% 10%,var(--accent),transparent 60%),radial-gradient(45vw 45vw at 90% 20%,var(--accent2),transparent 60%),radial-gradient(40vw 40vw at 50% 100%,var(--hot),transparent 60%);background-size:140% 140%;animation:sigdrift 32s ease-in-out infinite alternate}
html[data-sig="sparkle"]::after{opacity:.5;background:radial-gradient(var(--hot) 1.5px,transparent 2px) 12% 18%/170px 150px,radial-gradient(var(--accent) 1.5px,transparent 2px) 63% 52%/230px 190px,radial-gradient(var(--ink) 1px,transparent 1.6px) 38% 80%/130px 110px;animation:sigtwinkle 4s ease-in-out infinite alternate}
html[data-sig="confetti"]::after{opacity:.16;background:conic-gradient(from 20deg at 20% 30%,var(--accent) 0 25%,transparent 0) 0 0/90px 90px,conic-gradient(from 200deg at 70% 70%,var(--hot) 0 25%,transparent 0) 0 0/110px 110px,conic-gradient(from 110deg at 45% 55%,var(--accent2) 0 25%,transparent 0) 0 0/70px 70px;animation:sigfall 18s linear infinite}
html[data-sig="ribbon"]::before{inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--hot),var(--accent));background-size:300% 100%;animation:sigslide 9s linear infinite}
html[data-sig="edge"]::after{inset:8px;border:2px solid var(--accent);border-radius:calc(var(--r-card,14px) + 6px);opacity:.35;box-shadow:0 0 22px var(--accent),inset 0 0 22px var(--accent);animation:sigpulse 5s ease-in-out infinite alternate}
html[data-sig="waves"]::after{inset:auto 0 0;height:46px;opacity:.16;background:radial-gradient(circle at 50% 0,var(--accent) 0 58%,transparent 60%) 0 0/72px 46px repeat-x;animation:sigwave 14s linear infinite}
html[data-sig="paper"]::after{opacity:.5;background:repeating-linear-gradient(0deg,rgba(128,100,60,.045) 0 1px,transparent 1px 5px);box-shadow:inset 0 0 180px rgba(90,60,20,.14)}
@keyframes sigdrift{to{background-position:60% 40%;transform:translate3d(-2%,2%,0)}}
@keyframes sigtwinkle{from{opacity:.15}to{opacity:.6}}
@keyframes sigfall{to{background-position:0 90px,0 110px,0 70px}}
@keyframes sigslide{to{background-position:300% 0}}
@keyframes sigpulse{to{opacity:.12}}
@keyframes sigwave{to{background-position:72px 0}}
@media (prefers-reduced-motion:reduce){html[data-sig]::before,html[data-sig]::after{animation:none!important}}

/* cards */
html[data-hov="lift"] .card,html[data-hov="lift"] .btile,html[data-hov="lift"] .ctile{transition:transform .25s,box-shadow .25s}
html[data-hov="lift"] .card:hover,html[data-hov="lift"] .btile:hover,html[data-hov="lift"] .ctile:hover{transform:translateY(-7px);box-shadow:0 18px 30px -12px rgba(0,0,0,.35)}
html[data-hov="glow"] .card:hover,html[data-hov="glow"] .btile:hover,html[data-hov="glow"] .ctile:hover{box-shadow:0 0 0 2px var(--accent),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent)}
html[data-hov="brutal"] .card,html[data-hov="brutal"] .btile,html[data-hov="brutal"] .ctile{transition:transform .15s,box-shadow .15s}
html[data-hov="brutal"] .card:hover,html[data-hov="brutal"] .btile:hover,html[data-hov="brutal"] .ctile:hover{transform:translate(-4px,-4px);box-shadow:7px 7px 0 var(--accent)}
html[data-hov="zoom"] .card .art,html[data-hov="zoom"] .card img,html[data-hov="zoom"] .ctile img{transition:transform .5s}
html[data-hov="zoom"] .card:hover .art,html[data-hov="zoom"] .card:hover img,html[data-hov="zoom"] .ctile:hover img{transform:scale(1.09)}
/* headings */
html[data-hd="bar"] .sec h2::after{content:"";display:block;width:54px;height:4px;margin-top:10px;border-radius:4px;background:var(--accent)}
html[data-hd="gradient"] .sec h2,html[data-hd="gradient"] h1{background:linear-gradient(100deg,var(--accent),var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-hd="boxed"] .sec h2{display:inline-block;padding:.12em .55em;background:var(--accent);color:var(--on-accent);border-radius:var(--r-btn,8px)}
html[data-hd="mark"] .sec h2{display:inline;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--accent) 38%,transparent) 58%);padding-inline:.15em}
/* buttons */
html[data-bfx="shine"] .btn{position:relative;overflow:hidden}
html[data-bfx="shine"] .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
html[data-bfx="shine"] .btn:hover::after{transform:translateX(120%)}
html[data-bfx="pulse"] .btn:not(.ghost){animation:bfxpulse 2.6s ease-out infinite}
@keyframes bfxpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
html[data-bfx="press"] .btn:not(.ghost){box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 60%,#000);transition:transform .1s,box-shadow .1s}
html[data-bfx="press"] .btn:not(.ghost):active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 60%,#000)}
html[data-bfx="rise"] .btn{transition:transform .2s,box-shadow .2s}
html[data-bfx="rise"] .btn:hover{transform:translateY(-3px);box-shadow:0 10px 18px -8px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){html[data-bfx="pulse"] .btn{animation:none}}

/* ---- structure variants (platform customer themes only): header, hero, product card and footer layouts ---- */
@media (min-width:861px){
html[data-nav="center"] .bar{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". logo tools" "nav nav nav";row-gap:6px;justify-items:center}
html[data-nav="center"] .bar .logo{grid-area:logo}
html[data-nav="center"] .bar .nav{grid-area:nav;margin:0;justify-content:center}
html[data-nav="center"] .bar .tools2{grid-area:tools;justify-self:end;margin:0}
html[data-nav="center"] .bar .logo svg{width:48px;height:48px}
}
html[data-tk][data-nav="pill"][data-hdr] .top{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-block:14px}
html[data-tk][data-nav="pill"][data-hdr] .bar{width:fit-content;max-width:100%;margin-inline:auto;border-radius:999px;border:2px solid var(--ink);background:var(--bg);box-shadow:6px 6px 0 var(--accent);padding:6px 10px 6px 18px}
html[data-nav="pill"][dir="rtl"] .bar{padding:6px 18px 6px 10px}
html[data-tk][data-nav="bold"][data-hdr] .top{background:var(--accent);border:0;color:var(--on-accent);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-nav="bold"] .top .logo,html[data-nav="bold"] .top .nav a,html[data-nav="bold"] .top .ibtn,html[data-nav="bold"] .top .logo .wm{color:var(--on-accent)}
html[data-nav="bold"] .top .nav a:hover{background:rgba(255,255,255,.18);color:var(--on-accent)}
html[data-nav="bold"] .top .logo .wm .sh{background:none;color:inherit;-webkit-text-fill-color:currentColor}
html[data-nav="bold"] .top .ibtn{background:rgba(255,255,255,.16);border-color:transparent}
html[data-tk][data-nav="line"][data-hdr] .top{background:var(--bg);border-bottom:4px solid var(--ink);backdrop-filter:none}
html[data-nav="line"] .nav a{border-radius:0!important;font-weight:700}
html[data-nav="line"] .nav a:hover{background:transparent;box-shadow:inset 0 -4px var(--accent)}
html[data-nav="line"] .logo .wm{text-transform:uppercase}

/* hero */
html[data-tk][data-hero="left"] .bk-hero.show-solo{max-width:none!important;border-inline-start:8px solid var(--accent);padding-inline-start:32px;margin-block:12px}
html[data-hero="left"] .bk-hero h1{font-size:clamp(40px,7vw,92px);line-height:1}
html[data-hero="center"] .bk-hero.show-solo{text-align:center;margin-inline:auto}
html[data-hero="center"] .bk-hero .cta{justify-content:center}
html[data-hero="center"] .bk-hero p.lead{margin-inline:auto}
@media (min-width:861px){
html[data-tk][data-hero="split"] .bk-hero.show-solo{grid-template-columns:1.25fr .75fr!important;max-width:none!important;gap:40px}
html[data-hero="split"] .bk-hero.show-solo::after{content:"";aspect-ratio:1;border-radius:var(--r-card);background:radial-gradient(circle at 30% 30%,var(--accent2),transparent 55%),linear-gradient(135deg,var(--accent),var(--secondary,var(--accent2)));box-shadow:0 30px 70px -30px var(--accent);animation:herofloat 7s ease-in-out infinite}
}
@keyframes herofloat{50%{transform:translateY(-14px) rotate(2deg)}}
html[data-tk][data-hero="band"] .bk-hero.show-solo{max-width:none!important;padding:clamp(34px,6vw,76px);border-radius:var(--r-card);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)));color:var(--on-accent);margin-block:14px}
html[data-hero="band"] .bk-hero .eyebrow,html[data-hero="band"] .bk-hero p.lead{color:inherit;opacity:.92}
html[data-hero="band"] .bk-hero h1 span{background:none;color:inherit;-webkit-text-fill-color:currentColor;text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:8px}
html[data-hero="band"] .bk-hero .btn:not(.ghost){background:var(--on-accent);color:var(--accent);border:0}
html[data-hero="band"] .bk-hero .btn.ghost{background:transparent;color:inherit;border:2px solid currentColor}
html[data-tk][data-hero="frame"] .bk-hero.show-solo{max-width:960px!important;padding:clamp(26px,4vw,52px);border:3px solid var(--ink);background:var(--bg);box-shadow:12px 12px 0 var(--accent);margin-block:22px;border-radius:min(var(--r-card),28px)}

/* product cards */
html[data-pc="tall"] .card{text-align:center;align-items:center}
html[data-pc="tall"] .card .stage{aspect-ratio:1;width:80%;border-radius:50%}
html[data-pc="tall"] .card .row{justify-content:center}
html[data-pc="row"] .grid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
html[data-pc="row"] .card{display:grid;grid-template-columns:40% 1fr;column-gap:16px;row-gap:6px;align-content:center}
html[data-pc="row"] .card .stage{grid-row:1/span 6;aspect-ratio:1}
html[data-pc="row"] .card>:not(.stage):not(.badge){grid-column:2}
html[data-pc="poster"] .card{padding:0;overflow:hidden;gap:8px}
html[data-pc="poster"] .card .stage{border-radius:0;aspect-ratio:1/1.1;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 38%,transparent),color-mix(in srgb,var(--c) 6%,transparent))}
html[data-pc="poster"] .card>:not(.stage):not(.badge){margin-inline:14px}
html[data-pc="poster"] .card>.row,html[data-pc="poster"] .card>:last-child{margin-bottom:16px}
html[data-pc="poster"] .card h3{border-inline-start:4px solid var(--c);padding-inline-start:8px}
html[data-tk][data-pc="minimal"] .grid .card.glass{background:transparent;border:0;box-shadow:none;padding:0;backdrop-filter:none}
html[data-pc="minimal"] .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 18px}
html[data-pc="minimal"] .card h3{font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:6px}

/* footer */
html[data-ftr="center"] .foot .glass{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:26px 60px}
html[data-ftr="center"] .foot .glass>div:first-child,html[data-ftr="center"] .foot .nl{flex-basis:100%}
html[data-ftr="center"] .foot .soc,html[data-ftr="center"] .foot .nl form{justify-content:center}
html[data-ftr="center"] .foot .fine{width:100%}
html[data-ftr="band"] .foot{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 100vmax var(--accent);clip-path:inset(0 -100vmax);margin-top:40px}
html[data-tk][data-ftr="band"] .foot .glass{background:transparent;border:0}
html[data-ftr="band"] .foot a,html[data-ftr="band"] .foot h4,html[data-ftr="band"] .foot p,html[data-ftr="band"] .foot .logo,html[data-ftr="band"] .foot .logo .wm{color:var(--on-accent)}
html[data-ftr="slim"] .foot .glass{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px}
html[data-ftr="slim"] .foot .glass>div:not(:first-child):not(.nl){display:none}
html[data-ftr="slim"] .foot .fine{flex-basis:100%}
@media (max-width:860px){html[data-hero="left"] .bk-hero.show-solo{padding-inline-start:18px}html[data-pc="row"] .card{grid-template-columns:36% 1fr}}
html[data-hd] .sec .eyebrow{display:block}
html[data-tk][data-hdr="transparent"] #top{padding-top:80px}
html[data-ftr="band"] .foot .logo .wm .sh{background:none;color:inherit;-webkit-text-fill-color:currentColor}
html[data-ftr="band"] .foot .field{background:rgba(255,255,255,.2);color:var(--on-accent);border-color:transparent}
html[data-ftr="band"] .foot .btn{background:var(--on-accent);color:var(--accent);box-shadow:none;border:0}