/* ==========================================================
   Apex LP Engine - component library for client offer pages
   Themes: html[data-theme="dark|light|pastel|vibrant|fashion"]
   The page sets --accent (taken from the product); everything else adapts.
   ========================================================== */
html[data-theme=dark]{--bg:#0a0a0c;--bg2:#121216;--line:#26262e;--text:#f6f3ee;--muted:#aaa59b;--hbg:rgba(10,10,12,.82);--on-accent:#0a0a0c;--accent-text:var(--accent);--shade:rgba(0,0,0,.5)}
html[data-theme=light]{--bg:#faf7f2;--bg2:#ffffff;--line:#e7dfd0;--text:#1c1914;--muted:#6b6558;--hbg:rgba(250,247,242,.86);--on-accent:#fff;--accent-text:color-mix(in srgb,var(--accent) 58%,#000);--shade:rgba(60,40,10,.18)}
html[data-theme=pastel]{--bg:#fcf4f2;--bg2:#ffffff;--line:#f1dcd8;--text:#2d2233;--muted:#7e6f82;--hbg:rgba(252,244,242,.86);--on-accent:#2d2233;--accent-text:color-mix(in srgb,var(--accent) 62%,#2d2233);--shade:rgba(120,60,90,.14)}
html[data-theme=vibrant]{--bg:#120a24;--bg2:#1d1238;--line:#3b2a68;--text:#ffffff;--muted:#c6b9ea;--hbg:rgba(18,10,36,.86);--on-accent:#12081f;--accent-text:var(--accent);--shade:rgba(0,0,0,.5)}
html[data-theme=vibrant] body{background:radial-gradient(900px 520px at 90% -10%,rgba(255,79,163,.22),transparent 60%),radial-gradient(800px 520px at 0% 30%,rgba(110,80,255,.2),transparent 60%),var(--bg)}
html[data-theme=pastel] body{background:radial-gradient(900px 520px at 90% -10%,rgba(255,190,200,.35),transparent 60%),var(--bg)}
html[data-theme]{color-scheme:dark}html[data-theme=light],html[data-theme=pastel]{color-scheme:light}
html[data-theme] body{transition:background-color .5s,color .5s}
html[data-theme] header{background:var(--hbg)}
html[data-theme] .btn{color:var(--on-accent)}
html[data-theme] .btn.ghost{color:var(--text)}
html[data-theme] .eyebrow,html[data-theme] .card .n,html[data-theme] summary::after{color:var(--accent-text)}
html[data-theme] .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.82) 100%)}
html[data-theme] .hero h1,html[data-theme] .hero .eyebrow{color:#fff}
html[data-theme] .hero .eyebrow{color:color-mix(in srgb,var(--accent) 80%,#fff)}
html[data-theme] .hero p{color:rgba(255,255,255,.88)}
html[data-theme] .hero .btn:not(.ghost){color:var(--on-accent)}
html[data-theme] .hero .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
html[data-theme] .closing{background:radial-gradient(700px 340px at 50% 110%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
html[data-theme] .card,html[data-theme] .product,html[data-theme] .mi,html[data-theme] .order,html[data-theme] .pgc,html[data-theme] .ev figure{box-shadow:0 18px 40px -30px var(--shade)}
html[data-theme] input,html[data-theme] select,html[data-theme] textarea{color:var(--text)}
html[data-theme=light] .vid,html[data-theme=pastel] .vid{border-color:var(--line)}

/* ---------- lazy hero media ---------- */
.lp-hero .lp-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.lp-hero .lp-bgvid.on{opacity:1}
.lp-hero>img{animation:none;transform:scale(1.04);will-change:transform}
.lp-hero .wrap{will-change:transform,opacity}

/* ---------- scroll reveal variants (Intersection Observer, no library) ---------- */
.reveal[data-anim=left]:not(.in){transform:translateX(-42px)}
.reveal[data-anim=right]:not(.in){transform:translateX(42px)}
.reveal[data-anim=zoom]:not(.in){transform:scale(.92)}
.reveal[data-anim=up]:not(.in){transform:translateY(34px)}
[dir=rtl] .reveal[data-anim=left]:not(.in){transform:translateX(42px)}
[dir=rtl] .reveal[data-anim=right]:not(.in){transform:translateX(-42px)}
.lp-sprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;background:linear-gradient(90deg,var(--accent),#fff6dd);box-shadow:0 0 12px var(--accent)}
.card,.product,.pgc,.ev figure,.mi{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s,opacity .8s ease}
.card:hover,.product:hover,.pgc:hover,.ev figure:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 34px 60px -34px color-mix(in srgb,var(--accent) 60%,transparent)}
.product img,.pgc img,.ev img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.product:hover img,.pgc:hover img,.ev figure:hover img{transform:scale(1.06)}
.product,.pgc,.ev figure{overflow:hidden}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
details[open] p{animation:lpfade .45s ease}
@keyframes lpfade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
summary::after{transition:transform .35s}
details[open] summary::after{transform:rotate(45deg)}

/* ---------- urgency: strip + countdown ---------- */
.lp-strip{background:var(--accent);color:var(--on-accent);text-align:center;padding:10px 16px;font-size:14px;font-weight:600;display:flex;justify-content:center;align-items:center;gap:8px 18px;flex-wrap:wrap}
.lp-cd{display:inline-flex;gap:6px;align-items:center}
.lp-cd span{display:inline-flex;flex-direction:column;align-items:center;min-width:46px;padding:4px 6px;border-radius:9px;background:rgba(0,0,0,.18);line-height:1.1}
.lp-cd span b{font-variant-numeric:tabular-nums;font-size:17px}
.lp-cd span i{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.lp-stock{max-width:560px;margin:34px auto 0;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:18px 22px}
.lp-stock p{margin:0 0 10px;display:flex;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:500}
.lp-stock p em{font-style:normal;color:var(--accent-text);font-weight:700}
.lp-stock .bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.lp-stock .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#ff5a4d));transition:width 1.6s cubic-bezier(.2,.8,.2,1);position:relative}
.lp-stock .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:lpshine 2.4s infinite}
@keyframes lpshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- problem / solution ---------- */
.lp-ps{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;margin-top:44px}
.lp-ps .col{border:1px solid var(--line);border-radius:24px;padding:30px;background:var(--bg2)}
.lp-ps .col.bad{background:color-mix(in srgb,#c0392b 7%,var(--bg2))}
.lp-ps .col.good{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--bg2))}
.lp-ps h3{font-size:24px;margin:0 0 18px}
.lp-ps ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lp-ps li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15.5px}
.lp-ps li::before{content:"✕";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:color-mix(in srgb,#c0392b 22%,transparent);color:#e8806f}
.lp-ps .good li{color:var(--text)}
.lp-ps .good li::before{content:"✓";background:var(--accent);color:var(--on-accent);font-weight:700}
.lp-ps .arrow{align-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:20px;box-shadow:0 10px 30px -10px var(--accent)}
[dir=rtl] .lp-ps .arrow{transform:scaleX(-1)}

/* ---------- us vs them ---------- */
.lp-vs{margin-top:44px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--bg2)}
.lp-vs table{width:100%;border-collapse:collapse}
.lp-vs th,.lp-vs td{padding:17px 20px;text-align:center;border-bottom:1px solid var(--line);font-size:15px}
.lp-vs th:first-child,.lp-vs td:first-child{text-align:start;color:var(--text);font-weight:500}
.lp-vs thead th{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--muted)}
.lp-vs thead th.us{color:var(--on-accent);background:var(--accent)}
.lp-vs td.us{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-text);font-weight:700;font-size:18px}
.lp-vs td.no{color:#d9776a}.lp-vs td.mid{color:var(--muted)}
.lp-vs tr:last-child td{border-bottom:0}

/* ---------- testimonials carousel ---------- */
.lp-testi{margin-top:44px;position:relative}
.lp-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px;-webkit-overflow-scrolling:touch}
.lp-track::-webkit-scrollbar{display:none}
.lp-slide{flex:0 0 min(440px,86%);scroll-snap-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:16px}
.lp-slide .st{color:var(--accent);letter-spacing:.2em;font-size:15px}
.lp-slide blockquote{margin:0;font-family:var(--serif);font-size:20px;line-height:1.45}
.lp-slide cite{font-style:normal;color:var(--muted);font-size:14px;margin-top:auto}
.lp-slide cite b{display:block;color:var(--text);font-weight:600}
.lp-ctrl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:20px}
.lp-ctrl button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--text);cursor:pointer;font-size:16px;transition:.2s}
.lp-ctrl button:hover{border-color:var(--accent);color:var(--accent-text)}
.lp-dots{display:flex;gap:8px}.lp-dots i{width:8px;height:8px;border-radius:99px;background:var(--line);transition:.3s;cursor:pointer}
.lp-dots i.on{width:26px;background:var(--accent)}
.lp-note{color:var(--muted);font-size:12.5px;text-align:center;margin:18px 0 0}

/* ---------- sticky CTA ---------- */
html[data-lp] .float{display:none!important}
.lp-sticky{position:fixed;left:50%;bottom:16px;transform:translate(-50%,170%);width:min(760px,100% - 24px);display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:999px;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 24px 60px -22px rgba(0,0,0,.6);transition:transform .55s cubic-bezier(.2,.8,.2,1);z-index:60}
.lp-sticky.on{transform:translate(-50%,0)}
.lp-sticky img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.lp-sticky div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.lp-sticky b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sticky span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sticky .btn{padding:13px 24px;font-size:14.5px;flex:none}
html[data-lp] body{padding-bottom:92px}

/* ---------- demo mode ---------- */
.lp-demo{display:flex;justify-content:center;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:8px 16px;background:linear-gradient(90deg,#0d0b08,#1b150b,#0d0b08);color:#e8d6a3;font-size:12.5px;position:relative;z-index:30}
.lp-demo a{color:var(--accent);font-weight:600}
.lp-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);color:var(--accent);padding:5px 15px;border-radius:999px;font-weight:600;background:rgba(0,0,0,.4);font-size:13px}
.lp-badge i{width:7px;height:7px;border-radius:50%;background:#ff5a4d;animation:lppulse 1.8s infinite}
@keyframes lppulse{0%{box-shadow:0 0 0 0 rgba(255,90,77,.7)}70%{box-shadow:0 0 0 9px rgba(255,90,77,0)}100%{box-shadow:0 0 0 0 rgba(255,90,77,0)}}
.lp-themes{display:inline-flex;align-items:center;gap:6px}
.lp-themes button{border:1px solid rgba(255,255,255,.22);background:transparent;color:#e8d6a3;border-radius:999px;padding:4px 11px;font:500 12px/1.2 inherit;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.2s}
.lp-themes button i{width:10px;height:10px;border-radius:50%;background:var(--sw)}
.lp-themes button:hover,.lp-themes button.on{border-color:var(--accent);color:#fff;background:rgba(255,255,255,.08)}
.lp-toast{position:fixed;left:50%;bottom:108px;transform:translate(-50%,16px);max-width:min(520px,100% - 28px);padding:14px 22px;border-radius:16px;background:rgba(14,12,9,.95);color:#f7f1e4;border:1px solid var(--accent);box-shadow:0 20px 50px -18px #000;font-size:14px;text-align:center;line-height:1.5;opacity:0;pointer-events:none;transition:.35s;z-index:90}
.lp-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:860px){ .lp-ps{grid-template-columns:1fr} .lp-ps .arrow{justify-self:center;transform:rotate(90deg)} .lp-vs th,.lp-vs td{padding:13px 10px;font-size:13.5px} }
@media (max-width:600px){ .lp-sticky span{display:none} .lp-sticky .btn{padding:12px 18px} .lp-themes button{padding:4px 9px} }
@media (prefers-reduced-motion:reduce){ .lp-badge i,.lp-stock .bar i::after{animation:none} .reveal[data-anim]{transform:none!important} }

.brand{display:flex;align-items:center;gap:10px}
.brand img.logo{height:34px;width:auto;max-width:120px;object-fit:contain;border-radius:6px}

/* ---------- High-Fashion theme: monochrome + one bold accent ---------- */
html[data-theme=fashion]{--bg:#0b0b0b;--bg2:#151515;--line:#2c2c2c;--text:#f4f4f2;--muted:#9b9b97;--hbg:rgba(11,11,11,.88);--on-accent:#fff;--accent-text:var(--accent);--shade:rgba(0,0,0,.6);color-scheme:dark}
html[data-theme=fashion] body{background:var(--bg)}
html[data-theme=fashion] .btn{border-radius:0;text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:600}
html[data-theme=fashion] .btn.ghost{box-shadow:inset 0 0 0 1px var(--text)}
html[data-theme=fashion] .card,html[data-theme=fashion] .product,html[data-theme=fashion] .pgc,html[data-theme=fashion] .order,html[data-theme=fashion] .mi,html[data-theme=fashion] .vid{border-radius:0}
html[data-theme=fashion] .eyebrow{letter-spacing:.34em;font-size:11px}
html[data-theme=fashion] h1,html[data-theme=fashion] h2,html[data-theme=fashion] h3{font-weight:400}
html[data-theme=fashion] .lp-strip{letter-spacing:.14em;text-transform:uppercase;font-size:12px}
html[data-theme=fashion] .lp-ps .col,html[data-theme=fashion] .lp-vs,html[data-theme=fashion] .lp-testi,html[data-theme=fashion] .lp-stock{border-radius:0}