/* ============================================================
   ZELMORA STUDIO — zh-ultra.css
   Unified "ultra realistic" depth layer.
   Loaded LAST on every page of Main + Shop. Identical in both.

   Design intent: real material depth (glass, specular light,
   layered shadow, film grain) instead of flat blocks — and NO
   page ever looks empty.

   Everything is scoped under body.zh-ultra so legacy pages
   cannot be broken by accident.
   ============================================================ */

:root{
  --zh-bg:        var(--bg,#1E1D23);
  --zh-bg2:       #16151C;
  --zh-card:      #25232B;
  --zh-card2:     #2D2B36;
  --zh-border:    var(--border,#3D3849);
  --zh-purple:    var(--purple,#4B3F58);
  --zh-purple2:   #6b5f86;
  --zh-lav:       var(--lavender,#8A7FA2);
  --zh-soft:      var(--soft,#D9D5E6);
  --zh-ink:       var(--white,#F5F4F8);
  --zh-gold:      var(--gold,#C9A96E);
  --zh-gold2:     #e4c98f;
  --zh-ok:        #C9A96E;
  --zh-ease:      cubic-bezier(.16,1,.3,1);
  --zh-glass:     rgba(37,35,43,.66);
  --zh-glass-brd: rgba(138,127,162,.20);
  --zh-lift:      0 26px 60px -20px rgba(0,0,0,.7), 0 10px 24px -14px rgba(0,0,0,.55);

  /* realistic light model */
  --zh-spec:      linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 42%);
  --zh-rim:       inset 0 1px 0 rgba(255,255,255,.07);
  --zh-depth-1:   0 1px 2px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.45);
  --zh-depth-2:   0 2px 4px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.58), var(--zh-rim);
  --zh-depth-3:   0 4px 8px rgba(0,0,0,.42), 0 30px 70px -22px rgba(0,0,0,.72), var(--zh-rim);
  --zh-goldglow:  0 0 0 1px rgba(201,169,110,.32), 0 10px 34px -10px rgba(201,169,110,.30);
}

/* ============================================================
   1. AMBIENT WORLD — the single biggest "not flat" win.
   Three fixed layers behind all content on EVERY page:
   aurora mesh -> film grain -> vignette.
   ============================================================ */
body.zh-ultra{
  background-color:var(--zh-bg);
  position:relative;
}

/* aurora / light mesh */
body.zh-ultra::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 12% -8%,  rgba(107,95,134,.30), transparent 60%),
    radial-gradient(900px  640px at 92% 4%,   rgba(201,169,110,.13), transparent 62%),
    radial-gradient(1000px 800px at 50% 108%, rgba(75,63,88,.36),   transparent 66%),
    linear-gradient(180deg,var(--zh-bg) 0%,var(--zh-bg2) 62%,var(--zh-bg) 100%);
}

/* film grain + vignette — this is what reads as "real" */
body.zh-ultra::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:
    radial-gradient(140% 110% at 50% 45%, transparent 52%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.32'/></svg>");
  background-size:auto, 180px 180px;
}

/* floating light orbs — slow, calm, no particles */
body.zh-ultra .zh-orb{
  position:fixed; border-radius:50%; z-index:-2; pointer-events:none;
  filter:blur(70px); opacity:.5;
  animation:zh-drift 26s var(--zh-ease) infinite alternate;
}
body.zh-ultra .zh-orb-a{width:420px;height:420px;top:-90px;left:-80px;
  background:radial-gradient(circle,rgba(107,95,134,.62),transparent 70%)}
body.zh-ultra .zh-orb-b{width:340px;height:340px;bottom:-70px;right:-60px;
  background:radial-gradient(circle,rgba(201,169,110,.32),transparent 70%);animation-delay:-9s}
@keyframes zh-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-34px,0) scale(1.12)}}

/* ============================================================
   2. TYPE — consistent rhythm on every page
   ============================================================ */
body.zh-ultra h1,body.zh-ultra h2,body.zh-ultra h3{
  color:var(--zh-ink); letter-spacing:-.02em; line-height:1.16;
  text-wrap:balance;
}
body.zh-ultra h1{
  font-size:clamp(2rem,4.4vw,3.35rem); font-weight:700;
  background:linear-gradient(180deg,#fff 12%,var(--zh-soft) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 22px 44px rgba(0,0,0,.42);
}
body.zh-ultra h2{font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:650}
body.zh-ultra p{color:var(--zh-soft);line-height:1.8}

/* the eyebrow label used across both sites */
body.zh-ultra .section-label{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zh-gold);
  padding:.4rem .8rem; border-radius:999px;
  background:linear-gradient(180deg,rgba(201,169,110,.16),rgba(201,169,110,.05));
  border:1px solid rgba(201,169,110,.26);
  box-shadow:var(--zh-rim);
}
body.zh-ultra .section-label::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--zh-gold); box-shadow:0 0 10px var(--zh-gold);
}

/* every section gets breathing room + a hairline of light */
body.zh-ultra .section{position:relative;padding:4.25rem 0}
body.zh-ultra .section + .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1100px,86%); height:1px;
  background:linear-gradient(90deg,transparent,var(--zh-glass-brd) 22%,rgba(201,169,110,.30) 50%,var(--zh-glass-brd) 78%,transparent);
}

/* ============================================================
   3. SURFACES — glass with real specular highlight
   Binds to BOTH the new .zh-* cards and the legacy classes,
   so old pages instantly match the premium home page.
   ============================================================ */
body.zh-ultra .zh-card,
body.zh-ultra .card,
body.zh-ultra .auth-card,
body.zh-ultra .dash-section,
body.zh-ultra .zh-panel{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--zh-card2),var(--zh-card));
  border:1px solid var(--zh-glass-brd);
  border-radius:16px;
  box-shadow:var(--zh-depth-2);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  transition:transform .45s var(--zh-ease), box-shadow .45s var(--zh-ease), border-color .45s var(--zh-ease);
}
/* glass gloss across the top edge */
body.zh-ultra .zh-card::after,
body.zh-ultra .card::after,
body.zh-ultra .auth-card::after,
body.zh-ultra .dash-section::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--zh-spec); pointer-events:none; z-index:1;
}
body.zh-ultra .zh-card:hover,
body.zh-ultra .card:hover{
  transform:translateY(-6px);
  box-shadow:var(--zh-depth-3);
  border-color:rgba(201,169,110,.30);
}

/* product / cover imagery — realistic frame + floor reflection */
body.zh-ultra .zh-card-media,
body.zh-ultra .zh-thumb{
  position:relative; overflow:hidden; border-radius:12px;
  background:linear-gradient(150deg,#2b2934,#1c1b22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -30px 50px -34px rgba(0,0,0,.85);
}
body.zh-ultra .zh-card-media img,
body.zh-ultra .zh-thumb img{
  transition:transform .8s var(--zh-ease), filter .6s var(--zh-ease);
  filter:saturate(1.04) contrast(1.03);
}
body.zh-ultra .zh-card:hover .zh-card-media img{transform:scale(1.07)}
/* moving specular sweep = looks like light on glass */
body.zh-ultra .zh-card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%); transition:transform .9s var(--zh-ease);
}
body.zh-ultra .zh-card:hover .zh-card-media::after{transform:translateX(120%)}

/* ============================================================
   4. BUTTONS — dimensional, gold-lit primary
   ============================================================ */
body.zh-ultra .btn,
body.zh-ultra .zh-btn{
  position:relative; overflow:hidden;
  border-radius:11px; font-weight:600; letter-spacing:.01em;
  transition:transform .3s var(--zh-ease), box-shadow .3s var(--zh-ease), filter .3s var(--zh-ease);
}
body.zh-ultra .btn::after,
body.zh-ultra .zh-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--zh-spec); pointer-events:none;
}
body.zh-ultra .btn-primary,
body.zh-ultra .zh-btn-primary{
  background:linear-gradient(180deg,var(--zh-purple2),var(--zh-purple));
  border:1px solid rgba(201,169,110,.34);
  color:#fff;
  box-shadow:var(--zh-depth-1), 0 0 0 1px rgba(255,255,255,.04) inset;
}
body.zh-ultra .btn-primary:hover,
body.zh-ultra .zh-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--zh-depth-2), var(--zh-goldglow);
  filter:brightness(1.07);
}
body.zh-ultra .btn-outline,
body.zh-ultra .btn-secondary{
  background:rgba(255,255,255,.03);
  border:1px solid var(--zh-glass-brd);
  color:var(--zh-soft);
  backdrop-filter:blur(8px);
}
body.zh-ultra .btn-outline:hover,
body.zh-ultra .btn-secondary:hover{
  border-color:rgba(201,169,110,.42); color:var(--zh-ink); transform:translateY(-2px);
}
body.zh-ultra .btn:active,
body.zh-ultra .zh-btn:active{transform:translateY(0) scale(.985)}

/* ============================================================
   5. FORMS — same material language
   ============================================================ */
body.zh-ultra input[type=text],body.zh-ultra input[type=email],
body.zh-ultra input[type=password],body.zh-ultra input[type=search],
body.zh-ultra input[type=number],body.zh-ultra select,body.zh-ultra textarea{
  background:rgba(22,21,28,.72);
  border:1px solid var(--zh-glass-brd);
  border-radius:11px; color:var(--zh-ink);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.34);
  transition:border-color .3s var(--zh-ease), box-shadow .3s var(--zh-ease);
}
body.zh-ultra input:focus,body.zh-ultra select:focus,body.zh-ultra textarea:focus{
  outline:none;
  border-color:rgba(201,169,110,.55);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.34), 0 0 0 3px rgba(201,169,110,.15);
}
body.zh-ultra ::placeholder{color:rgba(217,213,230,.42)}

/* ------------------------------------------------------------------
   Components that render their OWN shell (pill / dropdown / toolbar)
   and put a BARE input inside it. The generic field styling above must
   never apply here, otherwise you get a box inside a box.
   ------------------------------------------------------------------ */
body.zh-ultra .zh-search input,
body.zh-ultra .zh-search-field input,
body.zh-ultra .nav-search input,
body.zh-ultra input.nav-search-input,
body.zh-ultra .zs-search input,
body.zh-ultra .zs-nav-search input,
body.zh-ultra .search-field input,
body.zh-ultra .input-bare,
body.zh-ultra .zh-qty input,
body.zh-ultra .zh-coupon-row input{
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:.7rem 0;
}
body.zh-ultra .zh-search input:focus,
body.zh-ultra .zh-search-field input:focus,
body.zh-ultra .nav-search input:focus,
body.zh-ultra input.nav-search-input:focus,
body.zh-ultra .zs-search input:focus,
body.zh-ultra .search-field input:focus{
  outline:none;
  border:none;
  box-shadow:none;
}
/* the shell itself gets the gold focus ring instead */
body.zh-ultra .zh-search-field:focus-within{
  border-color:rgba(201,169,110,.55);
  box-shadow:0 0 0 3px rgba(201,169,110,.16),0 18px 44px -22px rgba(0,0,0,.7);
}



/* alerts */
body.zh-ultra .alert{
  border-radius:12px; border:1px solid var(--zh-glass-brd);
  background:linear-gradient(180deg,rgba(45,43,54,.9),rgba(37,35,43,.9));
  box-shadow:var(--zh-depth-1); color:var(--zh-soft);
}
body.zh-ultra .alert-error{border-color:rgba(217,118,95,.4);background:linear-gradient(180deg,rgba(217,118,95,.14),rgba(217,118,95,.05))}
body.zh-ultra .alert-success,
body.zh-ultra .zh-review-flash.ok{border-color:rgba(201,169,110,.4);background:linear-gradient(180deg,rgba(201,169,110,.14),rgba(201,169,110,.05))}

/* ============================================================
   6. NEVER-EMPTY STATES
   .zh-empty already exists in products.php — now it is a real
   designed component instead of bare text.
   ============================================================ */
body.zh-ultra .zh-empty{
  position:relative; text-align:center;
  padding:4rem 1.75rem; margin:1.5rem 0;
  border-radius:18px;
  border:1px dashed rgba(138,127,162,.30);
  background:
    radial-gradient(520px 240px at 50% 0%,rgba(107,95,134,.20),transparent 70%),
    linear-gradient(180deg,rgba(37,35,43,.62),rgba(30,29,35,.62));
  box-shadow:var(--zh-depth-1);
  color:var(--zh-soft);
}
body.zh-ultra .zh-empty::before{
  content:""; display:block; width:74px; height:74px; margin:0 auto 1.15rem;
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(201,169,110,.22),rgba(201,169,110,.05)),
    linear-gradient(180deg,var(--zh-card2),var(--zh-card));
  border:1px solid rgba(201,169,110,.28);
  box-shadow:var(--zh-depth-2), 0 0 30px -8px rgba(201,169,110,.35);
}
body.zh-ultra .zh-empty h3,
body.zh-ultra .zh-empty strong{display:block;color:var(--zh-ink);font-size:1.2rem;margin-bottom:.5rem}
body.zh-ultra .zh-empty .btn{margin-top:1.4rem}

/* skeleton shimmer for anything still loading */
body.zh-ultra .zh-skel{
  border-radius:12px; min-height:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.03) 63%);
  background-size:400% 100%; animation:zh-shim 1.5s ease infinite;
}
@keyframes zh-shim{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============================================================
   7. PAGE HEADER — gives thin pages instant substance
   ============================================================ */
body.zh-ultra .zh-pagehead{
  position:relative; overflow:hidden;
  padding:4.5rem 0 3rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--zh-glass-brd);
  background:
    radial-gradient(800px 320px at 18% 0%,rgba(107,95,134,.26),transparent 68%),
    radial-gradient(600px 260px at 86% 10%,rgba(201,169,110,.11),transparent 68%);
}
body.zh-ultra .zh-pagehead::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,110,.45),transparent);
}

/* trust strip / feature rows already in markup */
body.zh-ultra .zh-trust-item{
  background:linear-gradient(180deg,rgba(45,43,54,.6),rgba(37,35,43,.6));
  border:1px solid var(--zh-glass-brd); border-radius:14px;
  padding:1.1rem 1.25rem; box-shadow:var(--zh-depth-1);
  transition:transform .4s var(--zh-ease),border-color .4s var(--zh-ease);
}
body.zh-ultra .zh-trust-item:hover{transform:translateY(-4px);border-color:rgba(201,169,110,.30)}
body.zh-ultra .zh-trust-ic{color:var(--zh-gold);filter:drop-shadow(0 4px 12px rgba(201,169,110,.42))}

/* prose */
body.zh-ultra .post-content{color:var(--zh-soft);line-height:1.9;font-size:1.02rem}
body.zh-ultra .post-content img{border-radius:14px;box-shadow:var(--zh-depth-2);margin:1.75rem 0}
body.zh-ultra .post-content blockquote{
  border-left:3px solid var(--zh-gold); background:rgba(201,169,110,.06);
  padding:1rem 1.35rem; border-radius:0 12px 12px 0; margin:1.5rem 0;
}
body.zh-ultra .post-content a{color:var(--zh-gold2);text-underline-offset:3px}

/* nav + footer glass */
body.zh-ultra .navbar{
  background:rgba(22,21,28,.78);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--zh-glass-brd);
  box-shadow:0 8px 30px -18px rgba(0,0,0,.9);
}
body.zh-ultra .nav-link{transition:color .25s var(--zh-ease)}
body.zh-ultra .nav-link:hover{color:var(--zh-gold2)}
body.zh-ultra footer{
  position:relative;
  background:linear-gradient(180deg,transparent,rgba(22,21,28,.85));
  border-top:1px solid var(--zh-glass-brd);
}

/* ============================================================
   8. SCROLL REVEAL — .fade-in is already used 45x in markup
   ============================================================ */
html.zh-js body.zh-ultra .fade-in{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--zh-ease), transform .85s var(--zh-ease);
  will-change:opacity,transform;
}
html.zh-js body.zh-ultra .fade-in.zh-in{opacity:1;transform:none}
/* never hide content if JS fails */
body.zh-ultra.zh-nojs .fade-in{opacity:1;transform:none}

/* selection + scrollbar polish */
body.zh-ultra ::selection{background:rgba(201,169,110,.28);color:#fff}
body.zh-ultra ::-webkit-scrollbar{width:11px;height:11px}
body.zh-ultra ::-webkit-scrollbar-track{background:var(--zh-bg2)}
body.zh-ultra ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--zh-purple2),var(--zh-purple));
  border-radius:99px;border:2px solid var(--zh-bg2);
}
body.zh-ultra ::-webkit-scrollbar-thumb:hover{background:var(--zh-lav)}

/* ============================================================
   9. RESPONSIVE + ACCESSIBILITY
   ============================================================ */
@media (max-width:768px){
  body.zh-ultra .section{padding:3rem 0}
  body.zh-ultra .zh-pagehead{padding:3rem 0 2rem}
  body.zh-ultra .zh-empty{padding:3rem 1.15rem}
  body.zh-ultra .zh-orb{display:none}          /* mobile GPU relief */
  body.zh-ultra::after{opacity:.34}
}
@media (max-width:560px){
  body.zh-ultra h1{font-size:clamp(1.65rem,7vw,2.2rem)}
  body.zh-ultra .section{padding:2.4rem 0}
}
@media (prefers-reduced-motion:reduce){
  body.zh-ultra *,body.zh-ultra *::before,body.zh-ultra *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.zh-js body.zh-ultra .fade-in{opacity:1;transform:none}
}
/* older browsers without backdrop-filter still get solid surfaces */
@supports not (backdrop-filter:blur(2px)){
  body.zh-ultra .zh-card,body.zh-ultra .card,
  body.zh-ultra .auth-card,body.zh-ultra .navbar{background:var(--zh-card)}
}
@media print{
  body.zh-ultra::before,body.zh-ultra::after,body.zh-ultra .zh-orb{display:none}
}

/* ================================================================
   REVIEW GATE - verified buyers only (10-day window)
   ================================================================ */
.zh-review-gate{display:flex;gap:1rem;align-items:flex-start;border:1px solid rgba(201,169,110,.32);background:linear-gradient(160deg,rgba(201,169,110,.10),rgba(37,35,43,.74));border-radius:18px;padding:1.15rem 1.3rem;box-shadow:var(--zh-lift);position:relative;overflow:hidden}
.zh-review-gate::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(201,169,110,.12),transparent 60%);pointer-events:none}
.zh-review-gate-ico{color:#C9A96E;font-size:1.4rem;line-height:1;filter:drop-shadow(0 0 10px rgba(201,169,110,.5))}
.zh-review-gate-txt{position:relative;z-index:1}
.zh-review-gate-txt strong{display:block;color:var(--zh-ink);font-size:1rem;margin-bottom:.32rem;letter-spacing:.01em}
.zh-review-gate-txt p{margin:0 0 .8rem;color:var(--zh-lav);font-size:.9rem;line-height:1.6;max-width:52ch}
.zh-rf-note{margin:-.5rem 0 1.1rem;font-size:.82rem;color:var(--zh-lav)}
.zh-rf-note .zh-review-verified{color:#C9A96E;font-weight:600}
.zh-btn-sm{padding:.5rem .95rem;font-size:.84rem}
@media (max-width:560px){.zh-review-gate{padding:1rem 1.05rem;gap:.75rem}.zh-review-gate-txt p{font-size:.86rem}}

/* ============================================================
   NAVBAR TOP LOCK
   The header must always hug the very top of the viewport. This neutralises
   any inherited spacing that could push it down, and re-asserts the sticky
   anchor in case another sheet loads later in the cascade.
   ============================================================ */
body.zh-ultra{margin-top:0;padding-top:0}
body.zh-ultra > .navbar,
body.zh-ultra header.navbar{
  position:sticky;
  top:0;
  margin-top:0;
  z-index:100;
}

/* ============================================================
   CUSTOMER PAGE UPGRADE
   Product specs, FAQ, related items, category grid, free-download
   capture, and a graceful placeholder when an image URL is dead.
   ============================================================ */

/* --- Title: was oversized all-caps and ate the whole column --- */
body.zh-ultra .pd-title{
  font-size:clamp(1.45rem,2.4vw,2rem);
  line-height:1.25;
  letter-spacing:-.01em;
  text-transform:none;
  margin:0 0 .35rem;
}
body.zh-ultra .pd-tagline{
  color:var(--zh-muted,#A9A2BD);
  font-size:1rem;
  line-height:1.6;
  margin:0 0 1.1rem;
  max-width:46ch;
}

/* --- Broken image placeholder ------------------------------- */
body.zh-ultra .zh-media-broken,
body.zh-ultra .pd-main.zh-media-broken{
  position:relative;
  background:
    linear-gradient(135deg,rgba(138,127,162,.14),rgba(201,169,110,.10)),
    var(--zh-card,#25232B);
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:14px;
  min-height:220px;
}
body.zh-ultra .zh-media-broken::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;text-align:center;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--zh-gold,#C9A96E);
  opacity:.75;
}
body.zh-ultra .pd-main.zh-media-broken::after{content:"Preview coming soon";}

/* --- Specs box ---------------------------------------------- */
body.zh-ultra .pd-specs{
  margin:1.4rem 0 0;
  padding:1.1rem 1.2rem;
  background:var(--zh-glass,rgba(37,35,43,.66));
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:14px;
  backdrop-filter:blur(10px);
}
body.zh-ultra .pd-specs-h{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zh-gold,#C9A96E);margin:0 0 .8rem;
}
body.zh-ultra .pd-spec-list{list-style:none;margin:0;padding:0;}
body.zh-ultra .pd-spec-list li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(138,127,162,.13);
  font-size:.9rem;
}
body.zh-ultra .pd-spec-list li:last-child{border-bottom:0;}
body.zh-ultra .pd-spec-list span{color:var(--zh-muted,#A9A2BD);}
body.zh-ultra .pd-spec-list b{color:var(--zh-ink,#F5F4F8);font-weight:500;text-align:right;}
body.zh-ultra .pd-specs-links{
  margin:.85rem 0 0;font-size:.82rem;color:var(--zh-muted,#A9A2BD);
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
}
body.zh-ultra .pd-specs-links a{color:var(--zh-gold,#C9A96E);text-decoration:none;}
body.zh-ultra .pd-specs-links a:hover{text-decoration:underline;}

/* --- FAQ accordion ------------------------------------------ */
body.zh-ultra .pd-faq{margin:2.6rem 0 0;}
body.zh-ultra .pd-faq h2{font-size:1.25rem;margin:0 0 1rem;}
body.zh-ultra .pd-faq-item{
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:12px;
  background:var(--zh-card,#25232B);
  margin-bottom:.6rem;
  overflow:hidden;
}
body.zh-ultra .pd-faq-item summary{
  cursor:pointer;list-style:none;
  padding:.95rem 1.1rem;
  font-weight:500;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:background .2s var(--zh-ease,ease);
}
body.zh-ultra .pd-faq-item summary::-webkit-details-marker{display:none;}
body.zh-ultra .pd-faq-item summary::after{
  content:"+";color:var(--zh-gold,#C9A96E);font-size:1.15rem;line-height:1;flex:none;
}
body.zh-ultra .pd-faq-item[open] summary::after{content:"–";}
body.zh-ultra .pd-faq-item summary:hover{background:rgba(138,127,162,.07);}
body.zh-ultra .pd-faq-a{
  padding:0 1.1rem 1.05rem;
  color:var(--zh-muted,#A9A2BD);
  font-size:.92rem;line-height:1.7;
}

/* --- Related products --------------------------------------- */
body.zh-ultra .pd-related{margin:2.6rem 0 0;}
body.zh-ultra .pd-related h2{font-size:1.25rem;margin:0 0 1rem;}

/* --- Category page ------------------------------------------ */
body.zh-ultra .zh-cat-count{
  color:var(--zh-muted,#A9A2BD);
  font-size:.85rem;letter-spacing:.05em;
  margin:0 0 1rem;
}

/* --- Free download capture ---------------------------------- */
body.zh-ultra .zh-fd-wrap{padding:3.5rem 0 4.5rem;}
body.zh-ultra .zh-fd-card{
  background:var(--zh-glass,rgba(37,35,43,.66));
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:18px;
  padding:2.2rem;
  box-shadow:var(--zh-lift,0 26px 60px -20px rgba(0,0,0,.7));
  backdrop-filter:blur(14px);
}
body.zh-ultra .zh-fd-title{font-size:1.6rem;margin:.4rem 0 .5rem;line-height:1.25;}
body.zh-ultra .zh-fd-lead{color:var(--zh-muted,#A9A2BD);margin:0 0 1.6rem;line-height:1.7;}
body.zh-ultra .zh-fd-field{display:block;margin-bottom:1rem;font-size:.88rem;color:var(--zh-muted,#A9A2BD);}
body.zh-ultra .zh-fd-field span{opacity:.7;}
body.zh-ultra .zh-fd-field input{
  display:block;width:100%;margin-top:.4rem;
  padding:.8rem .95rem;
  background:rgba(22,21,28,.7);
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:10px;
  color:var(--zh-ink,#F5F4F8);
  font:inherit;font-size:.95rem;
  transition:border-color .2s var(--zh-ease,ease),box-shadow .2s var(--zh-ease,ease);
}
body.zh-ultra .zh-fd-field input:focus{
  outline:none;
  border-color:var(--zh-gold,#C9A96E);
  box-shadow:0 0 0 3px rgba(201,169,110,.18);
}
body.zh-ultra .zh-fd-go{width:100%;margin-top:.4rem;}
body.zh-ultra .zh-fd-note{font-size:.78rem;color:var(--zh-muted,#A9A2BD);margin:.9rem 0 0;line-height:1.6;opacity:.85;}
body.zh-ultra .zh-fd-back{
  display:inline-block;margin-top:1.4rem;
  color:var(--zh-muted,#A9A2BD);font-size:.85rem;text-decoration:none;
}
body.zh-ultra .zh-fd-back:hover{color:var(--zh-gold,#C9A96E);}

@media (max-width:560px){
  body.zh-ultra .pd-specs{padding:1rem;}
  body.zh-ultra .pd-spec-list li{flex-direction:column;gap:.15rem;}
  body.zh-ultra .pd-spec-list b{text-align:left;}
  body.zh-ultra .zh-fd-card{padding:1.5rem;}
}

body.zh-ultra .zh-cat-link{color:inherit;text-decoration:none;transition:color .2s var(--zh-ease,ease);}
body.zh-ultra .zh-cat-link:hover{color:var(--zh-gold,#C9A96E);}

/* ============================================================
   DASHBOARD REDESIGN (account hub)
   Fixes: .dash-section was given card chrome by the surface rule
   above but never got padding, so the section heading rendered
   flush against the panel corner and its rule bled outside the
   rounded edge. A section is a layout wrapper - the cards inside
   it are the cards. Strip the chrome, then style it properly.
   ============================================================ */

/* 1. Un-card the section wrapper (kills the card-inside-a-card) */
body.zh-ultra .dash-section{
  background:none; border:0; border-radius:0;
  box-shadow:none; padding:0; isolation:auto;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.zh-ultra .dash-section::after{content:none; display:none;}

/* 2. Page shell */
.dash{max-width:1080px; margin:0 auto; padding:2rem 1.25rem 4.5rem;}
.dash-section{margin-top:2.75rem;}

/* 3. Section headers - gold underline accent, never clipped */
.dash-sec-head{margin:0 0 1.15rem; min-width:0;}
.dash-h2{
  position:relative; margin:0; padding:0 0 .6rem;
  font-size:1.12rem; font-weight:700; letter-spacing:.005em;
  color:var(--white,#F5F4F8);
  border-bottom:1px solid var(--border,#3D3849);
  overflow-wrap:anywhere;
}
.dash-h2::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:54px; height:2px; border-radius:2px;
  background:var(--zh-gold,#C9A96E);
}
.dash-h2-sub{margin:.55rem 0 0; font-size:.85rem; color:var(--zh-muted,#A9A2BD);}

/* 4. Account header card */
.dash-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; flex-wrap:wrap; min-width:0;
  background:linear-gradient(135deg,var(--zh-card2,#2D2B36),var(--zh-card,#25232B));
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:18px; padding:1.5rem 1.65rem; margin-bottom:.5rem;
  box-shadow:var(--zh-depth-2,0 18px 40px -24px rgba(0,0,0,.7));
}
.dash-id{display:flex; align-items:center; gap:1.05rem; min-width:0; flex:1 1 260px;}
.dash-avatar{
  width:58px; height:58px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  font-weight:700; font-size:1.45rem; color:#16151C;
  background:var(--dash-accent,#8A7FA2);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
}
/* the actual overflow culprit on long names / emails */
.dash-title{
  margin:0; line-height:1.22; color:var(--white,#F5F4F8);
  font-size:clamp(1.35rem,3.2vw,1.85rem);
  overflow-wrap:anywhere; word-break:break-word;
}
.dash-sub{
  margin:.3rem 0 0; font-size:.88rem; color:var(--zh-muted,#A9A2BD);
  overflow-wrap:anywhere; word-break:break-word;
}

/* 5. Two-column grid - equal height cards */
.dash-grid-2{display:grid; grid-template-columns:1fr; gap:1.25rem; align-items:stretch;}
@media (min-width:880px){.dash-grid-2{grid-template-columns:1.05fr .95fr;}}

.profile-card{
  display:flex; flex-direction:column; min-width:0;
  background:linear-gradient(180deg,var(--zh-card2,#2D2B36),var(--zh-card,#25232B));
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:16px; padding:1.5rem 1.55rem;
  box-shadow:var(--zh-depth-2,0 18px 40px -24px rgba(0,0,0,.7));
}
.profile-card h3{
  margin:0 0 1.2rem; font-size:1rem; font-weight:700;
  color:var(--white,#F5F4F8); letter-spacing:.005em;
}
.profile-form{display:flex; flex-direction:column;}

/* 6. Form fields */
.pf-fld{display:block; margin-bottom:1.15rem; min-width:0;}
.pf-fld>span{
  display:block; margin-bottom:.45rem;
  font-size:.72rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--zh-muted,#A9A2BD);
}
.pf-input{
  width:100%; max-width:100%; box-sizing:border-box;
  background:var(--zh-bg,#1B1A21);
  border:1px solid var(--border,#3D3849); border-radius:10px;
  padding:.72rem .9rem; color:var(--white,#F5F4F8);
  font-size:.95rem; font-family:inherit;
  transition:border-color .2s var(--zh-ease,ease), box-shadow .2s var(--zh-ease,ease);
}
.pf-input:focus{
  outline:none; border-color:var(--zh-gold,#C9A96E);
  box-shadow:0 0 0 3px rgba(201,169,110,.18);
}
.pf-input:disabled{opacity:.6; cursor:not-allowed;}

/* 7. Accent swatches - bigger, clearer selected state */
.pf-swatches{display:flex; gap:.7rem; flex-wrap:wrap;}
.pf-swatch{
  position:relative; width:32px; height:32px; border-radius:50%;
  cursor:pointer; border:2px solid transparent;
  transition:transform .18s var(--zh-ease,ease), box-shadow .18s var(--zh-ease,ease);
}
.pf-swatch:hover{transform:scale(1.12);}
.pf-swatch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.pf-swatch.is-on{
  border-color:var(--white,#F5F4F8);
  box-shadow:0 0 0 2px var(--zh-deep,#16151C), 0 0 0 4px currentColor;
}
.pf-swatch:focus-within{
  box-shadow:0 0 0 2px var(--zh-deep,#16151C), 0 0 0 4px var(--zh-gold,#C9A96E);
}

/* 8. Opt-in row */
.pf-check{
  display:flex; align-items:flex-start; gap:.65rem; cursor:pointer;
  margin:.15rem 0 1.35rem; font-size:.9rem; line-height:1.45;
  color:var(--soft,#D9D5E6);
}
.pf-check input{
  width:18px; height:18px; flex:0 0 auto; margin-top:.1rem;
  accent-color:var(--zh-gold,#C9A96E); cursor:pointer;
}
.profile-form .btn{align-self:flex-start;}

/* 9. Security / account link list */
.acct-links{list-style:none; margin:0 0 1.35rem; padding:0; flex:1 1 auto;}
.acct-links li{border-bottom:1px solid rgba(138,127,162,.14);}
.acct-links li:last-child{border-bottom:0;}
.acct-links a{
  display:block; padding:.9rem .3rem; text-decoration:none;
  border-radius:8px;
  transition:padding-left .2s var(--zh-ease,ease), background .2s var(--zh-ease,ease);
}
.acct-links a:hover{padding-left:.65rem; background:rgba(201,169,110,.06);}
.acct-links span{
  display:block; font-size:.94rem; font-weight:600;
  color:var(--white,#F5F4F8); transition:color .2s var(--zh-ease,ease);
}
.acct-links a:hover span{color:var(--zh-gold,#C9A96E);}
.acct-links em{
  display:block; margin-top:.18rem; font-style:normal;
  font-size:.79rem; color:var(--zh-muted,#A9A2BD);
}

/* 10. Empty states - no longer a bare dashed box */
.dash-empty{
  background:linear-gradient(180deg,rgba(45,43,54,.55),rgba(37,35,43,.55));
  border:1px dashed var(--zh-glass-brd,rgba(138,127,162,.28));
  border-radius:16px; padding:2.5rem 1.5rem; text-align:center;
  color:var(--zh-muted,#A9A2BD);
}
.dash-empty::before{
  content:"\2726"; display:block; margin-bottom:.7rem;
  font-size:1.5rem; color:var(--zh-gold,#C9A96E); opacity:.75;
}
.dash-empty p{margin:0 0 1.15rem; font-size:.95rem;}

/* 11. Purchases table */
.table-wrap{
  background:var(--zh-card,#25232B);
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:14px; overflow:hidden; overflow-x:auto;
}
.dash-table th{
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--zh-muted,#A9A2BD); padding:.85rem .95rem;
}
.dash-table td{padding:.85rem .95rem; font-size:.9rem;}

/* 12. Mobile */
@media (max-width:560px){
  .dash{padding:1.25rem .9rem 3rem;}
  .dash-head{padding:1.2rem 1.1rem; gap:1rem;}
  .dash-avatar{width:50px; height:50px; font-size:1.25rem;}
  .dash-head>.btn{width:100%;}
  .profile-card{padding:1.25rem 1.1rem;}
  .dash-section{margin-top:2rem;}
  .profile-form .btn{align-self:stretch; width:100%;}
}

/* ============================================================
   FORM FIELD FIX + CATALOG SIDEBAR
   ------------------------------------------------------------
   1. .fld is a <label> WRAPPER (span + input + hint), not a field.
      Section 5 above styled it like an input, so every text form
      rendered a box inside a box and the label text sat on top of
      the input. .fld is now a pure layout row again.
   2. .zh-rail / .zh-shop-layout: category sidebar for the catalog.
   ============================================================ */

/* ---- 1. Form fields ---- */
body.zh-ultra .fld{
  background:none;border:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;gap:.4rem;
  margin-bottom:1.05rem;min-width:0;
}
body.zh-ultra .fld:focus{box-shadow:none;border:0}
body.zh-ultra .fld > span{
  font-size:.85rem;font-weight:600;line-height:1.4;
  color:var(--zh-ink);overflow-wrap:anywhere;
}
body.zh-ultra .fld > input,
body.zh-ultra .fld > select,
body.zh-ultra .fld > textarea{
  width:100%;box-sizing:border-box;
  padding:.72rem .9rem;font-size:.95rem;font-family:inherit;
}
body.zh-ultra .fld-hint,
body.zh-ultra .fld > small{
  display:block;margin:0;font-size:.78rem;line-height:1.5;
  color:var(--zh-muted);overflow-wrap:anywhere;
}
body.zh-ultra .auth-form{display:flex;flex-direction:column;min-width:0}
body.zh-ultra .auth-form .btn,
body.zh-ultra .auth-form .zh-btn{margin-top:.35rem}

/* Auth / account card shell */
body.zh-ultra .auth-card{
  width:min(440px,100%);padding:2rem 1.9rem;box-sizing:border-box;
}
body.zh-ultra .auth-card h1,
body.zh-ultra .auth-title{
  font-size:clamp(1.4rem,4.2vw,1.75rem);line-height:1.25;
  margin:0 0 .45rem;overflow-wrap:anywhere;
}
body.zh-ultra .auth-sub{
  margin:0 0 1.5rem;font-size:.92rem;line-height:1.6;
  color:var(--zh-muted);overflow-wrap:anywhere;
}
body.zh-ultra .auth-sub strong{color:var(--zh-ink);font-weight:600}
body.zh-ultra .auth-alt{
  text-align:center;margin:1.2rem 0 0;font-size:.9rem;color:var(--zh-muted);
}
body.zh-ultra .auth-alt a{color:#e4c98f;text-decoration:none}
body.zh-ultra .auth-alt a:hover{text-decoration:underline}
@media (max-width:560px){
  body.zh-ultra .auth-card{padding:1.5rem 1.15rem}
  body.zh-ultra .auth-form .btn,
  body.zh-ultra .auth-form .zh-btn{width:100%;justify-content:center}
}

/* ---- 2. Catalog layout with category rail ---- */
.zh-shop-layout{display:block;margin-top:1.5rem}
.zh-shop-main{min-width:0}
@media (min-width:960px){
  .zh-shop-layout{
    display:grid;grid-template-columns:248px minmax(0,1fr);
    gap:2.25rem;align-items:start;
  }
}

.zh-rail{min-width:0;margin-bottom:1.75rem}
@media (min-width:960px){
  .zh-rail{position:sticky;top:calc(var(--nav-h,68px) + 20px);margin-bottom:0}
}
.zh-rail-box{
  background:linear-gradient(180deg,var(--zh-card2,#2D2B36),var(--zh-card,#25232B));
  border:1px solid var(--zh-glass-brd,rgba(138,127,162,.20));
  border-radius:16px;padding:.35rem;box-sizing:border-box;
}
.zh-rail-toggle{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem .85rem;font-size:.95rem;font-weight:600;
  color:var(--zh-ink,#F5F4F8);border-radius:12px;
}
.zh-rail-toggle::-webkit-details-marker{display:none}
.zh-rail-toggle:hover{background:rgba(201,169,110,.07)}
.zh-rail-chev{width:18px;height:18px;flex:none;transition:transform .28s var(--zh-ease,ease)}
.zh-rail-box[open] .zh-rail-chev{transform:rotate(180deg)}
@media (min-width:960px){
  .zh-rail-toggle{
    cursor:default;padding:.85rem .9rem .5rem;
    font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--zh-muted,#A9A2BD);
  }
  .zh-rail-toggle:hover{background:none}
  .zh-rail-chev{display:none}
}

.zh-rail-nav{display:flex;flex-direction:column;gap:2px;padding:.25rem}
.zh-rail-link{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.62rem .8rem;border-radius:10px;
  color:var(--zh-muted,#A9A2BD);text-decoration:none;
  font-size:.92rem;line-height:1.4;min-width:0;
  transition:background .25s var(--zh-ease,ease),color .25s var(--zh-ease,ease);
}
.zh-rail-name{overflow-wrap:anywhere;min-width:0}
.zh-rail-link:hover{background:rgba(201,169,110,.08);color:var(--zh-ink,#F5F4F8)}
.zh-rail-link.is-on{
  background:rgba(201,169,110,.14);color:#e4c98f;font-weight:600;
}
.zh-rail-link.is-on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:#C9A96E;
}
.zh-rail-link:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(201,169,110,.22);
}
.zh-rail-n{
  flex:none;font-size:.74rem;font-weight:600;
  color:var(--zh-muted,#A9A2BD);background:rgba(255,255,255,.055);
  border-radius:999px;padding:.12rem .5rem;
}
.zh-rail-link.is-on .zh-rail-n{background:rgba(201,169,110,.18);color:#e4c98f}
.zh-rail-sep{
  height:1px;margin:.55rem .8rem;
  background:var(--zh-glass-brd,rgba(138,127,162,.20));
}