/* =========================================================
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;
--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',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',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)}
/* =========================================================
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',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',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',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',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',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',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',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',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%}
/* Belt-and-suspenders: any non-PDP card hard-locked at 400px so width never depends on parent. */
.store-product:not(.store-product-full){width:400px !important;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',sans-serif;font-weight:700;
font-size:1.12rem;letter-spacing:-.01em;line-height:1.3;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.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',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:grid !important;grid-template-columns:1fr auto !important;align-items:center;gap:6px 14px;padding:11px 16px 0}
.store-product .hs-card-price{margin:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.3rem;line-height:1;color:var(--ink);white-space:nowrap;text-align:right}
.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}
.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}
.hs-tag::before{content:"\2713";font-weight:800;margin-right:5px;opacity:.85}
/* "New" badge, top-right of the image */
.hs-new{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;
font-family:'Montserrat',sans-serif;font-weight:800;
font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#1a1304;
background:var(--grad-honey);box-shadow:0 6px 16px -4px rgba(247,181,0,.6)}
.hs-new-ico{width:14px;height:14px;flex:none;display:block}
/* 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',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',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',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',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',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',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',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',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',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.
========================================================= */
.basket-popup-content{background:var(--bg);border-left:1px solid var(--line);padding:0;display:flex;flex-direction:column}
/* ---- 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',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}
/* ---- 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',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)}
/* 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',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',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',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',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',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',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',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',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',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',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)}
@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',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',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',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',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',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',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',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',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',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}
.hs-tags{display:flex;flex-wrap:wrap;gap:7px}
.hs-tag{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
padding:5px 10px;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',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',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 emoji onto its
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
with a contextual SVG icon based on the '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 () on its own line — JS strips the leading dash/em-dash separator */
.pdp-descr ul li strong{display:block;font-family:'Montserrat',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 + following 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}
.hs-featured-grid{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:24px !important;margin:32px 0 30px}
.hs-featured-grid .widget:not(.widget-featured){display:none}
.hs-featured-grid .widget-featured{flex:0 0 400px;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: same 400px width, zero padding, centered text. */
.hs-featured-grid > .store-product{flex:0 0 400px !important;width:400px !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',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',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}