:root{
  --bg:#ffffff;--bg-soft:#f4f6fa;--bg-soft2:#fafbfd;--panel:#ffffff;--bg-blue:#eaf4fb;
  --ink:#151719;--ink-2:#5c6470;--ink-3:#8a919c;--line:#e6e9f0;--line-2:#f0f2f7;
  --navy:#0a4a6b;--blue:#0a6da0;--teal:#1183b4;--teal-light:#5bb6de;
  --brand:#0a6da0;--brand-2:#2a9fd4;--brand-ink:#0a4a6b;--brand-soft:#e6f2fa;--brand-glow:rgba(10,109,160,.14);
  --brand-grad:linear-gradient(135deg,#0a6da0 0%,#1f9bd1 100%);
  --ok:#1fab66;--ok-soft:#e7f7ee;--warn:#e08a00;--warn-soft:#fdf3e2;--danger:#e0341f;--danger-soft:#fde9e6;
  --r-xs:6px;--r:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:24px;
  --shadow-xs:0 1px 2px rgba(10,74,107,.06),0 1px 3px rgba(10,74,107,.05);
  --shadow-sm:0 2px 8px rgba(10,74,107,.06),0 10px 26px rgba(10,74,107,.05);
  --shadow:0 14px 44px rgba(10,74,107,.11);--shadow-lg:0 30px 80px rgba(10,74,107,.16);
  --ring:0 0 0 4px rgba(10,109,160,.14);
  --nav-bg:rgba(255,255,255,.82);--card:#ffffff;
  --maxw:1440px;--nav-h:70px;--gutter:28px;
}
[data-theme=dark]{
  --bg:#0e141b;--bg-soft:#161f29;--bg-soft2:#121a22;--panel:#161f29;--bg-blue:#14212c;--card:#161f29;
  --ink:#eef2f6;--ink-2:#a7b2bf;--ink-3:#7d8794;--line:#28333f;--line-2:#1e2731;
  --brand:#2a9fd4;--brand-2:#4fb8e6;--brand-ink:#bfe4f7;--brand-soft:#10222e;--brand-glow:rgba(42,159,212,.22);
  --brand-grad:linear-gradient(135deg,#0d7bb3 0%,#2a9fd4 100%);
  --ok-soft:#12291d;--warn-soft:#2a2110;--danger-soft:#2c1512;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.34);
  --shadow:0 14px 44px rgba(0,0,0,.5);--shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --ring:0 0 0 4px rgba(42,159,212,.22);
  --nav-bg:rgba(16,23,31,.82);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;overflow-x:hidden}
[dir=rtl] body{font-family:'Cairo','Inter',sans-serif}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.hide{display:none!important}

.announce{background:linear-gradient(100deg,var(--navy),var(--brand) 55%,var(--teal));color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;text-align:center;padding:10px 16px}
.announce b{color:#b8e6ff}

.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid transparent;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-bottom-color .35s,box-shadow .35s,background .35s}
.nav.scrolled{border-bottom-color:rgba(10,109,160,.08);box-shadow:0 4px 24px rgba(10,74,107,.06)}
.nav.nav-hidden{transform:translateY(-100%);pointer-events:none}
.nav.product-open{display:none}
/* ── Product top bar (shows above everything when product open) ── */
.prod-topbar{position:fixed;top:0;left:0;right:0;z-index:70;background:linear-gradient(135deg,var(--navy) 0%,var(--brand) 100%);height:52px;display:flex;align-items:center;padding:0 var(--gutter);transform:translateY(-100%);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s;pointer-events:none}
.prod-topbar.open{transform:translateY(0);opacity:1;pointer-events:auto}
.prod-topbar .ptb-back{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:4px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);font-weight:800;font-size:13px;color:#fff;cursor:pointer;transition:.25s}
.prod-topbar .ptb-back:hover{background:rgba(255,255,255,.25)}
.prod-topbar .ptb-name{flex:1;text-align:center;font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px}
.prod-topbar .ptb-actions{display:flex;align-items:center;gap:8px}
.prod-topbar .ptb-cart{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:4px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:.25s}
.prod-topbar .ptb-cart:hover{background:rgba(255,255,255,.25)}
.prod-topbar .ptb-cart svg{width:16px;height:16px}
@media(max-width:640px){.prod-topbar{height:48px;padding:0 14px}.prod-topbar .ptb-back{height:32px;padding:0 12px;font-size:12px}.prod-topbar .ptb-name{font-size:12.5px;padding:0 8px}.prod-topbar .ptb-cart{height:32px;padding:0 10px;font-size:12px}}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:42px;height:42px;border-radius:var(--r-md);align-items:center;justify-content:center;color:var(--ink);background:none}
.nav-burger:hover{background:var(--brand-soft);color:var(--brand)}
.mmenu{position:fixed;inset:0;z-index:120;background:#fff;display:flex;flex-direction:column;gap:2px;padding:16px 18px 28px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
.mmenu.open{opacity:1;visibility:visible;transform:none}
.mmenu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:14px;border-bottom:1.5px solid var(--line)}
.mmenu-x{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink);background:var(--brand-soft);transition:.2s}
.mmenu-x:hover{background:var(--brand);color:#fff}
.mmenu{background:linear-gradient(180deg,#ffffff 0%,#f4f8fb 100%);padding:16px 18px calc(30px + env(safe-area-inset-bottom))}
.mm-sec{height:1.5px;background:var(--line);margin:10px 2px 14px}
.mm-link{display:flex;align-items:center;gap:14px;padding:16px 16px;font-weight:800;font-size:15.5px;color:var(--ink);border-radius:var(--r-md);text-align:start;background:#fff;border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(10,74,107,.04);margin-bottom:10px;transition:.25s cubic-bezier(.2,.7,.2,1);width:100%}
.mm-ic{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;color:var(--brand);background:var(--brand-soft);border-radius:var(--r-xs)}
.mm-ic svg{width:20px;height:20px}
.mm-tx{flex:1;text-align:start}
.mm-link:hover{border-color:var(--brand);box-shadow:0 8px 20px rgba(10,109,160,.10);transform:translateY(-2px)}
.mm-link:active{transform:scale(.985)}
.mm-acct{background:linear-gradient(135deg,var(--brand),var(--teal));border-color:transparent;color:#fff;font-size:16px;font-weight:900;padding:18px 16px;box-shadow:0 8px 24px rgba(10,109,160,.22)}
.mm-acct .mm-ic{color:#fff;background:rgba(255,255,255,.2)}
.mm-lang{background:var(--bg-soft);border-style:dashed;margin-top:8px;color:var(--ink-2)}
.mm-lang .mm-ic{color:var(--ink-3)}
@media(max-width:1000px){.nav-burger{display:flex}.nav-actions .lang-btn,.nav-actions .acct-btn,.nav-actions .theme-btn{display:none}}
@media(min-width:1001px){.mmenu{display:none!important}}
.announce-bar{background:linear-gradient(100deg,#0a4a6b,#0a6da0 55%,#1e9bd1);color:#fff;text-align:center;font-weight:700;font-size:13.5px;padding:9px 16px;letter-spacing:.2px}
.nav-links a.active{color:var(--brand);position:relative}
.nav-links a.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:60%;height:2.5px;border-radius:2px;background:var(--brand)}
.cat-page-header{background:linear-gradient(135deg,var(--navy) 0%,#0c1e3a 50%,#0a3558 100%);color:#fff;padding:52px 0 42px;margin-bottom:0;position:relative;overflow:hidden}
.cat-page-header::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(91,182,222,.2),transparent 70%);top:-150px;right:-100px;filter:blur(40px)}
.cat-page-header .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.cat-back{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.75);font-weight:700;font-size:13.5px;text-decoration:none;margin-bottom:18px;transition:.25s;padding:6px 14px;border-radius:var(--r-xs);background:rgba(255,255,255,.08)}
.cat-back:hover{color:#fff;background:rgba(255,255,255,.15)}
.cat-page-title{font-size:clamp(28px,5vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.15;background:linear-gradient(135deg,#fff 30%,var(--teal-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cat-page-desc{font-size:15.5px;color:rgba(255,255,255,.7);font-weight:500;margin-top:12px;max-width:520px;line-height:1.6}
@media(max-width:640px){.cat-page-header{padding:36px 0 28px}.cat-page-title{font-size:24px}}
.maint-screen{position:fixed;inset:0;z-index:150;background:linear-gradient(160deg,#0b1020,#13203f);display:grid;place-items:center;padding:24px;text-align:center;color:#fff}
.maint-box{max-width:440px}
.maint-logo{width:64px;height:64px;border-radius:4px;background:linear-gradient(135deg,#0a6da0,#5bb6de);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:32px;color:#fff;margin:0 auto 18px}
.maint-box h2{font-size:26px;font-weight:900;margin-bottom:12px}
.maint-box p{font-size:15px;color:#cfdaef;line-height:1.6;margin-bottom:22px}
.maint-admin{height:42px;padding:0 22px;border-radius:3px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.25)}
.maint-admin:hover{background:rgba(255,255,255,.2)}
body.maint-on{overflow:hidden}
.badge.feat{inset-inline-start:auto;inset-inline-end:12px;background:linear-gradient(120deg,#7a5cff,#9a6cff);color:#fff}
.badge.low{top:auto;bottom:12px;inset-inline-start:12px;background:#fff3e0;color:#b06d00}
.bulk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--bg-soft);border-radius:var(--r-md) var(--r-md) 0 0}
.bulk-bar .bchk{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer}
.bulk-bar .bsel{font-size:12.5px;color:var(--ink-3);font-weight:700}
.bulk-bar .bacts{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
tr.row-low{background:#fff8ec}
.qcell.low{color:#b06d00;font-weight:800}
#featured{background:linear-gradient(180deg,var(--bg-soft),transparent);padding-bottom:8px}
.feat-row{margin-top:6px}
.card{transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .3s}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 44px -22px rgba(20,30,70,.35)}
.card-media{background:linear-gradient(160deg,#f4f6fb,#eceff7)}
.sec-title{letter-spacing:-.02em}
.badge{box-shadow:0 6px 14px -6px rgba(0,0,0,.28)}
.wordmark{font-family:'Poppins','Cairo',sans-serif;font-weight:700;font-size:23px;line-height:1;white-space:nowrap;letter-spacing:-.01em;color:#0A6DA0;display:inline-block}
.wm-text{font-family:'Fredoka','Cairo',sans-serif;font-weight:700;font-size:60px;letter-spacing:2px}
.foot-brand .wordmark{font-size:28px}
.bico{height:30px;width:auto;flex:none;display:inline-block;vertical-align:middle}
.foot-brand .bico{height:38px}
.foot-logo{display:flex;align-items:center;justify-content:center;gap:24px;padding:32px 0 10px;margin-top:16px;border-top:1.5px solid var(--line);flex-wrap:wrap}
.foot-logo .fbico{height:72px;width:auto;flex:none}
.fl-text{display:flex;flex-direction:column;gap:8px}
.fl-row{display:flex;align-items:flex-start;gap:18px}
.fl-en{font-family:'Poppins',sans-serif;font-weight:700;font-size:40px;line-height:.9;letter-spacing:-.03em;color:#0A6DA0}
.fl-tag{font-family:'Cairo',sans-serif;font-weight:500;font-size:13px;line-height:1.4;color:#0A6DA0;text-align:right;padding-top:5px}
.fl-ar{font-family:'Cairo',sans-serif;font-weight:800;font-size:33px;line-height:1;color:#0A6DA0;text-align:right}
@media(max-width:640px){.foot-logo{gap:14px}.foot-logo .fbico{height:56px}.fl-en{font-size:30px}.fl-ar{font-size:25px}.fl-row{gap:12px}}
.mm-brand{display:inline-flex;align-items:center;gap:10px}
.mm-brand .bico{height:34px}
.nav-links{display:flex;gap:4px;margin-inline-start:16px}
.nav-links a{font-size:14px;font-weight:600;color:var(--ink-2);padding:10px 16px;border-radius:var(--r);transition:.25s}
.nav-links a:hover{color:var(--brand);background:var(--brand-soft)}
.nav-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink);transition:.25s;position:relative}
.icon-btn:hover{background:var(--bg-soft)}
.lang-btn{font-weight:800;font-size:13px;padding:0 14px;height:40px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink);transition:.2s;letter-spacing:.3px}
.lang-btn:hover{background:var(--bg-soft);border-color:#dadadf}
.cart-btn{display:flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;font-weight:700;font-size:13.5px;transition:.3s cubic-bezier(.2,.7,.2,1);box-shadow:0 4px 14px rgba(10,109,160,.18)}
.cart-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,109,160,.28)}
.cart-count{min-width:20px;height:20px;padding:0 5px;border-radius:2px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center}

.hero{position:relative;overflow:hidden;padding:80px 0 72px;background:var(--bg);min-height:86vh;display:flex;align-items:center}
.hero .wrap{width:100%}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45}
.blob.b1{width:560px;height:560px;background:radial-gradient(circle,rgba(10,109,160,.18),transparent 70%);top:-180px;inset-inline-end:-140px}
.blob.b2{width:500px;height:500px;background:radial-gradient(circle,rgba(10,109,160,.12),transparent 70%);bottom:-200px;inset-inline-start:-140px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);padding:8px 16px;border-radius:var(--r);border:1.5px solid rgba(10,109,160,.15);margin-bottom:24px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(10,109,160,.15)}
h1.hero-title{font-size:clamp(30px,5.6vw,66px);line-height:1.06;letter-spacing:-.03em;font-weight:900;margin-bottom:20px}
.hero-title .grad{background:linear-gradient(115deg,var(--navy),var(--brand) 52%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:520px;margin-bottom:32px;font-weight:500}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;height:56px;padding:0 30px;border-radius:var(--r-lg);transition:.3s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--brand) 60%,var(--brand-2));color:#fff;box-shadow:0 8px 24px rgba(10,109,160,.28)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,109,160,.36)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.hero-stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.stat .n{font-size:26px;font-weight:900;letter-spacing:-.02em}
.stat .l{font-size:13px;color:var(--ink-3);font-weight:600}
.hero-visual{position:relative;display:grid;place-items:center}
.hero-card{width:100%;max-width:450px;background:linear-gradient(160deg,#ffffff,#f6f9fc);border:1.5px solid rgba(10,109,160,.08);border-radius:var(--r-xl);padding:20px;box-shadow:0 30px 80px rgba(10,74,107,.12);position:relative;animation:floaty 6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-card .tag{position:absolute;top:18px;inset-inline-start:18px;background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;font-size:11.5px;font-weight:700;padding:7px 14px;border-radius:var(--r-xs);z-index:2;box-shadow:0 4px 12px rgba(10,109,160,.25)}
.chip{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1.5px solid rgba(10,109,160,.08);border-radius:var(--r-md);padding:11px 14px;box-shadow:0 8px 24px rgba(10,74,107,.08);font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:9px;z-index:3}
.chip .ic{width:28px;height:28px;border-radius:var(--r-xs);display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),#daedf8);color:var(--brand)}
.chip.c1{top:30px;inset-inline-end:-14px;animation:floaty 5s ease-in-out infinite}
.chip.c2{bottom:42px;inset-inline-start:-18px;animation:floaty 7s ease-in-out infinite .4s}
.chip small{display:block;color:var(--ink-3);font-weight:600;font-size:10.5px}

.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft2);padding:20px 0}
.brands-in{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap}
.brands-in .bw{font-weight:800;font-size:18px;color:#b6b6bd;letter-spacing:.5px;transition:.25s}
.brands-in .bw:hover{color:var(--ink-2)}

.section{padding:96px 0}
.sec-head{margin-bottom:46px;max-width:680px}
.sec-eye{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.8px;text-transform:uppercase;margin-bottom:12px;display:inline-flex;align-items:center;gap:8px}
.sec-eye::before{content:'';width:28px;height:2.5px;border-radius:2px;background:var(--brand)}
.sec-title{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.sec-desc{color:var(--ink-2);font-size:17px;margin-top:14px;font-weight:500;line-height:1.65}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{position:relative;border:none;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--bg-blue),#f0f7fc);padding:28px;cursor:pointer;transition:.35s cubic-bezier(.2,.7,.2,1);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 8px rgba(10,109,160,.06)}
.cat-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(10,109,160,.14)}
.cat-card .cic{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;box-shadow:0 6px 16px rgba(10,109,160,.22)}
.cat-card h3{font-size:20px;font-weight:900;letter-spacing:-.02em;margin-top:auto;color:var(--navy)}
.cat-card p{font-size:13.5px;color:var(--ink-2);font-weight:600;margin-top:4px}
.cat-card .arrow{position:absolute;top:26px;inset-inline-end:26px;color:var(--brand);transition:.3s;opacity:.5}
.cat-card:hover .arrow{opacity:1;transform:translateX(-4px)}
[dir=ltr] .cat-card:hover .arrow{transform:translateX(4px)}
.cat-card.has-bg{background-size:cover;background-position:center;border-color:transparent;color:#fff}
.cat-card.has-bg h3{color:#fff}
.cat-card.has-bg p{color:rgba(255,255,255,.85)}
.cat-card.has-bg .cic{background:rgba(255,255,255,.18);color:#fff;box-shadow:none;backdrop-filter:blur(8px)}
.cat-card.has-bg .arrow,.cat-card.has-bg:hover .arrow{color:#fff}
.cat-img-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat-img-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:10px}
.cat-img-prev{width:66px;height:52px;flex:0 0 auto;border-radius:var(--r-xs);background:var(--bg-soft) center/cover no-repeat;display:grid;place-items:center;color:var(--ink-3)}
.cat-img-meta{min-width:0}.cat-img-meta b{font-size:13px;display:block;margin-bottom:6px}
.cat-img-acts{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:560px){.cat-img-grid{grid-template-columns:1fr}}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.pill{font-size:14px;font-weight:700;padding:10px 20px;border-radius:var(--r);border:1.5px solid var(--line);color:var(--ink-2);background:#fff;transition:.22s}
.pill:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.pill.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 14px rgba(10,109,160,.22)}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.35s cubic-bezier(.2,.7,.2,1);position:relative}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(10,74,107,.12);border-color:rgba(10,109,160,.15)}
.card-media{position:relative;background:var(--bg-soft);cursor:pointer;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0}
.card-media .prod-svg{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media .prod-svg{transform:scale(1.05)}
.badge{position:absolute;top:14px;inset-inline-start:14px;z-index:2;font-size:11px;font-weight:800;padding:6px 12px;border-radius:var(--r-xs);letter-spacing:.2px}
.badge.sale{background:var(--brand);color:#fff}
.badge.new{background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff}
.badge.best{background:var(--navy);color:#fff}
.badge.pro{background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff}
.quick{position:absolute;bottom:12px;inset-inline-end:12px;z-index:2;width:44px;height:44px;border-radius:var(--r);background:var(--brand);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(10,109,160,.28);display:grid;place-items:center;color:#fff;opacity:0;transform:translateY(8px);transition:.28s}
.card:hover .quick{opacity:1;transform:translateY(0)}
.quick:hover{background:var(--navy);transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,109,160,.36)}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card-brand{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.card-name{font-size:17px;font-weight:800;letter-spacing:-.02em;cursor:pointer;line-height:1.25}
.card-name:hover{color:var(--brand)}
.card-tag{font-size:13px;color:var(--ink-3);font-weight:500;margin-top:5px;line-height:1.45;min-height:36px}
.rate{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.stars{display:flex;gap:1px;color:#ff9f0a}
.swatches{display:flex;gap:6px;margin-top:12px}
.sw{width:18px;height:18px;border-radius:var(--r-xs);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sw.more{font-size:10px;font-weight:800;color:var(--ink-3);display:grid;place-items:center;border:none;box-shadow:none}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:10px}
.price{display:flex;flex-direction:column;line-height:1.1}
.price .now{font-size:19.5px;font-weight:900;letter-spacing:-.02em}
.price .was{font-size:12.5px;color:var(--ink-3);text-decoration:line-through;font-weight:600}
.add-btn{height:42px;padding:0 18px;border-radius:var(--r);background:var(--brand);color:#fff;font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:7px;transition:.25s;white-space:nowrap;box-shadow:0 4px 12px rgba(10,109,160,.18)}
.add-btn:hover{background:var(--navy);box-shadow:0 8px 20px rgba(10,109,160,.28);transform:translateY(-1px)}

.feat{background:linear-gradient(180deg,#f6f9fc,var(--bg-soft2));border-top:none;border-bottom:none}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat-card{background:#fff;border:none;border-radius:var(--r-lg);padding:34px 30px;box-shadow:0 2px 12px rgba(10,74,107,.06);transition:.3s cubic-bezier(.2,.7,.2,1)}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(10,74,107,.10)}
.feat-card .fic{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;margin-bottom:22px;box-shadow:0 6px 16px rgba(10,109,160,.20)}
.feat-card h3{font-size:19px;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.feat-card p{font-size:14.5px;color:var(--ink-2);line-height:1.7;font-weight:500}

.deliv-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:46px;align-items:center}
.deliv-card{background:linear-gradient(160deg,var(--navy),#0c1e3a);color:#fff;border-radius:var(--r-xl);padding:42px;box-shadow:0 24px 60px rgba(10,74,107,.22);position:relative;overflow:hidden}
.deliv-card .glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(10,109,160,.45),transparent 70%);filter:blur(50px);top:-100px;inset-inline-end:-80px}
.deliv-card h3{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-bottom:14px;position:relative}
.deliv-card p{color:#b8c4e0;font-size:15.5px;line-height:1.7;position:relative;font-weight:500}
.deliv-feats{display:flex;flex-direction:column;gap:16px;margin-top:28px;position:relative}
.deliv-feats .df{display:flex;align-items:center;gap:14px;font-size:14.5px;font-weight:600}
.deliv-feats .df .dic{width:42px;height:42px;border-radius:var(--r-md);background:rgba(10,109,160,.25);display:grid;place-items:center;flex:0 0 auto;color:var(--teal-light)}
.deliv-feats .df small{display:block;color:#8e97b8;font-weight:500;font-size:12.5px}
.city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.city{border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:#fff;transition:.3s cubic-bezier(.2,.7,.2,1);display:flex;align-items:center;gap:13px}
.city:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(10,109,160,.10);transform:translateY(-3px)}
.city .pin{width:40px;height:40px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--brand-soft),#daedf8);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.city .cn{font-weight:800;font-size:14.5px}
.city .ce{font-size:12px;color:var(--ink-3);font-weight:600}
.city .cf{margin-inline-start:auto;font-weight:900;font-size:14px;color:var(--brand)}
.dlv-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border:1.5px solid var(--brand);border-radius:var(--r-md);background:transparent;color:var(--brand);font-size:14px;font-weight:700;cursor:pointer;transition:.2s}
.dlv-toggle-btn:hover{background:var(--brand);color:#fff}

.pay-band{background:linear-gradient(180deg,var(--bg-soft2),#f0f5fa);border-top:none;border-bottom:none;padding:0}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pay-card{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;transition:.3s cubic-bezier(.2,.7,.2,1);box-shadow:0 2px 8px rgba(10,74,107,.04)}
.pay-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(10,109,160,.10);border-color:rgba(10,109,160,.18)}
.pay-mark{width:52px;height:36px;border-radius:var(--r);display:grid;place-items:center;flex:0 0 auto;background:transparent;overflow:hidden}
.pay-mark svg{width:52px;height:36px;color:var(--brand);display:block}
/* uploaded payment logos are <img>, and every rule above sizes svg only — give img the same box */
.pay-mark img.pay-logo{width:52px;height:36px;object-fit:contain;display:block}
.pay-card b{font-size:15px;font-weight:800;display:block;letter-spacing:-.01em;color:var(--ink)}
.pay-card small{font-size:13px;color:var(--ink-3);font-weight:500;line-height:1.5}
.pay-foot-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pay-foot-row .pm{height:30px;width:46px;border-radius:var(--r-xs);background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.2s}
.pay-foot-row .pm:hover{opacity:.8}
.pay-foot-row .pm svg{height:100%;width:100%}
.pay-foot-row .pm img.pay-logo{height:100%;width:100%;object-fit:contain;display:block}

.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px}
.testi .stars{margin-bottom:14px;font-size:15px}
.testi p{font-size:15px;line-height:1.65;color:var(--ink);font-weight:500;margin-bottom:18px}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .av{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px}
.testi .who b{font-size:14.5px;font-weight:800}
.testi .who small{display:block;color:var(--ink-3);font-size:12.5px;font-weight:600}

.cta-band{padding:72px 0}
.cta-inner{background:linear-gradient(135deg,var(--navy),var(--brand) 50%,var(--teal));border-radius:var(--r-xl);padding:56px;color:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(10,74,107,.30)}
.cta-inner::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(91,182,222,.3),transparent 70%);top:-150px;right:-100px;filter:blur(40px)}
.cta-inner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -20%,rgba(255,255,255,.15),transparent 50%)}
.cta-inner h2{font-size:clamp(28px,3.5vw,40px);font-weight:900;letter-spacing:-.03em;position:relative;margin-bottom:14px;z-index:1}
.cta-inner p{font-size:17px;opacity:.92;position:relative;font-weight:500;max-width:560px;margin:0 auto 30px;z-index:1;line-height:1.7}
.news-form{display:flex;gap:10px;max-width:480px;margin:0 auto;position:relative;flex-wrap:wrap;justify-content:center}
.news-form input{flex:1;min-width:220px;height:54px;border-radius:var(--r);border:none;padding:0 20px;font-size:15px;font-weight:600;background:rgba(255,255,255,.95);color:var(--ink)}
.news-form input::placeholder{color:var(--ink-3)}
.news-form button{height:54px;padding:0 26px;border-radius:var(--r);background:#1d1d1f;color:#fff;font-weight:800;font-size:15px;transition:.25s}
.news-form button:hover{transform:translateY(-2px);background:#000}

footer{background:linear-gradient(180deg,#f8fafc,#f0f4f8);border-top:none;padding:72px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;margin-bottom:48px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:14.5px;color:var(--ink-2);line-height:1.7;max-width:320px;font-weight:500}
.foot-soc{display:flex;gap:10px;margin-top:22px}
.foot-soc a{width:42px;height:42px;border-radius:var(--r-md);background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink-2);transition:.3s cubic-bezier(.2,.7,.2,1);box-shadow:0 2px 6px rgba(10,74,107,.04)}
.foot-soc a:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-3px);box-shadow:0 8px 20px rgba(10,109,160,.20)}
.foot-col h4{font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--brand);margin-bottom:18px}
.foot-col a,.foot-col .fl{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);font-weight:600;padding:7px 0;transition:.2s}
.foot-col a:hover{color:var(--brand);padding-inline-start:4px}
.foot-col .fl{cursor:default}
.foot-bottom{border-top:1.5px solid var(--line);padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom p{font-size:13px;color:var(--ink-3);font-weight:600}
.admin-link{font-size:12px;font-weight:700;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.admin-link:hover{color:var(--brand)}

.scrim{position:fixed;inset:0;background:rgba(10,40,60,.35);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.35s;z-index:90}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;height:100%;width:440px;max-width:94vw;background:#fff;z-index:100;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(10,74,107,.12);transition:transform .4s cubic-bezier(.3,.8,.3,1);border-radius:var(--r-xl) 0 0 var(--r-xl)}
html[dir=ltr] .drawer{right:0;left:auto;transform:translateX(100%)}
html[dir=rtl] .drawer{left:0;right:auto;transform:translateX(-100%);border-radius:0 var(--r-xl) var(--r-xl) 0}
.drawer.open{transform:translateX(0)!important}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1.5px solid var(--line);flex:0 0 auto}
.drawer-head h3{font-size:20px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:20px 24px;min-height:0}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.cart-item .ci-img{width:78px;height:78px;border-radius:var(--r-md);background:var(--bg-soft);border:1.5px solid var(--line);flex:0 0 auto;overflow:hidden}
.cart-item .ci-img svg{width:100%;height:100%}
.ci-info{flex:1;min-width:0}
.ci-info .cin{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.ci-info .cio{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:4px}
.ci-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.qty{display:flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:var(--r);padding:3px}
.qty button{width:28px;height:28px;border-radius:var(--r-xs);display:grid;place-items:center;font-weight:800;color:var(--ink-2);transition:.2s}
.qty button:hover{background:var(--brand-soft);color:var(--brand)}
.qty span{min-width:28px;text-align:center;font-weight:800;font-size:14px}
.ci-price{font-weight:900;font-size:15.5px;color:var(--brand)}
.ci-remove{font-size:12px;color:var(--ink-3);font-weight:700;transition:.2s}
.ci-remove:hover{color:var(--danger)}
.cart-empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.cart-empty .ce-ic{width:88px;height:88px;border-radius:var(--r-xl);background:var(--brand-soft);display:grid;place-items:center;margin:0 auto 20px;color:var(--brand)}
.cart-empty h4{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px}
.cart-empty p{font-size:14px;font-weight:500}
.cust-form{margin-top:20px;border-top:1.5px solid var(--line);padding-top:18px}
.cust-form .cf-h{font-size:12.5px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px}
.fld-row{margin-bottom:12px}
.fld-row label{font-size:11.5px;font-weight:700;color:var(--ink-3);display:block;margin-bottom:6px}
.drawer-foot{border-top:1.5px solid var(--line);padding:20px 24px 24px;background:linear-gradient(180deg,var(--bg-soft2),#f0f4f8);flex:0 0 auto}
/* delivery city and payment method each get their own full-width line (they were side-by-side and cramped) */
.cart-selects{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
@media(max-width:480px){.cart-selects{grid-template-columns:1fr}.promo-wrap{padding:0 36px}.promo-card .pc-title{font-size:20px}.promo-card .pc-desc{font-size:12px}.promo-card .pc-cta{font-size:12px;padding:7px 18px}.promo-arrow{width:32px;height:32px}}
.deliv-select{margin-bottom:0}
.deliv-select label{font-size:11.5px;font-weight:800;color:var(--ink-2);display:flex;align-items:center;gap:5px;margin-bottom:6px}
.deliv-select label svg{width:14px;height:14px;color:var(--brand);flex:0 0 auto}
.field{width:100%;height:48px;border-radius:var(--r);border:1.5px solid var(--line);background:#fff;padding:0 14px;font-size:14px;font-weight:600;color:var(--ink);appearance:none;transition:.25s}
.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(10,109,160,.10)}
select.field{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center}
[dir=ltr] select.field{background-position:right 14px center}
textarea.field{height:auto;min-height:64px;padding:11px 14px;resize:vertical}
.sum-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:var(--ink-2);padding:6px 0}
.sum-row.total{font-size:19px;font-weight:900;color:var(--brand);border-top:1.5px solid var(--line);margin-top:10px;padding-top:14px}
.sum-row .free{color:var(--ok);font-weight:800}
.cod-note{display:flex;align-items:center;gap:10px;background:var(--ok-soft);color:#11774a;font-size:12.5px;font-weight:700;padding:12px 14px;border-radius:var(--r);margin:14px 0}
.checkout-btn{width:100%;height:56px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;font-weight:800;font-size:15.5px;display:flex;align-items:center;justify-content:center;gap:10px;transition:.3s cubic-bezier(.2,.7,.2,1);box-shadow:0 8px 24px rgba(10,109,160,.22)}
.checkout-btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,109,160,.30)}
.checkout-btn.wa{background:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.22)}
.checkout-btn.wa:hover{background:#1fb558;box-shadow:0 16px 40px rgba(37,211,102,.30)}
.cart-pay{margin-top:16px;text-align:center}
.cart-pay .cpl{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.4px;text-transform:uppercase;margin-bottom:9px}
.cart-pay .pay-foot-row{justify-content:center}

.modal-scrim{position:fixed;inset:0;background:rgba(245,247,250,.97);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:55;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:68px 22px 60px;backdrop-filter:blur(6px)}
.modal-scrim.open{opacity:1;visibility:visible}
.modal{position:relative;width:min(1080px,100%);margin:0 auto;background:#fff;border-radius:var(--r-xl);display:grid;grid-template-columns:1.1fr 1fr;box-shadow:0 30px 80px rgba(10,74,107,.12);border:1.5px solid rgba(10,109,160,.06);overflow:hidden}
.modal-scrim.open .modal{transform:scale(1) translateY(0)}
.modal-media{background:linear-gradient(180deg,#f0f4f8 0%,#e8eef4 100%);padding:32px;display:flex;flex-direction:column;justify-content:center;position:relative;min-height:55vh;border-start-start-radius:var(--r-xl);border-end-start-radius:var(--r-xl)}
.modal-media .m-badge{position:absolute;top:22px;inset-inline-start:22px;z-index:2}
.modal-media .m-img{position:sticky;top:88px;display:flex;align-items:center;justify-content:center;width:100%;min-height:280px}
.modal-media .m-img img{display:block;max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:var(--r-md)}
.modal-media .m-img svg{width:100%;max-width:100%;max-height:calc(100vh - 150px)}
.modal-info{padding:36px 38px;border-start-end-radius:var(--r-xl);border-end-end-radius:var(--r-xl);overflow-y:auto;max-height:calc(100vh - 100px)}
.modal-info .mi-brand{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.modal-info h2{font-size:26px;font-weight:900;letter-spacing:-.025em;margin:6px 0 10px;line-height:1.2}
.modal-info .mi-desc{font-size:14px;color:var(--ink-2);line-height:1.7;font-weight:500;margin-bottom:18px}
.mi-price{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.mi-price .now{font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--brand)}
.mi-price .was{font-size:15px;color:var(--ink-3);text-decoration:line-through;font-weight:600}
.mi-price .off{font-size:11.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--teal));padding:4px 10px;border-radius:var(--r-xs);box-shadow:0 2px 8px rgba(10,109,160,.18)}
.opt-block{margin-bottom:18px}
.opt-block .ol{font-size:12.5px;font-weight:800;margin-bottom:8px;display:flex;justify-content:space-between}
.opt-block .ol .ov{color:var(--ink-2);font-weight:600}
.opt-choices{display:flex;gap:8px;flex-wrap:wrap}
.opt{padding:9px 15px;border-radius:var(--r);border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-2);transition:.25s;background:#fff}
.opt:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.opt.active{border-color:var(--brand);color:#fff;background:var(--brand);box-shadow:0 4px 12px rgba(10,109,160,.18)}
.opt-sw{display:flex;gap:8px;flex-wrap:wrap}
.oswatch{width:34px;height:34px;border-radius:var(--r-xs);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;transition:.25s;position:relative}
.oswatch:hover{transform:scale(1.08)}
.oswatch.active{box-shadow:0 0 0 2px var(--brand),0 0 0 4px #fff}
.mi-buy{display:flex;gap:12px;align-items:center;margin:6px 0 14px}
.mi-buy .qty{height:50px;padding:0 4px;border-color:var(--line)}
.mi-buy .qty button{width:36px;height:42px}
.mi-buy .qty span{min-width:32px;font-size:15px}
.mi-buy .btn-primary{flex:1;height:52px}
.mi-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:var(--r);background:#25D366;color:#fff;font-weight:800;font-size:13.5px;margin-bottom:18px;transition:.25s;box-shadow:0 4px 14px rgba(37,211,102,.22)}
.mi-wa:hover{background:#1fb558;transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,211,102,.28)}
.mi-deliv{border:1.5px solid rgba(10,109,160,.10);border-radius:var(--r-md);padding:16px 18px;margin-bottom:18px;background:linear-gradient(180deg,var(--brand-soft),#f4f9fd)}
.mi-deliv .mdh{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;margin-bottom:10px}
.mi-deliv .mdh svg{color:var(--brand)}
.mi-deliv .eta{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:8px;display:flex;align-items:center;gap:7px}
.mi-deliv .eta b{color:var(--brand)}
.mi-pay-section{border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:18px;background:#fff}
.mi-pay-section .mph{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mi-pay-section .mph svg{width:14px;height:14px;color:var(--brand)}
.mi-pay-section .pay-foot-row{gap:8px}
.specs{border-top:1.5px solid var(--line);padding-top:18px;margin-top:4px}
.specs h4{font-size:13.5px;font-weight:800;margin-bottom:12px;color:var(--brand)}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.spec-row .sk{color:var(--ink-3);font-weight:600}
.spec-row .sv{font-weight:700;text-align:end}
.modal-close{position:absolute;top:18px;inset-inline-end:18px;z-index:5;width:40px;height:40px;border-radius:var(--r-md);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);display:grid;place-items:center;box-shadow:0 4px 12px rgba(10,74,107,.08);color:var(--ink);transition:.25s;border:1.5px solid rgba(10,109,160,.06)}
.modal-close:hover{background:#fff;color:var(--brand);border-color:var(--brand)}
.pv-bar{display:none}
.pv-back{display:none}
.trust-mini{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.trust-mini .tm{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:5px 10px;border-radius:var(--r-xs)}

.wa-float{position:fixed;bottom:24px;inset-inline-start:24px;z-index:95;display:flex;align-items:center;gap:11px;height:58px;padding:0 24px;border-radius:var(--r-xl);background:#25D366;color:#fff;box-shadow:0 14px 34px rgba(37,211,102,.38);transition:.3s cubic-bezier(.2,.7,.2,1);font-weight:800;font-size:14px}
.wa-float:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px rgba(37,211,102,.50)}
.wa-float svg{width:30px;height:30px;flex:0 0 auto}
@media(max-width:640px){.wa-float{padding:0;width:56px;height:56px;justify-content:center;border-radius:var(--r-lg)}.wa-float .wal{display:none}}

.toasts{position:fixed;bottom:24px;inset-inline-end:24px;z-index:2000;display:flex;flex-direction:column;gap:10px}
.toast{background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;padding:16px 20px;border-radius:var(--r-md);box-shadow:0 16px 40px rgba(10,74,107,.20);display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;min-width:270px;transform:translateY(20px);opacity:0;transition:.35s cubic-bezier(.2,.7,.2,1)}
.toast.show{transform:translateY(0);opacity:1}
.toast .tic{width:32px;height:32px;border-radius:var(--r-xs);background:rgba(255,255,255,.2);display:grid;place-items:center;flex:0 0 auto}
.toast.err .tic{background:var(--danger)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1300px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){
  .nav-links{display:none}
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-visual{order:-1}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid,.testi-grid{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr 1fr}
  .deliv-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .modal{grid-template-columns:1fr}
  .modal-media{padding:24px;border-radius:var(--r-lg) var(--r-lg) 0 0;min-height:auto}
  .modal-info{border-radius:0 0 var(--r-lg) var(--r-lg);max-height:none;padding:28px 24px}
  .modal-media .m-img{position:static;min-height:200px}
}
@media(max-width:640px){
  .section{padding:54px 0}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .city-grid,.pay-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-stats{gap:20px}
  .card-tag{display:none}
  .cta-inner{padding:34px 22px}
  .brands-in{gap:26px}
  .hero{min-height:auto;padding:38px 0 40px}
  .hero-sub{font-size:15px;margin-bottom:20px}
  .eyebrow{font-size:11.5px;padding:6px 11px;margin-bottom:14px}
  .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin-top:24px;text-align:center}
  .hero-stats .stat{min-width:0}
  .hero-stats .n{font-size:21px}
  .hero-stats .l{font-size:10.5px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .announce-bar{font-size:12px;padding:8px 12px}
  .a-modal-scrim{padding:0}
  .a-modal{max-height:100vh;width:100%;border-radius:0}
  .modal-scrim{padding:60px 10px 40px}
  .modal-info{padding:22px 18px;max-height:none}
  .modal-media{min-height:auto;padding:16px}
  .modal-media .m-img{min-height:160px}
  .m-img img.prod-img{max-height:48vh}
  .modal-media .m-img svg{max-height:44vh}
  .mi-pay-section{padding:12px 14px}
  .mi-price .now{font-size:26px}
  .nav-in{gap:10px}
  .acct-label{display:none}
  h1.hero-title{font-size:clamp(30px,8vw,42px)}
}

/* ---------- Admin ---------- */
.admin{position:fixed;inset:0;z-index:300;background:var(--bg-soft);display:none}
.admin.open{display:flex}
.admin-side{width:256px;flex:0 0 auto;background:linear-gradient(178deg,#082940 0%,#0a4a6b 40%,#062a3e 100%);color:#fff;display:flex;flex-direction:column;padding:20px 14px;overflow-y:auto;box-shadow:4px 0 20px rgba(6,42,62,.25)}
.admin-side .a-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;font-weight:900;font-size:20px;letter-spacing:-.02em}
.admin-side .a-brand .a-logo{width:36px;height:36px;border-radius:var(--r-md);background:linear-gradient(135deg,#0a6da0,#5bb6de);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;box-shadow:0 4px 12px rgba(10,109,160,.4)}
.a-nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.a-nav button{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r);font-size:13.5px;font-weight:700;color:rgba(200,215,230,.75);transition:.22s;text-align:start;position:relative}
.a-nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.a-nav button.active{background:linear-gradient(90deg,rgba(10,109,160,.5),rgba(91,182,222,.2));color:#fff;font-weight:800;box-shadow:inset 3px 0 0 #5bb6de}
.a-nav button svg{width:18px;height:18px;flex:0 0 auto}
.a-side-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.a-side-foot button{width:100%;display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:var(--r);font-size:13.5px;font-weight:700;color:#aab2d8;transition:.18s}
.a-side-foot button svg{width:18px;height:18px;flex:0 0 auto}
.a-side-foot button:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.admin-top{height:68px;flex:0 0 auto;background:linear-gradient(90deg,#fff,#f8fbfe);border-bottom:1.5px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:14px;box-shadow:0 2px 12px rgba(10,74,107,.06);z-index:2}
.admin-top h2{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.admin-top .at-act{margin-inline-start:auto;display:flex;gap:9px}
.admin-body{flex:1;overflow-y:auto;padding:28px;background:linear-gradient(180deg,#f5f8fc,#edf2f8)}
.a-page{display:none}
.a-page.active{display:block;animation:afade .3s ease}
@keyframes afade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.a-btn{height:42px;padding:0 18px;border-radius:var(--r);font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;transition:.2s;border:1px solid transparent;white-space:nowrap}
.a-btn.primary{background:linear-gradient(120deg,#0a4a6b,#0a6da0 55%,#1e9bd1);color:#fff;box-shadow:0 2px 8px rgba(10,109,160,.18)}
.a-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(10,109,160,.22)}
.a-btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.a-btn.ghost:hover{background:var(--bg-soft)}
.a-btn.danger{background:var(--danger-soft);color:var(--danger)}
.a-btn.danger:hover{background:#fbd9d3}
.a-btn.sm{height:34px;padding:0 12px;font-size:12.5px;border-radius:var(--r-xs)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.stat-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(10,74,107,.10)}
.stat-card::before{content:'';position:absolute;top:0;inset-inline-start:0;width:4px;height:100%;border-radius:0 3px 3px 0}
.stat-card:nth-child(1)::before{background:var(--brand)}
.stat-card:nth-child(2)::before{background:var(--brand)}
.stat-card:nth-child(3)::before{background:var(--ok)}
.stat-card:nth-child(4)::before{background:var(--warn)}
.stat-card:nth-child(5)::before{background:#6b4cff}
.stat-card:nth-child(6)::before{background:#e0a000}
.stat-card:nth-child(7)::before{background:#e0556e}
.stat-card .si{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:12px}
.stat-card .sv{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.stat-card .sl{font-size:12.5px;color:var(--ink-3);font-weight:700;margin-top:4px}
.stat-card .st{font-size:11px;font-weight:800;margin-top:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px}
.stat-card .st.up{color:#0e8345;background:var(--ok-soft)}
.stat-card .st.down{color:var(--danger);background:var(--danger-soft)}
.stat-card .st.flat{color:var(--ink-3);background:var(--bg-soft)}
/* --- revenue row --- */
.rev-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.rev-box{background:linear-gradient(135deg,#0a4a6b 0%,#0a6da0 60%,#1e9bd1 100%);color:#fff;border-radius:var(--r-lg);padding:22px 20px;position:relative;overflow:hidden}
.rev-box::after{content:'';position:absolute;top:-30px;inset-inline-end:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.07)}
.rev-box .rv-label{font-size:11.5px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.4px}
.rev-box .rv-val{font-size:26px;font-weight:900;margin-top:6px;letter-spacing:-.02em}
.rev-box .rv-sub{font-size:11.5px;font-weight:600;opacity:.6;margin-top:4px}
.rev-box.light{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.rev-box.light .rv-val{color:var(--brand)}
.rev-box.light::after{background:rgba(10,109,160,.04)}
/* --- order distribution --- */
.ord-dist{margin-bottom:26px}
.od-bars{display:flex;gap:0;border-radius:var(--r-xs);overflow:hidden;height:10px;background:var(--line-2)}
.od-bar{height:100%;transition:width .4s ease}
.od-bar.pending{background:var(--warn)}
.od-bar.confirmed{background:#4b8fdd}
.od-bar.shipped{background:#7c5cd6}
.od-bar.delivered{background:var(--ok)}
.od-bar.cancelled{background:var(--danger)}
.od-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.od-leg{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-2)}
.od-dot{width:9px;height:9px;border-radius:50%}
/* --- quick actions --- */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);cursor:pointer;transition:.22s;text-align:center}
.qa-btn:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px);box-shadow:0 6px 20px rgba(10,109,160,.08)}
.qa-ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);transition:.22s}
.qa-btn:hover .qa-ic{background:var(--brand);color:#fff}
.qa-lb{font-size:12.5px;font-weight:800;color:var(--ink)}
/* --- low stock alert --- */
.low-alert{background:linear-gradient(135deg,#fff6e6,#fff0d6);border:1.5px solid #f0d090;border-radius:var(--r-lg);padding:18px 22px;margin-bottom:26px;display:flex;align-items:center;gap:16px}
.low-alert .la-ic{width:44px;height:44px;border-radius:50%;background:var(--warn);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.low-alert .la-tx{font-size:13.5px;font-weight:700;color:#6e4900}
.low-alert .la-tx b{color:#c67a00}
.low-alert .la-btn{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--warn);background:#fff;border:1.5px solid #f0d090;padding:6px 14px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.low-alert .la-btn:hover{background:#fff6e6}
/* --- recent activity mini --- */
.act-feed{list-style:none;padding:0;margin:0}
.act-feed li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px;font-weight:600}
.act-feed li:last-child{border-bottom:none}
.act-feed .af-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.act-feed .af-ts{margin-inline-start:auto;font-size:11px;color:var(--ink-3);font-weight:700;white-space:nowrap}
/* --- admin top bar enhanced --- */
.admin-top .at-live{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);margin-inline-end:8px}
.admin-top .at-live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);animation:livePulse 2s ease infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
/* --- sidebar badge --- */
.a-nav .nav-badge{margin-inline-start:auto;min-width:20px;height:20px;border-radius:3px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.a-nav .nav-badge.warn{background:var(--warn)}
/* --- order bulk bar --- */
.ord-bulk{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--brand-soft);border-bottom:1px solid rgba(10,109,160,.15);flex-wrap:wrap}
.ord-bulk .ob-count{font-size:13px;font-weight:800;color:var(--brand)}
.ord-bulk select{height:34px;border-radius:var(--r-xs);border:1.5px solid var(--brand);padding:0 10px;font-size:12.5px;font-weight:700;background:#fff}
/* --- customer search --- */
.cust-search{margin-bottom:18px}
.cust-search input{height:44px;border-radius:var(--r-lg);border:1.5px solid var(--line);padding:0 16px 0 44px;font-size:14px;font-weight:600;width:100%;max-width:420px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center no-repeat;transition:.22s}
.cust-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
/* --- customer stats --- */
.cust-stat{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px}
.cust-stat.vip{background:linear-gradient(135deg,#ffd700,#ffb700);color:#6e4900}
.cust-stat.regular{background:var(--brand-soft);color:var(--brand)}
.cust-stat.new-c{background:var(--ok-soft);color:#0e8345}
/* --- dashboard grid layout --- */
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:20px}
.dash-grid .full{grid-column:1/-1}
/* --- admin responsive fixes --- */
@media(max-width:860px){.stat-grid{grid-template-columns:1fr 1fr;gap:12px}.rev-row{grid-template-columns:1fr 1fr;gap:12px}.qa-grid{grid-template-columns:1fr 1fr;gap:10px}.dash-grid{grid-template-columns:1fr}.ord-bulk{flex-direction:column;align-items:stretch;gap:8px}}
.a-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;margin-bottom:20px;box-shadow:0 2px 12px rgba(10,74,107,.05);transition:box-shadow .22s}
.a-card:hover{box-shadow:0 4px 18px rgba(10,74,107,.08)}
.a-card-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1.5px solid var(--line);background:linear-gradient(90deg,#fafcfe,#fff)}
.a-card-h h3{font-size:16px;font-weight:800;color:var(--navy)}
.a-table{width:100%;border-collapse:collapse}
.a-table th{text-align:start;font-size:11px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.5px;padding:14px 22px;border-bottom:1.5px solid var(--line);background:linear-gradient(90deg,#f5f9fd,#fafcfe)}
.a-table td{padding:14px 22px;border-bottom:1px solid var(--line-2);font-size:13.5px;font-weight:600;vertical-align:middle}
.a-table tr:last-child td{border-bottom:none}
.a-table tr:hover td{background:rgba(10,109,160,.02)}
.a-thumb{width:46px;height:46px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--line);overflow:hidden;flex:0 0 auto}
.a-thumb svg{width:100%;height:100%}
.a-prodcell{display:flex;align-items:center;gap:11px}
.a-prodcell b{font-size:13.5px;font-weight:800;display:block}
.a-prodcell small{font-size:11.5px;color:var(--ink-3);font-weight:600}
.pillstat{font-size:11px;font-weight:800;padding:4px 10px;border-radius:var(--r-xs);display:inline-block}
.pillstat.on{background:var(--ok-soft);color:#11774a}
.pillstat.off{background:var(--bg-soft);color:var(--ink-3)}
.pillstat.pending{background:var(--warn-soft);color:#9a6100}
.pillstat.confirmed{background:#e7eefb;color:#1d4ea8}
.pillstat.shipped{background:#ece7fb;color:#5b3ea8}
.pillstat.delivered{background:var(--ok-soft);color:#11774a}
.pillstat.cancelled{background:var(--danger-soft);color:var(--danger)}
.paystat{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.paystat.paid{background:var(--ok-soft);color:#0a7a3d}
.paystat.cod{background:var(--bg-soft);color:var(--ink-3)}
.paystat.awaiting{background:var(--warn-soft);color:#9a6100}
.paystat.review{background:#e7eefb;color:#1d4ea8}
.paystat.unpaid{background:var(--danger-soft);color:var(--danger)}
.paystat.refunded{background:#f0eef7;color:#6b46b0}
.row-act{display:flex;gap:6px;justify-content:flex-end}
.iconbtn{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);transition:.22s}
.iconbtn:hover{background:var(--brand-soft);color:var(--brand);border-color:rgba(10,109,160,.2)}
.iconbtn.danger:hover{background:var(--danger-soft);color:var(--danger);border-color:#f3c4bc}
.a-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.a-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.a-fld{margin-bottom:14px}
.a-fld label{font-size:12px;font-weight:800;color:var(--ink-2);display:block;margin-bottom:6px}
.a-input{width:100%;height:44px;border-radius:var(--r);border:1.5px solid var(--line);background:#fff;padding:0 14px;font-size:14px;font-weight:600;color:var(--ink);transition:.22s}
.a-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,109,160,.1);outline:none}
.a-input.pos-locked{background:var(--bg-soft);color:var(--ink-3);cursor:not-allowed;border-style:dashed}
.pos-lock-note{display:block;font-size:11px;color:var(--ink-3);font-weight:700;margin-top:5px}
.a-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.a-input{height:auto;min-height:70px;padding:10px 13px;resize:vertical}
select.a-input{cursor:pointer}
.a-modal-scrim{position:fixed;inset:0;background:rgba(15,20,40,.5);backdrop-filter:blur(4px);z-index:320;display:none;place-items:center;padding:24px}
.a-modal-scrim.open{display:grid}
.a-modal{background:#fff;border-radius:var(--r-lg);width:min(720px,100%);max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.a-modal-h{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);z-index:2}
.a-modal-h h3{font-size:18px;font-weight:900}
.a-modal-b{padding:22px 24px}
.a-modal-f{position:sticky;bottom:0;background:#fff;display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line)}
.a-sub{font-size:13px;color:var(--ink-3);font-weight:600;margin:18px 0 10px;text-transform:uppercase;letter-spacing:.3px}
.spec-edit-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.spec-edit-row .a-input{height:40px}
.tog{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-weight:700}
.tog input{display:none}
.tog .tg{width:42px;height:24px;border-radius:var(--r);background:#d4d4dc;position:relative;transition:.2s;flex:0 0 auto}
.tog .tg::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:var(--r-xs);background:#fff;transition:.2s;box-shadow:var(--shadow-xs)}
.tog input:checked + .tg{background:var(--brand)}
.tog input:checked + .tg::after{inset-inline-start:21px}
.login-card{background:#fff;border-radius:var(--r-xl);box-shadow:0 30px 80px rgba(10,74,107,.18);width:min(420px,100%);padding:40px;text-align:center;border:1.5px solid rgba(10,109,160,.08)}
.login-card .a-logo{width:56px;height:56px;border-radius:var(--r-md);background:linear-gradient(135deg,#0a6da0,#5bb6de);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;font-size:26px;margin:0 auto 16px}
.login-card h2{font-size:22px;font-weight:900;margin-bottom:6px}
.login-card p{font-size:14px;color:var(--ink-3);font-weight:600;margin-bottom:22px}
.inv-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
@media(max-width:860px){
  .admin-side{width:58px;padding:12px 6px}
  .admin-side .a-brand span,.a-nav button span,.a-side-foot button span,.a-nav .nav-badge{display:none}
  .admin-side .a-brand{justify-content:center}
  .a-nav button{justify-content:center;height:44px;padding:0}
  .a-nav button svg,.a-side-foot button svg{width:22px;height:22px}
  .admin-top{padding:0 12px;gap:8px;min-height:56px}
  .admin-top h2{font-size:17px}
  .admin-top .at-live span{display:none}
  .admin-body{padding:14px 12px}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .a-grid2,.a-grid3{grid-template-columns:1fr}
  .a-table thead{display:none}
  .a-table td{display:block;padding:6px 14px;border:none;text-align:start}
  .a-table tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  .a-table td .row-act{justify-content:flex-start}
}
.card-media{aspect-ratio:6/5}
.prod-img{width:100%;height:100%;object-fit:cover;display:block}
.card-media .prod-img{object-fit:contain;padding:12px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media .prod-img{transform:scale(1.05)}
.img-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:10px;padding:20px;border:1.6px dashed var(--line);border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;transition:.18s;text-align:center}
.img-drop:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.img-drop b{font-size:13.5px;font-weight:800}
.img-drop small{font-size:11.5px;color:var(--ink-3);font-weight:600}
.img-cell{position:relative}
.img-cover{position:absolute;top:4px;inset-inline-start:4px;z-index:2;background:var(--brand);color:#fff;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:4px;letter-spacing:.3px}
.pw-show{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:4px 0 14px;cursor:pointer}
.pw-show input{width:15px;height:15px}
.m-img img.prod-img{width:100%;max-width:100%;height:auto;max-height:calc(100vh - 130px);object-fit:contain;border-radius:var(--r-md)}
.ci-img img.prod-img,.a-thumb img.prod-img{width:100%;height:100%;object-fit:contain;padding:4px}
.img-up{display:flex;gap:14px;align-items:center}
.img-prev{width:104px;height:84px;border-radius:var(--r-md);background:var(--bg-soft);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
.img-prev img{width:100%;height:100%;object-fit:cover}
.img-ph{font-size:11px;color:var(--ink-3);font-weight:700;text-align:center;padding:6px;line-height:1.3}
.bars{display:flex;align-items:flex-end;gap:12px;height:160px;padding-top:18px}
.barwrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:6px}
.bar{width:100%;max-width:48px;background:linear-gradient(180deg,#5bb6de 0%,#0a6da0 50%,#0a4a6b 100%);border-radius:2px 2px 0 0;min-height:3px;transition:height .4s ease;box-shadow:0 -2px 8px rgba(10,109,160,.15)}
.barlbl{font-size:10.5px;color:var(--ink-3);font-weight:700;white-space:nowrap}
.barval{font-size:10px;color:var(--brand);font-weight:800;height:14px;white-space:nowrap}
@media(max-width:860px){.report-grid{grid-template-columns:1fr!important}}
/* gallery */
.m-thumbs{display:flex;gap:9px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.m-thumb{width:62px;height:54px;border-radius:var(--r-xs);border:2px solid transparent;overflow:hidden;cursor:pointer;background:#fff;box-shadow:var(--shadow-xs);transition:.18s}
.m-thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.m-thumb:hover{border-color:#cfd4dc}
.m-thumb.active{border-color:var(--brand)}
/* admin image grid */
.img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.img-cell{position:relative;aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.img-cell img{width:100%;height:100%;object-fit:cover}
.img-cell .imx{position:absolute;top:3px;inset-inline-end:3px;width:20px;height:20px;border-radius:var(--r-xs);background:rgba(20,20,40,.6);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;cursor:pointer;line-height:1}
/* corners: top-start = cover badge, top-end = delete, bottom-start = background, bottom-end = set-cover */
.img-cell .imbg{position:absolute;bottom:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:var(--r-xs);background:rgba(20,20,40,.6);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;cursor:pointer;line-height:1;transition:background .2s;z-index:3}
.img-cell .imbg:hover{background:var(--brand)}
.img-cell .imbg.on{background:var(--brand)}
.img-cell .imcov{position:absolute;bottom:3px;inset-inline-end:3px;width:20px;height:20px;border-radius:var(--r-xs);background:rgba(20,20,40,.6);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;cursor:pointer;line-height:1;transition:background .2s;z-index:3}
.img-cell .imcov:hover{background:var(--brand)}
/* checkerboard behind cut-out images so transparency is visible at a glance */
.img-cell.is-cut{background-color:#fff;background-image:linear-gradient(45deg,#e8ecf2 25%,transparent 25%),linear-gradient(-45deg,#e8ecf2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ecf2 75%),linear-gradient(-45deg,transparent 75%,#e8ecf2 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.nobg-tog{margin-top:10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.img-cell .imx:hover{background:var(--danger)}
.img-empty{font-size:12px;color:var(--ink-3);font-weight:600;grid-column:1/-1;padding:14px 0;text-align:center}
/* account button */
.acct-btn{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:13px;transition:.2s;max-width:150px;overflow:hidden;white-space:nowrap}
.acct-btn:hover{background:var(--bg-soft);border-color:#dadadf}
.acct-btn svg{width:17px;height:17px;flex:0 0 auto}
.acct-btn .acct-label{overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.acct-btn .acct-label{display:none}.acct-btn{padding:0;width:40px;justify-content:center}}
/* auth + account modal */
.auth-scrim{position:fixed;inset:0;background:rgba(20,20,40,.45);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.3s;z-index:115;display:grid;place-items:center;padding:24px}
.auth-scrim.open{opacity:1;visibility:visible}
.auth-card{width:min(440px,100%);max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:30px;transform:scale(.95);transition:.3s;position:relative}
.auth-scrim.open .auth-card{transform:scale(1)}
.auth-x{position:absolute;top:16px;inset-inline-end:16px;width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink-2);transition:.18s}
.auth-x:hover{background:var(--bg-soft);color:var(--ink)}
.auth-head{text-align:center;margin-bottom:22px}
.auth-head .a-logo{width:52px;height:52px;border-radius:var(--r-md);background:linear-gradient(135deg,#0a6da0,#5bb6de);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;font-size:24px;margin:0 auto 14px}
.auth-head h3{font-size:21px;font-weight:900}
.auth-head p{font-size:13.5px;color:var(--ink-3);font-weight:600;margin-top:4px}
.auth-tabs{display:flex;gap:6px;background:var(--bg-soft);padding:4px;border-radius:var(--r);margin-bottom:20px}
.auth-tabs button{flex:1;height:38px;border-radius:var(--r-xs);font-weight:800;font-size:13.5px;color:var(--ink-2);transition:.18s}
.auth-tabs button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.auth-fld{margin-bottom:13px}
.auth-fld label{font-size:12px;font-weight:800;color:var(--ink-2);display:block;margin-bottom:6px}
.auth-submit{width:100%;height:50px;border-radius:var(--r);background:linear-gradient(120deg,#0a4a6b,#0a6da0 55%,#1e9bd1);color:#fff;font-weight:800;font-size:15px;margin-top:6px;transition:.2s}
.auth-submit:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.auth-alt{text-align:center;font-size:13px;color:var(--ink-3);font-weight:600;margin-top:16px}
.auth-alt b{color:var(--brand);cursor:pointer}
.acct-greet{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.acct-greet .av{width:48px;height:48px;border-radius:var(--r-md);background:linear-gradient(135deg,#0a6da0,#5bb6de);display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px}
.acct-greet b{font-size:17px;font-weight:900;display:block}
.acct-greet small{font-size:12.5px;color:var(--ink-3);font-weight:600}
.acct-section{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.acct-section h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-3);margin-bottom:13px}
.acct-order{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;transition:.3s;background:#fff}
.acct-order:hover{border-color:rgba(10,109,160,.12);box-shadow:0 4px 16px rgba(10,74,107,.05)}
.acct-order .ao-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.acct-order .ao-no{font-weight:800;font-size:14px;color:var(--brand)}
.acct-order .ao-items{font-size:12.5px;color:var(--ink-3);font-weight:600}
.ao-timeline{display:flex;align-items:center;gap:0;margin:14px 0 8px;position:relative}
.ao-tl-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.ao-tl-dot{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);background:#fff;display:grid;place-items:center;transition:.3s;position:relative;z-index:2}
.ao-tl-dot svg{width:12px;height:12px;display:none}
.ao-tl-step.done .ao-tl-dot{background:var(--brand);border-color:var(--brand);box-shadow:0 2px 8px rgba(10,109,160,.22)}
.ao-tl-step.done .ao-tl-dot svg{display:block;color:#fff}
.ao-tl-step.active .ao-tl-dot{border-color:var(--brand);box-shadow:0 0 0 4px rgba(10,109,160,.12)}
.ao-tl-step.cancelled .ao-tl-dot{background:var(--danger);border-color:var(--danger);box-shadow:0 2px 8px rgba(224,52,31,.22)}
.ao-tl-step.cancelled .ao-tl-dot svg{display:block;color:#fff}
.ao-tl-label{font-size:10px;font-weight:700;color:var(--ink-3);margin-top:5px;text-align:center;white-space:nowrap}
.ao-tl-step.done .ao-tl-label,.ao-tl-step.active .ao-tl-label{color:var(--brand);font-weight:800}
.ao-tl-step.cancelled .ao-tl-label{color:var(--danger)}
.ao-tl-line{flex:1;height:2.5px;background:var(--line);margin:0 -4px;position:relative;top:-8px;z-index:0}
.ao-tl-line.done{background:var(--brand)}
.ao-detail-toggle{font-size:12px;font-weight:700;color:var(--brand);cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 0}
.ao-detail-toggle:hover{text-decoration:underline}
.ao-detail-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.ao-detail-body.open{max-height:600px}
.ao-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;font-size:12.5px}
.ao-meta-item{background:var(--bg-soft);padding:8px 10px;border-radius:var(--r-xs)}
.ao-meta-item .ao-mk{font-weight:800;color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.ao-meta-item .ao-mv{font-weight:700;color:var(--ink)}
.ao-actions{display:flex;gap:8px;margin-top:10px}
.ao-inv{flex:1;height:36px;border-radius:var(--r-xs);background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.ao-return{flex:1;height:36px;border-radius:var(--r-xs);background:var(--warn-soft);color:#b06d00;font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;transition:.2s}
.ao-return:hover{background:#f5e6c4}
.ao-return:disabled{opacity:.5;cursor:not-allowed}
.ao-return-form{margin-top:10px;padding:12px;border:1.5px solid var(--warn-soft);border-radius:var(--r-md);background:#fffbf5}
.ao-return-form textarea{width:100%;min-height:60px;border:1.5px solid var(--line);border-radius:var(--r-xs);padding:8px 10px;font-size:13px;resize:vertical;font-family:inherit}
.ao-return-form button{margin-top:8px;height:36px;padding:0 18px;border-radius:var(--r-xs);background:linear-gradient(135deg,#e08a00,#c47800);color:#fff;font-weight:800;font-size:12.5px}
.acct-logout{width:100%;height:46px;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);font-weight:800;font-size:14px;margin-top:16px;transition:.18s}
.acct-logout:hover{background:#fbd9d3}
/* ---- account portal ---- */
.acct-tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:var(--r);margin:4px 0 16px}
.acct-tab{flex:1;height:36px;border-radius:var(--r-xs);font-weight:800;font-size:12.5px;color:var(--ink-2);transition:.18s}
.acct-tab.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.acct-empty{color:var(--ink-3);font-weight:600;font-size:13.5px;padding:20px 0;text-align:center}
.acct-h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-3);margin:18px 0 12px}
.acct-add{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.acct-add h4{font-size:12.5px;font-weight:800;color:var(--ink-2);margin-bottom:10px}
.acct-add-row{display:flex;gap:8px}
.acct-add-row .field{flex:1}
.a-mini-btn{height:46px;padding:0 18px;border-radius:var(--r);background:linear-gradient(120deg,#0a4a6b,#0a6da0);color:#fff;font-weight:800;font-size:13.5px;white-space:nowrap}
.ao-lines{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.ao-line{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-2);font-weight:600;padding:3px 0}
.ao-line i{color:var(--ink-3);font-style:normal}
.ao-inv{margin-top:10px;height:34px;width:100%;border-radius:var(--r-xs);background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.wl-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.wl-card{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px 12px 18px;position:relative;overflow:hidden}
.wl-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(#0a6da0,#1e9bd1)}
.wl-card.used{opacity:.55}
.wl-l{display:flex;flex-direction:column;gap:3px}
.wl-code{font-weight:900;font-size:14.5px;letter-spacing:.5px}
.wl-val{font-size:12px;color:var(--ink-3);font-weight:700}
.wl-use{height:32px;padding:0 13px;border-radius:var(--r-xs);background:var(--brand);color:#fff;font-weight:800;font-size:12px}
.wl-tag{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:4px}
.wl-tag.used{background:var(--bg-soft);color:var(--ink-3)}
.tkt-list{margin-top:8px;display:flex;flex-direction:column;gap:10px}
.tkt-card{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:.16s}
.tkt-card:hover{border-color:var(--brand);box-shadow:var(--shadow-xs)}
.tkt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:5px}
.tkt-subj{font-weight:800;font-size:13.5px}
.tkt-sub{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-weight:600}
.tkt-pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:4px;white-space:nowrap}
.tkt-pill.open{background:var(--warn-soft);color:#b06d00}
.tkt-pill.answered{background:var(--ok-soft);color:#1a8f54}
.tkt-pill.closed{background:var(--bg-soft);color:var(--ink-3)}
.tkt-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 14px}
.tkt-head .tkt-subj{font-size:16px}
.tkt-thread{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;padding:2px}
.msg{border-radius:var(--r-md);padding:10px 12px;max-width:88%}
.msg .msg-who{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.7;margin-bottom:3px}
.msg .msg-tx{font-size:13.5px;font-weight:600;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg .msg-ts{font-size:10.5px;color:var(--ink-3);font-weight:600;margin-top:4px}
.msg.m-cust{background:var(--bg-soft);align-self:flex-start}
.msg.m-admin{background:var(--brand-soft);align-self:flex-end}
.acct-back{background:none;color:var(--ink-2);font-weight:800;font-size:13px;margin-bottom:8px}
.acct-back:hover{color:var(--brand)}
.pos-hint{background:var(--brand-soft);color:var(--brand);border-radius:var(--r-md);padding:12px 16px;font-size:12.5px;font-weight:700;margin-bottom:14px;line-height:1.6}
.loc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r);background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:13.5px;border:1px solid transparent;transition:.15s;width:100%}
.loc-btn:hover{border-color:var(--brand)}
.loc-btn:disabled{opacity:.6;cursor:default}
.loc-ok{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ok-soft);border-radius:var(--r);padding:11px 14px;font-size:13px;font-weight:800}
.loc-ok .loc-ok-l{display:inline-flex;align-items:center;gap:6px;color:#1a8f54}
.loc-ok a{color:var(--brand);font-weight:800;text-decoration:underline}
.loc-ok .loc-change{margin-inline-start:auto;background:none;color:var(--ink-3);font-weight:800;font-size:12.5px}

.tkt-head-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px}
.tkt-new-btn{height:36px;padding:0 16px;border-radius:var(--r);background:linear-gradient(120deg,#0a4a6b,#0a6da0);color:#fff;font-weight:800;font-size:13px;white-space:nowrap;transition:.16s}
.tkt-new-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.tkt-actions{display:flex;justify-content:flex-end;gap:8px;margin:2px 0 12px}
.tkt-close-btn{height:34px;padding:0 15px;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);font-weight:800;font-size:12.5px;transition:.15s}
.tkt-close-btn:hover{background:#fbd9d3}
.tkt-close-btn.reopen{background:var(--ok-soft);color:#1a8f54}
.tkt-close-btn.reopen:hover{filter:brightness(.97)}

.cust-orders-btn{min-width:38px;height:30px;padding:0 12px;border-radius:4px;background:var(--brand-soft);color:var(--brand);font-weight:900;font-size:13.5px;transition:.15s;cursor:pointer}
.cust-orders-btn:hover{background:var(--brand);color:#fff}
.cust-orders-btn.zero{background:var(--bg-soft);color:var(--ink-3);cursor:pointer}
.ord-modal{width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column}
.ord-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ord-modal-head h4{display:flex;align-items:center;gap:8px}
.ord-modal-head .ord-count{font-size:12px;font-weight:800;background:var(--brand-soft);color:var(--brand);border-radius:4px;padding:2px 9px}
.ord-modal-body{overflow-y:auto;margin-top:16px;padding-inline-end:2px}

/* ---- admin customers table + set-password modal ---- */
.cust-table td,.cust-table th{vertical-align:middle}
.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.iconbtn{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;background:var(--bg-soft);color:var(--ink-2);transition:.16s}
.iconbtn:hover{background:var(--line);color:var(--ink)}
.iconbtn.danger{color:var(--danger)}
.iconbtn.danger:hover{background:var(--danger-soft)}
.pw-ov{position:fixed;inset:0;z-index:210;background:rgba(10,12,24,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px}
.pw-modal{width:min(420px,100%);background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px}
.pw-modal h4{font-size:17px;font-weight:900;margin-bottom:4px}
.pw-modal .pw-modal-sub{font-size:13px;color:var(--ink-3);font-weight:600;margin-bottom:16px}
.pw-modal .a-input{width:100%;height:46px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px;font-size:14px;font-weight:600}
.pw-modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ---- full-page account ---- */
#accountScrim{padding:0;display:block;background:var(--bg);backdrop-filter:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
#accountScrim #accountCard{width:100%;max-width:none;min-height:100dvh;max-height:none;border-radius:0;box-shadow:none;transform:none;padding:0;background:var(--bg);overflow:visible}
.acctpage{max-width:940px;margin:0 auto;padding:0 20px 72px}
.acct-topbar{position:sticky;top:0;z-index:6;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;border-bottom:1px solid var(--line);margin-bottom:22px}
.acct-topbar .apt-b{display:flex;align-items:center;gap:9px;font-weight:900;font-size:16.5px;color:var(--ink)}
.acct-topbar .apt-b .bico{width:28px;height:28px}
.acct-close2{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r);background:var(--bg-soft);color:var(--ink-2);font-weight:800;font-size:13.5px;transition:.16s;white-space:nowrap}
.acct-close2:hover{background:var(--line);color:var(--ink)}
.acct-tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.acct-tabs::-webkit-scrollbar{display:none}
.acct-tab{flex:1 0 auto;min-width:92px;height:40px;padding:0 15px;white-space:nowrap;font-size:13px}
.acct-h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-3);margin:20px 0 12px}
/* ticket filters + rich cards */
.tkt-filters{display:flex;gap:7px;margin:2px 0 12px;flex-wrap:wrap}
.tkt-filter{height:32px;padding:0 15px;border-radius:4px;background:var(--bg-soft);color:var(--ink-2);font-weight:800;font-size:12.5px;transition:.15s}
.tkt-filter.on{background:var(--brand);color:#fff}
.tkt-meta{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 5px}
.tkt-chip{font-size:11px;font-weight:800;padding:4px 10px;border-radius:4px;background:var(--bg-soft);color:var(--ink-2)}
.tkt-chip.pri-urgent{background:#fdeae6;color:#c53b26}
.tkt-chip.pri-high{background:var(--warn-soft);color:#b06d00}
/* ticket create form */
.tkt-form{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:15px;margin-top:22px}
.tkt-form h4{font-size:15px;font-weight:900;color:var(--ink)}
.acct-grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:620px){.acct-grid2{grid-template-columns:1fr}}
.acct-field label{font-size:11.5px;font-weight:800;color:var(--ink-2);display:block;margin-bottom:6px}
.acct-field .field{width:100%}
select.field{width:100%;height:46px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px;background:#fff;font-weight:600;font-size:14px;color:var(--ink)}
.pri-row{display:flex;gap:8px;flex-wrap:wrap}
.pri-opt{flex:1;min-width:70px;height:42px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;font-weight:800;font-size:12.5px;color:var(--ink-2);transition:.15s;cursor:pointer}
.pri-opt.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.pri-opt.pri-high.on{border-color:#d98a12;color:#b06d00;background:var(--warn-soft)}
.pri-opt.pri-urgent.on{border-color:#e0563f;color:#c53b26;background:#fdeae6}
.tkt-imgs{display:flex;flex-wrap:wrap;gap:10px}
.tkt-imgs .thmb{position:relative;width:76px;height:76px;border-radius:var(--r-xs);overflow:hidden;border:1px solid var(--line);background:#fff}
.tkt-imgs .thmb img{width:100%;height:100%;object-fit:cover}
.tkt-imgs .thmb button{position:absolute;top:3px;inset-inline-end:3px;width:20px;height:20px;border-radius:50%;background:rgba(20,20,40,.74);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;padding:0}
.tkt-add-img{width:76px;height:76px;border-radius:var(--r-xs);border:1.5px dashed var(--line);background:#fff;color:var(--ink-3);font-weight:800;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;text-align:center;padding:4px}
.tkt-add-img:hover{border-color:var(--brand);color:var(--brand)}
.tkt-add-img span{font-size:21px;line-height:1}
/* thread attachments */
.msg .msg-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg .msg-imgs img{width:82px;height:82px;object-fit:cover;border-radius:var(--r-xs);border:1px solid var(--line);cursor:zoom-in}
.msg-file{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--brand);text-decoration:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-file:hover{border-color:var(--brand)}
.msg-file svg{flex:0 0 auto}

.tkt-thread{max-height:none}
/* payments */
.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
@media(max-width:560px){.acct-stats{grid-template-columns:1fr}}
.acct-stat{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:#fff}
.acct-stat .lbl{font-size:11px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.3px}
.acct-stat .num{font-size:23px;font-weight:900;margin-top:6px;color:var(--ink)}
.acct-stat.warn .num{color:#b06d00}
.pay-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px;margin-bottom:10px}
.pay-row .pr-l b{font-size:13.5px;font-weight:800}
.pay-row .pr-l small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.pay-row .pr-r{text-align:end}
.pay-row .pr-r b{font-size:15px;font-weight:900}
/* activity log */
.log-item{display:flex;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.log-item:last-child{border-bottom:0}
.log-ico{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.log-tx{font-size:13.5px;font-weight:700;color:var(--ink)}
.log-ts{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
/* image lightbox */
.imglb{position:fixed;inset:0;z-index:200;background:rgba(10,12,24,.87);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.imglb img{max-width:96vw;max-height:92vh;border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

.pw-wrap{position:relative}
.pw-wrap .field{padding-inline-end:66px}
.pw-tog{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);height:30px;padding:0 10px;border-radius:var(--r-xs);background:var(--bg-soft);color:var(--ink-2);font-weight:800;font-size:11.5px}
.pw-hint{font-size:11px;color:var(--ink-3);font-weight:600;margin-top:5px}
.soc-div{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--ink-3);font-size:12px;font-weight:700}
.soc-div span{white-space:nowrap}
.soc-div::before,.soc-div::after{content:'';flex:1;height:1px;background:var(--line)}
.soc-wrap{display:flex;flex-direction:column;gap:10px}
.soc-g{display:flex;justify-content:center;min-height:42px;color-scheme:light}
.soc-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border-radius:var(--r);font-weight:800;font-size:14px;width:100%;transition:.18s}
.soc-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.soc-fb{background:#1877f2;color:#fff}
.soc-google{background:#fff;color:#3c4043;border:1px solid #dadce0}
.soc-google:hover{background:#f8f9fa}

/* stock / out of stock */
.badge.oos{background:#5a5f68;color:#fff;font-size:15px;padding:10px 22px;letter-spacing:.4px}
.badge.offer{background:linear-gradient(120deg,#7a2ff7,#c02fd6);color:#fff}
.badge.offer::before{content:'\2605 '}
.badge.hot{background:linear-gradient(120deg,#ff5f3a,#ff2a68 55%,#ff9f1c);color:#fff;position:relative;overflow:hidden;padding-inline-start:24px;box-shadow:0 6px 18px -6px rgba(255,64,88,.6);animation:hotPulse 1.7s ease-in-out infinite}
.badge.hot::before{content:'\1F525';position:absolute;inset-inline-start:6px;top:50%;transform:translateY(-50%);font-size:12px;animation:hotFlame 1s ease-in-out infinite}
.badge.hot::after{content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;width:55%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%);animation:hotShine 2.4s ease-in-out infinite}
@keyframes hotPulse{0%,100%{box-shadow:0 6px 18px -6px rgba(255,64,88,.55)}50%{box-shadow:0 10px 26px -4px rgba(255,64,88,.9)}}
@keyframes hotFlame{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-58%) scale(1.2)}}
@keyframes hotShine{0%{transform:translateX(-160%)}55%,100%{transform:translateX(260%)}}
.badge.oos.soon{background:#e7eefb;color:#0a6da0}
.badge.oos.preorder{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 4px 14px -3px rgba(245,158,11,.5)}
.oos-overlay.soon{background:rgba(18,28,56,.42)}
.oos-overlay.soon span{background:#0a6da0;color:#fff}
.oos-overlay.preorder{background:rgba(120,70,0,.32)}
.oos-overlay.preorder span{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
@media(prefers-reduced-motion:reduce){.badge.hot{animation:none}.badge.hot::after{display:none}.badge.hot::before{animation:none}}
.badge-stack{position:absolute;top:12px;inset-inline-start:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.badge-stack .badge{position:relative;top:auto;bottom:auto;inset-inline-start:auto;inset-inline-end:auto}
.badge-picker{display:flex;flex-wrap:wrap;gap:10px}
.bpick{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-xs);padding:6px 11px;background:#fff}
.bpick input{width:15px;height:15px}
.bpick .badge{position:relative;top:auto;inset-inline-start:auto}
.sec-edit{display:flex;gap:14px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-bottom:12px}
.sec-edit-prev{width:120px;flex:0 0 auto;min-height:96px;border-radius:var(--r-md);background:var(--bg-soft) center/cover no-repeat;display:grid;place-items:center;text-align:center;padding:8px;color:var(--ink-2)}
.sec-edit-prev.hasimg{color:#fff}
.sec-edit-prev span{font-weight:800;font-size:13px}
.sec-edit-body{flex:1;min-width:0}
.sec-edit-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
@media(max-width:640px){.sec-edit{flex-direction:column}.sec-edit-prev{width:100%}}
.card.oos{opacity:.82}
.card.oos.preorder{opacity:1}
.card.oos.preorder .quick{display:flex}
.oos-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(247,248,250,.55);z-index:3;pointer-events:none}
.oos-overlay span{background:#1d1d1f;color:#fff;font-weight:800;font-size:17px;padding:12px 26px;border-radius:var(--r-xs);letter-spacing:.4px}
.card.oos .quick{display:none}
.add-btn.dis,.btn-primary.dis{opacity:.45;pointer-events:none;filter:grayscale(.3)}
.oos-tag{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:800;color:#5a5f68;background:var(--bg-soft);padding:10px 20px;border-radius:var(--r-xs);margin-bottom:16px}
.oos-tag.preorder{color:#b45309;background:#fef3c7}
/* admin options editor */
.opt-edit{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:12px;background:var(--bg-soft2)}
.opt-edit-h{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.opt-edit-h .a-input{height:38px;font-size:13px}
.opt-edit-h .a-input.lbl{flex:1}
.opt-edit-h .a-input.typ{width:130px;flex:0 0 auto}
.opt-choice{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.opt-choice .a-input{height:36px;font-size:13px}
.opt-choice .a-input.dl{width:84px;flex:0 0 auto}
.opt-choice input[type=color]{width:42px;height:36px;padding:3px;flex:0 0 auto;border-radius:var(--r-xs);border:1px solid var(--line);background:#fff;cursor:pointer}
.opt-add-choice{font-size:12px;font-weight:800;color:var(--brand);cursor:pointer;margin-top:4px;display:inline-block}
.opt-del{flex:0 0 auto}
/* reviews */
.rev-wrap{border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.rev-head{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.rev-avg{font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1}
.rev-avg-side .stars{font-size:15px;color:#ff9f0a}
.rev-avg-side small{font-size:12.5px;color:var(--ink-3);font-weight:600;display:block;margin-top:2px}
.rev-item{border-top:1px solid var(--line-2);padding:13px 0}
.rev-item .ri-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.rev-item .ri-name{font-weight:800;font-size:13.5px}
.rev-item .ri-stars{color:#ff9f0a;font-size:13px;margin-bottom:5px}
.rev-item .ri-date{font-size:11.5px;color:var(--ink-3);font-weight:600}
.rev-item p{font-size:13.5px;color:var(--ink-2);line-height:1.55;font-weight:500}
.rev-form{background:var(--bg-soft2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;margin-top:16px}
.rev-form h5{font-size:13.5px;font-weight:800;margin-bottom:10px}
.star-pick{display:flex;gap:5px;margin-bottom:10px}
.star-pick span{font-size:26px;color:#d4d4dc;cursor:pointer;transition:.12s;line-height:1}
.star-pick span.on{color:#ff9f0a}
.rev-submit{height:42px;padding:0 20px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:800;font-size:13.5px;margin-top:10px;transition:.2s}
.rev-submit:hover{background:#000}
/* faq */
.faq-list{max-width:840px;margin:0 auto}
.faq-item{border:1.5px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px;background:#fff;overflow:hidden;transition:.3s cubic-bezier(.2,.7,.2,1)}
.faq-item:hover{border-color:rgba(10,109,160,.12);box-shadow:0 4px 16px rgba(10,74,107,.05)}
.faq-item.open{border-color:var(--brand);box-shadow:0 8px 24px rgba(10,109,160,.08)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;cursor:pointer;font-weight:800;font-size:15.5px}
.faq-q .fq-ic{flex:0 0 auto;transition:.3s;color:var(--brand);width:28px;height:28px;border-radius:var(--r-xs);background:var(--brand-soft);display:grid;place-items:center}
.faq-item.open .fq-ic{transform:rotate(45deg);background:var(--brand);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:1200px}
.faq-a div{padding:0 22px 20px;color:var(--ink-2);font-weight:500;font-size:14.5px;line-height:1.7}
/* admin order toolbar */
.ord-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;align-items:center;padding:16px 20px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:0 2px 8px rgba(10,74,107,.04)}
.ord-toolbar .a-input{height:40px;max-width:300px;border-radius:var(--r-lg)}
.ord-chip{height:32px;padding:0 14px;border-radius:4px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:12px;color:var(--ink-2);cursor:pointer;transition:.22s}
.ord-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.ord-chip.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(10,109,160,.2)}
/* catalog search + brand */
.cat-tools{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.search-box{flex:1;min-width:240px;max-width:440px;display:flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.18s}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search-box svg{color:var(--ink-3);flex:0 0 auto}
.search-box input{flex:1;border:none;outline:none;font-size:14.5px;font-weight:600;color:var(--ink);background:transparent}
.brand-sel{max-width:210px;height:46px}
/* coupon */
.coupon-row{margin:8px 0 2px}
.coupon-input{display:flex;gap:8px}
.coupon-input .field{height:44px;text-transform:uppercase}
.coupon-input button{height:44px;padding:0 18px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:800;font-size:13px;white-space:nowrap;transition:.2s}
.coupon-input button:hover{background:#000}
.coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ok-soft);color:#11774a;border-radius:var(--r);padding:11px 14px;font-weight:800;font-size:13px}
.coupon-applied button{color:#11774a;font-weight:800;font-size:12px;text-decoration:underline}
/* product video */
.m-video{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000;margin:0 auto}
.m-video iframe,.m-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.m-thumb.vid{position:relative;background:#1d1d1f}
.m-thumb.vid .vplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.32)}
.vid-badge{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:30px;height:30px;border-radius:var(--r-xs);background:rgba(29,29,31,.8);color:#fff;display:grid;place-items:center}
/* cinematic video hero */
.hero-cine{position:relative;background:#070b18;overflow:hidden;color:#fff}
.hero-cine .hero-bg{display:none}
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;animation:hkb 34s ease-in-out infinite;transform-origin:center;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 46%, transparent 26%, rgba(7,11,24,.55) 80%), linear-gradient(0deg, rgba(7,11,24,.92), rgba(7,11,24,.12) 42%, rgba(7,11,24,.4))}
[dir=rtl] .hero-scrim{background:radial-gradient(ellipse at 50% 46%, transparent 26%, rgba(7,11,24,.5) 80%), linear-gradient(0deg, rgba(7,11,24,.92), rgba(7,11,24,.12) 42%, rgba(7,11,24,.4)), linear-gradient(270deg, rgba(7,11,24,.55), transparent 48%)}
[dir=ltr] .hero-scrim{background:radial-gradient(ellipse at 50% 46%, transparent 26%, rgba(7,11,24,.5) 80%), linear-gradient(0deg, rgba(7,11,24,.92), rgba(7,11,24,.12) 42%, rgba(7,11,24,.4)), linear-gradient(90deg, rgba(7,11,24,.55), transparent 48%)}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center, transparent 44%, rgba(3,6,14,.78))}
.hero-sweep{position:absolute;top:-20%;inset-inline-start:-30%;width:55%;height:140%;z-index:1;pointer-events:none;background:linear-gradient(105deg, transparent, rgba(150,220,255,.06) 45%, rgba(150,220,255,.12) 50%, rgba(150,220,255,.06) 55%, transparent);transform:skewX(-12deg);animation:hsweep 9s ease-in-out infinite}
.hero-inner{position:relative;z-index:2;width:100%}
.hp{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(150,225,255,.6);z-index:1;pointer-events:none;filter:blur(.5px);animation-name:hfloat;animation-timing-function:linear;animation-iteration-count:infinite}
.hero-cine .hero-title{color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.55)}
.hero-cine .hero-sub{color:#cfdaef;text-shadow:0 1px 18px rgba(0,0,0,.5);font-weight:500}
.hero-cine .eyebrow{background:rgba(255,255,255,.1);color:#bfe9f2;border-color:rgba(255,255,255,.16)}
.hero-cine .eyebrow .dot{box-shadow:0 0 0 4px rgba(95,208,224,.25)}
.hero-cine .stat .n{color:#fff}
.hero-cine .stat .l{color:#9fb0cf}
.hero-cine .btn-ghost{background:rgba(255,255,255,.12);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-cine .btn-ghost:hover{background:rgba(255,255,255,.2)}
@keyframes hkb{0%{transform:scale(1.06)}50%{transform:scale(1.13) translate(-2%,-1%)}100%{transform:scale(1.06)}}
@keyframes hgrow{0%{transform:scaleY(.001);opacity:.85}7%{opacity:1}80%{transform:scaleY(1)}92%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes hup{0%{transform:translateY(0)}80%{transform:translateY(-152px)}92%{transform:translateY(-152px)}100%{transform:translateY(0)}}
@keyframes hheadx{0%{transform:translateX(-66px)}50%{transform:translateX(66px)}100%{transform:translateX(-66px)}}
@keyframes hled{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hspin{to{transform:rotate(360deg)}}
@keyframes hgd1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,-28px)}}
@keyframes hgd2{0%,100%{transform:translate(0,0)}50%{transform:translate(-52px,22px)}}
@keyframes hsweep{0%{transform:translateX(-60%) skewX(-12deg);opacity:0}35%{opacity:1}70%{transform:translateX(320%) skewX(-12deg);opacity:0}100%{transform:translateX(320%) skewX(-12deg);opacity:0}}
@keyframes hfloat{0%{transform:translateY(0);opacity:0}12%{opacity:.7}100%{transform:translateY(-230px);opacity:0}}
.hmodel-grow{transform-box:fill-box;transform-origin:50% 100%;animation:hgrow 9s ease-in-out infinite;will-change:transform,opacity}
.hgantry{animation:hup 9s ease-in-out infinite;will-change:transform}
.hhead{animation:hheadx 2.3s ease-in-out infinite;will-change:transform}
.hled-glow{animation:hled 2.6s ease-in-out infinite}
.hspool{transform-box:fill-box;transform-origin:center;animation:hspin 7s linear infinite}
.hglow.g1{animation:hgd1 15s ease-in-out infinite}
.hglow.g2{animation:hgd2 19s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.hero-svg,.hmodel-grow,.hgantry,.hhead,.hspool,.hglow,.hero-sweep,.hp{animation:none!important}}
.hero-cine{background:#000}
.hero-stage{background:linear-gradient(160deg,#0a1024,#0c1430 55%,#070b18)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;object-position:64% center}
.hero-stage.has-video .hero-svg{opacity:0;transition:opacity .7s ease}
/* cinematic grade for the real hero video */
.hero-frame{filter:contrast(1.1) saturate(1.18) brightness(.95);transform:scale(1.06);transform-origin:60% 50%;animation:heroPush 26s ease-in-out infinite alternate;opacity:0;transition:opacity 1.1s ease;will-change:transform,opacity}
.hero-stage.has-video .hero-frame{opacity:1}
@keyframes heroPush{0%{transform:scale(1.06) translateX(0)}100%{transform:scale(1.16) translateX(-2%)}}
.hero-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(34,66,120,.20),rgba(0,0,0,0) 38%,rgba(8,16,38,.36));mix-blend-mode:soft-light}
.hero-grain{position:absolute;inset:-60%;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-size:200px 200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:heroGrain .55s steps(2) infinite}
@keyframes heroGrain{0%{transform:translate(0,0)}100%{transform:translate(-14px,9px)}}
.hero-bar{position:absolute;inset-inline:0;height:0;background:#000;z-index:3;pointer-events:none;animation:barsIn 1.3s .25s cubic-bezier(.3,.8,.3,1) forwards}
.hero-bar.t{top:0}
.hero-bar.b{bottom:0}
@keyframes barsIn{to{height:6.8%}}
.hero-vignette{background:radial-gradient(ellipse at center, transparent 36%, rgba(2,5,12,.82))}
.hero-inner{z-index:5}
@media (prefers-reduced-motion: reduce){.hero-frame{animation:none}.hero-grain{animation:none}.hero-bar{animation:none;height:6.8%}}

.m-video{box-shadow:0 22px 56px rgba(20,20,40,.28);border:1px solid var(--line)}
.m-video video,.m-video iframe{background:#000}
.m-thumb{box-shadow:0 2px 8px rgba(20,20,40,.08);transition:.18s}
.m-thumb:hover{transform:translateY(-1px)}
.m-thumb.vid .vplay{background:radial-gradient(circle at center, rgba(31,134,163,.62), rgba(0,0,0,.5))}
.m-thumb.vid .vplay svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}

/* ── Payment Portal ── */
.pay-portal-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.pay-portal-overlay.open{opacity:1;pointer-events:auto}
.pay-portal{background:#fff;border-radius:4px;width:92%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.25);position:relative;transform:translateY(30px) scale(.96);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.pay-portal-overlay.open .pay-portal{transform:translateY(0) scale(1)}
.pp-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:var(--bg-soft2);border-radius:50%;cursor:pointer;display:grid;place-items:center;z-index:2;font-size:16px;color:var(--ink-2);transition:.15s}
[dir=rtl] .pp-close{right:auto;left:12px}
.pp-close:hover{background:var(--line-2);color:var(--ink)}
.pp-head{padding:28px 28px 0;text-align:center}
.pp-head .pp-mark{margin:0 auto 10px;width:56px;height:38px;display:flex;align-items:center;justify-content:center}
.pp-head .pp-mark svg{width:100%;height:100%}
.pp-head .pp-mark img.pay-logo{width:100%;height:100%;object-fit:contain;display:block}
.pp-head h3{font-size:17px;font-weight:800;margin:0 0 4px;color:var(--ink)}
.pp-head .pp-amt{font-size:28px;font-weight:900;color:var(--brand);margin-top:6px;letter-spacing:-.02em}
.pp-body{padding:20px 28px 28px}
.pp-field{margin-bottom:14px}
.pp-field label{display:block;font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.pp-field input{width:100%;height:44px;border:1.5px solid var(--line-2);border-radius:3px;padding:0 14px;font-size:15px;font-weight:600;color:var(--ink);background:#fafbfc;transition:.15s;box-sizing:border-box}
.pp-field input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(31,134,163,.12)}
.pp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pp-ins{background:var(--bg-soft2);border-radius:3px;padding:14px 16px;margin-bottom:16px;font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.6}
.pp-btn{width:100%;height:50px;border:none;border-radius:3px;background:var(--brand);color:#fff;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;margin-top:4px}
.pp-btn:hover{filter:brightness(1.08)}
.pp-btn:disabled{opacity:.6;cursor:not-allowed}
.pp-btn .pp-spin{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.pp-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.2px}
.pp-secure svg{color:var(--ok)}
.pp-result{text-align:center;padding:40px 28px}
.pp-result .pp-result-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.pp-result .pp-result-ic.ok{background:var(--ok-soft);color:var(--ok)}
.pp-result .pp-result-ic.fail{background:var(--err-soft,#fee);color:var(--err,#dc3545)}
.pp-result h4{font-size:18px;font-weight:800;margin:0 0 6px}
.pp-result p{font-size:13px;font-weight:600;color:var(--ink-3);margin:0}
.pp-test-badge{display:inline-flex;align-items:center;gap:4px;background:#fff3cd;color:#856404;font-size:11px;font-weight:700;padding:4px 10px;border-radius:2px;margin-bottom:10px;letter-spacing:.2px}

/* ── Notification Bell ── */
.notif-wrap{position:relative;z-index:10000}
.notif-btn{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink);transition:.2s;position:relative;background:none;border:none;cursor:pointer;padding:0}
.notif-btn:hover{background:var(--bg-soft)}
.notif-btn:active{transform:scale(.92)}
.notif-dot{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;border-radius:3px;background:#ef4444;color:#fff;font-size:10.5px;font-weight:800;display:none;place-items:center;line-height:18px;text-align:center;box-shadow:0 2px 6px rgba(239,68,68,.45);pointer-events:none;z-index:2}
[dir=rtl] .notif-dot{right:auto;left:4px}
.notif-dot.show{display:grid}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-height:440px;background:#fff;border:1.5px solid rgba(10,109,160,.12);border-radius:var(--r-xl);box-shadow:0 12px 40px rgba(10,74,107,.18),0 0 0 1px rgba(10,109,160,.06);overflow:hidden;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:.25s cubic-bezier(.2,.8,.3,1);z-index:9999}
[dir=rtl] .notif-panel{right:auto;left:0}
.notif-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.notif-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:9998}
.notif-backdrop.show{display:block}
.np-head{padding:16px 18px;border-bottom:1.5px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,var(--brand-soft),#fff)}
.np-head h4{margin:0;font-size:14px;font-weight:800;color:var(--brand)}
.np-clear{font-size:11.5px;font-weight:700;color:var(--brand);background:none;border:none;cursor:pointer;padding:5px 10px;border-radius:var(--r-xs);transition:.2s}
.np-clear:hover{background:var(--brand-soft)}
.np-body{overflow-y:auto;max-height:360px;overscroll-behavior:contain}
.np-empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13px;font-weight:600}
.np-empty-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);opacity:.6}
.np-empty-icon svg{width:24px;height:24px}
.np-item{display:flex;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:.2s}
.np-item:hover{background:var(--brand-soft)}
.np-item.unread{background:rgba(10,109,160,.03)}
.np-item.unread::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--brand)}
[dir=rtl] .np-item.unread::before{left:auto;right:7px}
.np-item{position:relative}
.np-ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 38px}
.np-ic.order{background:var(--brand-soft);color:var(--brand)}
.np-ic.ticket{background:#fef3c7;color:#d97706}
.np-ic.payment{background:var(--ok-soft);color:var(--ok)}
.np-ic.info{background:var(--bg-soft);color:var(--ink-2)}
.np-info{flex:1;min-width:0}
.np-title{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-body-tx{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-time{font-size:10.5px;color:var(--ink-3);font-weight:600;margin-top:3px}

/* ── Unread badge on tabs ── */
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:3px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;margin-inline-start:6px;vertical-align:middle;line-height:1}

/* ── Skeleton loading ── */
@keyframes shimmer{to{transform:translateX(100%)}}
.skel{background:linear-gradient(160deg,#f0f2f5,#e8ebf0);border-radius:var(--r-md);overflow:hidden;position:relative}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:translateX(-100%);animation:shimmer 1.5s ease-in-out infinite}
.card-skel{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.card-skel .skel-img{aspect-ratio:1;background:linear-gradient(160deg,#f0f2f5,#e8ebf0)}
.card-skel .skel-body{padding:14px}
.card-skel .skel-line{height:12px;border-radius:2px;margin-bottom:8px}
.card-skel .skel-line.w60{width:60%}
.card-skel .skel-line.w80{width:80%}
.card-skel .skel-line.w40{width:40%}
.card-skel .skel-price{height:16px;border-radius:2px;width:35%;margin-top:10px}

/* ── Image lazy-load fade-in ── */
.prod-img{opacity:0;transition:opacity .4s ease}
.prod-img.loaded{opacity:1}
.m-img .prod-img{opacity:0;transition:opacity .35s ease}
.m-img .prod-img.loaded{opacity:1}
.card-media{position:relative;overflow:hidden}
.img-placeholder{position:absolute;inset:0;background:linear-gradient(160deg,#f0f2f5,#e8ebf0);z-index:0}
.img-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);transform:translateX(-100%);animation:shimmer 1.5s ease-in-out infinite}

/* ── Enhanced card & UX ── */
.card{will-change:transform;contain:layout style;backface-visibility:hidden}
.card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .25s}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 40px -16px rgba(20,30,70,.28)}
.card:active{transform:translateY(-2px) scale(.995);transition-duration:.1s}
.card-media img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media img{transform:scale(1.06)}
.quick{transition:opacity .2s,transform .2s;transform:translateY(6px)}
.card:hover .quick{opacity:1;transform:translateY(0)}
.add-btn{transition:background .15s,transform .12s,box-shadow .15s}
.add-btn:active{transform:scale(.94)}

/* ── Smooth page sections ── */
section{scroll-margin-top:80px}
.reveal{transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}

/* ── Cart & drawer smoothness ── */
.drawer{will-change:transform;backface-visibility:hidden;-webkit-overflow-scrolling:touch}
.scrim{transition:opacity .3s}

/* ── Toast notification style ── */
.toast.notif{border-left:3px solid var(--brand);background:#fff}
[dir=rtl] .toast.notif{border-left:none;border-right:3px solid var(--brand)}
.toast.notif .tic{background:var(--brand-soft);color:var(--brand)}

/* ── Smooth scrolling ── */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.reveal,.prod-img,.drawer{transition:none !important;animation:none !important}}

/* ── Mobile Bottom Nav ── */
.mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:85;background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);padding:4px 0 env(safe-area-inset-bottom)}
.mob-bar-in{display:flex;max-width:500px;margin:0 auto}
.mob-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0 3px;font-size:10px;font-weight:700;color:var(--ink-3);transition:.15s;position:relative;-webkit-tap-highlight-color:transparent;background:none}
.mob-bar-item:active{transform:scale(.88)}
.mob-bar-item.active{color:var(--brand)}
.mob-bar-item.active svg{stroke-width:2.5}
.mob-bar-item svg{width:22px;height:22px;transition:.15s}
.mob-bar-badge{position:absolute;top:0;inset-inline-end:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:2px;background:#ef4444;color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;line-height:1;pointer-events:none}

/* ── Mobile Enhancements ── */
@media(max-width:1000px){
  .mob-bar{display:block}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .wa-float{bottom:calc(66px + env(safe-area-inset-bottom))}
  .toasts{bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){
  /* Notification panel → bottom sheet */
  .notif-panel{position:fixed;bottom:calc(56px + env(safe-area-inset-bottom));top:auto;left:8px;right:8px;width:auto;max-height:65vh;border-radius:4px 4px 3px 3px;transform:translateY(20px) scale(.97);box-shadow:0 -8px 40px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05)}
  [dir=rtl] .notif-panel{right:8px;left:8px}
  .notif-panel.open{transform:translateY(0) scale(1)}
  /* Disable hover effects on touch */
  .card:hover{transform:none;box-shadow:var(--shadow)}
  .card:active{transform:scale(.97)}
  /* Always show quick-add on mobile (no hover) */
  .quick{opacity:1;transform:translateY(0);width:36px;height:36px;bottom:8px;inset-inline-end:8px}
}
@media(max-width:640px){
  /* Compact navbar */
  :root{--nav-h:54px}
  .nav-in{gap:6px}
  .brand .bico{height:24px}
  .brand .wordmark{font-size:18px}
  .brand{gap:7px}
  /* Cart button → icon only */
  .cart-btn span[data-i18n]{display:none}
  .cart-btn{padding:0;width:38px;height:38px;justify-content:center;border-radius:var(--r-md);position:relative}
  .cart-btn .cart-count{position:absolute;top:-3px;inset-inline-end:-3px;min-width:16px;height:16px;font-size:9px;padding:0 3px;border-radius:2px}
  /* Smaller touch buttons */
  .nav-burger{width:36px;height:36px;border-radius:var(--r)}
  .notif-btn{width:36px;height:36px}
  /* Tighter wrap padding */
  .wrap{padding:0 14px}
  /* Mobile menu polish */
  .mmenu{padding:12px 14px calc(24px + env(safe-area-inset-bottom))}
  .mm-link{padding:13px 13px;font-size:14.5px;margin-bottom:7px;border-radius:3px}
  .mm-ic{width:24px;height:24px}
  .mm-ic svg{width:19px;height:19px}
  .mmenu-head{margin-bottom:10px;padding-bottom:10px}
  .mm-brand .bico{height:28px}
  .mm-brand .wordmark{font-size:18px}
  /* Product card polish */
  .prod-grid{gap:10px}
  .card{border-radius:3px}
  .card-body{padding:10px 11px 12px}
  .card-name{font-size:14px}
  .price .now{font-size:17px}
  .add-btn{height:36px;padding:0 12px;font-size:12px;border-radius:2px}
  /* Hero compact */
  .hero{padding:28px 0 32px}
  /* Cart drawer → full-width on mobile */
  .drawer{max-width:100vw;width:100vw}
  .drawer-head{padding:14px 16px}
  .drawer-head h3{font-size:17px}
  .drawer-body{padding:12px 16px}
  .drawer-foot{padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
  /* Checkout button */
  .checkout-btn{height:48px;font-size:14px;border-radius:3px}
  /* Auth modal → bottom sheet */
  .auth-scrim{align-items:flex-end;padding:0}
  .auth-card{border-radius:4px 4px 0 0;max-height:92vh;padding:24px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);width:100%}
  .auth-scrim.open .auth-card{transform:translateY(0)}
  /* Section spacing */
  .section{padding:40px 0}
  /* Payment portal */
  .pay-portal{width:calc(100vw - 20px);max-width:420px;border-radius:4px}
  /* Admin mobile fixes */
  .admin-top{padding:0 12px;min-height:50px}
  .admin-top h2{font-size:15px}
  .admin-body{padding:12px 10px}
  .a-btn{height:38px;padding:0 14px;font-size:12.5px}
}
@media(max-width:400px){
  .wrap{padding:0 10px}
  .nav-in{gap:4px}
  .brand .wordmark{font-size:16px}
  .brand .bico{height:22px}
  .prod-grid{gap:8px}
  .card-body{padding:8px 9px 10px}
  .card-name{font-size:13px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .price .now{font-size:15.5px}
  .add-btn{height:34px;padding:0 10px;font-size:11.5px}
  .hero-stats .n{font-size:18px}
  .hero-stats .l{font-size:9.5px}
  .mmenu{padding:10px 12px calc(20px + env(safe-area-inset-bottom))}
  .mm-link{padding:11px 11px;font-size:13.5px;margin-bottom:6px}
  .mob-bar-item{font-size:9px}
  .mob-bar-item svg{width:20px;height:20px}
  .promo-section{padding:20px 0 24px}
  .promo-wrap{padding:0 44px}
  .promo-scroll{gap:0;justify-content:center;padding:8px 0}
  .promo-card:not(.pc-active){display:none}
  .promo-card.pc-active{flex:0 0 100%;width:100%;height:auto;aspect-ratio:1/1;transform:none;opacity:1;filter:none;border-radius:var(--r-md);box-shadow:0 12px 36px rgba(10,109,160,.22),0 0 0 2px rgba(10,109,160,.1);padding:24px 22px}
  .promo-card .pc-title{font-size:22px}
  .promo-card .pc-desc{font-size:13px;-webkit-line-clamp:3}
  .promo-card .pc-badge{font-size:10px;padding:4px 12px}
  .promo-card .pc-cta{font-size:13px;padding:8px 20px}
  .promo-arrow{width:36px;height:36px}
  .promo-prev{left:2px}
  .promo-next{right:2px}
  [dir=rtl] .promo-prev{left:auto;right:2px}
  [dir=rtl] .promo-next{right:auto;left:2px}
  .promo-dots{margin-top:14px;gap:7px}
  .promo-dot{width:9px;height:9px}
}
/* — Promo announcements carousel — */
.promo-section{padding:40px 0 44px;overflow:visible}
.promo-wrap{position:relative;width:100%;max-width:1100px;margin:0 auto;padding:0 52px;box-sizing:border-box}
.promo-scroll{display:flex;gap:20px;justify-content:center;align-items:center;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:16px 0;-webkit-overflow-scrolling:touch}
.promo-scroll::-webkit-scrollbar{display:none}
.promo-card{flex:0 0 280px;width:280px;height:280px;border-radius:var(--r-md);position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 22px;color:#fff;text-decoration:none;transition:transform .45s cubic-bezier(.25,.8,.25,1),box-shadow .45s cubic-bezier(.25,.8,.25,1),opacity .4s,filter .4s;opacity:.55;filter:brightness(.85);transform:scale(.88)}
.promo-card.pc-active{transform:scale(1.05);opacity:1;filter:brightness(1);box-shadow:0 16px 48px rgba(10,109,160,.28),0 0 0 3px rgba(10,109,160,.12);z-index:3}
.promo-card.pc-active:hover{transform:scale(1.07);box-shadow:0 20px 56px rgba(10,109,160,.32),0 0 0 3px rgba(10,109,160,.16)}
.promo-card:not(.pc-active):hover{opacity:.72;filter:brightness(.92);transform:scale(.91)}
.promo-card .pc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.promo-card .pc-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.52) 100%)}
.promo-card .pc-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px}
.promo-card .pc-badge{display:inline-flex;align-self:flex-start;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;padding:3px 11px;border-radius:3px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin-bottom:4px}
.promo-card .pc-title{font-size:20px;font-weight:900;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.promo-card .pc-desc{font-size:13px;font-weight:600;opacity:.92;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 5px rgba(0,0,0,.2)}
.promo-card .pc-cta{display:inline-flex;align-self:flex-start;font-size:12px;font-weight:800;padding:7px 18px;border-radius:3px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin-top:8px;transition:background .2s}
.promo-card:hover .pc-cta{background:rgba(255,255,255,.38)}
.promo-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:var(--r);border:none;background:rgba(255,255,255,.92);color:#1d1d1f;display:grid;place-items:center;cursor:pointer;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:background .2s,opacity .2s;opacity:.8}
.promo-arrow:hover{background:#fff;opacity:1}
.promo-prev{left:2px}
.promo-next{right:2px}
[dir=rtl] .promo-prev{left:auto;right:2px}
[dir=rtl] .promo-next{right:auto;left:2px}
.promo-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.promo-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);border:none;cursor:pointer;transition:background .3s,transform .3s;padding:0}
.promo-dot.active{background:var(--brand);transform:scale(1.3)}

/* ════════════════════════════════════════════════════════════
   PartnerTech refresh v13 — polish layer + dark mode
   Appended last so it wins the cascade. Do theme tweaks here.
   ════════════════════════════════════════════════════════════ */
html{color-scheme:light}
body{transition:background .3s ease,color .3s ease}
a,button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring)}
.field:focus,select.field:focus,textarea.field:focus,.a-input:focus{border-color:var(--brand);box-shadow:var(--ring);outline:none}
.add-btn:active,.btn:active,.checkout-btn:active,.a-btn:active,.cart-btn:active{transform:translateY(0) scale(.98)}
.checkout-btn{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,filter .2s}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.feat-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.testi{transition:transform .3s,box-shadow .3s}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.paystat{border:1px solid transparent}

/* theme toggle */
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink-2);background:transparent;transition:.2s;flex:0 0 auto}
.theme-btn:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-1px)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .ic-sun{display:none}.theme-btn .ic-moon{display:block}
[data-theme=dark] .theme-btn .ic-sun{display:block}[data-theme=dark] .theme-btn .ic-moon{display:none}
.mm-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:var(--r);background:var(--bg-soft);font-weight:800;font-size:14px;color:var(--ink);margin-top:4px}
.mm-theme .theme-btn{border-color:var(--line)}

/* ── dark-mode surface overrides (storefront + drawers + account + admin) ── */
[data-theme=dark] .nav.scrolled{border-bottom-color:rgba(120,180,220,.12);box-shadow:0 4px 24px rgba(0,0,0,.4)}
[data-theme=dark] .mmenu{background:linear-gradient(180deg,#141d27 0%,#0f1720 100%)}
[data-theme=dark] .mmenu-item{color:var(--ink)}
[data-theme=dark] .feat{background:linear-gradient(180deg,#121a22,#0e141b)}
[data-theme=dark] .feat-card{background:var(--card);box-shadow:var(--shadow-sm)}
[data-theme=dark] .testi{background:var(--card);border-color:var(--line)}
[data-theme=dark] .btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .foot-soc a{background:var(--card);border-color:var(--line);color:var(--ink-2)}
[data-theme=dark] .drawer{background:var(--panel)}
[data-theme=dark] .field,[data-theme=dark] select.field,[data-theme=dark] textarea.field,[data-theme=dark] .a-input,[data-theme=dark] input.field{background:var(--bg-soft2);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .a-card{background:var(--card);border-color:var(--line)}
[data-theme=dark] .a-card-h{background:linear-gradient(90deg,#131c26,#161f29);border-bottom-color:var(--line)}
[data-theme=dark] .a-table th{background:var(--bg-soft2);color:var(--ink-2)}
[data-theme=dark] .a-table td,[data-theme=dark] .a-table th{border-color:var(--line)}
[data-theme=dark] .acct-order{background:var(--card);border-color:var(--line)}
[data-theme=dark] .acct-tab.active{background:var(--card);color:var(--ink)}
[data-theme=dark] .acct-stat{background:var(--card);border-color:var(--line)}
[data-theme=dark] .acct-btn{border-color:var(--line);color:var(--ink)}
[data-theme=dark] .hero-card{background:linear-gradient(160deg,#18222d,#131b24);border-color:var(--line)}
[data-theme=dark] .cat-card{background:linear-gradient(160deg,#15232f,#101922)}
[data-theme=dark] .card-media{background:var(--bg-soft)}
[data-theme=dark] .prod-svg{filter:saturate(1.06) brightness(.98)}
[data-theme=dark] .promo-arrow{background:var(--bg-soft2);color:var(--ink)}
[data-theme=dark] .promo-arrow:hover{background:var(--card)}
[data-theme=dark] .pillstat.on,[data-theme=dark] .pillstat.delivered{color:#7fe0ad}
[data-theme=dark] .paystat.paid{color:#6fe0a3}
[data-theme=dark] .paystat.unpaid{color:#ff9a8b}
/* dark: mobile nav + modals/panels */
[data-theme=dark] .mob-bar{background:rgba(16,23,31,.95);border-top-color:var(--line)}
[data-theme=dark] .modal,[data-theme=dark] .a-modal,[data-theme=dark] .auth-card,[data-theme=dark] .notif-panel{background:var(--panel);border-color:var(--line)}
[data-theme=dark] .a-modal-h,[data-theme=dark] .a-modal-f{background:var(--panel);border-color:var(--line)}
[data-theme=dark] .modal-close:hover{background:var(--card)}
[data-theme=dark] .notif-panel{box-shadow:0 12px 40px rgba(0,0,0,.55)}
[data-theme=dark] .toast,[data-theme=dark] .notif-toast{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
[data-theme=dark] .quick,[data-theme=dark] .card-media .quick{background:rgba(16,23,31,.7)}
[data-theme=dark] .badge.new,[data-theme=dark] .badge.best,[data-theme=dark] .badge.hot{color:#fff}
/* mobile polish: comfortable tap targets */
@media(max-width:640px){
  .qty button{min-width:34px;min-height:34px}
  .ci-remove{min-height:32px}
  .add-btn{min-height:40px}
  .mob-bar-item{padding-top:7px}
  .paystat{font-size:10.5px;padding:3px 8px}
}

/* ═══ v13.1 — out-of-stock, richer product cards & advertising carousel ═══ */
/* single, premium out-of-stock treatment (overlay only; corner badge removed) */
.oos-overlay{background:linear-gradient(180deg,rgba(247,248,250,.32),rgba(247,248,250,.7));-webkit-backdrop-filter:saturate(.75);backdrop-filter:saturate(.75)}
.oos-overlay span{background:rgba(20,26,33,.92);color:#fff;font-size:13.5px;font-weight:800;padding:9px 20px;border-radius:999px;letter-spacing:.3px;box-shadow:0 10px 24px -8px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16)}
.oos-overlay.preorder span{background:linear-gradient(135deg,#f59e0b,#d97706)}
.oos-overlay.soon span{background:var(--brand)}
[data-theme=dark] .oos-overlay{background:linear-gradient(180deg,rgba(10,14,19,.42),rgba(10,14,19,.76))}
.card.oos:not(.preorder) .card-media .prod-svg,.card.oos:not(.preorder) .card-media .prod-img{filter:grayscale(.45) opacity(.85)}

/* product card refinements — more depth & a clearer price */
.card{border-radius:var(--r-xl)}
.card-media{border-radius:var(--r-xl) var(--r-xl) 0 0;background:linear-gradient(160deg,var(--bg-soft2),var(--bg-soft))}
.card:hover{box-shadow:0 24px 60px -22px rgba(10,74,107,.30)}
.card-foot{align-items:flex-end}
.price .now{font-size:21px;color:var(--brand-ink)}
[data-theme=dark] .price .now{color:var(--ink)}
.price-sub{display:flex;align-items:center;gap:7px;margin-top:3px}
.disc-pill{background:var(--danger-soft);color:var(--danger);font-size:10.5px;font-weight:900;padding:2px 7px;border-radius:6px;letter-spacing:.2px;line-height:1.5}
.add-btn{background:var(--brand-grad);border-radius:var(--r);box-shadow:0 6px 16px -5px var(--brand-glow)}
.add-btn:hover{background:linear-gradient(135deg,var(--navy),var(--brand));transform:translateY(-2px);box-shadow:0 12px 24px -6px rgba(10,109,160,.42)}
.badge{border-radius:999px;box-shadow:0 6px 16px -8px rgba(0,0,0,.32)}
.card-brand{letter-spacing:.6px}

/* advertising / promo carousel — premium look */
.promo-card{border-radius:var(--r-xl);box-shadow:0 12px 32px -14px rgba(10,74,107,.32)}
.promo-card:not(.pc-active){opacity:.7;filter:brightness(.9) saturate(.95)}
.promo-card.pc-active{box-shadow:0 26px 64px -20px rgba(10,109,160,.5),0 0 0 1px rgba(255,255,255,.06)}
.promo-card .pc-bg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.promo-card.pc-active:hover .pc-bg{transform:scale(1.06)}
.promo-card .pc-overlay{background:linear-gradient(165deg,rgba(8,30,48,.12) 0%,rgba(8,26,44,.52) 52%,rgba(6,20,36,.84) 100%)}
.promo-card .pc-badge{background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;letter-spacing:1px;padding:4px 12px;border-radius:999px;box-shadow:0 4px 12px -3px rgba(10,109,160,.55)}
.promo-card .pc-title{font-size:23px;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.promo-card .pc-desc{opacity:.95}
.promo-card .pc-cta{background:#fff;color:var(--brand-ink);border-radius:999px;padding:9px 22px;font-size:12.5px;margin-top:12px;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.promo-card:hover .pc-cta,.promo-card .pc-cta:hover{background:#fff;transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(0,0,0,.45)}
.promo-arrow{border-radius:999px;background:var(--card);color:var(--ink);box-shadow:0 4px 16px -4px rgba(10,74,107,.3);opacity:.95}
.promo-arrow:hover{background:var(--card);opacity:1;color:var(--brand)}
[data-theme=dark] .promo-arrow{background:var(--panel)}
.promo-dot{background:var(--line)}
.promo-dot.active{background:var(--brand);transform:scale(1.35)}
@media(max-width:640px){
  .promo-card.pc-active{border-radius:var(--r-xl);box-shadow:0 18px 44px -18px rgba(10,109,160,.42),0 0 0 1px rgba(10,109,160,.08)}
  .promo-card .pc-title{font-size:24px}
  .price .now{font-size:20px}
}

/* ═══ v13.2 — editorial / magazine look (less "AI illustration", more realistic) ═══ */
/* Auto-generated product illustrations show only when a product has NO real photo.
   Render them as refined monochrome so they read as clean catalogue art, not cartoon.
   Real uploaded photos (.prod-img) are untouched and keep full colour/realism. */
.card-media .prod-svg{filter:grayscale(1) contrast(1.02)}
.card:hover .card-media .prod-svg{filter:grayscale(1) contrast(1.02)}
[data-theme=dark] .card-media .prod-svg,[data-theme=dark] .prod-svg{filter:grayscale(1) brightness(.9)}
.card.oos:not(.preorder) .card-media .prod-svg{filter:grayscale(1) opacity(.8)}
.hero-card .prod-svg,.hero-card svg:not([class*=hero]){filter:grayscale(1)}
.card-media{background:linear-gradient(165deg,#fbfcfe,#eef1f6)}
[data-theme=dark] .card-media{background:linear-gradient(165deg,#161f29,#111922)}

/* Editorial labels: flat charcoal, uppercase, letter-spaced — no gradients, no animation.
   The one splash of colour is the red discount pill next to the price. */
.badge{background:#171a1e !important;background-image:none !important;color:#fff !important;font-size:9.5px !important;font-weight:800 !important;letter-spacing:.8px !important;text-transform:uppercase;padding:5px 11px !important;border-radius:999px !important;animation:none !important;box-shadow:0 4px 14px -7px rgba(0,0,0,.5) !important}
.badge::before,.badge::after{content:none !important;display:none !important;background:none !important;animation:none !important}
.badge.hot{padding-inline-start:11px !important}
.badge.low{background:#fff !important;color:#8a5a00 !important;border:1px solid #f0e3c8 !important}
.badge.feat{background:#171a1e !important}
[data-theme=dark] .badge{background:#eef2f6 !important;color:#0e141b !important}
[data-theme=dark] .badge.low{background:var(--panel) !important;color:#e0b877 !important;border-color:#3a2f1c !important}
/* RTL safety: never letter-space Arabic (it breaks letter-joining) */
[dir=rtl] .badge{letter-spacing:0 !important}

/* ═══ v13.3 — editorial headline type & kickers (blue kept, RTL-safe) ═══ */
/* Latin headlines use an editorial serif (Fraunces); Arabic stays on Cairo (heavy). */
h1.hero-title,.sec-title,.deliv-card h2,.cat-page-title{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.005em}
[dir=rtl] h1.hero-title,[dir=rtl] .sec-title,[dir=rtl] .deliv-card h2,[dir=rtl] .cat-page-title{font-family:'Cairo',sans-serif;font-weight:900;letter-spacing:0}
/* Kill the rainbow gradient headline word → a single solid blue (editorial). */
.hero-title .grad{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;-webkit-text-fill-color:var(--brand) !important;color:var(--brand) !important}
.hero-cine .hero-title .grad{-webkit-text-fill-color:#57c6ec !important;color:#57c6ec !important}
/* Minimal magazine kicker instead of the filled pill. */
.eyebrow{background:none;border:none;padding:0;margin-bottom:16px;color:var(--brand);font-weight:800;font-size:12.5px;gap:9px}
.hero-cine .eyebrow{background:none;border:none;color:#bfe9f2}
html[dir=ltr] .eyebrow{text-transform:uppercase;letter-spacing:2.4px;font-size:11.5px}
.eyebrow .dot{box-shadow:0 0 0 4px rgba(10,109,160,.16)}
/* Airier editorial spacing + confident section titles. */
.sec-head{margin-bottom:52px;max-width:720px}
.sec-title{font-size:clamp(32px,4.2vw,50px);line-height:1.06}
h1.hero-title{line-height:1.04}

/* ═══ v13.4 — no illustrations: clean branded placeholder when a product has no photo ═══ */
.prod-ph{width:100%;aspect-ratio:6/5;display:grid;place-items:center;background:linear-gradient(165deg,#fbfcfe,#eef1f6);overflow:hidden}
.prod-ph-mark{width:54px;height:auto;fill:#c9d1dc;opacity:.9;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .prod-ph-mark{transform:scale(1.06)}
.m-img .prod-ph{aspect-ratio:4/3;min-height:340px;border-radius:var(--r-lg)}
.m-img .prod-ph-mark{width:76px}
[data-theme=dark] .prod-ph{background:linear-gradient(165deg,#161f29,#111922)}
[data-theme=dark] .prod-ph-mark{fill:#2f3b48}

/* ═══ v13.5 — near-square corners, magazine sale flags, RTL carousel arrows ═══ */
/* Near-square (editorial) corners across the whole UI */
:root{--r-xs:2px;--r:3px;--r-md:3px;--r-lg:4px;--r-xl:5px;--r-2xl:6px}
.card{border-radius:4px}
.card-media{border-radius:4px 4px 0 0}
.paystat,.disc-pill{border-radius:3px}
.promo-card,.promo-card.pc-active{border-radius:4px}
.promo-card .pc-badge,.promo-card .pc-cta,.promo-arrow{border-radius:3px}
.promo-dot{border-radius:2px}
.badge{border-radius:2px !important}
.add-btn,.checkout-btn,.field,select.field,textarea.field,.a-input,.a-btn,.btn,.cart-btn,.acct-btn,.lang-btn,.theme-btn{border-radius:3px}
.drawer,.modal,.a-modal,.auth-card,.notif-panel{border-radius:4px}
.drawer{border-radius:0}

/* RTL: flip the carousel chevrons so they point the right way in Arabic */
[dir=rtl] .promo-arrow svg{transform:scaleX(-1)}

/* Magazine promotional flag — full-width bold band under the product image */
.flag-band{text-align:center;font-weight:800;font-size:13px;padding:8px 10px;color:#fff;line-height:1.3;background:#17324a}
[dir=ltr] .flag-band{text-transform:uppercase;letter-spacing:.9px}
.flag-band.flag-sale{background:#d5261a}
.flag-band.flag-best{background:#17324a}
.flag-band.flag-hot{background:#c0341d}
.flag-band.flag-new{background:var(--brand)}
.flag-band.flag-feat{background:#171a1e}
[data-theme=dark] .flag-band.flag-best{background:#0f2a40}
[data-theme=dark] .flag-band.flag-feat{background:#0e141b}
/* Sale price in red (magazine convention) */
.price.on-sale .now{color:#d5261a}
[data-theme=dark] .price.on-sale .now{color:#ff6a55}

/* ═══ v14 — ALDI-style clean retail cards: borderless, product-on-white, blue price ═══ */
.prod-grid{gap:34px 22px}
.card{background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0;overflow:visible;transition:none}
.card:hover{transform:none;box-shadow:none !important}
.card-media{background:#fff;border:1px solid #eef1f6;border-radius:2px;padding:14px;overflow:hidden}
.card:hover .card-media{border-color:#d3dae3}
[data-theme=dark] .card-media{background:#0f1720;border-color:#26313d}
.card-media .prod-ph{background:transparent;aspect-ratio:1/1}
.card-body{padding:12px 2px 0}
.card-brand{color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.4px;margin-bottom:4px}
.card-name{font-size:15px;font-weight:800;line-height:1.3}
.card-tag{min-height:0;margin-top:4px;font-size:12.5px}
.rate{margin-top:8px;font-size:12px}
.card-foot{margin-top:12px}
.price .now{color:var(--brand);font-size:20px;font-weight:900}
[data-theme=dark] .price .now{color:var(--brand-2)}
.price.on-sale .now{color:#d5261a}
[data-theme=dark] .price.on-sale .now{color:#ff6a55}

/* status line under the product image (ALDI "while stock lasts" style) */
.stat-line{text-align:center;font-weight:700;font-size:11px;padding:10px 6px 3px;color:#8a919c}
[dir=ltr] .stat-line{text-transform:uppercase;letter-spacing:.6px}
.stat-line.sl-sale,.stat-line.sl-low{color:#d5261a}
.stat-line.sl-best{color:#17324a}
.stat-line.sl-new{color:var(--brand)}
[data-theme=dark] .stat-line{color:#8b949f}
[data-theme=dark] .stat-line.sl-best{color:#9fb3c6}

/* wishlist heart */
.wish{position:absolute;top:8px;inset-inline-end:8px;z-index:4;width:34px;height:34px;display:grid;place-items:center;color:#c2ccd8;background:transparent;border:none;transition:color .18s,transform .18s;padding:0}
.wish:hover{color:var(--brand);transform:scale(1.08)}
.wish.on{color:#d5261a}
[data-theme=dark] .wish{color:#3a4653}

/* clean solid-blue add button */
.add-btn{background:var(--brand);box-shadow:none;border-radius:3px}
.add-btn:hover{background:var(--navy);box-shadow:none;transform:none}

/* ═══ v15 — ALDI page furniture: nav wishlist, sort, breadcrumb, flat header/type ═══ */
/* nav wishlist heart + count */
.wish-nav{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:3px;border:1px solid var(--line);color:var(--ink-2);background:transparent;transition:.2s;flex:0 0 auto}
.wish-nav:hover{color:var(--brand);border-color:var(--brand)}
.wish-count{position:absolute;top:-6px;inset-inline-end:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d5261a;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.wish-count.hide{display:none}
@media(max-width:1000px){ .nav-actions .wish-nav{display:none} }

/* sort control + results count */
.sort-sel{max-width:220px}
.cat-countbar{margin:14px 2px 20px;font-size:13px;font-weight:700;color:var(--ink-3)}
.cat-count-num{color:var(--ink);font-weight:900}

/* breadcrumb + flat page header (white, dark title — ALDI) */
.cat-page-header{background:var(--bg) !important;color:var(--ink);padding:24px 0 8px !important;border-bottom:1px solid var(--line-2);margin-bottom:0}
.cat-page-header::before{display:none !important}
.cat-page-title{color:var(--ink) !important;font-size:clamp(26px,4vw,40px)}
.cat-page-desc{color:var(--ink-2) !important}
[data-theme=dark] .cat-page-header{background:var(--bg) !important;border-bottom-color:var(--line)}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin-bottom:14px}
.crumb a{color:var(--brand)}
.crumb a:hover{text-decoration:underline}
.crumb .crumb-sep{color:var(--ink-3);opacity:.6}
.crumb .crumb-cur{color:var(--ink-2)}
.cat-count-h{color:var(--ink-3);font-weight:800}

/* flat supermarket-clean headlines — drop the editorial serif, use bold sans */
h1.hero-title,.sec-title,.deliv-card h2,.cat-page-title{font-family:'Inter','Cairo',sans-serif !important;font-weight:900 !important;letter-spacing:-.02em}
[dir=rtl] h1.hero-title,[dir=rtl] .sec-title,[dir=rtl] .cat-page-title,[dir=rtl] .deliv-card h2{font-family:'Cairo',sans-serif !important}
.feat{background:var(--bg-soft2)}

/* ═══ v16 — Sort & Filter sheet + trigger button ═══ */
.filter-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;background:var(--brand);color:#fff;border-radius:3px;font-weight:800;font-size:14px;transition:.15s;white-space:nowrap;flex:0 0 auto}
.filter-btn:hover{background:var(--navy)}
.fsheet-scrim{position:fixed;inset:0;z-index:130;background:rgba(10,20,30,.42);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;display:flex;align-items:flex-end;justify-content:center}
.fsheet-scrim.open{opacity:1;visibility:visible}
.fsheet{width:100%;max-width:520px;max-height:86vh;overflow-y:auto;background:var(--bg);border-radius:8px 8px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.fsheet-scrim.open .fsheet{transform:translateY(0)}
@media(min-width:700px){ .fsheet-scrim{align-items:center} .fsheet{border-radius:6px;max-height:82vh} }
.fsheet-h{position:sticky;top:0;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line-2);font-weight:900;font-size:16px;z-index:2}
.fsheet-b{padding:2px 20px}
.fsheet-sec{padding:16px 0;border-bottom:1px solid var(--line-2)}
.fsheet-sec:last-child{border-bottom:none}
.fsheet-lbl{font-size:12px;font-weight:800;color:var(--ink-3);margin-bottom:10px}
[dir=ltr] .fsheet-lbl{text-transform:uppercase;letter-spacing:.5px}
.fopt{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;font-weight:600;cursor:pointer}
.fopt input{accent-color:var(--brand);width:17px;height:17px;flex:0 0 auto}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{padding:8px 15px;border:1px solid var(--line);border-radius:3px;font-size:13px;font-weight:700;cursor:pointer;background:transparent;color:var(--ink);transition:.15s}
.fchip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.fprice{display:flex;align-items:center;gap:10px}
.fprice input{width:100%;height:46px;border:1px solid var(--line);border-radius:3px;padding:0 12px;font-weight:700;font-size:14px;color:var(--ink);background:var(--bg)}
.fdash{color:var(--ink-3)}
.fsheet-f{position:sticky;bottom:0;background:var(--bg);display:flex;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2)}
.fbtn{flex:1;height:48px;border-radius:3px;font-weight:800;font-size:14px;transition:.15s}
.fbtn.apply{background:var(--brand);color:#fff}
.fbtn.apply:hover{background:var(--navy)}
.fbtn.reset{background:var(--bg-soft);color:var(--ink-2)}

/* ═══ v16b — flat supermarket hero: kill grain/cinematic FX, clean scrim, shorter banner ═══ */
.hero-grain{display:none !important}
.hero-bar{display:none !important}
.hero-svg{animation:none !important}
.hero-frame{animation:none !important;transform:none !important;filter:none !important;object-position:center}
.hero-cine{min-height:auto;background:#0c1522}
.hero{min-height:60vh;padding:60px 0}
.hero-stage::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(8,13,22,.55);pointer-events:none}
.hero-cine .hero-title,.hero-cine .hero-sub{text-shadow:none}
@media(max-width:640px){ .hero{min-height:auto;padding:34px 0 36px} .hero-stage::after{background:rgba(8,13,22,.6)} }

/* ═══ v17 — mobile advertising: one big landscape card ═══ */
@media(max-width:700px){
  .promo-section{padding:16px 0 22px}
  .promo-wrap{padding:0 8px}
  .promo-scroll{gap:0;justify-content:center;padding:6px 0}
  .promo-card:not(.pc-active){display:none !important}
  .promo-card.pc-active{flex:0 0 100%;width:100%;height:auto;aspect-ratio:16/10;transform:none;opacity:1;filter:none;border-radius:4px;padding:20px 18px;box-shadow:0 16px 38px -16px rgba(10,109,160,.45)}
  .promo-card .pc-title{font-size:27px;line-height:1.12}
  .promo-card .pc-desc{font-size:14px;-webkit-line-clamp:2}
  .promo-card .pc-cta{font-size:13px;padding:10px 22px;margin-top:12px}
  .promo-card .pc-badge{font-size:11px;padding:5px 13px}
  .promo-card .pc-overlay{background:linear-gradient(160deg,rgba(6,20,36,.12) 0%,rgba(6,18,32,.5) 55%,rgba(5,14,26,.82) 100%)}
  .promo-arrow{width:40px;height:40px}
  .promo-prev{left:6px}.promo-next{right:6px}
  [dir=rtl] .promo-prev{left:auto;right:6px}[dir=rtl] .promo-next{right:auto;left:6px}
}
@media(max-width:420px){
  .promo-card.pc-active{aspect-ratio:3/2}
  .promo-card .pc-title{font-size:24px}
}

/* ═══ v18 — one-click Confirm button in admin orders ═══ */
.confirm-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;background:var(--ok);color:#fff;border-radius:3px;font-weight:800;font-size:12px;white-space:nowrap;transition:.15s;flex:0 0 auto;cursor:pointer;border:none}
.confirm-btn:hover{background:#178a52;transform:translateY(-1px)}
.confirm-btn:active{transform:translateY(0)}
.confirm-btn svg{flex:0 0 auto}

/* ═══ v19 — desktop advertising: focused center card (tall) + small side peeks ═══ */
@media(min-width:701px){
  .promo-section{padding:34px 0 46px;overflow:hidden}
  .promo-wrap{max-width:100%;padding:0 56px;position:relative}
  .promo-scroll{display:flex;gap:22px;align-items:center;height:496px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 max(56px,calc(50% - 335px));scroll-snap-type:x mandatory}
  .promo-scroll::-webkit-scrollbar{display:none}
  .promo-card{flex:0 0 auto;width:240px;height:auto;aspect-ratio:4/3;opacity:.5;filter:brightness(.9);transform:none;border-radius:5px;scroll-snap-align:center;box-shadow:0 12px 26px -16px rgba(10,74,107,.34);transition:opacity .4s,filter .4s,width .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
  .promo-card:not(.pc-active){display:flex !important}
  .promo-card:not(.pc-active):hover{opacity:.72;filter:brightness(.96);transform:none}
  .promo-card.pc-active{width:660px;aspect-ratio:16/11;opacity:1;filter:none;transform:none;z-index:3;box-shadow:0 18px 40px -22px rgba(10,74,107,.42);padding:40px 46px}
  .promo-card.pc-active:hover{transform:none}
  .promo-card.pc-active .pc-content{max-width:520px}
  .promo-card.pc-active .pc-badge{font-size:12px;padding:6px 16px;letter-spacing:1.2px}
  .promo-card.pc-active .pc-title{font-size:40px;line-height:1.06}
  .promo-card.pc-active .pc-desc{font-size:16px;-webkit-line-clamp:3;max-width:480px}
  .promo-card.pc-active .pc-cta{font-size:14px;padding:13px 30px;margin-top:16px}
  .promo-card:not(.pc-active) .pc-title{font-size:17px;line-height:1.2}
  .promo-card:not(.pc-active) .pc-desc,.promo-card:not(.pc-active) .pc-cta{display:none}
  .promo-card:not(.pc-active) .pc-badge{font-size:10px;padding:4px 10px;letter-spacing:.6px}
  .promo-arrow{width:48px;height:48px}
  .promo-prev{left:16px}.promo-next{right:16px}
  [dir=rtl] .promo-prev{left:auto;right:16px}
  [dir=rtl] .promo-next{right:auto;left:16px}
}
@media(min-width:1100px){
  .promo-card.pc-active{width:720px;aspect-ratio:16/10}
  .promo-card.pc-active .pc-title{font-size:44px}
}

/* ═══════════════════════════════════════════════════════════════
   v20 — EDITORIAL REDESIGN (approved direction): Cairo · clean paper
   palette · refined blue accent · near-square · light-only.
   Stage 1 = design-system foundation (tokens/type/buttons). Structure
   (hero, photo categories, printing service, reviews) follows.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f4f0; --bg-soft:#ecebe4; --bg-soft2:#f1f0ea; --panel:#ffffff; --bg-blue:#e7eef4; --card:#ffffff;
  --ink:#191b1f; --ink-2:#5b5f66; --ink-3:#9a9ea6; --line:#e6e3db; --line-2:#efece5;
  --brand:#0f5f8a; --brand-2:#1587c4; --brand-ink:#0b476a; --brand-soft:#dce9f3; --brand-glow:rgba(15,95,138,.13);
  --brand-grad:linear-gradient(135deg,#0f5f8a,#1587c4); --navy:#0b3a56; --teal:#1587c4;
  --r-xs:3px; --r:4px; --r-md:5px; --r-lg:6px; --r-xl:8px; --r-2xl:10px;
}
html, body{ background:var(--bg); }
body, button, input, select, textarea, [dir=rtl] body{
  font-family:'Cairo','Segoe UI',system-ui,-apple-system,sans-serif;
}
/* editorial headings: Cairo, tight, bold (replaces any serif/Fraunces) */
h1,h2,h3,.hero-title,.sec-title,.sec-head h2,.cat-page-title,.feat-title,.wordmark,.deliv-card h2,.prod-name{
  font-family:'Cairo',sans-serif !important; letter-spacing:-.015em;
}
.hero-title,h1{ font-weight:800; }
/* dark editorial primary buttons, near-square everywhere */
.btn-primary,.checkout-btn{ background:var(--ink) !important; color:#fff !important; box-shadow:none !important; }
.btn-primary:hover,.checkout-btn:hover{ background:var(--brand-ink) !important; }
.btn,.btn-primary,.btn-secondary,.add-btn,.sort-btn,.filter-btn,.checkout-btn,.a-btn{ border-radius:4px !important; }
.product-card,.cat-card,.feat-card,.hero-card,.promo-card,.a-card,.panel,.mm-link,.deliv-card{ border-radius:6px !important; }
/* announcement bar -> calm editorial ink */
.announce,.announce-bar{ background:var(--ink) !important; }

/* ── v20 · Stage 2 — editorial hero (product plate) ── */
.hero.hero-ed{ min-height:auto !important; height:auto !important; background:var(--bg) !important; padding:0 !important; margin:0 !important; border-bottom:1px solid var(--line); display:block; overflow:visible !important; }
.hero-ed .hero-grid{ display:grid; grid-template-columns:1fr 1.02fr; gap:52px; align-items:center; padding:58px 0 54px; }
.hero-ed .hero-copy{ position:static !important; inset:auto !important; max-width:none !important; width:auto !important; text-align:start !important; color:var(--ink) !important; transform:none; opacity:1; }
.hero-ed .hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; font:600 12px/1 'Cairo',sans-serif; letter-spacing:.15em; color:var(--brand-ink); margin-bottom:20px; }
.hero-ed .hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-glow); }
.hero-ed .hero-title{ font-size:clamp(34px,5.2vw,64px) !important; font-weight:800 !important; line-height:1.06 !important; color:var(--ink) !important; letter-spacing:-.02em; text-shadow:none !important; margin:0; }
.hero-ed .hero-title .hl{ color:var(--brand) !important; -webkit-text-fill-color:var(--brand); background:none !important; }
.hero-ed .hero-sub{ color:var(--ink-2) !important; font-size:clamp(16px,1.5vw,19px) !important; max-width:44ch; margin-top:20px; font-weight:500; }
.hero-ed .hero-cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
.hero-ed .hero-cta .arw{ transform:scaleX(-1); }
.hero-ed .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.hero-ed .btn-ghost:hover{ border-color:var(--brand); color:var(--brand-ink); }
.hero-ed .hero-stats{ margin-top:36px; display:flex; gap:34px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; }
.hero-ed .hero-stats .stat{ text-align:start; }
.hero-ed .hero-stats .n{ font-size:28px; font-weight:800; color:var(--ink); }
.hero-ed .hero-stats .l{ font-size:12.5px; color:var(--ink-2); font-weight:600; margin-top:2px; }
.hero-ed .hero-fig{ position:relative; transform:none; opacity:1; }
.hero-ed .hero-plate{ position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--panel); box-shadow:0 40px 90px -46px rgba(16,40,60,.5); }
.hero-ed .hero-plate img{ width:100%; aspect-ratio:16/13; object-fit:cover; display:block; }
.hero-ed .hero-cap{ position:absolute; bottom:0; inset-inline-start:0; background:var(--bg); border:1px solid var(--line); border-block-end:none; border-inline-start:none; padding:11px 17px; font:500 14px/1.3 'Cairo',sans-serif; color:var(--ink-2); }
.hero-ed .hero-cap b{ color:var(--ink); font-weight:700; }
.hero-ed .hero-badge{ position:absolute; top:18px; inset-inline-end:18px; background:var(--bg); border:1px solid var(--line); border-radius:50%; width:86px; height:86px; display:grid; place-items:center; box-shadow:0 12px 30px -12px rgba(16,40,60,.4); transform:rotate(-8deg); }
.hero-ed .hero-badge .t{ font:600 10px/1.2 'Cairo',sans-serif; letter-spacing:.06em; color:var(--brand-ink); }
.hero-ed .hero-badge .b{ font-weight:800; font-size:16px; color:var(--ink); }
@media(max-width:900px){ .hero-ed .hero-grid{ grid-template-columns:1fr; gap:28px; padding:40px 0 44px; } .hero-ed .hero-fig{ order:-1; width:100%; max-width:460px; margin-inline:auto; } .hero-ed .hero-stats{ gap:24px; } }
@media(max-width:560px){ .hero-ed .hero-badge{ width:66px; height:66px; top:12px; inset-inline-end:12px; } .hero-ed .hero-badge .t{ font-size:9px; } .hero-ed .hero-badge .b{ font-size:13px; } }

/* ── v20 · Stage 3-5 — photo categories, printing service, reviews, editorial cards ── */
:root{ --img-hero:url("/assets/img-f2931c0a0e2d.jpg"); --img-p2s:url("/assets/img-bd2f4eaa3db0.png"); --img-resin:url("/assets/img-97a04a95f668.jpg"); --img-sunlu:url("/assets/img-f792d9bde565.jpg"); --img-plate:url("/assets/img-ca657da33f6c.png"); }
.hero-ed .hero-photo{ width:100%; aspect-ratio:16/13; background:var(--img-hero) center/cover no-repeat; display:block; }
/* hide old promo carousel (editorial replaces it) */
.promo-section{ display:none !important; }
/* section rhythm + heads */
.section{ padding:64px 0; }
.sec-head{ margin-bottom:34px; }
.sec-eye{ font:600 12px/1.4 'Cairo',sans-serif !important; letter-spacing:.15em; color:var(--brand-ink) !important; background:none !important; }
.sec-title{ font-size:clamp(26px,3.4vw,44px) !important; font-weight:800 !important; color:var(--ink) !important; letter-spacing:-.02em; }
.sec-desc{ color:var(--ink-2) !important; font-size:16px; }
/* photo category tiles */
.ed-cats .ctiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.ctile{ position:relative; display:block; border-radius:6px; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line); background:linear-gradient(155deg,#eef2f6,#dde5ec); }
.ctile .ct-media{ position:absolute; inset:0; background-repeat:no-repeat; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.ctile:hover .ct-media{ transform:scale(1.05); }
.ctile .ct-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(9,16,24,.2) 60%,rgba(9,16,24,.66)); }
.ctile .ct-lbl{ position:absolute; inset-inline:0; bottom:0; padding:22px 24px; color:#fff; z-index:2; }
.ctile .ct-lbl h3{ font:800 23px/1.15 'Cairo',sans-serif; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.ctile .ct-lbl p{ font-size:13px; opacity:.94; margin-top:4px; font-weight:600; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4); }
@media(max-width:640px){ .ed-cats .ctiles{ grid-template-columns:1fr; } }
/* printing service */
.ed-psvc .ps{ display:grid; grid-template-columns:1fr 1.02fr; gap:56px; align-items:center; }
.ed-psvc .ps-h{ font:800 clamp(28px,4vw,48px)/1.08 'Cairo',sans-serif; color:var(--ink); margin:12px 0 0; }
.ed-psvc .ps-h em{ font-style:normal; color:var(--brand-ink); }
.ed-psvc .ps-lead{ color:var(--ink-2); font-size:17px; line-height:1.75; max-width:44ch; margin-top:16px; }
.ed-psvc .ps-steps{ margin:28px 0 28px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ed-psvc .ps-step{ background:var(--panel); padding:18px 20px; display:flex; gap:14px; align-items:flex-start; }
.ed-psvc .ps-step .n{ font-weight:800; font-size:15px; color:var(--brand); }
.ed-psvc .ps-step b{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.ed-psvc .ps-step small{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.ed-psvc .ps-plate{ position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); box-shadow:0 40px 90px -46px rgba(16,40,60,.5); }
.ed-psvc .ps-photo{ width:100%; aspect-ratio:16/12; background:var(--img-hero) center/cover no-repeat; }
.ed-psvc .ps-cap{ position:absolute; bottom:0; inset-inline-start:0; background:var(--bg); border:1px solid var(--line); border-block-end:none; border-inline-start:none; padding:10px 15px; font-size:13px; font-weight:600; color:var(--ink-2); }
.ed-psvc .ps-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.ed-psvc .ps-opt{ background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:14px 16px; }
.ed-psvc .ps-opt .ol{ display:block; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); font-weight:700; }
.ed-psvc .ps-opt .ov{ font-size:14px; color:var(--ink); font-weight:700; margin-top:5px; }
@media(max-width:900px){ .ed-psvc .ps{ grid-template-columns:1fr; gap:32px; } .ed-psvc .ps-fig{ order:-1; } }
@media(max-width:560px){ .ed-psvc .ps-steps{ grid-template-columns:1fr; } .ed-psvc .ps-opts{ grid-template-columns:1fr; } }
/* reviews */
.ed-reviews .revs{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ed-reviews .rev{ padding:32px 28px; border-inline-start:1px solid var(--line); }
.ed-reviews .rev:first-child{ border-inline-start:0; }
.ed-reviews .stars{ color:var(--brand); letter-spacing:3px; font-size:14px; margin-bottom:15px; }
.ed-reviews .rev p{ font-size:16px; line-height:1.75; color:var(--ink); font-weight:500; }
.ed-reviews .rev .who{ margin-top:18px; font-size:13.5px; color:var(--ink-2); }
.ed-reviews .rev .who b{ color:var(--ink); font-weight:700; }
@media(max-width:800px){ .ed-reviews .revs{ grid-template-columns:1fr; } .ed-reviews .rev{ border-inline-start:0; border-top:1px solid var(--line); } .ed-reviews .rev:first-child{ border-top:0; } }
/* editorial product cards */
.prod-grid{ gap:20px !important; }
.product-card{ border:1px solid var(--line) !important; border-radius:6px !important; background:var(--panel) !important; box-shadow:none !important; transition:transform .22s, box-shadow .22s, border-color .22s !important; overflow:hidden; }
.product-card:hover{ transform:translateY(-5px) !important; box-shadow:0 20px 46px -26px rgba(16,40,60,.34) !important; border-color:color-mix(in srgb,var(--brand) 30%,var(--line)) !important; }
.product-card .prod-name,.product-card .p-name,.product-card h3{ font-family:'Cairo',sans-serif !important; font-weight:700 !important; color:var(--ink) !important; }
.product-card .prod-price,.product-card .price{ font-family:'Cairo',sans-serif !important; font-weight:800 !important; color:var(--ink) !important; }
/* footer editorial */
footer{ background:#14161a !important; color:#c4c8cf !important; }
footer a{ color:#aeb4bd !important; }
footer a:hover{ color:#fff !important; }
/* header polish */
.wordmark,.fl-en,.fl-ar,.fl-tag{ color:var(--brand-ink) !important; }
/* product modal (product page) editorial */
#modalScrim .modal, .modal-card, #modalCard{ border-radius:8px !important; }


/* editorial product cards (correct selector: .card in the grids) */
.prod-grid .card, .feat-row .card{ border:1px solid var(--line) !important; border-radius:6px !important; background:var(--panel) !important; box-shadow:none !important; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s !important; }
.prod-grid .card:hover, .feat-row .card:hover{ transform:translateY(-5px) !important; box-shadow:0 20px 46px -26px rgba(16,40,60,.32) !important; border-color:color-mix(in srgb, var(--brand) 30%, var(--line)) !important; }
.prod-grid .card .card-media, .feat-row .card .card-media{ background:linear-gradient(165deg,var(--bg-soft),var(--panel)) !important; }

/* ── exact-match values section ── */
.ed-values{ background:var(--bg) !important; }
.ed-values .val{ display:grid; grid-template-columns:repeat(4,1fr); }
.ed-values .val .v{ padding:4px 26px; border-inline-start:1px solid var(--line); }
.ed-values .val .v:first-child{ border-inline-start:0; }
.ed-values .val .n{ font:700 13.5px/1 "Cairo",sans-serif; color:var(--brand-ink); letter-spacing:.02em; margin-bottom:18px; }
.ed-values .val .ic2{ color:var(--brand); margin-bottom:14px; }
.ed-values .val .ic2 svg{ width:26px; height:26px; }
.ed-values .val h3{ font:800 19px/1.2 "Cairo",sans-serif; color:var(--ink); margin-bottom:9px; }
.ed-values .val p{ color:var(--ink-2); font-size:14.5px; line-height:1.65; }
@media(max-width:900px){ .ed-values .val{ grid-template-columns:repeat(2,1fr); gap:8px 0; } .ed-values .val .v:nth-child(3){ border-inline-start:0; } }
@media(max-width:560px){ .ed-values .val{ grid-template-columns:1fr; } .ed-values .val .v{ border-inline-start:0; border-top:1px solid var(--line); padding:24px 0; } .ed-values .val .v:first-child{ border-top:0; } }

/* ── exact-match product page (modal restyle) ── */
#modalScrim .modal{ border-radius:8px !important; border:1px solid var(--line) !important; box-shadow:0 44px 100px -46px rgba(16,40,60,.5) !important; }
.modal-media{ padding:24px !important; }
.modal-media .m-img{ border:1px solid var(--line) !important; border-radius:6px; background:var(--panel); padding:26px; box-shadow:0 20px 46px -26px rgba(16,40,60,.26); min-height:340px; }
.modal-info{ padding:32px 30px !important; }
.modal-info .mi-brand{ color:var(--brand-ink) !important; letter-spacing:.14em; }
.modal-info h2{ font-family:"Cairo",sans-serif !important; font-weight:800 !important; color:var(--ink) !important; letter-spacing:-.01em; font-size:clamp(23px,2.4vw,33px) !important; margin:8px 0 12px !important; }
.mi-price .now{ color:var(--ink) !important; font-size:32px !important; font-weight:800 !important; }
.mi-price .off{ background:var(--brand) !important; box-shadow:none !important; }
.trust-mini .tm{ color:var(--ink-2) !important; background:var(--bg-soft) !important; border:1px solid var(--line); border-radius:6px; }
.mi-buy .btn-primary{ background:var(--ink) !important; }
.mi-buy .btn-primary:hover{ background:var(--brand-ink) !important; }
/* spec list -> bordered table like the prototype */
.specs{ border:1px solid var(--line) !important; border-radius:6px; padding:0 !important; margin-top:22px !important; overflow:hidden; }
.specs h4{ padding:14px 18px; margin:0 !important; background:var(--bg-soft); border-bottom:1px solid var(--line); font:800 14px/1 "Cairo",sans-serif; color:var(--ink); }
.spec-row{ padding:13px 18px !important; border-bottom:1px solid var(--line) !important; }
.spec-row:last-child{ border-bottom:0 !important; }
.spec-row .sk{ color:var(--ink-2) !important; font-weight:700 !important; }
.spec-row .sv{ color:var(--ink) !important; }

.pdp-crumb{ font-size:13px; color:var(--ink-2); margin-bottom:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pdp-crumb a{ color:var(--ink-2); } .pdp-crumb a:hover{ color:var(--brand-ink); }
.pdp-crumb .cs{ color:var(--ink-3); } .pdp-crumb b{ color:var(--ink); font-weight:700; }
/* ══════════ v20b — tight product grid + dark theme (default) ══════════ */
/* products sit flush in a hairline grid, like the prototype */
.prod-grid{ gap:1px !important; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.prod-grid .card, .feat-row .card{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:var(--panel) !important; }
/* The grid's background IS the hairline colour showing through the 1px gaps. That means any cell
   without a card exposes a big grey block (10 products in a 4-col grid = 2 empty cells on the last
   row). padProductGrid() appends inert fillers so the last row is always complete. */
.prod-grid .card-filler{ background:var(--panel); min-height:0; }
.prod-grid .card:hover, .feat-row .card:hover{ transform:none !important; box-shadow:none !important; background:var(--bg-soft) !important; border-color:transparent !important; }
@media(max-width:560px){ .prod-grid{ border-radius:6px; } }
/* restore the fully-tuned dark palette over the v20 light tokens (wins by specificity) */
:root[data-theme="dark"]{
  --bg:#0e141b; --bg-soft:#161f29; --bg-soft2:#121a22; --panel:#161f29; --bg-blue:#14212c; --card:#161f29;
  --ink:#eef2f6; --ink-2:#a7b2bf; --ink-3:#7d8794; --line:#28333f; --line-2:#1e2731;
  --brand:#2a9fd4; --brand-2:#4fb8e6; --brand-ink:#bfe4f7; --brand-soft:#10222e; --brand-glow:rgba(42,159,212,.22);
  --brand-grad:linear-gradient(135deg,#0d7bb3,#2a9fd4); --navy:#cfe1ef; --teal:#4fb8e6;
}
[data-theme="dark"] .btn-primary, [data-theme="dark"] .checkout-btn{ background:var(--brand) !important; color:#fff !important; }
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .checkout-btn:hover{ background:var(--brand-2) !important; }
[data-theme="dark"] .announce, [data-theme="dark"] .announce-bar{ background:var(--panel) !important; color:var(--ink) !important; border-bottom:1px solid var(--line); }
[data-theme="dark"] .hero-badge{ box-shadow:0 12px 30px -14px rgba(0,0,0,.7); }
/* mobile-menu theme toggle icon swap */
.mm-theme .ic-sun{ display:none; } .mm-theme .ic-moon{ display:block; }
[data-theme="dark"] .mm-theme .ic-sun{ display:block; } [data-theme="dark"] .mm-theme .ic-moon{ display:none; }
/* ══════════ v20c — bigger, premium product cards (match the prototype) ══════════ */
/* taller square photo area, product floats on a soft shadow (like the prototype) */
.prod-grid .card-media, .feat-row .card-media{ aspect-ratio:4/5 !important; background:transparent !important; border-radius:0 !important; display:grid !important; place-items:center !important; }
.prod-grid .card-media .prod-svg, .feat-row .card-media .prod-svg{ width:100% !important; height:100% !important; object-fit:contain; }
.prod-grid .card .card-media .prod-img, .feat-row .card .card-media .prod-img{ padding:20px !important; filter:drop-shadow(0 18px 24px rgba(16,40,60,.16)); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
[data-theme="dark"] .prod-grid .card .card-media .prod-img, [data-theme="dark"] .feat-row .card .card-media .prod-img{ filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)); }
.prod-grid .card:hover .card-media .prod-img, .feat-row .card:hover .card-media .prod-img{ transform:scale(1.06) translateY(-3px) !important; }
/* bigger, cleaner card text */
.prod-grid .card-body, .feat-row .card-body{ padding:4px 20px 20px !important; }
.prod-grid .card .card-brand, .feat-row .card .card-brand{ font-size:11px !important; letter-spacing:.13em !important; text-transform:uppercase !important; color:var(--ink-3) !important; font-weight:700 !important; }
.prod-grid .card .card-name, .feat-row .card .card-name{ font-size:16.5px !important; line-height:1.3 !important; font-weight:700 !important; margin-top:3px !important; }
.prod-grid .price .now, .feat-row .price .now{ font-size:21px !important; }
@media(max-width:900px){ .prod-grid .card .card-name{ font-size:15px !important; } .prod-grid .price .now{ font-size:18px !important; } }
@media(max-width:560px){ .prod-grid .card-body{ padding:2px 12px 14px !important; } .prod-grid .card .card-media .prod-img{ padding:12px !important; } }
/* ══════════ custom-print request page ══════════ */
.pp-page{ padding-top:30px; }
.pp-page .crumb{ font-size:12.5px; font-weight:600; color:var(--ink-3); margin-bottom:16px; display:flex; gap:8px; align-items:center; }
.pp-page .crumb a{ color:var(--brand-ink); }
.pp-page .crumb .crumb-sep{ color:var(--ink-3); }
.pp-head{ max-width:720px; margin-bottom:30px; }
.pp-head .sec-title{ margin-top:8px; }
.pp-head .sec-desc{ margin-top:12px; }
.pp-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:44px; align-items:start; }
.pp-aside{ display:flex; flex-direction:column; gap:24px; position:sticky; top:96px; }
.pp-steps{ display:flex; flex-direction:column; gap:18px; }
.pp-step{ display:flex; gap:14px; align-items:flex-start; }
.pp-step .n{ font-weight:800; color:var(--brand); font-size:14px; min-width:24px; padding-top:2px; }
.pp-step b{ display:block; font-size:15px; color:var(--ink); }
.pp-step small{ display:block; color:var(--ink-2); font-size:13px; margin-top:3px; line-height:1.5; }
.pp-plate{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); }
.pp-plate .ps-photo{ width:100%; aspect-ratio:16/11; background:var(--img-hero) center/cover no-repeat; }
.pp-form{ border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--panel); display:flex; flex-direction:column; gap:16px; box-shadow:0 24px 60px -40px rgba(16,40,60,.4); }
.pp-frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pp-fld{ display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:700; color:var(--ink-2); }
.pp-form .field{ width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:7px; background:var(--bg-soft2); color:var(--ink); font-size:14px; font-weight:600; font-family:inherit; transition:border-color .2s, box-shadow .2s; }
.pp-form .field:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow); }
.pp-form textarea.field{ resize:vertical; min-height:74px; line-height:1.6; }
.pp-note{ font-size:12.5px; color:var(--ink-2); font-weight:600; background:var(--bg-soft); border:1px solid var(--line-2); border-radius:8px; padding:12px 14px; line-height:1.7; }
.pp-submit{ margin-top:4px; justify-content:center; gap:9px; }
@media(max-width:820px){ .pp-grid{ grid-template-columns:1fr; gap:26px; } .pp-aside{ position:static; } .pp-frow{ grid-template-columns:1fr; } .pp-plate{ display:none; } }
/* filament colour-variant swatches on grouped cards */
.vswatches .sw{ cursor:pointer; transition:transform .15s ease; width:16px; height:16px; }
.vswatches .sw:hover{ transform:scale(1.18); }
.vswatches .sw.on{ outline:2px solid var(--brand); outline-offset:1.5px; }
/* product-page colour picker (grouped filament variants) */
.mi-colors{ margin:-4px 0 20px; }
.mi-colors .mc-label{ font-size:13.5px; font-weight:700; color:var(--ink-2); margin-bottom:9px; }
.mi-colors .mc-sw{ display:flex; gap:11px; flex-wrap:wrap; }
.mi-colors .mcs{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); cursor:pointer; transition:transform .15s ease; }
.mi-colors .mcs:hover{ transform:scale(1.12); }
.mi-colors .mcs.on{ outline:2px solid var(--brand); outline-offset:2px; }
/* round product-card status stickers (like the hero badge) */
.prod-grid .card-media, .feat-row .card-media{ position:relative; }
.pflag{ position:absolute; top:12px; inset-inline-start:12px; z-index:5; width:74px; height:74px; border-radius:50%; display:grid; place-items:center; align-content:center; text-align:center; background:var(--panel); border:1px solid var(--line); box-shadow:0 12px 28px -12px rgba(16,40,60,.5); transform:rotate(-8deg); pointer-events:none; }
.pflag b{ font-size:15px; font-weight:800; line-height:1.05; letter-spacing:-.01em; }
.pflag small{ display:block; font-size:10px; font-weight:700; opacity:.94; margin-top:1px; letter-spacing:.02em; }
.pflag.out, .pflag.sold{ background:#dc2626; border-color:#b91c1c; color:#fff; }
.pflag.soon{ background:var(--brand); border-color:var(--brand-ink); color:#fff; }
.pflag.preorder{ background:linear-gradient(135deg,#f59e0b,#d97706); border-color:#c2760a; color:#fff; }
.pflag.sale{ background:linear-gradient(135deg,#fb7185,#e11d48); border-color:#be123c; color:#fff; }
.pflag.sale b{ font-size:19px; }
[data-theme="dark"] .pflag{ box-shadow:0 12px 28px -12px rgba(0,0,0,.7); }
[data-theme="dark"] .pflag.soon, [data-theme="dark"] .pflag.out, [data-theme="dark"] .pflag.sold{ border-color:rgba(255,255,255,.14); }
@media(max-width:560px){ .pflag{ width:60px; height:60px; top:8px; inset-inline-start:8px; } .pflag b{ font-size:12.5px; } .pflag small{ font-size:9px; } .pflag.sale b{ font-size:16px; } }
/* product page (full-screen overlay) — theme-aware background so it matches dark mode */
.modal-scrim{ background:rgba(245,244,240,.97) !important; }
[data-theme="dark"] .modal-scrim{ background:rgba(14,20,27,.975) !important; }
/* ══════════ v20d — product page matched to the prototype (wider, 2-equal cols, image plate) ══════════ */
#modalScrim .modal{ width:min(1200px,100%) !important; grid-template-columns:1.02fr .98fr !important; gap:54px !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; align-items:start; }
#modalScrim .modal-media{ align-self:start; justify-content:flex-start !important; }
/* main media stacks from the top so the thumbnail strip sits clearly BELOW it (was position:sticky + center → thumbs overlapped the frame's bottom) */
#modalScrim .modal-media .m-img{ position:static !important; aspect-ratio:1/1; max-height:56vh; display:grid !important; place-items:center; padding:34px !important; border:1px solid var(--line) !important; border-radius:6px !important; background:var(--panel) !important; box-shadow:0 34px 80px -54px rgba(16,40,60,.45) !important; overflow:hidden; }
#modalScrim .m-img img.prod-img{ width:88% !important; height:auto !important; max-height:100% !important; object-fit:contain; filter:drop-shadow(0 24px 30px rgba(16,40,60,.16)); }
[data-theme="dark"] #modalScrim .m-img img.prod-img{ filter:drop-shadow(0 24px 34px rgba(0,0,0,.6)); }
/* video sits in the same top-of-frame position as the image, framed to match, and stays static (no overlap) */
#modalScrim .modal-media .m-video{ position:static !important; margin:0 0 0 0 !important; max-height:56vh; border:1px solid var(--line) !important; border-radius:6px !important; box-shadow:0 34px 80px -54px rgba(16,40,60,.45) !important; }
#modalScrim .m-thumbs{ display:flex; gap:12px; margin-top:18px !important; position:relative; z-index:1; }
#modalScrim .m-thumb{ width:76px; height:76px; border-radius:6px !important; }
#modalInfo h2{ font-size:clamp(26px,3.2vw,40px) !important; font-weight:800 !important; line-height:1.14 !important; margin:8px 0 12px !important; }
#modalScrim .mi-price .now{ font-size:clamp(28px,3vw,34px) !important; }
#modalInfo .mi-desc{ font-size:15.5px !important; line-height:1.75 !important; max-width:48ch; }
#modalScrim .specs{ margin-top:8px; }
@media(max-width:860px){ #modalScrim .modal{ grid-template-columns:1fr !important; gap:26px !important; width:100% !important; } #modalScrim .modal-media .m-img{ padding:22px !important; } }
/* ═══════════════════════ v21 — MONOCHROME (flightory-inspired: black / white / grey, no colour) ═══════════════════════ */
:root{
  --bg:#ffffff; --bg-soft:#f6f6f6; --bg-soft2:#fafafa; --panel:#ffffff; --bg-blue:#f3f3f3; --card:#ffffff;
  --ink:#111111; --ink-2:#5c5c5c; --ink-3:#6f6f6f; --line:#e6e6e6; --line-2:#f0f0f0;
  --brand:#111111; --brand-2:#333333; --brand-ink:#000000; --brand-soft:#f0f0f0; --brand-glow:rgba(0,0,0,.08);
  --brand-grad:#111111; --navy:#111111; --teal:#111111; --teal-light:#333333; --blue:#111111; --nav-bg:rgba(255,255,255,.86);
  --ok:#111111; --warn:#111111; --danger:#111111; --ok-soft:#f0f0f0; --warn-soft:#f0f0f0; --danger-soft:#f0f0f0;
  --ring:0 0 0 3px rgba(0,0,0,.10);
  --r-2xl:8px; --r-xl:5px; --r-lg:4px; --r-md:3px; --r:3px; --r-xs:2px;
}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --bg-soft:#161616; --bg-soft2:#111111; --panel:#161616; --bg-blue:#161616; --card:#161616;
  --ink:#f4f4f4; --ink-2:#adadad; --ink-3:#8a8a8a; --line:#2a2a2a; --line-2:#1d1d1d;
  --brand:#f4f4f4; --brand-2:#d0d0d0; --brand-ink:#ffffff; --brand-soft:#1c1c1c; --brand-glow:rgba(255,255,255,.10);
  --brand-grad:#f4f4f4; --navy:#f4f4f4; --teal:#e2e2e2; --teal-light:#d0d0d0; --blue:#f4f4f4; --nav-bg:rgba(10,10,10,.86);
  --ok:#f4f4f4; --warn:#f4f4f4; --danger:#f4f4f4; --ok-soft:#1c1c1c; --warn-soft:#1c1c1c; --danger-soft:#1c1c1c;
}
/* buttons: solid black on light, solid white on dark — flat, square-ish */
.btn-primary,.checkout-btn,.add-btn,.btn.btn-primary,#psQuoteBtn,.pp-submit,.a-btn.primary{ background:var(--ink) !important; color:var(--bg) !important; border:1px solid var(--ink) !important; box-shadow:none !important; }
.btn-primary:hover,.checkout-btn:hover,.add-btn:hover,#psQuoteBtn:hover,.pp-submit:hover,.a-btn.primary:hover{ background:#000 !important; border-color:#000 !important; color:#fff !important; }
[data-theme="dark"] .btn-primary,[data-theme="dark"] .checkout-btn,[data-theme="dark"] .add-btn,[data-theme="dark"] #psQuoteBtn,[data-theme="dark"] .pp-submit,[data-theme="dark"] .a-btn.primary{ background:#f4f4f4 !important; color:#0a0a0a !important; border-color:#f4f4f4 !important; }
[data-theme="dark"] .btn-primary:hover,[data-theme="dark"] .checkout-btn:hover,[data-theme="dark"] .add-btn:hover,[data-theme="dark"] #psQuoteBtn:hover,[data-theme="dark"] .pp-submit:hover{ background:#fff !important; color:#000 !important; }
.btn-ghost,.btn-secondary{ background:transparent !important; color:var(--ink) !important; border:1px solid var(--ink) !important; }
.btn-ghost:hover,.btn-secondary:hover{ background:var(--ink) !important; color:var(--bg) !important; }
/* announcement bar → flat ink */
.announce,.announce-bar{ background:var(--ink) !important; color:var(--bg) !important; background-image:none !important; }
/* status stickers → monochrome (out=solid ink, soon=outline, sale=solid ink) */
/* Status flags stay COLOURFUL (the exception to the monochrome look) — red=out, blue=soon, amber=preorder, pink=sale */
.pflag.out,.pflag.sold{ background:#dc2626 !important; border-color:#b91c1c !important; color:#fff !important; }
.pflag.soon{ background:#2563eb !important; border:1px solid #1d4ed8 !important; color:#fff !important; }
.pflag.preorder{ background:linear-gradient(135deg,#f59e0b,#d97706) !important; border-color:#c2760a !important; color:#fff !important; }
.pflag.sale{ background:linear-gradient(135deg,#fb7185,#e11d48) !important; border-color:#be123c !important; color:#fff !important; }
/* Sign-in / account — kill the blue avatars (monochrome) + enhance the sign-in card */
.auth-head .a-logo,.login-card .a-logo,.acct-greet .av,.a-mini-btn,.tkt-new-btn{ background:var(--ink) !important; color:#fff !important; box-shadow:0 8px 22px -10px rgba(0,0,0,.5) !important; }
.auth-head .a-logo{ width:62px !important; height:62px !important; border-radius:18px !important; }
.auth-head .a-logo svg{ width:30px; height:30px; }
.auth-submit{ background:var(--ink) !important; color:var(--bg) !important; }
.auth-card{ padding:36px 30px 30px !important; border-radius:20px !important; }
.auth-head{ margin-bottom:24px !important; }
.auth-head h3{ font-size:23px !important; letter-spacing:-.02em; }
.auth-head p{ font-size:14px !important; margin-top:6px !important; }
.soc-wrap{ display:grid !important; gap:11px !important; }
.soc-btn{ height:54px !important; border:1.5px solid var(--line) !important; border-radius:13px !important; font-weight:800 !important; font-size:14.5px !important; transition:transform .15s,background .15s,border-color .15s !important; }
.soc-btn:hover{ background:var(--bg-soft) !important; border-color:var(--ink-3) !important; transform:translateY(-1px); }
/* ===== Native app (Capacitor) — only when running inside the installed app (html.is-native) ===== */
html.is-native, html.is-native body{ overscroll-behavior:none; }
html.is-native body{ -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; padding-top:env(safe-area-inset-top); }
html.is-native input, html.is-native textarea, html.is-native select, html.is-native [contenteditable="true"]{ -webkit-user-select:text; user-select:text; }
html.is-native a, html.is-native button{ -webkit-touch-callout:none; }
/* Edge-to-edge (Android 15+ forces it): fill the camera-notch strip with brand black and keep the sticky bars BELOW it */
html.is-native::before{ content:''; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); background:#111; z-index:100; pointer-events:none; }
html.is-native .nav{ top:env(safe-area-inset-top); }
html.is-native .prod-topbar{ padding-top:env(safe-area-inset-top); }
html.is-native .drawer{ padding-top:env(safe-area-inset-top); }
html.is-native .wa-float{ bottom:calc(80px + env(safe-area-inset-bottom)); }
/* Sign-in is social-only (Google/Facebook) on web AND in the app — keep the buttons visible everywhere */
.auth-social-note{ margin-top:16px; font-size:12px; line-height:1.55; color:var(--ink-3); text-align:center; }
/* Center the + (and label) inside every product add-to-cart button */
.add-btn{ justify-content:center; }
/* ── Admin → Payment methods: why a method is / isn't shown to customers, + inline gateway credentials ── */
.pay-why{ display:flex; gap:7px; align-items:flex-start; margin-top:12px; padding:9px 11px; border:1.5px solid #fcd68a; background:#fff8ea; border-radius:6px; font-size:11.5px; font-weight:700; line-height:1.6; color:#8a5a00; }
.pay-why b{ color:#7a4f00; }
.pay-ok{ margin-top:12px; padding:9px 11px; border:1.5px solid #a7e3c4; background:#f1fbf6; border-radius:6px; font-size:11.5px; font-weight:800; line-height:1.6; color:#0d7a45; }
[data-theme="dark"] .pay-why{ background:#241c0c; border-color:#5c4410; color:#e8c579; }
[data-theme="dark"] .pay-ok{ background:#0e2418; border-color:#1c5738; color:#6fd7a2; }
/* ── Admin → Settings: use the whole screen ──
   Every settings card was pinned to max-width:680px and stacked in one column, so on a wide screen
   the form sat in a narrow strip with most of the page empty. Flow them into a responsive grid
   instead: the cards fill the free space but each stays a readable width. */
#ap-settings{ display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:18px; align-items:start; }
#ap-settings > .a-card{ max-width:none !important; margin-bottom:0; }
#ap-settings > div{ max-width:none !important; }
/* the long content editor and the save/reset row read better spanning the full width */
#ap-settings > .a-card.a-card-wide, #ap-settings > div:last-child{ grid-column:1/-1; }
@media(max-width:900px){ #ap-settings{ grid-template-columns:1fr; } }
/* ── "Coming soon" section: tile badge + the panel that replaces the product grid ── */
.ctile.is-soon .ct-media{ filter:grayscale(.75) brightness(.82); }
.ct-soon{ position:absolute; inset-block-start:14px; inset-inline-start:14px; z-index:3; background:#f59e0b; color:#fff; font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:4px; letter-spacing:.2px; box-shadow:0 4px 14px -4px rgba(245,158,11,.6); }
.cat-soon{ text-align:center; padding:56px 24px; border:1.5px dashed var(--line); border-radius:10px; background:var(--bg-soft); margin:8px 0 28px; }
.cat-soon .cs-ic{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:#fef3c7; color:#d97706; }
.cat-soon h3{ font-size:clamp(20px,2.4vw,26px); font-weight:800; margin:0 0 8px; color:var(--ink); }
.cat-soon p{ font-size:14.5px; font-weight:600; color:var(--ink-2); line-height:1.75; max-width:52ch; margin:0 auto; }
.cat-soon .cs-acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.cat-soon .cs-wa{ display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 18px; border-radius:6px; background:#25D366; color:#fff; font-weight:800; font-size:14px; text-decoration:none; }
[data-theme="dark"] .cat-soon .cs-ic{ background:#241c0c; color:#e8c579; }
/* ── live stock notes on a cart line ── */
.ci-stock{ margin-top:5px; font-size:11px; font-weight:800; line-height:1.5; }
.ci-stock.last{ color:#b45309; }
.ci-stock.bad{ color:#c0392b; }
[data-theme="dark"] .ci-stock.last{ color:#e8c579; }
[data-theme="dark"] .ci-stock.bad{ color:#f19a92; }
/* ── "Pay now" panel for a card order still awaiting payment (account + confirmation screen) ── */
.pay-due{ margin-top:12px; padding:13px 14px; border:1.5px solid #fcd68a; background:linear-gradient(180deg,#fffdf6,#fff8ea); border-radius:8px; }
.pay-due-h{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:#b45309; }
.pay-due-d{ margin-top:5px; font-size:12px; font-weight:600; line-height:1.6; color:#8a5a00; }
.pay-due-left{ margin-top:7px; font-size:11.5px; font-weight:800; color:#b45309; }
.pay-now-btn{ margin-top:11px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; border:none; border-radius:6px; cursor:pointer; font-weight:800; font-size:14px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.pay-now-btn:hover{ filter:brightness(1.05); }
[data-theme="dark"] .pay-due{ background:#241c0c; border-color:#5c4410; }
[data-theme="dark"] .pay-due-h,[data-theme="dark"] .pay-due-left{ color:#e8c579; }
[data-theme="dark"] .pay-due-d{ color:#c8ae72; }
/* click the payment mark itself to upload a custom logo */
.pay-logo-up{ position:relative; flex:0 0 auto; cursor:pointer; border-radius:var(--r); border:1.5px dashed var(--line); padding:2px; transition:.18s; }
.pay-logo-up:hover{ border-color:var(--ink-3); background:var(--bg-soft); }
.pay-logo-up .plu-badge{ position:absolute; inset-block-end:-5px; inset-inline-end:-5px; width:16px; height:16px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; pointer-events:none; }
.mm-creds{ margin-top:14px; padding:14px; border:1.5px dashed var(--line); border-radius:8px; background:var(--bg-soft); }
.mm-creds-h{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--ink-2); margin-bottom:12px; }
/* ── Pre-order / deposit UI (colourful accent, an intentional exception to the monochrome look) ── */
.pre-eta{ display:flex; align-items:center; gap:6px; margin:6px 0 2px; font-size:11.5px; font-weight:700; color:#b45309; }
.pre-eta svg{ flex:none; color:#d97706; }
.reserve-btn{ background:linear-gradient(135deg,#f59e0b,#d97706) !important; color:#fff !important; border:none !important; }
.reserve-btn:hover{ filter:brightness(1.05); }
.pre-box{ margin:14px 0; border:1.5px solid #fcd68a; background:linear-gradient(180deg,#fffdf6,#fff8ea); border-radius:8px; padding:14px 15px; }
.pre-box .pbx-h{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:#b45309; margin-bottom:8px; }
.pre-box .pbx-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; color:var(--ink-2); padding:3px 0; }
.pre-box .pbx-row b{ color:var(--ink); font-weight:800; }
.pre-box .pbx-eta{ margin-top:6px; font-size:12.5px; font-weight:700; color:#b45309; }
.pre-actions{ display:flex; gap:9px; margin-top:12px; flex-wrap:wrap; }
.pre-actions .btn-reserve{ flex:1 1 auto; min-width:150px; justify-content:center; display:inline-flex; align-items:center; gap:8px; height:46px; border-radius:6px; font-weight:800; font-size:14px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:none; cursor:pointer; }
.pre-actions .btn-wa2{ flex:0 0 auto; justify-content:center; display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 16px; border-radius:6px; font-weight:800; font-size:13.5px; background:#25D366; color:#fff; border:none; cursor:pointer; text-decoration:none; }
.cart-item.ci-pre{ position:relative; }
.ci-pre-tag{ display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:10.5px; font-weight:800; color:#b45309; background:#fef3c7; border-radius:3px; padding:2px 7px; }
.cart-pre-note{ display:flex; gap:9px; align-items:flex-start; margin:12px 0; padding:11px 13px; border:1.5px solid #fcd68a; background:#fff8ea; border-radius:6px; font-size:12.5px; line-height:1.55; font-weight:600; color:#8a5a00; }
.cart-pre-note svg{ flex:none; color:#d97706; margin-top:1px; }
/* product/marketing badges → monochrome */
.badge:not(.low){ background:var(--ink) !important; color:var(--bg) !important; background-image:none !important; }
.badge.low{ background:var(--panel) !important; color:var(--ink) !important; border:1px solid var(--ink) !important; }
/* stars, price-on-sale, misc accents → ink (no colour) */
.stars{ color:var(--ink-2) !important; }
.price.on-sale .now,.mi-price .now,.price .now,.pp-price{ color:var(--ink) !important; }
.hero-title .hl,.hl,.sec-eye,.ct-lbl .go,.mi-brand,.card-brand,.hero-eyebrow,.brand-ink{ color:var(--ink) !important; -webkit-text-fill-color:currentColor !important; }
.sec-eye,.hero-eyebrow{ color:var(--ink-2) !important; }
.hero-eyebrow .dot{ background:var(--ink) !important; box-shadow:none !important; }
/* focus rings → subtle grey */
*:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }
.field:focus,.a-input:focus,.pp-form .field:focus{ border-color:var(--ink) !important; box-shadow:0 0 0 3px var(--brand-glow) !important; }
/* kill leftover blue gradients / links */
a{ color:inherit; } .nav-links a:hover,.mm-link:hover .mm-tx{ color:var(--ink) !important; }
/* ═══════════ v21b — MONOCHROME leak patches (append inside <style>, after the v21 layer) ═══════════ */

/* 0. ROOT CAUSE — remap the palette vars v21 left coloured (fixes every var(--ok/--warn/--danger/--teal-light) leak at once). Also darkens --ink-3 for AA contrast. */
:root{
  --teal-light:#111111;--blue:#111111;
  --ok:#111111;--warn:#111111;--danger:#111111;
  --ok-soft:#f0f0f0;--warn-soft:#f0f0f0;--danger-soft:#f0f0f0;
  --ink-3:#6f6f6f;
}
:root[data-theme="dark"]{
  --teal-light:#e2e2e2;--blue:#f4f4f4;
  --ok:#f4f4f4;--warn:#f4f4f4;--danger:#f4f4f4;
  --ok-soft:#1c1c1c;--warn-soft:#1c1c1c;--danger-soft:#1c1c1c;
  --ink-3:#8a8a8a;
}

/* 1. announcement bar bold + brand logo/wordmark */
.announce b,.announce-bar b{ color:var(--bg)!important; }
.bico{ fill:var(--ink)!important; }
.wordmark,.fl-en,.fl-tag,.fl-ar{ color:var(--ink)!important; }
/* Footer sits on a near-black panel (#14161a) — the monochrome layer above turns the marks/wordmarks --ink (black),
   which is invisible there. Force every footer brand mark + logo wordmark light so the logo actually reads. */
footer .bico, footer .fbico{ fill:#eef1f5 !important; }
footer .wordmark, footer .fl-en, footer .fl-ar, footer .fl-tag{ color:#eef1f5 !important; -webkit-text-fill-color:#eef1f5 !important; }
/* ALL footer text must read on the dark panel (both themes). The monochrome layer left these --ink (black-on-black):
   column headings (ratio 1.04), the about paragraph + address (2.71), copyright + admin link (3.6). */
footer .foot-col h4{ color:#eef1f5 !important; }
footer .foot-brand p, footer .fl, footer .fl span, footer .foot-col p, footer .foot-hours{ color:#c4c9d2 !important; }
footer .foot-bottom p, footer .foot-copy, footer .foot-bottom span{ color:#aab0ba !important; }
footer .admin-link{ color:#8c93a0 !important; }
footer .admin-link:hover{ color:#c4c9d2 !important; }
footer .fl svg{ color:#8c93a0 !important; }

/* 2. notification / wishlist count badges */
.notif-dot,.tab-badge,.mob-bar-badge,.wish-count{ background:var(--ink)!important; color:var(--bg)!important; box-shadow:none!important; }

/* 3. magazine flag band + status line + wishlist heart */
.flag-band,.flag-band.flag-sale,.flag-band.flag-best,.flag-band.flag-hot,[data-theme=dark] .flag-band.flag-best{ background:var(--ink)!important; color:var(--bg)!important; }
.stat-line.sl-sale,.stat-line.sl-low,.stat-line.sl-best{ color:var(--ink)!important; }
[data-theme=dark] .stat-line.sl-best{ color:var(--ink-2)!important; }
.wish.on{ color:var(--ink)!important; }
[data-theme=dark] .badge.low{ color:var(--ink)!important; border-color:var(--ink)!important; background:var(--panel)!important; }

/* 4. rating stars */
.rev-item .ri-stars,.star-pick span.on{ color:var(--ink)!important; }

/* 5. delivery dark card + city pin + CTA glow */
.deliv-card{ background:#111!important; }
.deliv-card .glow{ background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)!important; }
.deliv-card p{ color:#c9c9c9!important; }
.deliv-feats .df .dic{ background:rgba(255,255,255,.12)!important; color:#fff!important; }
.deliv-feats .df small{ color:#9a9a9a!important; }
.city .pin{ background:var(--brand-soft)!important; }
.cta-inner::before{ background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)!important; }

/* 6. testimonials avatar (overrides JS inline colour) */
.testi .av{ background:var(--ink)!important; color:var(--bg)!important; }

/* 7. category page header */
.cat-page-header{ background:var(--ink)!important; }
.cat-page-header::before{ display:none!important; }
.cat-page-title{ background:none!important; -webkit-text-fill-color:var(--bg)!important; color:var(--bg)!important; }

/* 8. WhatsApp buttons — keep the WhatsApp brand green (the one colour exception to the monochrome look) */
.mi-wa,.wa-float{ background:#25D366!important; color:#fff!important; box-shadow:0 10px 26px rgba(37,211,102,.34)!important; }
.mi-wa:hover,.wa-float:hover{ background:#1EBE5A!important; }

/* 9. cart COD/coupon/trust + customer order timeline/return/logout */
.cod-note,.coupon-applied,.coupon-applied button,.trust-mini .tm{ color:var(--ink)!important; }
.ao-tl-step.cancelled .ao-tl-dot{ box-shadow:none!important; }
.ao-return{ color:var(--ink)!important; background:var(--bg-soft)!important; }
.ao-return-form{ background:var(--bg-soft)!important; }

/* 10. toast error icon */
.toast.err .tic{ background:rgba(255,255,255,.2)!important; }

/* ── ADMIN ── */
/* 11. bar chart + order-distribution ramp + revenue box */
.bar{ background:var(--ink)!important; box-shadow:none!important; }
.od-bar.pending{ background:#c9c9c9!important; }
.od-bar.confirmed{ background:#9a9a9a!important; }
.od-bar.shipped{ background:#6d6d6d!important; }
.od-bar.delivered{ background:var(--ink)!important; }
.od-bar.cancelled{ background:#e0e0e0!important; }
.rev-box{ background:var(--ink)!important; color:var(--bg)!important; }
.rev-box.light::after{ background:rgba(0,0,0,.04)!important; }

/* 12. low-stock alert */
.low-alert{ background:var(--bg-soft)!important; border-color:var(--line)!important; }
.low-alert .la-ic{ background:var(--ink)!important; color:var(--bg)!important; }
.low-alert .la-tx{ color:var(--ink-2)!important; }
.low-alert .la-tx b{ color:var(--ink)!important; }
.low-alert .la-btn{ color:var(--ink)!important; border-color:var(--line)!important; }
.low-alert .la-btn:hover{ background:var(--bg-soft2)!important; }

/* 13. stat-card accent stripes + trend chips + customer stat badges + nav badges + live dot */
.stat-card:nth-child(3)::before,.stat-card:nth-child(4)::before,.stat-card:nth-child(5)::before,.stat-card:nth-child(6)::before,.stat-card:nth-child(7)::before{ background:var(--ink)!important; }
.stat-card .st.up{ color:var(--ink)!important; background:var(--bg-soft)!important; }
.stat-card .st.down{ color:var(--ink-2)!important; background:var(--bg-soft)!important; }
.cust-stat.vip{ background:var(--ink)!important; color:var(--bg)!important; }
.cust-stat.new-c{ background:var(--bg-soft)!important; color:var(--ink)!important; }
.a-nav .nav-badge{ background:var(--ink)!important; color:var(--bg)!important; }
.a-nav .nav-badge.warn{ background:var(--ink-2)!important; }
.admin-top .at-live{ color:var(--ink)!important; }
.admin-top .at-live::before{ background:var(--ink)!important; }

/* 14. order-status pills (grey ramp) */
.pillstat.pending{ background:var(--bg-soft)!important; color:var(--ink-2)!important; }
.pillstat.confirmed{ background:#eaeaea!important; color:#444!important; }
.pillstat.shipped{ background:#e0e0e0!important; color:#333!important; }
.pillstat.on,.pillstat.delivered{ background:var(--ink)!important; color:var(--bg)!important; }
.pillstat.cancelled{ background:var(--bg-soft)!important; color:var(--ink-3)!important; }
[data-theme=dark] .pillstat.on,[data-theme=dark] .pillstat.delivered{ color:#0a0a0a!important; }

/* 15. payment-status pills (grey ramp) */
.paystat.paid{ background:var(--ink)!important; color:var(--bg)!important; }
.paystat.awaiting{ background:var(--bg-soft)!important; color:var(--ink-2)!important; }
.paystat.review{ background:#eaeaea!important; color:#444!important; }
.paystat.unpaid{ background:var(--bg-soft)!important; color:var(--ink)!important; border:1px solid var(--ink)!important; }
.paystat.refunded{ background:var(--bg-soft)!important; color:var(--ink-3)!important; }
[data-theme=dark] .paystat.paid{ color:#0a0a0a!important; }
[data-theme=dark] .paystat.unpaid{ color:var(--ink)!important; }

/* 16. danger buttons */
.a-btn.danger{ background:var(--bg-soft)!important; color:var(--ink)!important; border:1px solid var(--line)!important; }
.a-btn.danger:hover{ background:var(--ink)!important; color:var(--bg)!important; }
.iconbtn.danger:hover{ background:var(--ink)!important; color:var(--bg)!important; border-color:var(--ink)!important; }

/* ── PAYMENT PORTAL ── */
.pp-result .pp-result-ic.ok{ background:var(--ink)!important; color:var(--bg)!important; }
.pp-result .pp-result-ic.fail{ background:var(--bg-soft)!important; color:var(--ink)!important; border:1.5px solid var(--ink)!important; }
.pp-test-badge{ background:var(--bg-soft)!important; color:var(--ink-2)!important; border:1px solid var(--line)!important; }

/* 17. FLATNESS — neutralise blue-tinted shadows + sticky-nav tints */
.hero-ed .hero-plate,.hero-ed .hero-badge,.ps-plate{ box-shadow:0 20px 50px -20px rgba(0,0,0,.4)!important; }
.nav.scrolled{ border-bottom-color:var(--line)!important; box-shadow:0 4px 24px rgba(0,0,0,.06)!important; }
[data-theme=dark] .nav.scrolled{ border-bottom-color:rgba(255,255,255,.12)!important; }
/* v21b-supplement — remaining low-priority tints + safety */
.deliv-card{ color:#eaeaea!important; }
.deliv-card h2,.deliv-card h3{ color:#fff!important; }
.drawer-foot{ background:var(--bg-soft)!important; }
.pay-band{ background:var(--bg-soft)!important; }
.pay-card:hover{ border-color:var(--ink)!important; box-shadow:none!important; }
.faq-item:hover{ border-color:var(--line)!important; box-shadow:none!important; }
.ctile{ background:linear-gradient(155deg,#f0f0f0,#e2e2e2)!important; }
.a-card-h{ background:var(--bg-soft2)!important; }
.a-table th{ background:var(--bg-soft)!important; }
.oos-overlay.preorder span{ background:#6d6d6d!important; }
.oos-tag.preorder{ color:var(--ink)!important; background:var(--bg-soft)!important; }
.np-ic.ticket{ background:var(--bg-soft)!important; color:var(--ink-2)!important; }
[data-theme="dark"] .mi-wa,[data-theme="dark"] .wa-float{ background:#25D366!important; color:#fff!important; }
/* ═══ v21c — final monochrome cleanup (admin sidebar, wishlist heart, scrims, faint borders) ═══ */
.admin-side{ background:#111!important; }
.a-nav button,.a-nav button span,.a-side-foot button,.a-side-foot button span,.admin-side .a-logo-sub,.admin-side .a-logo{ color:rgba(255,255,255,.72)!important; }
.a-nav button.active,.a-nav button.active span,.a-nav button:hover,.a-nav button:hover span{ color:#fff!important; }
.a-nav button.active{ background:rgba(255,255,255,.10)!important; }
.wish,.card-media .wish{ color:var(--ink-3)!important; }
.maint-box p,.maint-box h2{ color:var(--ink-2)!important; }
.scrim,.a-modal-scrim,.fsheet-scrim,.pay-portal-overlay,#filterScrim{ background:rgba(0,0,0,.5)!important; }
.notif-panel,.login-card,.modal-close,.notif-backdrop{ border-color:var(--line)!important; }
.stat-card .si,.stat-card .si svg{ background:var(--ink)!important; color:var(--bg)!important; }
.od-dot{ background:var(--ink-2)!important; }

/* ═══════════ DARK MODE — comprehensive theme-aware layer (2026-07-16) ═══════════
   The storefront was built light-only: many surfaces hardcode #fff backgrounds and solid-ink buttons/badges
   hardcode white text, so they ignored the flipped theme vars (page went dark but those stayed white → invisible).
   This layer flips every such surface for [data-theme="dark"] only (light mode is untouched). Appended last so it
   wins the cascade. Verified via in-browser contrast scans across home/category/wishlist/cart/auth/modal/admin. */
html[data-theme="dark"]{
  --bg:#0d0f13; --bg-soft:#161a20; --bg-soft2:#1b2029; --panel:#171b21;
  --ink:#eef1f6; --ink-2:#a7b0bd; --ink-3:#79828f;
  --line:#272d37; --line-2:#1e232b;
}
html[data-theme="dark"] .feat-card, html[data-theme="dark"] .testi, html[data-theme="dark"] .city,
html[data-theme="dark"] .stat-card, html[data-theme="dark"] .acct-order,
html[data-theme="dark"] .a-card, html[data-theme="dark"] .a-modal, html[data-theme="dark"] .a-modal-h,
html[data-theme="dark"] .a-modal-f, html[data-theme="dark"] .login-card, html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .drawer, html[data-theme="dark"] .modal, html[data-theme="dark"] .mmenu,
html[data-theme="dark"] .mi-pay-section, html[data-theme="dark"] .opt, html[data-theme="dark"] .pill,
html[data-theme="dark"] .chip, html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .a-btn.ghost,
html[data-theme="dark"] .qa-btn, html[data-theme="dark"] .iconbtn, html[data-theme="dark"] .mm-link,
html[data-theme="dark"] .faq, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .faq-q,
html[data-theme="dark"] .faq-a, html[data-theme="dark"] .low-alert .la-btn, html[data-theme="dark"] .ord-bulk select,
html[data-theme="dark"] .pay-card{
  background:var(--panel) !important; border-color:var(--line) !important; color:var(--ink) !important;
}
html[data-theme="dark"] .field, html[data-theme="dark"] .a-input, html[data-theme="dark"] .news-form input,
html[data-theme="dark"] .cust-search input, html[data-theme="dark"] textarea.field, html[data-theme="dark"] select.field{
  background:var(--bg-soft2) !important; border-color:var(--line) !important; color:var(--ink) !important;
}
html[data-theme="dark"] .field::placeholder, html[data-theme="dark"] .a-input::placeholder{ color:var(--ink-3) !important; }
html[data-theme="dark"] .pill.active{ background:var(--ink) !important; color:var(--bg) !important; border-color:var(--ink) !important; }
html[data-theme="dark"] .filter-btn, html[data-theme="dark"] .filter-btn span, html[data-theme="dark"] .filter-btn svg,
html[data-theme="dark"] .off, html[data-theme="dark"] .rev-submit, html[data-theme="dark"] .rev-submit svg{ color:var(--bg) !important; }
html[data-theme="dark"] .cat-page-header{ background:var(--panel) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .cat-page-header, html[data-theme="dark"] .cat-page-title,
html[data-theme="dark"] .cat-page-desc, html[data-theme="dark"] .cat-page-header a,
html[data-theme="dark"] .cat-page-header span, html[data-theme="dark"] .cat-page-header .crumb-cur,
html[data-theme="dark"] .cat-page-header .cat-count-num, html[data-theme="dark"] .cat-page-header *{ color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; }
html[data-theme="dark"] .cat-page-header .crumb-sep, html[data-theme="dark"] .cat-page-header .crumb a{ color:var(--ink-3) !important; -webkit-text-fill-color:var(--ink-3) !important; }



/* ============ Enhancement pass (loads last → wins the cascade): smoothness + mobile + feedback ============ */
@media(max-width:640px){
  /* iOS Safari force-zooms the whole page when a focused input is <16px — pin 16px on phones (keeps 48px height) */
  .field,select.field,textarea.field,.a-input,.news-form input,.coupon-input input{font-size:16px}
  /* lighter backdrop-blur on the two fixed bars = noticeably smoother scroll on mid/low-end Android */
  .nav{backdrop-filter:saturate(150%) blur(11px);-webkit-backdrop-filter:saturate(150%) blur(11px)}
  .mob-bar{backdrop-filter:saturate(150%) blur(11px);-webkit-backdrop-filter:saturate(150%) blur(11px);background:rgba(255,255,255,.97)}
  [data-theme=dark] .mob-bar{background:rgba(16,18,22,.97)}
  /* comfortable ≥40px touch targets on the most-tapped controls */
  .nav-burger,.notif-btn,.cart-btn{width:40px;height:40px}
  .quick{width:42px;height:42px}
  .qty button{min-width:40px;min-height:40px}
  .ci-remove{min-height:40px}
  .add-btn{min-height:42px}
}
/* tactile "landed in cart" bump on the badge when the count goes up */
@keyframes ptBump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.cart-count.bump{animation:ptBump .4s cubic-bezier(.2,.8,.3,1)}
@media(prefers-reduced-motion:reduce){.cart-count.bump{animation:none}}
/* neutral elevation — the site is monochrome now, so kill the leftover blue shadow haze (light mode tokens) */
:root{--shadow-xs:0 1px 2px rgba(17,19,24,.05),0 1px 3px rgba(17,19,24,.05);--shadow-sm:0 2px 8px rgba(17,19,24,.06),0 10px 26px rgba(17,19,24,.05);--shadow:0 14px 44px rgba(17,19,24,.10);--shadow-lg:0 30px 80px rgba(17,19,24,.14)}
:root[data-theme=dark]{--shadow-xs:0 1px 2px rgba(0,0,0,.5);--shadow-sm:0 2px 10px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.34);--shadow:0 14px 44px rgba(0,0,0,.5);--shadow-lg:0 30px 80px rgba(0,0,0,.6)}
/* restore tactile feedback to product cards (a prior redesign flattened them to nothing) */
.prod-grid .card:hover,.feat-row .card:hover{transform:translateY(-3px)!important;box-shadow:inset 0 0 0 1.5px var(--brand),0 16px 30px -24px rgba(17,19,24,.42)!important;background:var(--card)!important;border-color:transparent!important;position:relative;z-index:3}
/* consistent press feedback on every tappable surface */
.quick:active,.cat-card:active,.ctile:active,.feat-card:active,.wa-float:active,.city:active,.pay-card:active{transform:scale(.97)}
/* keyboard focus ring on the image category tiles (they had none) */
.ctile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* review cards: bottom-align every author row to a shared baseline regardless of quote length */
.testi{display:flex;flex-direction:column}
.testi .who{margin-top:auto}
/* mobile sheets: dynamic viewport height so submit buttons never hide under the browser toolbar */
@media(max-width:640px){.auth-card{max-height:92dvh}.a-modal{max-height:92dvh}}
/* ---- Add-to-cart → GREEN (the orange "احجز بعربون" reserve/deposit button stays orange); modal add button too ---- */
.add-btn:not(.reserve-btn),#mAdd{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
.add-btn:not(.reserve-btn):hover,#mAdd:hover{background:#15803d!important;border-color:#15803d!important;color:#fff!important}
:root[data-theme="dark"] .add-btn:not(.reserve-btn),:root[data-theme="dark"] #mAdd{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
/* ---- Pin every card's action row (price + add/reserve button) to the BOTTOM so buttons align across the whole grid ---- */
.card-foot{margin-top:auto!important}
/* ---- Product "Share" button in the modal (copies/shares the unique /product/<slug> link) ---- */
.mi-share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;height:44px;border-radius:var(--r,8px);border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s,transform .1s}
.mi-share:hover{background:var(--bg-soft);border-color:var(--brand)}
.mi-share:active{transform:scale(.98)}
.mi-share svg{width:17px;height:17px;flex:0 0 auto}
/* ---- Custom 3D-print quote page: drag-drop upload zone + live quote panel ---- */
.pp-up{display:block}
.pp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:26px 18px;border:2px dashed var(--line);border-radius:14px;background:var(--bg-soft);color:var(--ink-2);cursor:pointer;transition:.18s;margin-top:6px}
.pp-drop:hover,.pp-drop.drag{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.pp-drop b{font-size:14px;font-weight:800;color:var(--ink)}
.pp-drop small{font-size:11.5px;color:var(--ink-3);font-weight:600}
.pp-quote{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:6px;animation:afade .3s ease}
.pp-quote.err{background:#fff4f2;border-color:#f3c4bc;color:#c62f22;font-weight:700;font-size:13px}
.pq-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13.5px;color:var(--ink-2);font-weight:600}
.pq-row b{color:var(--ink);font-weight:800}
.pq-total{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.pq-total span{display:block;font-size:12px;color:var(--ink-3);font-weight:700}
.pq-lyd{font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.pq-usd{font-size:14px;font-weight:800;color:var(--ink-3)}
.pq-dep{margin-top:10px;font-size:12.5px;font-weight:700;color:#0f7a37;background:#e8f6ee;border-radius:8px;padding:8px 12px}
.pq-need{margin-top:10px;font-size:13.5px;font-weight:800;color:#16a34a;text-align:center;padding:10px;background:#e8f6ee;border-radius:8px}
.pq-warn{margin-top:8px;font-size:12px;font-weight:700;color:#9a6100;background:#fff3d6;border-radius:8px;padding:8px 12px}
.pp-submit:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}
/* ---- Main content images (hero / category tiles / printing service) sit on clean WHITE so any
   transparent- or white-background product photo shows perfectly — object-filled, never a dark
   rectangle behind a transparent PNG. Pairs with the admin's background-removal on upload. ---- */
.hero-photo,.ct-media,.ps-photo,.pc-bg{background-color:#fff!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}


/* ============================================================================
   ADMIN DASHBOARD REDESIGN — Shopify-style light + green accent (2026-08-04)
   Scoped to .admin so the storefront is untouched. Two moves: (1) redefine the
   accent + radius vars on .admin → every existing var(--brand) usage in the admin
   re-greens automatically; (2) override the few HARDCODED navy/blue colors
   (sidebar, primary button, revenue boxes, table header, gradients) to the light
   look. This block loads last → wins the cascade. */
.admin{
  --brand:#16a34a; --brand-2:#22c55e; --brand-ink:#0f7a37; --brand-soft:#e8f6ee; --brand-glow:rgba(22,163,74,.16);
  --navy:#1f2328;
  --r:8px; --r-xs:6px; --r-md:10px; --r-lg:12px; --r-xl:16px;
  --ad-canvas:#f6f6f7; --ad-surface:#fff; --ad-line:#e4e5e7; --ad-ink:#1f2328; --ad-ink-2:#5c5f62; --ad-ink-3:#8a8d91;
  background:var(--ad-canvas)!important;
}
/* Sidebar: light + bordered (was a dark navy gradient) */
.admin .admin-side{ background:var(--ad-surface)!important; color:var(--ad-ink)!important; border-inline-end:1px solid var(--ad-line); box-shadow:none!important; padding:16px 12px }
.admin .admin-side .a-brand{ color:var(--ad-ink); padding:8px 10px 18px }
.admin .admin-side .a-brand .a-logo, .admin .login-card .a-logo{ background:linear-gradient(135deg,#16a34a,#22c55e)!important; box-shadow:0 4px 12px rgba(22,163,74,.32)!important }
.admin .a-nav button{ color:var(--ad-ink-2)!important; font-weight:600 }
.admin .a-nav button svg{ color:var(--ad-ink-3) }
.admin .a-nav button:hover{ background:#f1f1f2!important; color:var(--ad-ink)!important }
.admin .a-nav button:hover svg{ color:var(--ad-ink) }
.admin .a-nav button.active{ background:var(--brand-soft)!important; color:var(--brand-ink)!important; font-weight:800!important; box-shadow:inset 3px 0 0 var(--brand)!important }
.admin .a-nav button.active svg{ color:var(--brand-ink) }
.admin .a-side-foot{ border-top:1px solid var(--ad-line) }
.admin .a-side-foot button{ color:var(--ad-ink-2)!important }
.admin .a-side-foot button:hover{ background:#f1f1f2!important; color:var(--ad-ink)!important }
/* Top bar + body canvas (were blue-tinted gradients) */
.admin .admin-top{ background:var(--ad-surface)!important; border-bottom:1px solid var(--ad-line)!important; box-shadow:none!important }
.admin .admin-top h2{ color:var(--ad-ink)!important; font-weight:800 }
.admin .admin-body{ background:var(--ad-canvas)!important; padding:24px }
/* Primary button → green solid (was blue gradient) */
.admin .a-btn.primary{ background:#16a34a!important; border-color:#16a34a!important; color:#fff!important; box-shadow:0 1px 2px rgba(22,163,74,.25)!important }
.admin .a-btn.primary:hover{ background:#15803d!important; border-color:#15803d!important; box-shadow:0 4px 14px rgba(22,163,74,.30)!important }
.admin .a-btn.ghost{ background:#fff!important; border-color:var(--ad-line)!important; color:var(--ad-ink)!important }
.admin .a-btn.ghost:hover{ background:#f6f6f7!important }
/* Cards + tables: neutral borders, quiet shadows, grey headers */
.admin .a-card{ border:1px solid var(--ad-line)!important; box-shadow:0 1px 2px rgba(20,23,28,.05)!important }
.admin .a-card:hover{ box-shadow:0 4px 16px rgba(20,23,28,.08)!important }
.admin .a-card-h{ background:#fff!important; border-bottom:1px solid var(--ad-line)!important }
.admin .a-card-h h3{ color:var(--ad-ink)!important }
.admin .a-table th{ background:#fafafa!important; color:var(--ad-ink-3)!important; border-bottom:1px solid var(--ad-line)!important; letter-spacing:.4px }
.admin .a-table td{ color:var(--ad-ink)!important; border-bottom:1px solid var(--ad-line)!important }
.admin .a-table tr:hover td{ background:#fafafa!important }
/* Stat cards + quick actions + revenue boxes */
.admin .stat-card{ border:1px solid var(--ad-line)!important; box-shadow:0 1px 2px rgba(20,23,28,.05)!important }
.admin .stat-card:hover{ box-shadow:0 6px 20px rgba(20,23,28,.08)!important }
.admin .stat-card:nth-child(1)::before,.admin .stat-card:nth-child(2)::before{ background:#16a34a }
.admin .qa-btn{ border:1px solid var(--ad-line)!important }
.admin .qa-btn:hover{ border-color:#16a34a!important; background:var(--brand-soft)!important; box-shadow:0 6px 20px rgba(22,163,74,.10)!important }
.admin .rev-box{ background:linear-gradient(135deg,#0f7a37,#16a34a 60%,#22c55e)!important }
.admin .rev-box.light{ background:#fff!important; border:1px solid var(--ad-line)!important }
.admin .rev-box.light .rv-val{ color:#16a34a!important }
/* Inputs, icon buttons, image drop: green focus/hover (were hardcoded blue) */
.admin .a-input:focus{ border-color:#16a34a!important; box-shadow:0 0 0 3px rgba(22,163,74,.15)!important }
.admin .cust-search input:focus{ border-color:#16a34a!important; box-shadow:0 0 0 3px rgba(22,163,74,.15)!important }
.admin .iconbtn:hover{ border-color:rgba(22,163,74,.3)!important }
.admin .img-drop:hover{ border-color:#16a34a!important; color:#16a34a!important; background:var(--brand-soft)!important }
/* Login card + modals: soft, neutral shadow */
.admin .login-card{ box-shadow:0 20px 60px rgba(20,23,28,.12)!important; border:1px solid var(--ad-line)!important }
/* Undo the storefront's monochrome (var(--ink)=#111) layer where it bleeds into the admin and
   blackens meaningful accents — restore each to its semantic colour in the green scheme. */
.admin .stat-card .si{ background:var(--brand-soft)!important; color:var(--brand-ink)!important }
.admin .stat-card .si svg{ background:transparent!important; color:var(--brand-ink)!important }
.admin .stat-card:nth-child(3)::before{ background:#16a34a!important }
.admin .stat-card:nth-child(4)::before{ background:#e0a000!important }
.admin .stat-card:nth-child(5)::before{ background:#6b4cff!important }
.admin .stat-card:nth-child(6)::before{ background:#e0a000!important }
.admin .stat-card:nth-child(7)::before{ background:#e0556e!important }
.admin .od-bar.delivered{ background:#16a34a!important }
.admin .bar{ background:#16a34a!important }
.admin .low-alert .la-ic{ background:#e0a000!important; color:#fff!important }
.admin .cust-stat.vip{ background:linear-gradient(135deg,#ffd700,#ffb700)!important; color:#6e4900!important }
.admin .a-nav .nav-badge{ background:#e5484d!important; color:#fff!important }
.admin .admin-top .at-live::before{ background:#16a34a!important }
/* success states → green (monochrome layer greyed --ok-soft and blackened --ink, so use explicit hex) */
.admin .pillstat.on,.admin .pillstat.delivered{ background:#e7f6ec!important; color:#11774a!important }
.admin .paystat.paid{ background:#e7f6ec!important; color:#0a7a3d!important }
/* danger states → red (monochrome layer greyed --danger-soft and blackened --danger) */
.admin .a-btn.danger,.admin .pillstat.cancelled,.admin .paystat.unpaid{ background:#fbeae8!important; color:#c62f22!important }
.admin .a-btn.danger:hover{ background:#f6d4cf!important; color:#c62f22!important }
.admin .iconbtn.danger:hover{ background:#fbeae8!important; color:#c62f22!important; border-color:#f3c4bc!important }
/* pending/awaiting → amber (warn tokens were greyed by the monochrome layer) so new orders stand out */
.admin .pillstat.pending,.admin .paystat.awaiting{ background:#fff3d6!important; color:#9a6100!important }
.admin .st.up{ background:#e7f6ec!important }
/* ---- Sidebar label color fix: the <span> labels inside the nav & footer buttons were left WHITE
   by the old dark-sidebar patch (invisible on the new light sidebar). Force them dark (green when
   active). Targets the spans explicitly with higher specificity + later source so it wins. ---- */
.admin .a-nav button span{ color:var(--ad-ink-2)!important }
.admin .a-nav button:hover span{ color:var(--ad-ink)!important }
.admin .a-nav button.active span{ color:var(--brand-ink)!important }
.admin .a-side-foot button span{ color:var(--ad-ink-2)!important }
.admin .a-side-foot button:hover span{ color:var(--ad-ink)!important }
.admin .admin-side .a-brand span{ color:var(--ad-ink)!important }
.admin .admin-side .a-logo-sub{ color:var(--ad-ink-3)!important }
/* ============================================================================
   ADMIN POLISH v2 — Polaris-grade refinement (2026-08-04): semantic metric
   icons, calmer tables, pill badges, consistent buttons. CSS-only, loads last. */
/* Sidebar: tighter nav rhythm */
.admin .a-nav{ gap:2px }
.admin .a-nav button{ padding:9px 12px!important; border-radius:8px }
/* Top bar: crisp title */
.admin .admin-top{ height:64px }
.admin .admin-top h2{ font-size:19px!important; letter-spacing:-.01em }
/* Cards + section headers */
.admin .a-card{ border-radius:12px!important; margin-bottom:18px }
.admin .a-card-h{ padding:16px 20px!important }
.admin .a-card-h h3{ font-size:15px!important; letter-spacing:-.01em }
/* Tables: comfortable rows, quiet uppercase header, clean hover */
.admin .a-table th{ padding:11px 20px!important; font-size:11px!important; font-weight:700!important; text-transform:uppercase; letter-spacing:.4px }
.admin .a-table td{ padding:13px 20px!important; font-size:13.5px }
.admin .a-table tr:hover td{ background:#fafafa!important }
.admin .a-thumb{ border-radius:8px!important; border:1px solid var(--ad-line)!important }
/* Status pills → Polaris pill shape */
.admin .pillstat,.admin .paystat{ border-radius:999px!important; padding:3px 11px!important; font-size:11px!important; font-weight:700!important }
/* Buttons → consistent Polaris heights/weight */
.admin .a-btn{ height:40px; border-radius:8px!important; font-weight:700!important; font-size:13.5px }
.admin .a-btn.sm{ height:32px }
.admin .a-input{ border-radius:8px!important }
/* Stat cards: refined + SEMANTIC tinted icons (restore the colour-coding the mono layer flattened) */
.admin .stat-grid{ gap:16px }
.admin .stat-card{ border-radius:12px!important; padding:20px!important }
.admin .stat-card .sv{ font-size:28px!important; letter-spacing:-.02em }
.admin .stat-card .sl{ font-size:12.5px!important; color:var(--ad-ink-2)!important }
.admin .stat-card .si svg{ color:inherit!important }
.admin .stat-card:nth-child(1) .si{ background:#e8f6ee!important; color:#0f7a37!important }
.admin .stat-card:nth-child(2) .si{ background:#e8effd!important; color:#2563eb!important }
.admin .stat-card:nth-child(3) .si{ background:#e7f6ec!important; color:#0a7a3d!important }
.admin .stat-card:nth-child(4) .si{ background:#fdf0d5!important; color:#b45309!important }
.admin .stat-card:nth-child(5) .si{ background:#eceafe!important; color:#6d4cff!important }
.admin .stat-card:nth-child(6) .si{ background:#fdf1de!important; color:#b7791f!important }
.admin .stat-card:nth-child(7) .si{ background:#fde7ec!important; color:#e11d48!important }
.admin .stat-card:nth-child(2)::before{ background:#2563eb!important }
.admin .stat-card:nth-child(4)::before{ background:#b45309!important }
.admin .stat-card:nth-child(5)::before{ background:#6d4cff!important }
.admin .stat-card:nth-child(6)::before{ background:#b7791f!important }
.admin .stat-card:nth-child(7)::before{ background:#e11d48!important }
/* Quick-action tiles: green icon chip */
.admin .qa-btn{ border-radius:12px!important }
.admin .qa-ic{ background:#e8f6ee!important; color:#0f7a37!important }
.admin .qa-btn:hover .qa-ic{ background:#16a34a!important; color:#fff!important }
.admin .rev-box.light .rv-label{ color:var(--ad-ink-3)!important }


/* ══════════════════════════════════════════════════════════════════════════════════════════
   CAD-PRECISION LAYER — Fusion 360's engineering language, kept on a light retail surface.
   Loads last. Storefront only (never `.admin`, which has its own Polaris-style pass).
   Principles borrowed from Fusion: hairline structure instead of soft shadows, tabular/mono
   readouts for anything numeric, uppercase micro-labels, viewport corner ticks, a faint
   construction grid, and tight optical alignment.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --pt-mono: ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --pt-hair:#e2e6ea;        /* structural hairline */
  --pt-hair-2:#eff2f5;      /* construction line   */
  --pt-tick:#b9c2cb;        /* viewport tick       */
}
/* ── 1. Technical numerals: every number reads like an instrument, not prose ───────────────── */
body:not(.admin) .price,.price,.now,.old,.price-sub,.hero-stats,.stat,.stat1,.stat2,.cat-count-num,
.pq-row,.pq-total,.pq-usd,.pq-dep,.sum-row,.ci-price,.specs,.spec-row,.card-foot,.qty{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
.pq-row b,.pq-usd,.pq-dep b,.hero-stats .v,.spec-row span:last-child,.crumb,.card-brand,
#pf_drophint,.sc-by,.ci-price,.price .now{ font-family:var(--pt-mono); letter-spacing:-.015em; }
.price .now{ font-weight:700 }
/* ── 2. Hairline structure: precision edges replace blurred elevation ──────────────────────── */
.card,.ctile,.sc-item,.sc-submit{ border-radius:6px !important; }
.card{ border:1px solid var(--pt-hair) !important; box-shadow:none !important; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card:hover{ border-color:#aab4bf !important; box-shadow:0 10px 26px -18px rgba(15,23,32,.45) !important; }
.field,.a-input,.chip,.add-btn,.btn,.btn-primary,.checkout-btn{ border-radius:5px !important; }
.field{ border:1px solid var(--pt-hair) !important; }
.field:focus{ border-color:var(--ink,#111) !important; outline:none; box-shadow:0 0 0 3px rgba(17,17,17,.06) !important; }
/* ── 3. Viewport corner ticks on product media (Fusion's canvas framing) ───────────────────── */
.card-media{ position:relative; }
.card-media::before,.card-media::after{
  content:""; position:absolute; width:11px; height:11px; pointer-events:none;
  border:1px solid var(--pt-tick); opacity:.5; transition:opacity .18s ease, border-color .18s ease; z-index:2;
}
.card-media::before{ top:9px; inset-inline-start:9px; border-inline-end:0; border-bottom:0; }
.card-media::after{ bottom:9px; inset-inline-end:9px; border-inline-start:0; border-top:0; }
.card:hover .card-media::before,.card:hover .card-media::after{ opacity:1; border-color:var(--brand,#16a34a); }
/* ── 4. Section headers as drawing callouts ────────────────────────────────────────────────── */
.sec-eye{ letter-spacing:.18em !important; font-size:11px !important; }
.sec-eye::before{ width:22px !important; height:1px !important; border-radius:0 !important; opacity:.85; }
.sec-title{ letter-spacing:-.025em; }
.sec-head{ border-bottom:1px solid var(--pt-hair-2); padding-bottom:16px; }
/* ── 4b. Nav: never let a two-word link wrap (e.g. "معرض الأعمال") ─────────────────────────── */
.nav-links a{ white-space:nowrap; padding-inline:12px !important; }
/* ── 5. Breadcrumb as a path readout ───────────────────────────────────────────────────────── */
.crumb{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; }
.crumb-sep{ opacity:.5; margin:0 7px; }
/* ── 6. Spec sheets read like a datasheet ──────────────────────────────────────────────────── */
.spec-row{ border-bottom:1px solid var(--pt-hair-2) !important; }
.spec-row span:last-child{ font-weight:700; }
/* ── 7. Construction grid — the whole site sits on one drawing sheet ────────────────────────
   A single grid on <body> (not per-section) so every page shares the SAME lattice: no seams and
   no moiré where sections meet. Opaque sections (hero plate, featured band, support) punch through
   it like panels laid on a drawing — which is exactly the CAD look. ── */
body{
  background-image:linear-gradient(rgba(15,23,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,32,.05) 1px,transparent 1px);
  background-size:34px 34px; background-position:center top; background-repeat:repeat;
}
/* the print + showcase workspaces read a touch stronger, still on the same 34px lattice */
#printPage,#showcasePage{
  background-image:linear-gradient(rgba(15,23,32,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,32,.035) 1px,transparent 1px);
  background-size:34px 34px; background-position:center top;
}
#printPage>*,#showcasePage>*{ position:relative; }
/* the admin dashboard keeps its own clean Polaris surface — never the blueprint grid */
body:has(#adminRoot.open){ background-image:none; }
.admin,.admin-body,.admin-main{ background-image:none !important; }
/* ── 8. The live quote panel: an instrument readout ────────────────────────────────────────── */
.pp-quote{ border:1px solid var(--pt-hair) !important; border-radius:6px !important; box-shadow:none !important; background:#fff !important; }
.pq-row{ border-bottom:1px dashed var(--pt-hair) !important; }
.pq-row span:first-child{ letter-spacing:.02em; }
.pq-total .pq-lyd{ font-family:var(--pt-mono); letter-spacing:-.03em; }
.pp-drop{ border-radius:6px !important; border-style:dashed !important; border-width:1.5px !important; }
/* ── 9. Buttons: machined, not pillowy ─────────────────────────────────────────────────────── */
.add-btn,.checkout-btn,.btn-primary{ letter-spacing:.01em; }
.add-btn:active,.checkout-btn:active{ transform:translateY(1px); }
/* ── 10. Category tiles + showcase share the same hairline vocabulary ──────────────────────── */
.ctile{ border:1px solid var(--pt-hair) !important; }
.ct-lbl{ letter-spacing:.02em; }
.sc-item{ border-color:var(--pt-hair) !important; }
@media (max-width:560px){ #printPage,#showcasePage{ background-size:26px 26px; } }


#showcasePage .wrap{max-width:1080px;margin:0 auto;padding:20px 18px 40px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:18px 0 34px}
.sc-item{margin:0;border-radius:14px;overflow:hidden;background:var(--bg-soft2,#f4f4f5);border:1px solid var(--line-2,#eee);position:relative}
.sc-item img{width:100%;height:220px;object-fit:cover;display:block}
.sc-item.feat{grid-column:span 2}
.sc-item.feat img{height:300px}
.sc-item figcaption{padding:10px 12px;font-size:13px;line-height:1.5}
.sc-cap{display:block;color:var(--ink,#111);font-weight:600}
.sc-by{display:block;color:var(--ink-3,#888);font-size:12px;margin-top:3px;font-weight:700}
.sc-empty{grid-column:1/-1;text-align:center;padding:44px;color:var(--ink-3,#888);font-weight:700;background:var(--bg-soft2,#f7f7f8);border-radius:14px}
.sc-submit{max-width:560px;margin:6px auto 0;background:var(--bg-soft2,#f7f7f8);border:1px solid var(--line-2,#eee);border-radius:16px;padding:20px}
.sc-submit h3{margin:0 0 12px;font-size:17px}
.sc-form{display:grid;gap:10px}
.sc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-drop{display:flex;align-items:center;justify-content:center;min-height:100px;border:2px dashed var(--line-2,#ccc);border-radius:12px;cursor:pointer;color:var(--ink-3,#888);font-weight:700;text-align:center;padding:10px;background:#fff}
.sc-note{font-size:12px;color:var(--ink-3,#888);font-weight:600;text-align:center}
@media(max-width:560px){.sc-item.feat{grid-column:span 1}.sc-item.feat img{height:220px}.sc-row{grid-template-columns:1fr}}