/* v1 TRANCE MIST - storefront design variant (Sklep Maksyma Komara)
   Colour tokens mirror data.js `brand.palette`; app.js re-applies them from data at boot. */
:root{
  --ink:#07060e; --night:#0d0b1a; --violet:#8b7bff; --indigo:#5b3fd6; --magenta:#a855f7;
  --lilac:#d9c6ff; --text:#ece8ff; --muted:#a49fc0;
  --display:'Plus Jakarta Sans', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --script:'Allura', cursive;
  --line:rgba(217,198,255,.13); --line2:rgba(217,198,255,.24);
  --grad:linear-gradient(120deg,var(--violet) 0%,var(--magenta) 100%);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --hdr:84px;
  --strip:0px;    /* the footer is now the main site's full footer BELOW the first screen (owner 2026-10-28), not a strip in it */
  --gut:clamp(16px, 4vw, 72px);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); color:var(--text); -webkit-text-size-adjust:100%; }
html,body{ margin:0; overflow-x:clip; }
html.lenis{ scrollbar-width:none; }
html.lenis::-webkit-scrollbar{ display:none; }
.in-detail #shop{ visibility:hidden; }
/* what cannot be seen does not animate: the shop under a product page, and the page under the cart, the checkout or the
   thank-you window (app.js sets .ovl-open); the windows themselves keep moving */
.in-detail #shop *, .in-detail #shop *::before, .in-detail #shop *::after,
.ovl-open #shop *, .ovl-open #shop *::before, .ovl-open #shop *::after,
.ovl-open #detail *, .ovl-open #detail *::before, .ovl-open #detail *::after{ animation-play-state:paused !important; }
body{ font-family:var(--body); font-size:16px; line-height:1.55; background:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:700; letter-spacing:-.02em; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:rgba(168,85,247,.45); color:#fff; }
[hidden]{ display:none !important; }
.pn{ margin-left:-0.08em; } /* Plus Jakarta 700 sets a wide gap before . and , */
.sr-only{ position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--lilac); outline-offset:3px; border-radius:10px; }

/* ---------- WebGL layers ---------- */
.fog{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 72% 10%, #1d1538 0%, #0d0b1a 45%, #07060e 80%); }
/* no WebGL (none at all, or a context lost): the canvases step aside, since a lost one paints white over everything,
   and the CSS fog lies on the page itself. --fog-a/--fog-b: a product page's colours (app.js cssFog); unset everywhere
   else, so the brand fog is as it was */
.no-webgl .fog, .no-webgl .veil-canvas{ visibility:hidden; }
.no-webgl body::before{ content:""; position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; background:
  radial-gradient(60% 50% at 75% 20%, rgb(var(--fog-a, 139 123 255) / .22), transparent 70%),
  radial-gradient(50% 45% at 20% 80%, rgb(var(--fog-b, 168 85 247) / .16), transparent 70%),
  radial-gradient(120% 90% at 50% 50%, #120e26 0%, #07060e 80%); }
.veil{ position:fixed; inset:0; z-index:90; pointer-events:none; visibility:hidden;
  background:radial-gradient(90% 80% at 50% 50%, #1a1236 0%, #0b0818 55%, #06050c 100%); }
.veil.on{ visibility:visible; pointer-events:auto; }
.veil.gl{ background:none; }
.veil-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* (it catches the clicks too: a click made to skip the intro must not open whatever lies under it) */
.is-loading .veil{ visibility:visible; pointer-events:auto; }

/* ---------- intro ---------- */
.intro{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; pointer-events:none; }
.intro.done{ display:none; }
.intro-mark{ display:grid; justify-items:center; gap:22px; }
/* the signature and its glow. The glow is a soft picture of its own behind the strokes, on a box padded so no light is
   cut, and the writing mask reveals both together. NO CSS filter anywhere in the intro: iOS Safari drew the filtered,
   masked signature inside a glowing square (owner 2026-10-28). --sw = the signature's own width; the margins take the
   padding back, so the signature sits exactly where it did */
.intro-sig{ --sw:min(440px, 70vw); position:relative; width:calc(var(--sw) * 1.1571); aspect-ratio:1620 / 646;
  margin-block:calc(var(--sw) * -.0786); opacity:0;
  background:url(../shared/assets/logo-signature-glow.webp) center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 var(--wr,0%),transparent calc(var(--wr,0%) + 12%));
          mask-image:linear-gradient(90deg,#000 0%,#000 var(--wr,0%),transparent calc(var(--wr,0%) + 12%)); }
.intro-logo{ position:absolute; left:6.79%; top:17.03%; width:86.42%; height:auto; }
.intro-line{ width:min(220px, 50vw); height:1px; background:rgba(217,198,255,.12); overflow:hidden; opacity:0; }
.intro-line span{ display:block; height:100%; width:100%; background:var(--grad); transform-origin:0 50%; transform:scaleX(0); box-shadow:0 0 12px var(--magenta); }

/* ---------- header ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:55; height:var(--hdr); transition:background .5s var(--ease), border-color .5s, backdrop-filter .5s; border-bottom:1px solid transparent; }
.hdr.scrolled{ background:linear-gradient(180deg, rgba(10,8,22,.72), rgba(10,8,22,.38)); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border-bottom-color:var(--line); }
.hdr-in{ height:100%; display:flex; align-items:center; gap:28px; padding:0 var(--gut); }
/* the main site's logo (its .logo: 1.05rem / .58rem at a 17px root), linking to the main site */
.hdr-logo{ display:block; flex:0 0 auto; font-family:var(--display); font-weight:700; font-size:17.85px; line-height:1; color:#f3f1fb; }
.hdr-logo small{ display:block; font-family:var(--body); font-weight:600; font-size:9.86px; letter-spacing:.26em; color:#c5bbff; margin-top:4px; }
.hdr-nav{ display:flex; gap:6px; margin:0 auto; padding:5px; border-radius:999px; border:1px solid var(--line); background:rgba(16,12,34,.35); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.hdr-nav a{ position:relative; font-family:var(--display); font-weight:500; font-size:14.5px; letter-spacing:.01em; padding:10px 18px; border-radius:999px; color:var(--muted); transition:color .35s var(--ease); white-space:nowrap; }
.hdr-nav a::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, rgba(139,123,255,.22), rgba(168,85,247,.18)); box-shadow:inset 0 0 0 1px rgba(217,198,255,.18); opacity:0; transform:scale(.9); transition:opacity .35s var(--ease), transform .45s var(--ease); }
.hdr-nav a:hover, .hdr-nav a.active{ color:var(--text); }
.hdr-nav a.active::before{ opacity:1; transform:none; }
.hdr-nav a:hover::before{ opacity:.6; transform:none; }
.hdr-nav a span{ position:relative; }
.cart-btn{ position:relative; display:flex; align-items:center; gap:10px; height:46px; padding:0 18px 0 16px; border-radius:999px; border:1px solid var(--line2);
  /* a deep glass: the cart button may sit over the photo's white sleeve and stays readable on any background */
  background:linear-gradient(140deg, rgba(60,40,120,.62), rgba(14,10,30,.78)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--display); font-weight:600; font-size:14.5px; transition:box-shadow .4s var(--ease), border-color .4s; flex:0 0 auto; }
.cart-btn:hover{ border-color:rgba(217,198,255,.45); box-shadow:0 0 32px -6px rgba(168,85,247,.6); }
.cart-count{ min-width:24px; height:24px; padding:0 7px; border-radius:999px; display:grid; place-items:center; font-size:12.5px; font-weight:700; background:var(--grad); color:#fff; box-shadow:0 0 16px rgba(168,85,247,.6); }
.cart-count.zero{ background:rgba(217,198,255,.14); box-shadow:none; color:var(--muted); }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 28px; border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:.01em; white-space:nowrap; isolation:isolate; overflow:hidden;
  transition:box-shadow .45s var(--ease), border-color .45s, opacity .3s; will-change:transform; }
/* premium build (owner 2026-10-28), the same for the brand and for every product tone: the fill gradient under a soft
   top sheen (gone before the words, so the ink keeps its contrast), inner depth at the bottom edge, a glow in its own two
   colours, and a light sweep on hover (::after, behind the words; transform and opacity only) */
.btn-primary{ color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 36%), var(--grad);
  box-shadow:0 12px 38px -12px rgba(168,85,247,.8), 0 0 22px -8px rgba(139,123,255,.55), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -10px 18px -12px rgba(23,16,56,.6); }
.btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120px 80px at var(--bx,50%) var(--by,50%), rgba(255,255,255,.42), transparent 70%); opacity:0; transition:opacity .35s; }
.btn-primary:hover::before{ opacity:1; }
.btn-primary:hover{ box-shadow:0 16px 56px -10px rgba(168,85,247,.95), 0 0 30px -6px rgba(139,123,255,.6), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -10px 18px -12px rgba(23,16,56,.6); }
/* (the pay button keeps ::after for its busy spinner: no sweep there) */
.btn-primary:not(.btn-pay)::after, .hc-cta::after{ content:""; position:absolute; top:-2px; bottom:-2px; left:0; width:44%; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.34) 50%, rgba(255,255,255,0)); transform:translateX(-180%) skewX(-18deg); opacity:0; }
.btn-primary:not(.btn-pay):not([disabled]):hover::after, .hcard:hover .hc-cta::after, .hcard:focus-visible .hc-cta::after{ transform:translateX(330%) skewX(-18deg); opacity:1; transition:transform 1.05s var(--ease), opacity .25s; }
@keyframes btnSweep{ 0%{ transform:translateX(-180%) skewX(-18deg); opacity:0; } 3%{ opacity:1; } 15%{ transform:translateX(330%) skewX(-18deg); opacity:1; } 16%, 100%{ transform:translateX(330%) skewX(-18deg); opacity:0; } }
.btn-ghost{ color:var(--text); border:1px solid var(--line2); background:rgba(217,198,255,.05); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn-ghost:hover{ border-color:rgba(217,198,255,.5); box-shadow:0 0 34px -10px rgba(139,123,255,.8); }
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.38; cursor:not-allowed; box-shadow:none; filter:saturate(.5); }
.btn-block{ width:100%; }
.btn .ic{ width:18px; height:18px; flex:0 0 auto; }
.btn.added .ic-add{ display:none; }
.btn .ic-ok{ display:none; }
.btn.added .ic-ok{ display:block; }
.icon-btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line2); background:rgba(217,198,255,.05); transition:background .3s, border-color .3s, transform .4s var(--ease); }
.icon-btn:hover{ background:rgba(217,198,255,.12); border-color:rgba(217,198,255,.45); transform:rotate(90deg); }

/* ---------- chips (payments) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:8px; border:1px solid var(--line2); background:rgba(217,198,255,.06);
  font-family:var(--display); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--lilac); white-space:nowrap; }
.chips-sm .chip{ height:26px; font-size:11.5px; padding:0 10px; }

/* ---------- shop / views ---------- */
.shop{ position:relative; z-index:1; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.view{ position:relative; flex:1 0 auto; }

/* ---------- home: one screen, the three categories lead ---------- */
/* the content width: title and cards keep the approved layout beside the photo (the photo itself is drawn full-bleed by
   the mist shader). Full-bleed photo on a small desktop or tablet (1024, 1180): never squeeze the three cards below
   ~230 px each (at 1024x768 they were 125 px and cut the name and the button); the glass cards may then sit over the photo */
.home{ --content-x:var(--gut); --content-w:max(min(720px, calc(100vw - var(--gut) * 2)), calc(100vw - var(--gut) - max(32px, calc(50vw - 900px)) - 86vh * 1143 / 1500 - 44px));
  height:calc(100vh - var(--strip)); height:calc(100svh - var(--strip)); min-height:640px; overflow:hidden; display:flex; align-items:center;
  padding:calc(var(--hdr) + 2vh) 0 2vh; }
.hero-figure-fallback{ display:none; }
.home-in{ position:relative; z-index:2; margin-left:var(--content-x); width:var(--content-w); display:flex; flex-direction:column; gap:clamp(22px, 3.6vh, 40px); }
.home-head{ max-width:980px; }
/* SKLEP: Plus Jakarta Sans 800, very large, brand gradient (white-lilac -> lilac -> violet -> magenta) with a soft glow */
.home-title{ --title-grad:linear-gradient(100deg, #f6f0ff 0%, #d9c6ff 30%, #a998ff 58%, #8b7bff 74%, #a855f7 100%);
  font-family:var(--display); font-weight:800; font-size:clamp(84px, 10.4vw, 204px); line-height:.84; letter-spacing:.07em; margin:0 0 18px -0.04em;
  background-image:var(--title-grad); -webkit-background-clip:text; background-clip:text; color:transparent; width:max-content; }
/* the glow only once the letters carry the gradient (app.js prepareHero, under the intro's veil): never a filter on the
   element that clips the gradient (iOS Safari) */
.home-title.split{ background:none; filter:drop-shadow(0 0 34px rgba(139,123,255,.38)) drop-shadow(0 2px 2px rgba(7,6,14,.35)); }
.home-title .ch{ background-image:var(--title-grad); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; will-change:transform, opacity, filter; }
.home-sub{ display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:500; font-size:clamp(17px, 1.3vw, 24px); line-height:1.4; letter-spacing:.01em; color:#e6ddff; text-shadow:0 2px 18px rgba(7,6,14,.6); }
/* (no dash before the line: owner 2026-10-28) */
.home-cats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 1.3vw, 24px); height:clamp(360px, 48vh, 470px); }
/* no WebGL: the same live-site hero recipe in CSS (cover, mirror, filter, veil) */
.no-webgl .hero-figure-fallback{ display:block; position:fixed; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 26%; transform:scaleX(-1) scale(1.08);
  filter:saturate(.9) brightness(.86) contrast(1.06); opacity:var(--figfade, 1); z-index:0; }
.no-webgl .home::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  /* top layer: the live site's .mkm-hero-fadebot (bottom 60%), then the .mkm-hero-veil gradients */
  background:linear-gradient(180deg,transparent 0%,rgba(13,11,26,.42) 24%,rgba(15,12,30,.76) 50%,rgba(16,13,32,.95) 72%,#0f0c22 88%) left bottom / 100% 60% no-repeat,
    linear-gradient(90deg,rgba(7,6,14,.95) 0%,rgba(7,6,14,.82) 26%,rgba(7,6,14,.45) 52%,rgba(7,6,14,.12) 78%,rgba(7,6,14,.28) 100%),
    linear-gradient(180deg,rgba(7,6,14,.42) 0%,transparent 20%,transparent 44%,rgba(7,6,14,.3) 60%,rgba(7,6,14,.5) 82%,rgba(13,11,26,.42) 100%); }
@media (max-width:1100px){ .no-webgl .hero-figure-fallback{ object-position:62% 26%; } }
@media (max-width:680px){ .no-webgl .hero-figure-fallback{ object-position:70% 24%; } }

/* home category cards: each a small live scene */
.hcard{ --h:268; --rx:0deg; --ry:0deg; --mx:50%; --my:30%; --lift:0px; --ox:0px; --oy:0px; --tx:0; --ty:0;
  position:relative; display:flex; flex-direction:column; height:100%; min-width:0; border-radius:30px; overflow:hidden; isolation:isolate; container-type:inline-size;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  /* one surface for the scene and the words (no panel behind the picture), lit from inside: a soft light high on the
     left, the card's second hue rising from the far corner, depth towards the bottom */
  background:
    radial-gradient(120% 85% at 16% 0%, hsla(var(--h),92%,74%,.22), transparent 58%),
    radial-gradient(95% 75% at 100% 100%, hsla(calc(var(--h) + 34),86%,60%,.17), transparent 62%),
    linear-gradient(160deg, hsla(var(--h),70%,48%,.12) 0%, hsla(var(--h),58%,22%,.18) 45%, hsla(var(--h),55%,12%,.50) 100%);
  border:1px solid hsla(var(--h),90%,86%,.18);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 40px 90px -30px rgba(4,2,12,.85), 0 0 70px -28px hsla(var(--h),85%,62%,.55), inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -60px 90px -60px hsla(var(--h),92%,62%,.22);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease); }
.hcard::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:var(--noise); opacity:.07; mix-blend-mode:overlay; pointer-events:none; }
.hcard::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit;
  background:radial-gradient(460px 340px at var(--mx) var(--my), rgba(255,255,255,.18), rgba(255,255,255,.03) 42%, transparent 66%);
  mix-blend-mode:screen; opacity:.3; transition:opacity .5s var(--ease); }
.hcard:hover, .hcard:focus-visible{ border-color:hsla(var(--h),90%,88%,.4); box-shadow:0 60px 120px -30px rgba(4,2,12,.92), 0 0 110px -20px hsla(var(--h),85%,62%,.85), inset 0 1px 0 rgba(255,255,255,.24); }
.hcard:hover::after{ opacity:1; }
/* the scene does not clip: glows and the turned book fade into the words, and only the card's own rounded edge cuts
   (a clipped glow was the straight line the owner saw between the picture and the text, 2026-10-28) */
.hc-scene{ position:relative; flex:1 1 auto; min-height:0; overflow:visible; }
/* a halo of the card's hue behind the picture, fading into the card itself: no edge between picture and words */
.hc-scene::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 48%, hsla(var(--h),92%,66%,.26), hsla(var(--h),90%,60%,.08) 55%, transparent 74%); }
/* no shade at rest (it drew a panel); on hover a soft one keeps the product names readable */
.hc-scene::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent 0%, transparent 100%); opacity:0; transition:opacity .5s var(--ease); }
.hcard:hover .hc-scene::after{ background:linear-gradient(180deg, transparent 32%, hsla(var(--h),55%,6%,.66) 74%, hsla(var(--h),55%,6%,.5) 90%, hsla(var(--h),55%,6%,0) 100%); opacity:1; }
.sc{ position:absolute; inset:0; z-index:1; transition:filter .6s var(--ease), transform .8s var(--ease); }
.hcard:hover .sc{ transform:scale(1.04); }
.hc-names{ position:absolute; left:20px; right:20px; bottom:16px; z-index:3; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.hc-names li{ --ph:268; display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:13.5px; font-weight:600; color:#fff; line-height:1.25;
  opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease), transform .6s var(--ease); text-shadow:0 2px 14px rgba(0,0,0,.7); }
.hc-names li::before{ content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:hsl(var(--ph) 90% 76%); box-shadow:0 0 10px 1px hsl(var(--ph) 90% 66%); }
.hcard:hover .hc-names li, .hcard:focus-visible .hc-names li{ opacity:1; transform:none; }
.hcard:hover .hc-names li:nth-child(2){ transition-delay:.07s; }
.hcard:hover .hc-names li:nth-child(3){ transition-delay:.14s; }
/* the words: the name, and under it the way in */
.hc-body{ position:relative; z-index:3; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:18px 24px 24px; }
/* the size follows the CARD's own width (cqi), so the longest name («Ebooki i książki», 6.84 em) always fits on one
   line inside the padding; older browsers keep the viewport rule */
.hc-name{ font-size:clamp(23px, 1.6vw, 31px); font-size:clamp(19px, calc((100cqi - 48px) / 7.1), 31px); line-height:1.08; letter-spacing:-.025em; color:#fff; white-space:nowrap; text-wrap:balance; }
.hc-cta{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px 0 20px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 36%), var(--grad); color:#fff; font-family:var(--display); font-weight:600; font-size:15px; white-space:nowrap;
  box-shadow:0 12px 34px -12px rgba(168,85,247,.85), 0 0 20px -8px rgba(139,123,255,.55), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -10px 18px -12px rgba(23,16,56,.6); }
.hc-cta svg{ width:17px; height:17px; transition:transform .45s var(--ease); }
.hcard:hover .hc-cta svg{ transform:translateX(5px); }
@container (max-width: 330px){
  .hc-body{ gap:14px; }
  .hc-cta{ height:42px; }
  .hc-name{ white-space:normal; }
  .bk-e{ left:5%; height:66%; top:16%; }
  .bk-c{ right:-4%; height:84%; top:8%; }
}
/* scene: audio (orb + orbiting product hues + waveform) */
.sc-audio .orb{ top:47%; width:min(60%, 230px); }
.sc-audio .orb .o-core{ background:var(--conic); animation-duration:30s; }
.sat{ position:absolute; left:50%; top:47%; width:min(84%, 320px); aspect-ratio:1; translate:-50% -50%; animation:spin 46s linear infinite; }
.sat b{ position:absolute; inset:0; transform:rotate(var(--a)); }
.sat i{ position:absolute; left:50%; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:hsl(var(--ph) 90% 76%); box-shadow:0 0 12px 3px hsla(var(--ph),90%,64%,.8); }
.sc-audio .wave{ left:24px; right:24px; bottom:18px; height:30px; opacity:.75; }
.sc-audio .wave span{ background:linear-gradient(180deg, hsla(var(--ph),95%,88%,.95), hsla(var(--ph),90%,62%,.4)); }
/* scene: courses (photos in glass panes at three depths) */
.pane{ position:absolute; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.22); background:#120d24;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.85), 0 0 40px -16px hsla(var(--h),85%,60%,.6); animation:floatA 9s var(--ease-io) infinite; }
.pane img{ width:100%; height:100%; object-fit:cover; }
.pane::after{ content:""; position:absolute; inset:0; background:linear-gradient(130deg, rgba(255,255,255,.20), rgba(255,255,255,0) 38%), linear-gradient(0deg, hsla(var(--h),80%,50%,.16), hsla(var(--h),80%,50%,.16)); }
.pane.p1{ left:6%; top:8%; width:60%; height:52%; transform:translate(calc(var(--ox) * -.7), calc(var(--oy) * -.7)) rotate(-5deg); filter:brightness(.62) saturate(.8); }
.pane.p2{ right:6%; top:15%; width:54%; height:47%; transform:translate(calc(var(--ox) * .6), calc(var(--oy) * .6)) rotate(4deg); filter:brightness(.82); animation-delay:-3s; animation-duration:8s; }
.pane.p3{ left:19%; top:41%; width:56%; height:47%; transform:translate(calc(var(--ox) * 1.7), calc(var(--oy) * 1.7)) rotate(-1.5deg); animation-delay:-1.5s; animation-duration:7s; }
@keyframes floatA{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
/* scene: books (flat ebook cover + the printed book, 3D tilt) */
.sc-books{ perspective:900px; }
.bk{ position:absolute; animation:floatA 7s var(--ease-io) infinite; }
.bk-c{ right:2%; top:5%; height:90%; aspect-ratio:1120/1400; object-fit:cover;
  transform:rotateY(calc(-14deg + var(--tx) * 1.2deg)) rotateX(calc(var(--ty) * .9deg)); animation-delay:-2.6s;
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 100%); mask-image:radial-gradient(closest-side, #000 62%, transparent 100%); }
.bk-e{ left:11%; top:13%; height:72%; aspect-ratio:1323/1872; border-radius:3px 9px 9px 3px; z-index:2;
  transform:rotateY(calc(18deg + var(--tx) * 1.6deg)) rotateX(calc(var(--ty) * 1.3deg)) translateZ(30px);
  box-shadow:-18px 30px 50px -16px rgba(0,0,0,.9), 0 0 60px -20px hsla(var(--h),85%,62%,.7); }
.bk-e::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(100deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(0,0,0,.25)); }
.bk-e img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* ---------- category page ---------- */
/* the head is the title and its line only (no crumbs, count or second tabs): a little more air above and below them */
.catv{ min-height:calc(100vh - var(--strip)); min-height:calc(100svh - var(--strip)); display:flex; flex-direction:column; padding:calc(var(--hdr) + 46px) var(--gut) 22px; }
.cv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.cv-back{ margin-bottom:26px; }
.cv-title{ font-size:clamp(38px, 3.2vw, 62px); line-height:1; letter-spacing:-.035em; color:#fff; margin-bottom:14px; }
.cv-title .ch{ display:inline-block; }
.cv-tag{ font-size:clamp(15px, 1vw, 18px); line-height:1.55; color:var(--muted); max-width:640px; }
.cv-grid{ flex:1 1 auto; display:grid; gap:20px; min-height:0; }
.cv-grid[data-cat="audioseanse"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:minmax(250px, 1fr); }
.cv-grid[data-cat="kursy"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:minmax(500px, 1fr); }
.cv-grid[data-cat="ebooki"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(470px, 1fr); }
/* «Do koszyka» never runs out of its card (owner bug 2026-10-28, 1024 to 1440 px): four audio or course cards in a row
   need about 1340 px to hold the price and the button, so below that both grids take two columns (see also .card-foot) */
@media (min-width: 900px) and (max-width: 1339px){ .cv-grid[data-cat="audioseanse"], .cv-grid[data-cat="kursy"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.cell{ min-width:0; position:relative; }

/* product card (category grid): glass, the product's own palette (shared/theme.js tokens, --t-*), tilt + specular */
.card{ --rx:0deg; --ry:0deg; --mx:50%; --my:30%; --lift:0px; --ox:0px; --oy:0px;
  position:relative; width:100%; height:100%; border-radius:28px; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift)) scale(var(--dscale,1));
  /* layered light: a soft core high on the left, the second hue rising from the far corner, the tone's depth below */
  background:
    radial-gradient(120% 85% at 12% 0%, rgb(var(--t-soft) / .10), transparent 55%),
    radial-gradient(95% 80% at 100% 100%, rgb(var(--t-orb2) / .14), transparent 62%),
    linear-gradient(158deg, rgb(var(--t-glow) / .16) 0%, rgb(var(--t-deep) / .12) 38%, rgb(var(--t-deep) / .44) 100%);
  border:1px solid rgb(var(--t-line) / .16);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 40px 90px -30px rgba(4,2,12,.85), 0 0 70px -28px rgb(var(--t-glow) / .55), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 -60px 90px -64px rgb(var(--t-glow) / .22);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease); cursor:pointer; }
.card::before{ /* frosted grain */ content:""; position:absolute; inset:0; z-index:-1; background-image:var(--noise); opacity:.07; mix-blend-mode:overlay; pointer-events:none; }
.card::after{ /* specular sheen following the cursor, in the tone's own light */ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(420px 320px at var(--mx) var(--my), rgb(var(--t-soft) / .24), rgb(var(--t-glow) / .07) 40%, transparent 65%),
    linear-gradient(calc(110deg + var(--ry) * 2), transparent 30%, rgb(var(--t-soft) / .08) 46%, transparent 54%);
  mix-blend-mode:screen; opacity:.35; transition:opacity .5s var(--ease); }
/* a thin light runs along the border in the tone's two hues while the card is hovered: a conic ring (mask, never a
   filter) turned by a registered angle; where @property is unknown it stays a still ring of light */
@property --rim-a{ syntax:'<angle>'; inherits:false; initial-value:30deg; }
.card .rim{ position:absolute; inset:0; z-index:6; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .6s var(--ease);
  background:conic-gradient(from var(--rim-a), transparent 0deg, rgb(var(--t-glow) / .95) 38deg, rgb(var(--t-soft)) 60deg, rgb(var(--t-btn-b) / .9) 82deg, transparent 128deg,
    transparent 182deg, rgb(var(--t-btn-b) / .55) 222deg, rgb(var(--t-glow) / .8) 250deg, transparent 292deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.card:hover .rim{ opacity:1; animation:rimRun 5s linear infinite; }
@keyframes rimRun{ to{ --rim-a:390deg; } }
/* the card's glow breathes with its orb (7 s, the orb's breath), a second glow in the second hue on a longer breath so
   the colour drifts a few degrees and feels alive: two still box-shadows, only their opacity moves */
.cell::before, .cell::after{ content:""; position:absolute; inset:0; border-radius:28px; pointer-events:none; opacity:.55; will-change:opacity; }
.cell::before{ box-shadow:0 0 72px -12px rgb(var(--t-glow) / .5); animation:cellGlow 7s var(--ease-io) infinite; }
.cell::after{ box-shadow:0 0 56px -16px rgb(var(--t-orb2) / .5); animation:cellGlow 11s var(--ease-io) -4s infinite reverse; }
@keyframes cellGlow{ 0%,100%{ opacity:.3; } 50%{ opacity:.9; } }
.card:hover{ border-color:rgb(var(--t-line) / .34); box-shadow:0 50px 110px -30px rgba(4,2,12,.9), 0 0 90px -20px rgb(var(--t-glow) / .75), inset 0 1px 0 rgba(255,255,255,.22); }
.card:hover::after{ opacity:1; }
.card-vis{ position:relative; flex:0 0 auto; height:var(--vh,52%); overflow:hidden; border-radius:27px 27px 0 0; }
.card-vis img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06) translate(calc(var(--ox) * .5), calc(var(--oy) * .5)); transition:transform .9s var(--ease); filter:saturate(.92) contrast(1.03); }
.card:hover .card-vis img{ transform:scale(1.11) translate(calc(var(--ox) * .8), calc(var(--oy) * .8)); }
.card-vis::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(var(--t-deep) / 0) 35%, rgb(var(--t-deep) / .65) 88%, rgb(var(--t-deep) / .9)),
  linear-gradient(0deg, rgb(var(--t-glow) / .14), rgb(var(--t-glow) / .14)); mix-blend-mode:normal; pointer-events:none; }
.card-vis.contain{ background:radial-gradient(80% 70% at 50% 40%, rgb(var(--t-orb3) / .5), transparent 75%); }
.card-vis.contain img{ object-fit:cover; padding:0; filter:none; /* masked: never a CSS filter on it (iOS Safari draws a square) */
  -webkit-mask-image:radial-gradient(closest-side, #000 66%, transparent 100%); mask-image:radial-gradient(closest-side, #000 66%, transparent 100%); }
.card-vis.contain::after{ background:linear-gradient(180deg, transparent 60%, rgb(var(--t-deep) / .55)); }

/* procedural trance orb for audio products (no photo) */
.orb{ position:absolute; left:50%; top:45%; width:min(70%, 228px); aspect-ratio:1; transform:translate(-50%,-50%) translate(var(--ox,0px), var(--oy,0px)); pointer-events:none; }
.orb i{ position:absolute; inset:0; border-radius:50%; }
.orb .o-halo{ inset:-22%; background:radial-gradient(circle, hsla(var(--h),90%,66%,.42), hsla(var(--h),90%,50%,.10) 45%, transparent 68%); filter:blur(6px); }
.orb .o-core{ background:conic-gradient(from var(--a0,0deg), hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 34) 88% 64%), hsl(calc(var(--h) - 26) 70% 38%), hsl(calc(var(--h) + 12) 80% 54%), hsl(var(--h) 85% 62%));
  -webkit-mask:radial-gradient(circle, #000 0 54%, transparent 55%); mask:radial-gradient(circle, #000 0 54%, transparent 55%); filter:blur(10px) saturate(1.1); opacity:.9; animation:spin var(--spd,26s) linear infinite; }
.orb .o-rings{ background:repeating-radial-gradient(circle, hsla(var(--h),95%,90%,.30) 0 1px, transparent 1.5px var(--rg,11px));
  -webkit-mask:radial-gradient(circle, #000 0 30%, rgba(0,0,0,.65) 52%, transparent 70%); mask:radial-gradient(circle, #000 0 30%, rgba(0,0,0,.65) 52%, transparent 70%); animation:breathe 7s var(--ease-io) infinite; }
.orb .o-spiral{ inset:14%; background:conic-gradient(from 0deg, transparent 0 20%, hsla(var(--h),100%,92%,.55) 25%, transparent 32% 70%, hsla(calc(var(--h) + 30),100%,88%,.38) 75%, transparent 82%);
  -webkit-mask:radial-gradient(circle, transparent 0 18%, #000 30% 62%, transparent 72%); mask:radial-gradient(circle, transparent 0 18%, #000 30% 62%, transparent 72%); filter:blur(2px); animation:spin var(--spd2,14s) linear infinite reverse; mix-blend-mode:screen; }
.orb .o-eye{ inset:41%; background:radial-gradient(circle, #fff 0 18%, hsla(var(--h),100%,82%,.95) 30%, hsla(var(--h),90%,60%,.0) 70%); box-shadow:0 0 40px 10px hsla(var(--h),90%,70%,.55); animation:breathe 7s var(--ease-io) infinite; }
/* a product's orb (card, product page, related card, cart line): a glass sphere in its palette (orb1..orb4, soft,
   accent, glow): breathing halo, the turning colour core with inner depth, two ring layers breathing against each other,
   a slow caustic shimmer, the spiral, a glass shell with a rim light, the eye and a specular glint. Motion is transform and
   opacity only; no CSS filter on a masked layer (iOS Safari). The home's audio scene keeps the rules above. */
[data-th] .orb .o-halo{ filter:none; background:radial-gradient(circle, rgb(var(--t-glow) / .44), rgb(var(--t-orb2) / .12) 45%, transparent 68%); animation:orbHalo 7s var(--ease-io) infinite; }
[data-th] .orb .o-core{ inset:12%; -webkit-mask:none; mask:none; background:conic-gradient(from var(--a0,0deg), rgb(var(--t-orb1)), rgb(var(--t-orb2)), rgb(var(--t-orb3)), rgb(var(--t-orb4)), rgb(var(--t-orb1))); }
[data-th] .orb .o-depth{ inset:12%; background:radial-gradient(circle at 50% 46%, transparent 0 34%, rgb(var(--t-deep) / .5) 68%, rgb(var(--t-deep) / .8) 100%); }
[data-th] .orb .o-rings{ background:repeating-radial-gradient(circle, rgb(var(--t-soft) / .30) 0 1px, transparent 1.5px var(--rg,11px)); }
[data-th] .orb .o-rings2{ background:repeating-radial-gradient(circle, rgb(var(--t-orb2) / .28) 0 1px, transparent 1.5px calc(var(--rg,11px) * .55));
  -webkit-mask:radial-gradient(circle, transparent 0 24%, #000 34% 46%, transparent 60%); mask:radial-gradient(circle, transparent 0 24%, #000 34% 46%, transparent 60%); animation:breathe 7s var(--ease-io) -3.5s infinite; }
[data-th] .orb .o-caustic{ inset:13%; background:repeating-conic-gradient(from var(--a0,0deg), rgb(var(--t-soft) / 0) 0deg, rgb(var(--t-soft) / .17) 7deg, rgb(var(--t-soft) / 0) 15deg, rgb(var(--t-orb2) / .13) 24deg, rgb(var(--t-soft) / 0) 33deg);
  -webkit-mask:radial-gradient(circle, transparent 0 16%, #000 34% 56%, transparent 72%); mask:radial-gradient(circle, transparent 0 16%, #000 34% 56%, transparent 72%); mix-blend-mode:screen; animation:spin 64s linear infinite; }
[data-th] .orb .o-spiral{ filter:none; background:conic-gradient(from 0deg, transparent 0 18%, rgb(var(--t-soft) / .5) 25%, transparent 34% 68%, rgb(var(--t-orb2) / .42) 75%, transparent 84%); }
[data-th] .orb .o-glass{ inset:12%; background:radial-gradient(90% 90% at 33% 27%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 22%, transparent 42%),
  radial-gradient(circle at 50% 50%, transparent 0 60%, rgb(var(--t-soft) / .15) 67%, transparent 71%); }
[data-th] .orb .o-eye{ background:radial-gradient(circle, #fff 0 18%, rgb(var(--t-accent) / .95) 30%, rgb(var(--t-glow) / 0) 70%); box-shadow:0 0 40px 10px rgb(var(--t-glow) / .55); }
[data-th] .orb .o-glint{ inset:auto; left:29%; top:23%; width:13%; height:7%; background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); transform:rotate(-30deg); animation:glint 9s var(--ease-io) infinite; }
/* every layer moves on the big orb of a product page; on the many small ones (cards, related cards, cart lines) the
   extra shimmer layers stand still, so a category of eight orbs costs about what it did before */
.card-vis .orb .o-caustic, .card-vis .orb .o-rings2, .card-vis .orb .o-glint, .card-vis .orb .o-halo,
.mini-vis .orb .o-caustic, .mini-vis .orb .o-rings2, .mini-vis .orb .o-glint, .mini-vis .orb .o-halo{ animation:none; }
@keyframes orbHalo{ 0%,100%{ transform:scale(.95); opacity:.78; } 50%{ transform:scale(1.06); opacity:1; } }
@keyframes glint{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes breathe{ 0%,100%{ transform:scale(.94); opacity:.8; } 50%{ transform:scale(1.05); opacity:1; } }
.wave{ position:absolute; left:22px; right:22px; bottom:16px; height:26px; display:flex; align-items:center; gap:3px; opacity:.6; }
.wave span{ flex:1; border-radius:2px; background:linear-gradient(180deg, rgb(var(--t-soft) / .9), rgb(var(--t-glow) / .4)); height:var(--wh,40%); transform-origin:50% 50%; animation:wv 2.8s var(--ease-io) infinite; animation-delay:var(--wd,0s); }
@keyframes wv{ 0%,100%{ transform:scaleY(.55); } 50%{ transform:scaleY(1); } }

/* the badge speaks the button's ink: white on the brand's translucent pill, the dark ink on a nearly solid one (--t-badge-a/b) */
.badge{ position:absolute; z-index:5; top:18px; left:18px; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px 0 10px; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--t-ink));
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 50%), linear-gradient(120deg, rgb(var(--t-btn-a) / var(--t-badge-a)), rgb(var(--t-btn-b) / var(--t-badge-b))); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 24px -6px rgb(var(--t-glow) / .8); }
.badge svg{ width:13px; height:13px; }
.card-body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; padding:20px 24px 22px; }
.card-label{ font-family:var(--display); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--t-accent)); margin-bottom:8px; opacity:.9; }
.card-name{ font-size:22px; line-height:1.18; font-weight:700; letter-spacing:-.015em; color:#fff; margin-bottom:10px; }
.card-lead{ font-size:14px; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* the price and the button share a line while they fit; on a narrower card the button moves under the price */
.card-foot{ margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
/* the price in a fine white-to-soft gradient with the tone's glow (a drop-shadow: a text-shadow would cover the gradient).
   The gradient is clipped to the words on the inner span, the glow lies on the outer one: never a filter on the element
   that clips (iOS Safari) */
.price{ font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.02em; white-space:nowrap; filter:drop-shadow(0 0 14px rgb(var(--t-glow) / .42)); }
.price > span{ display:block; color:transparent; background:linear-gradient(180deg, #fff 22%, rgb(var(--t-soft)) 100%); -webkit-background-clip:text; background-clip:text; }
.card-acts{ display:flex; gap:8px; }
.card .btn{ height:44px; padding:0 16px; font-size:14px; }
.card .btn-add{ padding:0 15px; }
.card .btn-ext{ padding:0 18px; }
/* «Do koszyka», «Kup na Amazon» and the product page's buttons take the product's palette: its gradient and its ink
   (white like the brand, or the dark ink on gold, amber and absinthe); cart, checkout and thank-you keep the brand's.
   Layers: the top sheen, the liquid-metal band of gold / amber / copper (--t-metal-a = 0 for every other tone; its
   colours keep the ink's contrast, shared/theme.js metalOf), the tone's gradient; inner depth and a two-colour glow. */
.card .btn-primary, .detail .btn-primary{ color:rgb(var(--t-ink));
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 36%),
    linear-gradient(112deg, transparent 4%, rgb(var(--t-metal-hi) / var(--t-metal-a)) 27%, transparent 45%, rgb(var(--t-metal-lo) / var(--t-metal-a)) 66%, transparent 86%),
    linear-gradient(120deg, rgb(var(--t-btn-a)) 0%, rgb(var(--t-btn-b)) 100%);
  box-shadow:0 12px 38px -12px rgb(var(--t-btn-b) / .8), 0 0 22px -8px rgb(var(--t-glow) / .55), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -10px 18px -12px rgb(var(--t-deep) / .6); }
.card .btn-primary:hover, .detail .btn-primary:hover{ box-shadow:0 16px 56px -10px rgb(var(--t-btn-b) / .95), 0 0 30px -6px rgb(var(--t-glow) / .6), 0 0 0 1px rgba(255,255,255,.18),
  inset 0 1px 0 rgba(255,255,255,.42), inset 0 -10px 18px -12px rgb(var(--t-deep) / .6); }
/* the product page's main button: a rare, slow sweep at rest (one pass every 9 s); hover takes over with its own */
.detail .dt-acts .btn-primary::after{ animation:btnSweep 9s var(--ease-io) 2.6s infinite; }
.detail .dt-acts .btn-primary:hover::after{ animation:none; }
/* horizontal cards: audio (4x2 grid) and the two large book cards */
.card-h{ flex-direction:row; }
.card-h .card-vis{ height:auto; width:var(--vw,40%); flex:0 0 auto; border-radius:27px 0 0 27px; }
.card-h .card-vis::after{ background:linear-gradient(90deg, transparent 55%, rgb(var(--t-deep) / .5)), linear-gradient(0deg, rgb(var(--t-glow) / .10), rgb(var(--t-glow) / .10)); }
.card-h .card-vis.contain::after{ background:linear-gradient(90deg, transparent 70%, rgb(var(--t-deep) / .35)); }
.card-h .card-body{ min-width:0; padding:20px 22px 20px 18px; }
.card-h .orb{ top:48%; width:min(80%, 210px); }
.card-h .wave{ left:14px; right:14px; bottom:14px; height:20px; }
.card-h .badge{ top:14px; left:14px; }
.cv-grid[data-cat="audioseanse"] .card-name{ font-size:19px; margin-bottom:8px; }
.cv-grid[data-cat="audioseanse"] .card-lead{ font-size:13.5px; -webkit-line-clamp:2; }
.cv-grid[data-cat="audioseanse"] .price{ font-size:23px; }
.cv-grid[data-cat="audioseanse"] .card .btn{ height:40px; padding:0 14px; font-size:13.5px; }
.cv-grid[data-cat="audioseanse"] .card-label{ font-size:11px; margin-bottom:6px; }
/* «BESTSELLER» keeps clear of the «AUDIOSEANS» label where four audio cards share a row at their narrowest (1340-1499 px):
   the phones' compact badge */
@media (min-width: 1340px) and (max-width: 1499px){ .cv-grid[data-cat="audioseanse"] .badge{ top:10px; left:10px; height:26px; font-size:10.5px; padding:0 10px 0 8px; } }
.card-xl .card-vis{ width:46%; }
.card-xl .card-body{ padding:34px 34px 30px 26px; justify-content:center; }
.card-xl .card-name{ font-size:clamp(26px, 2vw, 36px); line-height:1.1; margin-bottom:14px; }
.card-xl .card-lead{ font-size:16px; -webkit-line-clamp:4; }
.card-xl .price{ font-size:36px; }
.card-xl .btn{ height:50px; padding:0 22px; font-size:15px; }
.card-xl .card-foot{ margin-top:28px; }
.card-xl .card-vis.contain img{ transform:scale(.98) translate(calc(var(--ox) * .5), calc(var(--oy) * .5)); }

/* ---------- footer (every page): the main site's footer (mkmsystem.maksymkomar.com), its exact sizes and colours.
   The main site's root font is 17px, so its rem values are written here in px (1.3rem = 22.1px ...). ---------- */
/* transparent like the main site's: only its top line. The fixed hero photo melts into the mist while the footer
   comes up (app.js footerFade), so the footer always lies on clean fog */
.mfoot{ position:relative; z-index:2; border-top:1px solid rgba(176,164,236,.13); padding:60px 0 36px; font-family:var(--body); line-height:1.55; color:#f3f1fb; }
.mf-wrap{ max-width:2400px; margin:0 auto; padding:0 clamp(24px, 5.8vw, 110px); }
.mf-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:40px; margin-bottom:44px; align-items:start; }
.mf-fb{ font-family:var(--display); font-weight:700; font-size:22.1px; }
.mf-ember{ background:linear-gradient(118deg,#5b3fd6,#8b7bff 38%,#a855f7 70%,#d9c6ff); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:mfEmber 9s ease-in-out infinite; }
@keyframes mfEmber{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.mf-brand p{ color:#837e9f; font-size:14.96px; margin:12px 0 0; max-width:30ch; }
.mf-col h6{ font-family:var(--body); font-size:11.9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#c5bbff; margin:0 0 16px; }
.mf-col a{ display:block; color:#bcb7d6; font-size:15.3px; margin-bottom:10px; transition:color .3s; }
.mf-col a:hover{ color:#f3f1fb; }
.mf-socs{ display:flex; gap:10px; margin-top:8px; }
.mf-socs a{ width:40px; height:40px; margin:0; border:1px solid rgba(176,164,236,.13); border-radius:50%; display:grid; place-items:center; color:#bcb7d6; transition:border-color .3s, transform .3s; }
.mf-socs a:hover{ border-color:#8b7bff; transform:translateY(-3px); }
.mf-socs svg{ width:17px; height:17px; fill:#bcb7d6; }
.mf-bot{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid rgba(176,164,236,.13); font-size:13.6px; color:#837e9f; text-align:center; }
@media (max-width:980px){ .mf-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .mf-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .mf-ember{ animation:none; } }

/* ---------- detail view ---------- */
.detail{ position:fixed; inset:0; z-index:50; }
.detail[hidden]{ display:none; }
.detail:focus{ outline:none; }
.detail-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:calc(var(--hdr) + 26px) var(--gut) 80px; }
.dt-back{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 14px; border-radius:999px; border:1px solid var(--line2); background:rgba(217,198,255,.05);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-family:var(--display); font-weight:600; font-size:14px; margin-bottom:3vh; transition:border-color .3s, box-shadow .3s; }
.dt-back:hover{ border-color:rgba(217,198,255,.45); box-shadow:0 0 30px -10px rgba(168,85,247,.8); }
.dt-back svg{ transition:transform .4s var(--ease); }
.dt-back:hover svg{ transform:translateX(-4px); }
/* the product page (#detail carries the product's palette): its back, ghost button and payment chips take its lines
   and glow; the text stays as it is (the category page's back keeps the brand rules above) */
.detail .dt-back, .detail .btn-ghost{ border-color:rgb(var(--t-line) / .24); background:rgb(var(--t-soft) / .05); }
.detail .dt-back:hover{ border-color:rgb(var(--t-line) / .45); box-shadow:0 0 30px -10px rgb(var(--t-glow) / .8); }
.detail .btn-ghost:hover{ border-color:rgb(var(--t-line) / .5); box-shadow:0 0 34px -10px rgb(var(--t-glow) / .8); }
.detail .chip{ border-color:rgb(var(--t-line) / .24); background:rgb(var(--t-soft) / .06); color:rgb(var(--t-accent)); }
.dt-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(30px, 5vw, 100px); align-items:center; max-width:1640px; margin:0 auto; min-height:calc(100vh - var(--hdr) - 140px); }
.dt-vis{ position:relative; aspect-ratio:1/0.86; max-height:72vh; width:100%; display:grid; place-items:center; }
.dt-vis .orb{ width:min(80%, 62vh); top:50%; }
/* the product's light blooms behind its visual (app.js reveals it): two still radial lights, the glow and the second hue,
   breathing on different periods (opacity and scale only), so the colour stays alive */
.dt-bloom{ position:absolute; left:50%; top:50%; width:118%; aspect-ratio:1; margin:-59% 0 0 -59%; pointer-events:none; }
.dt-bloom i{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(closest-side, rgb(var(--t-glow) / .34), rgb(var(--t-orb2) / .12) 46%, transparent 72%); animation:bloomBreath 9s var(--ease-io) infinite; }
.dt-bloom i + i{ background:radial-gradient(closest-side, rgb(var(--t-orb4) / .22), transparent 60%); animation-duration:13s; animation-direction:reverse; }
@keyframes bloomBreath{ 0%,100%{ opacity:.72; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.03); } }
.dt-photo{ position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; border:1px solid rgb(var(--t-line) / .18);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9), 0 0 120px -40px rgb(var(--t-glow) / .6); }
.dt-photo img{ width:100%; height:100%; object-fit:cover; }
.dt-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgb(var(--t-deep) / .55)), linear-gradient(0deg, rgb(var(--t-glow) / .12), rgb(var(--t-glow) / .12)); }
.dt-book{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.dt-book .cover{ position:relative; z-index:3; height:min(60vh, 580px, 92vw); width:auto; max-width:none; border-radius:6px 14px 14px 6px; box-shadow:0 50px 90px -30px rgba(0,0,0,.95), 0 0 100px -30px rgb(var(--t-glow) / .7); }
.dt-book .pg{ position:absolute; z-index:1; left:50%; top:50%; height:min(50vh, 480px, 76vw); width:auto; max-width:none; margin:0; border-radius:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.9); opacity:.94; }
.dt-book .mock{ height:min(72vh, 700px, 110vw); width:auto; max-width:none;
  -webkit-mask-image:radial-gradient(52% 56% at 50% 48%, #000 60%, transparent 100%); mask-image:radial-gradient(52% 56% at 50% 48%, #000 60%, transparent 100%); }
.dt-info{ position:relative; max-width:640px; }
.dt-badge{ position:relative; top:auto; left:auto; margin-bottom:18px; }
.dt-name{ font-size:clamp(38px, 4vw, 76px); line-height:1.02; letter-spacing:-.035em; color:#fff; margin-bottom:24px; }
.dt-name .ch{ display:inline-block; }
.dt-lead{ font-size:clamp(16px, 1.2vw, 20px); color:var(--muted); line-height:1.65; margin-bottom:34px; max-width:560px; }
/* (as .price: the gradient on the inner span, the glow on the paragraph) */
.dt-price{ font-family:var(--display); font-weight:700; font-size:clamp(40px, 3.6vw, 64px); letter-spacing:-.03em; line-height:1; margin-bottom:26px;
  filter:drop-shadow(0 0 22px rgb(var(--t-glow) / .45)); }
.dt-price > span{ display:block; color:transparent; background:linear-gradient(180deg, #fff 24%, rgb(var(--t-soft)) 100%); -webkit-background-clip:text; background-clip:text; }
.dt-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.dt-facts li{ display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 16px 0 12px; border-radius:14px; border:1px solid rgb(var(--t-line) / .13); background:rgb(var(--t-soft) / .05); font-size:14.5px; color:var(--text); }
.dt-facts svg{ width:20px; height:20px; color:rgb(var(--t-accent)); }
.dt-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.dt-acts .btn{ min-width:180px; }
.dt-pay{ display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid rgb(var(--t-line) / .13); }
.dt-secure{ font-size:13px; color:var(--muted); }
.dt-more{ max-width:1640px; margin:10vh auto 0; }
.dt-more h3{ font-size:clamp(24px, 2vw, 34px); margin-bottom:24px; color:#fff; }
.dt-more-row{ display:flex; gap:20px; overflow-x:auto; padding:10px 4px 30px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.dt-more-row::-webkit-scrollbar{ display:none; }
.mini{ flex:0 0 auto; width:300px; scroll-snap-align:start; display:flex; gap:14px; align-items:center; padding:14px; border-radius:20px; border:1px solid rgb(var(--t-line) / .14);
  background:linear-gradient(150deg, rgb(var(--t-glow) / .12), rgb(var(--t-deep) / .38)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); text-align:left; transition:border-color .4s, transform .5s var(--ease), box-shadow .4s; }
.mini:hover{ border-color:rgb(var(--t-line) / .38); transform:translateY(-4px); box-shadow:0 20px 50px -20px rgb(var(--t-glow) / .7); }
.mini-vis{ position:relative; width:72px; height:72px; border-radius:14px; overflow:hidden; flex:0 0 auto; background:radial-gradient(circle at 50% 45%, rgb(var(--t-glow) / .7), rgb(var(--t-orb3) / .45) 50%, rgb(var(--t-deep) / .6)); }
.mini-vis img{ width:100%; height:100%; object-fit:cover; }
.mini-vis .orb{ width:100%; top:50%; }
.mini b{ display:block; font-family:var(--display); font-size:15px; line-height:1.25; color:#fff; margin-bottom:4px; }
.mini span{ font-size:13.5px; color:rgb(var(--t-accent)); font-family:var(--display); font-weight:600; }

/* ---------- glass + drawer ---------- */
.glass{ background:linear-gradient(160deg, rgba(139,123,255,.16) 0%, rgba(18,13,38,.66) 34%, rgba(12,9,26,.80) 100%);
  border:1px solid var(--line2); -webkit-backdrop-filter:blur(28px) saturate(150%); backdrop-filter:blur(28px) saturate(150%);
  box-shadow:0 40px 120px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); }
.drawer{ position:fixed; inset:0; z-index:60; }
.drawer[hidden], .checkout[hidden]{ display:none; }
.drawer-scrim, .checkout-scrim{ position:absolute; inset:0; background:radial-gradient(80% 80% at 70% 50%, rgba(40,20,80,.35), rgba(4,3,10,.72)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.drawer-panel{ position:absolute; top:12px; right:12px; bottom:12px; width:min(460px, calc(100vw - 24px)); border-radius:28px; display:flex; flex-direction:column; overflow:hidden; }
.drawer-panel::before{ content:""; position:absolute; inset:0; background:var(--noise); opacity:.05; pointer-events:none; mix-blend-mode:overlay; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 24px 18px 28px; border-bottom:1px solid var(--line); }
.drawer-head h2{ font-size:26px; }
.drawer-body{ flex:1; overflow-y:auto; padding:10px 18px; overscroll-behavior:contain; }
.cart-empty{ padding:40px 10px; text-align:center; color:var(--muted); }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:14px 10px; border-bottom:1px solid var(--line); }
.cart-item .mini-vis{ width:64px; height:64px; }
.ci-name{ font-family:var(--display); font-weight:600; font-size:15px; line-height:1.3; color:#fff; }
.ci-type{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--t-accent)); margin-top:3px; }
.ci-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ci-price{ font-family:var(--display); font-weight:700; font-size:16px; white-space:nowrap; }
.ci-rm{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--muted); border:1px solid transparent; transition:color .3s, border-color .3s; }
.ci-rm:hover{ color:#fff; border-color:var(--line2); }
.drawer-foot{ padding:20px 24px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; background:linear-gradient(180deg, transparent, rgba(139,123,255,.06)); }
.total-row{ display:flex; align-items:baseline; justify-content:space-between; font-family:var(--display); }
.total-row span{ color:var(--muted); font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.total-row strong{ font-size:30px; letter-spacing:-.02em; color:#fff; }

/* ---------- checkout ---------- */
.checkout{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; }
.checkout-panel{ position:relative; width:min(1080px, 100%); max-height:calc(100vh - 40px); overflow-y:auto; border-radius:32px; padding:44px 48px 42px; overscroll-behavior:contain; }
.checkout-panel::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 85% 0%, rgba(168,85,247,.18), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(91,63,214,.2), transparent 70%); pointer-events:none; border-radius:inherit; }
.co-close{ position:absolute; top:22px; right:22px; z-index:2; }
.co-title{ position:relative; font-size:clamp(28px, 2.4vw, 40px); margin-bottom:30px; padding-right:60px; }
.co-grid{ position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; }
.co-summary{ display:flex; flex-direction:column; gap:16px; padding:22px; border-radius:22px; border:1px solid var(--line); background:rgba(7,6,14,.3); align-self:start; }
.co-items li{ --h:268; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.co-items li b{ font-family:var(--display); font-weight:600; color:#fff; display:block; line-height:1.3; }
.co-items li small{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--h) 90% 82%); }
.co-items li em{ font-style:normal; font-family:var(--display); font-weight:700; white-space:nowrap; }
.co-secure{ font-size:13px; color:var(--muted); display:flex; gap:10px; align-items:flex-start; }
.co-secure svg{ flex:0 0 auto; width:18px; height:18px; color:var(--lilac); margin-top:1px; }
.co-form{ display:flex; flex-direction:column; gap:20px; }
.field{ position:relative; display:flex; flex-direction:column; gap:8px; }
.field-label{ font-size:13.5px; color:var(--lilac); }
.field input{ height:54px; border-radius:16px; border:1px solid var(--line2); background:rgba(7,6,14,.4); color:#fff; padding:0 18px; font:500 16px var(--body); outline:none; transition:border-color .3s, box-shadow .3s, background .3s; }
.field input:focus{ border-color:rgba(168,85,247,.7); box-shadow:0 0 0 4px rgba(168,85,247,.18), 0 0 30px -8px rgba(168,85,247,.7); background:rgba(20,14,40,.55); }
.field.valid input{ border-color:rgba(139,123,255,.65); }
.field.invalid input{ border-color:rgba(255,140,190,.55); }
.field-hint{ font-size:13px; color:var(--muted); margin-top:8px; padding-left:2px; }
.nip-wrap{ overflow:hidden; }
.switch, .check{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; user-select:none; }
.switch input, .check input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch-track{ position:relative; flex:0 0 auto; width:48px; height:28px; border-radius:999px; background:rgba(217,198,255,.12); border:1px solid var(--line2); transition:background .35s var(--ease), border-color .35s; }
.switch-knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4); transition:transform .45s var(--ease); }
.switch input:checked + .switch-track{ background:var(--grad); border-color:transparent; box-shadow:0 0 20px -4px rgba(168,85,247,.8); }
.switch input:checked + .switch-track .switch-knob{ transform:translateX(20px); }
.switch input:focus-visible + .switch-track, .check input:focus-visible + .check-box{ outline:2px solid var(--lilac); outline-offset:3px; }
.switch-label{ padding-top:3px; font-size:15px; }
.check-box{ flex:0 0 auto; width:24px; height:24px; border-radius:8px; border:1px solid var(--line2); background:rgba(7,6,14,.4); display:grid; place-items:center; color:#fff; transition:background .3s, border-color .3s, box-shadow .3s; margin-top:1px; }
.check-box svg{ width:16px; height:16px; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .4s var(--ease); }
.check input:checked + .check-box{ background:var(--grad); border-color:transparent; box-shadow:0 0 18px -4px rgba(168,85,247,.8); }
.check input:checked + .check-box svg{ stroke-dashoffset:0; }
.check-label{ font-size:14px; line-height:1.55; color:var(--text); }
.check-label a{ color:var(--lilac); border-bottom:1px solid rgba(217,198,255,.35); }
.btn-pay{ height:60px; font-size:16.5px; margin-top:6px; }
.co-demo{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:18px; border:1px solid rgba(217,198,255,.3); background:linear-gradient(120deg, rgba(139,123,255,.2), rgba(168,85,247,.14)); font-family:var(--display); font-weight:600; font-size:16px; }
.co-demo[hidden]{ display:none; }
.co-demo-orb{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; background:radial-gradient(circle, #fff 0 15%, var(--lilac) 30%, var(--magenta) 60%, transparent 72%); box-shadow:0 0 30px 6px rgba(168,85,247,.6); animation:breathe 2.6s var(--ease-io) infinite; }

/* ---------- real payment (sklep/deploy only): error line, busy pay button, cart note, thank-you panel ---------- */
.co-error{ font-size:14px; line-height:1.55; color:#ffd6e8; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,140,190,.45); background:rgba(255,140,190,.08); }
.co-error[hidden], .cart-note[hidden]{ display:none; }
.btn-pay[aria-busy="true"], .btn-pay[aria-busy="true"][disabled]{ opacity:.85; filter:none; cursor:progress; }
.btn-pay[aria-busy="true"]::after{ content:""; flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
.cart-note{ margin:10px 10px 4px; padding:12px 14px; border-radius:14px; border:1px solid rgba(217,198,255,.3); background:linear-gradient(120deg, rgba(139,123,255,.16), rgba(168,85,247,.1)); font-size:14px; line-height:1.5; color:var(--text); }
.ty-panel{ width:min(640px, 100%); display:flex; flex-direction:column; gap:20px; }
.ty-panel .co-title{ margin-bottom:0; }
.ty-panel .co-demo, .ty-panel .co-items, .ty-acts, .ty-text{ position:relative; }
.ty-text{ font-size:15.5px; line-height:1.6; color:var(--text); }
.ty-text a{ color:var(--lilac); border-bottom:1px solid rgba(217,198,255,.35); }
.ty-acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.ty-panel[data-state="paid"] .co-demo-orb, .ty-panel[data-state="held"] .co-demo-orb{ animation:none; }
.ty-panel[data-state="unknown"] .co-demo-orb, .ty-panel[data-state="error"] .co-demo-orb, .ty-panel[data-state="offline"] .co-demo-orb, .ty-panel[data-state="unpaid"] .co-demo-orb{ animation:none; opacity:.55; filter:saturate(.4); box-shadow:none; }
/* thank-you, paid: the buyer's next step (platform, login, invoice, access, contact) */
.ty-next{ position:relative; display:flex; flex-direction:column; gap:14px; padding:18px 20px; border-radius:20px; border:1px solid rgba(217,198,255,.22);
  background:linear-gradient(140deg, rgba(139,123,255,.14), rgba(168,85,247,.08) 60%, rgba(7,6,14,.25)); }
.ty-next-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ty-next-title{ font-family:var(--display); font-weight:600; font-size:16.5px; color:#fff; line-height:1.35; flex:1 1 220px; }
.ty-platform{ height:48px; padding:0 22px; flex:0 0 auto; }
.ty-steps{ display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.5; color:var(--text); }
.ty-steps li{ position:relative; padding-left:18px; }
.ty-steps li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--grad); box-shadow:0 0 8px rgba(168,85,247,.7); }
.ty-steps a{ color:var(--lilac); border-bottom:1px solid rgba(217,198,255,.35); }
@media (max-width: 899px){ .ty-platform{ width:100%; } .ty-next{ padding:16px; } }
/* billing country (checkout): a pill switch like the category tabs; abroad = a calm note instead of the pay button */
.co-country{ border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.co-country legend{ padding:0; margin-bottom:8px; }
.seg{ display:inline-flex; align-self:flex-start; gap:6px; padding:5px; border-radius:999px; border:1px solid var(--line); background:rgba(16,12,34,.35); }
.seg-opt{ position:relative; cursor:pointer; }
.seg-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg-opt span{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px; font-family:var(--display); font-weight:500; font-size:14.5px; color:var(--muted); white-space:nowrap; transition:color .35s, background .35s, box-shadow .35s; }
.seg-opt:hover span{ color:var(--text); background:rgba(217,198,255,.06); }
.seg-opt input:checked + span{ color:#fff; background:linear-gradient(120deg, rgba(139,123,255,.32), rgba(168,85,247,.24)); box-shadow:inset 0 0 0 1px rgba(217,198,255,.22); }
.seg-opt input:focus-visible + span{ outline:2px solid var(--lilac); outline-offset:2px; }
.co-abroad{ display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:18px; border:1px solid rgba(217,198,255,.3);
  background:linear-gradient(120deg, rgba(139,123,255,.16), rgba(168,85,247,.1)); font-size:14.5px; line-height:1.55; color:var(--text); }
.co-abroad a{ color:var(--lilac); border-bottom:1px solid rgba(217,198,255,.35); overflow-wrap:anywhere; }
.co-abroad a:hover{ color:#fff; }
/* promo code (checkout summary): a quiet link, the field on demand, the applied code as a soft chip */
.co-promo{ display:flex; flex-direction:column; gap:10px; }
.co-promo-toggle{ align-self:flex-start; font-size:13.5px; color:var(--lilac); border-bottom:1px dashed rgba(217,198,255,.4); padding:0 0 1px; transition:color .3s, border-color .3s; }
.co-promo-toggle:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
.co-promo-box{ display:flex; gap:10px; align-items:flex-end; }
.co-promo-box .field{ flex:1; min-width:0; }
.co-promo-box .field input{ height:46px; text-transform:uppercase; letter-spacing:.06em; }
.co-promo-apply{ height:46px; padding:0 18px; flex:0 0 auto; }
.co-promo-apply[aria-busy="true"]{ opacity:.7; cursor:progress; }
.co-promo-msg{ font-size:13px; line-height:1.45; color:#ffb3d1; }
.co-promo-on{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13.5px; color:var(--text); padding:10px 12px; border-radius:12px;
  border:1px solid rgba(217,198,255,.3); background:linear-gradient(120deg, rgba(139,123,255,.16), rgba(168,85,247,.1)); }
.co-promo-on b{ font-family:var(--display); font-weight:600; letter-spacing:.06em; color:#fff; overflow-wrap:anywhere; }
.co-promo-remove{ flex:0 0 auto; color:var(--lilac); font-size:13px; border-bottom:1px solid rgba(217,198,255,.35); }
.co-promo-remove:hover{ color:#fff; }
.total-row strong .co-old{ font-size:17px; color:var(--muted); font-weight:500; margin-right:10px; text-decoration-thickness:1.5px; }
.total-row strong .co-new{ font:inherit; display:inline-block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* NIP hint: the company found in the VAT register, or a plain error */
.field-hint.is-ok{ color:var(--text); line-height:1.5; }
.field-hint.is-ok strong{ font-family:var(--display); font-weight:600; color:#fff; }
.field-hint.is-error{ color:#ffb3d1; }
@media (max-width: 899px){ .ty-acts .btn{ flex:1 1 160px; } }

/* ---------- cursor: the normal system cursor everywhere (arrow, pointer on links/buttons/cards, text in inputs) ---------- */
.card, .hcard, .mini, .mfoot a, .hdr a{ cursor:pointer; }
input[type="email"], input[type="text"]{ cursor:text; }

/* fly-to-cart orb */
.fly{ position:fixed; left:0; top:0; z-index:99; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fff 0 20%, var(--lilac) 40%, var(--magenta) 70%, transparent 75%); box-shadow:0 0 24px 6px rgba(168,85,247,.7); }

/* ---------- responsive ---------- */
@media (max-width: 1280px){
  .hdr-nav a{ padding:9px 13px; font-size:13.5px; }
}
@media (max-width: 899px){
  :root{ --hdr:112px; }
  .hdr-in{ flex-wrap:wrap; gap:0; padding-top:10px; align-content:flex-start; height:auto; }
  .hdr{ height:auto; }
  .hdr-logo{ margin-right:auto; padding:6px 0; }
  .cart-btn{ height:42px; padding:0 12px 0 12px; }
  .cart-btn-label{ display:none; }
  .hdr-nav{ order:3; width:100%; margin:10px 0 12px; justify-content:space-between; gap:2px; padding:4px; }
  .hdr-nav a{ flex:1 1 auto; text-align:center; padding:8px 6px; font-size:12.5px; }
  /* home stacks: title, then the three categories as wide cards; the full-bleed photo stays fixed behind (as on the
     live site) and the page scrolls over it */
  .home{ height:auto; min-height:0; overflow:visible; display:block; padding:calc(var(--hdr) + 7svh) var(--gut) 30px; }
  .home-in{ margin:0; width:auto; gap:22px; }
  .home-title{ font-size:clamp(64px, 21vw, 96px); margin-bottom:12px; }
  .home-sub{ font-size:16px; gap:10px; }
  /* phones: the header is always frosted glass, so the photo slides out from under it instead of starting on a line */
  .hdr{ background:linear-gradient(180deg, rgba(10,8,22,.84), rgba(10,8,22,.6)); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border-bottom-color:var(--line); }
  /* ...and the photo rises out of the mist below it, never starting on the header's edge (with WebGL: mist.js uTop) */
  .no-webgl .hero-figure-fallback{ -webkit-mask-image:linear-gradient(180deg, transparent calc(var(--hdr) - 6px), #000 calc(var(--hdr) + 20vh));
    mask-image:linear-gradient(180deg, transparent calc(var(--hdr) - 6px), #000 calc(var(--hdr) + 20vh));
    /* masked, so no CSS filter on it (iOS Safari draws filter + mask as a square): the dimming the filter gave comes
       from a little less opacity over the night background instead */
    filter:none; opacity:calc(var(--figfade, 1) * .88); }
  /* phones: bigger cards with room between them; picture and words on one surface */
  .home-cats{ grid-template-columns:1fr; height:auto; gap:22px; }
  .hcard{ flex-direction:row; height:212px; border-radius:26px; }
  .hc-scene{ flex:0 0 45%; }
  .hc-scene::after{ display:none; }
  .hc-names{ display:none; }
  /* the name and the button sit together in the middle of the card's right half */
  .hc-body{ flex:1 1 auto; min-width:0; justify-content:center; padding:20px 20px 20px 12px; gap:18px; }
  /* «Audioseanse» (6.03 em) cannot wrap: the size follows the text half of the card, 25 px from 375 px phones up */
  .hc-name{ font-size:25px; font-size:clamp(19px, calc((55cqi - 32px) / 6.2), 25px); line-height:1.1; white-space:normal; }
  .hc-cta{ height:42px; padding:0 17px 0 19px; font-size:15px; }
  /* two books in a fan: the printed one behind and higher, the ebook in front and lower, both inside the picture */
  .bk-c{ right:4%; top:5%; height:63%; }
  .bk-e{ left:7%; top:27%; height:64%; }
  .sat{ width:90%; }
  .sc-audio .orb{ width:64%; }
  .sc-audio .wave{ left:10px; right:10px; bottom:10px; height:16px; }
  /* category page: one column */
  .catv{ padding:calc(var(--hdr) + 30px) var(--gut) 26px; }
  .cv-head{ flex-direction:column; align-items:stretch; gap:18px; margin-bottom:24px; }
  .cv-grid[data-cat]{ grid-template-columns:1fr; grid-auto-rows:auto; gap:14px; }
  /* (heights are minimums: on a 320 px phone a long name and the wrapped button make the card a little taller) */
  .cv-grid[data-cat="audioseanse"] .card{ height:auto; min-height:198px; }
  .cv-grid[data-cat="audioseanse"] .card-h .card-vis{ width:37%; }
  .cv-grid[data-cat="audioseanse"] .card-h .card-body{ padding:16px 16px 16px 14px; }
  .cv-grid[data-cat="audioseanse"] .price{ font-size:21px; }
  .cv-grid[data-cat="audioseanse"] .card .btn{ padding:0 14px; }
  .cv-grid[data-cat="audioseanse"] .card .btn .ic-add{ display:none; }
  .cv-grid[data-cat="audioseanse"] .badge{ top:10px; left:10px; height:26px; font-size:10.5px; padding:0 10px 0 8px; }
  .cv-grid[data-cat="kursy"] .card{ height:auto; min-height:450px; }
  .card-xl{ flex-direction:column; height:auto !important; }
  .card-xl .card-vis{ width:100%; height:300px; border-radius:27px 27px 0 0; }
  .card-xl .card-body{ padding:20px 22px 22px; }
  .card-xl .card-name{ font-size:24px; }
  .card-xl .price{ font-size:28px; }
  .card-xl .btn{ height:44px; padding:0 18px; }
  .card-xl .card-foot{ margin-top:18px; }
  .card-name{ font-size:20px; }
  .dt-grid{ grid-template-columns:1fr; gap:24px; min-height:0; }
  .dt-vis{ aspect-ratio:1/0.9; max-height:none; }
  .dt-bloom{ width:100%; margin:-50% 0 0 -50%; }   /* the glow stays inside the screen's width */
  .dt-name{ font-size:clamp(32px, 9vw, 46px); }
  .dt-acts .btn{ flex:1 1 140px; min-width:0; }
  .detail-scroll{ padding-top:calc(var(--hdr) + 14px); }
  .checkout{ padding:0; align-items:end; }
  .checkout-panel{ border-radius:28px 28px 0 0; max-height:94svh; padding:30px 20px 28px; }
  .co-grid{ grid-template-columns:1fr; gap:22px; }
  .co-title{ font-size:26px; margin-bottom:20px; }
  .drawer-panel{ top:auto; left:8px; right:8px; bottom:8px; width:auto; max-height:86svh; }
}
@media (max-width: 380px){
  .hdr-nav a{ font-size:11.5px; padding:8px 4px; }
}
/* the narrowest phones (320-359 px): the audio card's badge a size smaller again, so it keeps clear of the label */
@media (max-width: 359px){
  .cv-grid[data-cat="audioseanse"] .badge{ gap:5px; font-size:10px; letter-spacing:.05em; padding:0 9px 0 7px; }
  .cv-grid[data-cat="audioseanse"] .badge svg{ width:11px; height:11px; }
}
/* phones and touch screens are lighter: the cards' breathing glows are off and the orbs' extra shimmer layers stand still */
@media (max-width: 899px), (hover: none){
  .cell::before, .cell::after{ display:none; }
  [data-th] .orb .o-caustic, [data-th] .orb .o-rings2, [data-th] .orb .o-glint, [data-th] .orb .o-halo{ animation:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
  .orb .o-core, .orb .o-spiral, .orb .o-rings, .orb .o-eye, .wave span{ animation:none !important; }
  /* the premium light stands still: no sweep, shimmer, breathing or running rim */
  .orb i, .cell::before, .cell::after, .dt-bloom i, .card .rim{ animation:none !important; }
  .btn-primary::after, .hc-cta::after{ display:none; }
}