/* Storefront styles. Colours, fonts, widths and shapes come from /theme.css (Admin → Design). */
:root { --bg:#faf8f5; --surface:#fff; --alt-bg:#f3eee7; --text:#1c1917; --muted:#78716c; --border:#e7e2dc; --primary:#1c1917; --primary-text:#fff; --accent:#c2410c; --accent-text:#fff;
  --header-bg:#faf8f5; --header-text:#1c1917; --announce-bg:#1c1917; --announce-text:#fff; --footer-bg:#fff; --footer-text:#1c1917; --dark-bg:#1c1917; --dark-text:#faf8f5;
  --font-heading:ui-serif,Georgia,serif; --font-body:ui-sans-serif,system-ui,sans-serif; --base:16px; --h-weight:600; --h-case:none; --h-track:-.02em; --h-scale:1;
  --btn-case:none; --btn-track:0; --nav-case:none; --nav-track:0; --radius:14px; --btn-radius:999px; --width:1240px; --card-ratio:1/1; --logo-h:34px; --logo-h-m:28px;
  --gutter:clamp(16px, 3.2vw, 40px); --ok:#15803d; --bad:#b91c1c; --star:#f5b301; --ease:cubic-bezier(.2,.7,.2,1); --header-h:72px }
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
html { overflow-x:clip }
body { margin:0; background:var(--bg); color:var(--text); font:var(--base)/1.6 var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden }
img, video { max-width:100%; height:auto; display:block }
a { color:inherit; text-underline-offset:3px }
h1,h2,h3,h4 { font-family:var(--font-heading); font-weight:var(--h-weight); text-transform:var(--h-case); letter-spacing:var(--h-track); line-height:1.05; margin:0 0 .5em; text-wrap:balance }
p { text-wrap:pretty }
[hidden] { display:none !important }
.i { width:20px; height:20px; flex:none }
.i.big { width:40px; height:40px; opacity:.4 }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip { position:absolute; left:-999px; top:8px; background:var(--primary); color:var(--primary-text); padding:8px 14px; border-radius:8px; z-index:200 }
.skip:focus { left:8px }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.muted { color:var(--muted) } .small { font-size:.875rem } .center { text-align:center } .mono { font-family:ui-monospace,Menlo,monospace; font-size:.85em }

/* Width — follows Design → Layout (contained / wide / full width) */
.wrap, .hwrap, .fwrap { width:min(var(--width), 100% - var(--gutter) * 2); margin-inline:auto }
.w-full .wrap, .w-full .hwrap, .w-full .fwrap { width:calc(100% - var(--gutter) * 2) }
.wrap.wrap-wide { width:min(1680px, 100% - var(--gutter) * 2) }
.wrap.wrap-full { width:100%; padding-inline:var(--gutter) }
.narrow { max-width:720px; margin-inline:auto }
.narrow-wide { max-width:1080px }
.hide-d { display:none !important }
@media (max-width:760px) { .hide-m { display:none !important } .hide-d { display:block !important } }
@media (max-width:760px) { .only-desktop { display:none !important } }
@media (min-width:761px) { .only-mobile { display:none !important } }

/* ── Top: announcement + header ── */
.devbar { background:#fef3c7; color:#78350f; text-align:center; font-size:13px; padding:6px 12px }
.site-top { position:relative; z-index:60 }
.sticky .site-top { position:sticky; top:0 }
.announce { background:var(--announce-bg); color:var(--announce-text); font-size:.82rem; font-weight:600; letter-spacing:.02em; overflow:hidden; text-align:center }
.announce a { text-decoration:none } .announce a:hover { text-decoration:underline }
.an-msgs { display:grid; padding:9px var(--gutter) }
.an-msg { grid-area:1/1; opacity:0; transform:translateY(6px); transition:opacity .45s, transform .45s; pointer-events:none }
.an-msg.on { opacity:1; transform:none; pointer-events:auto }
.an-static .an-msg { opacity:1; transform:none; grid-area:auto }
.an-marquee { padding:9px 0 } .an-marquee .mq-track { animation-duration:var(--an-speed) }
.an-marquee .mq-group { gap:28px; padding-right:28px }
.an-sep { opacity:.6 }
.site-header { background:var(--header-bg); color:var(--header-text); transition:background .3s, color .3s, box-shadow .3s }
.site-header.bordered { border-bottom:1px solid color-mix(in srgb, var(--header-text) 12%, transparent) }
.header-inner { display:flex; align-items:center; gap:28px; min-height:var(--header-h) }
.brand { font:var(--h-weight) 1.5rem/1 var(--font-heading); text-transform:var(--h-case); letter-spacing:var(--h-track); text-decoration:none; display:flex; align-items:center; flex:none }
.brand .logo { height:var(--logo-h); width:auto }
.main-nav { display:flex; gap:clamp(14px, 2vw, 30px); align-items:center; flex:1 }
.nav-link { background:none; border:0; padding:8px 0; color:inherit; font:500 .92rem var(--font-body); text-transform:var(--nav-case); letter-spacing:var(--nav-track); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; position:relative }
.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease) }
.nav-link:hover::after, .nav-link[aria-current]::after { transform:scaleX(1) }
.caret { width:14px; height:14px; transition:transform .2s }
.nav-drop { position:relative }
.dropdown { position:absolute; top:100%; left:-16px; min-width:220px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:min(var(--radius), 14px); padding:8px; display:grid; box-shadow:0 18px 40px rgb(0 0 0 / .12); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s, transform .2s, visibility .2s; z-index:70 }
.dropdown a { padding:9px 12px; border-radius:8px; text-decoration:none; font-size:.93rem }
.dropdown a:hover { background:color-mix(in srgb, var(--text) 6%, transparent) }
.dropdown .dd-all { font-weight:600 }
.nav-drop:hover .dropdown, .nav-drop:focus-within .dropdown, .nav-drop.open .dropdown { opacity:1; visibility:visible; transform:none }
.nav-drop:hover .caret, .nav-drop.open .caret { transform:rotate(180deg) }
.header-actions { display:flex; align-items:center; gap:4px; margin-left:auto }
.icon-btn { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:999px; border:0; background:none; color:inherit; cursor:pointer; position:relative; transition:background .2s; text-decoration:none }
.icon-btn:hover { background:color-mix(in srgb, currentColor 9%, transparent) }
.badge { position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--accent); color:var(--accent-text); font:700 11px/18px var(--font-body); text-align:center }
.badge.pop { animation:pop .45s var(--ease) }
@keyframes pop { 50% { transform:scale(1.4) } }
.search { position:relative; display:flex; align-items:center }
.search input { width:180px; min-height:40px; height:40px; padding:0 14px 0 38px; border-radius:99px; border:1px solid color-mix(in srgb, currentColor 18%, transparent); background:color-mix(in srgb, currentColor 4%, transparent); font:inherit; font-size:.9rem; color:inherit; transition:width .3s var(--ease), border-color .2s }
.search input::placeholder { color:inherit; opacity:.6 }
.search input:focus { width:240px; outline:none; border-color:currentColor; box-shadow:none }
.search .i { position:absolute; left:12px; width:17px; opacity:.7; pointer-events:none }
.menu-toggle { display:none }
.hl-center .header-inner, .hl-split .header-inner { display:grid; grid-template-columns:1fr auto 1fr }
.hl-center .main-nav, .hl-split .main-nav { grid-column:1; grid-row:1 }
.hl-center .brand-center, .hl-split .brand-center { grid-column:2; grid-row:1; justify-content:center }
.hl-center .header-actions, .hl-split .header-actions { grid-column:3; grid-row:1 }
.hl-split .header-inner { grid-template-rows:auto auto; row-gap:0; padding-top:10px }
.hl-split .main-nav { grid-column:1 / -1; grid-row:2; justify-content:center; padding:4px 0 10px }
.hl-split .brand .logo { height:calc(var(--logo-h) * 1.15) }
@media (max-width:960px) {
  .main-nav, .header-actions .search { display:none }
  .menu-toggle { display:inline-grid; margin-left:-10px }
  .header-inner, .hl-center .header-inner, .hl-split .header-inner { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:8px; min-height:62px; padding-top:0 }
  .brand, .brand-center { min-width:0; max-width:100%; justify-self:center }
  .brand span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .menu-toggle { width:84px; justify-content:start; display:inline-flex !important; padding-left:10px }
  .menu-toggle { grid-column:1; justify-self:start }
  .brand, .brand-center { grid-column:2; grid-row:1; justify-content:center; font-size:1.25rem }
  .header-actions { grid-column:3; grid-row:1 }
  .brand .logo { height:var(--logo-h-m) }
}
/* Header floating over the first banner */
.header-over .site-top { position:absolute; left:0; right:0; top:0 }
.header-over.sticky .site-top { position:fixed }
.header-over .site-header:not(.solid) { background:transparent; color:#fff; border-color:transparent }
.header-over .site-header:not(.solid) .search input { border-color:rgb(255 255 255 / .45) }
.header-over .site-header.solid { box-shadow:0 1px 0 color-mix(in srgb, var(--header-text) 10%, transparent) }
.header-over main > .blk:first-child .hero-inner, .header-over main > .blk:first-child .slide .hero-inner { padding-top:calc(var(--header-h) + 60px) }

/* Drawers (menu + cart) */
.drawer { position:fixed; inset:0; z-index:150; background:rgb(0 0 0 / 0); transition:background .3s }
.drawer.open { background:rgb(0 0 0 / .4) }
.drawer-panel { position:absolute; top:0; bottom:0; width:min(400px, 92vw); background:var(--bg); color:var(--text); display:flex; flex-direction:column; transition:transform .35s var(--ease); overflow-y:auto }
.drawer-left .drawer-panel { left:0; transform:translateX(-100%); padding:16px 20px 28px; gap:18px }
.drawer-right .drawer-panel { right:0; transform:translateX(100%); width:min(440px, 100vw) }
.drawer.open .drawer-panel { transform:none }
.dr-head { display:flex; justify-content:space-between; align-items:center; gap:12px }
.cart-panel .dr-head { padding:18px 20px; border-bottom:1px solid var(--border) }
.dr-head h2 { font-size:1.35rem; margin:0 }
.dr-loading { display:grid; place-items:center; flex:1 }
.m-nav { display:grid }
.m-nav > a, .m-nav summary { padding:14px 2px; border-bottom:1px solid var(--border); text-decoration:none; font-size:1.15rem; font-weight:600; text-transform:var(--nav-case); letter-spacing:var(--nav-track); display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none }
.m-nav summary::-webkit-details-marker { display:none }
.m-nav details > div { display:grid; padding:6px 0 10px 12px }
.m-nav details a { padding:9px 0; text-decoration:none; color:var(--muted) }
.m-nav details[open] summary .i { transform:rotate(180deg) }
.drawer .search input, .drawer .search input:focus { width:100% }
.dr-empty { display:grid; justify-items:center; gap:12px; padding:60px 20px; text-align:center; color:var(--muted) }
.dr-ship { padding:14px 20px; font-size:.9rem; background:color-mix(in srgb, var(--accent) 7%, transparent) }
.dr-lines { flex:1; padding:6px 20px; overflow-y:auto }
.dr-line { display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); align-items:start }
.dr-img { width:72px; aspect-ratio:1; border-radius:min(var(--radius), 10px); overflow:hidden; background:var(--surface); display:block }
.dr-img img { width:100%; height:100%; object-fit:cover }
.dr-info { display:grid; gap:4px; justify-items:start }
.dr-info > a { font-weight:600; text-decoration:none; line-height:1.3 }
.dr-right { display:grid; justify-items:end; gap:6px }
.dr-foot { padding:16px 20px 22px; border-top:1px solid var(--border); display:grid; gap:10px; background:var(--surface) }
.dr-foot .row { display:flex; justify-content:space-between; font-size:1.1rem }
.dr-foot p { margin:0 }
.qty-sm { height:34px !important } .qty-sm .qty-btn { width:32px } .qty-sm span { min-width:22px; text-align:center; font-weight:600; font-size:.9rem }
/* Buttons & forms */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:var(--btn-radius); border:1px solid var(--border); background:var(--surface); color:var(--text); font:600 .95rem var(--font-body); text-decoration:none; cursor:pointer; transition:transform .15s var(--ease), background .2s, opacity .2s, box-shadow .2s; white-space:nowrap }
.btn:hover { transform:translateY(-1px) }
.btn:active { transform:none }
.btn .i { width:18px; height:18px }
.btn-primary { background:var(--primary); border-color:var(--primary); color:var(--primary-text) }
.btn-primary:hover { box-shadow:0 8px 24px color-mix(in srgb, var(--primary) 30%, transparent) }
.btn-lg { min-height:54px; padding:0 30px; font-size:1rem }
.btn-sm { min-height:36px; padding:0 14px; font-size:.85rem }
.btn.block { width:100% }
.btn-danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, var(--border)) }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none }
.link { background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:.875rem; text-decoration:underline; cursor:pointer }
.grow { flex:1 }
label { display:grid; gap:6px; align-content:start; font-size:.9rem; font-weight:500 }
label small { color:var(--muted); font-weight:400 }
.opt { color:var(--muted); font-weight:400 }
input, select, textarea { width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--border); border-radius:min(var(--radius), 12px); background:var(--surface); color:var(--text); font:16px var(--font-body); transition:border-color .15s, box-shadow .15s }
textarea { min-height:100px }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--text); box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent) }
input[aria-invalid], select[aria-invalid] { border-color:var(--bad) }
input[type=checkbox] { width:18px; min-height:18px; height:18px; accent-color:var(--primary) }
.check { display:flex; gap:10px; align-items:flex-start; font-weight:400 }
.check input { margin-top:2px }
.field-error { color:var(--bad) !important; font-weight:500 }
.stack { display:grid; gap:16px } .stack-lg { display:grid; gap:22px }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:560px) { .row2 { grid-template-columns:1fr } }
.hp { position:absolute; left:-9999px }
.inline { display:inline }
.inline-form { display:flex; gap:10px; flex-wrap:wrap }
.inline-form input { flex:1; min-width:160px }
.meter { height:4px; background:var(--border); border-radius:4px; overflow:hidden }
.meter span { display:block; height:100%; width:0; background:var(--bad); transition:width .25s, background .25s }
.meter span[data-level=ok] { background:#d97706 } .meter span[data-level=strong] { background:var(--ok) }

/* Notices */
.notice { background:color-mix(in srgb, var(--accent) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding:12px 16px; border-radius:min(var(--radius), 12px); margin:0 0 18px; font-size:.95rem }
.alert { background:color-mix(in srgb, var(--bad) 8%, var(--surface)); color:var(--bad); padding:12px 14px; border-radius:10px; font-size:.92rem }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:99; background:var(--text); color:var(--bg); padding:13px 20px; border-radius:12px; font-weight:500; box-shadow:0 16px 40px rgb(0 0 0 / .22); animation:rise .35s var(--ease); transition:opacity .4s, transform .4s; max-width:calc(100% - 32px) }
.toast-error { background:var(--bad); color:#fff }
.toast.hide { opacity:0; transform:translate(-50%, 12px); pointer-events:none }
@keyframes rise { from { opacity:0; transform:translate(-50%, 12px) } }
main { min-height:60vh }
.empty { text-align:center; padding:72px 0; color:var(--muted); display:grid; justify-items:center; gap:10px }
.empty p { margin:0 }


/* Extra buttons */
.btn { text-transform:var(--btn-case); letter-spacing:var(--btn-track) }
.btn-ghost { background:transparent; color:inherit; border:1.5px solid currentColor }
.btn-ghost:hover { background:color-mix(in srgb, currentColor 10%, transparent) }
.btn-invert { background:var(--stext, var(--primary-text)); color:var(--sbg, var(--primary)); border-color:transparent }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.btn-row.center { justify-content:center }

/* ── Page-builder sections ── */
.blk { --sbg:var(--bg); --stext:var(--text); --smuted:var(--muted); --sline:var(--border); background:var(--sbg); color:var(--stext); position:relative }
.s-alt { --sbg:var(--alt-bg) }
.s-surface { --sbg:var(--surface) }
.s-primary { --sbg:var(--primary); --stext:var(--primary-text) }
.s-accent { --sbg:var(--accent); --stext:var(--accent-text) }
.s-dark { --sbg:var(--dark-bg); --stext:var(--dark-text) }
.s-primary, .s-accent, .s-dark, .s-custom { --smuted:color-mix(in srgb, var(--stext) 72%, transparent); --sline:color-mix(in srgb, var(--stext) 18%, transparent) }
.s-primary .btn-primary, .s-dark .btn-primary, .s-accent .btn-primary, .s-custom .btn-primary { background:var(--stext); color:var(--sbg); border-color:var(--stext) }
.blk .muted, .blk .sec-text { color:var(--smuted) }
.pt-none { padding-top:0 } .pt-s { padding-top:22px } .pt-m { padding-top:clamp(32px, 5vw, 56px) } .pt-l { padding-top:clamp(52px, 8vw, 104px) } .pt-xl { padding-top:clamp(76px, 12vw, 168px) }
.pb-none { padding-bottom:0 } .pb-s { padding-bottom:22px } .pb-m { padding-bottom:clamp(32px, 5vw, 56px) } .pb-l { padding-bottom:clamp(52px, 8vw, 104px) } .pb-xl { padding-bottom:clamp(76px, 12vw, 168px) }
.blk-round { margin:12px var(--gutter); border-radius:calc(var(--radius) * 1.6); overflow:hidden }
.blk.has-bg { isolation:isolate }
.blk-bg { position:absolute; inset:0; z-index:-1; overflow:hidden }
.blk-bg img { width:100%; height:100%; object-fit:cover }
.eyebrow { font:700 .78rem/1.2 var(--font-body); text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin:0 0 14px }
.s-primary .eyebrow, .s-accent .eyebrow, .s-dark .eyebrow, .tone-light .eyebrow { color:inherit; opacity:.85 }
.sec-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:clamp(22px, 3vw, 40px) }
.sec-head.center { justify-content:center; text-align:center }
.sec-head.center > div { max-width:760px }
.sec-title { margin:0 0 .35em }
.size-m { font-size:calc(clamp(1.5rem, 2.6vw, 2.1rem) * var(--h-scale)) }
.size-l { font-size:calc(clamp(1.9rem, 4vw, 3.2rem) * var(--h-scale)) }
.size-xl { font-size:calc(clamp(2.5rem, 6.5vw, 5.4rem) * var(--h-scale)) }
.size-xxl { font-size:calc(clamp(3rem, 10vw, 8.5rem) * var(--h-scale)); line-height:.92 }
.sec-text { font-size:1.08rem; max-width:62ch; margin:0 }
.sec-head.center .sec-text { margin-inline:auto }
.more { display:inline-flex; gap:6px; align-items:center; text-decoration:none; font-weight:700; font-size:.92rem; white-space:nowrap; text-transform:var(--btn-case); letter-spacing:var(--btn-track) }
.more .i { width:16px; transition:transform .2s }
.more:hover .i { transform:translateX(3px) }
.ph { width:100%; height:100%; min-height:120px; display:grid; place-items:center; color:var(--muted); background:linear-gradient(140deg, var(--surface), color-mix(in srgb, var(--border) 70%, var(--surface))) }
.ph .i { width:34px; height:34px; opacity:.5 }
.r-square { aspect-ratio:1 } .r-portrait { aspect-ratio:4/5 } .r-landscape { aspect-ratio:4/3 } .r-wide { aspect-ratio:16/9 }
:is(.r-square, .r-portrait, .r-landscape, .r-wide) > :is(img, video, .ph) { width:100%; height:100%; object-fit:cover }

/* Entrance animations (only for sections below the fold, so nothing flashes) */
.anims [data-anim].anim-wait { opacity:0; transition:opacity .9s var(--ease), transform .9s var(--ease) }
.anims [data-anim="fade-up"].anim-wait { transform:translateY(36px) }
.anims [data-anim="zoom"].anim-wait { transform:scale(.96) }
.anims [data-anim].anim-wait.anim-in { opacity:1; transform:none }

/* Hero + slideshow */
.hero, .slide { position:relative; display:grid; overflow:hidden; isolation:isolate }
.h-small { min-height:clamp(280px, 40vh, 420px) } .h-medium { min-height:clamp(400px, 62vh, 640px) } .h-large { min-height:clamp(500px, 82vh, 880px) } .h-full { min-height:100svh }
.hero-media { position:absolute; inset:0; z-index:-1 }
.hero-media img, .hero-media video { width:100%; height:100%; object-fit:cover }
.hero-media .shade { position:absolute; inset:0; background:#000 }
.tone-light { color:#fff } .tone-light .hero-sub, .tone-light .sec-text, .tone-light .muted { color:rgb(255 255 255 / .86) }
.tone-dark { color:#111 }
.hero-inner { display:flex; flex-direction:column; gap:18px; padding-block:clamp(56px, 9vw, 120px); position:relative }
.hv-top .hero-inner { justify-content:flex-start } .hv-center .hero-inner { justify-content:center } .hv-bottom .hero-inner { justify-content:flex-end }
.ha-center .hero-inner { align-items:center; text-align:center } .ha-right .hero-inner { align-items:flex-end; text-align:right } .ha-left .hero-inner { align-items:flex-start }
.hero-title { margin:0; max-width:16ch } .ha-center .hero-title { max-width:18ch }
.hero-sub { font-size:clamp(1.05rem, 1.5vw, 1.3rem); max-width:52ch; margin:0; color:var(--smuted) }
.hero .eyebrow, .slide .eyebrow { margin:0 }
.hero-badges { list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:12px 0 0; font-weight:600; font-size:.92rem }
.hero-badges li { display:flex; gap:8px; align-items:center }
.hero-badges .i { width:22px; height:22px; padding:4px; border-radius:50%; background:color-mix(in srgb, currentColor 14%, transparent); box-sizing:content-box }
.hero-note { margin:4px 0 0; font-size:.88rem; opacity:.85 }
.has-media .btn-ghost { color:#fff }
.slides { position:relative; display:grid }
.slide { grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .8s var(--ease), visibility .8s; min-height:inherit }
.slide.on { opacity:1; visibility:visible }
.slide-nav { position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; align-items:center; gap:14px; z-index:3; color:#fff }
.slide-arrow { width:42px; height:42px; border-radius:50%; border:1px solid rgb(255 255 255 / .5); background:rgb(0 0 0 / .2); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px) }
.dots { display:flex; gap:8px }
.dot { width:9px; height:9px; border-radius:99px; border:0; background:rgb(255 255 255 / .5); cursor:pointer; transition:width .3s, background .3s; padding:0 }
.dot.on { width:28px; background:#fff }

/* Marquee */
.marquee { overflow:hidden; white-space:nowrap }
.mq-track { display:flex; width:max-content; animation:mq var(--mq-dur, 35s) linear infinite }
.mq-group { display:flex; align-items:center; flex:none; gap:clamp(18px, 3vw, 40px); padding-right:clamp(18px, 3vw, 40px) }
@keyframes mq { to { transform:translateX(-33.3333%) } }
.mq-dir-right .mq-track { animation-direction:reverse }
.mq-slow { --mq-dur:60s } .mq-normal { --mq-dur:36s } .mq-fast { --mq-dur:18s }
.marquee:hover .mq-track { animation-play-state:paused }
.mq-item { font-weight:700 }
.mq-hfont .mq-item { font-family:var(--font-heading); font-weight:var(--h-weight); text-transform:var(--h-case); letter-spacing:var(--h-track) }
.mq-s { font-size:.9rem } .mq-m { font-size:clamp(1.1rem, 2vw, 1.5rem) } .mq-l { font-size:clamp(1.6rem, 3.6vw, 2.8rem) } .mq-xl { font-size:clamp(2.4rem, 7vw, 5.8rem) }
.mq-sep { opacity:.55; font-size:.7em }

/* Logos */
.logos-title { text-align:center; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--smuted); margin:0 0 22px }
.logos { overflow:hidden }
.logos-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(22px, 4vw, 56px) }
.logos-marquee .mq-track { --mq-dur:45s }
.logos-marquee .mq-group { gap:clamp(36px, 6vw, 80px); padding-right:clamp(36px, 6vw, 80px) }
.logo-item img { height:var(--logo-size); width:auto; max-width:none }
.logos.grey .logo-item img { filter:grayscale(1); opacity:.7; transition:filter .3s, opacity .3s }
.logos.grey .logo-item:hover img { filter:none; opacity:1 }
.s-dark .logos.grey .logo-item img, .s-primary .logos.grey .logo-item img { filter:grayscale(1) brightness(10); opacity:.75 }

/* Grids & carousels */
.grid { display:grid; gap:clamp(14px, 2.2vw, 28px) }
.cols-1 { grid-template-columns:1fr } .cols-2 { grid-template-columns:repeat(2, 1fr) } .cols-3 { grid-template-columns:repeat(3, 1fr) }
.cols-4 { grid-template-columns:repeat(4, 1fr) } .cols-5 { grid-template-columns:repeat(5, 1fr) } .cols-6 { grid-template-columns:repeat(6, 1fr) }
@media (max-width:1000px) { .grid.cols-4, .grid.cols-5, .grid.cols-6 { grid-template-columns:repeat(3, 1fr) } }
@media (max-width:700px) { .grid.cols-3, .grid.cols-4, .grid.cols-5, .grid.cols-6 { grid-template-columns:repeat(2, 1fr) } .grid.cols-2.mobile-1, .features.grid, .stats.grid { grid-template-columns:1fr 1fr } }
@media (max-width:480px) { .features.grid, .fm-items.grid { grid-template-columns:1fr } }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--n) - 1) * 24px) / var(--n)); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; --n:4 }
.rail::-webkit-scrollbar { display:none }
.rail > * { scroll-snap-align:start }
.rail.cols-1 { --n:1 } .rail.cols-2 { --n:2 } .rail.cols-3 { --n:3 } .rail.cols-4 { --n:4 } .rail.cols-5 { --n:5 } .rail.cols-6 { --n:6 }
@media (max-width:1000px) { .rail { --n:2.4 !important } } @media (max-width:600px) { .rail { --n:1.3 !important; gap:14px } }
.rail-nav { display:flex; gap:8px }
.rail-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--sline); background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; transition:background .2s }
.rail-btn:hover { background:var(--stext); color:var(--sbg) }

/* Product cards */
.card { display:grid; grid-template-rows:auto 1fr; min-width:0; position:relative }
.card-media { grid-area:1/1; position:relative; aspect-ratio:var(--card-ratio); border-radius:var(--radius); overflow:hidden; background:var(--surface); display:block }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.card:hover .card-media img { transform:scale(1.05) }
.quick-add { grid-area:1/1; align-self:end; justify-self:end; margin:12px; z-index:2; opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s }
.card:hover .quick-add, .quick-add:focus-within { opacity:1; transform:none }
@media (hover:none) { .quick-add { opacity:1; transform:none } }
.quick-add .btn { box-shadow:0 8px 20px rgb(0 0 0 / .18) }
.quick-add .btn .i { width:16px; height:16px }
.tag { position:absolute; top:12px; left:12px; background:var(--surface); color:var(--text); border-radius:99px; padding:4px 11px; font-size:.75rem; font-weight:700; box-shadow:0 2px 10px rgb(0 0 0 / .08) }
.tag-sale { background:var(--accent); color:var(--accent-text) } .tag-muted { color:var(--muted) }
.card-body { padding:14px 2px 4px; display:grid; gap:3px; align-content:start }
.card-cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--smuted, var(--muted)) }
.card-body h3 { font:600 1rem/1.35 var(--font-body); letter-spacing:0; text-transform:none; margin:0 }
.card-body h3 a { text-decoration:none }
.card-body h3 a::after { content:""; position:absolute; inset:0; z-index:1 }
.price { font-weight:600; font-variant-numeric:tabular-nums }
.price s { color:var(--muted); font-weight:400; margin-left:6px }
.price.big { font-size:1.6rem; margin:6px 0 10px }
.cards-center .card-body { text-align:center; justify-items:center }
.cards-bordered .card { border:1px solid var(--sline, var(--border)); border-radius:var(--radius); padding:10px }
.cards-bordered .card-media { border-radius:calc(var(--radius) * .7) }
.cards-shadow .card { background:var(--surface); border-radius:var(--radius); padding:10px; box-shadow:0 10px 30px rgb(0 0 0 / .07) }
.cards-shadow .card-media { border-radius:calc(var(--radius) * .7) }
.cards-filled .card { background:var(--surface); border-radius:var(--radius); overflow:hidden }
.cards-filled .card-media { border-radius:0 }
.cards-filled .card-body { padding:16px 18px 20px }
.cards-bordered .card-body, .cards-shadow .card-body { padding:12px 8px 8px }
.save { display:inline-block; font-size:.8rem; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:3px 10px; border-radius:99px; vertical-align:middle; margin-left:6px }

.cat-card { position:relative; display:block; border-radius:var(--radius); overflow:hidden; text-decoration:none; background:var(--surface) }
.cat-card img, .cat-card .ph { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.cat-card:hover img { transform:scale(1.05) }
.cat-card span { position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-between; align-items:center; background:var(--surface); color:var(--text); padding:13px 16px; border-radius:min(var(--radius), 12px); font-weight:700; text-transform:var(--btn-case); letter-spacing:var(--btn-track) }
.cat-card .i { width:18px }

/* Text / split */
.rich.align-center { text-align:center } .rich.align-center .prose { margin-inline:auto } .rich.align-center .btn-row { justify-content:center }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 6vw, 96px); align-items:center }
.split.img-right .split-media { order:2 }
.split-media { border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.split-text { display:grid; gap:6px; justify-items:start }
@media (max-width:800px) { .split { grid-template-columns:1fr } .split.img-right .split-media { order:0 } }
.prose { max-width:68ch } .prose > :first-child { margin-top:0 } .prose > :last-child { margin-bottom:0 }
.prose h2, .prose h3, .prose h4 { margin:1.4em 0 .45em; font-size:1.4em }
.prose p, .prose ul, .prose ol { margin:0 0 1em }
.prose blockquote { margin:1em 0; padding-left:18px; border-left:3px solid var(--accent); color:var(--smuted) }
.prose a { color:var(--accent) }
.s-primary .prose a, .s-dark .prose a, .s-accent .prose a { color:inherit }

/* Features */
.feature h3 { font:700 1.06rem/1.3 var(--font-body); letter-spacing:0; text-transform:none; margin:14px 0 6px }
.feature p { margin:0; color:var(--smuted) }
.feature-icon { display:inline-grid; place-items:center; width:54px; height:54px; border-radius:min(var(--radius), 16px); background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent) }
.s-primary .feature-icon, .s-dark .feature-icon, .s-accent .feature-icon { background:color-mix(in srgb, var(--stext) 14%, transparent); color:inherit }
.feature-icon .i { width:26px; height:26px }
.feature-img img { width:64px; height:64px; object-fit:contain }
.fs-cards .feature { background:var(--surface); color:var(--text); border-radius:var(--radius); padding:clamp(20px, 3vw, 32px) }
.fs-cards .feature p { color:var(--muted) }
.fs-centered .feature { text-align:center } .fs-centered .feature-icon { margin-inline:auto }
.fmedia { position:relative; isolation:isolate; overflow:hidden }
.fmedia-inner { padding-block:clamp(60px, 9vw, 140px) }
.fm-items { margin-top:10px }
.fm-item { padding:22px; border-radius:var(--radius); background:color-mix(in srgb, currentColor 8%, transparent); backdrop-filter:blur(10px); border:1px solid color-mix(in srgb, currentColor 14%, transparent) }
.fm-item h3 { font:700 1.1rem/1.3 var(--font-body); letter-spacing:0; text-transform:none; margin:12px 0 6px }
.fm-item p { margin:0; opacity:.85 }
.fm-icon .i { width:32px; height:32px }

/* Image cards */
.icard { display:grid; text-decoration:none; color:inherit; position:relative; border-radius:var(--radius); overflow:hidden }
.icard-media { border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.icard-media img { transition:transform .8s var(--ease) }
a.icard:hover .icard-media img { transform:scale(1.05) }
.icard-body { padding:16px 2px 0; display:grid; gap:4px }
.icard-body .eyebrow { margin:0 }
.icard-body h3 { margin:0; font-size:calc(1.4rem * var(--h-scale)) }
.icard-body p { margin:0; color:var(--smuted) }
.ic-overlay .icard-media { grid-area:1/1 }
.ic-overlay .icard-body { grid-area:1/1; align-self:end; padding:22px; color:#fff; background:linear-gradient(transparent, rgb(0 0 0 / .65)); z-index:1 }
.ic-overlay .icard-body p, .ic-overlay .eyebrow { color:rgb(255 255 255 / .85) }

/* Stats */
.stat { display:grid; gap:4px; padding:10px 0 }
.stat strong { font:var(--h-weight) calc(clamp(2.8rem, 6.5vw, 5.4rem) * var(--h-scale))/1 var(--font-heading); letter-spacing:var(--h-track) }
.stat span { color:var(--smuted); font-weight:500 }
.stats.align-center .stat { text-align:center }

/* Comparison */
.cmp-wrap { overflow-x:auto; border-radius:var(--radius) }
.cmp-table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0; background:var(--surface); color:var(--text); border-radius:var(--radius); overflow:hidden }
.cmp-table th, .cmp-table td { padding:18px 16px; text-align:center; border-bottom:1px solid var(--border) }
.cmp-table tbody tr:last-child > * { border-bottom:0 }
.cmp-table tbody th { text-align:left; font-weight:600 }
.cmp-table thead th { font:var(--h-weight) 1.15rem/1.2 var(--font-heading); text-transform:var(--h-case); letter-spacing:var(--h-track); vertical-align:bottom }
.cmp-table .us { background:color-mix(in srgb, var(--accent) 10%, var(--surface)) }
.cmp-table thead .us { background:var(--accent); color:var(--accent-text) }
.cmp-table thead .us span { display:block }
.cmp-img { width:84px; height:84px; object-fit:contain; margin:0 auto 8px }
.cmp { display:inline-flex; flex-direction:column; align-items:center; gap:2px }
.cmp .i { width:28px; height:28px }
.cmp.yes { color:var(--ok) } .cmp.no { color:var(--bad) } .cmp.maybe { color:#d97706 }
.cmp-text { font-weight:600 }

/* Reviews */
.review { margin:0; background:var(--surface); color:var(--text); border-radius:var(--radius); padding:clamp(20px, 3vw, 30px); display:flex; flex-direction:column; gap:10px; border:1px solid var(--border) }
.review h3 { font:700 1.1rem/1.3 var(--font-body); letter-spacing:0; text-transform:none; margin:0 }
.review blockquote { margin:0; color:color-mix(in srgb, var(--text) 82%, transparent); flex:1 }
.review figcaption { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem }
.review figcaption span { display:grid }
.review-img { width:40px; height:40px; border-radius:50%; object-fit:cover }
.verified { font-style:normal; font-weight:500; font-size:.78rem; color:var(--ok); display:inline-flex; align-items:center; gap:4px }
.verified .i { width:14px; height:14px }
.stars { color:var(--star); letter-spacing:2px; font-size:1.05rem } .stars .off { color:color-mix(in srgb, var(--text) 18%, transparent) }

/* FAQ */
.faq-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); gap:clamp(24px, 6vw, 80px); align-items:start }
@media (max-width:860px) { .faq-layout { grid-template-columns:1fr } }
.faq details { border-bottom:1px solid var(--sline) }
.faq details:first-child { border-top:1px solid var(--sline) }
.faq summary { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:22px 0; cursor:pointer; font-weight:700; font-size:1.08rem; list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq-plus { width:18px; height:18px; position:relative; flex:none }
.faq-plus::before, .faq-plus::after { content:""; position:absolute; left:0; right:0; top:8px; height:2px; background:currentColor; transition:transform .3s var(--ease) }
.faq-plus::after { transform:rotate(90deg) }
.faq details[open] .faq-plus::after { transform:rotate(0) }
.faq .prose { padding:0 0 22px; color:var(--smuted) }

/* Gallery / CTA / newsletter / video */
.gallery figure { margin:0; border-radius:var(--radius); overflow:hidden }
.gallery img { width:100%; height:100%; object-fit:cover }
.gallery .r-natural img { height:auto }
.gallery figcaption { font-size:.85rem; color:var(--smuted); margin-top:6px }
.cta { position:relative; isolation:isolate; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:clamp(30px, 5.5vw, 72px); border-radius:calc(var(--radius) * 1.4) }
.cta h2 { font-size:calc(clamp(1.8rem, 4vw, 3.2rem) * var(--h-scale)); margin:0 0 8px }
.cta p { margin:0; opacity:.85; max-width:56ch }
.cta .eyebrow { color:inherit; opacity:.85 }
.cta-primary { background:var(--primary); color:var(--primary-text); --sbg:var(--primary); --stext:var(--primary-text) }
.cta-accent { background:var(--accent); color:var(--accent-text); --sbg:var(--accent); --stext:var(--accent-text) }
.cta-dark { background:var(--dark-bg); color:var(--dark-text); --sbg:var(--dark-bg); --stext:var(--dark-text) }
.cta-subtle { background:var(--surface); color:var(--text); border:1px solid var(--border); --sbg:var(--primary-text); --stext:var(--primary) }
.cta.has-media { color:#fff; --stext:#fff; --sbg:#111 }
.cta-center, .cta-tall { flex-direction:column; text-align:center; justify-content:center }
.cta-center p, .cta-tall p { margin-inline:auto }
.cta-tall { min-height:clamp(380px, 60vh, 620px) }
.nl { display:grid; gap:18px }
.nl-center { justify-items:center; text-align:center; max-width:640px; margin-inline:auto }
.nl-left { grid-template-columns:1fr 1fr; align-items:center; gap:clamp(20px, 5vw, 60px) }
@media (max-width:760px) { .nl-left { grid-template-columns:1fr } }
.nl-form { width:100%; display:grid; gap:8px }
.nl-field { display:flex; gap:8px; background:color-mix(in srgb, currentColor 6%, transparent); border:1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius:var(--btn-radius); padding:5px }
.nl-field input { border:0; background:transparent; min-height:44px; color:inherit; flex:1; min-width:0; box-shadow:none !important; border-radius:var(--btn-radius) }
.nl-field input::placeholder { color:inherit; opacity:.6 }
.nl-field .btn { min-height:44px }
.nl-consent { font-size:.75rem; opacity:.7; margin:0 }
.nl-consent a { color:inherit }
.nl-msg { margin:0; font-weight:600; font-size:.9rem }
.video { position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#0b0f17; color:#fff; text-decoration:none }
.video > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75 }
.video iframe, .video video { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover }
.play { z-index:1; width:80px; height:80px; border-radius:50%; background:rgb(255 255 255 / .18); backdrop-filter:blur(6px); position:relative; transition:transform .2s }
.play::after { content:""; position:absolute; left:32px; top:25px; border:15px solid transparent; border-left:24px solid #fff; border-right:0 }
.video:hover .play { transform:scale(1.08) }
.contact-list { list-style:none; padding:0; display:grid; gap:12px }
.contact-list li { display:flex; gap:12px; align-items:center }
.spacer-small { height:24px } .spacer-medium { height:56px } .spacer-large { height:110px }
.spacer { display:flex; align-items:center } .spacer hr { flex:1; border:0; border-top:1px solid var(--sline) }

/* ── Footer ── */
.site-footer { background:var(--footer-bg); color:var(--footer-text); margin-top:0; --sline:color-mix(in srgb, var(--footer-text) 16%, transparent) }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(auto-fit, minmax(150px, 1fr)); gap:clamp(24px, 4vw, 56px); padding:clamp(48px, 7vw, 88px) 0 40px }
.footer-grid:has(.footer-nl) { grid-template-columns:1.4fr repeat(var(--fcols, 2), minmax(130px, 1fr)) 1.5fr }
.footer-grid.fc-2 { --fcols:0 } .footer-grid.fc-3 { --fcols:1 } .footer-grid.fc-4 { --fcols:2 } .footer-grid.fc-5 { --fcols:3 } .footer-grid.fc-6 { --fcols:4 } .footer-grid.fc-7 { --fcols:5 } .footer-grid.fc-8 { --fcols:6 }
@media (max-width:1000px) { .footer-grid, .footer-grid:has(.footer-nl) { grid-template-columns:1fr 1fr } .footer-brand, .footer-nl { grid-column:1 / -1 } }
.footer-brand { display:grid; gap:12px; align-content:start }
.footer-brand .logo { height:calc(var(--logo-h) * 1.1); width:auto }
.f-name { font:var(--h-weight) 1.6rem/1 var(--font-heading); text-transform:var(--h-case); letter-spacing:var(--h-track) }
.footer-brand p { margin:0; opacity:.75; max-width:40ch }
.f-contact { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:.92rem }
.f-contact li { display:flex; gap:10px; align-items:center } .f-contact .i { width:17px; opacity:.7 }
.f-contact a { text-decoration:none } .f-contact a:hover { text-decoration:underline }
.footer-links { display:grid; gap:11px; align-content:start; font-size:.94rem }
.footer-links strong, .footer-nl strong { font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; opacity:.6; margin-bottom:4px }
.footer-links a { text-decoration:none; opacity:.9 } .footer-links a:hover { opacity:1; text-decoration:underline }
.footer-nl { display:grid; gap:10px; align-content:start }
.footer-nl strong { opacity:1; font-size:.9rem }
.footer-nl p { margin:0; opacity:.75; font-size:.92rem }
.socials { display:flex; gap:4px; margin-left:-10px }
.socials a { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; transition:background .2s }
.socials a:hover { background:color-mix(in srgb, currentColor 10%, transparent) }
.f-bigname { font:var(--h-weight) min(15rem, calc((100vw - var(--gutter) * 2) / (var(--bn) * .72)))/.85 var(--font-heading); text-transform:var(--h-case); letter-spacing:-.04em; text-align:center; opacity:.95; padding:10px 0 30px; white-space:nowrap; overflow:hidden }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:20px 0 30px; border-top:1px solid var(--sline); font-size:.85rem; opacity:.85 }
.f-bottom-links { display:flex; gap:18px; flex-wrap:wrap } .f-bottom-links a { text-decoration:none } .f-bottom-links a:hover { text-decoration:underline }
.payments { display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.pay { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px; border-radius:5px; border:1px solid var(--sline); font-size:.72rem; font-weight:800; letter-spacing:.04em }
.pay .i { width:12px; height:12px }

/* Builder preview helpers */
.is-preview [data-sid] { cursor:pointer }
.is-preview [data-sid]:hover { outline:2px dashed rgb(99 102 241 / .6); outline-offset:-2px }
.is-preview [data-sid].sel { outline:3px solid #6366f1; outline-offset:-3px }
.pv-hidden, .pv-empty { padding:18px; text-align:center; font:600 13px system-ui; color:#6366f1; background:repeating-linear-gradient(45deg, #eef2ff, #eef2ff 10px, #e0e7ff 10px, #e0e7ff 20px) }
.pv-hidden { opacity:.7 }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important } .anims [data-anim].anim-wait { opacity:1; transform:none } }
/* Shop */
.crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:.85rem; color:var(--muted); padding:22px 0 0 }
.crumbs a { text-decoration:none } .crumbs a:hover { color:var(--text) }
.shop { padding-bottom:80px }
.shop-head { padding:28px 0 18px }
.shop-head h1 { font-size:clamp(2.2rem, 5vw, 3.6rem); margin:0 }
.lead { color:var(--muted); max-width:62ch; font-size:1.05rem }
.shop-bar { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:18px }
.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none }
.chip { padding:8px 16px; border-radius:99px; border:1px solid var(--border); text-decoration:none; font-size:.9rem; font-weight:500; white-space:nowrap; background:var(--surface); transition:background .2s }
.chip:hover { border-color:var(--text) }
.chip.on { background:var(--text); color:var(--bg); border-color:var(--text) }
.sort select { min-height:40px; padding:6px 36px 6px 14px; border-radius:99px; font-size:.9rem; width:auto }
.pager { display:flex; justify-content:center; gap:6px; margin-top:44px }
.pager a { min-width:42px; height:42px; display:grid; place-items:center; border-radius:99px; border:1px solid var(--border); text-decoration:none }
.pager a[aria-current] { background:var(--text); color:var(--bg); border-color:var(--text) }

/* Product */
.product { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:start; padding:26px 0 40px }
.product-media img { width:100%; border-radius:var(--radius); border:1px solid var(--border); position:sticky; top:96px }
.product-info h1 { font-size:clamp(2rem, 4vw, 3rem); margin:4px 0 4px }
.eyebrow { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); text-decoration:none; font-weight:600 }
.stock-note { display:flex; align-items:center; gap:8px; color:var(--muted); margin:0 0 22px; font-size:.95rem }
.stock-note .i { width:18px }
.low { color:var(--accent); display:inline-flex; gap:6px; align-items:center; font-weight:600 }
.buy { display:flex; gap:12px; flex-wrap:wrap }
.qty { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--btn-radius); background:var(--surface); height:54px }
.qty input { width:46px; min-height:0; height:100%; border:0; text-align:center; background:none; padding:0; -moz-appearance:textfield; font-weight:600 }
.qty input::-webkit-inner-spin-button { -webkit-appearance:none }
.qty-btn { width:44px; height:100%; border:0; background:none; cursor:pointer; color:var(--text); display:grid; place-items:center }
.qty-btn .i { width:16px }
.assure { list-style:none; padding:18px 0; margin:22px 0 0; border-top:1px solid var(--border); display:grid; gap:10px; font-size:.9rem; color:var(--muted) }
.assure li { display:flex; gap:10px; align-items:center } .assure .i { width:18px }
.description { padding-top:20px; border-top:1px solid var(--border) }
@media (max-width:860px) { .product { grid-template-columns:1fr } .product-media img { position:static } }

/* Cart & checkout */
.page-title { font-size:clamp(2rem, 4vw, 2.8rem); margin:28px 0 24px }
.narrow-wide { max-width:1080px }
.cart, .checkout { display:grid; grid-template-columns:1fr 370px; gap:clamp(24px, 4vw, 48px); align-items:start; padding-bottom:80px }
.line { display:grid; grid-template-columns:88px 1fr auto 100px; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--border) }
.line-img { width:88px; aspect-ratio:1; border-radius:min(var(--radius), 12px); overflow:hidden; border:1px solid var(--border); display:block }
.line-img img { width:100%; height:100%; object-fit:cover }
.line-info { display:grid; gap:2px; justify-items:start }
.line-info a { font-weight:600; text-decoration:none }
.line-total { text-align:right; font-variant-numeric:tabular-nums }
.qty-input { width:72px; min-height:42px; text-align:center }
.summary { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:sticky; top:96px; display:grid; gap:4px }
.summary h2 { font:600 1.1rem var(--font-body); letter-spacing:0; margin:0 0 10px }
.summary .row { display:flex; justify-content:space-between; color:var(--muted); padding:5px 0 }
.summary .total { color:var(--text); font-weight:700; font-size:1.15rem; border-top:1px solid var(--border); margin:8px 0 14px; padding-top:14px }
.mini { list-style:none; padding:0 0 12px; margin:0 0 8px; border-bottom:1px solid var(--border); display:grid; gap:8px; font-size:.92rem }
.mini li { display:flex; justify-content:space-between; gap:12px }
.freebar { height:6px; background:var(--border); border-radius:6px; overflow:hidden; margin-top:6px }
.freebar span { display:block; height:100%; width:var(--p); background:var(--accent) }
.secure { display:flex; justify-content:center; align-items:center; gap:6px; color:var(--muted); margin:10px 0 0 }
.secure .i { width:15px }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(18px, 3vw, 28px) }
.panel h2 { font:600 1.1rem var(--font-body); letter-spacing:0; margin:0 0 16px }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px }
.panel-head h2 { margin:0 }
.panel.danger { border-color:color-mix(in srgb, var(--bad) 25%, var(--border)) }
@media (max-width:900px) { .cart, .checkout { grid-template-columns:1fr } .summary { position:static } .checkout .summary { order:-1 } .line { grid-template-columns:64px 1fr auto } .line-img { width:64px } .line-total { grid-column:2 / -1; text-align:left } }

.center-block { padding:70px 0 }
.status { text-align:center; display:grid; justify-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(28px, 5vw, 48px) }
.status h1 { font-size:2rem; margin:0 }
.status.ok { text-align:left; display:flex; gap:18px; align-items:center; justify-content:flex-start; margin-bottom:16px }
.status.ok .i { color:var(--ok); opacity:1 } .status.ok h1 { font-size:1.6rem }
.status.bad { border-color:color-mix(in srgb, var(--bad) 30%, var(--border)) }
.spinner { width:34px; height:34px; border:3px solid var(--border); border-top-color:var(--text); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:10px }
@keyframes spin { to { transform:rotate(360deg) } }
.row-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px }

/* Auth */
.auth-wrap { display:grid; place-items:center; padding:clamp(28px, 6vw, 72px) 16px }
.auth-card { width:min(440px, 100%); background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--radius) + 4px); padding:clamp(24px, 5vw, 40px); display:grid; gap:14px; box-shadow:0 24px 60px rgb(0 0 0 / .06) }
.auth-card h1 { font-size:1.9rem; margin:0 }
.auth-card > p { margin:0 }
.label-row { display:flex; justify-content:space-between }
.label-row a { font-weight:400; color:var(--muted); font-size:.85rem }
.social-btns { display:grid; gap:10px }
.btn-social { width:100%; background:var(--surface); border-color:var(--border); border-radius:12px }
.btn-apple { background:#000; color:#fff; border-color:#000 }
.or { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.85rem }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--border) }
.success-box { display:flex; gap:12px; align-items:flex-start; background:color-mix(in srgb, var(--ok) 8%, var(--surface)); padding:14px; border-radius:12px }
.success-box p { margin:0 }

/* Account */
.acct { display:grid; grid-template-columns:250px 1fr; gap:clamp(20px, 4vw, 48px); padding:36px 0 80px; align-items:start }
.acct-nav { position:sticky; top:96px; display:grid; gap:16px }
.acct-hello { display:flex; gap:12px; align-items:center }
.acct-hello div { display:grid; min-width:0 } .acct-hello span.small { overflow:hidden; text-overflow:ellipsis }
.avatar { width:44px; height:44px; border-radius:50%; background:var(--primary); color:var(--primary-text); display:grid; place-items:center; font-weight:700; flex:none }
.acct-nav nav { display:grid; gap:2px }
.acct-nav nav a { padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--muted); font-weight:500 }
.acct-nav nav a:hover { background:var(--surface) }
.acct-nav nav a[aria-current] { background:var(--surface); color:var(--text); box-shadow:inset 3px 0 0 var(--accent) }
.acct-nav .link { display:inline-flex; gap:6px; align-items:center; padding-left:12px } .acct-nav .link .i { width:16px }
.acct-main { display:grid; gap:20px; min-width:0 }
.acct-main h1 { font-size:2rem; margin:0 }
.back { display:inline-flex; gap:6px; align-items:center; color:var(--muted); text-decoration:none; font-size:.9rem }
.back .i { width:16px }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:grid; gap:6px; text-decoration:none; transition:border-color .2s }
.tile:hover { border-color:var(--text) }
@media (max-width:820px) { .acct { grid-template-columns:1fr } .acct-nav { position:static } .acct-nav nav { display:flex; overflow-x:auto } .acct-nav nav a { white-space:nowrap } .tiles { grid-template-columns:1fr } }
.table-wrap { overflow-x:auto }
.table { width:100%; border-collapse:collapse; font-size:.93rem }
.table th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border) }
.table td { padding:12px 10px; border-bottom:1px solid var(--border) }
.table tr:last-child td { border-bottom:0 }
.table .num, .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.lines .sub td { color:var(--muted) } .lines .total td { font-weight:700 }
.pill { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:99px; font-size:.75rem; font-weight:700; background:color-mix(in srgb, var(--text) 8%, transparent); white-space:nowrap }
.pill-paid, .pill-delivered { background:#dcfce7; color:#166534 } .pill-pending, .pill-unfulfilled { background:#fef3c7; color:#92400e }
.pill-failed, .pill-expired { background:#fee2e2; color:#991b1b } .pill-processing, .pill-shipped { background:#e0e7ff; color:#3730a3 }
.downloads { list-style:none; padding:0; margin:0 0 10px; display:grid; gap:10px }
.downloads li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px }
.downloads li > span { display:flex; gap:8px; align-items:center }
.track { list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); padding:0; margin:6px 0 4px; counter-reset:s }
.track li { position:relative; padding-top:22px; font-size:.82rem; color:var(--muted); text-align:center }
.track li span { position:absolute; top:0; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--border); z-index:1 }
.track li::before { content:""; position:absolute; top:6px; left:-50%; right:50%; height:2px; background:var(--border) }
.track li:first-child::before { display:none }
.track li.done { color:var(--text); font-weight:600 } .track li.done span, .track li.done::before { background:var(--ok) }
.devices { list-style:none; padding:0; margin:0; display:grid; gap:4px }
.devices li { display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border) }
.devices li:last-child { border:0 } .devices li > div { flex:1 } .devices .i { color:var(--muted) }
.narrow-form { max-width:420px }

/* Error */
.error-page h1 { color:var(--text); font-size:2rem; margin:0 }
.big-num { font:600 clamp(5rem, 14vw, 9rem)/1 var(--font-heading); color:color-mix(in srgb, var(--text) 12%, transparent); margin:0 }


/* ════ Version 3 ════ */
/* Stars */
.rstars { position:relative; display:inline-block; color:color-mix(in srgb, var(--text) 18%, transparent); letter-spacing:1px; line-height:1; font-size:.95rem; white-space:nowrap }
.rstars .rs-on { position:absolute; inset:0 auto 0 0; overflow:hidden; color:var(--star) }
.rstars.big { font-size:1.4rem }
.rating-link { display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-size:.9rem; margin:2px 0 10px }
.rating-link:hover span { text-decoration:underline }

/* Product cards: wishlist, rating, second image, "From" */
.card-wish { grid-area:1/1; justify-self:end; align-self:start; margin:8px; z-index:3 }
.wish-btn { background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--text); width:38px; height:38px; backdrop-filter:blur(6px) }
.wish-btn .i { width:19px; height:19px; transition:transform .2s var(--ease), fill .2s }
.wish-btn:hover .i { transform:scale(1.12) }
.wish-btn.on { color:#e11d48 } .wish-btn.on .i { fill:currentColor }
.card-rating { display:flex; gap:6px; align-items:center; margin:2px 0 4px }
.price .from { font-weight:400; color:var(--muted); font-size:.85em }
.card-media.has-alt .alt-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease) }
@media (hover:hover) { .card:hover .card-media.has-alt .alt-img { opacity:1 } }
a.quick-add { text-decoration:none }

/* Header: live search + wishlist */
.search .suggest { position:absolute; top:calc(100% + 8px); right:0; width:min(380px, 92vw); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:min(var(--radius), 16px); box-shadow:0 24px 50px rgb(0 0 0 / .16); padding:6px; z-index:90; display:grid; max-height:70vh; overflow:auto }
.suggest a { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:7px 8px; border-radius:10px; text-decoration:none; font-size:.92rem }
.suggest a:hover, .suggest a:focus { background:var(--alt-bg); outline:none }
.sg-img { width:44px; height:44px; border-radius:8px; overflow:hidden; background:var(--alt-bg) } .sg-img img { width:100%; height:100%; object-fit:cover }
.sg-price { color:var(--muted); font-size:.85rem } .sg-head { margin:8px 8px 2px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.suggest a:not(:has(.sg-img)) { grid-template-columns:1fr }
.sg-all { font-weight:600 } .sg-none { margin:10px; color:var(--muted); font-size:.9rem }
.search-big { max-width:640px; margin:0 0 28px } .search-big input, .search-big input:focus { width:100%; height:54px; font-size:1.05rem; padding-left:46px }
.search-big .i { left:16px }
.wish-link .badge { background:#e11d48 }

/* Shop: filters */
.shop-layout { display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; margin-top:20px }
.filters > summary { display:none }
.filter-form { display:grid; gap:20px; position:sticky; top:100px }
.filter-form fieldset { border:0; padding:0; margin:0; display:grid; gap:8px }
.filter-form legend { font-weight:600; margin-bottom:8px; font-size:.95rem }
.price-range { display:flex; gap:8px; align-items:center } .price-range input { width:100%; min-width:0 }
.badge-n { display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:99px; background:var(--primary); color:var(--primary-text); font-size:.72rem; padding:0 6px }
.shop-main { min-width:0 } .shop-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px }
.pager a[rel] { font-size:1.2rem }
@media (max-width:900px) {
  .shop-layout { grid-template-columns:1fr; gap:12px }
  .filters > summary { display:inline-flex; list-style:none } .filters > summary::-webkit-details-marker { display:none }
  .filters:not([open]) .filter-form { display:none }
  .filter-form { position:static; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-top:10px }
  .shop-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}

/* Product page */
.product-media { position:sticky; top:96px; display:grid; gap:12px; min-width:0 }
.product-media img { position:static; top:auto }
.gal-main img { width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface) }
.gal-strip { display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px }
.gal-thumb { flex:none; width:76px; height:76px; padding:0; border:2px solid transparent; border-radius:min(var(--radius), 12px); overflow:hidden; cursor:pointer; background:var(--surface); opacity:.75; transition:opacity .2s, border-color .2s }
.gal-thumb img { width:100%; height:100%; object-fit:cover; border:0; border-radius:0 }
.gal-thumb.on, .gal-thumb:hover { opacity:1; border-color:var(--text) }
.p-summary { font-size:1.05rem; color:color-mix(in srgb, var(--text) 80%, var(--muted)); margin:0 0 18px }
.opt-group { border:0; padding:0; margin:0 0 16px }
.opt-group legend { font-size:.92rem; margin-bottom:8px; color:var(--muted) } .opt-group legend strong { color:var(--text) }
.opt-pills { display:flex; flex-wrap:wrap; gap:8px }
.pill-opt { position:relative; cursor:pointer }
.pill-opt input { position:absolute; opacity:0; inset:0; cursor:pointer }
.pill-opt span { display:inline-flex; align-items:center; min-height:42px; min-width:48px; justify-content:center; padding:0 16px; border:1.5px solid var(--border); border-radius:min(var(--btn-radius), 12px); background:var(--surface); font-weight:500; font-size:.92rem; transition:border-color .15s, background .15s }
.pill-opt:hover span { border-color:var(--text) }
.pill-opt input:checked + span { border-color:var(--text); background:var(--text); color:var(--bg) }
.pill-opt input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px }
.pill-opt.na span { opacity:.45; text-decoration:line-through }
.buy-row { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap }
.buy-row .btn.grow { flex:1; min-width:180px }
.buy-row .wish-btn { width:52px; height:52px; border:1px solid var(--border); border-radius:var(--btn-radius) }
.stock-note .out { color:var(--bad); font-weight:600 } .stock-note.is-low { color:var(--accent); font-weight:600 }
.p-acc { margin-top:22px; border-top:1px solid var(--border) }
.p-acc details { border-bottom:1px solid var(--border) }
.p-acc summary { list-style:none; cursor:pointer; padding:16px 0; font-weight:600; display:flex; justify-content:space-between; align-items:center }
.p-acc summary::-webkit-details-marker { display:none }
.p-acc summary::after { content:"+"; font-size:1.3rem; font-weight:300; transition:transform .2s }
.p-acc details[open] summary::after { transform:rotate(45deg) }
.p-acc .prose { padding:0 0 18px }
.p-meta { margin-top:14px }
.share { display:flex; gap:6px; align-items:center; margin-top:14px; flex-wrap:wrap }
.share a { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:99px; border:1px solid var(--border); transition:background .2s }
.share a:hover { background:var(--alt-bg) } .share .i { width:17px; height:17px }

/* Reviews */
.reviews { border-top:1px solid var(--border); padding-top:40px }
.rv-layout { display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start }
.rv-summary { display:grid; gap:14px; position:sticky; top:100px }
.rv-avg { display:grid; gap:4px } .rv-avg strong { font:var(--h-weight) 3rem/1 var(--font-heading) }
.rv-hist { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.85rem }
.rv-hist li { display:grid; grid-template-columns:34px 1fr 28px; gap:8px; align-items:center }
.rv-hist .bar { height:8px; background:var(--alt-bg); border-radius:99px; overflow:hidden } .rv-hist .bar span { display:block; height:100%; background:var(--star); border-radius:99px }
.rv-write summary { list-style:none } .rv-write summary::-webkit-details-marker { display:none }
.rv-write form { margin-top:14px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius) }
.rv-list { display:grid; gap:18px }
.rv { padding-bottom:18px; border-bottom:1px solid var(--border) }
.rv header { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:6px }
.rv p { margin:0 0 6px }
.rv-reply { margin-top:10px; padding:12px 14px; background:var(--alt-bg); border-radius:min(var(--radius), 12px); font-size:.92rem }
.star-input { border:0; padding:0; margin:0; display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px }
.star-input legend { width:100%; margin-bottom:4px; font-weight:500 }
.star-input input { position:absolute; opacity:0; width:1px; height:1px }
.star-input label { font-size:1.9rem; line-height:1; color:color-mix(in srgb, var(--text) 18%, transparent); cursor:pointer; transition:color .15s }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color:var(--star) }
.star-input input:focus-visible + label { outline:2px solid var(--accent); border-radius:4px }
@media (max-width:900px) { .rv-layout { grid-template-columns:1fr } .rv-summary { position:static } }

/* Cart / checkout */
.sum-rows { display:grid; gap:4px }
.summary .row.disc, .dr-foot .row.disc { color:var(--ok) }
.row.disc .i { width:15px; height:15px; vertical-align:-2px }
.coupon { margin:4px 0 14px; font-size:.92rem } .coupon summary { cursor:pointer; color:var(--muted); display:inline-flex; gap:6px; align-items:center }
.coupon summary .i { width:16px; height:16px }
.coupon-form { display:flex; gap:8px; margin-top:10px } .coupon-form input { flex:1; min-width:0 }
.vat-note { margin:-6px 0 8px }
.step-n { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:99px; background:var(--text); color:var(--bg); font-size:.8rem; margin-right:6px; vertical-align:2px }
.ship-opts { display:grid; gap:8px }
.ship-opt { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px 16px; border:1.5px solid var(--border); border-radius:min(var(--radius), 14px); cursor:pointer; transition:border-color .15s, background .15s }
.ship-opt:has(input:checked) { border-color:var(--text); background:color-mix(in srgb, var(--text) 3%, transparent) }
.ship-opt input { margin:0; width:18px; height:18px; accent-color:var(--text) }
.so-main { display:grid; gap:2px } .so-price { font-weight:600 }
.mini li { align-items:center }
.mini-img { position:relative; width:52px; height:52px; flex:none; border-radius:10px; background:var(--alt-bg); border:1px solid var(--border) }
.mini-img img { width:100%; height:100%; object-fit:cover; border-radius:10px }
.mini-img em { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:99px; background:var(--muted); color:#fff; font:600 .72rem/20px var(--font-body); text-align:center; padding:0 5px }
.mini-name { flex:1; display:grid } .mini-name small { font-size:.8rem }
.notice-error { border-color:color-mix(in srgb, var(--bad) 40%, transparent); background:color-mix(in srgb, var(--bad) 7%, var(--surface)) }
.line-info .small:not(.muted) { color:var(--text) }

/* Popup, cookie banner, WhatsApp, back to top */
.popup { position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:16px; background:rgb(0 0 0 / 0); transition:background .25s }
.popup.open { background:rgb(0 0 0 / .5) }
.popup-card { position:relative; width:min(720px, 100%); background:var(--surface); color:var(--text); border-radius:calc(var(--radius) + 4px); overflow:hidden; display:grid; box-shadow:0 30px 80px rgb(0 0 0 / .35); transform:translateY(16px) scale(.98); opacity:0; transition:transform .3s var(--ease), opacity .3s }
.popup.open .popup-card { transform:none; opacity:1 }
.popup-card.has-img { grid-template-columns:1fr 1fr }
.popup-img img { width:100%; height:100%; object-fit:cover; min-height:260px }
.popup-body { padding:clamp(24px, 4vw, 40px); display:grid; gap:14px; align-content:center; text-align:center }
.popup-body h2 { font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 }
.popup-body p { margin:0; color:var(--muted) }
.popup-x { position:absolute; top:8px; right:8px; z-index:2; background:var(--surface) }
@media (max-width:640px) { .popup-card.has-img { grid-template-columns:1fr } .popup-img img { min-height:0; max-height:200px } }
.consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:140; max-width:560px; margin-inline:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 18px 50px rgb(0 0 0 / .2); padding:16px 18px; display:grid; gap:12px; font-size:.9rem }
.consent p { margin:0 } .consent .btn-row { justify-content:flex-end }
.wa-float { position:fixed; bottom:20px; z-index:120; width:56px; height:56px; border-radius:99px; background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgb(37 211 102 / .45); transition:transform .2s var(--ease) }
.wa-float .i { width:28px; height:28px } .wa-float:hover { transform:scale(1.08) }
.wa-right { right:20px } .wa-left { left:20px }
.to-top { position:fixed; bottom:20px; right:20px; z-index:110; width:46px; height:46px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 20px rgb(0 0 0 / .12) }
body:has(.wa-right) .to-top { bottom:86px }
.consent ~ .to-top, .consent ~ .wa-float { bottom:20px }

/* Blog */
.post-card { display:grid; gap:12px; align-content:start }
.pc-media { display:block; aspect-ratio:16 / 10; border-radius:var(--radius); overflow:hidden; background:var(--alt-bg) }
.pc-media img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.post-card:hover .pc-media img { transform:scale(1.04) }
.pc-body h3 { font-size:1.3rem; margin:2px 0 6px } .pc-body h3 a { text-decoration:none } .pc-body h3 a:hover { text-decoration:underline }
.pc-body p { margin:0; color:var(--muted); font-size:.95rem }
.pc-meta { margin:0 } .pc-cat { color:var(--accent); font-weight:600 }
.post-lead { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(20px, 4vw, 48px); align-items:center; margin:8px 0 48px }
.pl-media { aspect-ratio:16 / 10; border-radius:var(--radius); overflow:hidden; display:block; background:var(--alt-bg) } .pl-media img { width:100%; height:100%; object-fit:cover }
.pl-body h2 { font-size:clamp(1.8rem, 3.4vw, 2.8rem) } .pl-body h2 a { text-decoration:none }
.post { max-width:820px; padding-bottom:20px }
.post-head h1 { font-size:clamp(2.2rem, 5vw, 3.6rem); margin:6px 0 10px }
.post-hero { margin:24px 0 32px } .post-hero img { width:100%; border-radius:var(--radius) }
.post-body { max-width:none; font-size:1.08rem; line-height:1.75 }
.post-body img { border-radius:var(--radius); margin:8px 0 }
.prose figure { margin:24px 0 } .prose figcaption { color:var(--muted); font-size:.88rem; text-align:center; margin-top:6px }
.prose hr { border:0; border-top:1px solid var(--border); margin:2em 0 }
.prose code { background:var(--alt-bg); padding:.1em .35em; border-radius:4px; font-size:.9em }
.post-foot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-top:36px; padding-top:22px; border-top:1px solid var(--border) }
.tags { display:flex; gap:6px; flex-wrap:wrap }
.link-list { list-style:none; padding:0; display:grid; gap:8px }
@media (max-width:800px) { .post-lead { grid-template-columns:1fr } }

/* New sections */
.cform { display:grid; gap:clamp(24px, 4vw, 56px) } .cform.with-details { grid-template-columns:1.4fr 1fr }
.cform-side { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; align-self:start }
.cform form label { font-weight:500 }
.form-msg { padding:12px 14px; border-radius:min(var(--radius), 12px); margin:0 } .form-msg.ok { background:color-mix(in srgb, var(--ok) 10%, var(--surface)); color:var(--ok) } .form-msg.err { background:color-mix(in srgb, var(--bad) 8%, var(--surface)); color:var(--bad) }
@media (max-width:800px) { .cform.with-details { grid-template-columns:1fr } }
.map-wrap { display:grid; gap:24px } .map-wrap.with-text { grid-template-columns:2fr 1fr; align-items:center }
.map { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--alt-bg) }
.map iframe { width:100%; height:100%; border:0; display:block }
.map-small { height:280px } .map-medium { height:400px } .map-large { height:560px }
@media (max-width:800px) { .map-wrap.with-text { grid-template-columns:1fr } }
.countdown { text-align:center; display:grid; gap:20px }
.cd-units { display:flex; justify-content:center; gap:clamp(10px, 2.5vw, 24px) }
.cd-unit { display:grid; gap:4px; min-width:clamp(64px, 12vw, 120px); padding:clamp(12px, 2vw, 22px) 8px; border-radius:var(--radius); background:color-mix(in srgb, currentColor 8%, transparent) }
.cd-unit strong { font:var(--h-weight) clamp(2rem, 6vw, 4.2rem)/1 var(--font-heading); font-variant-numeric:tabular-nums }
.cd-unit span { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; opacity:.75 }
.cd-over { font-size:1.2rem; font-weight:600 }
.btn-row.center { justify-content:center }
.single-img { margin:0 auto } .si-narrow { max-width:620px } .si-medium { max-width:960px } .si-full { max-width:none }
.single-img img { width:100%; border-radius:var(--radius) } .si-full img { border-radius:0 }
.single-img.r-wide img { aspect-ratio:16 / 9; object-fit:cover } .single-img.r-landscape img { aspect-ratio:4 / 3; object-fit:cover } .single-img.r-square img { aspect-ratio:1; object-fit:cover }
.single-img figcaption { text-align:center; color:var(--muted); font-size:.9rem; margin-top:10px }
.tcol { display:grid; gap:10px; align-content:start } .tcol-img img { width:100%; border-radius:var(--radius); aspect-ratio:4 / 3; object-fit:cover }
.tcols.align-center { text-align:center } .tcols.align-center .btn-row { justify-content:center }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:28px; counter-reset:s }
.st-row { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) }
.step { display:grid; gap:12px; align-content:start; position:relative }
.st-row .step { text-align:center; justify-items:center }
.step-mark { width:56px; height:56px; border-radius:99px; display:grid; place-items:center; background:var(--primary); color:var(--primary-text); font:var(--h-weight) 1.4rem/1 var(--font-heading) }
.step-mark .i { width:24px; height:24px }
.step h3 { font-size:1.2rem; margin:0 0 4px } .step p { margin:0; color:var(--muted) }
.st-timeline { max-width:760px; margin-inline:auto; gap:0 }
.st-timeline .step { grid-template-columns:56px 1fr; gap:20px; padding-bottom:30px }
.st-timeline .step::before { content:""; position:absolute; left:27px; top:56px; bottom:0; width:2px; background:var(--border) }
.st-timeline .step:last-child::before { display:none }
.plans { align-items:stretch }
.plan { position:relative; display:grid; gap:14px; align-content:start; padding:28px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius) }
.plan.hl { border:2px solid var(--primary); box-shadow:0 20px 50px rgb(0 0 0 / .1) }
.plan h3 { font-size:1.3rem; margin:0 }
.plan-badge { position:absolute; top:-12px; left:24px; background:var(--accent); color:var(--accent-text); font-size:.75rem; font-weight:700; padding:4px 12px; border-radius:99px; text-transform:uppercase; letter-spacing:.06em }
.plan-price { margin:0 } .plan-price strong { font:var(--h-weight) 2.4rem/1 var(--font-heading) } .plan-price span { color:var(--muted) }
.plan-feats { list-style:none; padding:0; margin:0; display:grid; gap:8px } .plan-feats li { display:flex; gap:8px } .plan-feats .i { width:18px; color:var(--ok) }
.plan .btn { margin-top:auto }
.btn-block { width:100% }
.rv-prod { display:flex; gap:8px; align-items:center; text-decoration:none; font-size:.85rem; color:var(--muted); margin-top:6px }
.rv-prod img { width:32px; height:32px; border-radius:6px; object-fit:cover }
.fprod .split-media img { aspect-ratio:1; object-fit:cover; width:100% }
.custom-html { max-width:none } .custom-html iframe { max-width:100%; border:0; border-radius:var(--radius) }

/* Maintenance page */
.maint { margin:0 }
.maint-built { display:block }
.maint-wrap { position:relative; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:48px 20px 72px; text-align:center; isolation:isolate }
.maint-wrap.has-bg { color:#fff }
.maint-bg { position:absolute; inset:0; z-index:-1 } .maint-bg img { width:100%; height:100%; object-fit:cover }
.maint-bg::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.5) }
.maint-box { max-width:620px; display:grid; gap:14px; justify-items:center }
.maint-box h1 { font-size:calc(clamp(2.4rem, 7vw, 4.4rem) * var(--h-scale)); margin:4px 0 0 }
.maint-kind { margin:6px 0 0; font:700 .78rem var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent) }
.maint-wrap.has-bg .maint-kind { color:inherit; opacity:.85 }
.maint-msg { font-size:1.12rem; color:var(--muted); margin:0 } .maint-wrap.has-bg .maint-msg { color:inherit; opacity:.9 }
.maint-name { font:var(--h-weight) 1.6rem var(--font-heading); margin:0 }
.maint-box .logo { max-height:64px; width:auto }
.maint-cd { margin:10px 0 }
.maint-nl { width:100%; max-width:480px; margin-top:6px; display:grid; gap:6px } .maint-nl p { margin:0 }
.maint-contact { display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin:8px 0 0 }
.maint-contact a { display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; opacity:.85 } .maint-contact a:hover { opacity:1 }
.maint-contact .i { width:18px; height:18px }
.maint-foot { position:absolute; bottom:16px; left:0; right:0; margin:0; font-size:.85rem; opacity:.6 }
.mm-bar { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:300; display:flex; gap:12px; align-items:center; background:#111827; color:#fff; padding:9px 10px 9px 16px; border-radius:99px; font:500 13px var(--font-body); box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:calc(100% - 24px) }
.mm-bar a { color:#fde68a; font-weight:700; white-space:nowrap }
.mm-bar button { all:unset; cursor:pointer; opacity:.6; padding:0 6px } .mm-bar button:hover { opacity:1 }

/* Small screens */
@media (max-width:760px) {
  .product-media { position:static }
  .gal-strip { margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter) }
  .buy-row .btn.grow { min-width:0 }
  .search .suggest { position:fixed; left:12px; right:12px; top:70px; width:auto }
}

/* ══ Elements (Elementor-style containers & widgets) ══ */
.con { position:relative; display:flex; flex-direction:column; min-width:0 }
.con > .con-in { position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column; gap:20px; width:100%; min-width:0 }
.con-boxed > .con-in { width:min(var(--cw, var(--width)), 100% - var(--gutter) * 2); margin-inline:auto }
.con-sub.con-boxed > .con-in { width:min(var(--cw, var(--width)), 100%) }
.con-top.con-full:not(.con-edge) > .con-in { padding-inline:var(--gutter) }
.con-grid > .con-in { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) }
.con.has-bg { isolation:isolate; overflow:hidden }
.con-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.con-bg img, .con-bg video, .con-bg picture { width:100%; height:100%; object-fit:cover; display:block }
.con-ov { position:absolute; inset:0; z-index:0; pointer-events:none }
.con-link { position:absolute; inset:0; z-index:2 }
.con.blk { background:var(--sbg); color:var(--stext) }
.el { min-width:0; position:relative }
.con-in > .el:not(.con) { max-width:100% }
.el > :first-child { margin-top:0 } .el > :last-child { margin-bottom:0 }
/* Heading */
.eh { margin:0; line-height:1.08 }
.eh a { color:inherit; text-decoration:none }
.eh-s { font-size:1.15rem } .eh-m { font-size:clamp(1.3rem, 2.2vw, 1.6rem) } .eh-l { font-size:calc(clamp(1.8rem, 3.6vw, 2.6rem) * var(--h-scale)) }
.eh-xl { font-size:calc(clamp(2.2rem, 5vw, 3.6rem) * var(--h-scale)) } .eh-xxl { font-size:calc(clamp(2.8rem, 7vw, 5rem) * var(--h-scale)) } .eh-xxxl { font-size:calc(clamp(3.2rem, 10vw, 7.5rem) * var(--h-scale)); line-height:.95 }
p.eh, div.eh, span.eh { font-family:var(--font-body) }
.eh-grad span { background:linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
/* Text */
.etext { max-width:none }
.etext.dropcap > p:first-child::first-letter { float:left; font:var(--h-weight) 3.4em/.85 var(--font-heading); margin:.05em .12em 0 0 }
/* Button */
.btn-md { min-height:46px } .btn-xl { min-height:62px; padding:0 38px; font-size:1.1rem }
.btn-light { background:color-mix(in srgb, var(--primary) 10%, transparent); border-color:transparent; color:inherit }
.btn-accent { background:var(--accent); border-color:var(--accent); color:var(--accent-text) }
.btn-textlink { background:none; border:0; padding:0; min-height:0; color:inherit; text-decoration:underline; text-underline-offset:4px }
.btn-textlink:hover { transform:none; opacity:.75 }
/* Image */
.eimg { margin:0; display:inline-block; max-width:100%; vertical-align:top }
.el-image .eimg { display:block } .el-image .eimg img { width:100%; height:auto; display:block }
.eimg figcaption { font-size:.85rem; color:var(--muted); margin-top:8px }
.zoom { overflow:hidden } .zoom img { transition:transform .6s var(--ease) } .zoom:hover img { transform:scale(1.06) }
/* Video */
.evid { position:relative; aspect-ratio:16/9; background:#0b0f17; overflow:hidden }
.evid > .video { aspect-ratio:auto; height:100%; border-radius:0 }
.evid iframe, .evid video { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover }
/* Icon */
.eicon { display:inline-grid; place-items:center; font-size:40px; line-height:1; color:var(--primary); flex:0 0 auto }
.eicon svg { width:1em; height:1em }
.eicon.v-stacked { background:color-mix(in srgb, var(--primary) 12%, transparent); padding:.45em }
.eicon.v-framed { border:2px solid currentColor; padding:.4em }
.eicon.sh-circle { border-radius:50% } .eicon.sh-rounded { border-radius:22% } .eicon.sh-square { border-radius:0 }
.eicon-link { display:inline-block; color:inherit }
.s-primary .eicon, .s-dark .eicon, .s-accent .eicon { color:inherit }
/* Spacer & divider */
.esp { height:50px }
.ediv { --dv-c:var(--border); --dv-w:1px; --dv-s:solid; border-top:var(--dv-w) var(--dv-s) var(--dv-c); margin-block:16px; width:100% }
.ediv.has-text { border:0; display:flex; align-items:center; gap:16px; font-size:.9rem; color:var(--muted) }
.ediv.has-text::before, .ediv.has-text::after { content:""; flex:1; border-top:var(--dv-w) var(--dv-s) var(--dv-c) }
/* Icon box & image box */
.ebox { display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.ebox .eicon { font-size:26px }
.ebox-body { min-width:0; flex:1 1 auto }
.ebox-title { margin:0 0 6px; font-size:1.15rem; line-height:1.25 }
.ebox-title a { color:inherit; text-decoration:none }
.ebox-text { margin:0; color:var(--smuted, var(--muted)) }
.ebox-media { width:100%; overflow:hidden; border-radius:var(--radius) }
.ebox-media img { width:100%; height:auto; display:block; object-fit:cover }
.ebox-btn { margin:12px 0 0 }
/* Icon list */
.elist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.elist li { display:flex; align-items:center; gap:10px }
.elist a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:10px }
.elist .i { width:18px; height:18px; color:var(--primary); flex:0 0 auto }
.elist.lines li + li { border-top:1px solid var(--sline, var(--border)); padding-top:10px }
.s-primary .elist .i, .s-dark .elist .i, .s-accent .elist .i { color:inherit }
/* Counter & progress */
.ec-num { font:var(--h-weight) clamp(2.2rem, 5vw, 3.4rem)/1 var(--font-heading); font-variant-numeric:tabular-nums }
.ec-num b { font-weight:inherit }
.ec-title { margin-top:8px; color:var(--smuted, var(--muted)) }
.eprog { display:grid; gap:8px }
.ep-head { display:flex; justify-content:space-between; font-weight:600; font-size:.95rem }
.ep-track { height:var(--pb-h, 10px); background:var(--pb-t); border-radius:var(--pb-r, 999px); overflow:hidden }
.ep-bar { height:100%; background:var(--pb-c, var(--primary)); border-radius:inherit; transition:width 1.4s var(--ease) }
.eprog.pending .ep-bar { width:0 !important }
/* Stars */
.erate-wrap { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap }
.el-star-rating { line-height:1 }
.erate { position:relative; display:inline-block; font-size:20px; letter-spacing:2px; color:var(--star-off, color-mix(in srgb, currentColor 18%, transparent)); white-space:nowrap }
.erate-on { position:absolute; left:0; top:0; overflow:hidden; color:var(--star) }
/* Testimonial */
.etest { margin:0; display:grid; gap:14px }
.etest.card { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:calc(var(--radius) * 1.2); padding:clamp(20px, 3vw, 32px) }
.etq { margin:0; font-size:1.08rem; line-height:1.6 }
.etest figcaption { display:flex; gap:12px; align-items:center }
.etest figcaption small { display:block; color:var(--muted) }
.etest-img img { width:48px; height:48px; border-radius:50%; object-fit:cover }
/* Accordion & tabs */
.eacc details { border-bottom:1px solid var(--sline, var(--border)) }
.eacc.acc-boxed details { border:1px solid var(--sline, var(--border)); border-radius:var(--radius); padding:0 18px; margin-bottom:10px }
.eacc.acc-plain details { border:0 }
.eacc summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:600; font-size:1.05rem }
.eacc summary::-webkit-details-marker { display:none }
.eacc summary .i { transition:transform .25s var(--ease); flex:0 0 auto }
.eacc details[open] summary .i { transform:rotate(45deg) }
.eacc-body { padding:0 0 18px }
.etabs { --tab-on:var(--primary) }
.etabs-nav { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--sline, var(--border)); margin-bottom:18px }
.etabs-nav button { all:unset; cursor:pointer; padding:10px 16px; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px; opacity:.7 }
.etabs-nav button[aria-selected="true"] { border-color:var(--tab-on); color:var(--tab-on); opacity:1 }
.etabs-nav button:focus-visible { outline:2px solid var(--tab-on); outline-offset:2px }
.etabs-left { display:grid; grid-template-columns:minmax(160px, 240px) 1fr; gap:24px }
.etabs-left .etabs-nav { flex-direction:column; border-bottom:0; border-right:1px solid var(--sline, var(--border)); margin:0 }
.etabs-left .etabs-nav button { border-bottom:0; border-right:2px solid transparent; margin:0 -1px 0 0 }
.etabs-left .etabs-nav button[aria-selected="true"] { border-right-color:var(--tab-on) }
@media (max-width:767px) { .etabs-left { grid-template-columns:1fr } .etabs-left .etabs-nav { flex-direction:row; border-right:0; border-bottom:1px solid var(--border) } }
/* Alert */
.ealert { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius); border:1px solid; position:relative }
.ealert > .i { flex:0 0 auto; margin-top:2px }
.ealert p { margin:4px 0 0 }
.ealert-info { background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a } .ealert-success { background:#f0fdf4; border-color:#bbf7d0; color:#14532d }
.ealert-warning { background:#fffbeb; border-color:#fde68a; color:#78350f } .ealert-danger { background:#fef2f2; border-color:#fecaca; color:#7f1d1d }
.ealert-x { all:unset; cursor:pointer; margin-left:auto; opacity:.6 } .ealert-x:hover { opacity:1 }
/* Social icons */
.esoc { display:flex; flex-wrap:wrap; gap:10px }
.esoc a { display:grid; place-items:center; font-size:20px; width:2.2em; height:2.2em; color:inherit; background:color-mix(in srgb, currentColor 10%, transparent); transition:transform .2s, opacity .2s }
.esoc a:hover { transform:translateY(-2px) }
.esoc a svg { width:1em; height:1em }
.esoc.sh-circle a { border-radius:50% } .esoc.sh-rounded a { border-radius:28% } .esoc.sh-square a { border-radius:0 } .esoc.sh-none a { background:none !important; width:auto; height:auto }
.esoc.brand .net-facebook { background:#1877f2; color:#fff } .esoc.brand .net-instagram { background:linear-gradient(45deg, #f09433, #dc2743, #bc1888); color:#fff }
.esoc.brand .net-tiktok { background:#000; color:#fff } .esoc.brand .net-x-social { background:#000; color:#fff } .esoc.brand .net-youtube { background:#ff0000; color:#fff }
.esoc.brand .net-pinterest { background:#e60023; color:#fff } .esoc.brand .net-linkedin { background:#0a66c2; color:#fff } .esoc.brand .net-whatsapp { background:#25d366; color:#fff }
/* Gallery, map, forms */
.egal { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px }
.egal figure { margin:0 } .egal img { width:100%; height:100%; display:block; object-fit:cover }
.egal figcaption { font-size:.85rem; color:var(--muted); padding-top:6px }
.emap iframe { display:block; width:100%; height:360px; border:0 }
.eform { max-width:100% }
.eatc { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.eatc-price { font:700 1.3rem var(--font-body) }
.ecd .cd-units { display:flex; gap:clamp(8px, 2vw, 18px) }
/* Motion */
.anims [data-anim="fade-down"].anim-wait { transform:translateY(-36px) }
.anims [data-anim="fade-left"].anim-wait { transform:translateX(48px) }
.anims [data-anim="fade-right"].anim-wait { transform:translateX(-48px) }
.hv-grow, .hv-shrink, .hv-float, .hv-rotate { transition:transform .3s var(--ease) }
.hv-grow:hover { transform:scale(1.04) } .hv-shrink:hover { transform:scale(.96) } .hv-float:hover { transform:translateY(-6px) } .hv-rotate:hover { transform:rotate(-2deg) }