:root{
    --bg:#f6f7fb; --surface:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e8eaf1;
    --brand:#7c3aed; --brand-d:#6d28d9; --brand-tint:#f3e8ff; --accent:#f97316; --accent-d:#ea580c;
    --brand-rgb:124,58,237; --accent-rgb:249,115,22; --primary:var(--brand);
    --green:#16a34a; --green-tint:#f0fdf4; --red:#e11d48; --star:#f59e0b;
    --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
    --shadow-lg:0 14px 44px rgba(15,23,42,.16);
    --radius:16px;
  }
  :root[data-theme="dark"]{
    --bg:#050816; --surface:#0e1424; --ink:#e9edf6; --muted:#8b95ab; --line:#1b2238;
    --brand:#8b5cf6; --brand-d:#7c3aed; --brand-tint:#241a44; --green-tint:#10241a; --brand-rgb:139,92,246;
    --accent:#ff7a1a; --accent-d:#e5670a; --blue:#2563eb;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
    --shadow-lg:0 22px 55px rgba(0,0,0,.6);
  }
  /* deep navy canvas + one large radial glow focused behind the hero, fading to flat navy below */
  :root[data-theme="dark"] body{
    background:#060a15;
    background-image:
      radial-gradient(1200px 620px at 50% 300px, rgba(124,58,237,.30), rgba(76,29,149,.12) 42%, transparent 66%),
      radial-gradient(900px 500px at 78% 160px, rgba(59,130,246,.16), transparent 60%),
      linear-gradient(180deg,#0a0f20 0%,#070b18 620px,#050813 100%);
    background-attachment:fixed;background-repeat:no-repeat;
  }
  /* subtle film-grain noise so the navy never looks flat */
  :root[data-theme="dark"] body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  :root[data-theme="dark"] .mainhead{background:rgba(15,20,35,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(139,92,246,.14)}
  :root[data-theme="dark"] .searchbig{background:rgba(255,255,255,.03)}
  :root[data-theme="dark"] .searchbig .scat{background:#0f1626;color:var(--muted)}
  :root[data-theme="dark"] .searchbig input{background:var(--surface);color:var(--ink)}
  :root[data-theme="dark"] .cats{background:rgba(15,21,38,.55);backdrop-filter:blur(10px);border-bottom-color:rgba(139,92,246,.12)}
  :root[data-theme="dark"] .chip{background:var(--surface);color:var(--ink)}
  :root[data-theme="dark"] .thumb{filter:brightness(.95)}
  :root[data-theme="dark"] .stars{opacity:.95}
  :root[data-theme="dark"] .dtmodal{background:var(--surface)}
  :root[data-theme="dark"] .flashwrap{background:linear-gradient(120deg,#1c1533,#171226);border-color:#3a2c5a}
  :root[data-theme="dark"] select{background:var(--surface);color:var(--ink)}
  :root[data-theme="dark"] .hbtn{background:rgba(255,255,255,.06);color:#e8ebf3;border-color:rgba(255,255,255,.16)}
  :root[data-theme="dark"] .hbtn:hover{background:rgba(255,255,255,.12)}
  :root[data-theme="dark"] .hicon{background:transparent;color:#e8ebf3}
  :root[data-theme="dark"] .hicon>svg,:root[data-theme="dark"] .hicon .cwrap svg{color:#e8ebf3}
  :root[data-theme="dark"] .hicon .ht small{color:#9aa4b8}
  :root[data-theme="dark"] .hicon .ht b{color:#fff}
  :root[data-theme="dark"] .hicon:hover{background:rgba(255,255,255,.08)}
  :root[data-theme="dark"] .statusline.wait{background:rgba(180,83,9,.16);color:#fcd34d}
  :root[data-theme="dark"] .socialbtn.google{background:#f1f1f4}
  :root[data-theme="dark"] .nlinner{background:linear-gradient(120deg,#151030,#2a1a5c)}
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .muted{color:var(--muted)}

  /* ---------- header (3-tier, UNIMART-style) ---------- */
  header{position:sticky;top:0;z-index:40;box-shadow:0 3px 14px rgba(15,23,42,.09)}
  /* top utility bar — solid brand blue (theme colour) with light text, both themes */
  .utilbar{background:var(--brand,#1943ba);color:rgba(255,255,255,.82);font-size:12.5px}
  .uin{max-width:1680px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 20px}
  .uin .usep{opacity:.45}
  .uin b{color:#fff;font-weight:700}
  .utrend b{color:#ffd24a}
  .uright{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}
  .themetgl{background:transparent;border:0;color:#eaf0ff;cursor:pointer;font-size:12.5px;font-weight:600;padding:2px 6px;border-radius:6px}
  /* "Register as seller" pill in the top utility bar (marketplace stores only) */
  .sellerbtn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px;transition:.15s}
  .sellerbtn:hover{background:#fff;color:var(--brand,#1943ba)}
  /* seller signup modal */
  .sellerov{position:fixed;inset:0;z-index:2200;background:rgba(6,9,17,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:20px}
  .sellerov.show{display:flex}
  .sellermodal{background:var(--surface,#fff);color:var(--ink);border-radius:20px;width:100%;max-width:440px;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(2,6,23,.4);padding:22px 24px 24px}
  .sellerhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
  .sellerhead b{font-size:18px;font-weight:800}
  .sellerx{border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer;line-height:1}
  .sellersub{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.5}
  .sfld{margin-bottom:12px}
  .sfld label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px;color:var(--ink)}
  .sfld input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14px;background:var(--bg);color:var(--ink);outline:none;transition:.15s}
  .sfld input:focus{border-color:var(--brand)}
  .sepw{position:relative}
  .sepw input{width:100%;box-sizing:border-box;padding-right:42px}
  .sepweye{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:0;padding:4px 6px;cursor:pointer;font-size:16px;line-height:1;opacity:.55}
  .sepweye:hover{opacity:.9}
  .serr{color:#dc2626;font-size:12.5px;font-weight:600;min-height:16px;margin:2px 0 6px}
  .sesubmit{width:100%;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-d,#4f46e5));color:#fff;font-weight:800;font-size:14.5px;padding:13px;border-radius:12px;cursor:pointer;margin-top:4px;transition:.15s}
  .sesubmit:hover{filter:brightness(1.06)}
  .sesubmit:disabled{opacity:.6;cursor:default}
  .sellerdone{text-align:center;padding:10px 4px 4px}
  .sellerdone .sdicon{width:58px;height:58px;border-radius:50%;background:#dcfce7;color:#16a34a;display:grid;place-items:center;font-size:30px;font-weight:800;margin:6px auto 14px}
  .sellerdone h3{margin:0 0 8px;font-size:19px}
  .sellerdone p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 18px}
  .sellersignin{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}
  .sellersignin a{color:var(--brand);font-weight:700;cursor:pointer}
  .sellersignin a:hover{text-decoration:underline}
  .themetgl:hover{background:rgba(255,255,255,.16)}
  .ustatus{display:inline-flex;align-items:center;gap:6px}
  .dot{width:8px;height:8px;border-radius:50%;background:#64748b}
  .dot.on{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25)}
  @media(max-width:860px){.utrend,.uin .usep{display:none}}

  .mainhead{background:#fff}
  .mhin{max-width:1680px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:15px 20px}
  .brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:800;font-size:24px;letter-spacing:-.6px;white-space:nowrap;cursor:pointer}
  .brand .logo{width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#f97316);display:grid;place-items:center;flex:none}
  .brand .logo svg{width:27px;height:27px;color:#fff}
  .brand span{color:var(--brand);font-weight:800}
  .searchbig{flex:1;display:flex;align-items:center;min-width:0;max-width:680px;border:2px solid var(--brand);border-radius:12px;overflow:hidden;background:#fff}
  /* wide-but-tight widths (e.g. long company name + staff buttons, or 90-100% zoom): drop the search to
     its own full-width row so the brand + all icons (incl. the cart) always stay on row 1 and never get cut */
  @media(max-width:1200px){
    .mhin{flex-wrap:wrap;gap:10px 12px}
    .hicons{margin-left:auto}
    .searchbig{order:3;flex:1 0 100%;min-width:0;max-width:none;margin:0}
  }
  .searchbig .scat{border:0;border-right:1px solid var(--line);background:#f8fafc;font-size:13px;font-weight:600;padding:0 12px;height:44px;color:var(--muted);margin:0;border-radius:0;min-width:140px;width:auto;cursor:pointer;flex:none}
  .searchbig input{flex:1;min-width:0;border:0;outline:none;font-size:14px;padding:0 14px;height:44px;color:var(--ink);background:#fff;caret-color:var(--brand);-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;touch-action:manipulation}
  .searchbig .sbtn{border:0;background:var(--brand);color:#fff;width:54px;height:44px;cursor:pointer;display:grid;place-items:center;flex:none}
  .searchbig .sbtn svg{width:18px;height:18px}
  /* Mobile-only chrome — hidden on desktop, shown inside the max-width:760px block below. */
  .mnavtoggle,.mdrawer,.mdrawer-ov,.mbottomnav,.msheet,.msheet-ov{display:none}
  /* gift-module badge on product cards */
  .thumb .giftbadge{position:absolute;top:12px;left:12px;z-index:2;background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;box-shadow:0 4px 12px rgba(139,92,246,.4)}
  /* Gifts page (own view) + occasion filter chips */
  .giftpage{max-width:1680px;margin:0 auto;padding:22px 28px 60px}
  .giftpage .ordersHead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
  .giftpage .ordersHead h2{margin:0;font-size:26px;font-weight:800;color:var(--ink)}
  .giftpage .ordersHead .sub{color:var(--muted);font-size:13.5px;margin-top:3px}
  .giftocc{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}
  .giftchip{border:1.6px solid var(--line);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:22px;cursor:pointer;transition:.15s;white-space:nowrap}
  .giftchip:hover{border-color:var(--brand)}
  .giftchip.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 6px 16px rgba(var(--brand-rgb),.3)}
  @media(max-width:760px){.giftpage{padding:16px 14px 70px}.giftocc{gap:8px}.giftchip{padding:8px 13px;font-size:12.5px}}
  .thumb .salebadge ~ .giftbadge{top:auto;bottom:12px;left:12px}
  /* storefront paywall (trial ended) */
  .storelock{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% 0%,rgba(var(--brand-rgb),.14),transparent 60%),var(--bg,#f4f6fb)}
  .storelock .slk-card{max-width:460px;text-align:center;background:var(--surface,#fff);border:1px solid var(--line,#e2e8f0);border-radius:20px;padding:34px 28px;box-shadow:0 30px 80px rgba(2,6,23,.18)}
  .storelock .slk-ic{font-size:46px;line-height:1;margin-bottom:12px}
  .storelock h2{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--ink,#0f172a)}
  .storelock p{margin:0 0 20px;font-size:14.5px;color:var(--muted,#64748b);line-height:1.6}
  .storelock .slk-btn{border:0;background:var(--brand,#7c3aed);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:12px;cursor:pointer}
  .storelock .slk-btn:hover{filter:brightness(1.06)}
  .hicons{display:flex;align-items:center;gap:4px;margin-left:auto}
  .hicon{position:relative;display:flex;align-items:center;gap:9px;border:0;background:transparent;cursor:pointer;padding:7px 11px;border-radius:10px;color:var(--ink)}
  .hicon:hover{background:var(--brand-tint)}
  .hicon>svg,.hicon .cwrap svg{width:23px;height:23px;color:var(--ink)}
  .hicon .ht{display:flex;flex-direction:column;line-height:1.25;text-align:left}
  .hicon .ht small{font-size:11px;color:var(--muted)}
  .hicon .ht b{font-size:13.5px;font-weight:700;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hicon .cwrap{position:relative;display:grid;place-items:center}
  .hicon .badge{position:absolute;top:-7px;right:-9px;background:var(--accent);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;font-weight:800}
  .hbtn{border:1px solid var(--line);background:#fff;color:var(--brand-d);font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:9px;cursor:pointer}
  .hbtn:hover{background:var(--brand-tint)}
  @media(max-width:860px){.hicon .ht{display:none}}

  .navbar{background:linear-gradient(90deg,var(--brand-d),var(--brand))}
  :root[data-theme="dark"] .navbar{background:linear-gradient(90deg,var(--brand-d),var(--brand))}
  .nvin{max-width:1680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
  .nvlinks{display:flex;gap:2px}
  .navlink{border:0;background:transparent;color:rgba(255,255,255,.9);font-size:14px;font-weight:600;padding:13px 17px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;border-bottom:3px solid transparent}
  .navlink svg{width:16px;height:16px}
  .navlink:hover{background:rgba(255,255,255,.1);color:#fff}
  .navlink.active{color:#fff;border-bottom-color:#fbbf24}
  .dealsbtn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:800;padding:8px 16px;border:0;border-radius:9px;margin:7px 0;cursor:pointer;box-shadow:0 6px 16px rgba(249,115,22,.4);transition:.15s}
  .dealsbtn:hover{background:var(--accent-d);transform:translateY(-1px)}
  .dealsbtn svg{width:16px;height:16px}
  /* header wraps: brand + icons row 1, search full-width row 2 (see mobile block below) */
  /* orders page */
  .ordersPage{max-width:1000px;margin:26px auto 0;padding:0 20px 20px}
  .ordersHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
  .ordersHead h2{margin:0;font-size:25px;letter-spacing:-.5px}
  .ordersHead .sub{color:var(--muted);font-size:13.5px;margin-top:3px}
  .backshop{display:inline-flex;align-items:center;gap:8px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:12px;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.28);transition:.15s}
  .backshop:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,99,235,.38)}
  .backshop svg{width:16px;height:16px}
  .ordfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px}
  .ofsearch{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 12px}
  .ofsearch svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}
  .ofsearch input{flex:1;border:0;outline:none;background:transparent;font-size:13.5px;padding:11px 0;color:var(--ink)}
  .ordfilters select,.ordfilters input[type=date]{width:auto;margin:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:10px 12px;border-radius:10px;cursor:pointer}
  .ordfilters select{min-width:150px}
  .ofclear{border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer}
  .ofclear:hover{background:var(--brand-tint);color:var(--brand-d);border-color:var(--brand)}
  .ofdates{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px 10px}
  .ofdates span{font-size:11.5px;font-weight:700;color:var(--muted)}
  .ordfilters .ofdates input[type=date]{border:0;background:transparent;padding:7px 2px;margin:0;min-width:116px;font-weight:600}
  .emptyorders{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:56px 20px;text-align:center}
  .emptyorders .eico{width:64px;height:64px;border-radius:50%;background:var(--brand-tint);display:grid;place-items:center;margin:0 auto 16px}
  .emptyorders .eico svg{width:30px;height:30px;color:var(--brand)}
  .emptyorders h3{margin:0 0 6px;font-size:17px}
  .statusline{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:10px}
  .statusline.wait{color:#b45309;background:#fff7ed}
  .statusline.ship{color:var(--brand-d);background:var(--brand-tint)}
  .statusline.done{color:#065f46;background:var(--green-tint)}
  .statusline.fail{color:#9f1239;background:#ffe4e6}

  /* ---------- category strip ---------- */
  .cats{background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;max-width:1680px;margin:0 auto;padding:12px 28px;min-height:68px}
  .catsinner{flex:1 1 auto;min-width:200px;display:flex;gap:10px;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;align-items:center}
  .catsinner::-webkit-scrollbar{display:none;height:0;width:0}
  .catsinner .chip{scroll-snap-align:start}
  .catsright{display:flex;align-items:center;gap:16px;padding:0;flex-shrink:0;flex-wrap:nowrap}
  .catsright .instock{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;height:44px;padding:0 4px}
  .catsright .instock input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
  .sortsel{border:1.6px solid var(--line);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:600;padding:0 34px 0 14px;height:44px;border-radius:11px;cursor:pointer;transition:border-color .18s,box-shadow .18s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
  .sortsel:hover{border-color:var(--brand)}
  .sortsel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14)}
  /* custom sort dropdown — menu is positioned + width-capped so it never runs off-screen */
  .sortdd{position:relative;display:inline-block}
  .sortdd .sortsel{width:100%;text-align:left;font-family:inherit}
  .sortmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(2,6,23,.22);z-index:60;padding:6px;display:none}
  .sortmenu.show{display:block}
  .sortmenu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font-size:13.5px;font-weight:600;padding:11px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;font-family:inherit}
  .sortmenu button:hover{background:var(--brand-tint)}
  .sortmenu button.on{background:var(--brand-tint);color:var(--brand)}
  @media(max-width:1100px){.catsright{width:100%;justify-content:flex-start;gap:14px;flex-wrap:nowrap}.filttgl{min-width:0;padding:0 16px}.sortdd{min-width:0;margin-left:auto}}
  @media(max-width:600px){.catsright{flex-wrap:wrap;gap:12px}.sortsel{margin-left:0}.toolacts{flex:1 1 100%}}
  .chip{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.15s}
  .chip:hover{border-color:var(--brand);color:var(--brand)}
  .chip.active{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(0,0,0,.2)}

  /* ---------- hero ---------- */
  .hero{max-width:1680px;margin:22px auto 0;padding:0 20px}
  .banner{position:relative;overflow:hidden;background:radial-gradient(620px 380px at 62% 46%,rgba(var(--accent-rgb),.24),transparent 62%),radial-gradient(500px 320px at 20% 30%,rgba(var(--brand-rgb),.20),transparent 60%),linear-gradient(120deg,#0b0e18,#12141f 52%,#181a26);color:#fff;border-radius:24px;padding:30px 38px;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:288px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
  /* 3-column hero: text · industrial composition · floating stat cards */
  .bleft{flex:0 1 360px;position:relative;z-index:2}
  .bcenter{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
  .bcenter:empty{display:none}                                        /* no hero graphic → collapse it (clean text hero) */
  .banner:has(#heroShow:empty) .bleft{flex:1 1 auto;max-width:600px}  /* let the headline use the freed space */
  .herosvg{width:100%;max-width:410px;height:auto;filter:drop-shadow(0 22px 36px rgba(0,0,0,.45))}
  .bstats{flex:0 0 180px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
  .scard{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);border-radius:14px;padding:12px 14px;box-shadow:0 14px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);animation:hfa 5.5s ease-in-out infinite}
  .scard:nth-child(2){animation-delay:-1.4s}.scard:nth-child(3){animation-delay:-2.8s}
  .scico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(139,92,246,.32),rgba(37,99,235,.28));border:1px solid rgba(139,92,246,.35);color:#c4b5fd}
  .scico svg{width:19px;height:19px}
  .sctext{min-width:0}
  .scard b{display:block;font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.1;background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .scard span{font-size:11.5px;color:#a99fd6;font-weight:600}
  .hf1{animation:hfa 5.6s ease-in-out infinite}
  .hf2{animation:hfa 6.6s ease-in-out infinite;animation-delay:-1.6s}
  .hf3{animation:hfa 5s ease-in-out infinite;animation-delay:-.9s}
  .hf4{animation:hfa 7.2s ease-in-out infinite;animation-delay:-2.3s}
  @keyframes hfa{0%,100%{translate:0 0}50%{translate:0 -10px}}
  @media(prefers-reduced-motion:reduce){.hf1,.hf2,.hf3,.hf4,.scard{animation:none}}
  @media(max-width:1080px){.bcenter{display:none}}
  @media(max-width:680px){.bstats{display:none}}
  .banner::after{content:'';position:absolute;right:4%;top:50%;transform:translateY(-50%);width:520px;height:520px;background:radial-gradient(circle,rgba(139,92,246,.42),transparent 66%);pointer-events:none}
  .banner::before{content:'';position:absolute;left:-40px;bottom:-90px;width:300px;height:300px;background:radial-gradient(circle,rgba(59,130,246,.22),transparent 70%);pointer-events:none}
  .bleft{position:relative;z-index:2;max-width:600px}
  .beyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(var(--accent-rgb),.9);border:1px solid rgba(var(--accent-rgb),.5);padding:5px 12px;border-radius:999px;margin-bottom:16px}
  .banner h1{margin:0;font-size:37px;line-height:1.07;letter-spacing:-1.2px;font-weight:800}
  .banner p{margin:12px 0 0;opacity:.85;font-size:15px}
  .bcta{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
  .shopnow{border:0;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-weight:800;font-size:15px;padding:14px 30px;border-radius:12px;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.28);transition:.15s}
  .shopnow:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,58,237,.6)}
  .reqquote{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px;cursor:pointer;transition:.15s}
  .reqquote:hover{background:rgba(255,255,255,.14)}
  .bsave{font-size:13.5px;font-weight:600;color:#ddd6fe}
  .hstats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
  .hstat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hstat span{font-size:12.5px;color:#c4b5fd;font-weight:600}
  .bright{position:relative;z-index:2}
  .bshow{position:relative;width:320px;height:280px}
  .bmain{position:absolute;inset:22px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 55px rgba(76,29,149,.55)}
  .bmain img{width:100%;height:100%;object-fit:cover;display:block}
  .bthumb{position:absolute;width:98px;height:98px;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.22);box-shadow:0 16px 34px rgba(0,0,0,.45);background:#1c1533}
  .bthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .bt1{top:-8px;right:-6px}.bt2{bottom:-8px;left:-6px}
  .bicon{width:190px;height:190px;border-radius:28px;background:linear-gradient(160deg,rgba(139,92,246,.28),rgba(255,255,255,.05));backdrop-filter:blur(6px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(76,29,149,.4);margin:45px auto}
  .bicon svg{width:96px;height:96px;color:#fff;opacity:.92}
  @media(max-width:820px){.banner{padding:32px 26px;min-height:auto}.banner h1{font-size:30px}}
  /* ---- light-theme hero: white/light background with dark text ---- */
  :root[data-theme="light"] .banner{background:radial-gradient(620px 380px at 62% 46%,rgba(var(--accent-rgb),.10),transparent 62%),radial-gradient(500px 320px at 20% 30%,rgba(var(--brand-rgb),.12),transparent 60%),linear-gradient(120deg,#ffffff,#f4f7ff 52%,#eaf0ff);color:var(--ink);box-shadow:0 24px 60px rgba(var(--brand-rgb),.12),inset 0 1px 0 rgba(255,255,255,.7);border:1px solid var(--line)}
  :root[data-theme="light"] .banner h1{color:var(--ink)}
  :root[data-theme="light"] .banner p{color:var(--muted);opacity:1}
  :root[data-theme="light"] .banner::after{background:radial-gradient(circle,rgba(var(--brand-rgb),.12),transparent 66%)}
  :root[data-theme="light"] .banner::before{background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 70%)}
  :root[data-theme="light"] .bparticles{opacity:.3}
  :root[data-theme="light"] .bfeat .bfi{background:var(--brand-tint);color:var(--brand)}
  :root[data-theme="light"] .bfeat .bft b{color:var(--ink)}
  :root[data-theme="light"] .bfeat .bft small{color:var(--muted)}
  :root[data-theme="light"] .scard{background:#fff;border:1px solid var(--line);backdrop-filter:none;box-shadow:0 12px 30px rgba(15,23,42,.10)}
  :root[data-theme="light"] .scico{background:var(--brand-tint);border:1px solid rgba(var(--brand-rgb),.28);color:var(--brand)}
  :root[data-theme="light"] .scard b{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
  :root[data-theme="light"] .scard span{color:var(--muted)}
  :root[data-theme="light"] .reqquote{border:1px solid var(--line);background:#fff;color:var(--ink)}
  :root[data-theme="light"] .reqquote:hover{background:var(--brand-tint)}
  :root[data-theme="light"] .bdots button{background:rgba(15,23,42,.18)}
  :root[data-theme="light"] .bdots button.on{background:var(--accent)}
  :root[data-theme="light"] .hstat b{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
  :root[data-theme="light"] .hstat span{color:var(--brand)}
  :root[data-theme="light"] .bsave{color:var(--brand)}
  :root[data-theme="light"] .hgcell{background:#f7f9ff;border:1px solid var(--line)}
  :root[data-theme="light"] .hgcell:hover{background:#eef3ff;border-color:rgba(var(--brand-rgb),.4)}
  :root[data-theme="light"] .hgcell img{filter:drop-shadow(0 8px 16px rgba(15,23,42,.16))}
  /* section head */
  .sechead{max-width:1680px;margin:22px auto 2px;padding:0 20px;text-align:center}
  .sechead h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
  .sechead h2 b{color:var(--brand)}
  .sechead p{margin:6px 0 0;color:var(--muted);font-size:14px}
  /* sale badge + wishlist */
  .salebadge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,var(--accent),#ff9a4d);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:8px;letter-spacing:.4px;z-index:2;box-shadow:0 4px 12px rgba(255,122,26,.4)}
  .wish{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(15,23,42,.14);cursor:pointer;display:grid;place-items:center;z-index:2;color:#cbd5e1;transition:.15s}
  .wish:hover{color:var(--red);transform:scale(1.08)}
  .wish.on{color:var(--red)}
  .wish svg{width:18px;height:18px}
  .pcat{font-size:10.5px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.5px}
  /* ---------- 2026 home sections ---------- */
  .hsec{max-width:1680px;margin:30px auto 0;padding:0 20px}
  .hsec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
  .hsec-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
  .hsec-head .link{color:var(--brand);font-size:13.5px;font-weight:700;cursor:pointer}
  /* shop by category — circles */
  .catsec{max-width:1680px;margin:30px auto 0;padding:0 20px}
  /* Row scrolls horizontally when there are many; centered when few; no visible scrollbar. */
  .catcircles{display:flex;gap:clamp(8px,1.8vw,26px);padding:6px 2px 12px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;width:max-content;max-width:100%;margin:0 auto;justify-content:flex-start}
  .catcircles::-webkit-scrollbar{display:none;height:0;width:0}
  @media(hover:hover){.catcircles,.cats .catsinner,#cats{cursor:grab}.catcircles.dragging,.cats.dragging,#cats.dragging{cursor:grabbing}.catcircles.dragging *,#cats.dragging *{pointer-events:none}}
  .soldby{font-size:11.5px;color:var(--muted);margin:2px 0 0}.soldby b{color:var(--brand);font-weight:700}
  @media(max-width:760px){.catcircles{gap:16px;padding-bottom:8px}.catcircle{width:74px}.catcircle .cc{max-width:66px}}
  .catcircle{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;flex:0 0 auto;width:clamp(84px,12vw,104px);min-width:0}
  .catcircle .cc{width:100%;max-width:88px;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;transition:.18s;border:2px solid transparent;overflow:hidden}
  .catcircle .cc.hasimg{border:1px solid var(--line)}
  .catcircle .cc img{width:100%;height:100%;object-fit:cover;padding:0;filter:none}
  .catcircle:hover .cc{transform:translateY(-4px) scale(1.04);box-shadow:var(--shadow-lg);border-color:#fff}
  .catcircle:hover .cc.hasimg{border-color:var(--brand)}
  .catcircle .cc svg{width:44%;height:44%}
  .catcircle span{font-size:clamp(11px,1.3vw,13px);font-weight:600;text-align:center;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* flash sale */
  .flashwrap{background:linear-gradient(120deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;border-radius:22px;padding:26px 26px 30px}
  .flash-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
  .flash-head h2{margin:0;font-size:23px;font-weight:800;color:#c2410c;display:flex;align-items:center;gap:9px}
  .countdown{display:flex;align-items:center;gap:8px;font-weight:700;color:#7c2d12;font-size:13.5px}
  .cdbox{background:#111827;color:#fff;font-weight:800;font-size:16px;padding:7px 11px;border-radius:9px;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
  /* why choose us */
  .why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media(max-width:820px){.why{grid-template-columns:repeat(2,1fr)}}
  .whycard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-align:center;transition:.16s}
  .whycard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .whycard .wi{width:54px;height:54px;border-radius:14px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin:0 auto 13px}
  .whycard .wi svg{width:26px;height:26px}
  .whycard h4{margin:0 0 4px;font-size:15px}.whycard p{margin:0;color:var(--muted);font-size:13px}
  /* promo strip */
  .promostrip{max-width:1680px;margin:30px auto 0;padding:0 20px}
  .promostrip .pinner{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--accent),#fb923c);color:#fff;border-radius:22px;padding:34px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  .promostrip h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.6px}
  .promostrip p{margin:6px 0 0;opacity:.95}
  .promostrip .pbtn{background:#fff;color:var(--accent-d);font-weight:800;border:0;padding:13px 26px;border-radius:11px;cursor:pointer;font-size:15px}
  /* trusted-by strip */
  .trusted{max-width:1680px;margin:44px auto 0;padding:0 20px;text-align:center}
  .trusted-h{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
  .trusted-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px}
  .tlogo{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:800;color:var(--muted);opacity:.62;filter:grayscale(1);transition:opacity .2s,color .2s,filter .2s}
  .tlogo svg{width:26px;height:26px}
  .tlogo:hover{opacity:1;color:var(--brand);filter:grayscale(0)}
  @media(max-width:600px){.trusted-row{gap:22px}.tlogo{font-size:16px}.tlogo svg{width:22px;height:22px}}
  /* newsletter — Get ₹500 OFF */
  .newsletter{max-width:1680px;margin:40px auto 0;padding:0 20px}
  /* light-theme newsletter — soft brand card (dark-theme override further below) */
  .nlinner{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:26px;padding:clamp(38px,5vw,60px) 30px;text-align:center;overflow:hidden;box-shadow:0 20px 50px rgba(var(--brand-rgb),.12)}
  .nlinner::before{content:"";position:absolute;top:-60px;right:-40px;width:280px;height:280px;border-radius:50%;background:rgba(var(--brand-rgb),.10)}
  .nlinner::after{content:"";position:absolute;bottom:-90px;left:-50px;width:240px;height:240px;border-radius:50%;background:rgba(var(--brand-rgb),.07)}
  .nlinner>*{position:relative;z-index:1}
  .nlbadge{display:inline-block;background:var(--brand-tint);border:1px solid rgba(var(--brand-rgb),.3);color:var(--brand);font-weight:800;font-size:12.5px;padding:6px 16px;border-radius:999px;margin-bottom:14px}
  .nlinner h2{margin:0 0 10px;font-size:clamp(24px,3.4vw,38px);font-weight:900;line-height:1.15;letter-spacing:-.5px;color:var(--ink)}
  .nloff{color:var(--brand)}
  .nlinner p{margin:0 auto 24px;max-width:520px;font-size:15px;color:var(--muted)}
  .nlform{display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap}
  .nlform input{flex:1;min-width:220px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:15px;outline:none;background:var(--surface);color:var(--ink);box-shadow:0 6px 18px rgba(15,23,42,.06)}
  .nlform input:focus{border-color:var(--brand)}
  .nlform button{border:0;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:800;padding:16px 30px;border-radius:14px;cursor:pointer;font-size:15px;transition:transform .18s,box-shadow .18s;white-space:nowrap}
  .nlform button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(var(--brand-rgb),.3)}
  .nlnote{margin-top:16px;font-size:12.5px;color:var(--muted)}
  /* premium footer */
  /* footer — solid brand blue (theme colour) with light text, both themes */
  footer.premium{background:var(--brand,#1943ba);color:rgba(255,255,255,.88);margin:54px 0 0;max-width:none;padding:0;border-top:0}
  .ftop{max-width:1680px;margin:0 auto;padding:48px 20px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
  @media(max-width:820px){.ftop{grid-template-columns:repeat(3,1fr);gap:24px 14px}.ftop .fcol:first-child{grid-column:1 / -1}}
  .fcol h4{color:#fff;font-size:14px;margin:0 0 14px;letter-spacing:.3px}
  .fcol a,.fcol p{display:block;color:rgba(255,255,255,.9);font-size:13.5px;margin:0 0 9px;text-decoration:none}
  .fcol a:hover{color:#fff}
  .fbrand{display:flex;align-items:center;gap:13px;font-size:24px;font-weight:800;color:#fff;margin-bottom:14px}
  .fbrand .logo{width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;overflow:hidden;flex:none}
  .fpay{max-width:1680px;margin:0 auto;padding:20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16)}
  .fpay-lbl{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.5px}
  .fpay-icons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .pmethod{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:7px;background:#fff;color:#0f172a;font-size:12.5px;font-weight:800;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
  .pmethod.visa{color:#1a1f71}.pmethod.mc{color:#eb5b25}.pmethod.rupay{color:#0b6b3a}.pmethod.upi{color:#5b2d8e}.pmethod.paytm{color:#00baf2}.pmethod.cod{color:#334155}
  .fbot{border-top:1px solid rgba(255,255,255,.16);padding:18px 20px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.6);max-width:1680px;margin:0 auto}
  /* animations */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  .thumb>img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .card:hover .thumb>img{transform:scale(1.09)}
  /* shimmer skeleton */
  .skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
  .skel .sk{background:linear-gradient(90deg,#eef1f6 25%,#f6f8fb 37%,#eef1f6 63%);background-size:400% 100%;animation:shine 1.3s ease-in-out infinite}
  .skel .sk1{height:170px}.skel .sk2{height:14px;margin:14px 14px 8px;border-radius:5px}.skel .sk3{height:14px;width:60%;margin:0 14px 16px;border-radius:5px}
  @keyframes shine{0%{background-position:100% 0}100%{background-position:0 0}}

  /* ---------- product grid ---------- */
  main{max-width:1680px;margin:0 auto;padding:14px 20px 20px}
  .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  @media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:760px){.cards{grid-template-columns:repeat(2,1fr);gap:12px}}
  @media(max-width:460px){.cards{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s,border-color .22s;animation:cardIn .4s ease both}
  @keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(124,58,237,.26);border-color:rgba(139,92,246,.5)}
  :root[data-theme="dark"] .card{background:rgba(15,21,38,.62);backdrop-filter:blur(12px);border-color:rgba(139,92,246,.16)}
  :root[data-theme="dark"] .card:hover{box-shadow:0 24px 52px rgba(124,58,237,.42);border-color:rgba(139,92,246,.6)}
  .thumb{height:200px;margin:14px 14px 0;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden}
  .thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply;filter:drop-shadow(0 10px 16px rgba(10,14,25,.34));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .thumb svg.pic{width:70px;height:70px}

  /* ============ FASHION / SHOES TEMPLATE (Adidas-style) — activates on data-template="fashion" ============ */
  :root[data-template="fashion"]{--radius:4px}
  :root[data-template="fashion"] .banner{background:linear-gradient(120deg,#0a0a0c,#18181d);border-radius:8px}
  :root[data-template="fashion"] .beyebrow{background:var(--brand);color:#fff;border-radius:0;font-weight:800;letter-spacing:2px;text-transform:uppercase}
  :root[data-template="fashion"] #heroTitle{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(40px,6vw,76px);line-height:.92;text-transform:uppercase;letter-spacing:-.5px;font-weight:800;color:#fff}
  :root[data-template="fashion"] #heroSub{color:rgba(255,255,255,.72)}
  :root[data-template="fashion"] .shopnow{background:var(--brand);border-radius:0;text-transform:uppercase;letter-spacing:1.5px;font-weight:800}
  :root[data-template="fashion"] .reqquote{border-radius:0;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;border:2px solid #fff;color:#fff;background:transparent}
  :root[data-template="fashion"] .scard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);border-radius:4px}
  /* fashion hero visual (featured product on a clean circular stage) */
  :root[data-template="fashion"] .fhero{position:relative;display:grid;place-items:center;height:100%;min-height:300px}
  :root[data-template="fashion"] .fhero-img{width:min(420px,88%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 46%,#ffffff,#e9e9ee 58%,rgba(233,233,238,0) 72%);display:grid;place-items:center;font-size:130px}
  :root[data-template="fashion"] .fhero-img img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 30px 42px rgba(0,0,0,.55));transform:rotate(-12deg)}
  :root[data-template="fashion"] .fhero-tag{position:absolute;top:6%;right:4%;background:var(--brand);color:#fff;font-weight:800;letter-spacing:2px;padding:8px 15px;text-transform:uppercase;font-size:12px}
  /* product cards -> image-forward, minimal, sharp */
  :root[data-template="fashion"] .card{background:transparent;border:0;box-shadow:none;border-radius:0;backdrop-filter:none}
  :root[data-template="fashion"] .card:hover{box-shadow:none;transform:none;border-color:transparent}
  :root[data-template="fashion"] .thumb{height:250px;margin:0;border-radius:0;background:#f4f4f5!important}
  :root[data-template="fashion"] .thumb>img{mix-blend-mode:normal;padding:24px;filter:none}
  :root[data-template="fashion"] .card:hover .thumb>img{transform:scale(1.07)}
  :root[data-template="fashion"] .cbody{padding:14px 2px 6px}
  :root[data-template="fashion"] .pname{text-transform:uppercase;font-weight:800;font-size:14px;letter-spacing:.2px}
  :root[data-template="fashion"] .pcat{color:var(--muted);font-size:12px;text-transform:none;letter-spacing:0}
  :root[data-template="fashion"] .rating,:root[data-template="fashion"] .stk{display:none}
  :root[data-template="fashion"] .prices{margin-top:5px}
  :root[data-template="fashion"] .prices .price{font-weight:800;font-size:15.5px}
  :root[data-template="fashion"] .salebadge{border-radius:0;background:var(--brand)}
  :root[data-template="fashion"] .add{border-radius:0;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;background:#111!important;color:#fff!important}
  :root[data-template="fashion"] .add:hover{background:var(--brand)!important}
  :root[data-template="fashion"] .stepper{border-radius:0}
  :root[data-template="fashion"] #homeView .trendttl,:root[data-template="fashion"] #homeView h2{font-family:'Barlow Condensed',Inter,sans-serif;text-transform:uppercase;letter-spacing:.5px}

  /* ============ FASHION PREMIUM HOMEPAGE (#fashionHome) — Adidas/Nike/Apple caliber ============ */
  :root[data-template="fashion"] #homeView>:not(#fashionHome){display:none!important}   /* hide the classic sections */
  :root:not([data-template="fashion"]) #fashionHome{display:none}
  :root[data-template="fashion"] #fashionHome{display:block}
  :root[data-template="fashion"] #fashionHome{--fx:#111;--fx2:#666;--fline:#eaeaea;font-family:Inter,system-ui,sans-serif;color:var(--fx);margin:0 -20px}
  :root[data-template="fashion"] .fwrap{max-width:1460px;margin:0 auto;padding:0 clamp(16px,4vw,52px)}
  :root[data-template="fashion"] .fsec{padding:clamp(46px,6.5vw,88px) 0}
  :root[data-template="fashion"] .fhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
  :root[data-template="fashion"] .fhead h2{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(26px,3.4vw,44px);font-weight:800;text-transform:uppercase;letter-spacing:-.5px;line-height:1;margin:0}
  :root[data-template="fashion"] .fhead p{color:var(--fx2);font-size:14px;margin:6px 0 0}
  :root[data-template="fashion"] .flink{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;text-decoration:underline;text-underline-offset:5px;cursor:pointer;white-space:nowrap;color:var(--fx);background:none;border:0}
  :root[data-template="fashion"] .fbtn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#111;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:15px 30px;border:0;cursor:pointer;transition:.2s;border-radius:0}
  :root[data-template="fashion"] .fbtn:hover{background:var(--brand);color:#fff}
  :root[data-template="fashion"] .fbtn.dark{background:#111;color:#fff}
  :root[data-template="fashion"] .fbtn.dark:hover{background:var(--brand)}
  :root[data-template="fashion"] .fbtn.ghost{background:transparent;color:#fff;border:2px solid #fff}
  :root[data-template="fashion"] .fbtn.ghost:hover{background:#fff;color:#111}
  /* hero */
  :root[data-template="fashion"] .fhero2{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:#0a0a0c}
  :root[data-template="fashion"] .fhero2-bg{position:absolute;inset:0;display:grid;place-items:center}
  :root[data-template="fashion"] .fhero2-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.12) 55%,rgba(0,0,0,.4))}
  :root[data-template="fashion"] .fhero2-bg img{width:min(720px,90%);max-height:88%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));transform:rotate(-9deg) scale(1.02);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  :root[data-template="fashion"] .fhero2:hover .fhero2-bg img{transform:rotate(-6deg) scale(1.06)}
  :root[data-template="fashion"] .fhero2-in{position:relative;z-index:2;padding:clamp(26px,6vw,74px);max-width:780px;color:#fff}
  :root[data-template="fashion"] .feye{display:inline-block;background:var(--brand);color:#fff;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;margin-bottom:18px}
  :root[data-template="fashion"] .fhero2-in h1{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(46px,8.5vw,108px);line-height:.88;font-weight:800;text-transform:uppercase;letter-spacing:-1px;margin:0 0 16px}
  :root[data-template="fashion"] .fhero2-in p{font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.85);margin:0 0 26px;max-width:520px}
  /* featured collections */
  :root[data-template="fashion"] .fcolls{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
  :root[data-template="fashion"] .fcoll{position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer;background:#ececed}
  :root[data-template="fashion"] .fcoll img{width:100%;height:100%;object-fit:contain;padding:26px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  :root[data-template="fashion"] .fcoll:hover img{transform:scale(1.08)}
  :root[data-template="fashion"] .fcoll::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 52%)}
  :root[data-template="fashion"] .fcoll-t{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff}
  :root[data-template="fashion"] .fcoll-t b{font-family:'Barlow Condensed',Inter,sans-serif;display:block;font-size:26px;font-weight:800;text-transform:uppercase;line-height:1}
  :root[data-template="fashion"] .fcoll-t span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-decoration:underline;text-underline-offset:4px}
  /* category tiles */
  :root[data-template="fashion"] .fcats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  :root[data-template="fashion"] .fcat{background:#f6f6f7;border:1px solid var(--fline);padding:28px 18px;text-align:center;cursor:pointer;transition:.2s;font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:14px;color:var(--fx)}
  :root[data-template="fashion"] .fcat:hover{background:#111;color:#fff;border-color:#111;transform:translateY(-3px)}
  /* product cards */
  :root[data-template="fashion"] .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(10px,1.4vw,22px)}
  :root[data-template="fashion"] .frow{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px}
  :root[data-template="fashion"] .frow::-webkit-scrollbar{display:none}
  :root[data-template="fashion"] .frow>.fc{flex:0 0 clamp(220px,26vw,290px)}
  :root[data-template="fashion"] .fc{cursor:pointer}
  :root[data-template="fashion"] .fc-img{position:relative;aspect-ratio:1;background:#f4f4f5;overflow:hidden;margin-bottom:12px}
  :root[data-template="fashion"] .fc-img>img{width:100%;height:100%;object-fit:contain;padding:20px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  :root[data-template="fashion"] .fc:hover .fc-img>img{transform:scale(1.09)}
  :root[data-template="fashion"] .fc-noimg{width:100%;height:100%;display:grid;place-items:center;color:#c2c2c8;font-weight:800;text-transform:uppercase;font-size:13px}
  :root[data-template="fashion"] .fc-badge{position:absolute;top:10px;left:10px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;z-index:2}
  :root[data-template="fashion"] .fc-wish{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;background:#fff;border-radius:50%;cursor:pointer;z-index:3;color:#111;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.14);display:grid;place-items:center;transition:.2s}
  :root[data-template="fashion"] .fc-wish.on,:root[data-template="fashion"] .fc-wish:hover{color:var(--brand)}
  :root[data-template="fashion"] .fc-quick{position:absolute;left:10px;right:10px;bottom:10px;background:#111;color:#fff;border:0;padding:11px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s;z-index:2}
  :root[data-template="fashion"] .fc-img:hover .fc-quick{opacity:1;transform:none}
  :root[data-template="fashion"] .fc-quick:hover{background:var(--brand)}
  :root[data-template="fashion"] .fc-name{font-weight:700;font-size:14px;line-height:1.3}
  :root[data-template="fashion"] .fc-cat{color:var(--fx2);font-size:13px;margin:2px 0 6px}
  :root[data-template="fashion"] .fc-price{font-weight:800;font-size:15px}
  :root[data-template="fashion"] .fc-mrp{color:var(--fx2);font-weight:500;text-decoration:line-through;margin-left:8px;font-size:13px}
  /* carousel nav */
  :root[data-template="fashion"] .fnav{display:flex;gap:8px}
  :root[data-template="fashion"] .fnav button{width:44px;height:44px;border:1px solid #111;background:#fff;cursor:pointer;font-size:17px;transition:.2s;color:#111}
  :root[data-template="fashion"] .fnav button:hover{background:#111;color:#fff}
  /* story banner */
  :root[data-template="fashion"] .fstory{position:relative;min-height:min(66vh,540px);display:flex;align-items:center;overflow:hidden;background:linear-gradient(120deg,#0a0a0c,#1a1a20)}
  :root[data-template="fashion"] .fstory-in{position:relative;z-index:2;color:#fff;padding:clamp(28px,6vw,74px);max-width:660px}
  :root[data-template="fashion"] .fstory-in h2{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(34px,5.5vw,68px);font-weight:800;text-transform:uppercase;line-height:.94;margin:0 0 12px}
  :root[data-template="fashion"] .fstory-in p{font-size:17px;color:rgba(255,255,255,.82);margin:0 0 22px;max-width:460px}
  /* brand story split */
  :root[data-template="fashion"] .fbrand{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  :root[data-template="fashion"] .fbrand-img{min-height:440px;background:#ececed;overflow:hidden;display:grid;place-items:center}
  :root[data-template="fashion"] .fbrand-img img{width:82%;height:82%;object-fit:contain}
  :root[data-template="fashion"] .fbrand-tx{padding:clamp(28px,5vw,66px);display:flex;flex-direction:column;justify-content:center;background:#111;color:#fff}
  :root[data-template="fashion"] .fbrand-tx h2{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(30px,4vw,54px);font-weight:800;text-transform:uppercase;line-height:.98;margin:0 0 16px}
  :root[data-template="fashion"] .fbrand-tx p{font-size:16px;color:rgba(255,255,255,.78);line-height:1.7;margin:0 0 24px}
  /* reviews */
  :root[data-template="fashion"] .frevs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
  :root[data-template="fashion"] .frev{border:1px solid var(--fline);border-radius:16px;padding:26px;background:#fff}
  :root[data-template="fashion"] .frev-st{color:var(--brand);font-size:15px;letter-spacing:3px;margin-bottom:12px}
  :root[data-template="fashion"] .frev-tx{font-size:15px;line-height:1.6;margin-bottom:18px;color:#222}
  :root[data-template="fashion"] .frev-by{display:flex;align-items:center;gap:11px;font-size:13px}
  :root[data-template="fashion"] .frev-av{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:800}
  :root[data-template="fashion"] .frev-vf{color:#16a34a;font-weight:700;font-size:11px}
  /* community gallery */
  :root[data-template="fashion"] .fgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  :root[data-template="fashion"] .fgal a{position:relative;aspect-ratio:1;background:#f4f4f5;overflow:hidden;display:block;cursor:pointer}
  :root[data-template="fashion"] .fgal img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .4s}
  :root[data-template="fashion"] .fgal a:hover img{transform:scale(1.12)}
  /* newsletter */
  :root[data-template="fashion"] .fnl{background:#111;color:#fff;text-align:center;padding:clamp(48px,7vw,88px) 24px}
  :root[data-template="fashion"] .fnl h2{font-family:'Barlow Condensed',Inter,sans-serif;font-size:clamp(30px,4vw,54px);font-weight:800;text-transform:uppercase;margin:0 0 10px}
  :root[data-template="fashion"] .fnl p{color:rgba(255,255,255,.72);margin:0 0 24px}
  :root[data-template="fashion"] .fnl-form{display:flex;max-width:460px;margin:0 auto}
  :root[data-template="fashion"] .fnl-form input{flex:1;border:0;padding:15px 18px;font-size:15px;min-width:0}
  :root[data-template="fashion"] .fnl-form button{background:var(--brand);color:#fff;border:0;padding:0 26px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer}
  /* premium sticky header for fashion */
  :root[data-template="fashion"] .mainhead{position:sticky;top:0;z-index:60}
  @media(max-width:820px){
    :root[data-template="fashion"] .fbrand{grid-template-columns:1fr}
    :root[data-template="fashion"] .fbrand-img{min-height:300px}
    :root[data-template="fashion"] #fashionHome{margin:0 -14px}
  }
  /* ===== product detail: gallery + colour swatches + size selector ===== */
  .dtimgwrap{display:flex;flex-direction:column;gap:12px;position:relative}
  .dtimg.zoom img{cursor:zoom-in}
  .dtimgbtns{position:absolute;top:28px;right:28px;display:flex;gap:8px;z-index:3}
  .dtimgbtn{height:36px;min-width:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--ink);font-weight:800;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.16s;box-shadow:0 4px 12px rgba(0,0,0,.12)}
  .dtimgbtn svg{width:16px;height:16px}
  .dtimgbtn:hover{background:var(--brand);color:#fff;border-color:transparent;transform:translateY(-1px)}
  .dtthumbs{display:flex;flex-wrap:wrap;gap:10px;padding:0}
  .dtthumb{width:82px;height:82px;flex-shrink:0;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;padding:6px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
  .dtthumb:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.1)}
  .dtthumb.on{border-color:var(--brand);border-width:2px;box-shadow:0 0 0 2px rgba(var(--brand-rgb),.18)}
  .dtthumb:hover{transform:translateY(-2px)}
  .dtthumb img{width:100%;height:100%;object-fit:contain;transition:opacity .3s}
  .dtimg img{transition:opacity .35s,transform .12s ease-out}
  .dtimg.fade img{opacity:0}
  /* delivery / meta + tools */
  .dtmeta{margin-top:10px;display:flex;flex-direction:column;gap:7px}
  .dtmeta .dtm{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink)}
  .dtmeta .dtm svg{width:17px;height:17px;color:var(--brand);flex-shrink:0}
  .dtmeta .dtm b{font-weight:800}
  .dttools{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
  .dttool{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1.4px solid var(--line);border-radius:11px;padding:9px 15px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:.16s}
  .dttool svg{width:16px;height:16px}
  .dttool:hover{border-color:var(--brand);color:var(--brand)}
  .dttool.on{color:var(--red);border-color:var(--red)}
  /* rating breakdown */
  .rbreak{margin:6px 0 4px;display:flex;flex-direction:column;gap:5px;max-width:320px}
  .rbrow{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
  .rbrow .rbl{width:28px;font-weight:700;color:var(--ink)}
  .rbrow .rbbar{flex:1;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
  .rbrow .rbfill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--accent))}
  .rbrow .rbp{width:34px;text-align:right}
  .rvsum{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:12px 0 4px;border-top:1px solid var(--line);margin-top:12px}
  .rvsum-big{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:84px}
  .rvsum-big b{font-size:40px;font-weight:900;line-height:1;color:var(--ink)}
  .rvsum-st{color:#f5a623;letter-spacing:1px;font-size:15px}
  /* lightbox */
  .lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,9,17,.94);display:none;align-items:center;justify-content:center}
  .lightbox.show{display:flex;animation:lbin .2s}
  @keyframes lbin{from{opacity:0}to{opacity:1}}
  .lbstage{max-width:min(92vw,1000px);max-height:86vh;display:grid;place-items:center;touch-action:pan-y}
  .lbstage img{max-width:100%;max-height:86vh;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 20px 50px rgba(0,0,0,.6));animation:lbimg .28s}
  @keyframes lbimg{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  .lbclose{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;transition:.16s}
  .lbclose:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}
  .lbnav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:34px;line-height:1;cursor:pointer;transition:.16s;display:grid;place-items:center}
  .lbnav:hover{background:rgba(255,255,255,.24)}
  .lbprev{left:18px}.lbnext{right:18px}
  .lbcount{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:700;background:rgba(255,255,255,.12);padding:6px 16px;border-radius:20px}
  .lbhint{position:absolute;top:22px;left:24px;color:rgba(255,255,255,.7);font-size:12.5px;font-weight:600}
  @media(max-width:640px){.lbnav{width:44px;height:44px;font-size:26px}.lbclose{top:14px;right:16px}}
  .spinviewer{position:absolute;inset:0;z-index:2;background:var(--surface);cursor:ew-resize;display:grid;place-items:center}
  .spinviewer img{width:100%;height:100%;object-fit:contain;padding:24px;pointer-events:none}
  .spinhint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--muted);background:var(--bg);padding:5px 14px;border-radius:20px;border:1px solid var(--line)}
  .dtvsec{margin-top:12px}
  .dtvlab{font-size:13px;font-weight:700;margin-bottom:7px;color:var(--ink)}
  .dtsws{display:flex;gap:10px;flex-wrap:wrap}
  .dtsw{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--surface);cursor:pointer;padding:3px;transition:.15s}
  .dtsw:hover{transform:scale(1.06)}
  .dtsw.on{border-color:var(--brand);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand)}
  .dtsw span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
  .dtszs{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;max-width:370px}
  .dtsz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 0;min-height:48px;border:1.5px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer;color:var(--ink);transition:.15s}
  .dtsz b{font-size:14px;font-weight:700;line-height:1.1}
  .dtsz i{font-size:9px;font-weight:600;font-style:normal;color:var(--muted);line-height:1}
  .dtsz:hover{border-color:var(--ink)}
  .dtsz.on{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(var(--brand-rgb),.35)}
  .dtsz.on i{color:rgba(255,255,255,.75)}
  .dtsz.low{border-color:#f0b357}
  .dtsz.low i{color:#d97706}
  .dtsz.low.on i{color:rgba(255,255,255,.85)}
  .dtsz.out{color:var(--muted);cursor:not-allowed;border-color:var(--line);background:linear-gradient(to top left,transparent calc(50% - 1px),var(--red) calc(50% - 1px),var(--red) calc(50% + 1px),transparent calc(50% + 1px));opacity:.75;position:relative}
  .dtsz.out:hover{border-color:var(--line)}
  .dtsz.out::after{content:"✕";position:absolute;top:2px;right:4px;font-size:9px;color:var(--red);font-weight:800}
  .dtszhint{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .dtchip{display:inline-flex;align-items:center;gap:5px;background:rgba(var(--brand-rgb),.08);color:var(--ink);border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:600}
  .dtchip b{font-weight:800}
  .dtchip.warn{background:rgba(225,29,72,.09);color:#e11d48}
  .dtszhint b{color:var(--red)}
  /* ===== fashion faceted filters ===== */
  :root[data-template="fashion"] .fshoplayout{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start}
  :root[data-template="fashion"] .ffilters{position:sticky;top:78px}
  :root[data-template="fashion"] .ffgroup{border-bottom:1px solid var(--fline);padding:15px 0}
  :root[data-template="fashion"] .ffgroup h4{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin:0 0 11px}
  :root[data-template="fashion"] .ffchk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;cursor:pointer;color:#333}
  :root[data-template="fashion"] .ffchk input{width:16px;height:16px;accent-color:#111;cursor:pointer;margin:0}
  :root[data-template="fashion"] .ffcolors{display:flex;flex-wrap:wrap;gap:9px}
  :root[data-template="fashion"] .ffcol{width:30px;height:30px;border-radius:50%;border:2px solid #ddd;background:#fff;cursor:pointer;padding:2px;transition:.15s}
  :root[data-template="fashion"] .ffcol.on{border-color:#111}
  :root[data-template="fashion"] .ffcol span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
  :root[data-template="fashion"] .ffsizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px}
  :root[data-template="fashion"] .ffsz{padding:9px 0;border:1.5px solid #ddd;background:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:13px;transition:.15s}
  :root[data-template="fashion"] .ffsz.on{background:#111;color:#fff;border-color:#111}
  @media(max-width:820px){
    :root[data-template="fashion"] .fshoplayout{grid-template-columns:1fr}
    :root[data-template="fashion"] .ffilters{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 20px}
  }
  /* ===== classic shop sidebar + shared filters + template switcher + hide toggle ===== */
  .shopwrap{max-width:1680px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}
  .shopside{position:sticky;top:16px}
  .filters-off .shopwrap{grid-template-columns:1fr}
  .filters-off .shopside{display:none}
  :root.filters-off[data-template="fashion"] .fshoplayout{grid-template-columns:1fr}
  :root.filters-off[data-template="fashion"] .ffilters{display:none}
  @media(max-width:820px){.shopwrap{grid-template-columns:1fr}.shopside{position:static;margin-bottom:14px}}
  .shopside .ffgroup{border-bottom:1px solid var(--line);padding:14px 0}
  .shopside .ffgroup h4{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;color:var(--ink)}
  .fhwrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
  .fhwrap b{font-size:15px;color:var(--ink)}
  .fhhide{background:none;border:0;color:var(--brand);font-weight:700;cursor:pointer;font-size:12.5px}
  .shopside .ffchk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;cursor:pointer;color:var(--ink)}
  .shopside .ffchk input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0}
  .shopside .ffcolors{display:flex;flex-wrap:wrap;gap:9px}
  .shopside .ffcol{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--surface);cursor:pointer;padding:2px}
  .shopside .ffcol.on{border-color:var(--brand)}
  .shopside .ffcol span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
  .shopside .ffsizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px}
  .shopside .ffsz{padding:9px 0;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;cursor:pointer;font-weight:700;font-size:13px}
  .shopside .ffsz.on{background:var(--brand);color:#fff;border-color:var(--brand)}
  .toolacts{display:flex;gap:12px;flex-wrap:nowrap}
  .filttgl{min-width:0;white-space:nowrap;height:44px;padding:0 18px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1.6px solid var(--brand);color:var(--brand);font-weight:600;font-size:13.5px;cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s,border-color .18s}
  .filttgl svg{width:18px;height:18px;flex-shrink:0}
  .filttgl:hover{background:rgba(var(--brand-rgb),.08);transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--brand-rgb),.2)}
  @media(max-width:600px){.toolacts{flex:1 1 100%;gap:12px}.filttgl{flex:1;min-width:0}}
  .catcount{font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;margin-right:6px;letter-spacing:.1px}
  .catcount b,.catcount strong{color:var(--ink);font-weight:800}
  .heroprod{display:grid;place-items:center;height:100%;min-height:300px;position:relative}
  .heroprod img{width:min(460px,88%);max-height:340px;object-fit:contain;filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));animation:heroFloat 4s ease-in-out infinite}
  @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .bfeats{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0 20px}
  .bfeat{display:flex;align-items:center;gap:9px}
  .bfeat .bfi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--accent)}
  .bfeat .bfi svg{width:17px;height:17px}
  .bfeat .bft b{display:block;font-size:13px;color:#fff;font-weight:700;line-height:1.1}
  .bfeat .bft small{font-size:11px;color:rgba(255,255,255,.6)}
  .bdots{display:flex;gap:9px;margin-top:22px}
  .bdots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .25s,background .25s}
  .bdots button.on{width:26px;border-radius:6px;background:var(--accent)}
  #heroEyebrow,#heroTitle,#heroSub{animation:heroSlideIn .55s cubic-bezier(.2,.7,.2,1)}
  @keyframes heroSlideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* admin hero slide image (carousel) */
  .heroslide{width:100%;min-height:360px;height:100%;display:grid;place-items:center;animation:heroImgIn .6s cubic-bezier(.2,.7,.2,1)}
  .heroslide img{width:100%;max-width:760px;height:360px;max-height:400px;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.04);filter:drop-shadow(0 24px 46px rgba(0,0,0,.4))}
  @keyframes heroImgIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
  @media(max-width:1080px){.heroslide{display:none}}
  .herogrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;width:100%;min-height:300px}
  .hgcell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:.2s;padding:12px}
  .hgcell:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.5)}
  .hgcell img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
  @media(max-width:820px){.herogrid{min-height:200px;gap:8px}}
  .trustbar{max-width:1680px;margin:22px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .trustbar>.tb{display:flex;align-items:center;gap:14px;padding:20px 22px;background:linear-gradient(150deg,var(--surface),rgba(var(--brand-rgb),.05));border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
  .trustbar>.tb::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--brand),var(--accent));opacity:0;transition:opacity .22s}
  .trustbar>.tb:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(var(--brand-rgb),.16);border-color:rgba(var(--brand-rgb),.4)}
  .trustbar>.tb:hover::before{opacity:1}
  .tb .tbi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;flex-shrink:0;box-shadow:0 8px 18px rgba(var(--brand-rgb),.32);transition:transform .22s}
  .trustbar>.tb:hover .tbi{transform:scale(1.08) rotate(-4deg)}
  .tb .tbi svg{width:22px;height:22px}
  .tb b{display:block;font-size:14.5px;color:var(--ink);font-weight:800}
  .tb small{font-size:12px;color:var(--muted)}
  @media(max-width:820px){.trustbar{grid-template-columns:repeat(2,1fr);gap:12px}}
  @media(max-width:480px){.trustbar{grid-template-columns:1fr}}
  .shopmain{min-width:0}
  .pricerange{padding:4px 2px}
  .prvals{font-size:13px;color:var(--ink);margin-bottom:14px;font-weight:600}
  .prvals b{font-weight:800}
  .prslider{position:relative;height:28px}
  .prtrack{position:absolute;top:12px;left:0;right:0;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
  .prfill{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--brand);border-radius:4px}
  .prslider input[type=range]{position:absolute;top:0;left:0;width:100%;height:28px;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;margin:0}
  .prslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.22)}
  .prslider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;pointer-events:auto}
  .cdots{display:flex;gap:6px;align-items:center;margin-top:9px}
  .cdot{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);border:2px solid #fff}
  .cmore{font-size:11px;color:var(--muted);font-weight:700;margin-left:2px}
  .card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(15,23,42,.16);border-color:rgba(var(--brand-rgb),.3)}
  .activefilters{display:none;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
  .afchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s}
  .afchip b{color:var(--muted);font-weight:700;font-size:11px}
  .afchip:hover{border-color:var(--brand)} .afchip:hover b{color:var(--brand)}
  .afclear{background:none;border:0;color:var(--brand);font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline;margin-left:4px}
  .shopside .ffgroup h4{cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center}
  .shopside .ffgroup h4::after{content:'–';font-weight:400;color:var(--muted);font-size:16px}
  .shopside .ffgroup.collapsed h4::after{content:'+'}
  .shopside .ffgroup.collapsed .ffbody{display:none}
  .shopside .ffchk{justify-content:space-between}
  .shopside .ffchk span{display:flex;align-items:center;gap:9px}
  .shopside .ffchk i{color:var(--muted);font-style:normal;font-size:12.5px;font-weight:600}
  .shopside .ffrad{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:5px 0;font-size:14px;cursor:pointer;color:var(--ink)}
  .shopside .ffrad span{display:flex;align-items:center;gap:8px}
  .shopside .ffrad input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0}
  .shopside .ffrad i{color:var(--muted);font-style:normal;font-size:12.5px;font-weight:600}
  .shopside .ffstars{color:#f5a623;letter-spacing:1px;font-size:13px}
  /* mobile offcanvas filter drawer */
  .filtbackdrop{display:none}
  .drawerapply{display:none}
  @media(max-width:820px){
    .shopside{position:fixed !important;top:0;left:0;height:100dvh;width:min(88vw,350px);background:var(--bg);z-index:1200;transform:translateX(-100%);transition:transform .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding:16px 16px 90px;margin:0 !important;box-shadow:0 0 44px rgba(0,0,0,.34)}
    :root.filters-open .shopside{transform:none}
    .filters-off .shopside{display:block}
    .filtbackdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1199;opacity:0;visibility:hidden;transition:opacity .3s}
    :root.filters-open .filtbackdrop{opacity:1;visibility:visible}
    :root.filters-open{overflow:hidden}
    .drawerapply{display:block;position:fixed;bottom:0;left:0;width:min(88vw,350px);z-index:1201;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line);transform:translateX(-100%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
    :root.filters-open .drawerapply{transform:none}
    .drawerapply button{width:100%;height:48px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
    .fhwrap b{font-size:18px}
  }
  .tplsw{display:inline-flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
  .tplsw>span{font-size:10.5px;color:var(--muted);padding:0 5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
  .tplsw button{border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:700;padding:6px 9px;border-radius:7px;cursor:pointer}
  .tplsw button.on{background:var(--brand);color:#fff}
  .tplsw .tplreset{color:var(--muted);font-size:14px}
  .skutag{position:absolute;top:8px;left:8px;background:rgba(15,23,42,.65);color:#fff;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.4px}
  .off{position:absolute;top:8px;right:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px}
  .cbody{padding:9px 12px 11px;display:flex;flex-direction:column;gap:4px;flex:1}
  .pname{font-weight:650;font-size:12.5px;line-height:1.28;min-height:31px;color:var(--ink)}
  .rating{display:inline-flex;align-items:center;gap:7px;font-size:12px}
  .stars{display:inline-flex;align-items:center;gap:3px;background:var(--green);color:#fff;font-weight:700;padding:2px 7px;border-radius:5px;font-size:11.5px}
  .stars svg{width:11px;height:11px}
  .rcount{color:var(--muted)}
  .prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin-top:2px}
  .price{font-size:17px;font-weight:800;letter-spacing:-.4px}
  .mrp{color:var(--muted);text-decoration:line-through;font-size:12px}
  .disc{color:var(--green);font-size:11.5px;font-weight:700}
  .stk{font-size:11px;font-weight:600}
  .stk.in{color:var(--green)} .stk.low{color:#b45309} .stk.out{color:var(--red)}
  .cardfoot{margin-top:auto;padding-top:7px}
  .add{width:100%;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-weight:700;padding:8px;border-radius:9px;cursor:pointer;font-size:13px;transition:.18s;box-shadow:0 6px 16px rgba(0,0,0,.2)}
  .add:hover{box-shadow:0 12px 26px rgba(124,58,237,.5);transform:translateY(-1px)}
  .add:disabled{background:#eef0f5;color:#9aa3b2;cursor:not-allowed}
  .stepper{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--brand);border-radius:10px;overflow:hidden}
  .stepper button{border:0;background:var(--brand-tint);color:var(--brand-d);font-weight:800;width:40px;height:40px;cursor:pointer;font-size:18px}
  .stepper button:hover{background:#e0e4ff}
  .qin{flex:1;min-width:0;height:40px;border:0;text-align:center;font-size:15px;font-weight:700;color:var(--ink);outline:none;-moz-appearance:textfield;background:#fff}
  .qin::-webkit-outer-spin-button,.qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

  /* ---------- drawer / overlay ---------- */
  .overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;pointer-events:none;transition:.25s;z-index:50}
  .overlay.show{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:var(--surface);z-index:60;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
  .drawer.show{transform:none}
  .dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
  .dhead h3{margin:0;font-size:17px}
  .x{border:0;background:#f1f3f9;width:32px;height:32px;border-radius:9px;font-size:15px;cursor:pointer;color:var(--muted)}
  .ditems{flex:1;overflow:auto;padding:6px 20px}
  .drow{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .dthumb{width:48px;height:48px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
  .dthumb svg{width:26px;height:26px}
  .drow .nm{flex:1;font-size:13.5px;font-weight:650}
  .drow .nm small{display:block;color:var(--muted);font-weight:500;margin-top:2px}
  .drow .stepper{width:118px}.drow .stepper button{width:34px;height:36px;font-size:16px}.drow .qin{height:36px}
  .dcol{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .drem{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11.5px;font-weight:600;padding:2px 4px;border-radius:6px}
  .drem:hover{color:var(--red)}
  .dfoot{border-top:1px solid var(--line);padding:18px 20px;background:var(--bg)}
  :root[data-theme="dark"] .dfoot{background:rgba(255,255,255,.03)}
  .total{display:flex;justify-content:space-between;font-weight:800;font-size:19px;margin-bottom:12px}
  label.lbl{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-top:6px}
  select{width:100%;padding:11px;border-radius:10px;border:1px solid var(--line);font-size:14px;margin:5px 0 12px;background:#fff;color:var(--ink)}
  .place{width:100%;border:0;background:var(--brand);color:#fff;font-weight:800;padding:14px;border-radius:11px;cursor:pointer;font-size:15px}
  .place:hover{background:var(--brand-d)}
  .place:disabled{background:#eef0f5;color:#9aa3b2;cursor:not-allowed}

  /* ---------- sections ---------- */
  .section{max-width:1680px;margin:34px auto 0;padding:0 20px}
  .section h2{font-size:20px;margin:0 0 14px;letter-spacing:-.3px}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  .panel h3{margin:0 0 12px;font-size:15px}
  .ops{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
  @media(max-width:920px){.ops{grid-template-columns:1fr}.bar{flex-wrap:wrap}.search{order:3;max-width:100%;flex-basis:100%}}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
  th{color:var(--muted);font-weight:600}
  .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px}
  .t-placed{background:#fef3c7;color:#92400e}.t-accepted,.t-delivered{background:var(--green-tint);color:#065f46}
  .t-pending{background:var(--brand-tint);color:#3730a3}.t-failed{background:#ffe4e6;color:#9f1239}
  .refresh{float:right;font-size:12px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:9px;padding:5px 11px;cursor:pointer}

  /* ---------- order lifecycle ---------- */
  .ordcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:14px;transition:box-shadow .18s,transform .18s}
  .ordcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
  .ordtop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
  .ordid{font-weight:700;font-size:14px}.ordid small{color:var(--muted);font-weight:500}
  .ordamt{font-weight:800;font-size:17px}
  .steps{display:flex;align-items:flex-start;margin:18px 0 6px}
  .step{flex:1;text-align:center;position:relative;font-size:11.5px;color:var(--muted)}
  .step .bub{width:30px;height:30px;border-radius:50%;background:#e6e8f0;color:#fff;display:grid;place-items:center;margin:0 auto 6px;font-weight:700;position:relative;z-index:2}
  .step .bub svg{width:15px;height:15px}
  .step::before{content:'';position:absolute;top:15px;left:-50%;width:100%;height:3px;background:#e6e8f0;z-index:1}
  .step:first-child::before{display:none}
  .step.done .bub{background:var(--green)} .step.done{color:var(--green);font-weight:700} .step.done::before{background:var(--green)}
  .step.active .bub{background:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)} .step.active{color:var(--brand);font-weight:700}
  .ordact{margin-top:14px}
  .btn{border:0;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;font-size:13.5px}
  .btn.dispatch{background:var(--brand);color:#fff}.btn.dispatch:hover{background:var(--brand-d)}
  .btn.deliver{background:var(--green);color:#fff}
  .btn:disabled{background:#eef0f5;color:#9aa3b2;cursor:not-allowed}
  .waiting{font-size:12.5px;color:#b45309;font-weight:600}
  .inv{background:var(--brand-tint);border:1px dashed #c7d2fe;border-radius:10px;padding:9px 13px;font-size:12.5px;margin-top:12px;display:inline-block;color:#3730a3}
  .oaddr{font-size:12.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-top:10px}
  .ordacts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
  .ordbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;cursor:pointer}
  .ordbtn:hover{background:var(--brand-tint);border-color:var(--brand)}
  .ordbtn.cancel{color:var(--red)}.ordbtn.cancel:hover{background:#fee2e2;border-color:var(--red)}
  .oitems{margin:14px 0 2px;border-top:1px dashed var(--line);padding-top:12px}
  .oitgl{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:.15s}
  .oitgl:hover{background:var(--brand-tint);border-color:var(--brand)}
  .oitgl .chev{transition:transform .2s;color:var(--muted)}
  .oitgl .chev.up{transform:rotate(180deg)}
  .oilist{display:flex;flex-direction:column;margin-top:8px}
  .ovar{display:inline-block;background:var(--brand-tint);color:var(--brand-d);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;margin-left:4px}
  .oitem{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .oitem .othbox{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center}
  .oitem .othimg{width:100%;height:100%;object-fit:cover}
  .oitem .othnum{font-weight:800;color:var(--muted);font-size:14px}
  .oitem .oin{flex:1;min-width:0;font-size:13.5px;font-weight:600}
  .oitem .oin small{display:block;color:var(--muted);font-weight:500;font-size:11.5px;margin-top:1px}
  .oitem .oip{font-weight:800;font-size:14px;white-space:nowrap;padding-left:10px}
  .oitot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;margin-top:4px;font-size:14px;font-weight:700}
  .oitot b{font-size:17px}

  /* ---------- login / register ---------- */
  /* full-screen store loader — hides the guest/default store from flashing before the real tenant loads */
  .storeloader{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:var(--bg,#0b1020);opacity:1;transition:opacity .3s ease}
  .storeloader.show{display:flex}
  .storeloader.hide{opacity:0}
  .sl-spin{width:46px;height:46px;border-radius:50%;border:4px solid rgba(var(--brand-rgb,124,58,237),.20);border-top-color:var(--brand,#7c3aed);animation:slspin .7s linear infinite}
  @keyframes slspin{to{transform:rotate(360deg)}}
  /* ===== customer sign in / sign up modal (normal, theme-aware) ===== */
  .custwrap{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,18,40,.55);backdrop-filter:blur(4px)}
  .custcard{position:relative;width:100%;max-width:420px;background:var(--surface,#fff);color:var(--ink,#0f172a);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.42);padding:28px 26px}
  .custx{position:absolute;top:12px;right:14px;border:0;background:transparent;color:var(--muted,#94a3b8);font-size:18px;cursor:pointer;line-height:1;padding:6px;border-radius:8px}
  .custx:hover{background:rgba(0,0,0,.06)}
  .cust-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;margin-bottom:16px;color:var(--ink,#0f172a)}
  .cust-lg{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand,#7c3aed),var(--brand-d,#5b46e0));display:grid;place-items:center;color:#fff}
  .cust-lg svg{width:18px;height:18px}
  .cust-prompt{background:rgba(var(--brand-rgb,124,58,237),.12);color:var(--brand,#6d28d9);border-radius:10px;padding:9px 12px;font-size:12.8px;font-weight:600;margin-bottom:14px}
  .cust-tabs{display:flex;background:var(--bg,#f1f2f8);border-radius:12px;padding:4px;margin-bottom:16px}
  .cust-tab{flex:1;border:0;background:transparent;padding:9px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--muted,#64748b);cursor:pointer;transition:.15s}
  .cust-tab.on{background:var(--surface,#fff);color:var(--brand,#4f46e5);box-shadow:0 2px 8px rgba(15,23,42,.08)}
  .cust-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--muted,#475569);margin:10px 0 5px}
  .cust-mut{font-weight:400;color:var(--muted,#94a3b8)}
  .cust-if{position:relative}
  .cust-in{width:100%;height:44px;border:1px solid var(--line,#e2e8f0);border-radius:11px;padding:0 14px;font-size:14.5px;background:var(--surface,#fff);color:var(--ink,#0f172a);outline:none;transition:.15s}
  .cust-in:focus{border-color:var(--brand,#7c6cf7);box-shadow:0 0 0 3px rgba(var(--brand-rgb,124,58,237),.16)}
  .cust-if.pw .cust-in{padding-right:44px}
  .cust-eye{position:absolute;right:8px;top:7px;border:0;background:transparent;cursor:pointer;font-size:15px;padding:5px;border-radius:8px;opacity:.7}
  .cust-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cust-row>div{min-width:0}
  .cust-err{color:#dc2626;font-size:12.5px;min-height:16px;margin-top:8px}
  .cust-dev{font-size:11.5px;color:var(--muted,#94a3b8);text-align:center;margin-top:10px}
  .cust-btn{width:100%;height:46px;border:0;border-radius:12px;margin-top:12px;background:linear-gradient(90deg,var(--brand,#4f46e5),var(--brand-2,#7c3aed));color:#fff;font-weight:800;font-size:15px;cursor:pointer;transition:.15s}
  .cust-btn:hover{filter:brightness(1.07)}
  .cust-alt{text-align:center;font-size:12.8px;color:var(--muted,#64748b);margin-top:14px}
  .cust-link{color:var(--brand,#6366f1);font-weight:700;cursor:pointer}
  .cust-foot{text-align:center;font-size:12px;color:var(--muted,#94a3b8);margin-top:16px;border-top:1px solid var(--line,#eef2f7);padding-top:14px}
  @media(max-width:480px){.cust-row{grid-template-columns:1fr}}
  .loginwrap{position:fixed;inset:0;z-index:100;background:radial-gradient(900px 480px at 15% -10%,rgba(124,58,237,.4),transparent),linear-gradient(135deg,#1e3a8a,#312e81 55%,#1e1b4b);display:grid;place-items:center;padding:20px;overflow:auto}
  .logincard{background:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:34px 32px;width:100%;max-width:410px;color:#e8ecf8}
  .logincard .muted{color:rgba(232,236,248,.6)}
  .logincard .lbl{color:rgba(232,236,248,.72)}
  .lbrand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:2px}
  .lbrand .logo{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center}.lbrand .logo svg{width:19px;height:19px;color:#fff}
  .lwelcome{text-align:center;font-size:26px;font-weight:800;color:#fff;letter-spacing:-.6px;margin:14px 0 2px}
  .ifield{position:relative}
  .ifield>svg{position:absolute;left:14px;top:13px;width:16px;height:16px;color:rgba(232,236,248,.55);pointer-events:none}
  .linput{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;font-size:14px;margin-bottom:12px;outline:none;transition:.15s;background:rgba(255,255,255,.06);color:#fff}
  .ifield .linput{padding-left:42px}
  .linput::placeholder{color:rgba(232,236,248,.5)}
  .linput:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.25);background:rgba(255,255,255,.1)}
  select.linput option{color:#0f172a}
  /* sign-up business-type multi-select */
  .indpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 14px}
  .indpick label{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.06);cursor:pointer;font-size:13px;color:#fff;transition:.15s}
  .indpick label:hover{border-color:#818cf8;background:rgba(255,255,255,.1)}
  .indpick input{accent-color:#818cf8;width:15px;height:15px;flex:none;margin:0}
  .indpick label:has(input:checked){border-color:#818cf8;background:rgba(129,140,248,.2)}
  @media(max-width:420px){.indpick{grid-template-columns:1fr}}
  /* password show/hide eye */
  .pwfield{position:relative}
  .ifield.pwf .linput,.pwfield .linput{padding-right:44px}
  .ifield.pwf .pweye,.pwfield .pweye{position:absolute;right:8px;top:9px;border:0;background:transparent;-webkit-appearance:none;appearance:none;box-shadow:none;cursor:pointer;color:#334155;padding:5px;display:grid;place-items:center;border-radius:8px}
  .ifield.pwf .pweye:hover,.pwfield .pweye:hover{color:#0f172a}
  .ifield.pwf .pweye svg,.pwfield .pweye svg{display:block}
  /* login card: light input fields so text, left icons & the eye are always readable (matches browser autofill) */
  .logincard .linput{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.14)}
  .logincard .linput::placeholder{color:#94a3b8}
  .logincard .linput:focus{background:#fff;border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.22)}
  .logincard select.linput option{color:#0f172a}
  .logincard .ifield>svg{color:#94a3b8}
  .lerr.ok{color:#86efac}
  .regtrial{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.3);color:#bbf7d0;border-radius:10px;padding:9px 12px;font-size:12px;margin:2px 0 12px;line-height:1.5}
  /* signup captcha */
  .caprow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .capbox{flex:1;height:46px;border-radius:10px;background:repeating-linear-gradient(45deg,#eef2ff,#eef2ff 6px,#e2e8f0 6px,#e2e8f0 12px);color:#1e293b;display:flex;align-items:center;justify-content:center;gap:3px;user-select:none;letter-spacing:2px;font-family:"Barlow Condensed",Georgia,serif;border:1px solid rgba(0,0,0,.12);overflow:hidden}
  .capref{width:44px;height:46px;flex-shrink:0;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;font-size:18px;cursor:pointer;transition:.15s}
  .capref:hover{background:rgba(255,255,255,.16)}
  /* store-owner free-trial reminder bar (top of storefront) */
  .trialbar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 44px 9px 16px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--brand,#6d5cf5),var(--brand-d,#4f46e5));box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .trialbar.urgent{background:linear-gradient(90deg,#f97316,#ea580c)}
  .trialbar .tbmsg b{font-weight:800}
  .trialbar .tbbtn{background:rgba(255,255,255,.2);color:#fff;text-decoration:none;padding:5px 13px;border-radius:8px;font-weight:700;font-size:12.5px;white-space:nowrap;transition:.15s}
  .trialbar .tbbtn:hover{background:rgba(255,255,255,.32)}
  .trialbar .tbx{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:rgba(255,255,255,.85);font-size:15px;cursor:pointer;line-height:1;padding:4px}
  .trialbar .tbx:hover{color:#fff}
  @media(max-width:560px){.trialbar{flex-direction:column;gap:7px;padding:9px 40px 9px 12px;font-size:12px}}
  .lbtn{width:100%;border:0;background:linear-gradient(90deg,#4f83f1,#6366f1);color:#fff;font-weight:800;padding:13px;border-radius:12px;cursor:pointer;font-size:15px;transition:.15s;box-shadow:0 10px 26px rgba(79,70,229,.42)}
  .lbtn:hover{filter:brightness(1.08)}
  .lerr{color:#fecaca;font-size:12.5px;margin-bottom:8px;min-height:16px}
  .ldiv{text-align:center;color:rgba(232,236,248,.6);font-size:12px;margin:18px 0 12px;display:flex;align-items:center;gap:10px}
  .ldiv::before,.ldiv::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14)}
  .accts{display:flex;flex-direction:column;gap:9px}
  .acct{display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 13px;cursor:pointer;background:rgba(255,255,255,.05);transition:.15s;color:#e8ecf8}
  .acct:hover{border-color:#818cf8;background:rgba(255,255,255,.1)}
  .acct .av{width:34px;height:34px;border-radius:9px;background:rgba(129,140,248,.25);color:#c7d2fe;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
  .acct b{font-size:13.5px;display:block;color:#fff}.acct small{color:rgba(232,236,248,.6);font-size:11.5px}
  .link{color:#a5b4fc;cursor:pointer;font-weight:700}
  .socialbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-weight:700;font-size:14px;padding:12px;border-radius:12px;cursor:pointer;margin-bottom:11px;transition:.15s}
  .socialbtn:hover{background:rgba(255,255,255,.13)}
  .socialbtn svg{width:19px;height:19px}
  .socialbtn.google{background:#fff;color:#1f2937;border-color:#fff}
  .socialbtn.google:hover{background:#eef1f7}
  .otpnote{background:rgba(52,211,153,.16);color:#bbf7d0;border:1px solid rgba(52,211,153,.3);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:12px;line-height:1.5}

  /* ===================== SPLIT SIGN-UP / LOGIN ===================== */
  .loginwrap{place-items:center}
  .losplit{width:100%;max-width:1160px;display:grid;grid-template-columns:0.82fr 1fr;align-items:stretch;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.55);margin:auto;max-height:94vh}
  /* --- left brand column --- */
  .lo-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:32px 32px 28px;color:#e7ecfb;background:linear-gradient(165deg,rgba(10,14,55,.42),rgba(22,12,66,.34) 48%,rgba(28,18,86,.5)),url(/img/bgimage.png) center/cover no-repeat #0d1230}
  .lo-brand>.lo-logo,.lo-brand>.lo-brandmid,.lo-brand>.lo-why{position:relative;z-index:2}
  .lo-fx{display:none}   /* uploaded bgimage.png already provides streaks, stars & grid */
  .lo-logo{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px}
  .lo-logo .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#7c3aed);display:grid;place-items:center;box-shadow:0 8px 20px rgba(124,58,237,.45)}
  .lo-logo .logo svg{width:20px;height:20px;color:#fff}
  .lo-brandmid{margin-top:22px}
  .lo-h1{font-size:29px;line-height:1.16;font-weight:800;letter-spacing:-.6px;margin:0 0 12px;color:#fff}
  .lo-h1 span{background:linear-gradient(90deg,#5aa2ff,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .lo-sub{font-size:13.5px;color:rgba(231,236,251,.72);line-height:1.6;max-width:330px;margin:0}
  .lo-hero{margin:10px 0 6px;min-height:150px;display:flex;align-items:center;justify-content:center}
  .lo-hero img{max-width:100%;max-height:280px;filter:drop-shadow(0 24px 44px rgba(0,0,0,.45))}
  .lo-hero.noimg{min-height:200px}
  .lo-hero.noimg::after{content:"🛒";font-size:96px;line-height:1;filter:drop-shadow(0 16px 34px rgba(124,58,237,.55))}
  .lo-why{margin-top:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 16px 10px}
  .lo-why-t{text-align:center;font-weight:800;color:#fff;font-size:14px;margin-bottom:13px}
  .lo-feats{display:flex;flex-direction:column;gap:13px}
  .lo-feat{display:flex;gap:12px;align-items:flex-start}
  .lo-fic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff}
  .lo-fic svg{width:19px;height:19px}
  .lo-fic.f1{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
  .lo-fic.f2{background:linear-gradient(135deg,#6366f1,#4338ca)}
  .lo-fic.f3{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
  .lo-fic.f4{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
  .lo-feat b{display:block;color:#fff;font-size:13.5px;font-weight:700;margin-bottom:1px}
  .lo-feat small{color:rgba(231,236,251,.62);font-size:12px;line-height:1.5}
  /* --- right form column --- */
  .lo-panel{background:#fff;padding:22px 32px 30px;display:flex;flex-direction:column;overflow:auto;min-height:0}
  .lo-panelbar{display:flex;justify-content:flex-end;margin-bottom:2px}
  .lo-back{background:#eef0fb;border:0;color:#4f46e5;border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
  .lo-back:hover{background:#e2e5f8}
  /* neutralise the dark glass card inside the white panel */
  .losplit .logincard{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;border-radius:0;padding:6px 4px 0;max-width:none;width:100%;color:#0f172a}
  .losplit .logincard .muted{color:#94a3b8}
  .losplit .logincard .lbl{color:#475569}
  .lo-formhead{text-align:center;margin:2px 0 18px}
  .lo-formhead h2{font-size:24px;font-weight:800;color:#0f172a;margin:0 0 4px;letter-spacing:-.4px}
  .lo-formhead p{color:#94a3b8;font-size:13px;margin:0 0 11px}
  .lo-formhead .lo-accent{display:inline-block;width:48px;height:3px;border-radius:3px;background:linear-gradient(90deg,#6366f1,#7c3aed)}
  /* light inputs */
  .losplit .linput{background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-radius:11px}
  .losplit .linput::placeholder{color:#a7b0c0}
  .losplit .linput:focus{background:#fff;border-color:#7c6cf7;box-shadow:0 0 0 3px rgba(124,108,247,.18)}
  .losplit .logincard .ifield>svg{color:#a7b0c0}
  .losplit select.linput option{color:#0f172a}
  /* business-type tiles (3-col) */
  .losplit .indpick{grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 14px}
  .losplit .indpick label{display:flex;align-items:center;gap:9px;border:1.5px solid #e6e8ef;background:#fff;color:#334155;border-radius:12px;padding:11px 12px;cursor:pointer;transition:.15s}
  .losplit .indpick label:hover{border-color:#c4b5fd;background:#faf9ff}
  .losplit .indpick label:has(input:checked){border-color:#7c6cf7;background:#f3f0ff}
  .losplit .ind-ic{font-size:17px;flex:none;line-height:1}
  .losplit .ind-t{flex:1;font-weight:600;font-size:12.5px;min-width:0}
  .losplit .indpick input{accent-color:#7c6cf7;width:16px;height:16px;flex:none;margin:0}
  /* two-column field rows */
  .lo-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .lo-row>div{min-width:0}
  .lo-caprow{align-items:end}
  .lo-caprow .caprow{margin:0}
  .losplit .capref{border:1px solid #e2e8f0;background:#f4f5fb;color:#475569}
  .losplit .capref:hover{background:#e9ebf6}
  /* green trial note (light) */
  .losplit .regtrial{background:#ecfdf3;border:1px solid #bbf7d0;color:#15803d}
  /* primary button + errors on light */
  .losplit .lbtn{background:linear-gradient(90deg,#4f46e5,#7c3aed);box-shadow:0 12px 26px rgba(79,70,229,.32)}
  .losplit .lerr{color:#dc2626}
  .losplit .ldiv{color:#94a3b8}
  .losplit .ldiv::before,.losplit .ldiv::after{background:#e6e8ef}
  .losplit .link{color:#6366f1}
  .losplit .socialbtn{border:1px solid #e6e8ef;background:#fbfbfe;color:#334155}
  .losplit .socialbtn:hover{background:#f3f4fb}
  .losplit .socialbtn.google{background:#fff;color:#1f2937;border-color:#e6e8ef}
  .losplit .otpnote{background:#ecfdf3;color:#15803d;border-color:#bbf7d0}
  .lo-terms{text-align:center;font-size:12px;color:#94a3b8;margin:13px 0 0}
  .lo-terms .link{color:#6366f1;font-weight:600}
  /* responsive: hide brand column, stack fields */
  @media(max-width:920px){
    .losplit{grid-template-columns:1fr;max-width:560px}
    .lo-brand{display:none}
    .lo-panel{max-height:none}
    .losplit .indpick{grid-template-columns:1fr 1fr}
    .lo-row{grid-template-columns:1fr}
  }
  @media(max-width:440px){ .losplit .indpick{grid-template-columns:1fr} }

  /* ---- premium polish: trust stats, glow, floating icons ---- */
  .lo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 6px}
  .lo-stats>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 8px;text-align:center}
  .lo-stats b{display:block;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.4px;background:linear-gradient(90deg,#7dd3fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .lo-stats span{display:block;font-size:10.5px;color:rgba(231,236,251,.62);margin-top:2px;font-weight:600}
  .lo-hero{position:relative}
  .lo-glow{position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.55),rgba(59,130,246,.28) 55%,transparent 72%);filter:blur(6px);z-index:0;animation:loglow 5s ease-in-out infinite}
  .lo-hero img{position:relative;z-index:1}
  .lo-float{position:absolute;z-index:2;font-size:22px;background:rgba(255,255,255,.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);border-radius:13px;width:42px;height:42px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
  .lo-float.fa{top:4%;left:2%;animation:lofloat 4.2s ease-in-out infinite}
  .lo-float.fb{top:0;right:8%;animation:lofloat 5s ease-in-out infinite .4s}
  .lo-float.fc{bottom:20%;left:-2%;animation:lofloat 4.6s ease-in-out infinite .8s}
  .lo-float.fd{bottom:4%;right:2%;animation:lofloat 5.2s ease-in-out infinite .2s}
  .lo-float.fe{top:42%;right:-3%;animation:lofloat 4s ease-in-out infinite .6s}
  .lo-hero.noimg .lo-glow{opacity:.7}
  @keyframes lofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes loglow{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
  /* feature checklist (6) */
  .lo-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .lo-feat{display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:600;color:rgba(231,236,251,.9)}
  .lo-chk{width:19px;height:19px;border-radius:6px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:none}
  .lo-feat b,.lo-feat small{all:unset}

  /* ---- sign-up wizard progress ---- */
  .lo-progress{position:relative;display:flex;justify-content:space-between;margin:2px 6px 20px}
  .rp-line{position:absolute;top:15px;left:34px;right:34px;height:3px;background:#e6e8ef;border-radius:3px;overflow:hidden}
  .rp-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#6366f1,#7c3aed);border-radius:3px;transition:width .35s ease}
  .rp-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
  .rp-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#fff;border:2px solid #e2e5ef;color:#a4adbd;transition:.25s}
  .rp-node em{font-style:normal;font-size:11px;font-weight:700;color:#a4adbd;transition:.2s}
  .rp-node.on .rp-dot{border-color:#7c3aed;color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.14)}
  .rp-node.on em{color:#4338ca}
  .rp-node.done .rp-dot{background:linear-gradient(135deg,#7c6cf7,#6366f1);border-color:transparent;color:#fff}
  .rp-node.done .rp-dot::after{content:"✓"}
  .rp-node.done .rp-dot{font-size:0}
  .rp-node.done .rp-dot::after{font-size:14px}
  .rp-node.done em{color:#6b7280}

  /* ---- tile tick animation (selected state) ---- */
  .losplit .indpick input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
  .ind-tick{width:20px;height:20px;border-radius:7px;border:1.6px solid #d7dbe6;color:transparent;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;margin-left:auto;transition:.15s;transform:scale(.92)}
  .losplit .indpick label{transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}
  .losplit .indpick label:has(input:checked){border-color:#7c6cf7;background:#f3f0ff;box-shadow:0 6px 16px rgba(124,108,247,.18);transform:translateY(-1px)}
  .losplit .indpick label:has(input:checked) .ind-tick{background:linear-gradient(135deg,#7c6cf7,#6366f1);border-color:transparent;color:#fff;transform:scale(1);animation:tickpop .28s}
  @keyframes tickpop{0%{transform:scale(.3)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

  /* ---- login: social row, remember-me, testimonial ---- */
  .lo-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .lo-social .socialbtn{margin-bottom:0}
  .lo-remrow{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 12px}
  .lo-remember{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#475569;font-weight:600;cursor:pointer}
  .lo-remember input{accent-color:#7c6cf7;width:15px;height:15px;margin:0}
  .lo-quote{margin-top:18px;background:#f7f7fd;border:1px solid #ececf7;border-radius:14px;padding:14px 15px 12px;position:relative}
  .lo-qmark{position:absolute;top:2px;left:12px;font-size:40px;line-height:1;color:#c9c6ef;font-family:Georgia,serif}
  .lo-quote p{margin:6px 0 10px;font-size:12.8px;color:#334155;line-height:1.55;font-style:italic;padding-left:6px}
  .lo-qby{display:flex;align-items:center;gap:9px}
  .lo-qav{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7c6cf7,#6366f1);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;flex:none}
  .lo-qby b{font-size:12.5px;color:#0f172a;display:block}
  .lo-qby small{font-size:11px;color:#94a3b8}
  .lo-qstars{margin-left:auto;color:#f5b301;font-size:12px;letter-spacing:1px}
  /* CTA subtext + step row */
  .lo-ctasub{text-align:center;font-size:12px;color:#94a3b8;margin:9px 0 0}
  .lo-steprow{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px}
  @media(max-width:920px){ .lo-stats{max-width:420px} }

  /* ============ PREMIUM LEFT-PANEL FX (Stripe / Framer / Linear vibe) ============ */
  .lo-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  /* faint grid, faded toward edges */
  .fx-grid{position:absolute;inset:-1px;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);opacity:.55}
  /* diagonal light streaks behind the illustration */
  .fx-streak{position:absolute;left:-30%;width:160%;height:140px;border-radius:50%;filter:blur(40px);opacity:.5}
  .fx-streak.s1{top:9%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.6),transparent);transform:rotate(-23deg)}
  .fx-streak.s2{top:50%;background:linear-gradient(90deg,transparent,rgba(139,92,246,.55),transparent);transform:rotate(-15deg)}
  /* soft glow orbs */
  .fx-orb{position:absolute;border-radius:50%;filter:blur(44px)}
  .fx-orb.o1{width:230px;height:230px;top:-72px;right:-64px;background:radial-gradient(circle,rgba(59,130,246,.6),transparent 70%);animation:fxpulse 7s ease-in-out infinite}
  .fx-orb.o2{width:320px;height:320px;top:34%;left:50%;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 70%);animation:fxpulseC 8s ease-in-out infinite .6s}
  .fx-orb.o3{width:280px;height:210px;bottom:-74px;left:50%;background:radial-gradient(circle,rgba(236,72,153,.34),transparent 70%);animation:fxpulseC 9s ease-in-out infinite 1s}
  .fx-orb.o4{width:170px;height:170px;top:20%;left:-56px;background:radial-gradient(circle,rgba(99,102,241,.55),transparent 70%);animation:fxpulse 7.5s ease-in-out infinite .3s}
  /* star particles / floating light dots */
  .fx-stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.85),transparent),radial-gradient(1.5px 1.5px at 72% 18%,rgba(255,255,255,.65),transparent),radial-gradient(1px 1px at 40% 68%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 86% 58%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 58% 84%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 30% 52%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 90% 34%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 12% 78%,rgba(255,255,255,.5),transparent);opacity:.7;animation:fxtwinkle 4.5s ease-in-out infinite}
  @keyframes fxpulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
  @keyframes fxpulseC{0%,100%{opacity:.72;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
  @keyframes fxtwinkle{0%,100%{opacity:.42}50%{opacity:.85}}
  /* neon ring + reflection beneath the laptop */
  .lo-glow{top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;background:radial-gradient(circle,rgba(139,92,246,.6),rgba(59,130,246,.3) 52%,transparent 72%);filter:blur(10px);animation:glowpulse 5.5s ease-in-out infinite}
  .lo-ring{position:absolute;bottom:11%;left:50%;transform:translateX(-50%);width:258px;height:64px;border-radius:50%;z-index:0;background:radial-gradient(ellipse at center,rgba(139,92,246,.75),rgba(59,130,246,.45) 44%,rgba(236,72,153,.3) 66%,transparent 76%);filter:blur(11px);opacity:.9;animation:ringpulse 6s ease-in-out infinite}
  @keyframes glowpulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.09);opacity:1}}
  @keyframes ringpulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.82}50%{transform:translateX(-50%) scale(1.06);opacity:1}}
  /* ambient radial glow behind the heading */
  .lo-h1{position:relative;z-index:0}
  .lo-h1::before{content:"";position:absolute;left:-8%;top:-34%;width:74%;height:168%;background:radial-gradient(circle,rgba(139,92,246,.4),transparent 70%);filter:blur(34px);z-index:-1;pointer-events:none}
  /* ambient light behind the logo */
  .lo-logo .logo{box-shadow:0 10px 28px rgba(124,58,237,.6),0 0 0 1px rgba(255,255,255,.08)}
  /* premium glass cards (stats + why) */
  .lo-stats>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 10px 26px rgba(8,12,50,.42),inset 0 1px 0 rgba(255,255,255,.14)}
  .lo-why{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 16px 40px rgba(8,12,50,.48),inset 0 1px 0 rgba(255,255,255,.12)}
  @media(prefers-reduced-motion:reduce){ .fx-orb,.fx-stars,.lo-ring,.lo-glow{animation:none} }

  /* ---------- payment / checkout modal (modernised) ---------- */
  .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:70;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:24px 24px 22px;width:100%;max-width:404px;max-height:92vh;overflow:auto;opacity:0;pointer-events:none;transition:.22s cubic-bezier(.34,1.3,.64,1)}
  .modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .modal h3{margin:0 0 4px;display:flex;align-items:center;gap:9px;font-size:18px;letter-spacing:-.3px}.modal h3 svg{width:20px;height:20px;color:var(--brand)}
  :root[data-theme="dark"] .modal{background:rgba(14,20,36,.94);backdrop-filter:blur(24px);border-color:rgba(139,92,246,.28);box-shadow:0 40px 100px rgba(0,0,0,.6)}
  .payamt{background:linear-gradient(135deg,var(--brand),var(--brand-d));border-radius:13px;padding:14px 16px;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;margin:14px 0;color:#fff;box-shadow:0 10px 24px rgba(124,58,237,.32)}
  .payamt b{font-size:22px;letter-spacing:-.5px}
  /* delivery address — clean card */
  .addrbox{margin:14px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px}
  :root[data-theme="dark"] .addrbox{background:rgba(255,255,255,.03);border-color:rgba(139,92,246,.18)}
  .albl{font-size:12.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;margin-bottom:9px}
  .addrbox textarea,.addrbox select{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px;font-size:14px;outline:none;background:var(--surface);color:var(--ink);resize:none;font-family:inherit;margin-bottom:8px;transition:.15s}
  .addrbox textarea:focus,.addrbox select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(139,92,246,.16)}
  .addrbox textarea::placeholder{color:var(--muted)}
  .savechk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer}
  .savechk input{width:15px;height:15px;accent-color:var(--brand)}
  .couponrow{display:flex;gap:8px;margin:12px 0 0}
  .couponrow input{flex:1;border:1.5px solid var(--line);border-radius:11px;padding:12px;font-size:14px;outline:none;background:var(--surface);color:var(--ink);transition:.15s}
  .couponrow input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(139,92,246,.16)}
  .couponrow button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:0 18px;border-radius:11px;cursor:pointer;transition:.15s}
  .couponrow button:hover{background:var(--brand-d)}
  .paycancel{width:100%;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:700;padding:12px;border-radius:12px;cursor:pointer;margin-top:9px;transition:.15s}
  .paycancel:hover{background:var(--brand-tint);color:var(--brand-d);border-color:var(--brand)}
  /* card inputs inside the modal must follow the theme (the shared .linput is tuned for the dark login card) */
  .modal .linput{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:11px}
  .modal .linput:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(139,92,246,.16);background:var(--surface)}
  .modal .linput::placeholder{color:var(--muted)}
  /* payment method tabs: Card / UPI / QR */
  .paytabs{display:flex;gap:8px;margin:4px 0 12px}
  .paytab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-weight:700;font-size:13px;padding:10px 6px;border-radius:11px;cursor:pointer;transition:.15s}
  .paytab:hover{border-color:var(--brand);color:var(--ink)}
  .paytab.active{background:linear-gradient(135deg,var(--brand),var(--brand-d));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(124,58,237,.35)}
  .paytab svg{width:16px;height:16px}
  .pmhint{font-size:11.5px;color:var(--muted);margin:8px 2px 0;line-height:1.5}
  .qrbox{display:flex;align-items:center;gap:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:13px;padding:14px}
  :root[data-theme="dark"] .qrbox{background:rgba(255,255,255,.03);border-color:rgba(139,92,246,.18)}
  .qrimg{width:116px;height:116px;flex:none;background:#fff;border-radius:10px;padding:8px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
  .qrimg svg{width:100%;height:100%;display:block}
  .qrcap{font-size:13px;color:var(--ink);font-weight:600;line-height:1.5}
  .qrcap b{font-size:21px;display:block;margin-top:4px;color:var(--brand);letter-spacing:-.4px}
  /* product detail */
  .dtmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:70;background:#fff;border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,.22);width:95vw;max-width:1500px;max-height:92vh;overflow:auto;opacity:0;pointer-events:none;transition:.2s}
  .dtmodal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .dtgrid{display:grid;grid-template-columns:52% 48%;align-items:start}
  @media(max-width:900px){.dtgrid{grid-template-columns:minmax(340px,46%) 1fr}}
  @media(max-width:640px){.dtgrid{grid-template-columns:1fr}}
  .dtimgwrap{padding:16px}
  .dtimg{background:#f6f7fb;display:grid;place-items:center;min-height:400px;position:relative;overflow:hidden;border-radius:16px}
  @media(max-width:900px){.dtimg{min-height:340px}}
  @media(max-width:640px){.dtimg{border-radius:20px 20px 0 0}}
  .dtimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .dtimg svg.pic{width:110px;height:110px}
  .dtinfo{padding:26px 26px 24px;position:relative}
  .dthdr{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:5;border-radius:24px 24px 0 0}
  .dthicon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-d));display:grid;place-items:center;color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(var(--brand-rgb),.3)}
  .dthicon svg{width:22px;height:22px}
  .dthttl{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
  .dthsub{font-size:12.5px;color:var(--muted)}
  :root[data-theme="dark"] .dthdr{background:var(--surface)}
  .dtx{margin-left:auto;border:0;background:#f1f3f9;width:36px;height:36px;border-radius:10px;font-size:15px;cursor:pointer;color:var(--muted);flex-shrink:0;transition:.15s}
  .dtx:hover{background:#e5e7ef;color:var(--ink)}
  .dtfeatures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;padding:14px;background:rgba(var(--brand-rgb),.05);border:1px solid var(--line);border-radius:14px}
  .dtfeat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
  .dtfeat .dtfi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--brand);border:1px solid var(--line);margin-bottom:3px}
  .dtfeat .dtfi svg{width:18px;height:18px}
  .dtfeat b{font-size:12.5px;font-weight:700;color:var(--ink)}
  .dtfeat small{font-size:10.5px;color:var(--muted)}
  @media(max-width:520px){.dtfeatures{grid-template-columns:repeat(2,1fr)}}
  .dtsku{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.4px}
  .dtname{font-size:clamp(24px,3.2vw,32px);font-weight:700;letter-spacing:-.6px;margin:4px 0 8px;line-height:1.12}
  .dtinfo .rating{display:flex;align-items:center;gap:10px;margin-top:2px}
  .dtinfo .rating .stars{background:#16a34a;color:#fff;padding:3px 11px;border-radius:8px;font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:4px}
  .dtinfo .rating .stars svg{width:13px;height:13px;fill:#fff}
  .dtinfo .rating .rcount{color:var(--muted);font-size:13px}
  .dtsku{display:inline-block;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:7px}
  .dtdesc{color:var(--muted);font-size:13px;line-height:1.55;margin:8px 0}
  .dtprice{font-size:clamp(32px,4.4vw,44px);font-weight:800;letter-spacing:-1px}
  .dtactions{display:flex;gap:10px;margin-top:14px}
  .dtactions .stepper{width:130px}
  .buynow{flex:1;border:0;background:var(--accent);color:#fff;font-weight:800;border-radius:11px;cursor:pointer;font-size:14.5px}
  .buynow:hover{background:var(--accent-d)}
  /* reviews */
  .dtreviews{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
  .rvhd{font-size:15px;margin-bottom:12px}
  .rvitem{border-bottom:1px solid var(--line);padding:8px 0}
  .rvtop{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
  .rvstars{color:var(--star);letter-spacing:2px}
  .rvc{font-size:13px;color:var(--muted);margin-top:3px}
  .rvform{margin-top:14px;display:flex;flex-direction:column;gap:8px}
  .rvpick{font-size:26px;color:var(--star);cursor:pointer;letter-spacing:4px;user-select:none}
  .rvform input{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;background:var(--surface);color:var(--ink)}
  .rvform button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:11px;border-radius:10px;cursor:pointer}
  /* ---- dynamic reviews (avg/count/bars all computed from real records) ---- */
  .rvhd{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;margin-bottom:14px}
  .rvhd .muted{font-size:12.5px;font-weight:600}
  .rvnone{color:var(--muted);font-size:14px;padding:14px 0 4px}
  .rvwrap{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
  @media(max-width:640px){.rvwrap{grid-template-columns:1fr}}
  .rvsummary{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
  .rvbig{font-size:44px;font-weight:900;line-height:1;color:var(--ink)}
  .rvbigstars{color:#f5a623;letter-spacing:2px;font-size:16px;margin:4px 0 2px}
  .rvbars{display:flex;flex-direction:column;gap:6px;margin-top:14px}
  .rvbar{display:flex;align-items:center;gap:8px;font-size:12px}
  .rvbl{width:26px;color:var(--muted);font-weight:700;text-align:left}
  .rvbtrack{flex:1;height:7px;border-radius:5px;background:var(--line);overflow:hidden}
  .rvbfill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#f5a623,#f59e0b)}
  .rvbp{width:34px;text-align:right;color:var(--muted);font-weight:600}
  .rvfeed{display:flex;flex-direction:column;gap:12px}
  .rvcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
  .rvchead{display:flex;align-items:center;gap:11px}
  .rvav{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-weight:800;font-size:15px}
  .rvcmeta{flex:1;min-width:0}
  .rvcname{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .rvverified{font-size:10.5px;font-weight:700;color:#16a34a;background:rgba(22,163,74,.12);padding:2px 8px;border-radius:20px}
  .rvcdate{font-size:11.5px;color:var(--muted);margin-top:1px}
  .rvcstars{color:#f5a623;letter-spacing:1.5px;font-size:13px;flex-shrink:0}
  .rvctext{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:9px}
  .rvform{margin-top:16px}
  .rvform textarea{border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;outline:none;background:var(--surface);color:var(--ink);font-family:inherit;min-height:80px;resize:vertical}
  .rvform textarea:focus{border-color:var(--brand)}
  .rvform button{border:0;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-weight:700;padding:12px;border-radius:10px;cursor:pointer;transition:filter .16s}
  .rvform button:hover{filter:brightness(1.08)}
  /* related / recently viewed */
  .dtrelated{padding:18px 0 4px}
  .dtrelated .rlsec:first-child{margin-top:0}
  .rlsec{margin-top:16px}
  .rlsec h4{margin:0 0 12px;font-size:15px}
  .rlrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media(max-width:640px){.rlrow{grid-template-columns:repeat(2,1fr)}}
  .rlcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface);transition:.15s}
  .rlcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
  .rlimg{height:90px;display:grid;place-items:center;overflow:hidden}.rlimg img{width:100%;height:100%;object-fit:cover}.rlimg svg{width:36px;height:36px}
  .rlnm{font-size:12.5px;font-weight:600;padding:8px 10px 2px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rlpr{font-size:13px;font-weight:800;padding:0 10px 10px;color:var(--brand)}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:12px;font-size:14px;box-shadow:var(--shadow-lg);opacity:0;transition:.25s;pointer-events:none;z-index:90;max-width:90vw;text-align:center}
  .toast.show{opacity:1}
  footer{max-width:1680px;margin:36px auto 0;padding:24px 20px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}

  /* ============ 2026 SaaS refinement pass ============ */
  /* Trending heading — gradient text + glowing divider */
  .sechead h2 b{color:var(--brand);-webkit-text-fill-color:var(--brand)}
  .sechead{position:relative}
  .sechead::after{content:'';display:block;width:82px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,#8b5cf6,transparent);box-shadow:0 0 18px rgba(139,92,246,.75)}
  /* prices a touch bolder, wishlist icon smaller */
  .price{font-size:18px}
  :root[data-theme="dark"] .price{color:#fff}
  .wish svg{width:15px;height:15px}
  /* Why-choose — compact premium dark cards */
  .whycard{padding:18px 15px}
  .whycard .wi{width:46px;height:46px;border-radius:12px;margin:0 auto 10px}
  .whycard .wi svg{width:22px;height:22px}
  .whycard h4{font-size:14px}.whycard p{font-size:12px}
  :root[data-theme="dark"] .whycard{background:rgba(14,20,36,.6);backdrop-filter:blur(10px);border-color:rgba(139,92,246,.14)}
  :root[data-theme="dark"] .whycard:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.5);box-shadow:0 18px 42px rgba(124,58,237,.26)}
  :root[data-theme="dark"] .whycard .wi{background:linear-gradient(150deg,rgba(139,92,246,.30),rgba(37,99,235,.22));color:#c4b5fd;border:1px solid rgba(139,92,246,.3)}
  /* Newsletter — glass card + gradient border */
  :root[data-theme="dark"] .nlinner{position:relative;background:linear-gradient(150deg,#1a1340,#0c1126);backdrop-filter:blur(16px);box-shadow:0 26px 64px rgba(76,29,149,.34);color:#fff;border-color:transparent}
  :root[data-theme="dark"] .nlinner h2{color:#fff}
  :root[data-theme="dark"] .nloff{color:#ffe27a;text-shadow:0 2px 14px rgba(0,0,0,.2)}
  :root[data-theme="dark"] .nlinner p,:root[data-theme="dark"] .nlnote{color:#cbd5e1}
  :root[data-theme="dark"] .nlbadge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
  :root[data-theme="dark"] .nlinner::after{background:rgba(255,255,255,.06)}
  :root[data-theme="dark"] .nlinner::before{content:'';position:absolute;inset:auto;top:-70px;right:-50px;left:auto;bottom:auto;width:300px;height:300px;border-radius:50%;padding:0;background:rgba(139,92,246,.18);-webkit-mask:none;mask:none;-webkit-mask-composite:initial;mask-composite:initial}
  :root[data-theme="dark"] .nlform input{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(139,92,246,.3)}
  :root[data-theme="dark"] .nlform input::placeholder{color:#9aa3b8}
  :root[data-theme="dark"] .nlform button{background:linear-gradient(135deg,var(--brand),var(--accent))}
  .nlform button:hover{filter:brightness(1.08)}
  /* Footer — gradient top border + deep premium */
  footer.premium{position:relative}
  footer.premium::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#8b5cf6,#2563eb 55%,#ff7a1a)}
  .fbrand .logo svg{width:26px;height:26px;color:#fff}
  /* Product detail modal — dark glassmorphism (Linear/Stripe vibe) */
  :root[data-theme="dark"] .dtmodal{background:rgba(14,20,36,.92);backdrop-filter:blur(26px);border:1px solid rgba(139,92,246,.3);box-shadow:0 40px 110px rgba(0,0,0,.65)}
  :root[data-theme="dark"] .dtimg{background:radial-gradient(circle at 50% 40%,#ffffff,#e6eaf3)}
  .dtimg img{object-fit:contain;padding:24px;mix-blend-mode:multiply;filter:drop-shadow(0 14px 26px rgba(10,14,25,.34))}
  :root[data-theme="dark"] .dtx{background:rgba(255,255,255,.08);color:#cbd5e1}
  :root[data-theme="dark"] .dtx:hover{background:rgba(255,255,255,.16)}
  .dtname{background:none}
  .dtprice{background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  :root[data-theme="light"] .dtprice{background:none;-webkit-text-fill-color:initial;color:var(--ink)}
  .dtactions .buynow{border-radius:12px;padding:13px;background:var(--accent);box-shadow:0 10px 26px rgba(0,0,0,.2)}
  :root[data-theme="dark"] .dtreviews{border-color:rgba(139,92,246,.18)}
  :root[data-theme="dark"] .rvitem{border-color:rgba(139,92,246,.14)}

  /* ===== Final premium pass ===== */
  /* Hero particles */
  .bparticles{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55;
    background-image:
      radial-gradient(2px 2px at 12% 30%,rgba(196,181,253,.7),transparent),
      radial-gradient(1.5px 1.5px at 26% 72%,rgba(147,197,253,.6),transparent),
      radial-gradient(2px 2px at 60% 20%,rgba(196,181,253,.5),transparent),
      radial-gradient(1.5px 1.5px at 80% 58%,rgba(147,197,253,.55),transparent),
      radial-gradient(1.5px 1.5px at 44% 86%,rgba(196,181,253,.5),transparent),
      radial-gradient(2px 2px at 92% 34%,rgba(196,181,253,.45),transparent),
      radial-gradient(1.5px 1.5px at 70% 80%,rgba(147,197,253,.5),transparent);
    animation:pdrift 9s ease-in-out infinite alternate}
  @keyframes pdrift{from{transform:translateY(0)}to{transform:translateY(-10px)}}
  @media(prefers-reduced-motion:reduce){.bparticles{animation:none}}
  /* Category pills — premium SaaS filters */
  .chip{transition:.18s;font-weight:600}
  :root[data-theme="dark"] .chip{background:rgba(255,255,255,.04);border-color:rgba(139,92,246,.16);color:#c3c9d6}
  :root[data-theme="dark"] .chip:hover{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.5);color:#fff;box-shadow:0 0 0 3px rgba(139,92,246,.1)}
  .chip.active{background:linear-gradient(135deg,var(--brand),var(--brand-d));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.28)}
  :root[data-theme="dark"] .chip.active{color:#fff}
  /* Mega Savings — glass + shine */
  .promostrip .pinfo{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
  .pico{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
  .pico svg{width:26px;height:26px;color:#fff}
  :root[data-theme="dark"] .promostrip .pinner{background:linear-gradient(100deg,rgba(255,122,26,.16),rgba(124,58,237,.18));border:1px solid rgba(255,122,26,.32);backdrop-filter:blur(12px);box-shadow:0 22px 54px rgba(0,0,0,.36)}
  .promostrip .pinner::after{content:'';position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);animation:pshine 5s ease-in-out infinite}
  @keyframes pshine{0%{left:-60%}55%,100%{left:135%}}
  @media(prefers-reduced-motion:reduce){.promostrip .pinner::after{animation:none;display:none}}
  .promostrip .pbtn{background:linear-gradient(135deg,#ff7a1a,#ff9a4d);color:#fff;box-shadow:0 10px 26px rgba(255,122,26,.42);position:relative;z-index:1;transition:.16s}
  .promostrip .pbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}
  /* Related / recently-viewed — full shoe visible, not cropped */
  .rlimg{height:130px;background:#f5f7fb;padding:10px}
  .rlimg img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(10,14,25,.18))}
  :root[data-theme="dark"] .rlcard{background:rgba(14,20,36,.6);border-color:rgba(139,92,246,.16)}
  :root[data-theme="dark"] .rlcard:hover{border-color:rgba(139,92,246,.5);box-shadow:0 14px 30px rgba(124,58,237,.26)}
  /* Footer — social icons centered (desktop + mobile) */
  .fsocial{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:22px 0 0;padding:0;justify-content:flex-start}
  .fsocial .fsi{width:44px;height:44px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;margin:0;padding:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#aab3c5;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s,color .2s}
  .fsocial .fsi svg{width:18px;height:18px;display:block}
  .fsocial .fsi:hover{color:#fff;background:linear-gradient(135deg,var(--brand),var(--accent));border-color:transparent;transform:translateY(-3px) scale(1.05);padding:0;box-shadow:0 10px 26px rgba(var(--brand-rgb),.5)}
  .fcol a{transition:.15s}
  .fcol a:hover{color:#fff;padding-left:3px}

  /* ============ Mobile responsive ============ */
  @media(max-width:760px){
    /* mobile: drop the utility bar + tier-3 nav — those live in the drawer & bottom nav now */
    .utilbar{display:none}
    .navbar{display:none}
    /* header row: [☰]  [logo centered]  [🛒]  then full-width search on row 2 */
    .mhin{flex-wrap:wrap;gap:10px 6px;padding:10px 12px;align-items:center}
    .mnavtoggle{display:grid;place-items:center;width:42px;height:42px;border:0;background:transparent;color:var(--ink);cursor:pointer;flex:none;order:0;border-radius:10px;padding:0}
    .mnavtoggle svg{width:25px;height:25px}
    .brand{order:1;flex:1 1 auto;min-width:0;justify-content:center;font-size:19px}
    .brand .logo{width:38px;height:38px;flex:none}
    .brand #brandName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
    .hicons{order:2;flex:none;margin-left:0;gap:2px}
    .hicons>*:not(.cart){display:none!important}   /* only cart stays in header; rest → drawer */
    .hicons .cart .ht{display:none}                /* cart shows icon + badge only */
    .searchbig{order:3;flex:1 0 100%;min-width:0;max-width:none;margin:0}
    .searchbig input{font-size:16px}               /* 16px stops iOS zoom / caret glitch */

    /* ---- product toolbar: chips row · "Showing N" · [In stock | Filters(N) | Sort] ---- */
    .cats{padding:10px 12px 12px;gap:8px 10px;min-height:0}
    .cats .catsinner{flex:1 1 100%;order:0}
    .catsright{width:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
    .catsright .catcount{display:block;flex:1 1 100%;order:0;margin:2px 2px 0;font-size:12.5px}
    .catsright .instock{order:1;flex:1 1 0;min-width:0;justify-content:center;height:44px;border:1.6px solid var(--line);border-radius:11px;padding:0 8px;font-size:12px;white-space:nowrap;background:var(--surface);gap:6px;overflow:hidden}
    .catsright .instock input{width:16px;height:16px}
    .catsright .instock:has(input:checked){border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
    .catsright .toolacts{order:2;flex:1 1 0;min-width:0;gap:0}
    .catsright #clearBtn{display:none!important}
    .catsright .toolacts .filttgl{width:100%;flex:1;height:44px;font-size:12px;padding:0 8px;gap:6px}
    .catsright .sortdd{order:3;flex:1 1 0;min-width:0;margin-left:0}
    .catsright .sortdd .sortsel{width:100%;height:44px;font-size:12px;padding:0 26px 0 10px}

    /* ---- slide-in drawer ---- */
    /* z-index above the sticky trial bar (200) so the drawer covers it */
    .mdrawer-ov{display:block;position:fixed;inset:0;background:rgba(2,6,23,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:1500}
    .mdrawer-ov.show{opacity:1;visibility:visible}
    .mdrawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100dvh;width:82%;max-width:330px;background:var(--surface);box-shadow:-16px 0 46px rgba(2,6,23,.3);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:1600;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .mdrawer.show{transform:translateX(0)}
    .md-head{display:flex;align-items:center;justify-content:space-between;padding:15px 14px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
    .md-head .brand{order:0;flex:0 1 auto;justify-content:flex-start;font-size:20px}
    .md-x{width:38px;height:38px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px;flex:none}
    .md-x svg{width:20px;height:20px}
    .md-list{display:flex;flex-direction:column;padding:6px 8px 24px}
    .md-item{display:flex;align-items:center;gap:13px;padding:12.5px 12px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:12px;text-decoration:none}
    .md-item:active{background:var(--brand-tint)}
    .md-ic{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--brand)}
    .md-ic svg{width:21px;height:21px}
    .md-ic-hot{color:#f97316}
    /* label grows to fill the row, so every trailing item (badge/value/arrow) parks at the right
       edge and all arrows line up — regardless of whether a badge/value is present. */
    .md-lbl{flex:1 1 auto;min-width:0}
    .md-arr{color:var(--muted);font-size:19px;font-weight:400}
    .md-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#f97316;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
    .md-tag{font-size:10px;font-weight:800;color:var(--brand);background:var(--brand-tint);padding:3px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.4px}
    .md-val{color:var(--muted);font-weight:600;font-size:13px;font-style:italic}
    .md-sw{margin-left:auto}
    .md-div{height:1px;background:var(--line);margin:8px 12px}
    .md-toggle{cursor:default}
    .md-sw{margin-left:auto;position:relative;width:44px;height:25px;flex:none;cursor:pointer}
    .md-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
    .md-sw span{position:absolute;inset:0;background:var(--line);border-radius:20px;transition:.2s}
    .md-sw span::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
    .md-sw input:checked+span{background:var(--brand)}
    .md-sw input:checked+span::after{transform:translateX(19px)}
    .md-logout{color:#e11d48}.md-logout .md-ic{color:#e11d48}
    .md-signin{color:var(--brand)}.md-signin .md-ic{color:var(--brand)}

    /* ---- bottom navigation ---- */
    .mbottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(2,6,23,.08);z-index:140;padding-bottom:env(safe-area-inset-bottom)}
    .mbn{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer;position:relative;padding:6px 0}
    .mbn svg{width:22px;height:22px}
    .mbn.on{color:var(--brand)}
    .mbn-ic{position:relative;display:grid;place-items:center}
    .mbn-badge{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#f97316;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}
    body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

    /* ---- trust strip: one line of 4 compact cards (icon on top, text below) ---- */
    .trustbar{grid-template-columns:repeat(4,1fr);gap:8px;padding:0 12px;margin-top:14px}
    .trustbar>.tb{flex-direction:column;align-items:center;text-align:center;gap:7px;padding:12px 5px;border-radius:14px}
    .trustbar>.tb:hover{transform:none}
    .tb .tbi{width:38px;height:38px;border-radius:11px}
    .tb .tbi svg{width:18px;height:18px}
    .trustbar>.tb b{font-size:11px;line-height:1.15;white-space:normal}
    .trustbar>.tb small{font-size:9.5px;line-height:1.2}

    /* ---- language / currency chooser sheet ---- */
    .msheet-ov{display:block;position:fixed;inset:0;background:rgba(2,6,23,.5);opacity:0;visibility:hidden;transition:.22s;z-index:1700}
    .msheet-ov.show{opacity:1;visibility:visible}
    .msheet{display:block;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -14px 44px rgba(2,6,23,.34);transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);z-index:1710;max-height:76vh;overflow-y:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
    .msheet.show{transform:translateY(0)}
    .msheet-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;font-size:15px;font-weight:800;color:var(--ink);position:sticky;top:0;background:var(--surface)}
    .msheet-h button{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
    .msheet-body{padding:4px 12px 10px;display:flex;flex-direction:column;gap:4px}
    .msheet-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border:1px solid var(--line);background:var(--surface);border-radius:12px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
    .msheet-opt.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}
    .mso-tick{color:var(--brand);font-weight:800}
    .mad-in{width:100%;border:1.6px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px;color:var(--ink);background:var(--surface);outline:none;margin-bottom:10px;font-family:inherit;resize:vertical}
    .mad-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14)}
    .msheet-save{width:100%;height:48px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:2px}

    /* ---- My Profile page ---- */
    .profwrap{max-width:640px;margin:0 auto}
    .profcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center}
    .prof-av{width:76px;height:76px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-size:30px;font-weight:800}
    .prof-nm{font-size:20px;font-weight:800;color:var(--ink)}
    .prof-sub{font-size:13.5px;color:var(--muted);margin-top:3px}
    .prof-rows{margin:18px 0 6px;text-align:left;display:flex;flex-direction:column;gap:10px}
    .prof-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg);border-radius:12px;font-size:13.5px}
    .prof-row span{color:var(--muted);font-weight:600}.prof-row b{color:var(--ink);font-weight:700;text-align:right;word-break:break-word}
    .prof-acts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
    .prof-acts button{height:46px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
    .prof-acts .prof-primary{border:0;background:var(--brand);color:#fff}
    .prof-acts .prof-logout{border:0;background:#e11d48;color:#fff}
  }
  /* Mobile hero: when the store uses custom banner images, show ONLY the image (its text is
     baked into the artwork) — hide the headline column + stat cards. Products-mode heroes
     (no image) keep their text/stat layout below. */
  @media(max-width:1080px){
    .banner.hasheroimg{padding:12px;min-height:0;gap:0}
    .banner.hasheroimg .bleft,.banner.hasheroimg .bstats,.banner.hasheroimg .bparticles{display:none}
    .banner.hasheroimg .bcenter{display:flex;flex:1 1 100%}
    .banner.hasheroimg .heroslide{display:grid;min-height:0}
    .banner.hasheroimg .heroslide img{width:100%;max-width:none;height:auto;max-height:none;object-fit:contain;border-radius:14px;cursor:pointer}
  }
  @media(max-width:680px){
    /* hero stacks; stat cards become a row instead of disappearing */
    .hero{margin-top:16px}
    .banner{flex-direction:column;align-items:stretch;gap:18px;padding:26px 22px;min-height:0}
    .banner h1{font-size:29px}
    .bcta{margin-top:20px;flex-wrap:nowrap;gap:10px}
    .bcta .shopnow,.bcta .reqquote{flex:1;padding:13px 8px;font-size:14px;white-space:nowrap;text-align:center}
    .bstats{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;flex:0 0 auto}
    .bstats .scard{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:16px 8px;animation:none}
    .scico{width:34px;height:34px;border-radius:10px}
    .scico svg{width:17px;height:17px}
    .sctext{min-width:0}
    .scard b{font-size:16px;white-space:nowrap;line-height:1.1}
    .scard span{font-size:10.5px}
  }
  @media(max-width:560px){
    /* utility bar: wrap gracefully, drop phone + status text so nothing is cut */
    .uin{flex-wrap:wrap;gap:6px 10px;padding:7px 14px;font-size:11.5px}
    .uright{gap:8px;white-space:normal}
    .uphone,.uphonesep,#statusText{display:none}
    .nvin{padding:0 14px}
    .navlink{padding:12px 13px;font-size:13.5px}
    .dealsbtn{padding:7px 12px;font-size:12.5px}
    .sechead h2{font-size:22px}
    .promostrip .pinner{padding:22px 20px}
    .promostrip h2{font-size:22px}
    .nlinner{padding:28px 20px}
  }
  @media(max-width:520px){
    .searchbig .scat{display:none}   /* give the input room on tiny screens */
    .banner h1{font-size:25px}
    .cards{gap:10px}
  }
  /* footer centers on small screens; Shop/Help/Company stay in one row */
  @media(max-width:820px){
    footer.premium .ftop{text-align:center}
    .fbrand{justify-content:center}
    .fsocial{justify-content:center}
    .fcol a:hover{padding-left:0}
    .fcol h4{font-size:13px}
    .fcol a{font-size:13px}
  }
  @media(max-width:420px){
    .ftop{gap:20px 8px}
    .fcol a,.fcol h4{font-size:22px}
  }
  /* ============ footer content pages ============ */
  .pagehero{background:linear-gradient(120deg,var(--brand-d),var(--brand) 60%,var(--accent-d));color:#fff;position:relative;overflow:hidden}
  .pagehero::after{content:"";position:absolute;top:-80px;right:-40px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.09)}
  .pagehero-in{max-width:1120px;margin:0 auto;padding:38px 20px 44px;position:relative;z-index:1}
  .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;opacity:.9;margin-bottom:16px;flex-wrap:wrap}
  .crumbs a{color:#fff;text-decoration:none;cursor:pointer;opacity:.85}.crumbs a:hover{opacity:1;text-decoration:underline}
  .crumbs span{opacity:.7}
  .pagehero h1{margin:0;font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-.5px}
  .pagehero p{margin:10px 0 0;font-size:15px;opacity:.92;max-width:620px}
  .pagebody{max-width:1120px;margin:0 auto;padding:40px 20px 20px}
  .psec{margin-bottom:34px}
  .psec h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.3px}
  /* headings you add via the page editor (H button) — distinct brand-coloured style */
  .pagebody h3,.psec h3{font-size:clamp(18px,2vw,22px);font-weight:800;color:var(--ink);margin:30px 0 12px;padding-bottom:9px;border-bottom:2px solid var(--line);letter-spacing:-.2px;position:relative}
  .pagebody h3:first-child,.psec h3:first-child{margin-top:4px}
  .pagebody h3:before,.psec h3:before{content:"";position:absolute;left:0;bottom:-2px;width:52px;height:2px;background:var(--brand);border-radius:2px}
  .psec p,.psec li,.pagebody p{color:var(--muted);font-size:15px;line-height:1.72}
  /* tick bullets for unordered lists */
  .pagebody ul,.psec ul{list-style:none;margin:12px 0;padding-left:2px}
  .pagebody ul>li,.psec ul>li{position:relative;padding-left:28px;color:var(--muted);font-size:15px;line-height:1.72;margin-bottom:9px}
  .pagebody ul>li:before,.psec ul>li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:800;font-size:14px}
  /* numbered lists keep numbers, tinted */
  .pagebody ol,.psec ol{margin:12px 0;padding-left:26px}
  .pagebody ol>li,.psec ol>li{color:var(--muted);font-size:15px;line-height:1.72;margin-bottom:9px;padding-left:5px}
  .pagebody ol>li::marker,.psec ol>li::marker{color:var(--brand);font-weight:800}
  /* product-detail specifications table */
  .dtspecs{margin:16px 0 4px}
  .dtspecs-h{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.2px}
  .dtspectbl{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .dtspectbl td{padding:9px 13px;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:top}
  .dtspectbl tr:last-child td{border-bottom:0}
  .dtspectbl td:first-child{color:var(--muted);font-weight:600;width:42%;background:var(--surface-2,rgba(148,163,184,.06))}
  .dtspectbl td:last-child{color:var(--ink);font-weight:600}
  /* two-column (split page) blocks from the editor */
  .pagebody .pcols,.psec .pcols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:16px 0;align-items:start}
  .pagebody .pcol,.psec .pcol{min-width:0}
  @media(max-width:640px){.pagebody .pcols,.psec .pcols{grid-template-columns:1fr;gap:16px}}
  .pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:8px}
  .pcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s}
  .pcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(var(--brand-rgb),.12);border-color:rgba(var(--brand-rgb),.35)}
  .pcard .pcico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;margin-bottom:12px}
  .pcard .pcico svg{width:22px;height:22px}
  .pcard h4{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--ink)}
  .pcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
  .pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
  .pstat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center}
  .pstat b{display:block;font-size:30px;font-weight:900;background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .pstat span{font-size:13px;color:var(--muted);font-weight:600}
  @media(max-width:640px){.pstats{grid-template-columns:repeat(2,1fr)}}
  /* faq accordion */
  .faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
  .faq .faqi{border-bottom:1px solid var(--line)}.faq .faqi:last-child{border-bottom:0}
  .faq .faqq{width:100%;text-align:left;background:none;border:0;padding:18px 20px;font-size:15.5px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
  .faq .faqq::after{content:"+";font-size:22px;font-weight:400;color:var(--brand);transition:transform .2s}
  .faq .faqi.open .faqq::after{content:"−"}
  .faq .faqa{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:14.5px;line-height:1.7}
  .faq .faqa div{padding:0 20px 18px}
  .faq .faqi.open .faqa{max-height:420px}
  /* contact */
  .pcontact{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
  @media(max-width:800px){.pcontact{grid-template-columns:1fr}}
  .pform{display:flex;flex-direction:column;gap:14px}
  .pform label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px;display:block}
  .pform input,.pform textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-size:14.5px;font-family:inherit;background:var(--surface);color:var(--ink);outline:none;transition:border-color .18s}
  .pform input:focus,.pform textarea:focus{border-color:var(--brand)}
  .pform textarea{min-height:120px;resize:vertical}
  .pform button{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border:0;border-radius:12px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;transition:filter .18s,transform .18s}
  .pform button:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .pcinfo{display:flex;flex-direction:column;gap:14px}
  .pcrow{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
  .pcrow .pci{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:rgba(var(--brand-rgb),.1);color:var(--brand)}
  .pcrow .pci svg{width:20px;height:20px}
  .pcrow b{display:block;font-size:14px;color:var(--ink)}.pcrow span{font-size:13.5px;color:var(--muted)}
  .pmap{margin-top:2px;height:240px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
  .pmap iframe{width:100%;height:100%;border:0;display:block}
  /* track order + timeline */
  .ptrackbox{max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px}
  .ptimeline{margin-top:26px;position:relative;padding-left:8px}
  .ptstep{display:flex;gap:16px;position:relative;padding-bottom:26px}
  .ptstep:last-child{padding-bottom:0}
  .ptstep::before{content:"";position:absolute;left:15px;top:30px;bottom:-4px;width:2px;background:var(--line)}
  .ptstep:last-child::before{display:none}
  .ptstep.done::before{background:var(--brand)}
  .ptdot{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);color:var(--muted);z-index:1;font-size:14px}
  .ptstep.done .ptdot{background:linear-gradient(135deg,var(--brand),var(--brand-d));border-color:transparent;color:#fff}
  .ptstep.active .ptdot{border-color:var(--brand);color:var(--brand);animation:ptpulse 1.6s infinite}
  @keyframes ptpulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.4)}50%{box-shadow:0 0 0 7px rgba(var(--brand-rgb),0)}}
  .pttext b{display:block;font-size:15px;color:var(--ink)}.pttext span{font-size:13px;color:var(--muted)}
  /* careers */
  .pjob{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;transition:border-color .2s,transform .2s}
  .pjob:hover{border-color:rgba(var(--brand-rgb),.4);transform:translateY(-2px)}
  .pjob h4{margin:0 0 4px;font-size:16px;color:var(--ink)}.pjob .pjm{font-size:13px;color:var(--muted)}
  .pjob .papply{background:rgba(var(--brand-rgb),.1);color:var(--brand);border:0;border-radius:10px;padding:11px 20px;font-weight:800;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:.18s}
  .pjob .papply:hover{background:var(--brand);color:#fff}
  @media(max-width:520px){.pjob{flex-direction:column;align-items:flex-start}}



  /* ---- processing spinner popup (unchanged) ---- */
  .procwrap,.okwrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);padding:20px}
  .procwrap.show,.okwrap.show{display:flex}
  .proccard{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);padding:34px 30px;text-align:center;max-width:380px;width:100%;animation:pop .28s cubic-bezier(.34,1.56,.64,1)}
  @keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
  .proccard h3{margin:16px 0 6px;font-size:19px;color:var(--ink)}
  .proccard p{margin:0;color:var(--muted);font-size:13.5px}
  .procspin{width:52px;height:52px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--brand);margin:0 auto;animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---- premium payment-success modal ---- */
  #okWrap{background:rgba(12,15,32,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .pscard{--ps:#635BFF;--ps-d:#4F46E5;position:relative;width:100%;max-width:720px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);border-radius:24px;
    box-shadow:0 40px 100px -20px rgba(20,20,60,.5),0 0 0 1px rgba(99,91,255,.05);padding:52px 56px 30px;text-align:center;
    animation:psin .5s cubic-bezier(.2,.9,.3,1.2) both}
  @keyframes psin{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
  /* success badge */
  .psbadge{position:relative;width:104px;height:104px;margin:4px auto 0}
  .pscircle{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;color:#fff;
    background:radial-gradient(circle at 35% 30%,#4ade80,#22c55e 55%,#16a34a);
    box-shadow:0 16px 40px rgba(34,197,94,.45),0 0 0 10px rgba(34,197,94,.12),inset 0 2px 6px rgba(255,255,255,.4);
    animation:pspulse 1.1s .25s ease-out 1 both}
  .pscircle svg{width:52px;height:52px;stroke-dasharray:40;stroke-dashoffset:40;animation:psdraw .55s .35s ease forwards}
  @keyframes psdraw{to{stroke-dashoffset:0}}
  @keyframes pspulse{0%{transform:scale(.4);opacity:0}45%{transform:scale(1.12);opacity:1}70%{transform:scale(.96)}100%{transform:scale(1)}}
  .pspart{position:absolute;border-radius:50%;opacity:0;animation:psfloat 2.6s ease-in-out infinite}
  .pspart.a{width:9px;height:9px;background:#a78bfa;top:-6px;left:6px;animation-delay:.2s}
  .pspart.b{width:7px;height:7px;background:#34d399;top:4px;right:-4px;animation-delay:.6s}
  .pspart.c{width:6px;height:6px;background:#60a5fa;bottom:-2px;left:-4px;animation-delay:.9s}
  .pspart.d{width:8px;height:8px;background:#fbbf24;bottom:6px;right:2px;animation-delay:1.3s}
  .pspart.e{width:5px;height:5px;background:#f472b6;top:34px;left:-10px;animation-delay:.45s}
  .pspart.f{width:6px;height:6px;background:#818cf8;top:30px;right:-10px;animation-delay:1s}
  @keyframes psfloat{0%{opacity:0;transform:translateY(6px) scale(.6)}30%{opacity:1}60%{opacity:1;transform:translateY(-14px) scale(1)}100%{opacity:0;transform:translateY(-26px) scale(.6)}}
  .pstitle{margin:22px 0 8px;font-size:29px;font-weight:800;letter-spacing:-.6px;color:#0f172a}
  .pssub{margin:0 auto;max-width:440px;color:#64748b;font-size:14.5px;line-height:1.55}
  /* amount */
  .psamt{margin:28px auto 6px;max-width:460px;background:linear-gradient(135deg,#eef1ff,#f4edff);border:1px solid rgba(99,91,255,.14);
    border-radius:18px;padding:20px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
  .psamt-l{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c78c8}
  .psamt-v{margin-top:6px;font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1.05;
    background:linear-gradient(135deg,#635BFF,#4F46E5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#4F46E5}
  /* timeline */
  .pssteps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:30px auto 6px;max-width:480px;animation:psfade .6s .3s both}
  @keyframes psfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .psstep{display:flex;flex-direction:column;align-items:center;gap:9px;flex:0 0 auto;width:104px}
  .psdot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eef0f6;color:#94a3b8;border:2px solid #e2e6f0;transition:.2s}
  .psstep.done .psdot{background:linear-gradient(135deg,#635BFF,#4F46E5);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(99,91,255,.4)}
  .psstep.now .psdot{background:#fff;border-color:#635BFF;box-shadow:0 0 0 5px rgba(99,91,255,.14)}
  .psdot svg{width:20px;height:20px}
  .psspin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(99,91,255,.25);border-top-color:#635BFF;animation:spin .8s linear infinite}
  .psst-t{font-size:12.5px;font-weight:700;color:#475569;line-height:1.25}
  .psstep.now .psst-t{color:#635BFF}
  .psln{flex:1 1 auto;height:3px;margin-top:17px;border-radius:3px;min-width:24px;
    background-image:linear-gradient(90deg,#cfd6e6 40%,transparent 0);background-size:9px 3px;background-repeat:repeat-x}
  .psln.done{background-image:linear-gradient(90deg,#635BFF,#4F46E5);background-size:auto}
  /* CTA */
  .psbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:460px;height:60px;margin:26px auto 0;
    border:0;border-radius:14px;cursor:pointer;font-size:16.5px;font-weight:800;color:#fff;letter-spacing:.2px;
    background:linear-gradient(135deg,#6D5DFF,#4F46E5);box-shadow:0 16px 34px -8px rgba(79,70,229,.6);transition:transform .18s,box-shadow .18s,filter .18s}
  .psbtn span{transition:transform .18s}
  .psbtn:hover{transform:translateY(-3px);box-shadow:0 22px 44px -8px rgba(79,70,229,.7);filter:brightness(1.05)}
  .psbtn:hover span{transform:translateX(4px)}
  .psbtn:active{transform:translateY(-1px)}
  /* footer */
  .psfoot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid #eceef4;color:#94a3b8;font-size:12.5px;font-weight:600}
  .psfoot svg{width:15px;height:15px;color:#22c55e}
  @media (max-width:600px){
    .pscard{padding:38px 22px 24px;border-radius:20px}
    .pstitle{font-size:24px}
    .psamt-v{font-size:33px}
    .pssteps{max-width:100%}
    .psstep{width:33%}
    .psst-t{font-size:11px}
    .psbtn{height:56px;font-size:15.5px}
  }
  @media (prefers-reduced-motion:reduce){
    .pscard,.pscircle,.pscircle svg,.pspart,.pssteps,.psspin{animation:none!important}
    .pscircle svg{stroke-dashoffset:0}
  }

  /* ============ Product Details modal — 2026 premium polish (layout/visual only) ============ */
  .dtmodal{width:92vw;max-width:1400px}
  .dtgrid{grid-template-columns:53% 47%}
  @media(max-width:900px){.dtgrid{grid-template-columns:minmax(340px,46%) 1fr}}
  @media(max-width:640px){.dtgrid{grid-template-columns:1fr}}
  /* image — bigger focus + soft shadow, tidy spacing */
  .dtimgwrap{padding:20px;gap:14px}
  .dtimg{min-height:472px;border-radius:18px;border:1px solid var(--line);box-shadow:0 16px 38px rgba(15,23,42,.07)}
  @media(max-width:900px){.dtimg{min-height:360px}}
  @media(max-width:640px){.dtimg{min-height:320px;border-radius:18px}}
  .dtthumbs{gap:10px}
  .dtthumb{width:78px;height:78px;border-radius:12px}
  .dtthumb.on{border-color:var(--brand);border-width:2px;box-shadow:0 0 0 3px rgba(var(--brand-rgb),.22),0 6px 16px rgba(var(--brand-rgb),.18)}
  /* info column — spacing + typographic hierarchy */
  .dtinfo{padding:26px 28px 26px}
  .dtname{font-size:clamp(26px,3.4vw,36px);font-weight:800;margin:8px 0 10px}
  .dtinfo .prices{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
  .dtinfo .mrp{font-size:16px}
  .dtinfo .disc{align-self:center;background:rgba(22,163,74,.12);color:#16a34a;font-weight:800;font-size:12px;letter-spacing:.3px;padding:4px 10px;border-radius:8px}
  .dtvsec{margin-top:20px}
  /* size selector — larger, cleaner; out-of-stock = muted (no red diagonal) */
  .dtszs{gap:9px;max-width:400px}
  .dtsz{min-height:52px;border-radius:11px}
  .dtsz.out{background:var(--bg,#f6f7fb)!important;opacity:.5;border-style:dashed}
  .dtsz.out::after{display:none!important}
  /* stock summary — equal pills */
  .dtszhint{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:16px}
  .dtchip{justify-content:center;min-height:44px;border-radius:12px;padding:8px 12px;font-size:12.5px;text-align:center;line-height:1.25}
  /* action buttons — purple + orange gradients, equal, premium */
  .dtactions{gap:12px;margin-top:20px}
  .dtactions .add{flex:1;border:0;border-radius:13px;padding:15px;font-size:15px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--brand),var(--brand-d));box-shadow:0 12px 28px rgba(var(--brand-rgb),.4);transition:transform .16s,box-shadow .16s,filter .16s}
  .dtactions .buynow{flex:1;border:0;border-radius:13px;padding:15px;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#fb923c);box-shadow:0 12px 28px rgba(249,115,22,.42)}
  .dtactions .add:hover,.dtactions .buynow:hover{transform:translateY(-2px);filter:brightness(1.06)}
  .dtactions .add:active,.dtactions .buynow:active{transform:translateY(0)}
  /* wishlist / share — equal outlined */
  .dttools{gap:12px;margin-top:14px}
  .dttool{flex:1;justify-content:center;padding:11px 14px;border-radius:12px}
  /* reviews — roomier, scrollable feed, hover cards, sticky summary */
  .dtreviews{margin-top:22px;padding-top:18px}
  .rvhd{font-size:17px}
  .rvwrap{grid-template-columns:210px 1fr;gap:24px}
  @media(max-width:640px){.rvwrap{grid-template-columns:1fr}}
  .rvsummary{position:sticky;top:6px;border-radius:16px;padding:20px}
  .rvfeed{max-height:372px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(120,120,140,.4) transparent}
  .rvfeed::-webkit-scrollbar{width:7px}
  .rvfeed::-webkit-scrollbar-thumb{background:rgba(120,120,140,.35);border-radius:6px}
  .rvcard{transition:box-shadow .16s,transform .16s,border-color .16s}
  .rvcard:hover{box-shadow:0 10px 26px rgba(15,23,42,.09);transform:translateY(-1px);border-color:rgba(var(--brand-rgb),.28)}
  /* review form — compact single row */
  .rvform{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .rvform .rvpick{font-size:23px;letter-spacing:3px;flex-shrink:0;margin:0}
  .rvinput{flex:1;min-width:220px;height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 15px;font-size:14px;outline:none;background:var(--surface);color:var(--ink);font-family:inherit}
  .rvinput:focus{border-color:var(--brand)}
  .rvform button{flex-shrink:0;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-weight:700;padding:0 24px;height:46px;border-radius:12px;cursor:pointer;transition:filter .16s,transform .16s}
  .rvform button:hover{filter:brightness(1.08);transform:translateY(-1px)}
  /* related / recently — uniform premium cards */
  .dtrelated{padding:20px 0 4px}
  .rlsec h4{font-size:15px;margin:0 0 12px}
  .rlcard{border-radius:14px}
  .rlimg{height:104px}
  .rlnm{font-size:12.5px;padding:9px 11px 2px}
  .rlpr{padding:0;font-size:14px}

  /* ===== Product Details modal — premium reference pass ===== */
  /* bigger hero + nav arrows + image counter */
  .dtstage{position:relative}
  .dtimg{min-height:600px}
  @media(max-width:900px){.dtimg{min-height:400px}}
  @media(max-width:640px){.dtimg{min-height:340px}}
  .dtnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:#1e293b;font-size:26px;line-height:1;cursor:pointer;display:none;place-items:center;z-index:3;box-shadow:0 6px 18px rgba(0,0,0,.12);transition:.16s}
  .dtnav:hover{background:#5B4DFF;color:#fff;border-color:transparent;transform:translateY(-50%) scale(1.06)}
  .dtprev{left:16px}.dtnext{right:16px}
  .dtcounter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,.82);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;z-index:3;display:none}
  /* service highlight cards */
  .dtmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
  .dtsvc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 8px;transition:.16s}
  .dtsvc:hover{border-color:#5B4DFF;box-shadow:0 8px 24px rgba(0,0,0,.07);transform:translateY(-2px)}
  .dtsvci{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(91,77,255,.1);color:#5B4DFF;margin-bottom:3px}
  .dtsvci svg{width:19px;height:19px}
  .dtsvc b{font-size:12.5px;font-weight:800;color:var(--ink)}
  .dtsvc small{font-size:11px;color:var(--muted)}
  /* #5B4DFF primary accent + orange buy-now */
  .dtactions .add{background:linear-gradient(135deg,#5B4DFF,#6C63FF);box-shadow:0 12px 28px rgba(91,77,255,.4)}
  .dtactions .buynow{background:linear-gradient(135deg,#FF7A00,#ff9838);box-shadow:0 12px 28px rgba(255,122,0,.4)}
  .dtsz.on{background:linear-gradient(135deg,#5B4DFF,#6C63FF)!important;box-shadow:0 6px 16px rgba(91,77,255,.35)}
  .dtsw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #5B4DFF!important}
  .dtthumb.on{border-color:#5B4DFF!important;box-shadow:0 0 0 3px rgba(91,77,255,.22)!important}
  .rvform button{background:linear-gradient(135deg,#5B4DFF,#6C63FF)}
  /* premium related / recently-viewed cards */
  .rlimg{position:relative}
  .rlbadge{position:absolute;top:8px;left:8px;background:#16a34a;color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:7px;z-index:2}
  .rlwish{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(15,23,42,.14);color:#cbd5e1;cursor:pointer;display:grid;place-items:center;z-index:2;transition:.15s}
  .rlwish svg{width:14px;height:14px}
  .rlwish.on{color:#e11d48}
  .rlwish:hover{transform:scale(1.1)}
  .rlcard{border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.03)}
  .rlcard:hover{box-shadow:0 12px 30px rgba(0,0,0,.1);transform:translateY(-3px);border-color:rgba(91,77,255,.3)}
  .rlmeta{display:flex;align-items:baseline;gap:7px;padding:0 11px;margin-top:2px}
  .rlmrp{font-size:11px;color:var(--muted);text-decoration:line-through}
  .rlrate{font-size:11px;color:#f59e0b;font-weight:700;padding:3px 11px 11px}
  .rlrate span{color:var(--muted);font-weight:600}

  /* ===== refinement: shorter full-bleed image, compact service cards, full-width sizes, left-aligned review form ===== */
  .dtimg{min-height:430px;background:#fff}
  .dtimg img{padding:8px}
  @media(max-width:900px){.dtimg{min-height:360px}}
  @media(max-width:640px){.dtimg{min-height:300px}}
  /* compact service highlight cards */
  .dtmeta{margin-top:14px;gap:8px}
  .dtsvc{padding:10px 6px;border-radius:12px}
  .dtsvci{width:30px;height:30px;border-radius:9px;margin-bottom:1px}
  .dtsvci svg{width:16px;height:16px}
  .dtsvc b{font-size:12px}
  .dtsvc small{font-size:10.5px}
  /* size pills fill the full column width (no empty space on the right) */
  .dtszs{max-width:none;grid-template-columns:repeat(auto-fit,minmax(54px,1fr))}
  /* review form: below the summary card, in the left column, left-aligned */
  .rvwrap{grid-template-columns:250px 1fr}
  .rvleft{display:flex;flex-direction:column;gap:16px}
  .rvsummary{position:static}
  .rvleft .rvform{margin-top:0;flex-direction:column;align-items:stretch;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px}
  .rvleft .rvform .rvpick{text-align:left;margin:0}
  .rvleft .rvinput{min-width:0;width:100%}
  .rvleft .rvform button{width:100%}
  @media(max-width:640px){.rvwrap{grid-template-columns:1fr}}
  /* show the WHOLE uploaded image (contain) — never crop it, works with a single image too */
  .dtimg img{object-fit:contain!important;padding:22px!important;mix-blend-mode:normal!important;filter:none!important;width:100%;height:100%}
  .dtthumb{padding:0}
  .dtthumb img{object-fit:contain!important;padding:4px!important;mix-blend-mode:normal!important}
  /* When a real image is present: keep the whole picture (contain) but fill the empty side/top area
     with a soft BLURRED copy of the same image (var --dtbg, set in openDetail) instead of white bars.
     Smaller max-height so the image doesn't dominate the modal. */
  .dtimg:has(img){min-height:0!important;height:auto!important;background:#f3f4f7!important;position:relative;overflow:hidden}
  .dtimg:has(img)::before{content:'';position:absolute;inset:0;z-index:0;background:var(--dtbg,none) center/cover no-repeat;filter:blur(26px) brightness(.94) saturate(1.12);transform:scale(1.25)}
  .dtimg:has(img) img{position:relative!important;z-index:1;width:auto!important;max-width:100%!important;height:auto!important;max-height:52vh!important;margin:0 auto!important;object-fit:contain!important;padding:14px!important;display:block!important;border-radius:inherit;filter:drop-shadow(0 12px 26px rgba(10,14,25,.26))}


'
   +'*{box-sizing:border-box}body{font-family:"Segoe UI",Arial,sans-serif;margin:0;color:#1f2937;background:#eef2f7;padding:22px;font-size:13px}'
   +'.sheet{max-width:840px;margin:0 auto;background:#fff;border:1px solid #dbe1ea;border-radius:12px;overflow:hidden}'
   +'.pad{padding:26px 30px}'
   +'.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}'
   +'.brand{display:flex;gap:14px;align-items:flex-start}.logo{width:52px;height:52px;flex-shrink:0;color:#1d4ed8}'
   +'.brand h1{margin:0;font-size:23px;color:#1e293b;font-weight:800;line-height:1.12}.gstin{color:#64748b;font-size:12px;margin-top:3px;font-weight:600}'
   +'.contact{margin-top:9px;font-size:12px;color:#475569;line-height:1.85}.contact .ic{color:#1d4ed8;margin-right:5px;font-weight:700}'
   +'.invh{text-align:right;flex-shrink:0}.invh .big{font-size:29px;font-weight:800;color:#1e3a8a;letter-spacing:1px;line-height:1}'
   +'.invh .sub{font-size:10.5px;font-weight:700;color:#1d4ed8;letter-spacing:1px;border-bottom:2px solid #1d4ed8;display:inline-block;padding-bottom:3px;margin-top:3px}'
   +'.invbox{margin-top:14px;background:#eff5ff;border:1px solid #cfe0ff;border-radius:8px;padding:9px 13px;text-align:left}.invbox div{font-size:12.5px;padding:2px 0;white-space:nowrap}.invbox b{color:#1d4ed8}'
   +'.rule{height:1px;background:#e5eaf1;margin:18px 0}'
   +'.parties{display:flex;border:1px solid #e5eaf1;border-radius:8px;overflow:hidden}'
   +'.party{flex:1;padding:13px 15px}.party+.party{border-left:1px solid #e5eaf1}'
   +'.party .h{color:#1d4ed8;font-weight:800;font-size:11.5px;letter-spacing:.4px;margin-bottom:7px}'
   +'.party .nm{font-weight:700;font-size:13px}.party .ad{color:#475569;font-size:12px;line-height:1.55;margin-top:2px}'
   +'.party .kv{font-size:12px;line-height:1.95}.party .kv span{color:#64748b;display:inline-block;min-width:84px}'
   +'.badge{display:inline-block;background:#dcfce7;color:#166534;font-weight:700;font-size:11px;padding:2px 9px;border-radius:5px}'
   +'table.items{width:100%;border-collapse:collapse;margin-top:18px;border:1px solid #cbd5e1}'
   +'.items thead th{background:#1e3a8a;color:#fff;font-size:11.5px;font-weight:700;padding:11px 12px;text-align:left;border-right:1px solid #2b4a9e}'
   +'.items thead th:last-child{border-right:0}.items th.c,.items td.c{text-align:center}.items th.r,.items td.r{text-align:right}'
   +'.items tbody td{padding:12px;border-bottom:1px solid #eef2f7;border-right:1px solid #eef2f7;font-size:12.5px;vertical-align:top}'
   +'.items tbody td:last-child{border-right:0}.items td.ln b{font-size:13px}.items td.ln small{display:block;color:#94a3b8;margin-top:2px}.items td.mut{color:#94a3b8}'
   +'.vr{background:#eef2ff;color:#4338ca;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px}'
   +'.sumwrap{display:flex;justify-content:space-between;gap:20px;margin-top:6px}'
   +'.words{padding:14px 2px;max-width:340px}.words .h{color:#1d4ed8;font-weight:800;font-size:11.5px;margin-bottom:5px}.words .v{font-size:12.5px;color:#334155;font-style:italic}.words .n{font-size:11px;color:#94a3b8;margin-top:8px}'
   +'.tot{width:330px;flex-shrink:0}.tot .row{display:flex;justify-content:space-between;padding:8px 14px;font-size:13px;border-bottom:1px solid #eef2f7}.tot .row span:first-child{color:#475569}'
   +'.tot .grand{display:flex;justify-content:space-between;background:#1d4ed8;color:#fff;font-weight:800;font-size:15px;padding:13px 14px;margin-top:4px;border-radius:6px}'
   +'.terms{border:1px solid #e5eaf1;border-radius:8px;padding:13px 16px;margin-top:20px}.terms .h{color:#1d4ed8;font-weight:800;font-size:11.5px;margin-bottom:7px}'
   +'.terms ul{margin:0;padding-left:18px;color:#475569;font-size:12px;line-height:1.95}'
   +'.foot{background:#eff5ff;border-top:1px solid #cfe0ff;padding:14px 30px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}'
   +'.foot .ty{color:#1d4ed8;font-weight:800;font-size:14px}.foot .ty small{display:block;color:#64748b;font-weight:500;font-size:11.5px}.foot .fc{font-size:12px;color:#475569}'
   +'@media print{body{background:#fff;padding:0}.sheet{border:0;border-radius:0}.items thead th,.tot .grand,.foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}}'
   +'