/* CodeUpVik Store — dark, futuristic, light on bytes. CSS-only motion; prefers-reduced-motion respected. */
:root{--st-bg:#07070c;--st-ink:#eeebf6;--st-mute:#aca7bb;--st-line:rgba(255,255,255,.1);--st-glass:rgba(255,255,255,.045);
  --st-acc:#f5c451;--st-acc2:#8b7bff;--st-glow:rgba(245,196,81,.32);--st-r:18px;--st-pad:clamp(16px,5vw,64px);
  --st-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--st-mono:ui-monospace,"Cascadia Mono",Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
body.st-page{margin:0;background:var(--st-bg);color:var(--st-ink);font:16px/1.6 var(--st-sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
:where(.st-page) a{color:inherit}
.st-page :focus-visible{outline:2px solid var(--st-acc);outline-offset:3px;border-radius:6px}
.st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* background: drifting aurora + grid + grain */
.st-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 18% 12%,rgba(245,196,81,.16),transparent 70%),
             radial-gradient(34% 30% at 86% 22%,rgba(139,123,255,.14),transparent 70%),
             radial-gradient(46% 40% at 55% 95%,rgba(245,196,81,.08),transparent 72%);
  background-size:170% 170%;animation:st-aurora 26s ease-in-out infinite alternate}
.st-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(75% 60% at 50% 10%,#000,transparent);mask-image:radial-gradient(75% 60% at 50% 10%,#000,transparent);
  animation:st-grid 30s linear infinite}
.st-bg::after{content:"";position:absolute;inset:0;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes st-aurora{0%{background-position:0% 0%,100% 0%,50% 100%}100%{background-position:35% 25%,65% 35%,40% 70%}}
@keyframes st-grid{to{background-position:0 56px,56px 0}}
@keyframes st-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes st-shine{to{background-position:200% 0}}

.st-skip{position:absolute;left:-9999px}.st-skip:focus{left:16px;top:12px;z-index:9;background:var(--st-acc);color:#07070c;padding:8px 12px}
.st-draft{font:11px/1.5 var(--st-mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px 16px;color:#ffd9a0;background:rgba(245,196,81,.08);border-bottom:1px solid rgba(245,196,81,.25)}
.st-glass{background:var(--st-glass);border:1px solid var(--st-line);border-radius:var(--st-r);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* nav */
.st-nav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;
  padding:14px var(--st-pad);background:rgba(7,7,12,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--st-line)}
.st-brand img{height:36px;width:auto;display:block;border-radius:6px}
.st-nav nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.st-nav nav a,.st-foot-links a{font:12px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--st-mute)}
.st-nav nav a:hover,.st-nav nav a[aria-current]{color:var(--st-acc)}
.st-main{max-width:1180px;margin:0 auto;padding:0 var(--st-pad) 96px}

/* type */
.st-kicker{font:12px var(--st-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--st-acc);margin:0 0 14px}
.st-hero{padding:clamp(48px,10vw,120px) 0 clamp(32px,5vw,56px);max-width:900px;animation:st-rise .8s ease-out both}
.st-hero.small{padding-bottom:28px}
.st-hero h1,.st-info h1,.st-thanks h1{font-weight:650;letter-spacing:-.035em;line-height:1.04;margin:0 0 18px;
  background:linear-gradient(100deg,#fff 20%,#ffe6a8 45%,#fff 60%,#d9d2ff 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere;animation:st-shine 9s linear infinite}
.st-hero h1{font-size:clamp(38px,7.4vw,84px)}
.st-info h1{font-size:clamp(30px,4.2vw,48px)}
.st-lead{font-size:clamp(17px,1.9vw,20px);color:var(--st-mute);max-width:640px;margin:0 0 24px}
/* category page body copy + cross-links (config: categories[].intro / .related) */
.st-cat-intro{font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:var(--st-mute);max-width:720px;margin:0 0 24px}
.st-cat-rel{margin:0 0 clamp(32px,5vw,56px);color:var(--st-mute)}
.st-cat-rel p{margin:0 0 12px;font-size:15px}
.st-cat-rel ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.st-cat-rel a{display:inline-block;padding:8px 14px;border:1px solid var(--st-line);border-radius:999px;color:var(--st-ink);text-decoration:none;font-size:14px}
.st-cat-rel a:hover{border-color:var(--st-acc);color:var(--st-acc)}
.st-cta{display:flex;flex-wrap:wrap;gap:12px}
h2{letter-spacing:-.02em}

/* buttons + links */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;border:1px solid var(--st-acc);
  background:linear-gradient(180deg,#ffd978,var(--st-acc));color:#140f02;font:600 15px var(--st-sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 0 var(--st-glow);transition:transform .25s,box-shadow .25s}
.st-btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px -8px var(--st-glow)}
.st-btn.ghost{background:transparent;color:var(--st-ink);border-color:var(--st-line)}
.st-btn.ghost:hover{border-color:var(--st-acc);color:var(--st-acc)}
.st-btn.wide{width:100%}
.st-custom{display:inline-block;margin-top:16px;font-size:14px;color:var(--st-acc);text-decoration:underline;text-underline-offset:4px}

/* trust row */
.st-trust{list-style:none;padding:0;margin:0 0 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.st-trust li{display:flex;gap:14px;align-items:flex-start;padding:18px}
.st-trust-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--st-acc);border:1px solid rgba(245,196,81,.4);box-shadow:inset 0 0 18px rgba(245,196,81,.15)}
.st-trust b{display:block;font-weight:600}.st-trust span{color:var(--st-mute);font-size:14px}

/* tabs + tools */
.st-shop{position:relative;margin-bottom:56px;scroll-margin-top:80px}
.st-tabs{display:flex;gap:10px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.st-tabs::-webkit-scrollbar{display:none}
/* 22 Sep hotfix: on a desktop a mouse wheel cannot scroll this row sideways and it has no scrollbar, so the last tabs were
   clipped and unreachable (founder, Chrome 1920). From tablet width up the tabs wrap onto a second line instead; the
   swipe row with its fade stays on phones only. */
@media (min-width:768px){.st-tabs{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}}
.st-tabs a{flex:none;padding:10px 18px;border-radius:999px;border:1px solid var(--st-line);background:var(--st-glass);color:var(--st-mute);font:12px var(--st-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.st-tabs a:hover{border-color:var(--st-acc);color:var(--st-ink)}
.st-tabs a[aria-current]{color:#07070c;background:var(--st-acc);border-color:var(--st-acc);box-shadow:0 0 24px -6px var(--st-glow)}
.st-tabs a.ex{border-color:rgba(232,148,104,.45);color:#f3b18e}
.st-tabs a.ex[aria-current]{background:#e89468;color:#140905;border-color:#e89468}
.st-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 0 22px}
.st-search{position:relative;display:block}
.st-search input,.st-sort select{width:100%;font:inherit;color:var(--st-ink);background:rgba(255,255,255,.05);border:1px solid var(--st-line);border-radius:999px;padding:12px 18px;transition:border-color .2s,box-shadow .2s}
.st-search input{padding-left:44px}
.st-search-ic{position:absolute;left:16px;top:50%;transform:translateY(-52%);font-size:20px;color:var(--st-mute)}
.st-search input:focus,.st-sort select:focus{outline:none;border-color:var(--st-acc);box-shadow:0 0 0 3px rgba(245,196,81,.2)}
.st-sort select{appearance:none;padding-right:38px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--st-mute) 50%),linear-gradient(135deg,var(--st-mute) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.st-sort option{background:#15131d}
.st-count{grid-column:1/-1;margin:0;font:12px var(--st-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--st-mute)}
.st-noresults{padding:24px;text-align:center;color:var(--st-mute)}

/* grid + cards */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px}
.st-card{position:relative;display:flex;flex-direction:column;overflow:hidden;min-width:0;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;animation:st-rise .6s ease-out both}
.st-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(120% 60% at 50% 0%,rgba(245,196,81,.12),transparent 60%)}
.st-card:hover,.st-card:focus-within{transform:translateY(-6px);border-color:rgba(245,196,81,.5);box-shadow:0 30px 70px -30px var(--st-glow),0 0 0 1px rgba(245,196,81,.15)}
.st-card:hover::before,.st-card:focus-within::before{opacity:1}
.st-media{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(60% 80% at 30% 20%,rgba(245,196,81,.25),transparent 60%),linear-gradient(135deg,#15131d,#0b0a10 60%,#141030)}
.st-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.st-card:hover .st-media img{transform:scale(1.04)}
.st-bookcard .st-media img{object-fit:contain;padding:14px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.st-initials{font:700 clamp(40px,7vw,64px)/1 var(--st-sans);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(245,196,81,.75)}
.st-card-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.st-card h2,.st-card h3{font-size:20px;font-weight:600;line-height:1.25;margin:10px 0 6px;overflow-wrap:anywhere}
.st-card-link{text-decoration:none}
.st-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.st-card-link:focus-visible{outline:none}
.st-card:has(.st-card-link:focus-visible){outline:2px solid var(--st-acc);outline-offset:3px}
.st-card p{margin:0;color:var(--st-mute);font-size:15px}
.st-card-meta{display:flex;flex-wrap:wrap;gap:8px}
.st-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.st-view{flex:none;font:600 13px var(--st-sans);color:var(--st-acc);padding:8px 14px;border:1px solid rgba(245,196,81,.35);border-radius:999px;transition:background .25s,color .25s}
.st-view i{font-style:normal;display:inline-block;transition:transform .25s}
.st-card:hover .st-view{background:var(--st-acc);color:#140f02}.st-card:hover .st-view i{transform:translateX(3px)}
.st-chip-sm,.st-tag{font:10px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--st-line);color:var(--st-mute);text-decoration:none;position:relative;z-index:2}
.st-tag{color:#d9d2ff;border-color:rgba(139,123,255,.45);background:rgba(139,123,255,.1)}
a.st-chip-sm:hover{border-color:var(--st-acc);color:var(--st-acc)}

/* prices */
.st-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0!important;color:var(--st-ink)!important}
.st-price b{font-size:22px;font-weight:650}
.st-price small{font-size:12px;color:var(--st-mute)}
.st-price.big{margin:4px 0 20px!important}.st-price.big b{font-size:34px}
.st-list{color:var(--st-mute);font-size:14px}
.st-off{display:inline-block;font:600 10px var(--st-mono);letter-spacing:.1em;text-transform:uppercase;color:#07070c;background:var(--st-acc);border-radius:999px;padding:4px 9px;align-self:center}

/* breadcrumbs */
.st-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 22px;padding:0;font:12px var(--st-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--st-mute)}
.st-crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.st-crumbs a{text-decoration:none}.st-crumbs a:hover{color:var(--st-acc)}
.st-crumbs [aria-current]{color:var(--st-ink)}

/* detail */
.st-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:40px}
.st-gallery{position:sticky;top:84px;min-width:0}
.st-stage{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--st-r);border:1px solid var(--st-line);background:#0c0b12;aspect-ratio:var(--ar,4/3)}
.st-stage::-webkit-scrollbar{display:none}
.st-stage figure{position:relative;flex:0 0 100%;margin:0;scroll-snap-align:start}
.st-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.st-gallery.book .st-stage{aspect-ratio:2/3;max-height:78vh;margin:0 auto}
.st-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.st-thumbs button{flex:none;width:84px;padding:0;border:1px solid var(--st-line);border-radius:10px;overflow:hidden;background:#0c0b12;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.st-thumbs button[aria-current],.st-thumbs button:hover{opacity:1;border-color:var(--st-acc)}
.st-thumbs img{display:block;width:100%;height:64px;object-fit:cover}
/* 22 Sep hotfix (gate 2 H1): a mouse cannot scroll a sideways strip, so thumbnails 6+ were unreachable on desktop.
   From tablet width up they wrap; phones keep the swipe strip. */
@media (min-width:768px){.st-thumbs{flex-wrap:wrap;overflow:visible}}
/* L4: prev/next on the big image, added by store.js only when there is more than one image */
.st-stage-wrap{position:relative}
.st-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid var(--st-line);background:rgba(12,11,18,.72);color:var(--st-ink);font:20px/1 var(--st-mono);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s,border-color .2s}
.st-arrow:hover,.st-arrow:focus-visible{opacity:1;border-color:var(--st-acc)}
.st-arrow[disabled]{opacity:.25;cursor:default}
.st-arrow.prev{left:10px}.st-arrow.next{right:10px}
.st-media.big{aspect-ratio:4/3;border-radius:var(--st-r)}
.st-info .st-card-meta{margin:0 0 14px}
.st-byline{font:13px var(--st-mono);letter-spacing:.04em;color:var(--st-mute)}
.st-buy{display:grid;gap:14px;padding:clamp(16px,3vw,24px);scroll-margin-top:90px}
.st-tiers{border:0;margin:0;padding:0;display:grid;gap:10px}
.st-tiers legend{font:12px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--st-acc);padding:0 0 10px}
.st-tier{display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:center;padding:12px 14px;border:1px solid var(--st-line);border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s}
.st-tier:has(input:checked){border-color:var(--st-acc);background:rgba(245,196,81,.07)}
.st-tier input{accent-color:var(--st-acc);margin:0}
.st-tier-name{display:grid;min-width:0}.st-tier-name small{color:var(--st-mute);font-size:13px}
.st-tier-price{text-align:right;white-space:nowrap}.st-tier-price b{font-size:17px}.st-tier-price .st-list{display:block;font-size:12px}
.st-field{display:grid;gap:6px;font-size:14px;color:var(--st-mute)}
.st-field input{font:inherit;color:var(--st-ink);background:rgba(0,0,0,.35);border:1px solid var(--st-line);border-radius:12px;padding:12px 14px;width:100%}
.st-field input:focus{border-color:var(--st-acc);outline:none;box-shadow:0 0 0 3px rgba(245,196,81,.2)}
.st-agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--st-mute)}
.st-agree input{accent-color:var(--st-acc);margin-top:4px}
.st-agree a{color:var(--st-acc)}
.st-status{min-height:1.4em;margin:0;font-size:14px}
.st-status.err{color:#ff9b85}
.st-fine{margin:-6px 0 0;font-size:13px;color:var(--st-mute)}

/* sections, faq, related */
.st-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:0 0 48px}
.st-panel{padding:22px 24px}.st-panel.wide{grid-column:1/-1}
.st-panel h2,.st-faq h2,.st-related h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 12px}
.st-panel p{margin:0;color:var(--st-mute)}
.st-points{padding-left:0;list-style:none;margin:0}
.st-points li{padding:5px 0 5px 24px;position:relative;color:var(--st-mute)}
.st-points li::before{content:"";position:absolute;left:4px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--st-acc);box-shadow:0 0 12px var(--st-glow)}
.st-faq{display:grid;gap:10px;margin:0 0 48px;max-width:860px}
.st-faq details{padding:0 20px;transition:border-color .2s}
.st-faq details[open]{border-color:rgba(245,196,81,.35)}
.st-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:600;position:relative}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--st-acc);transition:transform .25s}
.st-faq details[open] summary::after{transform:rotate(45deg)}
.st-faq details p{margin:0 0 16px;color:var(--st-mute)}.st-faq details a{color:var(--st-acc)}
.st-related{margin:0 0 48px}

/* sticky buy bar */
.st-sticky{position:fixed;left:50%;bottom:14px;z-index:6;display:flex;align-items:center;gap:14px;width:min(640px,calc(100% - 24px));padding:10px 10px 10px 18px;
  border-radius:999px;border:1px solid rgba(245,196,81,.35);background:rgba(12,11,18,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.8),0 0 30px -12px var(--st-glow);transform:translate(-50%,160%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.st-sticky.on{transform:translate(-50%,0)}
.st-sticky-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.st-sticky-price{font-weight:650;white-space:nowrap}
.st-sticky .st-btn{padding:10px 18px}

/* thank-you, empty, about */
.st-thanks{max-width:680px;margin:clamp(56px,10vw,120px) auto;padding:clamp(24px,5vw,48px);text-align:center}
.st-thanks h1{font-size:clamp(32px,5vw,52px)}
.st-thanks #st-msg{color:var(--st-mute)}
.st-help{margin:26px auto 0;max-width:520px;font-size:14px;line-height:1.6;color:var(--st-mute)}
.st-help a{color:var(--st-acc);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.st-empty{padding:32px}
.st-legal{font:12px var(--st-mono);color:var(--st-mute)}
.st-timeline{list-style:none;padding:0;display:grid;gap:12px}
.st-timeline li{display:flex;gap:18px;padding:18px}
.st-timeline b{font:14px var(--st-mono);color:var(--st-acc);min-width:44px}
.st-timeline strong{display:block}.st-timeline span{color:var(--st-mute);font-size:15px}

/* policy pages (text from policies/*.html) */
.pol-head h1{font-size:clamp(34px,5.6vw,64px)}
.pol-meta{font:12px/1.9 var(--st-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--st-mute);margin:0}
.pol{max-width:780px;overflow-wrap:anywhere;animation:st-rise .8s ease-out both}
.pol h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.2;margin:48px 0 12px;scroll-margin-top:90px}
.pol h2:first-child{margin-top:0}
.pol h3{font-size:17px;font-weight:600;margin:26px 0 8px}
.pol p,.pol li,.pol dd,.pol dt{font-size:16px;line-height:1.75;color:var(--st-mute)}
.pol p{margin:0}
.pol p+p,.pol ul+p,.pol ol+p,.pol p+ul,.pol p+ol,.pol .pol-scroll+p,.pol dl+p{margin-top:14px}
.pol ul,.pol ol{margin:10px 0 0;padding-left:22px}
.pol li+li{margin-top:6px}
.pol li::marker{color:var(--st-acc)}
.pol a{color:var(--st-acc);text-decoration:underline;text-decoration-color:rgba(245,196,81,.4);text-underline-offset:3px}
.pol a:hover{text-decoration-color:var(--st-acc)}
.pol strong{color:var(--st-ink);font-weight:600}
.pol code{font-family:var(--st-mono);font-size:.88em;color:var(--st-ink)}
.pol-box{background:var(--st-glass);border:1px solid rgba(245,196,81,.35);border-radius:var(--st-r);padding:clamp(18px,2.4vw,26px);margin-top:18px}
.pol-box h3{margin-top:0}
.pol .pol-box+h2{margin-top:48px}
.pol-scroll{overflow-x:auto;margin-top:14px;border:1px solid var(--st-line);border-radius:14px}
.pol table{border-collapse:collapse;width:100%;min-width:600px;background:var(--st-glass)}
.pol th,.pol td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--st-line);font-size:14px;line-height:1.65;color:var(--st-mute)}
.pol th{font:600 11px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--st-ink);background:rgba(255,255,255,.04)}
.pol tr:last-child td{border-bottom:0}
.pol dl{display:grid;grid-template-columns:minmax(130px,210px) minmax(0,1fr);margin:14px 0 0;background:var(--st-glass);border:1px solid var(--st-line);border-radius:14px;overflow:hidden}
.pol dt,.pol dd{margin:0;padding:11px 14px;border-bottom:1px solid var(--st-line)}
.pol dt{font-family:var(--st-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--st-ink);font-weight:600}
.pol dl > :nth-last-child(-n+2){border-bottom:0}
@media (max-width:560px){.pol dl{grid-template-columns:minmax(0,1fr)}.pol dt{border-bottom:0;padding-bottom:0}
  .pol table{min-width:0}.pol thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pol tr,.pol td{display:block}.pol tr{border-bottom:1px solid var(--st-line);padding:6px 0}.pol tr:last-child{border-bottom:0}
  .pol td{border-bottom:0;padding:6px 14px}
  .pol td[data-label]::before{content:attr(data-label);display:block;font:600 10px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--st-ink);margin-bottom:2px}}

/* footer */
.st-foot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding:28px var(--st-pad) 90px;border-top:1px solid var(--st-line);color:var(--st-mute);font-size:13px}
.st-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.st-foot-links a:hover,.st-foot-mail:hover{color:var(--st-acc)}
.st-foot-mail{text-decoration:none;overflow-wrap:anywhere}

/* coming soon + exclusive */
.st-soon{display:inline-block;font:11px var(--st-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--st-acc);border:1px solid var(--st-acc);border-radius:999px;padding:4px 10px;vertical-align:middle}
.st-ex-logo{display:block;width:96px;height:96px;border-radius:18px;margin:0 0 18px;box-shadow:0 18px 50px -20px var(--st-acc)}
.st-vivayu .st-bg{background:radial-gradient(40% 34% at 18% 12%,color-mix(in srgb,var(--st-acc) 22%,transparent),transparent 70%),
  radial-gradient(42% 36% at 85% 30%,color-mix(in srgb,var(--ex-acc2) 45%,transparent),transparent 72%),
  radial-gradient(46% 40% at 55% 95%,color-mix(in srgb,var(--st-acc) 10%,transparent),transparent 72%);background-size:170% 170%}
.st-vivayu .st-btn{background:linear-gradient(180deg,#ffb48f,var(--st-acc))}
.st-vivayu .st-media{background:radial-gradient(60% 80% at 30% 20%,color-mix(in srgb,var(--st-acc) 35%,transparent),transparent 60%),linear-gradient(135deg,#15131d,#0b0a10 55%,#101a3a)}
.st-bookcard .st-media{background:radial-gradient(60% 80% at 30% 20%,rgba(232,148,104,.35),transparent 60%),linear-gradient(135deg,#15131d,#0b0a10 55%,#101a3a)}

@media (max-width:860px){.st-detail{grid-template-columns:minmax(0,1fr)}.st-gallery{position:relative;top:0}.st-gallery.book .st-stage{max-height:none;max-width:420px}}
@media (max-width:520px){.st-tools{grid-template-columns:minmax(0,1fr)}.st-sticky-name{display:none}.st-sticky{justify-content:space-between}.st-price.big b{font-size:30px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================
   /store home: one compact section per category (16 Sep)
   Heading + one line + the first few cards + "see all N". The rest of a
   category's cards are in the page but hidden until its tab is chosen.
   ===================================================================== */
.st-cats{display:flex;flex-direction:column;gap:clamp(34px,5vw,54px)}
.st-cat{scroll-margin-top:80px}
.st-cat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 16px}
.st-cat-head h2{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:650;letter-spacing:-.02em;line-height:1.15}
.st-cat-head h2 a{color:var(--st-ink);text-decoration:none}
.st-cat-head h2 a:hover{color:var(--st-acc)}
.st-cat-head p{margin:0;flex:1 1 260px;min-width:0;color:var(--st-mute);font-size:14px;line-height:1.5}
.st-cat-more{margin:16px 0 0}
.st-cat-more a{display:inline-flex;align-items:center;gap:8px;color:var(--st-acc);text-decoration:none;
  font:12px var(--st-mono);letter-spacing:.12em;text-transform:uppercase}
.st-cat-more a:hover{text-decoration:underline}
@media (max-width:640px){.st-cat-head{display:block}.st-cat-head p{margin-top:6px}}

/* "Good to know": a plain caveat the buyer sees above the buy form (16 Sep) */
.st-note{margin:0 0 18px;padding:12px 14px;border:1px solid var(--st-line);border-left:2px solid var(--st-acc);
  border-radius:10px;background:rgba(255,255,255,.04);color:var(--st-mute);font-size:14px;line-height:1.55}
.st-note b{display:block;margin-bottom:4px;color:var(--st-ink);font:11px var(--st-mono);letter-spacing:.14em;text-transform:uppercase}
/* category page hero: the H1 is a sentence, not a two-word headline, so it runs a size smaller than the store hero */
.st-cat-hero h1{font-size:clamp(30px,4.4vw,50px)}

/* =====================================================================
   SHARE ROW (16 Sep): a small row of round icon buttons. Every icon is a
   real link to a plain share URL built at build time; nothing is loaded
   from any network. "Copy link" needs JS, so it starts hidden.
   44px touch targets and it wraps, so it fits a 375px screen.
   ===================================================================== */
.st-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:18px 0 0}
.st-hero .st-share{margin-top:26px;justify-content:flex-start}
.st-share-h{font:11px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--st-mute)}
.st-share-row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0}
.st-share-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:1px solid var(--st-line);border-radius:50%;background:var(--st-glass);color:var(--st-mute);
  cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s,background .15s,transform .15s}
.st-share-btn:hover,.st-share-btn:focus-visible{color:var(--st-acc);border-color:var(--st-acc);
  background:rgba(245,196,81,.1);transform:translateY(-1px)}
.st-share-btn .st-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.st-share-btn[hidden]{display:none}
.st-copy.is-copied{color:var(--st-acc);border-color:var(--st-acc)}
.st-copied{font:11px var(--st-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--st-acc)}

/* =====================================================================
   APPROXIMATE MULTI-CURRENCY LINE (16 Sep)
   ---------------------------------------------------------------------
   Deliberately quiet. The ₹ figure keeps every bit of its weight; the
   approximation is one 11-12px muted line under it that never competes,
   never sits alone, and always carries "charged in INR" plus the date
   of the rate. It is written `hidden` by make-store.mjs and unhidden by
   assets/store.js only once a real number exists -- so with JavaScript
   off none of this is on the page.

   LAYOUT SHIFT: .st-fx takes a whole flex row inside .st-price, so it
   never squeezes the price. On a browser that already knows a non-INR
   currency, the tiny head script sets html[data-fx] before paint and
   the rules below reserve the line, so nothing moves when the number
   arrives. A first-ever visit repaints once; reserving an empty line
   for every Indian visitor to avoid that would be the worse trade.
   ===================================================================== */
.st-fx{flex:0 0 100%;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;
  font:12px/1.45 var(--st-sans);color:var(--st-mute)}
.st-fx-amt{font-weight:600;color:#cfc8de;white-space:nowrap}
/* the separator belongs to the NOTE, not the amount: when the line wraps on a narrow card the dot then leads
   the second line instead of dangling at the end of the first */
.st-fx-note{font-size:11px;overflow-wrap:anywhere}
.st-fx-note::before{content:"· ";color:var(--st-mute)}
.st-price.big .st-fx{margin-top:8px;font-size:13px}
.st-price.big .st-fx-amt{font-size:15px}
/* reserve the row when the currency is already known (see html[data-fx] above) */
html[data-fx] .st-price .st-fx[hidden]{display:flex!important;visibility:hidden;min-height:1.45em}

/* sticky bar: price and its approximation stack, the button keeps its size */
.st-sticky-cost{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;flex:1 1 auto}
.st-sticky-cost .st-fx{flex:0 0 auto;font-size:11px;line-height:1.3}
.st-sticky-cost .st-fx-amt{font-size:12px}
.st-sticky-cost .st-fx-note{font-size:10px}
.st-sticky .st-sticky-name{flex:1 1 auto}
html[data-fx] .st-sticky-cost .st-fx[hidden]{display:flex!important;visibility:hidden;min-height:1.3em}

/* the one-per-page bar: currency picker + the same promise in a sentence */
.st-fxbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 22px;padding:10px 14px;
  border:1px solid var(--st-line);border-radius:14px;background:var(--st-glass)}
.st-price.big + .st-fxbar{margin:-6px 0 20px}
.st-fxpick{display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.st-fxpick-l{font:11px var(--st-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--st-mute)}
.st-fxpick select{font:13px var(--st-sans);color:var(--st-ink);background:rgba(255,255,255,.05);
  border:1px solid var(--st-line);border-radius:999px;padding:7px 10px;min-height:36px;max-width:100%}
.st-fx-about{flex:1 1 220px;min-width:0;margin:0;font-size:11.5px;line-height:1.5;color:var(--st-mute)}
.st-fx-src{white-space:nowrap}
@media (max-width:520px){
  .st-fxbar{gap:8px;padding:10px 12px}
  .st-fx-about{flex-basis:100%}
  /* the sticky bar is the tightest strip on the site: give the words room, keep the button whole */
  .st-sticky-cost .st-fx{flex-direction:column;gap:0}
  .st-sticky-cost .st-fx-note::before{content:none}
}

/* "Outside India? Buy on Gumroad" — product pages only, and only where config carries a gumroad URL (16 Sep).
   Sits directly under the currency bar: the "≈" line says what the price is worth, this says where to actually
   pay in that currency. Underlined link, 44px-friendly tap height, no icon, no new colour. */
.st-gumroad{margin:-8px 0 20px;font-size:13px;line-height:1.5;color:var(--st-mute)}
.st-gumroad a{color:var(--st-acc);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:4px 0}
/* PayPal (22 Sep): sits under the Cashfree button inside the buy form. The SDK renders its own buttons into .st-pp-box
   (an iframe on a white card), so the box gets a light surface of its own instead of fighting the dark theme. */
.st-pp{display:grid;gap:10px;margin-top:2px}
.st-pp-box:not(:empty){background:#fff;border-radius:14px;padding:12px 12px 4px;min-height:48px}
/* bundle offer (23 Sep) */
.st-bundle{border:1px dashed var(--st-acc);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.st-bundle-offer{margin:0 0 8px;font-size:14px;line-height:1.45}
/* verified-buyer reviews (23 Sep): text only, line breaks kept, nothing auto-linked */
.st-reviews,.st-rvpage,.st-rv-write{max-width:760px;margin:40px auto 0}
.st-rv{border-top:1px solid var(--st-line,rgba(255,255,255,.12));padding:14px 0}
.st-rv-stars{margin:0;font-size:18px;letter-spacing:2px;color:var(--st-acc)}
.st-rv-prod{margin:4px 0 0;font-weight:600}
.st-rv-text{margin:6px 0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.55}
.st-rv-by,.st-rv-sum{margin:0;font-size:13px;color:var(--st-mute)}
.st-rv-sum{margin-bottom:8px}
.st-rv-empty{color:var(--st-mute)}
.st-rv-cta,.st-rv-ask{margin:10px 0 0}
.st-rv-write{padding:20px}
.st-rv-write form{display:grid;gap:12px}
.st-rv-stars label{margin-right:14px;display:inline-flex;gap:6px;align-items:center;min-height:44px}
.st-rv-write fieldset{border:0;padding:0;margin:0}
.st-rv-write textarea,.st-rv-write select{width:100%}
.st-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* discount code + review policy (23 Sep) */
.st-deal{margin:6px 0 0;font-weight:600;color:var(--st-acc)}
.st-rv-disc{margin:2px 0 0;font-size:13px;color:var(--st-mute);font-style:italic}
.st-rv-reward{margin:0 0 6px}
.st-more-box{max-width:760px;margin:32px auto 0}
.st-more-list p{margin:0 0 8px}
.st-rv-policy{color:var(--st-mute);font-size:14px}