: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}
/* header search — desktop only; the phone keeps its existing in-page search bar */
.nav-search{display:none}
@media (min-width:1100px){
  .nav-search{
    display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;min-width:200px;
    background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
    transition:min-width .22s cubic-bezier(.2,.7,.2,1),border-color .18s,box-shadow .18s,background .18s;
  }
  .nav-search:hover{border-color:var(--ink-3)}
  .nav-search:focus-within{
    min-width:320px;background:var(--panel);border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-glow);
  }
  .nav-search svg{flex:0 0 auto;color:var(--ink-3)}
  .nav-search:focus-within svg{color:var(--brand)}
  .nav-search input{
    border:0;background:transparent;outline:0;width:100%;min-width:0;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  }
  .nav-search input::placeholder{color:var(--ink-3);font-weight:600}
  .nav-search input::-webkit-search-cancel-button{cursor:pointer}
}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:9999;background:var(--brand);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;font-size:14px;text-decoration:none}
.skip-link:focus{inset-inline-start:0}
.foot-legal{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.foot-legal a{color:var(--ink-3);transition:.2s}
.foot-legal a:hover{color:var(--brand)}
.foot-legal span{color:var(--ink-3);opacity:.5}
.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; }
/* ── Quick filters (brand + in-stock) shown on every category tab ──────────────────────────── */
.qfilters{ display:flex; flex-direction:column; gap:8px; margin:2px 0 14px; }
.qfilters:empty{ display:none; }
.qf-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.qf-lbl{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-inline-end:2px; }
.qf-chip{ font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:5px; border:1px solid var(--pt-hair,#e2e6ea);
  background:#fff; color:var(--ink-2); cursor:pointer; transition:border-color .15s, color .15s, background .15s; white-space:nowrap; }
.qf-chip:hover{ border-color:#aab4bf; color:var(--ink); }
.qf-chip.on{ background:var(--ink,#111); border-color:var(--ink,#111); color:#fff; }
.qf-toggle{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:5px;
  border:1px solid var(--pt-hair,#e2e6ea); background:#fff; color:var(--ink-2); cursor:pointer; transition:.15s; }
.qf-toggle:hover{ border-color:#aab4bf; }
.qf-toggle .qf-dot{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--pt-tick,#b9c2cb); transition:.15s; flex:0 0 auto; }
.qf-toggle.on{ border-color:#16a34a; color:#0f7a37; background:#f2fbf5; }
.qf-toggle.on .qf-dot{ background:#16a34a; border-color:#16a34a; box-shadow:0 0 0 2px #dff3e6; }
.qf-count{ font-family:var(--pt-mono,monospace); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.qf-toggle.on .qf-count{ color:#0f7a37; }
.qf-clear{ font-size:12px; font-weight:700; color:var(--ink-3); background:none; border:0; cursor:pointer; text-decoration:underline; padding:6px 4px; }
.qf-clear:hover{ color:var(--ink); }
@media (max-width:560px){ .qf-lbl{ display:none } .qf-chip,.qf-toggle{ font-size:12px; padding:6px 11px } }
/* ── 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}}

/* ══ DESKTOP LANDSCAPE LAYER ═══════════════════════════════════════════════════════════════
   The whole stylesheet was desktop-first with max-width overrides ONLY — there was not a single
   min-width query, so a 1080p/1440p monitor got the exact same capped 1440px column as a small
   laptop and the homepage ran ~10.6 screens tall. Every rule below is min-width gated, so the
   phone/tablet layout is untouched. */

@media (min-width:1000px){
  /* THE big one: product imagery was pinned to a 4/5 PORTRAIT frame, making every card a
     341x654 tall rectangle (~1.9:1). Square is the sweet spot: a 900x900 product shot renders at
     exactly the size it did in the old portrait frame, but the card sheds ~85px of dead height.
     (4/3 was tried first and shrank every photo — the artwork had to fit the SHORT side.)
     Selector must match `.prod-grid .card-media` exactly — the rule it overrides is (0,2,0), so a
     bare `.card-media` here silently loses even with !important. */
  .prod-grid .card-media, .feat-row .card-media{ aspect-ratio:1/1 !important; }

  /* .card-media is display:grid with an AUTO row, so `height:100%` on the image is circular and
     falls back to intrinsic height — a tall photo (e.g. 600x811) then overflows the frame and gets
     clipped by overflow:hidden. Absolute positioning resolves against the definite aspect-ratio
     box instead, and object-fit:contain guarantees the WHOLE product is visible whatever its shape.
     z-index keeps the image behind the wishlist / quick-view buttons. */
  .prod-grid .card-media img, .feat-row .card-media img,
  .prod-grid .card-media .img-placeholder, .feat-row .card-media .img-placeholder{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:contain !important; padding:14px !important; z-index:0 !important;
  }
  .prod-grid .card-media .wish, .prod-grid .card-media .quick,
  .feat-row .card-media .wish, .feat-row .card-media .quick{ z-index:3 !important; }

  /* 5 category tiles were 2-up at EVERY width -> three rows of 674x421 tiles = 1608px on its own */
  .ed-cats .ctiles{ grid-template-columns:repeat(3,1fr); }

  /* the "how it works" steps were a 2x2 block; one row halves that section */
  .ed-psvc .ps-steps{ grid-template-columns:repeat(4,1fr); }

  /* tighten the vertical rhythm now that rows carry more per screen */
  .section{ padding:56px 0; }
}

/* ══ LANDSCAPE PRODUCT CARDS (desktop only) ════════════════════════════════════════════════
   Even with a square photo the card still read PORTRAIT (276x522, ratio 1.89) because the
   image sits ABOVE the details. Placing the media BESIDE them turns each card landscape
   (~415x250, ratio 0.6) and roughly halves the height of the products section.
   auto-fit replaces the old fixed 4/5/6-column rules so the track count follows the width. */
@media (min-width:1100px){
  .prod-grid{ grid-template-columns:repeat(auto-fit,minmax(380px,1fr)) !important; }
  .prod-grid .card{
    display:grid !important;
    grid-template-columns:40% 1fr;
    grid-template-rows:auto 1fr;
    align-items:stretch;
  }
  /* media spans both rows so it fills the card's full height beside the text */
  .prod-grid .card-media{ grid-column:1; grid-row:1 / span 2; aspect-ratio:auto !important; min-height:100%; }
  .prod-grid .stat-line{ grid-column:2; grid-row:1; }
  .prod-grid .card-body{ grid-column:2; grid-row:2; }

  /* EVERY CARD IDENTICAL. Card height was driven by each card's own content, so rows came out
     250 / 223 / 162px and the grid looked ragged. 1fr rows make every row (and so every card)
     the same height, and a wider minimum gives the photo more room. */
  .prod-grid{ grid-template-columns:repeat(auto-fit,minmax(440px,1fr)) !important; grid-auto-rows:1fr !important; }
  .prod-grid .card{ grid-template-columns:46% 1fr !important; min-height:280px; }
  .prod-grid .card-media{ padding:8px; }
}

/* ══ PRODUCT DETAIL: let the photo actually fill its frame ═════════════════════════════════
   ptSrcset() puts a `sizes` hint on the <img>. An <img> with a w-descriptor srcset and NO CSS
   width takes its LAYOUT width from that hint — so the product photo rendered at 387px inside a
   720x720 frame (50%). Giving it an explicit width/height makes CSS authoritative again and
   `sizes` returns to being purely a download hint. */
#modalScrim .m-img img.prod-img, .modal-media .m-img img{
  width:100% !important; height:100% !important; max-height:100% !important;
  object-fit:contain;
}


/* ══ REMAINING STACKED BLOCKS -> HORIZONTAL ════════════════════════════════════════════════
   The last two blocks that still ran as a single tall column on desktop. */
@media (min-width:1100px){
  /* 5 FAQ entries stacked one under another; two columns halves the section */
  .faq-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 26px; align-content:start; }
  /* the closing call-to-action stacked heading, text and button vertically */
  .cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:38px; flex-wrap:wrap; }
  .cta-band .wrap > *{ margin:0; }
}

/* ══ WIDTH MUST NOT TURN INTO HEIGHT ═══════════════════════════════════════════════════════
   Once the container fills the screen, every media block sized by its COLUMN grows tall with
   it — the hero figure went 775 -> 1119px and the print-service figure 806 -> 1124px purely
   from being wider. Cap them so extra width stays width. */
@media (min-width:1500px){
  /* ⚠ max-height on the WRAPPER does not shrink its children. Capping .hero-fig/.ps-fig left the
     inner plate at its aspect-ratio height (.hero-photo is 16/13 -> 941px at this width) and it
     simply overflowed, covering the section below by ~248px. Cap the aspect-ratio ELEMENT itself. */
  /* Constrain the WIDTH, not the aspect. These photos are background-size:cover, so forcing a
     shorter box crops the product, and switching to `contain` leaves grey bands either side.
     Limiting the plate's width keeps the original framing and stops the height growing with the
     container — which was the whole cause of the 248px overlap. */
  .hero-fig .hero-plate{ max-width:660px; margin-inline:auto; }
  .ed-psvc .ps-fig .ps-plate{ max-width:620px; margin-inline:auto; }
  .hero-fig, .ed-psvc .ps-fig{ max-height:none; }
  /* belt and braces: never let a figure paint outside its own box again */
  .hero-plate, .ed-psvc .ps-plate{ overflow:hidden; }

  /* wide cinematic category tiles instead of 16/10 boxes that get taller as they widen */
  .ctile{ aspect-ratio:2.2/1; }

  /* product detail: tighten the frame so the photo isn't marooned in white space */
  .modal-media{ padding:22px; }
  .modal-media .m-img{ max-height:620px; }
}

@media (min-width:1500px){
  :root{ --maxw:1580px; }
  .ed-cats .ctiles{ grid-template-columns:repeat(4,1fr); }
  /* PRODUCT DETAILS: the modal is already two-column, but it was hard-capped at min(1200px,100%)
     at every width — on a big monitor it sat as a small box in the middle. Let it breathe, which
     also scales the product photo (the media column is 1.1fr of the modal).
     Selector MUST be `#modalScrim .modal` — the cap lives on that id-qualified selector (1,1,0),
     so a bare `.modal` (0,1,0) loses even with !important. */
  #modalScrim .modal{ width:min(1400px,92vw) !important; }
}

@media (min-width:1800px){
  /* FILL THE SCREEN. A hard 1720px cap left a 2844px monitor using only 60% of its width with
     ~560px of dead margin each side — the site read as a narrow column, not a landscape page.
     94vw fills it; the 2560px ceiling stops lines becoming unreadable on 4K/5K panels. */
  :root{ --maxw:min(2560px, 94vw); }
  #modalScrim .modal{ width:min(2100px,88vw) !important; }
}
/* ══ FUSION 360 PASS 2 — instrument-panel detailing (desktop only) ═════════════════════════
   Builds on the existing CAD-precision layer (mono readouts, hairlines, corner ticks).
   This pass adds the parts of Fusion's language that were still missing: dimension-line
   section rules, coordinate-style labels, a segmented toolbar, and a construction grid on the
   catalogue. All gated at >=1100px so the phone layout is untouched. */
@media (min-width:1100px){

  /* 1. Section headers as engineering callouts ------------------------------------------- */
  .sec-eye{
    font-family:var(--pt-mono) !important; font-size:11px !important;
    text-transform:uppercase; letter-spacing:.16em !important;
    display:inline-flex; align-items:center; gap:9px; color:var(--ink-3) !important;
  }
  .sec-eye::before{
    content:""; width:16px; height:1px; background:var(--pt-tick); display:inline-block;
  }
  .sec-head h2{ letter-spacing:-.02em; }

  /* 2. Dimension-line rule under each section head: a measured span, not a divider -------- */
  .sec-head{ position:relative; padding-bottom:16px; }
  .sec-head::after{
    content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--pt-hair);
  }
  .sec-head::before{
    content:""; position:absolute; inset-inline-start:0; bottom:0; width:1px; height:7px;
    background:var(--pt-tick);
  }

  /* 3. Construction grid behind the catalogue + category tiles (was print/showcase only) --- */
  #catalog, .ed-cats{
    background-image:linear-gradient(var(--pt-hair-2) 1px, transparent 1px),
                     linear-gradient(90deg, var(--pt-hair-2) 1px, transparent 1px);
    background-size:34px 34px; background-position:-1px -1px;
  }

  /* 4. Category filter pills as a segmented CAD toolbar ----------------------------------- */
  #filters{
    display:inline-flex; border:1px solid var(--pt-hair); border-radius:5px; overflow:hidden;
    background:var(--panel); padding:0; gap:0;
  }
  #filters .pill{
    border-radius:0 !important; border:0 !important; margin:0 !important;
    border-inline-end:1px solid var(--pt-hair) !important;
    font-size:12.5px; letter-spacing:.01em; padding:9px 16px !important;
  }
  #filters .pill:last-child{ border-inline-end:0 !important; }
  #filters .pill.active{ box-shadow:inset 0 -2px 0 var(--brand); }

  /* 5. Product card: registration crosshair + accent edge on hover ------------------------ */
  .prod-grid .card{ position:relative; }
  .prod-grid .card::after{
    content:""; position:absolute; inset-inline-start:0; top:0; width:100%; height:2px;
    background:var(--brand); transform:scaleX(0); transform-origin:inline-start;
    transition:transform .22s cubic-bezier(.2,.7,.2,1);
  }
  .prod-grid .card:hover::after{ transform:scaleX(1); }

  /* 6. Brand line as a part reference -------------------------------------------------- */
  .card-brand{
    font-family:var(--pt-mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.14em; color:var(--ink-3);
  }

  /* 7. Buttons: machined edges rather than soft pills ------------------------------------ */
  .btn, .add-btn, .a-btn{ border-radius:5px !important; }
  .btn-ghost{ border:1px solid var(--pt-hair) !important; }
  .btn:focus-visible, .add-btn:focus-visible, input:focus-visible, select:focus-visible{
    outline:2px solid var(--brand); outline-offset:2px;
  }

  /* 8. Header search reads as a command field -------------------------------------------- */
  .nav-search{ border-radius:5px !important; }
  .nav-search input{ font-family:var(--pt-mono); font-size:12.5px; letter-spacing:-.01em; }
}

/* ══ PRODUCT PHOTO: FIT, DON'T CLIP ════════════════════════════════════════════════════════
   The preview frame was `overflow:hidden` with a max-height while the image rendered taller,
   so the product was cut off top and bottom. Let the image fit inside the frame instead, and
   make it obvious it can be opened full size. */
#modalScrim .m-img{ overflow:visible !important; max-height:none !important; }
#modalScrim .m-img img.prod-img{
  width:100% !important; height:auto !important;
  max-height:min(74vh, 640px) !important;
  object-fit:contain; cursor:zoom-in;
}

/* ══ FULL-SIZE IMAGE VIEWER ════════════════════════════════════════════════════════════════ */
.ptlb{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:rgba(9,13,17,.94);
  /* Deliberately NO opacity transition on the backdrop. A transition is frozen while a tab is
     inactive, which left this overlay fully transparent yet still swallowing clicks. The entrance
     is animated on the image instead, where the worst case is a missing fade, not an invisible
     click-trap. */
}
.ptlb .ptlb-stage img{ animation:ptlbIn .18s ease both }
@keyframes ptlbIn{ from{ opacity:0; transform:scale(.98) } to{ opacity:1; transform:none } }
.ptlb[hidden]{ display:none }
.ptlb-stage{ margin:0; max-width:92vw; max-height:88vh; display:flex; align-items:center; justify-content:center; }
.ptlb-stage img{
  max-width:92vw; max-height:88vh; width:auto; height:auto;
  object-fit:contain; background:#fff; border-radius:4px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.ptlb-close,.ptlb-nav{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.09); color:#fff;
  border-radius:5px; cursor:pointer; line-height:1; transition:background .15s,border-color .15s;
}
.ptlb-close{ top:18px; inset-inline-end:20px; width:44px; height:44px; font-size:18px; }
.ptlb-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px; padding-bottom:4px; }
.ptlb-nav.prev{ inset-inline-start:20px }
.ptlb-nav.next{ inset-inline-end:20px }
.ptlb-close:hover,.ptlb-nav:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.45); }
.ptlb-close:focus-visible,.ptlb-nav:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.ptlb-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--pt-mono); font-size:12.5px; letter-spacing:.12em;
  background:rgba(0,0,0,.45); padding:6px 15px; border-radius:999px;
}
@media (max-width:640px){
  .ptlb-nav{ width:44px; height:44px; font-size:25px }
  .ptlb-nav.prev{ inset-inline-start:10px } .ptlb-nav.next{ inset-inline-end:10px }
  .ptlb-close{ top:12px; inset-inline-end:12px }
}