/* =========================================================
   FONT FALLBACK — Montserrat metrics mapped onto Arial.
   While Montserrat downloads (or if it fails) the browser renders this fallback,
   whose size/ascent/descent match Montserrat, so the swap is nearly invisible
   and nothing jumps. Used right after 'Montserrat' in every font stack below.
   ========================================================= */
@font-face{
  font-family:'Montserrat Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
  ascent-override:85.79%;
  descent-override:22.25%;
  line-gap-override:0%;
  size-adjust:112.83%;
}

/* =========================================================
   HONEY SCRIPTS — custom design for Tebex   (load LAST)
   Phase 1: global tokens + frame (announce / header / nav / footer)
   ========================================================= */
:root{
  --bg:#0c0a07; --bg-elev:#15110a; --bg-elev-2:#1c1710;
  --card:rgba(255,255,255,.025); --card-2:rgba(255,255,255,.04);
  --line:rgba(247,181,0,.14); --line-soft:rgba(255,255,255,.07);
  --ink:#f8f2e4; --ink-soft:#d2c8b1; --muted:#9b9176; --muted-2:#766d57;
  --honey:#ffbf1f; --honey-2:#f59e0b; --honey-deep:#d97706; --honey-pale:#ffe18a;
  --rose:#ff9bb0; --green:#86e3a4;
  /* Tebex checkout brand colors — main.js reads --color-primary / --color-secondary via
     getComputedStyle(document.body) and passes them to Tebex.checkout.init(). If they are
     undefined, the checkout receives empty colors and renders the pay button + TOS checkbox
     fills invisible. Defined here with the honey palette so the checkout matches the theme. */
  --color-primary:#ffbf1f; --color-secondary:#f59e0b;
  --grad-honey:linear-gradient(135deg,#ffe488 0%,#ffbf1f 42%,#ec8a00 100%);
  --shadow-1:0 24px 60px -28px rgba(0,0,0,.85);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hs-maxw:1320px;
}

/* themed scrollbar (matches the dark + honey palette) */
html{scrollbar-width:thin;scrollbar-color:var(--honey-2) rgba(255,255,255,.04)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--honey),var(--honey-2));
  border-radius:10px;border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--honey-pale),var(--honey));
  border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-corner{background:var(--bg)}

/* ---- global base: re-skin the whole store ---- */
body{
  font-family:'Montserrat','Montserrat Fallback',system-ui,sans-serif !important;
  background:var(--bg) !important; color:var(--ink) !important;
  line-height:1.6; letter-spacing:-.005em; -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 85% -8%, rgba(247,181,0,.13), transparent 60%),
    radial-gradient(900px 600px at -5% 10%, rgba(217,119,6,.08), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(247,181,0,.06), transparent 55%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:rgba(247,181,0,.3);color:#fff}
.grad-text{background:var(--grad-honey);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.hex-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- my buttons (namespaced .hs-btn so they never clash with Tebex .btn-*) ---- */
.hs-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;
  font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  font-family:'Montserrat','Montserrat Fallback',sans-serif;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s}
.hs-btn svg{width:18px;height:18px;flex:none}
.hs-btn--primary{background:var(--grad-honey);color:#1a1304;box-shadow:0 12px 30px -10px rgba(247,181,0,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.hs-btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(247,181,0,.7)}
.hs-btn--ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-soft)}
.hs-btn--ghost:hover{border-color:var(--line);background:rgba(247,181,0,.08);transform:translateY(-2px)}

/* =========================================================
   SALE BAR with countdown (header.twig, hsSaleOn = 1). Replaces the announce bar while active.
   ========================================================= */
.hs-urgency{position:relative;z-index:60;overflow:hidden;
  --u1:#ffe488;--u2:#ffbf1f;--u3:#ec8a00;--u-line:rgba(247,181,0,.5);--u-soft:var(--muted);--u-ink:var(--ink);--u-dark:#1a1304;
  background:linear-gradient(90deg,rgba(247,181,0,.10),rgba(217,119,6,.20) 50%,rgba(247,181,0,.10));border-bottom:1px solid var(--line)}
.hs-urgency::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--u1),var(--u2),var(--u3))}
.hs-urgency--halloween{--u1:#ffd27a;--u2:#ff8c3c;--u3:#ff5a7a;--u-line:rgba(255,140,60,.6);--u-soft:#9b86b0;--u-ink:#fff;--u-dark:#1a0b1f;
  background:linear-gradient(90deg,#1a0b1f,#2a0f33 50%,#1a0b1f);border-bottom-color:rgba(255,140,60,.35)}
.hs-urgency--halloween::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 200% at 50% 120%,rgba(255,120,40,.22),transparent 60%);pointer-events:none}
.hs-urgency--christmas{--u1:#ffd27a;--u2:#ff6b6b;--u3:#c62828;--u-line:rgba(255,107,107,.55);--u-soft:#8fb39a;--u-ink:#fff;--u-dark:#07160e;
  background:linear-gradient(90deg,#07160e,#0d2a18 50%,#07160e);border-bottom-color:rgba(255,107,107,.3)}
.hs-urgency-emoji{font-size:22px;line-height:1;margin-right:-10px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));animation:hs-bob 2.6s ease-in-out infinite}
@keyframes hs-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-3px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.hs-urgency-emoji{animation:none}}
.hs-urgency-code{position:relative;display:inline-flex;align-items:center;gap:9px;padding:6px 8px 6px 14px;border-radius:9px;cursor:pointer;
  background:rgba(12,10,7,.55);border:1.5px dashed var(--u-line);color:var(--u1);font-family:'Montserrat','Montserrat Fallback',sans-serif;
  font-weight:900;letter-spacing:.14em;font-size:14px;line-height:1;transition:border-color .2s,background .2s,transform .2s}
.hs-urgency-code:hover{border-color:var(--u2);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.hs-urgency-code i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--u1),var(--u2));color:var(--u-dark);font-style:normal}
.hs-urgency-code i svg{width:14px;height:14px;display:block}
.hs-urgency-code .ico-check{display:none}
.hs-urgency-code.is-copied .ico-copy{display:none}
.hs-urgency-code.is-copied .ico-check{display:block}
.hs-urgency-code.is-copied{border-style:solid;border-color:var(--green)}
.hs-urgency-copied{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:var(--green);color:#0c1a10;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
.hs-urgency-code.is-copied .hs-urgency-copied{opacity:1}
.hs-urgency-in{position:relative;max-width:1320px;margin:0 auto;padding:10px 26px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-family:'Montserrat','Montserrat Fallback',sans-serif}
.hs-urgency-text{color:var(--u-ink);font-weight:700;font-size:14px}
.hs-urgency-text b{font-weight:900;font-size:15px;background-image:linear-gradient(135deg,var(--u1),var(--u2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-urgency-timer{display:inline-flex;align-items:center;gap:5px;color:var(--u-ink);font-weight:700;font-size:12px}
.hs-urgency-timer .lbl{margin-right:4px;color:var(--u-soft);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px}
.hs-urgency-timer .t{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:6px;background:rgba(0,0,0,.45);border:1px solid var(--u-line);color:#fff;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.hs-urgency-timer i{font-style:normal;margin:0 4px 0 1px;color:var(--u-soft);font-size:11px}
.hs-urgency-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background-image:linear-gradient(135deg,var(--u1),var(--u2) 60%,var(--u3));color:var(--u-dark);font-weight:800;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .2s,box-shadow .25s}
.hs-urgency-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(0,0,0,.7)}
@media (max-width:760px){
  .hs-urgency-in{gap:10px 14px;padding:10px 16px}
  .hs-urgency-timer .lbl{display:none}
}

/* =========================================================
   ANNOUNCE BAR
   ========================================================= */
.announce{position:relative;z-index:60;display:block;overflow:hidden;text-decoration:none;
  background:linear-gradient(90deg,rgba(247,181,0,.10),rgba(217,119,6,.18) 50%,rgba(247,181,0,.10));
  border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 rgba(247,181,0,.12),inset 0 1px 0 rgba(255,255,255,.03)}
/* edges fade into the page so the loop doesn't hard-cut */
.announce::before,.announce::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.announce::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.announce::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.announce-track{display:flex;width:max-content;animation:hs-announce 30s linear infinite}
.announce:hover .announce-track{animation-play-state:paused}
.announce-seq{display:flex;align-items:center;flex:none;padding:10px 0}
.announce-item{display:inline-flex;align-items:center;gap:11px;padding:0 28px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.announce-item::before{content:"";width:9px;height:10px;flex:none;background:var(--grad-honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 8px rgba(247,181,0,.55)}
.announce-item b{color:var(--honey);font-weight:800}
@keyframes hs-announce{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.announce-track{animation:none}}

/* =========================================================
   HEADER  (re-skins Tebex .site-header)
   ========================================================= */
.site-header{position:sticky;top:0;z-index:50;padding:0 !important;min-height:0 !important;
  max-width:none !important;width:100% !important;
  background:rgba(12,10,7,.72) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line) !important;border-radius:0 !important;box-shadow:0 10px 40px -20px rgba(0,0,0,.8) !important}
/* Header layout: 3-column grid (logo left, nav centered, actions right).
   The 1fr-auto-1fr ratio guarantees the nav is centered to the page width,
   not just between brand and actions (which have different widths). */
.site-header .site-header-inner{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:26px;max-width:var(--hs-maxw);margin:0 auto;
  padding:14px 26px !important;width:100%;min-height:0 !important;height:auto !important;
  background:none !important;border:none !important;border-radius:0 !important;box-shadow:none !important}
.site-header .site-navigation.navigation-horizontal{justify-self:center}
.site-header .brand,.site-header .brand:hover,.site-header .brand:focus{background:none !important;box-shadow:none !important;border-radius:0 !important}
.site-header .brand{display:flex;align-items:center;gap:11px;flex:none;margin-right:4px;justify-self:start}
.site-header .brand img{width:42px;height:auto;filter:drop-shadow(0 4px 14px rgba(247,181,0,.4))}
.site-header .brand-name{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.03em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--ink);font-weight:800}
.site-header .nav-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.nav-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  padding:9px 13px;border-radius:11px;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;color:var(--ink-soft);
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.nav-btn svg{width:17px;height:17px;flex:none}
.nav-btn.cur-indicator{background:rgba(255,255,255,.05);border-color:var(--line-soft);color:var(--ink-soft);cursor:default}
/* currency dropdown */
.cur-wrap{position:relative}
.cur-wrap .cur-toggle{cursor:pointer}
.cur-wrap .cur-toggle:hover{border-color:var(--line);color:var(--ink);background:rgba(247,181,0,.09)}
.cur-caret{width:13px;height:13px;margin-left:-1px;transition:transform .25s}
.cur-wrap.open .cur-caret{transform:rotate(180deg)}
.cur-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:90;min-width:170px;display:none;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:7px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.cur-wrap.open .cur-menu{display:block}
.cur-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;border-radius:9px;
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);
  text-transform:uppercase;text-decoration:none;transition:.18s}
.cur-opt:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.cur-opt.active{background:rgba(247,181,0,.12);color:var(--honey)}
.nav-btn.fivem{background:#fff;color:#0c0a07}
.nav-btn.fivem:hover{background:#e8e8ea;transform:translateY(-1px)}
.nav-btn.ghost{position:relative;background:rgba(255,255,255,.05);border-color:var(--line-soft);color:var(--ink)}
.nav-btn.ghost:hover{border-color:var(--line);background:rgba(247,181,0,.09)}
.nav-btn .cart-count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--grad-honey);color:#1a1304;font-size:11px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)}
.nav-btn.user-name .text-hover{display:none}
.nav-btn.user-name:hover .text{display:none}
.nav-btn.user-name:hover .text-hover{display:inline}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--ink-soft);transition:.25s}
.icon-btn:hover{color:var(--ink);border-color:var(--line);background:rgba(247,181,0,.07)}
.icon-btn svg{width:20px;height:20px}
.site-header .hamburger{display:none}
.site-sale-banner{text-align:center;margin:0;padding:8px 16px;font-size:13px;font-weight:700;
  letter-spacing:.04em;background:var(--grad-honey);color:#1a1304}

/* =========================================================
   NAVIGATION  (horizontal, inline in the header bar)
   ========================================================= */
.site-navigation.navigation-horizontal{display:flex;align-items:center}
.site-navigation .menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.site-navigation .menu > li{position:relative}
.site-navigation .menu a{display:inline-block;position:relative;padding:9px 13px;border-radius:9px;
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .25s,background .25s}
.site-navigation .menu a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.site-navigation .menu li.active > a,.site-navigation .menu a.link-active{color:var(--honey)}
/* Animated underline: grows from center on hover, persistent at 55% on active page */
.site-navigation .menu > li > a::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:0;height:2px;background:var(--grad-honey);border-radius:2px;
  transition:width .3s var(--ease);pointer-events:none;box-shadow:0 0 8px rgba(247,181,0,.4)}
.site-navigation .menu > li > a:hover::after,
.site-navigation .menu > li.active > a::after,
.site-navigation .menu > li > a.link-active::after{width:55%}
.site-navigation .menu .toggle{display:none}
.site-navigation .menu .mobile-only{display:none}
.site-navigation .close-navigation{display:none}
.site-navigation .menu ul{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;display:none;
  list-style:none;flex-direction:column;gap:2px;background:var(--bg-elev);border:1px solid var(--line);
  border-radius:12px;padding:7px;box-shadow:var(--shadow-1);z-index:80}
.site-navigation .menu li.has-children:hover > ul,
.site-navigation .menu li.expanded > ul{display:flex}
/* kill the dark menu box + link truncation that shared.css injects on horizontal nav */
.site-navigation.navigation-horizontal .menu,
.site-header .navigation-horizontal .menu{background:transparent !important;padding:0 !important;font-size:inherit !important;line-height:normal !important}
.site-navigation .menu > li > a{max-width:none !important;overflow:visible !important;text-overflow:clip !important;white-space:nowrap}

/* =========================================================
   FOOTER  (re-skins Tebex .site-footer)
   ========================================================= */
.site-footer{position:relative;margin-top:30px;border-top:1px solid var(--line-soft);background:transparent;padding:0}
.site-footer .site-footer-inner{max-width:var(--hs-maxw);margin:0 auto;padding:56px 26px 30px}
.foot-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px}
.foot-brand{text-align:center}
.foot-brand .brand{display:inline-flex;align-items:center;gap:4px;margin-bottom:18px;text-decoration:none}
.foot-brand .brand img{width:56px;height:56px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 8px rgba(255,184,0,.22))}
.foot-brand .brand-name{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:19px;color:var(--ink)}
.foot-logo-text{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:.9}
.foot-logo-text .l1,.foot-logo-text .l2{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;font-size:22px;-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-logo-text .l1{background-image:linear-gradient(180deg,#fff,var(--ink-soft));-webkit-text-stroke:.3px #f3ead6}
.foot-logo-text .l2{background-image:var(--grad-honey);-webkit-text-stroke:.3px #ffbf1f}
.foot-brand p{color:var(--muted);font-size:14px;line-height:1.6;max-width:320px;margin:0 auto}
.foot-col h4{display:inline-flex;align-items:center;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#1a1304;background:var(--grad-honey);
  padding:8px 17px;border-radius:999px;margin-bottom:20px;box-shadow:0 8px 20px -10px rgba(247,181,0,.6)}
.foot-col a{display:block;color:var(--muted);font-size:14.5px;padding:6px 0;transition:.2s}
.foot-col a:hover{color:var(--ink);padding-left:4px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--line-soft)}
.foot-bottom .copyright{color:var(--muted);font-size:13px;margin:0}
.foot-fine{color:var(--muted-2);font-size:12px;line-height:1.6;margin:6px 0 0;max-width:660px}
.foot-pay{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.foot-pay img{height:22px;width:auto;opacity:.85}

/* =========================================================
   RESPONSIVE (frame)
   ========================================================= */
@media (max-width:980px){
  .foot-top{grid-template-columns:repeat(3,1fr);gap:32px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}
/* nav collapses at 960px to match Tebex main.js (body.show-navigation) */
@media (max-width:960px){
  /* Header: switch from desktop grid back to flex so the empty middle column
     doesn't introduce extra space when the nav collapses into the hamburger. */
  .site-header .site-header-inner{display:flex !important;justify-content:space-between !important}
  .site-header .brand,
  .site-header .nav-actions,
  .site-header .site-navigation.navigation-horizontal{justify-self:auto}

  .site-header .nav-btn.cur-indicator,
  .site-header .cur-wrap,
  .site-header .nav-btn.fivem,
  .site-header .nav-btn.user-name{display:none}
  .site-header .hamburger{display:grid}
  .site-header .site-navigation.navigation-horizontal{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--bg-elev);border-bottom:1px solid var(--line);
    padding:14px 26px;max-height:78vh;overflow:auto}
  body.show-navigation .site-header .site-navigation.navigation-horizontal{display:block}
  .site-header .menu{flex-direction:column;align-items:stretch;gap:4px}
  .site-header .menu ul{position:static;display:flex;box-shadow:none;border:none;background:transparent;padding:0 0 0 12px}
  .site-navigation .menu .mobile-only{display:block}
  .site-navigation .menu .mobile-only a{color:var(--honey-pale)}
}

/* =========================================================
   PHASE 2 — homepage (hero / sections / product cards / why / faq / cta)
   ========================================================= */
.hs-wrap{max-width:var(--hs-maxw);margin:0 auto;padding:0 26px}
.hs-home section{position:relative}
.section{padding:66px 0}
.sec-head{max-width:660px;margin:0 auto 40px;text-align:center}
.sec-head .sec-title{font-size:clamp(2rem,3.8vw,2.85rem);margin-top:16px;font-weight:900;line-height:1.04;letter-spacing:-.022em}
.sec-head .sec-sub{color:var(--ink-soft);font-size:1.06rem;margin-top:16px}

/* eyebrow pill (matches the reference design) */
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat','Montserrat Fallback',sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,#ffe9a8,#ffbf1f 60%,#f08a00);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:8px 16px 8px 14px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(247,181,0,.32),inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px -14px rgba(247,181,0,.55)}
.eyebrow::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(120% 180% at 0% 0%,rgba(247,181,0,.16),rgba(247,181,0,.04) 55%,transparent)}
.eyebrow .dot{width:12px;height:13px;flex:none;background:var(--grad-honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 12px rgba(247,181,0,.7)}

/* HERO */
.hs-home{overflow-x:hidden}
.hero{position:relative;padding:70px 0 66px;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero-copy{max-width:600px}
.hero-title{font-size:clamp(2.3rem,4.9vw,3.8rem);margin:22px 0 0;font-weight:900;line-height:1.04;letter-spacing:-.025em;color:var(--ink)}
.hero-title .grad-text{font-style:normal;font-weight:900}
.hero-sub{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-soft);margin-top:22px;max-width:520px;line-height:1.62}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-visual{position:relative;display:grid;place-items:center;min-height:440px}
.bee-glow{position:absolute;width:560px;height:560px;border-radius:50%;z-index:0;filter:blur(8px);
  background:radial-gradient(circle,rgba(247,181,0,.34) 0%,rgba(247,181,0,.1) 38%,transparent 68%);
  animation:hs-pulse 6s ease-in-out infinite}
/* honeycomb decoration (hero background + CTA band) — matches the reference */
.hex-decor{position:absolute;color:var(--honey);opacity:.06;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000 0%,transparent 78%);
          mask-image:radial-gradient(60% 60% at 50% 45%,#000 0%,transparent 78%)}
.hex-decor use{width:100%;height:100%}
.hero .hex-decor{top:-160px;right:-220px;width:980px;height:760px;opacity:.07}
.cta-band .hex-decor{position:absolute;inset:-30% -10% auto auto;width:760px;height:600px;opacity:.1}
.bee-comb{position:absolute;z-index:1;width:600px;height:470px;color:var(--honey);opacity:.16;pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 48%,#000 28%,transparent 66%);
  mask:radial-gradient(circle at 50% 48%,#000 28%,transparent 66%)}
.bee-comb svg{width:100%;height:100%}
.bee-img{position:relative;z-index:3;width:min(92%,420px);height:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(247,181,0,.25));
  animation:hs-float 6.5s ease-in-out infinite}
@keyframes hs-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-22px) rotate(1.5deg)}}
@keyframes hs-pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
/* hero sparkles (lucecitas) */
.hero-visual .spark{position:absolute;z-index:2;width:6px;height:6px;border-radius:50%;
  background:var(--honey-pale);box-shadow:0 0 10px 2px rgba(255,191,31,.7);
  animation:hs-twinkle 3.4s ease-in-out infinite}
@keyframes hs-twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.hero-visual .spark{animation:none}}
@media (prefers-reduced-motion:reduce){.bee-img,.bee-glow{animation:none}}

/* PRODUCT GRID + CARDS (re-skins Tebex .store-product / .product-actions) */
.store-products-grid{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:24px !important;grid-template-columns:none !important}
.store-products-grid > .store-product{flex:0 0 400px !important;width:400px !important;max-width:100%}
/* Cards fill their grid cell; the grid (.hs-featured-grid) decides how many per row. */
.store-product:not(.store-product-full){width:100%;max-width:100%}
/* Kill any inner-frame effect on the card image (defeats shared.css padding/borders if any) */
.store-product .image-link,
.store-product .image,
.store-product .image-default{margin:0 !important;padding:0 !important;border:0 !important;outline:0 !important;box-shadow:none !important;background-clip:padding-box !important}
.store-product .image-link{border-radius:0 !important}
.store-products-list{display:flex;flex-direction:column;gap:16px}
.store-product{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);text-align:left;
  border:1px solid var(--line-soft);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.store-product:hover{transform:translateY(-7px);border-color:var(--line);box-shadow:var(--shadow-1)}
/* PDP exception: the whole product-detail grid is also a .store-product, but we
   don't want the entire page block lifting on hover — disable the transform there. */
.store-product.store-product-full:hover{transform:none;box-shadow:none;border-color:transparent}
.store-product .image-link{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(130% 120% at 80% 15%,rgba(247,181,0,.22),transparent 55%),
    radial-gradient(100% 100% at 10% 100%,rgba(217,119,6,.16),transparent 60%),
    linear-gradient(160deg,#1a1509,#100c06)}
.store-product .image{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.store-product:hover .image{transform:scale(1.05)}
.store-product .image-default{display:grid;place-items:center;width:100%;height:100%}
.store-product .image-default::after{content:"";width:74px;height:82px;background:var(--grad-honey);opacity:.85;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:drop-shadow(0 6px 18px rgba(247,181,0,.4))}
.store-product .product-title{padding:14px 16px 0;margin:0;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;
  font-size:1.12rem;letter-spacing:-.01em;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.store-product .product-title > a{display:flex;flex-direction:column;align-items:center;gap:4px}
.hs-title{font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.hs-subtitle{font-size:12px;font-weight:600;color:var(--muted);line-height:1.4;letter-spacing:0}
.store-product .product-title a{color:var(--ink)}
.store-product .product-title a:hover,
.store-product .product-title a:focus,
.store-product:hover .product-title a{color:var(--honey-pale) !important}
.store-product .countdown{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--rose);background:rgba(255,155,176,.14);border:1px solid rgba(255,155,176,.3);
  padding:3px 8px;border-radius:6px}
/* framework tags (left) + price (right) — 2-col grid so they're ALWAYS on one row */
.store-product .hs-card-meta{display:flex;align-items:center;justify-content:center;padding:11px 16px 0}
.store-product .hs-card-meta .hs-tags{justify-content:center}
.store-product .hs-card-price{margin:0;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:1.45rem;line-height:1;color:var(--ink);white-space:nowrap}
.store-product .hs-card-price .discount{color:var(--muted);font-weight:400;font-size:.92rem;margin-right:5px}
.store-product .hs-card-meta .hs-tags{min-width:0;width:100%}
/* Buy row: price left, Purchase button right (Wasabi-style). The .product-actions include
   becomes just the button container here; its global column layout is overridden. */
.store-product .hs-card-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:14px 16px 16px}
.store-product .hs-card-buy .product-actions{margin:0;padding:0;flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:8px}
.store-product .hs-card-buy .product-actions .add,
.store-product .hs-card-buy .product-actions .subscribe{width:auto;padding:11px 18px;font-size:13.5px;white-space:nowrap}
.store-product .hs-card-buy .product-actions .open-basket-cta{white-space:nowrap}
.hs-blurb{padding:9px 16px 0;margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* (check-mark prefix removed so 4 tags fit on one row at 306px cards) */
/* Card badge, top-right of the image. One per card: SALE > NEW > FREE (see package-entry.twig). */
.hs-badge{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;line-height:1.2}
.hs-badge--new{background:var(--grad-honey);color:#1a1304;box-shadow:0 6px 16px -4px rgba(247,181,0,.6)}
.hs-badge--free{background:#86e3a4;color:#0c1a10;box-shadow:0 6px 16px -4px rgba(134,227,164,.5)}
.hs-badge--sale{background:linear-gradient(135deg,#ff6b81,#ff3d5a);color:#fff;box-shadow:0 6px 16px -4px rgba(255,61,90,.6)}
/* Hover hint on the image: soft darkening + "View details" pill (click opens the product page) */
.store-product .image-link::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,7,0) 35%,rgba(12,10,7,.78));opacity:0;transition:opacity .3s}
.hs-quick{position:absolute;left:50%;bottom:14px;z-index:3;transform:translate(-50%,8px);display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;background:rgba(12,10,7,.82);border:1px solid rgba(247,181,0,.55);color:var(--honey-pale);
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:12.5px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .3s,transform .3s var(--ease);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hs-quick svg{width:15px;height:15px;flex:none}
.store-product:hover .image-link::after{opacity:1}
.store-product:hover .hs-quick{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.store-product .image-link::after,.hs-quick{display:none}}
/* actions: price row, then a single full-width Add button */
.store-product .product-actions{margin-top:auto;padding:12px 16px 16px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.store-product .product-actions .price{display:flex;align-items:baseline;gap:9px;margin:0;flex-wrap:wrap}
.store-product .product-actions .price strong{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:1.5rem;line-height:1;color:var(--ink)}
.store-product .product-actions .price .discount{color:var(--muted);font-weight:400;font-size:1rem}
.product-actions [hidden]{display:none !important}
.hs-ico{width:17px;height:17px;flex:none}
.store-product .product-actions .add,
.store-product .product-actions .subscribe{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 16px;border-radius:11px;background:var(--grad-honey);border:none;color:#1a1304;font-weight:800;
  font-size:14px;font-family:'Montserrat','Montserrat Fallback',sans-serif;cursor:pointer;transition:.25s;text-transform:none;letter-spacing:0;
  box-shadow:0 10px 22px -10px rgba(247,181,0,.6)}
.store-product .product-actions .add:hover,
.store-product .product-actions .subscribe:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(247,181,0,.7);color:#1a1304}
.store-product .product-actions .gift{display:none}
.product-actions .quantity-field{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:11px;padding:4px;background:rgba(255,255,255,.03)}
.product-actions .quantity-field button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--ink);background:rgba(255,255,255,.05);font-size:16px;line-height:1}
.product-actions .quantity-field button:hover{background:rgba(247,181,0,.15);color:var(--honey)}
.product-actions .quantity-field input.quantity{width:38px;text-align:center;background:none;border:none;color:var(--ink);
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:14px}
.product-actions .open-basket-cta{display:inline-flex;align-items:center;gap:7px;color:var(--honey-pale);font-weight:600;font-size:13px}
.store-product.updating,.product-actions.updating{opacity:.55;pointer-events:none}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 auto}
.feature{position:relative;padding:30px 26px;border-radius:var(--r-lg);background:var(--card);
  border:1px solid var(--line-soft);transition:.4s var(--ease);overflow:hidden}
.feature:hover{transform:translateY(-5px);border-color:var(--line);background:var(--card-2)}
.feature .f-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(160deg,rgba(247,181,0,.18),rgba(217,119,6,.08));border:1px solid var(--line);color:var(--honey)}
.feature .f-ic svg{width:24px;height:24px}
.feature h3{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:1.14rem;color:var(--ink)}
.feature p{color:var(--muted);font-size:14px;margin-top:9px;line-height:1.58}

/* FAQ */
.faq-wrap{max-width:880px;margin:0 auto;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.faq-item{border-top:1px solid var(--line-soft)}
.faq-item:first-child{border-top:none}
.faq-item[open]{background:var(--card-2)}
.faq-q{display:flex;align-items:center;gap:13px;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin:0;
  list-style:none;cursor:pointer;padding:23px 26px;user-select:none;font-family:'Montserrat','Montserrat Fallback',sans-serif;color:var(--ink)}
.faq-q::-webkit-details-marker{display:none}
.faq-q .hx{width:11px;height:12px;flex:none;background:var(--grad-honey);box-shadow:0 0 10px rgba(247,181,0,.45);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.faq-qt{flex:1}
.faq-q .faq-ic{flex:none;width:27px;height:27px;display:grid;place-items:center;color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:8px;transition:transform .35s var(--ease),background .3s,color .3s}
.faq-q .faq-ic svg{width:15px;height:15px}
.faq-item[open] .faq-q .faq-ic{transform:rotate(180deg);background:rgba(247,181,0,.12);color:var(--honey);border-color:transparent}
.faq-a{color:var(--ink-soft);font-size:15px;line-height:1.65;margin:0;padding:0 26px 24px 52px}
.faq-a a{color:var(--honey-pale);text-decoration:underline;text-underline-offset:3px}
/* FAQ polish */
.faq-wrap{box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.faq-q{position:relative;cursor:pointer;transition:color .2s}
.faq-q:hover .faq-qt{color:var(--honey-pale)}
.faq-item[open]{background:linear-gradient(90deg,rgba(247,181,0,.07),transparent 60%)}
.faq-item[open]>.faq-q{box-shadow:inset 3px 0 0 var(--honey)}
.faq-item[open] .faq-qt{color:var(--honey)}
.faq-q .faq-ic{transition:transform .3s var(--ease),background .2s,color .2s}
.faq-q .hx{transition:transform .3s var(--ease)}
.faq-item[open] .faq-q .hx{transform:rotate(30deg) scale(1.1)}

/* CTA */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(247,181,0,.14),rgba(217,119,6,.1) 60%,rgba(28,23,16,.6));
  padding:52px 56px;display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta-text{position:relative;z-index:2;max-width:620px}
.cta-text h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:900;letter-spacing:-.022em;line-height:1.06;color:var(--ink)}
.cta-text h2 .grad-text,.cta-text h2 em{font-style:normal;font-weight:900}
.cta-text p{color:var(--ink-soft);margin-top:14px;font-size:1.06rem;max-width:540px}
.cta-actions{position:relative;z-index:2;display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cta-bee{position:relative;z-index:2;width:270px;max-width:34%;height:auto;flex:none;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.55));animation:hs-float 6s ease-in-out infinite}

/* responsive (homepage) */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-copy{max-width:none;margin:0 auto}
  .hero-cta{justify-content:center}
  .hero-visual{min-height:300px;order:-1}
  .why-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .section{padding:50px 0}
  .why-grid{grid-template-columns:1fr}
  .cta-band{padding:34px 26px}
  .store-products-grid{grid-template-columns:1fr}
  .cta-bee{display:none}
}

/* =========================================================
   SAFETY OVERRIDES (defeat Tebex generic.css interference)
   ========================================================= */
/* Force the header nav visible & inline on desktop even if the store's
   nav-style config is "Vertical" (which adds an is-navigation-vertical body class) */
@media (min-width:961px){
  .site-header .site-navigation.navigation-horizontal{display:flex !important;position:static !important;
    width:auto !important;transform:none !important;visibility:visible !important;
    background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important}
  .site-header .site-navigation .menu{display:flex !important;flex-direction:row !important}
}
/* never let Tebex reserve a tall header */
body .site .site-header{min-height:0 !important}
/* layout grid fix: header.twig outputs the announce bar AND the header as two
   separate children of .site, which broke Tebex's "auto 1fr auto" rows (the gap
   appeared between the announce bar and the header). Pin them flush and give the
   flexible row to the content so the footer still sits at the bottom. */
body .site{gap:0 !important; grid-template-rows:auto auto 1fr auto !important; grid-auto-rows:auto !important}

/* =========================================================
   HOMEPAGE CATEGORY TILES (Tebex doesn't expose packages on index)
   ========================================================= */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,360px));justify-content:center;gap:20px}
.cat-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--card);border:1px solid var(--line-soft);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.cat-card:hover{transform:translateY(-7px);border-color:var(--line);box-shadow:var(--shadow-1)}
.cat-card-media{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(130% 120% at 80% 15%,rgba(247,181,0,.22),transparent 55%),
    radial-gradient(100% 100% at 10% 100%,rgba(217,119,6,.16),transparent 60%),linear-gradient(160deg,#1a1509,#100c06)}
.cat-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.cat-card:hover .cat-card-media img{transform:scale(1.05)}
.cat-hex{width:64px;height:72px;background:var(--grad-honey);opacity:.9;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:drop-shadow(0 6px 18px rgba(247,181,0,.4))}
.cat-card-info{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cat-card-info h3{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:1.18rem;color:var(--ink)}
.cat-go{display:inline-flex;align-items:center;gap:7px;color:var(--honey-pale);font-weight:600;font-size:13.5px;white-space:nowrap}
.cat-go svg{width:16px;height:16px;transition:transform .3s}
.cat-card:hover .cat-go svg{transform:translateX(3px)}

/* =========================================================
   CONTENT PAGES (category / cms page) — tidy width + spacing
   ========================================================= */
.site-content{max-width:var(--hs-maxw);margin:0 auto;padding:46px 26px}
.category-description{color:var(--ink-soft);line-height:1.65;margin-bottom:26px}
.category-description h1,.category-description h2,.category-description h3{color:var(--ink)}
.no-products{color:var(--muted);text-align:center;padding:48px 0;font-size:1.05rem}
.store-products > .store-products-grid,.store-products > .store-products-list{margin-top:8px}
/* =========================================================
   HONEY SCRIPTS — honey.css  ·  PHASE 3  (final, shared.css-aware)
   Product page · options popup · CMS/rich text · sidebar ·
   cart drawer · checkout block · toasts · empty states · forms.
   Loads after shared.css and after the Phase 1/2 above.
   ========================================================= */

/* ---------- global buttons (re-skin Tebex .btn-*) ---------- */
.btn-primary,.btn-secondary,.btn-tertiary{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:fit-content; height:auto; min-height:48px; line-height:1.1;
  font-family:'Montserrat','Montserrat Fallback',sans-serif; font-weight:700; font-size:14.5px; letter-spacing:.01em;
  padding:13px 22px; border:1px solid transparent; border-radius:12px; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .25s, background .25s, color .2s, border-color .2s;
}
.btn-primary{background:var(--grad-honey); color:#1a1304;
  box-shadow:0 10px 26px -12px rgba(247,181,0,.7), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover,.btn-primary:focus{background:var(--grad-honey); color:#1a1304;
  transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(247,181,0,.85), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-secondary{background:rgba(247,181,0,.1); border-color:var(--line); color:var(--honey-pale)}
.btn-secondary:hover,.btn-secondary:focus{background:rgba(247,181,0,.18); border-color:var(--honey-2); color:var(--honey-pale); transform:translateY(-1px)}
.btn-tertiary{background:rgba(255,255,255,.05); border-color:var(--line-soft); color:var(--ink-soft)}
.btn-tertiary:hover,.btn-tertiary:focus{background:rgba(255,255,255,.09); color:var(--ink)}
.btn-primary:disabled,.btn-secondary:disabled,.btn-tertiary:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.link-text{color:var(--honey-pale); font-weight:600; text-decoration:none; transition:color .2s}
.link-text:hover{color:var(--honey); text-decoration:underline; text-underline-offset:3px}

/* ---------- global form controls (works inside popups too) ---------- */
:is(.store-form,.popup .store-form) input[type="text"],
:is(.store-form,.popup .store-form) input[type="number"],
:is(.store-form,.popup .store-form) input[type="email"],
:is(.store-form,.popup .store-form) input[type="search"],
:is(.store-form,.popup .store-form) select,
:is(.store-form,.popup .store-form) textarea{
  width:100%; font-family:'Montserrat','Montserrat Fallback',sans-serif; font-size:15px; font-weight:500;
  color:var(--ink); background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:13px 15px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.store-form textarea{min-height:120px; resize:vertical; line-height:1.55}
.store-form select{appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffe18a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
.store-form input::placeholder,.store-form textarea::placeholder{color:var(--muted-2)}
:is(.store-form,.popup .store-form) input:focus,
:is(.store-form,.popup .store-form) select:focus,
:is(.store-form,.popup .store-form) textarea:focus{
  outline:none; border-color:var(--honey); background:rgba(247,181,0,.05);
  box-shadow:0 0 0 4px rgba(247,181,0,.12)}
.store-form select option{background:var(--bg-elev-2); color:var(--ink)}

/* ---------- rich text (.text-content — product descr + CMS) ---------- */
.text-content{color:var(--ink-soft); line-height:1.75}
.text-content h1,.text-content h2,.text-content h3,.text-content h4{color:var(--ink); font-weight:800; letter-spacing:-.02em; line-height:1.2}
.text-content h1{font-size:1.9rem}.text-content h2{font-size:1.5rem}.text-content h3{font-size:1.2rem}.text-content h4{font-size:1.04rem}
.text-content p{margin:0 0 1.05em}
.text-content a{color:var(--honey-pale); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(247,181,0,.4)}
.text-content a:hover{color:var(--honey)}
.text-content li{margin:.4em 0}
.text-content ul li::marker{color:var(--honey)}
.text-content strong{color:var(--ink)}
.text-content img{border-radius:var(--r-md); border:1px solid var(--line-soft)}
.text-content hr{height:1px; background:var(--line); margin:2em 0}
.text-content blockquote{margin:1.2em 0; padding:14px 20px; border-left:3px solid var(--honey);
  background:rgba(247,181,0,.06); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--ink-soft)}
.text-content code{font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:rgba(255,255,255,.06);
  border:1px solid var(--line-soft); padding:2px 7px; border-radius:6px; color:var(--honey-pale)}
.text-content pre{background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:18px 20px; overflow:auto; margin:1.2em 0}
.text-content pre code{background:none; border:none; padding:0; color:var(--ink-soft)}
.text-content table{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:14.5px}
.text-content th,.text-content td{padding:11px 14px; border:1px solid var(--line-soft); text-align:left}
.text-content th{background:rgba(247,181,0,.08); color:var(--ink); font-weight:700}

/* ---------- CMS page shell (.store-text) ---------- */
.store-text{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px}
.store-text > h2{font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.02em; color:var(--ink); margin-bottom:18px; text-align:left}

/* ---------- PRODUCT PAGE (.store-product-full) — see .pdp-grid block at end ---------- */
.store-product-full .image{aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--line-soft)}
.store-product-full .image-default{
  width:100%; aspect-ratio:16/9; height:auto;
  background:radial-gradient(120% 120% at 50% 0%, rgba(247,181,0,.14), transparent 60%), var(--bg-elev-2);
  border-radius:var(--r-md); border:1px solid var(--line-soft);
}
.store-product .image-default::before{display:none}
.store-product-full .descr{margin-top:4px}

/* ---------- OPTIONS POPUP (.store-product-options) — "Adding X to your Basket" ----------
   Triggered when adding a product that has variables (e.g. discord_id). Matches the
   reference dialog with title, prompt, and two equally-sized buttons. */
.product-options-popup .popup-content{max-width:540px;padding:30px}
.store-product-options{padding:0}
.store-product-options .product-title{margin:0 0 14px;padding-right:32px;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.store-product-options .store-form-options{margin:0}
.store-product-options .store-form-options .field{margin-bottom:18px}
.store-product-options .store-form-options .field:last-of-type{margin-bottom:22px}
.store-product-options .store-form-options .field > p{margin:0 0 10px;font-weight:500;color:var(--muted);font-size:14.5px;line-height:1.55}
.store-product-options .store-form-options .field strong{color:var(--honey-pale);font-weight:700}
.field-inline{font-weight:700;color:var(--honey-pale)}

/* Actions row: equal-width buttons side by side */
.store-product-options .actions{position:static !important;display:flex;flex-wrap:wrap;gap:10px;padding:0;width:100%;max-width:none;justify-content:stretch}
.store-product-options .actions-multiple{width:100%}
.store-product-options .actions .btn-primary,
.store-product-options .actions .btn-secondary{flex:1 1 200px;width:auto;min-width:0;justify-content:center;gap:9px}
.store-product-options .actions .btn-primary svg{width:18px;height:18px;flex:none}
.store-product-options .actions .btn-primary{background:var(--grad-honey);color:#1a0e00;font-weight:800;letter-spacing:.005em}
.store-product-options .actions .btn-secondary{background:rgba(255,255,255,.04);color:var(--ink-soft);border:1px solid var(--line-soft);font-weight:700}
.store-product-options .actions .btn-secondary:hover{background:rgba(255,255,255,.07);color:var(--ink);border-color:var(--line)}
.store-product-options .actions .link-text{align-self:center;margin:0;font-size:14px}

/* ---------- SIDEBAR ---------- */
.store-sidebar{display:flex; flex-direction:column; gap:18px}
.store-sidebar > *,.store-sidebar .widget{background:var(--card-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:20px}
.store-sidebar h3,.store-sidebar .widget-title{font-weight:700; font-size:1rem; color:var(--ink); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line); text-align:left}
.store-sidebar a{color:var(--ink-soft); transition:color .2s; line-height:2}
.store-sidebar a:hover{color:var(--honey-pale)}

/* ---------- POPUP shell (.popup-content) ---------- */
.popup-content{background:var(--bg-elev-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.popup-close::before{background-color:var(--honey-pale)}
.popup-close{border-radius:50%}
.popup-close:hover{background:rgba(247,181,0,.12)}
.popup-close:focus,.popup-close:focus-visible,.popup-close:active{outline:none !important;box-shadow:none !important}

/* =========================================================
   CART DRAWER (basket popup loaded via data-popup from checkout.html)
   Layout matches the reference: user icon header, items count + total,
   item card with qty stepper + visible trash, total + checkout CTA.
   ========================================================= */
/* The drawer is a floating rounded card: 12px away from the top/right/bottom edges, with a border.
   Before it was full-height with rounded corners, so the dark overlay showed through the corner
   notches and the popup's scrollbar track left a strip on the right. */
.popup.basket-popup{scrollbar-width:none}
.popup.basket-popup::-webkit-scrollbar{display:none}
.basket-popup .popup-scroll-cont{padding:12px 12px 12px 0}
.basket-popup-content{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);height:calc(100vh - 24px);height:calc(100dvh - 24px);overflow:hidden;padding:0;display:flex;flex-direction:column}
@media (max-width:600px){
  .basket-popup .popup-scroll-cont{padding:0}
  .basket-popup-content{border:none;border-radius:0;height:100vh;height:100dvh}
}

/* ---- Header: user icon + CFX username ---- */
.basket .basket-header{display:flex;align-items:center;padding:50px 26px 24px;background:linear-gradient(180deg,rgba(247,181,0,.12),transparent);border-bottom:1px solid var(--line-soft);font-weight:800;flex:none}
@media (width > 960px){.basket .basket-header{padding-top:70px}}
.basket .basket-title{display:flex;align-items:center;gap:12px;margin:0;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:18px;letter-spacing:.04em;color:var(--ink);text-transform:uppercase}
.basket .basket-title::before{background-color:var(--honey);width:24px;height:24px}
.basket .basket-title:has(.hs-basket-avatar)::before{display:none}
.hs-basket-avatar,.hs-basket-avatar:hover{width:36px;height:36px;flex:none;transform:none;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.hs-basket-avatar .user-avatar-letter{font-size:17px}

/* ---- Sub-header: items count + running total ---- */
.basket .basket-second-header{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line-soft);flex:none}
.basket .basket-second-header .count{color:var(--ink-soft);font-size:14px;font-weight:600}
.basket .basket-second-header .total{color:var(--honey);font-size:16px;font-weight:800}
.basket .basket-second-header .total strong,
.basket .basket-checkout .total strong{color:var(--honey)}

/* ---- Scrollable content + items list ---- */
.basket .basket-content{flex:1 1 auto;overflow-y:auto;padding:0;min-height:0}
.basket .basket-items{display:flex;flex-direction:column;gap:12px;padding:20px 26px}
.basket .basket-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:15px;font-weight:600}

/* ---- Individual item card ---- */
.basket .basket-item{display:flex !important;flex-direction:row !important;align-items:center;gap:14px;padding:16px;background:var(--card-2);border:1px solid var(--line-soft);border-radius:var(--r-md);width:100%;transition:border-color .25s,background .25s}
.basket .basket-item:hover{border-color:var(--line);background:rgba(247,181,0,.03)}
.basket .basket-item .info{flex:1 1 auto;min-width:0;margin-right:0;display:flex;flex-direction:column;gap:6px}
.basket .basket-item .info .title{margin:0;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:15px;font-weight:700;line-height:1.35;color:var(--ink)}
.basket .basket-item .info .title a{color:inherit;text-decoration:none;transition:color .2s}
.basket .basket-item .info .title a:hover{color:var(--honey-pale)}
.basket .basket-item .info .title .hs-basket-sub{display:block;margin-top:2px;font-size:12px;font-weight:600;line-height:1.4;color:var(--muted)}

/* options list (e.g. "Discord ID: 123456789") */
.basket .basket-item .info .options{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.basket .basket-item .info .options:not(:has(li)){display:none}
.basket .basket-item .info .options li{display:block;padding:0;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink-soft)}
.basket .basket-item .info .options li::before{content:"•";display:inline-block;margin-right:6px;color:var(--honey);font-weight:700;width:auto;height:auto;background:none;border-radius:0;vertical-align:baseline}
.basket .basket-item .info .options li strong{color:var(--honey-pale);font-weight:600;word-break:break-all}

.basket .basket-item .info .price{margin:4px 0 0;font-size:16px;font-weight:800;color:var(--honey);line-height:1}
.basket .basket-item .info .price strong{font-weight:800;color:var(--honey);font-size:inherit}

/* ---- Quantity stepper (-/+) with input in the middle ---- */
.basket .basket-item .quantity-field{display:inline-flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(14,11,7,.4);padding:0;flex:none;height:36px}
.basket .basket-item .quantity-field .adjust{position:relative !important;display:block !important;width:32px !important;height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important;border:none !important;border-radius:0 !important;background:transparent !important;color:transparent !important;font-size:0 !important;line-height:0 !important;cursor:pointer;flex:none;transition:background .2s}
.basket .basket-item .quantity-field .adjust::before{width:12px !important;height:12px !important;background-color:var(--ink) !important;transition:background-color .2s}
.basket .basket-item .quantity-field .adjust:hover:not(:disabled){background:rgba(247,181,0,.15) !important}
.basket .basket-item .quantity-field .adjust:hover:not(:disabled)::before{background-color:var(--honey) !important}
.basket .basket-item .quantity-field .adjust:disabled{opacity:.3;cursor:not-allowed}
.basket .basket-item .quantity-field input.quantity{width:38px;height:auto;text-align:center;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:14px;color:var(--ink);background:transparent;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);outline:none;padding:0;margin:0;appearance:textfield;-moz-appearance:textfield;border-radius:0}
.basket .basket-item .quantity-field input.quantity::-webkit-inner-spin-button,
.basket .basket-item .quantity-field input.quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ---- Remove button: rose-toned trash icon, matched height to stepper (36px) ---- */
.basket .basket-item .remove{display:block !important;position:relative !important;width:36px !important;height:36px !important;min-height:0 !important;padding:0 !important;margin:0 !important;border-radius:10px !important;background:rgba(255,80,90,.08) !important;color:rgba(255,120,130,.85) !important;border:1px solid rgba(255,80,90,.2) !important;font-size:0 !important;line-height:0 !important;text-decoration:none !important;transition:all .2s !important;flex:none}
.basket .basket-item .remove:hover{background:rgba(255,80,90,.18) !important;color:rgb(255,140,150) !important;border-color:rgba(255,80,90,.4) !important;transform:translateY(-1px)}
.basket .basket-item .remove::before{width:17px !important;height:17px !important;background-color:currentColor !important}

/* ---- Footer: total + checkout button ---- */
.basket .basket-checkout{flex:none;padding:18px 26px 26px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:14px}
.basket .basket-checkout h3{display:flex;align-items:center;justify-content:space-between;margin:0;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--ink);text-transform:uppercase}
.basket .basket-checkout .total{color:var(--honey);font-size:16px;font-weight:400}
.basket .basket-checkout .total strong{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:22px;font-weight:800;color:var(--honey)}
.basket .basket-checkout .checkout{display:flex !important;align-items:center;justify-content:center;width:100% !important;padding:15px 18px !important;border-radius:12px !important;background:var(--grad-honey) !important;color:#1a1304 !important;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800 !important;font-size:15px !important;letter-spacing:.01em;border:none !important;min-height:0 !important;box-shadow:0 12px 26px -8px rgba(247,181,0,.55) !important;transition:transform .2s,box-shadow .25s}
.basket .basket-checkout .checkout:hover{transform:translateY(-2px);box-shadow:0 18px 32px -10px rgba(247,181,0,.7) !important;color:#1a1304 !important}

/* ---------- TOASTS (.toaster > .toast) ---------- */
.toast{background:var(--bg-elev-2); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--honey);
  border-radius:var(--r-md); font-family:'Montserrat','Montserrat Fallback',sans-serif; font-weight:600; height:auto; min-height:52px; padding:14px 10px 14px 22px;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.8)}
.toast.toast-success{background:var(--bg-elev-2); border-left-color:var(--green)}
.toast.toast-error{background:var(--bg-elev-2); border-left-color:var(--rose)}
.toast.toast-warning{background:var(--bg-elev-2); border-left-color:var(--honey-2)}
.toast-close::before{background-color:var(--ink-soft)}

/* ---------- EMPTY STATES ---------- */
.no-products{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--muted); font-weight:600; border:1px dashed var(--line);
  border-radius:var(--r-lg); background:rgba(255,255,255,.015); padding:54px 28px; font-size:1rem;
}
.no-products::before{content:""; width:54px; height:60px; opacity:.55; background:var(--grad-honey);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3C/svg%3E") center/contain no-repeat}
/* reusable richer empty block (drop into category/index for a CTA) */
.hs-empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:54px 28px; border:1px dashed var(--line); border-radius:var(--r-lg); background:rgba(255,255,255,.015)}
.hs-empty .hs-empty-bee{width:58px; height:64px; opacity:.6; background:var(--grad-honey);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3C/svg%3E") center/contain no-repeat}
.hs-empty h3{color:var(--ink); font-weight:800; font-size:1.25rem}
.hs-empty p{margin:0; max-width:360px; color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:620px){
  .store-product-full,.store-text{padding:22px}
}

/* nav: show only the bee logo (hide the "HONEY SCRIPTS" wordmark) */
.site-header .brand-name{display:none !important}


/* ===== FAQ + Support : two columns ===== */
.faq-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:46px;align-items:start;max-width:1100px;margin:0 auto}
.faq-aside{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:radial-gradient(130% 130% at 0% 0%,rgba(247,181,0,.12),transparent 58%),var(--card-2);padding:34px 30px}
.faq-aside .hex-decor{position:absolute;inset:auto -22% -34% auto;width:340px;height:280px;opacity:.10}
.faq-aside-in{position:relative;z-index:1}
.faq-aside .sec-title{text-align:left;margin-top:16px;font-size:clamp(1.6rem,2.5vw,2.1rem)}
.faq-aside p{color:var(--ink-soft);margin:14px 0 24px;font-size:1.02rem;line-height:1.62}
.faq-aside .hs-btn{width:100%;justify-content:center}
.faq-main .faq-wrap{max-width:none;margin:0}
@media (max-width:900px){.faq-layout{grid-template-columns:1fr;gap:26px}}

/* ===== hero trust row ===== */
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0}
.hero-trust li{display:inline-flex;align-items:center;gap:9px;color:var(--ink-soft);font-size:13.5px;font-weight:600}
.hero-trust .hx{width:9px;height:10px;flex:none;background:var(--grad-honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 8px rgba(247,181,0,.5)}

/* ===== FAQ inside a warm band (foto-7 style) ===== */
.faq-band{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(247,181,0,.15),rgba(217,119,6,.10) 55%,rgba(28,23,16,.55));padding:44px 46px}
.faq-band .hex-decor{position:absolute;inset:-34% -8% auto auto;width:700px;height:560px;opacity:.10}
.faq-band .faq-layout{position:relative;z-index:2;margin:0;max-width:none;align-items:center}
.faq-band .faq-aside{background:none;border:none;border-radius:0;padding:0;overflow:visible}
.faq-band .faq-aside .sec-title{text-align:left;margin-top:0}
.faq-band .faq-aside .hs-btn{width:auto;justify-content:center}
.faq-bee{display:block;width:160px;height:auto;margin:26px 0 0;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));animation:hs-float 6s ease-in-out infinite}
@media (max-width:900px){.faq-band{padding:32px 26px}.faq-bee{display:none}}


/* ===== FAQ stacked (accordion + Discord CTA below) ===== */
.faq-title{text-align:center;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:900;letter-spacing:-.02em;line-height:1.05;margin:0 0 34px}
.faq-cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(247,181,0,.15),rgba(217,119,6,.10) 55%,rgba(28,23,16,.55));
  padding:42px 30px;text-align:center;max-width:880px;margin:48px auto 0}
.faq-cta-band .hex-decor{position:absolute;inset:-46% -10% auto auto;width:560px;height:440px;opacity:.10}
.faq-cta-in{position:relative;z-index:2;max-width:560px;margin:0 auto}
.faq-cta-band h3{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:900;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink);letter-spacing:-.01em}
.faq-cta-band p{color:var(--ink-soft);margin:12px auto 24px;line-height:1.6}
.faq-cta-band .hs-btn{display:inline-flex;margin:0 auto}

/* ===== Discount promo popup (glass, bottom-right) ===== */
.hs-promo{position:fixed;right:22px;bottom:22px;z-index:1000;width:316px;max-width:calc(100vw - 28px);
  display:flex;flex-direction:column;align-items:center;gap:9px;animation:hs-promo-in .5s var(--ease) both}
.hs-promo-close{align-self:center;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(18,14,8,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--ink-soft);font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;transition:.2s}
.hs-promo-close svg{width:13px;height:13px}
.hs-promo-close:hover{color:var(--ink);border-color:rgba(247,181,0,.5)}
.hs-promo-card{position:relative;width:100%;text-align:center;overflow:hidden;border-radius:18px;padding:26px 22px;
  background:linear-gradient(180deg,rgba(40,30,10,.55),rgba(12,10,7,.5));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(247,181,0,.5);
  box-shadow:0 0 0 1px rgba(247,181,0,.12),0 0 42px -6px rgba(247,181,0,.5),0 30px 60px -22px rgba(0,0,0,.75)}
.hs-promo-card::before{content:"";position:absolute;inset:-40% -20% auto auto;width:240px;height:200px;
  background:radial-gradient(circle,rgba(247,181,0,.22),transparent 70%);pointer-events:none}
.hs-promo-badge{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat','Montserrat Fallback',sans-serif;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:13px;
  background:var(--grad-honey);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-promo-badge svg{width:18px;height:18px;stroke:var(--honey)}
.hs-promo-off{position:relative;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:900;font-size:2.6rem;line-height:1;
  color:var(--ink);margin:12px 0 6px;letter-spacing:-.01em}
.hs-promo-off span{background:var(--grad-honey);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-promo-sub{position:relative;color:var(--ink-soft);font-size:13px;line-height:1.5;margin:0 0 18px}
.hs-promo-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--grad-honey);color:#0c0a07;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:13.5px;
  padding:13px 18px;border-radius:12px;text-decoration:none;box-shadow:0 12px 26px -8px rgba(247,181,0,.6);transition:transform .2s,box-shadow .2s}
.hs-promo-btn svg{width:18px;height:18px}
.hs-promo-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(247,181,0,.7)}
/* Discount code box (replaces the old "Join our Discord" button) — click to copy */
.hs-promo-code{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 14px 13px 18px;border-radius:12px;cursor:pointer;text-align:left;
  background:rgba(12,10,7,.55);border:1.5px dashed rgba(247,181,0,.6);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .2s,background .2s,transform .2s}
.hs-promo-code:hover{border-color:var(--honey);background:rgba(247,181,0,.08);transform:translateY(-1px)}
.hs-promo-code:focus-visible{outline:2px solid var(--honey);outline-offset:2px}
.hs-promo-code-text{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:900;font-size:1.35rem;
  letter-spacing:.14em;line-height:1;color:var(--honey-pale);text-transform:uppercase;user-select:all}
.hs-promo-code-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--grad-honey);color:#1a1304;box-shadow:0 8px 18px -8px rgba(247,181,0,.65);transition:transform .2s}
.hs-promo-code:hover .hs-promo-code-ico{transform:scale(1.06)}
.hs-promo-code-ico svg{width:18px;height:18px;display:block}
.hs-promo-code-ico .ico-check{display:none}
.hs-promo-code.is-copied .hs-promo-code-ico .ico-copy{display:none}
.hs-promo-code.is-copied .hs-promo-code-ico .ico-check{display:block}
.hs-promo-code.is-copied{border-style:solid;border-color:var(--green);background:rgba(134,227,164,.08)}
.hs-promo-copied{position:absolute;left:50%;top:-14px;transform:translate(-50%,6px);padding:4px 10px;border-radius:999px;
  background:var(--green);color:#0c1a10;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.hs-promo-code.is-copied .hs-promo-copied{opacity:1;transform:translate(-50%,0)}
@keyframes hs-promo-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:520px){.hs-promo{right:12px;left:12px;bottom:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.hs-promo{animation:none}}

/* =========================================================
   Login (username.html) — themed content inside Tebex's popup
   (keep data-popup in the template; we only style what's inside)
   ========================================================= */
.hs-login-pop{max-width:380px;margin:0 auto;text-align:center !important;padding:6px 4px}
.hs-login-pop > h2{all:unset}
.hs-login-badge{display:flex;justify-content:center;align-items:center;margin:0 auto 10px;
  background:none;border:0;box-shadow:none;width:auto;height:auto}
.hs-login-badge img{width:104px;height:104px;object-fit:contain;
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;
  filter:drop-shadow(0 10px 22px rgba(247,181,0,.30)) drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.hs-login-badge svg{width:40px;height:40px;color:var(--honey)}
.hs-login-title{display:block;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:1.7rem;
  line-height:1.15;margin:0 0 4px !important;letter-spacing:-.02em;color:var(--ink) !important;text-align:center !important}
.hs-login-sub{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 24px !important;text-align:center !important}
.hs-login-btn{width:100%;justify-content:center;font-size:15px;padding:14px 22px;
  color:#1a0e00 !important;font-weight:800;letter-spacing:.005em}
.hs-login-arrow{margin-left:2px;transition:transform .35s var(--ease)}
.hs-login-btn:hover .hs-login-arrow{transform:translateX(3px)}
.hs-login-form{display:flex;flex-direction:column;gap:12px}
.hs-login-input{width:100%;padding:14px 16px;border-radius:var(--r-md);font-family:'Montserrat','Montserrat Fallback',sans-serif;
  font-size:15px;color:var(--ink);background:var(--card-2);border:1px solid var(--line-soft);
  transition:border-color .25s,box-shadow .25s}
.hs-login-input::placeholder{color:var(--muted-2)}
.hs-login-input:focus{outline:none;border-color:var(--line);box-shadow:0 0 0 3px rgba(247,181,0,.14)}
.hs-login-fine{color:var(--muted-2);font-size:12px;line-height:1.55;margin:28px 0 6px !important;text-align:center !important}
.hs-login-fine a{color:var(--honey);font-weight:600}
.hs-login-fine a:hover{color:var(--honey-pale);text-decoration:underline}

/* =========================================================
   Custom pages (cms/page.html) — Privacy / Terms / Impressum
   ========================================================= */
.hs-page{max-width:840px;margin:0 auto}
.hs-page-head{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line-soft)}
.hs-page-kicker{display:inline-flex;align-items:center;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--honey);
  padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(247,181,0,.06)}
.hs-page-title{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:900;line-height:1.06;letter-spacing:-.022em;
  font-size:clamp(2rem,4vw,2.9rem);margin:14px 0 0}
.hs-page-body{color:var(--ink-soft);font-size:16px;line-height:1.75}
.hs-page-body h2{font-family:'Montserrat','Montserrat Fallback',sans-serif;color:var(--ink);font-weight:800;letter-spacing:-.01em;
  font-size:1.45rem;margin:38px 0 12px}
.hs-page-body h3{font-family:'Montserrat','Montserrat Fallback',sans-serif;color:var(--ink);font-weight:700;
  font-size:1.15rem;margin:28px 0 10px}
.hs-page-body p{margin:0 0 16px}
.hs-page-body a{color:var(--honey);font-weight:600}
.hs-page-body a:hover{color:var(--honey-pale);text-decoration:underline}
.hs-page-body ul,.hs-page-body ol{margin:0 0 18px;padding-left:22px}
.hs-page-body li{margin:6px 0}
.hs-page-body strong{color:var(--ink)}
.hs-page-body hr{border:0;height:1px;background:var(--line-soft);margin:30px 0}
.hs-page-body blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--honey);
  background:var(--card-2);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-soft)}
.hs-page-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.hs-page-body th,.hs-page-body td{padding:10px 12px;border:1px solid var(--line-soft);text-align:left}
.hs-page-body th{background:var(--card-2);color:var(--ink);font-weight:700}

/* =========================================================
   Account menu (logged-in avatar dropdown in header)
   ========================================================= */
.user-menu{position:relative}
.user-menu summary{list-style:none;cursor:pointer;display:inline-flex}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary::marker{content:""}
.user-avatar{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--grad-honey);color:#1a1304;border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:transform .2s var(--ease),box-shadow .25s}
.user-avatar svg{width:20px;height:20px}
.user-avatar-letter{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:19px;line-height:1;color:#1a1304;text-transform:uppercase}
.user-avatar-img{display:none;width:100%;height:100%;object-fit:cover}
.user-avatar.has-image{background:var(--bg-elev);padding:0}
.user-avatar.has-image .user-avatar-letter{display:none}
.user-avatar.has-image .user-avatar-img{display:block}
.user-avatar:hover,.user-menu[open] .user-avatar{transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(247,181,0,.65),inset 0 1px 0 rgba(255,255,255,.45)}
.user-dropdown{position:absolute;top:calc(100% + 12px);right:0;min-width:216px;z-index:80;
  background:var(--bg-elev-2);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-1);padding:8px;animation:hs-promo-in .22s var(--ease) both}
.user-dropdown-head{padding:8px 12px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.user-dropdown-name{display:block;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.2}
.user-dropdown-sub{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.user-dropdown-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--ink-soft);font-size:14px;transition:background .2s,color .2s}
.user-dropdown-item svg{width:17px;height:17px;flex:none}
.user-dropdown-item:hover{background:rgba(247,181,0,.08);color:var(--ink)}
.user-dropdown-item.danger{color:var(--rose)}
.user-dropdown-item.danger:hover{background:rgba(255,155,176,.1);color:#ffb3c4}

/* =========================================================
   Featured products carousel (homepage)
   ========================================================= */
.hs-featured{padding-bottom:44px}
.hs-carousel-wrap{margin:30px 0 26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hs-carousel{padding:8px 26px;overflow:visible}
.hs-slide{width:320px;max-width:82vw;height:auto;display:flex}
.hs-slide .store-product{width:100%}
.hs-featured-all{display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.hs-featured-all svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.hs-featured-all:hover svg{transform:translateX(3px)}
@media (max-width:520px){.hs-slide{width:278px}}

/* =========================================================
   Products page — search bar + framework tags
   ========================================================= */
.hs-shop-search{position:relative;max-width:520px;margin:4px auto 32px}
.hs-shop-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.hs-shop-search input{width:100%;padding:14px 18px 14px 46px;border-radius:999px;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:15px;
  color:var(--ink);background:var(--card-2);border:1px solid var(--line-soft);transition:border-color .25s,box-shadow .25s}
.hs-shop-search input::placeholder{color:var(--muted-2)}
.hs-shop-search input:focus{outline:none;border-color:var(--line);box-shadow:0 0 0 3px rgba(247,181,0,.14)}
.hs-no-results{color:var(--muted);text-align:center;padding:36px 0;font-size:1.02rem}

/* ---- Shop: category pills ---- */
.hs-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 24px}
.hs-cat-pill{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--ink-soft);
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.hs-cat-pill:hover{border-color:var(--line);color:var(--ink);background:rgba(247,181,0,.07);transform:translateY(-1px)}
.hs-cat-pill.is-active{background:var(--grad-honey);color:#1a1304;border-color:transparent;
  box-shadow:0 8px 20px -10px rgba(247,181,0,.6)}
.hs-cat-pill{gap:8px}
.hs-cat-ico{font-size:14px;line-height:1}
.hs-cat-count{margin-left:2px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink-soft);font-size:11px;font-weight:800;line-height:1.4}
.hs-cat-count:empty{display:none}
.hs-cat-pill.is-active .hs-cat-count{background:rgba(26,19,4,.22);color:#1a1304}

/* ---- Shop: seasonal collection banner (shown for the active seasonal category) ---- */
.hs-season{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);margin:0 0 26px;min-height:200px;
  --s1:#ffe488;--s2:#ffbf1f;--s3:#ec8a00;--s-bg1:#1c1710;--s-bg2:#2a2010;--s-line:rgba(247,181,0,.4);--s-ink:var(--honey-pale);
  background:linear-gradient(90deg,var(--s-bg1) 0%,var(--s-bg2) 45%,rgba(0,0,0,.15) 75%,rgba(0,0,0,0) 100%),var(--bg-img,none) right center/cover no-repeat,var(--s-bg1)}
.hs-season::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 0% 50%,rgba(255,255,255,.06),transparent 60%);pointer-events:none}
.hs-season--halloween{--s1:#ffd27a;--s2:#ff8c3c;--s3:#ff5a7a;--s-bg1:#1a0b1f;--s-bg2:#2a0f33;--s-line:rgba(255,140,60,.45);--s-ink:#ffb86b;border-color:rgba(255,140,60,.35)}
.hs-season--christmas{--s1:#ffd27a;--s2:#ff6b6b;--s3:#c62828;--s-bg1:#07160e;--s-bg2:#0d2a18;--s-line:rgba(255,107,107,.45);--s-ink:#ff9b9b;border-color:rgba(255,107,107,.3)}
.hs-season-in{position:relative;z-index:2;padding:36px 44px;max-width:640px;font-family:'Montserrat','Montserrat Fallback',sans-serif}
.hs-season-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hs-season-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--s-line);color:var(--s-ink);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.hs-season h3{margin:0 0 10px;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.hs-season h3 .grad-text{background-image:linear-gradient(135deg,var(--s1),var(--s2) 60%,var(--s3))}
.hs-season p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 20px;max-width:520px}
.hs-season-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hs-season-cta .hs-btn--primary{font-size:16px;padding:15px 26px;gap:10px;background-image:linear-gradient(135deg,var(--s1),var(--s2) 60%,var(--s3));box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.hs-season-cta .hs-btn--primary svg{width:19px;height:19px}
.hs-season-facts{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0 0;padding:0;list-style:none;color:var(--ink-soft);font-weight:600;font-size:13px}
/* Homepage: the banner sits between the hero and Featured Products */
.hs-season-section{padding:0 0 24px}
.hs-season-section .hs-season{margin:0}
.hs-recent{padding-bottom:26px}
/* Category page: no button, facts follow the text directly */
.page-category .hs-season p{margin-bottom:4px}
.hs-season-facts li{display:inline-flex;align-items:center;gap:7px}
.hs-season-facts li::before{content:"";width:8px;height:9px;flex:none;background:linear-gradient(135deg,var(--s1),var(--s2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@media (max-width:720px){
  .hs-season{min-height:0;background-image:linear-gradient(180deg,var(--s-bg2),var(--s-bg1))}
  .hs-season-in{padding:24px 22px;max-width:none}
}

/* ---- Shop: toolbar (price filter · search · sort) ---- */
.hs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:0 0 22px;padding:0}
.hs-toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hs-shop-head{margin-bottom:26px}
.hs-cats{margin-bottom:22px}
.hs-filter{display:flex;flex-wrap:wrap;gap:6px}
.hs-filter-pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:9px;border:1px solid var(--line-soft);
  background:transparent;color:var(--muted);font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;line-height:1;
  transition:background .2s,border-color .2s,color .2s}
.hs-filter-pill:hover{color:var(--ink);border-color:var(--line)}
.hs-filter-pill.is-active{background:rgba(247,181,0,.14);border-color:rgba(247,181,0,.5);color:var(--honey-pale)}
.hs-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.hs-toolbar .hs-shop-search{margin:0;width:300px;max-width:100%}
.hs-toolbar .hs-shop-search input{padding:11px 16px 11px 42px;font-size:14px}
.hs-toolbar .hs-shop-search svg{left:15px;width:16px;height:16px}
.hs-sort select{appearance:none;-webkit-appearance:none;padding:11px 38px 11px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-soft);color:var(--ink);font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:13.5px;
  background:var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffe18a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  transition:border-color .25s,box-shadow .25s}
.hs-sort select:hover{border-color:var(--line)}
.hs-sort select:focus{outline:none;border-color:var(--line);box-shadow:0 0 0 3px rgba(247,181,0,.14)}
.hs-sort select option{background:var(--bg-elev-2);color:var(--ink)}
.hs-count{margin:0;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.hs-count:empty{display:none}
@media (max-width:760px){
  .hs-toolbar-right{margin-left:0;width:100%}
  .hs-toolbar .hs-shop-search{width:100%}
  .hs-sort,.hs-sort select{width:100%}
}

/* ---- Card price: "Free" pill for €0 products ---- */
.hs-free{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:800;color:var(--green);background:rgba(134,227,164,.12);border:1px solid rgba(134,227,164,.35);line-height:1}

.hs-tags{display:flex;flex-wrap:wrap;gap:6px}
.hs-tag{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 9px;border-radius:7px;color:var(--honey-pale);background:rgba(14,11,7,.72);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(247,181,0,.3)}

/* =========================================================
   PRODUCT PAGE — two-column layout (media left, info right)
   ========================================================= */
.hs-back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:14px;
  text-decoration:none;margin-bottom:22px;transition:color .2s,transform .2s}
.hs-back svg{width:17px;height:17px}
.hs-back:hover{color:var(--honey-pale);transform:translateX(-3px)}

.store-product-full.pdp-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start;
  background:none;border:none;box-shadow:none;padding:0;border-radius:0}
.pdp-media{position:relative}
.pdp-media .image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line-soft)}
.pdp-media .image-default{width:100%;aspect-ratio:16/9}

/* YouTube video iframe (shown instead of .image when description has a video URL).
   Direct iframe embed so YouTube's native UI (title, channel name, big play button)
   is visible without an extra click. */
.pdp-video{width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);border:1px solid var(--line-soft);display:block;background:#000;overflow:hidden}

.pdp-info{position:sticky;top:96px;background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:26px}
.pdp-info .product-title{font-weight:800;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.02em;color:var(--ink);margin:0}
.pdp-tags{position:static;margin:14px 0 0}

/* buy block inside the right column (override the old sticky bar) */
.pdp-grid .actions.product-actions{position:static;display:flex;flex-direction:column;align-items:stretch;gap:12px;
  margin:20px 0 0;padding:0;background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.pdp-grid .actions .price{margin:0;display:flex;align-items:baseline;gap:10px}
.pdp-grid .actions .price strong{font-size:2rem;color:var(--ink)}
.pdp-grid .actions .price .discount{color:var(--muted);font-weight:400;font-size:1.1rem}
.pdp-grid .product-actions .add,
.pdp-grid .product-actions .subscribe,
.pdp-grid .product-actions .open-basket-cta{width:100%;flex:0 0 auto !important;height:auto !important;min-height:0 !important;justify-content:center;background:var(--grad-honey);color:#1a1304;
  border:none;padding:15px 18px;border-radius:12px;font-weight:800;font-size:15px;box-shadow:0 12px 26px -8px rgba(247,181,0,.55)}
.pdp-grid .product-actions .add:hover,
.pdp-grid .product-actions .subscribe:hover{transform:translateY(-2px);color:#1a1304}
.pdp-grid .product-actions .gift{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;flex:0 0 auto !important;height:auto !important;min-height:0 !important;
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:12px 18px;border-radius:12px;
  font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:.25s}
.pdp-grid .product-actions .gift:hover{border-color:rgba(247,181,0,.5);color:var(--honey-pale)}

.pdp-descr{margin-top:42px;color:var(--ink-soft);line-height:1.7}

/* Intro paragraph: editorial "lead" style with a soft honey accent on the left */
.pdp-descr > p:first-of-type{font-size:1.08rem;line-height:1.7;color:var(--ink);margin:0 0 26px;
  padding:18px 22px;background:linear-gradient(160deg,rgba(247,181,0,.05),rgba(247,181,0,0));
  border-left:3px solid var(--honey);border-radius:0 var(--r-md) var(--r-md) 0}
.pdp-descr > p:first-of-type strong{color:var(--ink);font-weight:800}

/* Section titles: bigger, more dramatic, with a longer honey accent bar that glows */
.pdp-descr h3{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:clamp(1.4rem,2.6vw,1.7rem);font-weight:900;
  color:var(--ink);letter-spacing:-.015em;margin:48px 0 22px;padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);position:relative}
.pdp-descr h3:first-child{margin-top:0}
.pdp-descr h3::after{content:"";position:absolute;left:0;bottom:-1px;width:84px;height:3px;
  background:var(--grad-honey);border-radius:2px;box-shadow:0 0 14px rgba(247,181,0,.55)}

/* Feature lists rendered as a 2-col premium card grid.
   JS in package.html copies each section's leading <h3> emoji onto its <li>s
   (data-emoji), giving sections distinct identities without changing the markup. */
.pdp-descr ul{list-style:none !important;padding:0 !important;margin:0 0 32px !important;
  display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
.pdp-descr ul li{position:relative;
  background:linear-gradient(160deg,var(--card-2),rgba(247,181,0,.02));
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:22px 22px 22px 92px;margin:0 !important;list-style:none !important;
  font-size:14.5px;line-height:1.6;color:var(--ink-soft);min-height:96px;
  transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .3s}
.pdp-descr ul li:hover{border-color:rgba(247,181,0,.4);
  background:linear-gradient(160deg,rgba(247,181,0,.06),rgba(247,181,0,.02));
  transform:translateY(-3px);box-shadow:0 14px 36px -18px rgba(247,181,0,.45)}

/* Old emoji-based icon disabled — JS now injects a real <span class="pdp-li-icon">
   with a contextual SVG icon based on the <li>'s content keywords (see package.html). */
.pdp-descr ul li::before{display:none !important}

/* Icon box: real DOM element injected by JS, holds a clean Lucide-style SVG */
.pdp-descr ul li .pdp-li-icon{position:absolute;left:18px;top:18px;width:56px;height:56px;
  background:linear-gradient(135deg,rgba(247,181,0,.25),rgba(217,119,6,.08));
  border:1px solid rgba(247,181,0,.32);border-radius:14px;
  display:grid;place-items:center;color:var(--honey);pointer-events:none;
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s}
.pdp-descr ul li .pdp-li-icon svg{width:26px;height:26px;display:block}
.pdp-descr ul li:hover .pdp-li-icon{
  background:linear-gradient(135deg,rgba(247,181,0,.38),rgba(217,119,6,.18));
  border-color:rgba(247,181,0,.55);color:var(--honey-pale);transform:scale(1.06)}

/* Title (<strong>) on its own line — JS strips the leading dash/em-dash separator */
.pdp-descr ul li strong{display:block;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:1.06rem;
  font-weight:800;color:var(--ink);margin:0 0 5px;letter-spacing:-.005em;line-height:1.3}

/* Mobile: cards stack to single column with a slightly smaller icon */
@media (max-width:720px){
  .pdp-descr ul{grid-template-columns:1fr !important;gap:12px !important}
  .pdp-descr ul li{padding:20px 20px 20px 80px;min-height:auto}
  .pdp-descr ul li .pdp-li-icon{width:48px;height:48px;left:16px;top:16px}
  .pdp-descr ul li .pdp-li-icon svg{width:22px;height:22px}
}

/* === Desktop: section-level 2-column grid (predictable, no auto-balance) ===
   Each <h3> + following <ul> is wrapped by JS in a .pdp-section div, which
   becomes a single grid item. Sections flow in pairs: row 1 has section 1+2,
   row 2 has section 3+4, etc. Cards inside each section stay 1-col since the
   per-column width is halved. The intro paragraph spans both columns. */
@media (min-width:960px){
  .pdp-descr{display:grid;grid-template-columns:1fr 1fr;gap:32px 36px;align-items:start}
  .pdp-descr > p:first-of-type{grid-column:1 / -1}
  .pdp-descr > .pdp-section{min-width:0}
  .pdp-descr > .pdp-section > h3{margin-top:0}
  .pdp-descr > .pdp-section > ul{grid-template-columns:1fr !important;margin-bottom:0 !important}
}

/* Themed links and inline emphasis */
.pdp-descr a{color:var(--honey-pale);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.pdp-descr a:hover{color:var(--honey)}
.pdp-descr strong{color:var(--ink)}
.pdp-descr em{color:var(--honey-pale);font-style:italic}

@media (max-width:880px){
  .store-product-full.pdp-grid{grid-template-columns:1fr;gap:22px}
  .pdp-info{position:static}
}

/* =========================================================
   HOME — "Recent Products" auto-scroll marquee (Featured Package modules)
   ========================================================= */
.hs-recent{padding-bottom:46px}
/* Product grid: up to 4 per row (cells 300–360px), centered when there are fewer cards. */
.hs-featured-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(300px,360px));justify-content:center !important;gap:22px !important;margin:32px 0 30px}
/* Laptops (≤1559px): slightly narrower cells so 4 still fit at 1366px. */
@media (max-width:1559px){.hs-featured-grid{grid-template-columns:repeat(auto-fit,minmax(280px,306px))}}
@media (max-width:420px){.hs-featured-grid{grid-template-columns:minmax(0,1fr)}}
/* Wider container for the product sections so 4 × 360px fit on desktop. */
.hs-recent .hs-wrap,.page-category .hs-home .hs-wrap{max-width:1560px}

/* ---------- RECENT PURCHASES strip (module.payments.html, shown under Featured Products) ---------- */
.hs-rp-section{margin-top:38px}
.hs-rp-section .widget:not(.widget-recent){display:none}
.hs-rp-section .hs-rp:empty,.hs-rp-section .hs-rp:not(:has(.hs-rp-item)){display:none}
#hsFeaturedGrid .widget-recent{display:none}
.hs-rp{display:block}
.hs-rp-title{margin:0 0 18px;text-align:center;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:900;font-size:22px;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.hs-rp-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hs-rp-lane{display:flex;gap:10px;width:max-content;justify-content:center}
.hs-rp-lane:not(.is-moving){width:auto;flex-wrap:wrap}
.hs-rp-lane.is-moving{animation:hsRpMarquee 30s linear infinite}
.hs-rp-lane.is-moving:hover{animation-play-state:paused}
@keyframes hsRpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hs-rp-list{display:flex;gap:10px;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
.hs-rp-lane:not(.is-moving) .hs-rp-list{flex-wrap:wrap;justify-content:center}
.hs-rp-item{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-soft)}
.hs-rp-av,.hs-rp-av:hover{width:30px;height:30px;flex:none;transform:none;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.hs-rp-av .user-avatar-letter{font-size:13px}
.hs-rp-txt{display:flex;flex-direction:column;line-height:1.2}
.hs-rp-user{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:13px;color:var(--ink)}
.hs-rp-meta{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.hs-rp-meta b,.hs-rp-meta strong{color:var(--honey-pale);font-weight:700;font-size:inherit}
.hs-rp-sep{color:var(--muted)}
.hs-rp-free{display:inline-block;padding:2px 7px;border-radius:999px;background:rgba(61,220,132,.14);color:#6fe3a0;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;font-size:9.5px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase}
.hs-rp-time{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:11px;color:var(--muted);margin-left:4px;white-space:nowrap}
@media (max-width:760px){.hs-rp-section{margin-top:28px}.hs-rp-title{font-size:19px}}
.hs-featured-grid .widget:not(.widget-featured){display:none}
.hs-featured-grid .widget-featured{max-width:100%;margin:0;padding:0;background:none;border:none;box-shadow:none;text-align:left}
.hs-featured-grid .widget-featured .widget-title{display:none}
.hs-featured-grid .widget-content{height:100%;padding:0;margin:0;background:none;border:none}
.hs-featured-grid .store-product{height:100%}
/* Direct .store-product children (products page renders without widget wrapper).
   Match home page cards: fill the grid cell, zero padding, centered text. */
.hs-featured-grid > .store-product{width:100% !important;max-width:100%;padding:0 !important;text-align:center}

/* =========================================================
   GIFT POPUP — premium themed design with gift icon header
   The JS in package.html detects the gift popup when it opens and adds:
   1. `.hs-gift-popup-inner` class to .popup-content
   2. A `.hs-gift-icon` element at the top with a centered gift SVG
   3. A `.hs-gift-popup-sub` subtitle line below the title
   ========================================================= */
.popup-content.hs-gift-popup-inner{padding:40px 38px 36px;text-align:center;
  max-width:420px;box-sizing:border-box}

/* Gift icon: round glowing badge at the top, mathematically centered */
.hs-gift-icon{display:flex;justify-content:center;align-items:center;
  width:74px;height:74px;margin:0 auto 22px;border-radius:50%;
  background:linear-gradient(135deg,rgba(247,181,0,.28),rgba(217,119,6,.10));
  border:1px solid rgba(247,181,0,.4);
  box-shadow:0 14px 34px -10px rgba(247,181,0,.55),
             inset 0 1px 0 rgba(255,255,255,.08),
             0 0 0 6px rgba(247,181,0,.05)}
.hs-gift-icon svg{width:34px;height:34px;color:var(--honey);
  filter:drop-shadow(0 2px 8px rgba(247,181,0,.45))}

/* Title + subtitle */
.hs-gift-popup-inner h2,
.hs-gift-popup-inner > h2:first-of-type{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:800;
  font-size:1.55rem;margin:0 0 10px;letter-spacing:-.02em;color:var(--ink);
  text-align:center;line-height:1.2}
.hs-gift-popup-sub{color:var(--muted);font-size:13.5px;line-height:1.55;
  margin:0 auto 28px;max-width:320px;text-align:center;text-wrap:balance}

/* Form layout: input + button stacked, equal full-width, perfectly centered.
   !important defeats Tebex's global .btn-primary{width:fit-content} which would
   otherwise shrink the Send button and break the symmetry. box-sizing:border-box
   keeps padding inside the width so input and button align edge-to-edge. */
.hs-gift-popup-inner form{display:flex !important;flex-direction:column;
  gap:12px;width:100%;margin:0;align-items:stretch}
.hs-gift-popup-inner input[type="text"]{width:100% !important;box-sizing:border-box;
  text-align:center;font-size:14.5px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--card-2);border:1px solid var(--line-soft);color:var(--ink);
  transition:border-color .25s,box-shadow .25s,background .25s;
  font-family:'Montserrat','Montserrat Fallback',sans-serif}
.hs-gift-popup-inner input[type="text"]::placeholder{color:var(--muted-2)}
.hs-gift-popup-inner input[type="text"]:focus{outline:none;border-color:var(--honey);
  box-shadow:0 0 0 3px rgba(247,181,0,.15);background:rgba(247,181,0,.04)}

/* Send button — explicit !important width to override Tebex's btn-primary base */
.hs-gift-popup-inner button[type="submit"],
.hs-gift-popup-inner .btn-primary{width:100% !important;box-sizing:border-box;
  display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
  font-size:15px;padding:14px 22px;font-weight:800;letter-spacing:.005em;
  background:var(--grad-honey);color:#1a1304;margin:0 !important;
  border:none;border-radius:12px;cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(247,181,0,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s,box-shadow .25s}
.hs-gift-popup-inner button[type="submit"]:hover,
.hs-gift-popup-inner .btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 18px 38px -10px rgba(247,181,0,.72)}
.hs-gift-popup-inner button[type="submit"] svg{width:17px;height:17px;flex:none}

/* =========================================================
   ACCOUNT MENU — Discord linked state (NEW)
   Toggled by the script in footer.twig. When a Discord is linked it shows your
   Discord tag + a green dot, and reveals the "Disconnect Discord" row.
   ========================================================= */
.user-menu .js-discord-connect .js-discord-status{margin-left:auto;width:8px;height:8px;border-radius:50%;
  background:var(--muted-2);flex:none;transition:background .2s,box-shadow .2s}
.user-menu.discord-linked .js-discord-connect .js-discord-status{background:var(--green);box-shadow:0 0 8px rgba(134,227,164,.7)}
.user-menu.discord-linked .js-discord-connect .js-discord-text{color:var(--ink);font-weight:600}
.user-dropdown-item.js-discord-disconnect{width:100%;text-align:left;cursor:pointer;background:none;border:none;font:inherit}

/* =========================================================
   CHECKOUT FIX — the discount promo popup floats at a high z-index and was
   overlapping the Tebex checkout (covering the TOS checkbox + pay button).
   Make only its visible parts clickable so its transparent area never eats
   clicks meant for the checkout. (footer.twig also hides it during checkout.)
   ========================================================= */
.hs-promo{pointer-events:none}
.hs-promo-card,.hs-promo-close{pointer-events:auto}