/* natdesign shop — storefront styles
   Visual language: stacked acrylic sheets (layered offsets), magenta light, ink depth. */
:root {
  --m: #e0157a;          /* brand magenta (logo) */
  --m-600: #c60f6a;
  --m-700: #a10a56;
  --m-900: #5c0631;
  --m-50: #fff0f7;
  --m-100: #ffe0ef;
  --m-200: #ffc2df;
  --hot: #ff3d9a;
  --ink: #1d0f1b;
  --ink-2: #4b3a49;
  --ink-3: #7b6a78;
  --line: #efe1ea;
  --line-2: #e2cfdb;
  --bg: #fffafc;
  --card: #ffffff;
  --gold: #f6b73c;
  --green: #0c9f6a;
  --green-50: #e8f8f1;
  --violet: #6d2bd9;
  --violet-50: #f2ecff;
  --red: #e5383b;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-1: 0 1px 2px rgba(29,15,27,.06), 0 4px 14px rgba(29,15,27,.06);
  --shadow-2: 0 2px 6px rgba(29,15,27,.07), 0 18px 40px -12px rgba(160,10,86,.22);
  --shadow-3: 0 30px 80px -20px rgba(92,6,49,.45);
  --font: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-d: "Anuphan", "IBM Plex Sans Thai", system-ui, sans-serif;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.25;text-wrap:balance;margin:0 0 .5em;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(28px,4.2vw,48px)}
h2{font-size:clamp(23px,2.8vw,34px)}
h3{font-size:clamp(18px,1.8vw,22px)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr-only{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(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.muted{color:var(--ink-3)}
.small{font-size:14px}
.center{text-align:center}
.hide,[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{--b:var(--m);display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid var(--b);background:var(--b);color:#fff;font-weight:600;font-size:15.5px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;text-align:center}
.btn:hover{background:var(--m-600);border-color:var(--m-600);box-shadow:0 10px 24px -10px rgba(224,21,122,.7);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn-ink{--b:var(--ink)}.btn-ink:hover{background:#000;border-color:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:#fff;border-color:var(--m);color:var(--m-700);box-shadow:none}
.btn-white{--b:#fff;color:var(--m-700)}.btn-white:hover{background:var(--m-50);border-color:var(--m-50);color:var(--m-700)}
.btn-line{--b:#06c755}.btn-line:hover{background:#05b04b;border-color:#05b04b;box-shadow:0 10px 24px -10px rgba(6,199,85,.6)}
.btn-lg{min-height:54px;padding:0 30px;font-size:17px}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{color:var(--m-700);font-weight:600;border-bottom:1.5px solid var(--m-200)}
.link:hover{border-color:var(--m)}

/* ---------- top strip & header ---------- */
.strip{background:var(--ink);color:#fff;font-size:13.5px}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.strip a{opacity:.85}.strip a:hover{opacity:1}
.strip-msg{display:flex;gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.strip-msg b{color:var(--m-200);font-weight:600}
.strip-right{display:flex;gap:16px;align-items:center;white-space:nowrap}
@media (max-width:720px){.strip-right .hide-sm{display:none}.strip .wrap{justify-content:center}}

.hdr{position:sticky;top:0;z-index:40;background:rgba(255,250,252,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo svg{width:44px;height:44px}
.logo-word{font-family:var(--font-d);font-weight:700;font-size:21px;line-height:1;letter-spacing:-.02em}
.logo-word small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.24em;color:var(--m);margin-top:4px;text-transform:uppercase}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;height:46px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;padding:0 48px 0 18px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--m);box-shadow:0 0 0 4px var(--m-100)}
.search button{position:absolute;right:5px;top:5px;width:36px;height:36px;border-radius:50%;border:0;background:var(--m);color:#fff;display:grid;place-items:center;cursor:pointer}
.search button svg{width:18px;height:18px}
.hdr-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:999px;border:0;background:transparent;cursor:pointer;font-size:14.5px;font-weight:500}
.icon-btn:hover{background:var(--m-50);color:var(--m-700)}
.icon-btn svg{width:22px;height:22px}
.badge-count{position:absolute;top:4px;left:26px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--m);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.lang-sw{font-weight:600;font-size:13.5px;border:1.5px solid var(--line-2);height:34px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center}
.lang-sw:hover{border-color:var(--m);color:var(--m-700)}
.burger{display:none}
@media (max-width:980px){
  .hdr .wrap{flex-wrap:wrap;gap:10px;min-height:62px;padding-top:8px;padding-bottom:8px}
  .search{order:5;flex-basis:100%;max-width:none}
  .icon-btn .lbl{display:none}
  .burger{display:inline-flex}
  .logo svg{width:38px;height:38px}.logo-word{font-size:18px}
}

/* nav */
.nav{border-bottom:1px solid var(--line);background:#fff}
.nav .wrap{display:flex;align-items:center;gap:4px;min-height:48px;overflow-x:auto;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav a:hover,.nav a.on{background:var(--m-50);color:var(--m-700)}
.nav a.hot{color:var(--m-700);font-weight:700}
.nav a.hot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hot);margin-right:7px;vertical-align:2px;box-shadow:0 0 0 4px rgba(255,61,154,.18);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,61,154,0)}}
@media (max-width:980px){.nav{display:none}}

/* drawer (mobile menu & cart) */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
.drawer.open{visibility:visible}
.drawer-bg{position:absolute;inset:0;background:rgba(29,15,27,.45);opacity:0;transition:opacity .3s}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute;top:0;bottom:0;right:0;width:min(420px,92vw);background:#fff;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-3)}
.drawer.left .drawer-panel{right:auto;left:0;transform:translateX(-100%)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0;font-size:19px}
.drawer-body{flex:1;overflow:auto;padding:16px 20px}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--line);background:var(--bg)}
.mnav a{display:flex;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line);font-weight:500}
.mnav a span{color:var(--ink-3);font-size:13px}

/* ---------- hero slider ---------- */
.hero{position:relative;margin:18px 0 0}
.hero .wrap{position:relative}
.slides{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(440px,52vw,560px);background:var(--ink);box-shadow:var(--shadow-3);isolation:isolate}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:24px;padding:clamp(28px,5vw,64px);opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s}
.slide.on{opacity:1;visibility:visible}
.slide::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 85% 20%,#ff4fa6 0%,transparent 55%),radial-gradient(80% 80% at 10% 100%,#7a0a45 0%,transparent 60%),linear-gradient(135deg,#2a0b20 0%,#5c0631 45%,#c60f6a 100%)}
.slide.t-ink::before{background:radial-gradient(90% 90% at 90% 10%,rgba(224,21,122,.55),transparent 60%),linear-gradient(135deg,#120810,#2b1426)}
.slide.t-gold::before{background:radial-gradient(90% 90% at 90% 10%,#ffd36b 0%,transparent 55%),linear-gradient(135deg,#5c0631 0%,#a10a56 50%,#e0157a 100%)}
.slide.t-light::before{background:radial-gradient(90% 90% at 85% 15%,#ffc2df,transparent 60%),linear-gradient(135deg,#fff0f7,#ffe0ef)}
.slide.t-light{color:var(--ink)}
.slide{color:#fff}
.slide-copy{max-width:560px;position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);margin-bottom:18px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.slide.t-light .eyebrow{background:#fff;border-color:var(--m-200);color:var(--m-700)}
.slide h1,.slide h2{font-size:clamp(32px,4.6vw,58px);line-height:1.14;margin-bottom:16px;letter-spacing:-.02em;text-wrap:balance}
.slide h1 em,.slide h2 em{font-style:normal;background:linear-gradient(90deg,#ffd36b,#ffb3d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.slide.t-light h2 em{background:linear-gradient(90deg,var(--m),var(--m-700));-webkit-background-clip:text;background-clip:text}
.slide p.lead{color:inherit;font-size:clamp(16px,1.5vw,19px);opacity:.9;margin-bottom:26px;max-width:480px}
.slide .cta{display:flex;gap:12px;flex-wrap:wrap}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px;font-size:14px;opacity:.9}
.trust-row span{display:inline-flex;align-items:center;gap:7px}
.trust-row svg{width:18px;height:18px;color:var(--gold)}
.slide-art{position:relative;height:100%;min-height:300px}
.stack{position:absolute;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35) inset}
.stack img{width:100%;height:100%;object-fit:cover}
.stack::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,.35),transparent 40%);pointer-events:none}
.stack.s1{width:58%;aspect-ratio:1;right:4%;top:2%;transform:rotate(5deg);z-index:3;animation:float 7s ease-in-out infinite}
.stack.s2{width:44%;aspect-ratio:1;left:4%;top:16%;transform:rotate(-7deg);z-index:2;animation:float 8s ease-in-out -2s infinite}
.stack.s3{width:40%;aspect-ratio:1;right:28%;bottom:0;transform:rotate(-2deg);z-index:4;animation:float 9s ease-in-out -4s infinite}
@keyframes float{50%{translate:0 -10px}}
.price-tag{position:absolute;z-index:6;left:2%;bottom:10%;background:#fff;color:var(--ink);border-radius:16px;padding:10px 14px;box-shadow:var(--shadow-2);font-size:13px;line-height:1.3}
.price-tag b{display:block;font-family:var(--font-d);font-size:22px;color:var(--m)}
.slide-promo-img{position:absolute;inset:0;z-index:-1}
.slide-promo-img img{width:100%;height:100%;object-fit:cover}
.slide.has-img::before{background:linear-gradient(90deg,rgba(29,15,27,.85) 0%,rgba(29,15,27,.4) 55%,transparent 100%)}
.slider-ui{position:absolute;right:clamp(20px,3vw,34px);bottom:20px;display:flex;align-items:center;gap:10px;z-index:5}
.dots{display:flex;gap:8px}
.dots button{width:30px;height:5px;border-radius:5px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0;overflow:hidden;position:relative}
.dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:fill var(--dur,6s) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.arrows{display:flex;gap:6px;margin-left:8px}
.arrows button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.arrows button:hover{background:rgba(255,255,255,.2)}
.arrows svg{width:18px;height:18px}
@media (max-width:860px){
  .slides{min-height:auto}
  .slide{position:relative;grid-template-columns:1fr;padding:30px 22px 70px;display:none}
  .slide.on{display:grid}
  .slide-art{min-height:250px;order:-1;margin:-6px 0 4px}
  .stack.s1{width:52%;right:6%}.stack.s2{width:42%;left:4%;top:8%}.stack.s3{width:36%;right:36%}
  .price-tag{left:auto;right:0;bottom:2%}
  .slider-ui{right:auto;left:22px;bottom:18px}
}

/* ---------- sections ---------- */
.sec{padding:clamp(44px,6vw,76px) 0}
.sec-tight{padding:clamp(28px,4vw,44px) 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px}
.sec-head h2{margin:0}
.sec-head p{margin:6px 0 0;color:var(--ink-3)}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m);margin-bottom:8px}
.see-all{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--m-700);white-space:nowrap}
.see-all svg{width:18px;height:18px;transition:transform .2s}
.see-all:hover svg{transform:translateX(3px)}

/* USP bar */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.usp div{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.usp svg{width:36px;height:36px;flex:none;color:var(--m);background:var(--m-50);border-radius:12px;padding:7px}
.usp b{display:block;font-size:15px;line-height:1.3}
.usp span{font-size:13px;color:var(--ink-3);line-height:1.35;display:block}
@media (max-width:900px){.usp{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.usp div{padding:12px}.usp b{font-size:14px}}

/* category bento */
.cats{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:14px;grid-auto-flow:dense}
.cat{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--m-50);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;isolation:isolate;border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.cat:hover img{transform:scale(1.05)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(29,15,27,0) 25%,rgba(29,15,27,.55) 55%,rgba(29,15,27,.92) 100%)}
.cat b{color:#fff;font-family:var(--font-d);font-size:16px;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cat span{color:rgba(255,255,255,.8);font-size:13px}
.cat.big{grid-column:span 2;grid-row:span 2}
.cat.big b{font-size:24px}
.cat.wide{grid-column:span 2}
@media (max-width:980px){.cats{grid-template-columns:repeat(3,1fr);grid-auto-rows:140px}}
@media (max-width:640px){.cats{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:10px}.cat.big{grid-row:span 2}.cat.wide{grid-column:span 2}.cat b{font-size:15px}.cat.big b{font-size:19px}}

/* product grid & card */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1060px){.grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid,.grid-4{grid-template-columns:repeat(2,1fr);gap:12px}}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:transparent}
.card-img{position:relative;aspect-ratio:1;background:var(--m-50);overflow:hidden}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s,transform .6s var(--ease)}
.card-img img.alt{opacity:0}
.card:hover .card-img img.alt{opacity:1}
.card:hover .card-img img:first-child{transform:scale(1.04)}
.badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2;align-items:flex-start}
.bdg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;line-height:1;padding:6px 9px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.bdg svg{width:13px;height:13px}
.bdg-sale{background:var(--m);color:#fff}
.bdg-ready{background:var(--green-50);color:var(--green)}
.bdg-custom{background:var(--violet-50);color:var(--violet)}
.bdg-hot{background:var(--gold);color:var(--ink)}
.bdg-out{background:var(--ink);color:#fff}
.card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.card-cat{font-size:12px;color:var(--ink-3);font-weight:500}
.card-title{font-size:15px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.card-foot{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.price{display:flex;flex-direction:column;line-height:1.1}
.price b{font-family:var(--font-d);font-size:20px;color:var(--m-700);font-weight:700}
.price s{font-size:13px;color:var(--ink-3)}
.price .ask{font-size:14.5px;color:var(--ink-2);font-weight:600}
.price .dealer{font-size:11.5px;color:var(--green);font-weight:600}
.quick{position:relative;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .2s,transform .2s}
.quick:hover{background:var(--m);transform:scale(1.06)}
.quick svg{width:19px;height:19px}
.rating{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-3)}
.rating svg{width:14px;height:14px;color:var(--gold)}
.leadtime{font-size:12.5px;color:var(--violet);font-weight:500}
.stock-low{font-size:12.5px;color:var(--red);font-weight:600}
@media (max-width:720px){.card-body{padding:10px 12px 12px}.card-title{font-size:14px}.price b{font-size:17px}.quick{width:36px;height:36px}.badges{top:8px;left:8px}.bdg{font-size:11px;padding:5px 7px}}

/* scroller rows */
.row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.row-scroll>*{scroll-snap-align:start}
@media (max-width:720px){.row-scroll{grid-auto-columns:46%}}

/* flash sale band */
.flash{position:relative;border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);background:linear-gradient(135deg,var(--ink),#3b0e2d 60%,var(--m-700));color:#fff;overflow:hidden}
.flash::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(255,61,154,.55),transparent 65%)}
.flash .sec-head{position:relative}
.flash .sec-head p{color:rgba(255,255,255,.7)}
.flash .see-all{color:#fff}
.countdown{display:flex;gap:6px;align-items:center;font-family:var(--font-d)}
.countdown span{min-width:44px;text-align:center;background:#fff;color:var(--m-700);border-radius:10px;padding:6px 4px;font-weight:700;font-size:20px;line-height:1}
.countdown span small{display:block;font-size:10px;font-weight:600;color:var(--ink-3);margin-top:3px;font-family:var(--font)}
.countdown i{font-style:normal;font-weight:700;opacity:.7}
.flash .card{color:var(--ink)}

/* two-panel ready vs custom */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo-card{position:relative;border-radius:var(--r-xl);padding:30px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;border:1px solid var(--line)}
.duo-card.ready{background:linear-gradient(160deg,#eafff5,#fff 60%)}
.duo-card.custom{background:linear-gradient(160deg,#f3ecff,#fff 60%)}
.duo-card .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:auto}
.duo-card.ready .ico{background:var(--green);color:#fff}
.duo-card.custom .ico{background:var(--violet);color:#fff}
.duo-card .ico svg{width:28px;height:28px}
.duo-card h3{font-size:26px;margin:18px 0 6px}
.duo-card p{color:var(--ink-2);max-width:420px}
.duo-card .imgs{position:absolute;right:-20px;top:20px;display:flex;gap:10px;z-index:-1;opacity:.95}
.duo-card .imgs img{width:120px;height:120px;border-radius:18px;object-fit:cover;box-shadow:var(--shadow-2);transform:rotate(6deg)}
.duo-card .imgs img:nth-child(2){transform:rotate(-5deg) translateY(40px)}
@media (max-width:800px){.duo{grid-template-columns:1fr}.duo-card .imgs img{width:90px;height:90px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:st}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;counter-increment:st}
.step::before{content:"0" counter(st);font-family:var(--font-d);font-weight:700;font-size:44px;line-height:1;color:var(--m-100);position:absolute;right:16px;top:12px}
.step svg{width:42px;height:42px;color:var(--m);margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--ink-2);margin:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:16px 0;--gap:42px}
.marquee-track{display:flex;gap:var(--gap);width:max-content;animation:marq 38s linear infinite}
.marquee span{font-family:var(--font-d);font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:.02em;color:var(--ink);display:inline-flex;align-items:center;gap:var(--gap);white-space:nowrap}
.marquee span::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--m);transform:rotate(45deg)}
.marquee span:nth-child(3n+2){color:transparent;-webkit-text-stroke:1.4px var(--ink)}
@keyframes marq{to{transform:translateX(-50%)}}

/* dealer band */
.band{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(28px,4vw,52px);background:var(--m);color:#fff;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 120% at 100% 0%,#ff7dbb,transparent 60%),radial-gradient(60% 100% at 0% 100%,var(--m-900),transparent 70%)}
.band h2{font-size:clamp(26px,3.4vw,40px)}
.band ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.band li{display:flex;gap:10px;align-items:flex-start}
.band li svg{width:22px;height:22px;flex:none;color:var(--gold)}
.tiers{display:grid;gap:10px}
.tier{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--r);padding:16px 18px;backdrop-filter:blur(6px)}
.tier b{font-family:var(--font-d);font-size:18px}
.tier span{font-family:var(--font-d);font-size:28px;font-weight:700}
.tier small{display:block;font-size:12.5px;opacity:.8;font-weight:400}
@media (max-width:820px){.band{grid-template-columns:1fr}}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.review .stars{display:flex;gap:2px;color:var(--gold);margin-bottom:10px}
.review .stars svg{width:18px;height:18px}
.review p{color:var(--ink-2);font-size:15px}
.review footer{display:flex;align-items:center;gap:10px;font-size:14px}
.review footer i{width:36px;height:36px;border-radius:50%;background:var(--m-100);color:var(--m-700);display:grid;place-items:center;font-style:normal;font-weight:700}
.score{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.score b{font-family:var(--font-d);font-size:54px;line-height:1;color:var(--m)}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;border-right:2px solid var(--m);border-bottom:2px solid var(--m);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 20px 18px;color:var(--ink-2)}

/* newsletter / contact cta */
.cta-line{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 30px}
.cta-line h3{margin:0 0 4px}
.cta-line p{margin:0;color:var(--ink-3)}

/* ---------- footer ---------- */
.ftr{margin-top:60px;background:var(--ink);color:rgba(255,255,255,.78);font-size:14.5px}
.ftr a:hover{color:#fff}
.ftr-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding:56px 0 36px}
.ftr h4{color:#fff;font-size:15px;margin-bottom:14px;letter-spacing:.02em}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr .logo-word{color:#fff}
.ftr-about p{margin:16px 0}
.social{display:flex;gap:8px}
.social a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.social a:hover{background:var(--m)}
.social svg{width:20px;height:20px}
.pay-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pay-row span{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:700}
.ftr-bot{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}.ftr-about{grid-column:span 2}}
@media (max-width:520px){.ftr-top{grid-template-columns:1fr}.ftr-about{grid-column:auto}}

/* floating contact */
.fab{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:10px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 28px -8px rgba(0,0,0,.4);transition:transform .2s}
.fab a:hover{transform:scale(1.08)}
.fab .f-line{background:#06c755}
.fab .f-tel{background:var(--m)}
.fab svg{width:27px;height:27px}

/* ---------- breadcrumbs & page head ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--ink-3);padding:16px 0 4px}
.crumbs a:hover{color:var(--m-700)}
.crumbs span::before{content:"/";margin-right:6px;opacity:.5}
.page-head{padding:10px 0 22px}
.page-head p{color:var(--ink-2);max-width:780px}

/* ---------- shop layout & filters ---------- */
.shop{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.filters{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.filters h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 10px}
.filters h4:first-child{margin-top:0}
.f-list{display:grid;gap:2px;max-height:340px;overflow:auto}
.f-list a,.f-list label{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;font-size:14.5px;cursor:pointer}
.f-list a:hover,.f-list label:hover{background:var(--m-50)}
.f-list a.on{background:var(--m);color:#fff}
.f-list a small{opacity:.6}
.f-list input{accent-color:var(--m)}
.price-in{display:flex;gap:8px;align-items:center}
.price-in input{width:100%;height:40px;border:1.5px solid var(--line-2);border-radius:10px;padding:0 10px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar select{height:42px;border-radius:999px;border:1.5px solid var(--line-2);padding:0 36px 0 16px;background:#fff;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e0157a' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;font-size:14px;font-weight:500;cursor:pointer}
.chip:hover{border-color:var(--m)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-btn{display:none}
@media (max-width:980px){
  .shop{grid-template-columns:1fr}
  .filters{position:fixed;inset:auto 0 0 0;top:auto;z-index:85;border-radius:24px 24px 0 0;max-height:80vh;overflow:auto;transform:translateY(105%);transition:transform .35s var(--ease);box-shadow:var(--shadow-3)}
  .filters.open{transform:none}
  .filter-btn{display:inline-flex}
}
.pager{display:flex;gap:6px;justify-content:center;margin:34px 0 0;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-weight:600;background:#fff}
.pager a:hover{border-color:var(--m);color:var(--m-700)}
.pager .on{background:var(--m);border-color:var(--m);color:#fff}
.empty{text-align:center;padding:60px 20px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.empty svg{width:64px;height:64px;color:var(--m-200);margin:0 auto 12px}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,52px);align-items:start;padding-top:8px}
.gallery{position:sticky;top:96px}
.g-main{position:relative;aspect-ratio:1;border-radius:var(--r-xl);overflow:hidden;background:#fff;border:1px solid var(--line)}
.g-main img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.g-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.g-thumbs button{flex:none;width:76px;height:76px;border-radius:14px;overflow:hidden;border:2px solid transparent;padding:0;background:#fff;cursor:pointer}
.g-thumbs button.on{border-color:var(--m)}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-info h1{font-size:clamp(24px,3vw,34px);margin-bottom:10px}
.pdp-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--ink-3);margin-bottom:16px}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:18px 20px;background:linear-gradient(135deg,var(--m-50),#fff);border:1px solid var(--m-100);border-radius:var(--r-lg);margin:4px 0 20px}
.pdp-price b{font-family:var(--font-d);font-size:clamp(30px,3.6vw,40px);color:var(--m-700);line-height:1}
.pdp-price s{color:var(--ink-3);font-size:17px}
.pdp-price .off{background:var(--m);color:#fff;border-radius:8px;padding:3px 8px;font-size:13px;font-weight:700}
.pdp-price .vat{width:100%;font-size:13px;color:var(--ink-3)}
.opt{margin-bottom:16px}
.opt>label,.field>label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.opt-vals{display:flex;flex-wrap:wrap;gap:8px}
.opt-vals input{position:absolute;opacity:0;pointer-events:none}
.opt-vals label{display:inline-flex;align-items:center;min-height:42px;padding:6px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;font-size:14.5px;transition:border-color .2s,background .2s}
.opt-vals label:hover{border-color:var(--m-200)}
.opt-vals input:checked+label{border-color:var(--m);background:var(--m-50);color:var(--m-700);font-weight:600;box-shadow:0 0 0 3px var(--m-100)}
.opt-vals input:focus-visible+label{outline:3px solid var(--hot)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;height:50px}
.qty button{width:46px;height:100%;border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink-2)}
.qty input{width:48px;text-align:center;border:0;height:100%;font-weight:600;font-size:16px;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 14px}
.buy-row .btn{flex:1;min-height:52px}
.custom-box{background:var(--violet-50);border:1px solid #e1d4ff;border-radius:var(--r-lg);padding:16px 18px;margin:8px 0 6px}
.custom-box h4{display:flex;gap:8px;align-items:center;font-size:15px;margin:0 0 10px;color:var(--violet)}
.custom-box h4 svg{width:20px;height:20px}
.assure{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.assure div{display:flex;gap:10px;align-items:center;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.assure svg{width:26px;height:26px;color:var(--m);flex:none}
.tabs{margin-top:46px}
.tab-btns{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto}
.tab-btns button{border:0;background:none;padding:12px 18px;font-weight:600;color:var(--ink-3);border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap}
.tab-btns button.on{color:var(--m-700);border-color:var(--m)}
.prose{max-width:820px;color:var(--ink-2)}
.prose h3{color:var(--ink);margin-top:1.4em}
.prose ul{padding-left:1.3em}
.prose li{margin-bottom:.35em}
.prose a{color:var(--m-700);text-decoration:underline}
.specs{width:100%;max-width:820px;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.specs th,.specs td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.specs th{width:34%;background:var(--bg);font-weight:600}
@media (max-width:900px){.pdp{grid-template-columns:1fr}.gallery{position:static}}
.sticky-buy{display:none}
@media (max-width:720px){
  .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(0,0,0,.18)}
  .sticky-buy .price b{font-size:19px}
  .sticky-buy .btn{flex:1}
  body.has-sticky .fab{bottom:86px}
}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(10,4,9,.92);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;max-width:min(1100px,94vw);object-fit:contain;border-radius:12px}
.lightbox button{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;cursor:pointer;font-size:22px}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{width:100%;min-height:48px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;padding:10px 14px;font-size:15.5px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--m);box-shadow:0 0 0 4px var(--m-100)}
.field .hint{font-size:13px;color:var(--ink-3);margin-top:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.check input{width:19px;height:19px;margin-top:3px;accent-color:var(--m);flex:none}
.alert{padding:14px 16px;border-radius:14px;margin-bottom:16px;font-size:15px;border:1px solid}
.alert-ok{background:var(--green-50);border-color:#b5ebd4;color:#075e3f}
.alert-err{background:#fff0f0;border-color:#ffc9c9;color:#9d1c1f}
.alert-info{background:var(--m-50);border-color:var(--m-100);color:var(--m-900)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px)}
.panel h2,.panel h3{margin-top:0}
.auth{max-width:460px;margin:30px auto}

/* ---------- cart & checkout ---------- */
.cart-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
@media (max-width:960px){.cart-grid{grid-template-columns:1fr}}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.line:last-child{border-bottom:0}
.line img{width:84px;height:84px;border-radius:14px;object-fit:cover;background:var(--m-50)}
.line h4{font-family:var(--font);font-size:15px;font-weight:600;margin:0 0 4px;line-height:1.4}
.line .opts{font-size:13px;color:var(--ink-3)}
.line .custom{font-size:13px;color:var(--violet);margin-top:4px}
.line .lt{text-align:right;font-weight:700;font-family:var(--font-d);font-size:17px}
.line .rm{border:0;background:none;color:var(--ink-3);font-size:13px;cursor:pointer;padding:4px 0;text-decoration:underline}
.line .qty{height:38px}.line .qty button{width:34px;font-size:18px}.line .qty input{width:36px;font-size:14px}
.summary{position:sticky;top:96px}
.sum-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:15px}
.sum-row.total{border-top:1px dashed var(--line-2);margin-top:8px;padding-top:14px;font-size:17px;font-weight:700}
.sum-row.total b{font-family:var(--font-d);font-size:26px;color:var(--m-700)}
.sum-row.disc{color:var(--green)}
.coupon{display:flex;gap:8px;margin:14px 0}
.coupon input{flex:1;height:44px;border:1.5px dashed var(--m-200);border-radius:12px;padding:0 12px;text-transform:uppercase;background:var(--m-50)}
.ship-opts{display:grid;gap:10px}
.ship-opt{position:relative}
.ship-opt input{position:absolute;opacity:0}
.ship-opt label{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px;border:1.5px solid var(--line-2);border-radius:14px;cursor:pointer;background:#fff}
.ship-opt input:checked+label{border-color:var(--m);background:var(--m-50);box-shadow:0 0 0 3px var(--m-100)}
.ship-opt input:focus-visible+label{outline:3px solid var(--hot)}
.carrier{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;letter-spacing:.02em}
.ship-opt b{display:block;font-size:15px}
.ship-opt small{color:var(--ink-3)}
.ship-opt .fee{font-weight:700;font-family:var(--font-d)}
.steps-bar{display:flex;gap:6px;align-items:center;justify-content:center;margin:10px 0 26px;font-size:14px;color:var(--ink-3);flex-wrap:wrap}
.steps-bar b{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);font-weight:600}
.steps-bar b i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:13px}
.steps-bar b.on{color:var(--m-700)}
.steps-bar b.on i{background:var(--m);border-color:var(--m);color:#fff}
.steps-bar span{width:28px;height:2px;background:var(--line-2)}
.secure-note{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-3);margin-top:12px}
.secure-note svg{width:20px;height:20px;color:var(--green);flex:none}

/* order / tracking */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline li{position:relative;padding:0 0 22px 34px}
.timeline li::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--line-2)}
.timeline li:last-child::before{display:none}
.timeline li i{position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--line-2)}
.timeline li.done i{background:var(--m);border-color:var(--m);box-shadow:0 0 0 4px var(--m-100)}
.timeline li b{display:block;font-size:15px}
.timeline li small{color:var(--ink-3)}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:600;font-size:13.5px;background:var(--m-50);color:var(--m-700)}
.status-pill.paid,.status-pill.completed,.status-pill.shipped{background:var(--green-50);color:var(--green)}
.status-pill.in_production,.status-pill.ready{background:var(--violet-50);color:var(--violet)}
.status-pill.cancelled,.status-pill.refunded{background:#f2f2f2;color:#555}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.table th{font-size:13px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.table-wrap{overflow-x:auto}

/* account */
.acct{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.acct-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px}
.acct-nav a{display:block;padding:11px 14px;border-radius:12px;font-weight:500}
.acct-nav a.on,.acct-nav a:hover{background:var(--m-50);color:var(--m-700)}
@media (max-width:820px){.acct{grid-template-columns:1fr}}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat-cards div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat-cards b{display:block;font-family:var(--font-d);font-size:26px;color:var(--m-700)}
@media (max-width:640px){.stat-cards{grid-template-columns:1fr}}

/* static pages */
.doc{max-width:860px}
.doc h2{font-size:22px;margin-top:1.6em}
.doc p,.doc li{color:var(--ink-2)}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.c-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.c-item svg{width:24px;height:24px;color:var(--m);flex:none;margin-top:3px}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--m-50)}
.map iframe{width:100%;height:100%;border:0}
.about-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
.about-hero .imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-hero .imgs img{border-radius:var(--r-lg);aspect-ratio:1;object-fit:cover}
.about-hero .imgs img:nth-child(2){margin-top:40px}
@media (max-width:860px){.about-hero{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.values div{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.values svg{width:34px;height:34px;color:var(--m);margin-bottom:10px}
@media (max-width:820px){.values{grid-template-columns:1fr}}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120%);z-index:95;background:var(--ink);color:#fff;padding:14px 18px;border-radius:14px;box-shadow:var(--shadow-3);display:flex;gap:12px;align-items:center;transition:transform .35s var(--ease),visibility .35s;max-width:92vw;font-size:15px;visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--m-200);font-weight:600}

/* cookie consent */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-3);font-size:14px;display:none}
.consent.show{display:block}
.consent .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.hdr,.nav,.strip,.ftr,.fab,.consent,.no-print{display:none!important}body{background:#fff}}
/* inline icon sizing */
.kicker svg,.leadtime svg,.small svg,.alert svg,.see-all svg,.chip svg,.link svg{width:16px;height:16px;display:inline-block;vertical-align:-3px;flex:none}
.strip svg{width:16px;height:16px;flex:none}
.empty svg{display:block}
@media (max-width:520px){
  .hdr .wrap{gap:4px 6px}
  .logo{gap:8px}.logo svg{width:34px;height:34px}.logo-word{font-size:17px}.logo-word small{font-size:9px;letter-spacing:.14em}
  .icon-btn{padding:0 8px;height:40px}
  .lang-sw{height:30px;padding:0 8px;font-size:12.5px}
  .badge-count{left:20px}
  .slide h1,.slide h2{font-size:30px}
}
/* image banners */
.slide.has-img .slide-copy{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.slide-promo-img img{object-position:right center}
@media (max-width:860px){
  .slide.has-img{min-height:520px;align-content:end}
  .slide.has-img::before{background:linear-gradient(180deg,rgba(29,15,27,.05) 0%,rgba(29,15,27,.55) 45%,rgba(29,15,27,.92) 100%)}
}
/* Sign in with Google */
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:0 18px;border:1.5px solid #dadce0;border-radius:999px;background:#fff;color:#1f1f1f;font-weight:600;font-size:15.5px;transition:background .2s,box-shadow .2s,border-color .2s}
.btn-google:hover{background:#f8f9fa;border-color:#c6c9cc;box-shadow:0 2px 8px rgba(60,64,67,.15)}
.btn-google svg{flex:none}
.or-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);font-size:13px}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line-2)}
.guest-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.guest-bar .btn-google{width:auto;min-height:40px;font-size:14.5px}