/* ═══════════════════════════════════════════════════════════════
   YALA BAZAAR — design system
   Inspired by Amazon. Refined, modern, ships continent-wide.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* brand */
  --header:#131921;
  --subheader:#232F3E;
  --subheader-hover:#37475A;
  --cta:#FFD814;
  --cta-hover:#F7CA00;
  --cta-border:#FCD200;
  --orange:#FF9900;
  --orange-deep:#E47911;
  --teal:#007185;
  --teal-hover:#C7511F;
  --star:#FFA41C;
  --success:#007600;
  --danger:#B12704;

  /* surfaces */
  --bg:#EAEDED;
  --bg-band:#F3F3F3;
  --card:#FFFFFF;
  --line:#DDDDDD;
  --line-soft:#E7E7E7;

  /* text */
  --ink:#0F1111;
  --ink-2:#3F3F3F;
  --dim:#565959;
  --faint:#888;

  /* type */
  --f:'Inter','Amazon Ember',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* fx */
  --shadow:0 2px 5px rgba(15,17,17,.08);
  --shadow-lg:0 4px 18px rgba(15,17,17,.12);
  --shadow-hover:0 6px 22px rgba(15,17,17,.18);
  --ring:0 0 0 3px rgba(255,153,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.4;min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-hover);text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ═══════════════════════════════════════════════════════════════
   HEADER — three rows: utility · main · sub-nav (Amazon-style)
   ═══════════════════════════════════════════════════════════════ */

/* utility strip */
.util{background:#0a0e16;color:#fff;font-size:12px;padding:6px 0;border-bottom:1px solid #1f2737}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.util a{color:#fff}.util a:hover{color:var(--cta);text-decoration:none}
.util .ulinks{display:flex;align-items:center;gap:18px}
.util .ship-msg{color:#cfd4dc}
.util .ship-msg b{color:#fff}
.util .site-tagline{color:#cfd4dc;margin-left:14px}

/* main bar */
.head{background:var(--header);color:#fff;padding:8px 0;position:sticky;top:0;z-index:500;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.head .wrap{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.wrap{width:100%;margin:0 auto;padding:0 clamp(14px,3vw,52px);box-sizing:border-box}

/* logo */
.logo{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:4px;flex-shrink:0}
.logo:hover{border-color:#fff;text-decoration:none}
.logo svg{height:34px;width:auto;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text b{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px}
.logo-text small{font-size:9.5px;color:var(--cta);font-weight:600;letter-spacing:1.4px;margin-top:2px;text-transform:uppercase}

/* deliver-to chip */
.deliver{display:flex;align-items:center;gap:6px;color:#fff;padding:8px 10px;border:1px solid transparent;border-radius:4px;cursor:pointer;flex-shrink:0;font-size:12px;line-height:1.15}
.deliver:hover{border-color:#fff;text-decoration:none}
.deliver .ic{font-size:18px}
.deliver div small{display:block;color:#ccc;font-size:11.5px}
.deliver div b{font-size:13.5px;color:#fff;font-weight:700}

/* search */
.search-wrap{flex:1;min-width:0;display:flex;height:40px;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s}
.search-wrap:focus-within{box-shadow:var(--ring)}
.search-cat{background:#E6E6E6;border-right:1px solid #CDCDCD;padding:0 8px 0 12px;color:var(--ink);font-size:12.5px;font-weight:500;border:none;outline:none;cursor:pointer;max-width:140px;border-radius:6px 0 0 6px}
.search-input{flex:1;border:none;outline:none;padding:0 14px;font-size:15px;background:transparent;color:var(--ink);min-width:0}
.search-input::placeholder{color:#888}
.search-btn{background:var(--cta);border:none;padding:0 18px;cursor:pointer;font-size:18px;color:var(--ink);border-radius:0 6px 6px 0;transition:background .15s}
.search-btn:hover{background:var(--cta-hover)}

/* account / orders / cart links */
.hd-link{display:flex;flex-direction:column;line-height:1.15;color:#fff;padding:8px 10px;border:1px solid transparent;border-radius:4px;cursor:pointer;font-size:12px;text-align:left;flex-shrink:0;white-space:nowrap}
.hd-link:hover{border-color:#fff;text-decoration:none;color:#fff}
.hd-link small{color:#ccc;font-size:12px}
.hd-link b{font-size:13.5px;font-weight:700;color:#fff}
.hd-link b .caret{font-size:9px;color:#aaa;margin-left:2px}

/* cart */
.cart-btn{display:flex;align-items:center;gap:6px;color:#fff;padding:8px 10px;border:1px solid transparent;border-radius:4px;cursor:pointer;flex-shrink:0;position:relative}
.cart-btn:hover{border-color:#fff;text-decoration:none;color:#fff}
.cart-ic{font-size:30px;line-height:1;position:relative}
.cart-count{position:absolute;top:-2px;right:-6px;background:var(--orange);color:var(--ink);border-radius:11px;min-width:22px;height:18px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;padding:0 5px;line-height:1}
.cart-btn b{font-size:13.5px;font-weight:700;color:#fff;margin-top:-2px}

/* sub-nav */
.subnav{background:var(--subheader);color:#fff;padding:0;border-bottom:1px solid #1A2535}
.subnav .wrap{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a,.subnav button{color:#fff;padding:9px 11px;font-size:13.5px;font-weight:400;border:1px solid transparent;border-radius:3px;display:flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;flex-shrink:0}
.subnav a:hover,.subnav button:hover{border-color:#fff;background:rgba(255,255,255,.02);color:#fff;text-decoration:none}
.subnav .menu-trigger{font-weight:700;font-size:14px}
.subnav .deals{color:var(--cta);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   HERO carousel
   ═══════════════════════════════════════════════════════════════ */
.hero{position:relative;background:linear-gradient(to bottom,var(--subheader) 0%,var(--subheader) 220px,var(--bg) 220px,var(--bg) 100%);overflow:hidden}
.hero-slides{position:relative;width:100%;height:420px;overflow:hidden}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;padding:0 clamp(20px,6vw,100px);opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-slide.on{opacity:1;pointer-events:auto}
.hero-slide::before{content:"";position:absolute;inset:0;z-index:0}
.hero-slide.s1::before{background:linear-gradient(120deg,#1a2541 0%,#3b2a6d 50%,#7a3aa8 100%)}
.hero-slide.s2::before{background:linear-gradient(120deg,#0d1b2a 0%,#1b3a5b 50%,#2980b9 100%)}
.hero-slide.s3::before{background:linear-gradient(120deg,#231227 0%,#5a1845 50%,#c12e6b 100%)}
.hero-slide.s4::before{background:linear-gradient(120deg,#0f2027 0%,#203a43 50%,#2c5364 100%)}
.hero-content{position:relative;z-index:2;max-width:560px;color:#fff}
.hero-eyebrow{font-size:13px;font-weight:600;color:var(--cta);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;display:inline-block;padding:5px 12px;background:rgba(255,216,20,.12);border:1px solid rgba(255,216,20,.4);border-radius:100px}
.hero-content h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;line-height:1.06;letter-spacing:-1px;margin-bottom:14px;color:#fff}
.hero-content h2 span{display:block;background:linear-gradient(90deg,#FFD814,#FF9900);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-content p{font-size:17px;line-height:1.5;color:rgba(255,255,255,.85);margin-bottom:26px;max-width:480px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:absolute;right:50px;top:50%;transform:translateY(-50%);z-index:1;opacity:.96;pointer-events:none}
/* When the admin uploads a real photo, wrap it in a strict 360x360 box.
   Dark background eliminates the checkerboard from transparent PNGs.
   SVG illustrations keep their own sizing via the svg rule below. */
.hero-art img{width:360px;height:360px;object-fit:contain;display:block;background:transparent;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));animation:heroFloat 5s ease-in-out infinite alternate}
.hero-art svg{height:340px;width:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}
@keyframes heroFloat{from{transform:none}to{transform:translateY(-14px)}}

/* Photo-placeholder shown when product image URL is broken / not yet uploaded */
.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:120px;color:var(--dim);font-size:11px;gap:4px;text-align:center;padding:12px}
.photo-placeholder::before{content:'📷';font-size:26px;display:block}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5}
.hero-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s;display:block}
.hero-dots i.on{width:28px;border-radius:5px;background:var(--cta)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;backdrop-filter:blur(6px);transition:.2s}
.hero-arrow:hover{background:rgba(255,255,255,.3)}
.hero-arrow.left{left:22px}.hero-arrow.right{right:22px}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:8px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:.15s;text-decoration:none;line-height:1;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--cta);color:var(--ink);border-color:var(--cta-border)}
.btn-primary:hover{background:var(--cta-hover);color:var(--ink)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-deep);color:#fff}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-line{background:#fff;color:var(--ink);border-color:#D5D9D9;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.btn-line:hover{background:#F7FAFA;color:var(--ink)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-block{display:flex;width:100%}

/* ═══════════════════════════════════════════════════════════════
   CONTAINERS / SECTIONS
   ═══════════════════════════════════════════════════════════════ */
section{padding:0}
.section{padding:28px 0}
.card{background:var(--card);border-radius:10px;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line-soft)}
.card-flat{background:var(--card);padding:18px 20px;border-bottom:1px solid var(--line-soft)}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.sec-head h2{font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.sec-head a{font-size:13.5px;color:var(--teal);font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY TILES (Amazon-style)
   ═══════════════════════════════════════════════════════════════ */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:-90px;position:relative;z-index:10}
.cat-tile{background:#fff;border-radius:6px;padding:22px;box-shadow:var(--shadow);transition:.2s;display:block;color:var(--ink)}
.cat-tile:hover{text-decoration:none;color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cat-tile h3{font-size:18px;font-weight:700;margin-bottom:14px;color:var(--ink)}
.cat-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cat-tile-cell{background:#F4F4F4;border-radius:6px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden;position:relative}
.cat-tile-cell svg{max-width:75%;max-height:75%}
.cat-tile-cell span{position:absolute;bottom:6px;left:8px;font-size:11px;color:var(--dim);font-weight:500}
.cat-tile-cell.big{grid-column:1/-1;aspect-ratio:auto;height:160px}
.cat-tile a.shop{color:var(--teal);font-size:13.5px;font-weight:500;display:inline-block;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════ */
.prod-row{background:#fff;border-radius:8px;padding:24px;box-shadow:var(--shadow);margin-bottom:18px}
.prod-row .sec-head{margin-bottom:18px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}
.prod-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* prod-wrap: grid cell container (no explicit height needed — CSS grid stretches cells).
   Flex column so the card grows and the Add-to-Cart button always sits at the bottom. */
.prod-wrap{display:flex;flex-direction:column}
/* Card fills all remaining space in the flex column.
   height:auto overrides the height:100% on .prod-card — that rule is for standalone cards;
   inside a flex column flex:1 is what controls growth, and height:100% would create a
   circular-reference sizing conflict that makes the button appear detached. */
.prod-wrap > .prod-card{flex:1;height:auto}
/* Cart button — always pinned to the bottom of the cell, never shrinks */
.prod-cart-btn{display:block;width:100%;padding:10px;background:var(--orange);color:#000;font-weight:700;font-size:13px;border:none;border-radius:8px;cursor:pointer;margin-top:8px;transition:.15s;flex-shrink:0;text-align:center;font-family:inherit}
.prod-cart-btn:hover{background:var(--orange-hover,#e88900);transform:translateY(-1px)}
.prod-cart-btn:active{transform:scale(.98)}

.prod-card{background:#fff;border-radius:8px;border:1px solid var(--line-soft);padding:14px;transition:.2s;display:flex;flex-direction:column;position:relative;text-decoration:none;color:var(--ink);height:100%}
.prod-card:hover{text-decoration:none;color:var(--ink);box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:#CCC}
.prod-img{background:#F7F7F8;border-radius:6px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:18px;position:relative;overflow:hidden;margin-bottom:12px}
/* Keep the square shape for grid alignment, but a real photo needs far
   less padding than the placeholder icon to avoid a sea of white space. */
.prod-img:has(img){padding:6px}
.prod-img-wrap:has(img){padding:0}
.prod-img svg{max-width:88%;max-height:88%;transition:transform .35s}
.prod-card:hover .prod-img svg{transform:scale(1.06)}
/* Same look as .prod-img — used by the recently-viewed strip, "you might
   also like" cards, and seller/admin product cards. These three spots had
   no base styling at all before (only narrow height overrides elsewhere in
   this file applied on top of nothing), so images there rendered with no
   background, no padding, and no centering. */
.prod-img-wrap{background:#F7F7F8;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:10px;position:relative;overflow:hidden;margin-bottom:10px}
.prod-img-wrap img,.prod-img-wrap svg{max-width:100%;max-height:100%;object-fit:contain}
.prod-badge{position:absolute;top:8px;left:8px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:3px;letter-spacing:.4px;z-index:2}
.prod-badge.deal{background:var(--orange)}
.prod-badge.new{background:var(--success)}
.prod-badge.exp{background:#000;color:var(--cta);display:flex;align-items:center;gap:4px}
.prod-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);z-index:2;border:none;color:var(--dim);transition:.2s}
.prod-fav:hover{color:var(--danger);background:#fff;transform:scale(1.08)}
.prod-fav.on{color:var(--danger)}
.prod-fav.on::after{content:"♥"}.prod-fav::after{content:"♡"}
.prod-fav span{display:none}
.prod-brand{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}
.prod-title{font-size:14px;line-height:1.35;color:var(--ink);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;font-weight:400}
.prod-card:hover .prod-title{color:var(--teal-hover)}
.prod-rating{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--dim);margin-bottom:6px}
.prod-stars{color:var(--star);font-size:14px;letter-spacing:1px}
.prod-rating-count{color:var(--teal);font-size:12.5px}
.prod-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.prod-price .cur{font-size:13px;font-weight:600;color:var(--ink);position:relative;top:-6px}
.prod-price .now{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.5px;line-height:1}
.prod-price .was{font-size:13px;color:var(--dim);text-decoration:line-through}
.prod-price .off{font-size:12.5px;color:var(--danger);font-weight:600}
.prod-meta{font-size:12px;color:var(--dim);margin-bottom:10px;line-height:1.5}
.prod-meta b{color:var(--success);font-weight:600}
.prod-cta{margin-top:auto;display:flex;gap:6px}
.prod-cta .btn{flex:1;font-size:13px;padding:8px 10px}

/* ═══════════════════════════════════════════════════════════════
   DEAL OF THE DAY card (large feature)
   ═══════════════════════════════════════════════════════════════ */
.deal-feature{display:grid;grid-template-columns:1.4fr 1fr;gap:0;background:linear-gradient(120deg,#1a2541,#3b2a6d);color:#fff;border-radius:12px;overflow:hidden;margin-bottom:22px;position:relative}
.deal-feature::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,153,0,.25),transparent 70%);right:-200px;top:-200px;pointer-events:none}
.deal-text{padding:42px 46px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.deal-text .eb{font-size:12px;letter-spacing:3px;color:var(--cta);font-weight:700;text-transform:uppercase;margin-bottom:14px}
.deal-text h3{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;line-height:1.1;margin-bottom:14px}
.deal-text p{color:rgba(255,255,255,.85);font-size:15px;line-height:1.5;margin-bottom:18px;max-width:440px}
.deal-timer{display:flex;gap:8px;margin-bottom:22px}
.deal-timer .dt-box{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 14px;text-align:center;min-width:62px}
.deal-timer .dt-box b{display:block;font-size:24px;font-weight:800;line-height:1}
.deal-timer .dt-box small{font-size:10px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:1px;margin-top:4px;display:block}
.deal-visual{display:flex;align-items:center;justify-content:center;padding:30px;position:relative;z-index:2}
.deal-visual svg{max-height:280px;width:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.4))}

/* ═══════════════════════════════════════════════════════════════
   BENEFITS / PROMISE STRIP
   ═══════════════════════════════════════════════════════════════ */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:#fff;border-radius:10px;padding:22px;margin-top:18px;box-shadow:var(--shadow)}
.benefit{display:flex;align-items:center;gap:14px}
.benefit-ic{width:44px;height:44px;border-radius:10px;background:rgba(255,153,0,.1);display:flex;align-items:center;justify-content:center;color:var(--orange);flex-shrink:0}
.benefit:nth-child(2) .benefit-ic{background:rgba(20,184,166,.1);color:#0d9488}
.benefit:nth-child(3) .benefit-ic{background:rgba(59,130,246,.1);color:#2563eb}
.benefit:nth-child(4) .benefit-ic{background:rgba(139,92,246,.1);color:#7c3aed}
.benefit b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.benefit span{font-size:12.5px;color:var(--dim);line-height:1.45}

/* ═══════════════════════════════════════════════════════════════
   BRAND STRIP
   ═══════════════════════════════════════════════════════════════ */
.brand-strip{background:#fff;border-radius:10px;padding:28px;box-shadow:var(--shadow);text-align:center}
.brand-strip h3{font-size:1rem;color:var(--dim);font-weight:500;margin-bottom:18px;letter-spacing:1px;text-transform:uppercase}
.brand-row{display:flex;justify-content:space-around;align-items:center;gap:16px;flex-wrap:wrap}
.brand-row span{font-size:18px;font-weight:700;color:#888;font-family:Inter,sans-serif;letter-spacing:.2px;transition:.2s;cursor:default;padding:8px 16px;border-radius:8px}
.brand-row span:hover{color:var(--ink);background:#F4F4F4}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════ */
.newsletter{background:linear-gradient(120deg,var(--header),var(--subheader));color:#fff;border-radius:14px;padding:42px 44px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden;margin-top:18px}
.newsletter::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,20,.15),transparent 70%);right:-100px;top:-200px;pointer-events:none}
.newsletter h3{font-size:1.7rem;font-weight:800;margin-bottom:8px;letter-spacing:-.5px;position:relative}
.newsletter p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.5;position:relative}
.newsletter-form{display:flex;gap:8px;position:relative}
.newsletter-form input{flex:1;padding:13px 18px;border-radius:8px;border:none;font-size:14.5px;background:#fff;color:var(--ink);outline:none}
.newsletter-form input:focus{box-shadow:var(--ring)}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.back-top{background:var(--subheader-hover);color:#fff;text-align:center;padding:16px;font-size:13.5px;font-weight:500;cursor:pointer;transition:.2s;display:block;border:none;width:100%}
.back-top:hover{background:#485769}

footer{background:var(--subheader);color:#fff}
.foot-main{padding:48px 0 36px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;width:100%}
.foot-col h5{font-size:15px;font-weight:700;margin-bottom:14px;color:#fff;letter-spacing:.2px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:9px}
.foot-col a{color:#DDD;font-size:13px;line-height:1.4;transition:.15s}
.foot-col a:hover{text-decoration:underline;color:#fff}

.foot-divider{border-top:1px solid #3a4553}
.foot-mid{padding:22px 0;text-align:center}
.foot-mid .logo{display:inline-flex;border-color:transparent}
.foot-mid .lang-row{display:flex;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.foot-mid .lang-row button{border:1px solid #56636E;color:#fff;padding:8px 16px;border-radius:4px;font-size:12.5px;background:transparent;cursor:pointer;transition:.15s}
.foot-mid .lang-row button:hover{border-color:#fff}

.foot-bot{background:var(--header);padding:24px 0;text-align:center;font-size:11.5px;color:#999}
.foot-bot .row{margin-bottom:8px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.foot-bot .row a{color:#DDD;font-size:11.5px}
.foot-bot .credit{font-size:12px;color:#bbb;padding:12px 0;border-top:1px solid #232938;margin-top:14px}
.foot-bot .credit a{color:var(--cta);font-weight:600}
.foot-bot .credit a:hover{color:#fff;text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY page — sidebar + grid
   ═══════════════════════════════════════════════════════════════ */
.cat-page{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start;padding:18px 0}
.cat-sidebar{background:var(--card);border-radius:8px;padding:18px 20px;box-shadow:var(--shadow);position:sticky;top:118px;max-height:calc(100vh - 138px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cat-sidebar h4{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:10px;margin-top:18px}
.cat-sidebar h4:first-of-type{margin-top:0}
.cat-sidebar ul{list-style:none;margin-bottom:8px}
.cat-sidebar li{margin-bottom:7px}
.cat-sidebar li a,.cat-sidebar li label{font-size:13.5px;color:var(--teal);display:flex;align-items:center;gap:6px;cursor:pointer;line-height:1.4}
.cat-sidebar li a:hover,.cat-sidebar li label:hover{color:var(--teal-hover);text-decoration:underline}
.cat-sidebar li.active a{color:var(--ink);font-weight:700;text-decoration:none}
.cat-stars-filter{font-size:13.5px;color:var(--teal);display:flex;align-items:center;gap:4px;cursor:pointer}
.cat-stars-filter .stars{color:var(--star)}
.cat-price-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.cat-price-row input{flex:1;padding:7px 9px;border:1px solid #ccc;border-radius:4px;font-size:13px;width:0;min-width:0;outline:none}
.cat-price-row input:focus{border-color:var(--orange);box-shadow:var(--ring)}
.cat-price-row .btn{padding:7px 14px;font-size:13px}

.cat-main{background:#fff;border-radius:8px;padding:20px;box-shadow:var(--shadow)}
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);gap:14px;flex-wrap:wrap}
.cat-toolbar h1{font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.cat-toolbar .cat-meta{font-size:13.5px;color:var(--dim)}
.cat-toolbar .sort{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.cat-toolbar select{padding:7px 10px;border:1px solid #ccc;border-radius:4px;font-size:13.5px;background:#F0F2F2;cursor:pointer}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT detail page
   ═══════════════════════════════════════════════════════════════ */
.crumb{font-size:13px;color:var(--dim);padding:14px 0}
.crumb a{color:var(--teal)}.crumb span{margin:0 6px;color:var(--faint)}

.pdp{display:grid;grid-template-columns:1.1fr 1.4fr .9fr;gap:22px;align-items:start;padding-bottom:36px}
.pdp-gal{background:#fff;border-radius:10px;padding:20px;box-shadow:var(--shadow);position:sticky;top:118px}
.pdp-main-img{aspect-ratio:1;background:#F7F7F8;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:32px;margin-bottom:14px}
.pdp-main-img svg{max-width:88%;max-height:88%}
/* A real uploaded photo gets its own, much lighter treatment: no forced
   square crop, minimal padding, sized to the photo itself (up to a sane
   max-height) instead of squeezed into a fixed box with 52px of padding
   on every side. */
.pdp-main-img:has(img){aspect-ratio:auto;padding:8px}
.pdp-main-img img{display:block;width:100%;max-height:460px;object-fit:contain;border-radius:6px}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pdp-thumb{aspect-ratio:1;background:#F7F7F8;border:2px solid transparent;border-radius:6px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.pdp-thumb svg{max-width:80%;max-height:80%}
.pdp-thumb.on,.pdp-thumb:hover{border-color:var(--orange)}

.pdp-info{background:#fff;border-radius:10px;padding:26px;box-shadow:var(--shadow)}
.pdp-info .brand{font-size:14px;color:var(--teal);font-weight:500;margin-bottom:4px}
.pdp-info h1{font-size:1.6rem;font-weight:500;line-height:1.25;color:var(--ink);margin-bottom:10px;letter-spacing:-.2px}
.pdp-rating{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px;font-size:13.5px;color:var(--teal)}
.pdp-rating .stars{color:var(--star);font-size:16px}
.pdp-price{padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.price-skeleton{width:160px;height:34px;border-radius:6px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:priceShimmer 1.2s ease-in-out infinite}
@keyframes priceShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pdp-price .off-tag{display:inline-block;background:var(--danger);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:4px;letter-spacing:.3px;margin-bottom:8px}
.pdp-price .now{font-size:30px;color:var(--danger);font-weight:500;letter-spacing:-.5px}
.pdp-price .cur{font-size:15px;font-weight:600;color:var(--danger);position:relative;top:-12px;margin-right:2px}
.pdp-price .was{font-size:14px;color:var(--dim);text-decoration:line-through;margin-left:10px}
.pdp-price small{display:block;color:var(--dim);font-size:12.5px;margin-top:4px}

.pdp-options{margin-bottom:14px}
.pdp-options h4{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.pdp-opt-row{display:flex;gap:8px;flex-wrap:wrap}
.pdp-opt{padding:8px 14px;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer;font-size:13px;transition:.15s}
.pdp-opt:hover{border-color:var(--ink)}
.pdp-opt.on{border-color:var(--orange);background:#FFF7E0;box-shadow:0 0 0 2px rgba(255,153,0,.15)}
.pdp-color{width:36px;height:36px;border-radius:50%;border:2px solid #ccc;cursor:pointer;padding:0;flex-shrink:0;transition:.15s}
.pdp-color.on{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,153,0,.4)}

.pdp-feats{list-style:none;padding-top:14px;border-top:1px solid var(--line-soft);margin-top:14px}
.pdp-feats li{font-size:13.5px;color:var(--ink-2);padding:5px 0;padding-left:16px;position:relative;line-height:1.4}
.pdp-feats li::before{content:"•";position:absolute;left:2px;color:var(--orange);font-weight:700;font-size:16px;top:3px;line-height:1}

.pdp-buy{background:#fff;border-radius:10px;padding:22px;box-shadow:var(--shadow);position:sticky;top:118px}
.pdp-buy .now{font-size:24px;font-weight:600;color:var(--ink);margin-bottom:4px}
.pdp-buy .cur{font-size:14px;font-weight:600;color:var(--ink);position:relative;top:-8px}
.pdp-buy .ship{color:var(--success);font-size:13.5px;font-weight:600;margin-bottom:4px}
.pdp-buy .deliver-est{font-size:14px;color:var(--ink);margin-bottom:14px;line-height:1.4}
.pdp-buy .deliver-est b{color:var(--ink)}
.pdp-buy .stock{font-size:16px;color:var(--success);font-weight:600;margin-bottom:14px}
.pdp-buy .qty-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pdp-buy .qty-row label{font-size:13.5px;color:var(--ink)}
.pdp-buy .qty-row select{padding:6px 10px;border:1px solid #ccc;border-radius:6px;background:#F0F2F2;font-size:13.5px;cursor:pointer}
.pdp-buy .btn{display:flex;width:100%;margin-bottom:8px}
.pdp-buy .secure-list{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--dim);line-height:1.8}
.pdp-buy .secure-list b{color:var(--ink-2);font-weight:600}

/* PDP description, specs, reviews sections */
.pdp-tabs{background:#fff;border-radius:10px;padding:26px 30px;box-shadow:var(--shadow);margin-bottom:18px}
.pdp-tabs h2{font-size:1.3rem;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.pdp-tabs p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:12px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px}
.spec-row{display:grid;grid-template-columns:160px 1fr;padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;gap:14px}
.spec-row:nth-child(odd){background:#F7F7F8}
.spec-row b{color:var(--ink);font-weight:600}
.spec-row span{color:var(--ink-2)}

.review{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.review:last-child{border-bottom:none}
.review-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.review-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--danger));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.review-author b{display:block;font-size:14px;color:var(--ink)}
.review-author small{font-size:12px;color:var(--dim)}
.review h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.review .stars{color:var(--star);font-size:14px;margin-bottom:4px}
.review p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.review .verified{font-size:11.5px;color:var(--orange-deep);font-weight:600;margin-top:6px;display:inline-block}

/* ═══════════════════════════════════════════════════════════════
   CART page
   ═══════════════════════════════════════════════════════════════ */
.cart-page{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;padding:18px 0}
.cart-list{background:var(--card);border-radius:10px;padding:20px 22px;box-shadow:var(--shadow)}
.cart-list h1{font-size:1.5rem;font-weight:700;color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--line-soft);margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.cart-list h1 small{font-size:13px;color:var(--dim);font-weight:400}
.cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.cart-item:last-child{border-bottom:none}
.cart-img{background:#F7F7F8;border-radius:8px;width:88px;height:88px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.cart-img svg{width:70px;height:70px;max-width:100%;max-height:100%}
.cart-info h4{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:4px}
.cart-info h4 a{color:var(--ink)}.cart-info h4 a:hover{color:var(--teal-hover)}
.cart-info .meta{font-size:13px;color:var(--dim);margin-bottom:4px}
.cart-info .ship{color:var(--success);font-size:12.5px;font-weight:600;margin-bottom:8px}
.cart-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--teal);margin-top:4px}
.cart-actions select{padding:5px 8px;border:1px solid #ccc;border-radius:4px;background:#F0F2F2;font-size:13px;cursor:pointer}
.cart-actions a{cursor:pointer;font-size:13px}
.cart-actions .sep{color:var(--line)}
.cart-price{text-align:right}
.cart-price b{font-size:18px;font-weight:700;color:var(--ink);display:block}
.cart-total-row{padding-top:14px;text-align:right;font-size:17px;color:var(--ink)}
.cart-total-row b{font-size:21px;color:var(--danger);font-weight:700;margin-left:6px}

.cart-summary{background:var(--card);border-radius:10px;padding:18px;box-shadow:var(--shadow);position:sticky;top:118px;overflow:hidden}
.cart-summary .total-line{font-size:15px;color:var(--ink);margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
.cart-summary .total-line b{font-size:16px;color:var(--danger);font-weight:700}
.cart-summary .gift{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.cart-empty{text-align:center;padding:60px 20px}
.cart-empty .ic{font-size:64px;margin-bottom:14px;color:var(--orange);opacity:.5}
.cart-empty h2{font-size:1.4rem;color:var(--ink);margin-bottom:8px}
.cart-empty p{color:var(--dim);margin-bottom:18px}

/* ═══════════════════════════════════════════════════════════════
   ABOUT page
   ═══════════════════════════════════════════════════════════════ */
.about-hero{background:linear-gradient(120deg,#1a2541,#7a3aa8);color:#fff;padding:78px 0 64px;text-align:center;position:relative;overflow:hidden}
.about-hero::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,20,.18),transparent 70%);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.about-hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;margin-bottom:14px;position:relative;letter-spacing:-1px}
.about-hero h1 span{color:var(--cta)}
.about-hero p{font-size:17px;color:rgba(255,255,255,.85);max-width:660px;margin:0 auto;position:relative;line-height:1.55}

.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px 0 18px}
.about-card{background:#fff;padding:30px 26px;border-radius:10px;box-shadow:var(--shadow);text-align:center}
.about-card .num{font-size:38px;font-weight:800;color:var(--orange);letter-spacing:-1px;line-height:1;margin-bottom:6px}
.about-card h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.about-card p{font-size:13.5px;color:var(--dim);line-height:1.55}

.about-story{background:#fff;border-radius:10px;padding:42px 50px;box-shadow:var(--shadow);margin-bottom:18px}
.about-story h2{font-size:1.7rem;font-weight:800;margin-bottom:18px;color:var(--ink);letter-spacing:-.4px}
.about-story p{font-size:15px;line-height:1.7;color:var(--ink-2);margin-bottom:14px;max-width:880px}

.about-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.about-contact-card{background:#fff;padding:30px 26px;border-radius:10px;box-shadow:var(--shadow);text-align:center}
.about-contact-card .ic{font-size:32px;margin-bottom:10px}
.about-contact-card h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.about-contact-card a,.about-contact-card p{font-size:13.5px;color:var(--teal)}
.about-contact-card p{color:var(--dim)}

/* ═══════════════════════════════════════════════════════════════
   TOAST + MODAL
   ═══════════════════════════════════════════════════════════════ */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:8px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);z-index:9999;transition:.3s;display:flex;align-items:center;gap:10px;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast .ic{font-size:18px;color:var(--success)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE (Android-first)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1280px){
  .cat-tiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
  .prod-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .util{display:none}
  .head .wrap{flex-wrap:wrap}
  .deliver{display:none}
  .search-wrap{order:5;width:100%;flex-basis:100%;margin-top:8px}
  .hd-link.orders{display:none}
  .cat-page{grid-template-columns:1fr}
  .cat-sidebar{position:static}
  .pdp{grid-template-columns:1fr}
  .pdp-gal,.pdp-buy{position:static}
  .cart-page{grid-template-columns:1fr}
  .cart-summary{position:static}
  .deal-feature{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr;padding:30px 26px}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .benefits{grid-template-columns:1fr 1fr}
  .about-grid,.about-contact{grid-template-columns:1fr}
  .hero-slide{padding:0 clamp(16px,4vw,60px)}
  .hero-art{display:none}
  .hero-slides{height:340px}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
  .prod-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 12px}
  .logo svg{height:28px}.logo-text b{font-size:18px}
  .hd-link.account small{display:none}
  .cat-tiles{grid-template-columns:1fr;margin-top:-60px}
  .prod-grid,.prod-grid.cols-4,.cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-card{padding:10px}
  .prod-img{padding:12px}
  .prod-title{font-size:13px}
  .prod-price .now{font-size:18px}
  .hero-slides{height:280px}
  .hero-content h2{font-size:1.7rem}
  .hero-content p{font-size:14px}
  .hero-arrow{display:none}
  .cart-item{grid-template-columns:80px 1fr;gap:12px}
  .cart-img{aspect-ratio:1}
  .cart-price{grid-column:1/-1;text-align:left;padding-left:92px;margin-top:-12px}
  .pdp-info,.pdp-buy{padding:18px}
  .deal-text{padding:28px}
  .about-story{padding:28px 22px}
}

/* touch */
@media (hover:none),(pointer:coarse){
  *{-webkit-tap-highlight-color:transparent}
  .prod-card:active,.cat-tile:active,.btn:active{transform:scale(.98)}
}

/* ═══════════════════════════════════════════════════════════════
   ANDROID-FIRST FIXES (everything below 640px)
   These overrides come LAST in the file so they win cascade.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:640px){

  /* ── HEADER: compact 2-row layout ── */
  .head{padding:6px 0}
  .head .wrap{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo search cart";
    gap:6px;
    align-items:center;
  }
  .logo{grid-area:logo;padding:4px 6px;flex-shrink:0;min-width:0}
  .logo svg{height:30px}
  .logo-text b{font-size:18px}
  .logo-text small{font-size:8.5px;letter-spacing:1px}

  .deliver,
  .hd-link.account,
  .hd-link.orders{display:none !important}

  /* search takes the middle */
  .search-wrap{
    grid-area:search;
    order:0 !important;
    width:auto !important;
    flex-basis:auto !important;
    margin-top:0 !important;
    height:38px;
    min-width:0;
  }
  .search-cat{display:none}        /* hide category dropdown on phone */
  .search-input{padding:0 10px;font-size:14px}
  .search-input::placeholder{color:#888}
  .search-btn{padding:0 12px;font-size:16px}

  /* cart visible next to search */
  .cart-btn{
    grid-area:cart;
    padding:6px 8px;
    flex-direction:row;
    gap:4px;
    min-height:44px;
    align-items:center;
  }
  .cart-btn b{font-size:11.5px;margin:0}
  .cart-ic{font-size:24px}
  .cart-count{
    min-width:18px;height:16px;font-size:11px;
    top:-4px;right:-4px;padding:0 4px;
  }

  /* ── SUB-NAV: scroll-snap + subtle fade hint ── */
  .subnav{position:relative;overflow:hidden}
  .subnav .wrap{
    scroll-snap-type:x proximity;
    padding-right:32px;
  }
  .subnav .wrap > *{scroll-snap-align:start}
  .subnav::after{
    content:"";
    position:absolute;top:0;right:0;bottom:0;width:36px;
    background:linear-gradient(to right,transparent,#232F3E);
    pointer-events:none;
  }
  .subnav a,.subnav button{padding:9px 9px;font-size:13px}

  /* ── HERO: ensure both CTAs visible, smaller padding ── */
  .hero-slides{height:auto;min-height:340px}
  .hero-slide{padding:24px 18px;align-items:flex-start;padding-top:28px}
  .hero-content{max-width:100%;width:100%}
  .hero-content h2{font-size:1.6rem;line-height:1.1}
  .hero-content p{font-size:13.5px;line-height:1.45;margin-bottom:18px}
  .hero-eyebrow{font-size:10px;padding:4px 10px;margin-bottom:10px}
  .hero-cta{flex-direction:row;gap:8px}
  .hero-cta .btn{flex:1;font-size:13px;padding:10px 12px;text-align:center}
  .hero-dots{bottom:10px}
  .hero-dots i{width:8px;height:8px}
  .hero-dots i.on{width:22px}

  /* ── CAT-TILES: visible without extreme negative margin ── */
  .cat-tiles{margin-top:-30px;gap:12px}
  .cat-tile{padding:16px}
  .cat-tile h3{font-size:15px;margin-bottom:10px}
  .cat-tile-grid{gap:8px}

  /* ── BENEFITS: 2x2 with smaller padding ── */
  .benefits{grid-template-columns:1fr 1fr;gap:14px;padding:16px}
  .benefit{flex-direction:column;text-align:center;gap:8px}
  .benefit-ic{width:38px;height:38px}
  .benefit b{font-size:13px}
  .benefit span{font-size:11.5px;line-height:1.35}

  /* ── DEAL OF DAY: tighter ── */
  .deal-feature{margin-bottom:14px}
  .deal-text{padding:24px 20px}
  .deal-text h3{font-size:1.4rem}
  .deal-text p{font-size:13.5px;margin-bottom:14px}
  .deal-timer .dt-box{padding:8px 11px;min-width:54px}
  .deal-timer .dt-box b{font-size:20px}
  .deal-visual{padding:20px;display:none}      /* save vertical space */

  /* ── SECTION HEADERS: keep title + link on one row ── */
  .sec-head{align-items:center;margin-bottom:14px;flex-wrap:nowrap;gap:10px}
  .sec-head h2{font-size:1.05rem;flex:1;min-width:0}
  .sec-head a{font-size:12px;white-space:nowrap;flex-shrink:0}
  .prod-row{padding:14px}

  /* ── PRODUCT CARDS: cleaner spacing, fixes price layout ── */
  .prod-card{padding:10px;border-radius:6px}
  .prod-img{padding:8px;margin-bottom:8px}
  .prod-brand{font-size:10px;letter-spacing:.4px}
  .prod-title{font-size:12.5px;line-height:1.3;min-height:34px}
  .prod-rating{font-size:11.5px;gap:3px;margin-bottom:4px}
  .prod-stars{font-size:12px}
  .prod-rating-count{font-size:11px}
  .prod-price{margin-bottom:4px;gap:6px}
  .prod-price .cur{font-size:11px;top:-4px}
  .prod-price .now{font-size:18px}
  .prod-price .was{font-size:11px}
  .prod-price .off{font-size:10.5px}
  .prod-meta{font-size:10.5px;margin-bottom:8px;line-height:1.4}
  .prod-cta .btn{padding:8px 6px;font-size:12.5px;min-height:38px}
  .prod-badge{font-size:9.5px;padding:2px 6px;top:6px;left:6px}

  /* heart button - bigger tap target */
  .prod-fav{width:34px;height:34px;font-size:15px;top:6px;right:6px}

  /* ── BRAND STRIP: smaller ── */
  .brand-strip{padding:18px 14px}
  .brand-strip h3{font-size:.8rem;margin-bottom:12px}
  .brand-row{gap:6px}
  .brand-row span{font-size:13px;padding:5px 8px}

  /* ── NEWSLETTER: stack input + button ── */
  .newsletter{padding:24px 20px;border-radius:10px}
  .newsletter h3{font-size:1.25rem;margin-bottom:6px}
  .newsletter p{font-size:13px;line-height:1.4;margin-bottom:14px}
  .newsletter-form{flex-direction:column;gap:8px}
  .newsletter-form input{width:100%;padding:12px 14px;font-size:14px;border-radius:8px}
  .newsletter-form .btn{width:100%;padding:12px;font-size:14px}

  /* ── BACK TO TOP / FOOTER ── */
  .back-top{padding:14px;font-size:13px}
  .foot-main{padding:30px 0 20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 18px;padding:0 12px}
  .foot-col h5{font-size:14px;margin-bottom:10px}
  .foot-col li{margin-bottom:7px}
  .foot-col a{font-size:12.5px}
  .foot-mid{padding:18px 0}
  .foot-mid .lang-row{gap:6px}
  .foot-mid .lang-row button{padding:7px 12px;font-size:11.5px}
  .foot-bot{padding:18px 0}
  .foot-bot .row{gap:10px;margin-bottom:6px}
  .foot-bot .row a{font-size:11px}
  .foot-bot{font-size:11px}
  .foot-bot .credit{font-size:11.5px;padding:10px 0}

  /* ── CATEGORY PAGE: filter button + drawer ── */
  .cat-page{padding:10px 0;gap:0}
  .cat-sidebar{
    position:fixed !important;
    inset:0;
    z-index:9500;
    border-radius:0;
    padding:0;
    transform:translateX(-100%);
    transition:transform .28s ease;
    overflow-y:auto;
    background:#fff;
    display:flex;
    flex-direction:column;
    box-shadow:none;
  }
  .cat-sidebar.open{transform:translateX(0)}
  .cat-sidebar::before{
    content:"Filters";
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    font-size:17px;
    font-weight:700;
    border-bottom:1px solid var(--line-soft);
    background:var(--bg);
    position:sticky;top:0;z-index:2;
  }
  .cat-sidebar-close{
    position:fixed;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
    background:#fff;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:700;cursor:pointer;z-index:9600;
    box-shadow:var(--shadow);
  }
  body.filters-open{overflow:hidden}
  body.filters-open::after{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9400;
  }
  .cat-sidebar > h4:first-of-type{margin-top:14px;padding-left:18px}
  .cat-sidebar h4{padding-left:18px}
  .cat-sidebar ul,.cat-sidebar .cat-price-row{padding:0 18px}
  .cat-sidebar li{margin-bottom:10px}
  .cat-sidebar li a,
  .cat-sidebar li label{font-size:14.5px;padding:6px 0}
  /* mobile filter button — shown only on mobile */
  .mobile-filter-bar{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    padding:10px 12px;
    margin-bottom:10px;
    border-radius:8px;
    box-shadow:var(--shadow);
    position:sticky;top:0;
    z-index:200;
  }
  .mobile-filter-btn{
    flex:1;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    padding:9px 12px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .mobile-filter-bar .sort{flex:1;display:flex;align-items:center;gap:6px}
  .mobile-filter-bar .sort label{font-size:13px;color:var(--dim);white-space:nowrap}
  .mobile-filter-bar select{flex:1;padding:8px 8px;font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:6px;min-width:0}

  .cat-main{padding:14px;border-radius:8px}
  .cat-toolbar{padding-bottom:10px;margin-bottom:10px;gap:8px;flex-wrap:wrap}
  .cat-toolbar h1{font-size:1.2rem}
  .cat-toolbar .cat-meta{font-size:12.5px}
  /* hide desktop toolbar sort on mobile (moved into the sticky bar) */
  .cat-toolbar .sort{display:none}
  .cat-grid{gap:8px}

  /* ── PRODUCT DETAIL ── */
  .pdp{padding-bottom:24px;gap:12px}
  .pdp-gal,.pdp-info,.pdp-buy{padding:14px;border-radius:8px}
  .pdp-info h1{font-size:1.25rem;line-height:1.25;margin-bottom:8px}
  .pdp-info .brand{font-size:13px}
  .pdp-main-img{padding:18px}
  .pdp-thumb{padding:5px}
  .pdp-rating{font-size:12.5px;padding-bottom:10px;margin-bottom:10px}
  .pdp-rating .stars{font-size:14px}
  .pdp-price .now{font-size:24px}
  .pdp-price .cur{font-size:13px;top:-9px}
  .pdp-price .was{font-size:12.5px}
  .pdp-price .off-tag{font-size:11px;padding:2px 8px}
  .pdp-price small{font-size:11.5px}
  .pdp-options h4{font-size:13px}
  .pdp-opt{padding:7px 11px;font-size:12.5px;min-height:36px}
  .pdp-color{width:32px;height:32px;min-height:36px;min-width:36px}
  .pdp-feats li{font-size:13px;padding:4px 0 4px 16px}

  .pdp-buy .now{font-size:21px}
  .pdp-buy .cur{font-size:12px;top:-6px}
  .pdp-buy .ship,.pdp-buy .deliver-est{font-size:13px}
  .pdp-buy .stock{font-size:14.5px}
  .pdp-buy .qty-row{margin-bottom:10px}
  .pdp-buy .qty-row select{padding:8px 10px;font-size:13.5px;min-height:38px}
  .pdp-buy .btn{padding:11px;min-height:44px}
  .pdp-buy .secure-list{font-size:11.5px;line-height:1.7}

  .pdp-tabs{padding:18px 16px;border-radius:8px}
  .pdp-tabs h2{font-size:1.1rem;margin-bottom:12px;padding-bottom:8px}
  .pdp-tabs p{font-size:13.5px;line-height:1.55}
  .specs{grid-template-columns:1fr}
  .spec-row{grid-template-columns:110px 1fr;padding:9px 12px;font-size:12.5px;gap:8px}
  .review{padding:14px 0}
  .review h4{font-size:13.5px}
  .review p{font-size:12.5px;line-height:1.5}
  .review-avatar{width:32px;height:32px;font-size:12px}
  .review-author b{font-size:13px}
  .review-author small{font-size:11px}

  /* ── CART ── */
  .cart-page{padding:12px 0;gap:12px}
  .cart-list{padding:16px;border-radius:8px}
  .cart-list h1{font-size:1.25rem;margin-bottom:12px;padding-bottom:8px;flex-direction:column;align-items:flex-start;gap:2px}
  .cart-list h1 small{font-size:13px}
  .cart-item{
    grid-template-columns:90px 1fr;
    grid-template-areas:"img info" "img price";
    gap:10px 12px;
    padding:14px 0;
    align-items:start;
  }
  .cart-img{grid-area:img}
  .cart-info{grid-area:info;min-width:0}
  .cart-info h4{font-size:14px;line-height:1.3}
  .cart-info .meta,.cart-info .ship{font-size:11.5px}
  .cart-actions{font-size:12.5px;gap:8px;margin-top:6px}
  .cart-actions select{padding:5px 8px;font-size:12.5px;min-height:36px}
  .cart-price{
    grid-area:price;
    text-align:left;
    padding:0 !important;
    margin:0 !important;
  }
  .cart-price b{font-size:16px}
  .cart-total-row{font-size:14.5px;padding-top:10px}
  .cart-total-row b{font-size:18px}
  .cart-summary{padding:16px;border-radius:8px;position:static !important}
  .cart-summary .total-line{font-size:14.5px}
  .cart-summary .total-line b{font-size:18px}
  .cart-empty{padding:40px 16px}
  .cart-empty .ic{font-size:50px}
  .cart-empty h2{font-size:1.2rem}

  /* ── ABOUT ── */
  .about-hero{padding:42px 0 36px}
  .about-hero h1{font-size:1.8rem;line-height:1.1}
  .about-hero p{font-size:14px;line-height:1.5;padding:0 6px}
  .about-grid,.about-contact{grid-template-columns:1fr;gap:12px;padding:16px 0 8px}
  .about-card,.about-contact-card{padding:22px 18px}
  .about-card .num{font-size:30px}
  .about-card h4{font-size:15px}
  .about-card p,.about-contact-card p{font-size:13px}
  .about-story{padding:24px 18px;border-radius:8px}
  .about-story h2{font-size:1.3rem;margin-bottom:12px}
  .about-story p{font-size:13.5px;line-height:1.6;margin-bottom:10px}

  /* ── TOAST ── */
  .toast{bottom:16px;font-size:13px;padding:11px 18px;max-width:calc(100vw - 32px)}

  /* ── REGION PICKER (mobile-safe) ── */
  .region-picker-overlay{padding:40px 10px !important}
  .region-picker-overlay > div{padding:18px !important}
  .region-picker-overlay [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* ── breadcrumb ── */
  .crumb{font-size:11.5px;padding:10px 0}
}

/* ── BETWEEN 640 and 980 (small tablets / large phones landscape) ── */
@media (min-width:641px) and (max-width:980px){
  .head .wrap{flex-wrap:wrap;gap:10px}
  .logo{flex-shrink:0}
  .deliver,.hd-link.account{display:flex}
  .hd-link.orders{display:none}
  .search-wrap{order:5;width:100%;flex-basis:100%;margin-top:8px;height:42px}
  .search-cat{display:block}
  .cart-btn{flex-direction:column;padding:6px 10px}
  .cart-btn b{font-size:13px;margin-top:-2px}
  .cart-btn{padding:4px 8px}
}

/* ── ANY POINTER:COARSE (touch device) ── */
@media (pointer:coarse){
  /* hover-only states fall back gracefully */
  .prod-card:hover{transform:none;box-shadow:var(--shadow)}
  .cat-tile:hover{transform:none;box-shadow:var(--shadow)}
  .btn:hover{transform:none}
  /* ensure tap targets ≥ 40px */
  .prod-fav{min-width:36px;min-height:36px}
  .pdp-thumb{min-height:48px}
  .prod-cta .btn{min-height:40px}
  /* hide hover-only arrows on touch */
  .hero-arrow{display:none !important}
}

/* ═══════════════════════════════════════════════════════════════
   THEME SYSTEM — 10 themes via [data-theme] on <html>
   Default (no attribute) = Amazon light
   ═══════════════════════════════════════════════════════════════ */

/* ── AMAZON DARK ── */
[data-theme="dark"]{
  --header:#0a0d12; --subheader:#161c25; --subheader-hover:#222a35;
  --cta:#FFD814; --cta-hover:#F7CA00; --cta-border:#FCD200;
  --orange:#FF9900; --orange-deep:#cc7a00;
  --teal:#22d3ee; --teal-hover:#67e8f9; --star:#FFD700;
  --success:#10b981; --danger:#f87171;
  --bg:#0f1419; --bg-band:#161c25; --card:#1a212c; --line:#2a3340; --line-soft:#222a35;
  --ink:#e8eaed; --ink-2:#cfd2d6; --dim:#9ba1a8; --faint:#6c7178;
  --shadow:0 2px 6px rgba(0,0,0,.5); --shadow-lg:0 4px 24px rgba(0,0,0,.6); --shadow-hover:0 6px 28px rgba(0,0,0,.7);
}
[data-theme="dark"] .prod-img,
[data-theme="dark"] .pdp-main-img,
[data-theme="dark"] .pdp-thumb,
[data-theme="dark"] .cat-tile-cell,
[data-theme="dark"] .cart-img{background:#0c1118}
[data-theme="dark"] .brand-row span{color:#9ba1a8}
[data-theme="dark"] .brand-row span:hover{background:#222a35;color:#e8eaed}
[data-theme="dark"] .search-cat{background:#374151;color:#e8eaed;border-right-color:#2a3340}
[data-theme="dark"] .cat-toolbar select,
[data-theme="dark"] .pdp-buy .qty-row select,
[data-theme="dark"] .cart-actions select{background:#161c25;color:#e8eaed;border-color:#2a3340}
[data-theme="dark"] .pdp-opt{background:#161c25;color:#e8eaed;border-color:#2a3340}
[data-theme="dark"] .pdp-opt.on{background:rgba(255,153,0,.15)}
[data-theme="dark"] .spec-row:nth-child(odd){background:#161c25}
[data-theme="dark"] .util a:hover{color:#FFD814}

/* ── MIDNIGHT BLUE (dark) ── */
[data-theme="midnight"]{
  --header:#0a1530; --subheader:#142250; --subheader-hover:#1f3478;
  --cta:#fbbf24; --cta-hover:#f59e0b; --cta-border:#d97706;
  --orange:#fb923c; --orange-deep:#ea580c;
  --teal:#60a5fa; --teal-hover:#93c5fd; --star:#fbbf24;
  --success:#34d399; --danger:#f87171;
  --bg:#0e1a3a; --bg-band:#142250; --card:#1a2961; --line:#2a3a7a; --line-soft:#22326a;
  --ink:#e6ecff; --ink-2:#c9d4f5; --dim:#8b97c3; --faint:#5e6a96;
  --shadow:0 2px 8px rgba(0,0,0,.5); --shadow-lg:0 4px 28px rgba(10,21,48,.6); --shadow-hover:0 8px 32px rgba(10,21,48,.7);
}
[data-theme="midnight"] .prod-img,
[data-theme="midnight"] .pdp-main-img,
[data-theme="midnight"] .pdp-thumb,
[data-theme="midnight"] .cat-tile-cell,
[data-theme="midnight"] .cart-img{background:#0d1a3d}
[data-theme="midnight"] .brand-row span{color:#8b97c3}
[data-theme="midnight"] .brand-row span:hover{background:#22326a;color:#e6ecff}
[data-theme="midnight"] .pdp-opt,
[data-theme="midnight"] .cat-toolbar select,
[data-theme="midnight"] .pdp-buy .qty-row select,
[data-theme="midnight"] .cart-actions select,
[data-theme="midnight"] .search-cat{background:#142250;color:#e6ecff;border-color:#2a3a7a}
[data-theme="midnight"] .spec-row:nth-child(odd){background:#142250}

/* ── SUNSET (warm light) ── */
[data-theme="sunset"]{
  --header:#7c2d12; --subheader:#9a3412; --subheader-hover:#c2410c;
  --cta:#fbbf24; --cta-hover:#f59e0b; --cta-border:#d97706;
  --orange:#ea580c; --orange-deep:#c2410c;
  --teal:#dc2626; --teal-hover:#7c2d12; --star:#f59e0b;
  --success:#15803d; --danger:#991b1b;
  --bg:#fff7ed; --bg-band:#ffedd5; --card:#ffffff; --line:#fed7aa; --line-soft:#ffe4cc;
  --ink:#431407; --ink-2:#7c2d12; --dim:#9a3412; --faint:#c2410c;
}
[data-theme="sunset"] .prod-img,
[data-theme="sunset"] .pdp-main-img,
[data-theme="sunset"] .pdp-thumb,
[data-theme="sunset"] .cat-tile-cell,
[data-theme="sunset"] .cart-img{background:#fff1e0}

/* ── FOREST (green light) ── */
[data-theme="forest"]{
  --header:#14532d; --subheader:#15803d; --subheader-hover:#166534;
  --cta:#bef264; --cta-hover:#a3e635; --cta-border:#84cc16;
  --orange:#16a34a; --orange-deep:#15803d;
  --teal:#059669; --teal-hover:#047857; --star:#eab308;
  --success:#15803d; --danger:#991b1b;
  --bg:#f0fdf4; --bg-band:#dcfce7; --card:#ffffff; --line:#bbf7d0; --line-soft:#d1fae5;
  --ink:#052e16; --ink-2:#14532d; --dim:#166534; --faint:#15803d;
}
[data-theme="forest"] .prod-img,
[data-theme="forest"] .pdp-main-img,
[data-theme="forest"] .pdp-thumb,
[data-theme="forest"] .cat-tile-cell,
[data-theme="forest"] .cart-img{background:#ecfdf5}

/* ── ROYAL PURPLE (dark) ── */
[data-theme="royal"]{
  --header:#2e1065; --subheader:#4c1d95; --subheader-hover:#6d28d9;
  --cta:#fde047; --cta-hover:#facc15; --cta-border:#eab308;
  --orange:#d946ef; --orange-deep:#a21caf;
  --teal:#c4b5fd; --teal-hover:#ddd6fe; --star:#fbbf24;
  --success:#34d399; --danger:#fb7185;
  --bg:#1e1240; --bg-band:#291959; --card:#2e1465; --line:#3d2080; --line-soft:#332073;
  --ink:#f3e8ff; --ink-2:#ddd6fe; --dim:#a78bfa; --faint:#7c3aed;
  --shadow:0 2px 8px rgba(0,0,0,.5); --shadow-lg:0 4px 28px rgba(46,16,101,.6); --shadow-hover:0 8px 32px rgba(46,16,101,.7);
}
[data-theme="royal"] .prod-img,
[data-theme="royal"] .pdp-main-img,
[data-theme="royal"] .pdp-thumb,
[data-theme="royal"] .cat-tile-cell,
[data-theme="royal"] .cart-img{background:#1a0e3a}
[data-theme="royal"] .brand-row span{color:#a78bfa}
[data-theme="royal"] .brand-row span:hover{background:#332073;color:#f3e8ff}
[data-theme="royal"] .pdp-opt,
[data-theme="royal"] .cat-toolbar select,
[data-theme="royal"] .pdp-buy .qty-row select,
[data-theme="royal"] .cart-actions select,
[data-theme="royal"] .search-cat{background:#291959;color:#f3e8ff;border-color:#3d2080}
[data-theme="royal"] .spec-row:nth-child(odd){background:#291959}

/* ── CYBER (neon dark) ── */
[data-theme="cyber"]{
  --header:#020617; --subheader:#0f172a; --subheader-hover:#1e293b;
  --cta:#22d3ee; --cta-hover:#67e8f9; --cta-border:#06b6d4;
  --orange:#ec4899; --orange-deep:#db2777;
  --teal:#22d3ee; --teal-hover:#67e8f9; --star:#fbbf24;
  --success:#10b981; --danger:#ef4444;
  --bg:#020617; --bg-band:#0c1426; --card:#0f172a; --line:#1e293b; --line-soft:#1a2436;
  --ink:#f1f5f9; --ink-2:#cbd5e1; --dim:#94a3b8; --faint:#64748b;
  --shadow:0 2px 8px rgba(34,211,238,.15); --shadow-lg:0 4px 28px rgba(34,211,238,.2); --shadow-hover:0 8px 32px rgba(236,72,153,.3);
}
[data-theme="cyber"] .prod-img,
[data-theme="cyber"] .pdp-main-img,
[data-theme="cyber"] .pdp-thumb,
[data-theme="cyber"] .cat-tile-cell,
[data-theme="cyber"] .cart-img{background:#080c1f}
[data-theme="cyber"] .brand-row span{color:#94a3b8}
[data-theme="cyber"] .brand-row span:hover{background:#1e293b;color:#22d3ee}
[data-theme="cyber"] .pdp-opt,
[data-theme="cyber"] .cat-toolbar select,
[data-theme="cyber"] .pdp-buy .qty-row select,
[data-theme="cyber"] .cart-actions select,
[data-theme="cyber"] .search-cat{background:#0f172a;color:#f1f5f9;border-color:#1e293b}
[data-theme="cyber"] .btn-primary{background:#22d3ee;color:#020617;border-color:#06b6d4;box-shadow:0 0 16px rgba(34,211,238,.5)}
[data-theme="cyber"] .btn-primary:hover{background:#67e8f9}
[data-theme="cyber"] .prod-badge{background:#ec4899;box-shadow:0 0 12px rgba(236,72,153,.5)}
[data-theme="cyber"] .spec-row:nth-child(odd){background:#0f172a}

/* ── OCEAN (teal light) ── */
[data-theme="ocean"]{
  --header:#0c4a6e; --subheader:#075985; --subheader-hover:#0369a1;
  --cta:#67e8f9; --cta-hover:#22d3ee; --cta-border:#06b6d4;
  --orange:#0891b2; --orange-deep:#0e7490;
  --teal:#0e7490; --teal-hover:#155e75; --star:#f59e0b;
  --success:#0d9488; --danger:#dc2626;
  --bg:#f0f9ff; --bg-band:#e0f2fe; --card:#ffffff; --line:#bae6fd; --line-soft:#cffafe;
  --ink:#082f49; --ink-2:#0c4a6e; --dim:#075985; --faint:#0369a1;
}
[data-theme="ocean"] .prod-img,
[data-theme="ocean"] .pdp-main-img,
[data-theme="ocean"] .pdp-thumb,
[data-theme="ocean"] .cat-tile-cell,
[data-theme="ocean"] .cart-img{background:#ecfeff}

/* ── ROSE GOLD (soft light) ── */
[data-theme="rose"]{
  --header:#831843; --subheader:#9d174d; --subheader-hover:#be185d;
  --cta:#fbcfe8; --cta-hover:#f9a8d4; --cta-border:#ec4899;
  --orange:#e11d48; --orange-deep:#be123c;
  --teal:#be185d; --teal-hover:#9d174d; --star:#f59e0b;
  --success:#16a34a; --danger:#991b1b;
  --bg:#fdf2f8; --bg-band:#fce7f3; --card:#ffffff; --line:#fbcfe8; --line-soft:#fce7f3;
  --ink:#500724; --ink-2:#831843; --dim:#9d174d; --faint:#be185d;
}
[data-theme="rose"] .prod-img,
[data-theme="rose"] .pdp-main-img,
[data-theme="rose"] .pdp-thumb,
[data-theme="rose"] .cat-tile-cell,
[data-theme="rose"] .cart-img{background:#fdf4f8}
[data-theme="rose"] .btn-primary{color:#500724}

/* ── MONO LIGHT (minimal) ── */
[data-theme="mono"]{
  --header:#000000; --subheader:#1a1a1a; --subheader-hover:#2a2a2a;
  --cta:#ffffff; --cta-hover:#f0f0f0; --cta-border:#000000;
  --orange:#000000; --orange-deep:#1a1a1a;
  --teal:#000000; --teal-hover:#1a1a1a; --star:#000000;
  --success:#000000; --danger:#000000;
  --bg:#ffffff; --bg-band:#fafafa; --card:#ffffff; --line:#e5e5e5; --line-soft:#f0f0f0;
  --ink:#000000; --ink-2:#1a1a1a; --dim:#525252; --faint:#a3a3a3;
}
[data-theme="mono"] .btn-primary{background:#000000;color:#ffffff;border-color:#000000}
[data-theme="mono"] .btn-primary:hover{background:#1a1a1a;color:#ffffff}
[data-theme="mono"] .btn-orange{background:#ffffff;color:#000000;border:1px solid #000000}
[data-theme="mono"] .prod-badge{background:#000000;color:#ffffff}
[data-theme="mono"] .prod-badge.deal{background:#000000}
[data-theme="mono"] .prod-badge.new{background:#000000}
[data-theme="mono"] .prod-img,
[data-theme="mono"] .pdp-main-img,
[data-theme="mono"] .pdp-thumb,
[data-theme="mono"] .cat-tile-cell,
[data-theme="mono"] .cart-img{background:#fafafa}

/* ── EMERALD (premium dark) ── */
[data-theme="emerald"]{
  --header:#022c22; --subheader:#064e3b; --subheader-hover:#065f46;
  --cta:#fbbf24; --cta-hover:#f59e0b; --cta-border:#d97706;
  --orange:#10b981; --orange-deep:#059669;
  --teal:#6ee7b7; --teal-hover:#a7f3d0; --star:#fbbf24;
  --success:#34d399; --danger:#f87171;
  --bg:#022c22; --bg-band:#03362a; --card:#064e3b; --line:#065f46; --line-soft:#055547;
  --ink:#ecfdf5; --ink-2:#a7f3d0; --dim:#6ee7b7; --faint:#34d399;
  --shadow:0 2px 8px rgba(0,0,0,.5); --shadow-lg:0 4px 28px rgba(2,44,34,.6); --shadow-hover:0 8px 32px rgba(2,44,34,.7);
}
[data-theme="emerald"] .prod-img,
[data-theme="emerald"] .pdp-main-img,
[data-theme="emerald"] .pdp-thumb,
[data-theme="emerald"] .cat-tile-cell,
[data-theme="emerald"] .cart-img{background:#022c22}
[data-theme="emerald"] .pdp-opt,
[data-theme="emerald"] .cat-toolbar select,
[data-theme="emerald"] .pdp-buy .qty-row select,
[data-theme="emerald"] .cart-actions select,
[data-theme="emerald"] .search-cat{background:#03362a;color:#ecfdf5;border-color:#065f46}
[data-theme="emerald"] .spec-row:nth-child(odd){background:#03362a}

/* ═══════════════════════════════════════════════════════════════
   THEME SWITCHER WIDGET
   ═══════════════════════════════════════════════════════════════ */
.theme-fab{
  position:fixed;
  bottom:24px;
  right:24px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(135deg,#FF9900,#FFD814);
  border:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 4px rgba(255,153,0,.18);
  font-size:24px;
  cursor:pointer;
  z-index:7000;
  transition:transform .25s,box-shadow .25s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.theme-fab:hover{transform:scale(1.08) rotate(15deg);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 4px rgba(255,153,0,.26)}
.theme-fab:active{transform:scale(.95)}

.theme-panel{
  position:fixed;
  bottom:88px;
  right:24px;
  background:var(--card);
  border-radius:16px;
  padding:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.25);
  z-index:7000;
  width:300px;
  max-width:calc(100vw - 30px);
  border:1px solid var(--line);
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .22s,transform .22s;
}
.theme-panel.on{opacity:1;transform:translateY(0);pointer-events:auto}
.theme-panel h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.theme-panel small{font-size:11.5px;color:var(--dim);display:block;margin-bottom:12px}
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.theme-opt{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 11px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  text-align:left;
  transition:.15s;
  font-family:inherit;
}
.theme-opt:hover{border-color:var(--ink-2);transform:translateY(-1px)}
.theme-opt.on{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,153,0,.2)}
.theme-swatches{display:flex;gap:3px;height:18px}
.theme-swatch{flex:1;border-radius:3px}
.theme-opt b{font-size:12.5px;font-weight:600;color:var(--ink)}
.theme-opt span{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   LAPTOP / DESKTOP FIT — fix overlap, smarter widths, padding
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1281px) and (max-width:1500px){
  .wrap{padding:0 22px}
}
@media (min-width:981px) and (max-width:1280px){
  /* category tiles should be 4 across at this size — not 2 */
  .cat-tiles{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .cat-tile{padding:16px}
  .cat-tile h3{font-size:16px}
  /* products: 4 columns is more comfortable than 5 */
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .prod-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

/* HERO: stop the category tiles eating into the buttons */
.hero-slide{padding:0 clamp(24px,5vw,80px);align-items:center}
.hero-slides{padding-bottom:60px}      /* space so cat-tiles can overlap visually without clipping CTAs */
.cat-tiles{margin-top:-44px}           /* was -90: too aggressive */

@media (max-width:1100px){
  .hero-slide{padding:0 36px}
  .hero-content{max-width:60%}
  .hero-content h2{font-size:clamp(1.6rem,3.5vw,2.6rem)}
  .hero-content p{font-size:14.5px}
  .hero-art svg{height:260px}
  .hero-art{right:20px}
}

@media (max-width:980px){
  .hero-content{max-width:100%}
  .hero-art{display:none}
  .cat-tiles{margin-top:-30px}
}

/* SMARTER FOOT-GRID + FOOT MAX-WIDTH */
.foot-grid{max-width:1200px}

/* dark-theme footer text contrast */
[data-theme="dark"] footer,
[data-theme="midnight"] footer,
[data-theme="royal"] footer,
[data-theme="cyber"] footer,
[data-theme="emerald"] footer{background:#0a0d12}
[data-theme="dark"] .foot-divider,
[data-theme="midnight"] .foot-divider,
[data-theme="royal"] .foot-divider,
[data-theme="cyber"] .foot-divider,
[data-theme="emerald"] .foot-divider{border-color:#22282f}

/* ═══════════════════════════════════════════════════════════════
   IMAGE LOADING POLISH (real photos + SVG fallback)
   ═══════════════════════════════════════════════════════════════ */
.prod-img img,
.cat-tile-cell img,
.pdp-thumb img,
.cart-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .35s;
  background:transparent;
}
.prod-card:hover .prod-img img{transform:scale(1.05)}
.prod-img,
.cart-img,
.pdp-thumb,
.pdp-main-img,
.cat-tile-cell{position:relative;overflow:hidden}

/* ═══════════════════════════════════════════════════════════════
   CURRENCY SWITCHER
   ═══════════════════════════════════════════════════════════════ */
.curr-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:6px 10px; border-radius:6px;
  font-size:12.5px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:.15s;
  white-space:nowrap;
}
.curr-btn:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08)}
.curr-btn .flag{font-size:14px; line-height:1}
.curr-btn b{font-weight:700; font-size:13px}
.curr-btn small{font-size:9px; opacity:.7; letter-spacing:.5px; text-transform:uppercase; line-height:1; margin-right:1px}
.curr-btn .arr{font-size:9px; opacity:.7; margin-left:1px}

.curr-modal-bg{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:9100; display:none; align-items:flex-start; justify-content:center;
  padding:60px 16px 16px; backdrop-filter:blur(4px);
  animation:fadeIn .2s;
}
.curr-modal-bg.on{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.curr-modal{
  background:var(--card); border-radius:14px; width:100%; max-width:480px;
  max-height:85vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  border:1px solid var(--line);
  animation:slideUp .25s;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.curr-modal-head{
  padding:18px 22px; border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--card); z-index:1;
}
.curr-modal-head h3{font-size:1.1rem; font-weight:700; color:var(--ink); margin:0}
.curr-modal-head .x{
  width:32px; height:32px; border-radius:8px; border:none;
  background:var(--bg-band); font-size:16px; color:var(--ink);
  cursor:pointer; font-family:inherit; transition:.15s;
  display:flex; align-items:center; justify-content:center;
}
.curr-modal-head .x:hover{background:var(--line)}

.curr-modal-body{padding:14px 18px 18px}
.curr-modal-body p.intro{font-size:13px; color:var(--dim); margin-bottom:14px; line-height:1.5}
.curr-section{margin-bottom:16px}
.curr-section-head{
  font-size:11px; font-weight:700; color:var(--dim);
  text-transform:uppercase; letter-spacing:.6px;
  padding:0 4px 8px; display:flex; align-items:center; gap:8px;
}
.curr-section-head::after{content:""; flex:1; height:1px; background:var(--line-soft)}
.curr-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:10px;
  background:var(--bg-band); border:1.5px solid transparent;
  margin-bottom:6px; cursor:pointer; transition:.15s;
}
.curr-row.available:hover{border-color:var(--orange); background:var(--bg)}
.curr-row.on{border-color:var(--orange); background:var(--bg); box-shadow:0 0 0 3px rgba(255,153,0,.12)}
.curr-row.coming{cursor:not-allowed; opacity:.55}
.curr-row.coming:hover{border-color:transparent}
.curr-row .left{display:flex; align-items:center; gap:12px; flex:1; min-width:0}
.curr-row .flag-lg{font-size:24px; line-height:1; width:32px; text-align:center}
.curr-row .info{min-width:0}
.curr-row .info b{display:block; font-size:14px; font-weight:600; color:var(--ink); line-height:1.2}
.curr-row .info small{display:block; font-size:11.5px; color:var(--dim); margin-top:2px}
.curr-row .right{display:flex; align-items:center; gap:8px; flex-shrink:0}
.curr-row .code{font-size:13px; font-weight:700; color:var(--ink-2); letter-spacing:.5px}
.curr-row .check{
  width:22px; height:22px; border-radius:50%;
  background:var(--orange); color:#fff; font-size:12px; font-weight:700;
  display:none; align-items:center; justify-content:center;
}
.curr-row.on .check{display:flex}
.curr-row .badge-soon{
  font-size:9px; font-weight:700; background:var(--bg-band);
  color:var(--dim); padding:3px 7px; border-radius:6px;
  letter-spacing:.5px; border:1px solid var(--line);
}

/* Mobile: smaller currency button in compact header */
@media (max-width:640px){
  .curr-btn{padding:5px 8px; font-size:11.5px; gap:4px}
  .curr-btn b{font-size:11.5px}
  .curr-btn small,.curr-btn .arr{display:none}
  .curr-btn .flag{font-size:13px}
}

/* floating action button removed */

/* ═══════════════════════════════════════════════════════════
   RECENTLY VIEWED
   ═══════════════════════════════════════════════════════════ */
#recentlyViewed{
  background:var(--bg-band);
  border-top:1px solid var(--line-soft);
  padding:18px 0;margin-top:4px;
}
#recentlyViewed .sec-head{margin-bottom:10px}
#rvGrid .prod-card{min-width:0}
#rvGrid .prod-img-wrap{height:100px}

/* ═══════════════════════════════════════════════════════════
   RELATED PRODUCTS (PDP)
   ═══════════════════════════════════════════════════════════ */
.pdp-related{padding:24px 0}
.pdp-related h2{font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:14px}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT / CART ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */
/* .wa-order-btn removed */
.promo-row{display:flex;gap:8px;margin-bottom:10px}
.promo-row input{flex:1;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13.5px;background:var(--bg);color:var(--ink);outline:none;font-family:inherit;transition:.12s}
.promo-row input:focus{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,153,0,.15)}
.promo-row button{padding:10px 16px;background:var(--ink);color:var(--card);border:none;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap}
.promo-row button:hover{opacity:.85}
.promo-ok{color:var(--success);font-size:12.5px;font-weight:600;margin-bottom:6px}
.promo-err{color:var(--danger);font-size:12.5px;margin-bottom:6px}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════ */
.checkout-page{display:grid;grid-template-columns:1fr 360px;gap:24px;padding:20px 0 40px;align-items:start}
.checkout-main{display:flex;flex-direction:column;gap:16px}
.checkout-step{background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.checkout-step h2{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-field{display:flex;flex-direction:column}
.co-field.full{grid-column:1/-1}
.co-field label{font-size:11.5px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.co-field input,.co-field select{padding:10px 13px;border:1.5px solid var(--line);border-radius:8px;font-size:14px;background:var(--bg);color:var(--ink);outline:none;font-family:inherit;transition:.12s}
.co-field input:focus,.co-field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,153,0,.15)}
.co-err{background:#fee2e2;color:#991b1b;padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:12px;display:none;line-height:1.4}
.co-err.on{display:block}
.pay-methods{display:flex;flex-direction:column;gap:10px}
.pay-method{display:block;cursor:pointer;border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;transition:.12s;position:relative}
.pay-method:hover{border-color:var(--orange);background:var(--bg-band)}
.pay-method input{position:absolute;opacity:0}
.pay-method input:checked + .pay-info{color:var(--ink)}
.pay-method:has(input:checked){border-color:var(--orange);background:rgba(255,153,0,.06);box-shadow:0 0 0 2px rgba(255,153,0,.15)}
.pay-info{display:flex;align-items:center;gap:13px}
.pay-ic{font-size:11px;font-weight:700;letter-spacing:.4px;width:42px;height:42px;border-radius:8px;background:var(--bg-band);color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pay-cod{background:#d1fae5;color:#065f46}
.pay-jc{background:#fee2e2;color:#991b1b}
.pay-ep{background:#dcfce7;color:#166534}
.pay-bk{background:#fef3c7;color:#92400e}
.pay-cd{background:#ede9fe;color:#5b21b6}
.pay-info b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.pay-info small{font-size:12px;color:var(--dim)}
.checkout-summary{background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:20px;box-shadow:var(--shadow);position:sticky;top:20px}
.checkout-summary h3{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.co-items{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:220px;overflow-y:auto}
.co-line-item{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.co-li-name{color:var(--ink-2);line-height:1.35}
.co-li-price{font-weight:600;color:var(--ink);white-space:nowrap}
.co-totals{border-top:1px solid var(--line-soft);padding-top:12px}

/* ORDER SUCCESS */
.order-success{text-align:center;padding:50px 24px;background:var(--card);border-radius:14px;border:1px solid var(--line-soft);box-shadow:var(--shadow);max-width:560px;margin:30px auto}
.os-check{width:80px;height:80px;border-radius:50%;background:#d1fae5;color:#059669;font-size:44px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:osPop .4s ease}
@keyframes osPop{0%{transform:scale(0)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.order-success h1{font-size:1.6rem;font-weight:800;color:var(--ink);margin-bottom:8px}
.order-success p{color:var(--dim);font-size:14px;line-height:1.55}
.os-number{background:var(--bg-band);border:2px dashed var(--orange);border-radius:10px;padding:14px;margin:18px auto;max-width:260px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.os-number b{display:block;font-size:24px;font-weight:800;color:var(--orange);letter-spacing:1px;margin-top:4px;text-transform:none}
.os-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════
   TRACK ORDER PAGE
   ═══════════════════════════════════════════════════════════ */
.track-page{max-width:680px;margin:0 auto;padding:20px 0 40px}
.track-head{text-align:center;margin-bottom:24px}
.track-head h1{font-size:1.7rem;font-weight:800;color:var(--ink);margin-bottom:6px}
.track-head p{color:var(--dim);font-size:14px}
.track-search{display:flex;gap:10px;margin-bottom:20px}
.track-search input{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;background:var(--bg);color:var(--ink);outline:none;font-family:inherit;text-transform:uppercase;letter-spacing:.5px}
.track-search input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,153,0,.15)}
.track-error,.track-cancelled{background:#fee2e2;color:#991b1b;padding:14px 16px;border-radius:10px;font-size:13.5px;line-height:1.5;text-align:center}
.track-card{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:22px;box-shadow:var(--shadow);margin-top:6px}
.track-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:12px}
.track-status-badge{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;text-transform:capitalize;white-space:nowrap}
.track-status-badge.track-pending{background:#fef3c7;color:#92400e}
.track-status-badge.track-assigned{background:#dbeafe;color:#1e40af}
.track-status-badge.track-picked{background:#f3e8ff;color:#6b21a8}
.track-status-badge.track-on-the-way{background:#fed7aa;color:#9a3412}
.track-status-badge.track-delivered{background:#d1fae5;color:#065f46}
.track-status-badge.track-completed{background:#d1fae5;color:#065f46}
.track-status-badge.track-cancelled{background:#fee2e2;color:#991b1b}
.track-timeline{display:flex;align-items:center;margin:20px 0 24px}
.track-stage{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;width:64px}
.track-dot{width:44px;height:44px;border-radius:50%;background:var(--bg-band);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.3s}
.track-stage.done .track-dot{background:#d1fae5;border-color:#059669}
.track-stage.active .track-dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,153,0,.2);animation:trackPulse 1.6s infinite}
@keyframes trackPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,153,0,.2)}50%{box-shadow:0 0 0 7px rgba(255,153,0,.08)}}
.track-label{font-size:10.5px;font-weight:600;color:var(--dim);text-align:center;line-height:1.25}
.track-stage.done .track-label,.track-stage.active .track-label{color:var(--ink)}
.track-bar{flex:1;height:3px;background:var(--line);min-width:8px;border-radius:2px;transition:.3s}
.track-bar.done{background:#059669}
.track-details{border-top:1px solid var(--line-soft);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.track-detail{display:flex;justify-content:space-between;font-size:13.5px}
.track-detail span{color:var(--dim)}
.track-detail b{color:var(--ink);font-weight:600}
.my-orders-list{display:flex;flex-direction:column;gap:10px}
.my-order{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px;cursor:pointer;transition:.12s;gap:12px}
.my-order:hover{border-color:var(--orange);box-shadow:var(--shadow);transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════
   WISHLIST PAGE
   ═══════════════════════════════════════════════════════════ */
.wishlist-page{padding:20px 0 40px}
.wishlist-page h1{font-size:1.7rem;font-weight:800;color:var(--ink);margin-bottom:18px}
.wishlist-page .prod-card{position:relative}
.wish-remove{position:absolute;top:8px;right:8px;z-index:5;width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.wish-remove:hover{background:#e02424;transform:scale(1.1)}

@media(max-width:860px){
  .checkout-page{grid-template-columns:1fr}
  .checkout-summary{position:static;order:-1}
  .co-grid{grid-template-columns:1fr}
  .track-stage{width:48px}
  .track-dot{width:38px;height:38px;font-size:15px}
  .track-label{font-size:9.5px}
}

/* ═══════════════════════════════════════════════════════════════
   ANDROID / MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ── Prevent iOS/Android zoom on input focus (needs 16px minimum) ── */
@media (max-width:768px){
  input, select, textarea {
    font-size:16px !important;
  }
  /* Keep placeholder readable */
  ::placeholder { font-size:15px; }
}

/* ── Better touch targets (min 44×44px recommended by Google) ── */
@media (max-width:768px){
  .btn, .admin-btn, .sp-btn, .sp-action-btn {
    min-height:44px;
  }
  .cart-btn { min-height:44px; padding:10px 14px; }
  .hd-link  { min-height:44px; display:flex; align-items:center; }
  /* Subnav links — easier to tap */
  .subnav a, .subnav button {
    padding:12px 10px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* ── Product cards on Android ── */
@media (max-width:480px){
  .prod-card { border-radius:10px; }
  .prod-name { font-size:12px; }
  .prod-price { font-size:14px; }
  .prod-img-wrap { height:130px; }
  /* Tighter gap on small phones */
  .prod-grid { gap:8px; }
}

/* ── Cart page on Android ── */
@media (max-width:640px){
  .cart-page { gap:16px; }
  .cart-item { gap:10px; padding:12px; }
  .cart-img  { width:72px; height:72px; }
  .cart-info h4 { font-size:13.5px; }
  .cart-summary { padding:14px; border-radius:10px; }
  .total-line { font-size:14px; }
}

/* ── Checkout on Android ── */
@media (max-width:640px){
  .checkout-page  { grid-template-columns:1fr; gap:14px; }
  .checkout-step  { padding:16px; border-radius:10px; }
  .co-grid        { grid-template-columns:1fr; gap:10px; }
  .pay-method     { padding:11px 12px; }
  .pay-ic         { width:36px; height:36px; font-size:20px; }
  .checkout-summary { padding:16px; }
  .co-items       { max-height:160px; }
}

/* ── PDP on Android ── */
@media (max-width:640px){
  .pdp-grid       { gap:18px; }
  .pdp-title      { font-size:1.2rem; }
  .pdp-buy        { padding:16px; border-radius:12px; }
  .pdp-buy .btn   { min-height:48px; font-size:15px; }
  .pdp-tabs-bar button { padding:10px 12px; font-size:13px; }
}

/* ── Header on Android ── */
@media (max-width:640px){
  .logo-text b    { font-size:20px; }
  .hd-right       { gap:6px; }
  .hd-link.orders { display:none; } /* hide Returns on very small — keeps header clean */
  .hd-link.wishlist { display:none; }
  .cart-count     { min-width:18px; height:18px; font-size:10px; }
}

/* ── Track order page on Android ── */
@media (max-width:480px){
  .track-search   { flex-direction:column; gap:8px; }
  .track-search input { border-radius:10px; text-align:center; }
  .track-search .btn  { border-radius:10px; width:100%; justify-content:center; }
  .track-stage    { width:44px; }
  .track-dot      { width:36px; height:36px; font-size:14px; }
  .track-label    { font-size:9px; }
}

/* ── Chat widget on Android ── */
@media (max-width:640px){
  #yChatPanel { border-radius:16px 16px 0 0; bottom:0; right:0; width:100vw; max-width:100vw; }
  #yChat      { bottom:0; right:0; }
  #yChatLauncher { position:fixed; bottom:80px; right:14px; }
}

/* ── Smooth momentum scrolling everywhere ── */
.subnav, .cat-sidebar, .pdp-gallery, .sp-chat-msgs, .adm-chat-msgs,
.yChat-body, #yChatBody {
  -webkit-overflow-scrolling:touch;
}

/* ── Remove blue highlight on tap (Android Chrome) ── */
a, button, [role="button"], [tabindex] {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ── Prevent text selection on UI elements ── */
.subnav, .admin-nav, .sp-nav, nav { user-select:none; }

/* ── Fix sticky hover states + prod-fav blocking taps on touch devices ── */
@media(hover:none){
  .prod-card:hover { transform:none; box-shadow:var(--shadow); }
  .btn:hover       { transform:none; }
  /* prod-fav: always visible on touch — stopPropagation handles link conflict */
  .prod-fav { opacity:1; pointer-events:auto; }
  .prod-fav:active { transform:scale(1.2); }
}

/* ── Shared spin animation for loading indicators ── */
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Category tile real product images ───────────────────────────────────── */
/* When Firebase products replace the SVG art, each cell holds a real photo  */
.cat-tile-cell img{
  width:100%;height:100%;
  object-fit:contain;
  border-radius:6px;
  background:var(--bg-band);
  display:block;
}
.cat-tile-cell{
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-band);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px;
  min-height:80px;
}
.cat-tile-cell span{font-size:11px;color:var(--dim);text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cat-tile-cell svg{max-width:80%;max-height:80%}

/* ── Skeleton loader for cat-tile cells (shown until Firebase loads real images) ── */
.cat-skel{
  background:linear-gradient(90deg,var(--bg-band) 25%,var(--line-soft,#e8e8ee) 50%,var(--bg-band) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:8px;
  min-height:88px;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ═══════════════════════════════════════════════════════════════════════
   SUBNAV MEGA-MENU — hover dropdown with sub-categories + brand chips
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:641px){
  .subnav{overflow:visible}
  .subnav .wrap{overflow:visible}
}
.has-dd{position:relative;display:inline-flex}
.has-dd > a{display:flex;align-items:center;gap:4px}
.has-dd > a::after{content:'▾';font-size:9px;opacity:.6;margin-left:2px}
.mega-dd{
  position:absolute;top:calc(100% + 1px);left:-14px;
  background:#fff;border-radius:0 0 12px 12px;
  box-shadow:0 20px 60px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  z-index:9999;padding:20px 22px;display:flex;gap:28px;
  width:560px;color:#0f1111;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-dd:hover .mega-dd,.has-dd:focus-within .mega-dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)
}
/* Left column (sub-category links) — fixed width, never shrinks */
.mega-col:first-child{flex-shrink:0;min-width:130px;width:130px}
/* Right column (brand chips) — takes the remaining width and is allowed
   to shrink, which is what actually makes .mega-brands{flex-wrap:wrap}
   wrap onto new rows instead of overflowing past the box's right edge.
   min-width:0 overrides the flex default of min-width:auto, which is the
   classic flexbox trap that otherwise prevents a flex item from ever
   shrinking below its content's natural (unwrapped) width. */
.mega-col:last-child{flex:1 1 0%;min-width:0}
.mega-col h4{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:#9ca3af;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid #f3f4f6
}
.mega-col a{
  display:block;font-size:13px;color:#111827;text-decoration:none;
  padding:5px 0;white-space:nowrap;font-weight:400;line-height:1.3;
  transition:color .12s
}
.mega-col a:hover{color:#f59e0b;text-decoration:none}
.mega-col a.mega-all{font-weight:700;color:#f59e0b;margin-bottom:4px}
.mega-brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mega-brands a{
  display:inline-block;background:#f9fafb;border:1px solid #e5e7eb;
  border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;
  color:#374151;white-space:nowrap;transition:.12s;text-decoration:none
}
.mega-brands a:hover{background:#fef3c7;border-color:#fcd34d;color:#92400e;text-decoration:none}
/* Hide mega-menu on mobile */
@media(max-width:640px){.mega-dd{display:none!important}.has-dd>a::after{display:none}}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT IMAGE ZOOM + VIDEO
   ═══════════════════════════════════════════════════════════════ */

/* Media type tabs (Photos / Video) */
.pdp-media-tabs{display:flex;gap:8px;margin-bottom:10px}
.pdp-media-tab{padding:6px 14px;font-size:12px;font-weight:600;border-radius:6px;border:1.5px solid var(--line);background:none;cursor:pointer;color:var(--dim);font-family:inherit;transition:.15s}
.pdp-media-tab.on{border-color:var(--orange);color:var(--orange);background:#fff8e7}

/* Hover zoom — image scales up following mouse cursor */
.pdp-main-img{position:relative;overflow:hidden;cursor:zoom-in}
.pdp-main-img img{
  transition:transform .18s ease;
  transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);
  will-change:transform;
  user-select:none;pointer-events:none;
}
.pdp-main-img.zoom-active img{transform:scale(2.5)}
@media(max-width:768px){
  .pdp-main-img{cursor:auto}
  .pdp-main-img.zoom-active img{transform:none}
}

/* Floating zoom panel — appears to the right on wide screens */
#pdpZoomPanel{
  display:none;
  position:fixed;width:400px;height:400px;
  border-radius:12px;border:1.5px solid #e5e7eb;
  box-shadow:0 16px 48px rgba(0,0,0,.18);
  background:#fff no-repeat center/cover;
  z-index:9998;pointer-events:none;overflow:hidden;
  top:50%;transform:translateY(-50%);
}
#pdpZoomPanel.show{display:block}
@media(max-width:1200px){#pdpZoomPanel{display:none!important}}

/* Video embed */
.pdp-video-wrap{
  width:100%;border-radius:8px;overflow:hidden;background:#000;
  display:none;aspect-ratio:16/9;align-items:center;justify-content:center;
}
.pdp-video-wrap.active{display:flex}
.pdp-video-wrap iframe,.pdp-video-wrap video{width:100%;height:100%;border:none}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER REVIEWS — real, user-submitted, Firebase-backed
   ═══════════════════════════════════════════════════════════════ */
.review-summary{display:flex;gap:32px;align-items:center;flex-wrap:wrap;padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid var(--line-soft)}
.review-avg{text-align:center;flex-shrink:0}
.review-avg .num{font-size:2.6rem;font-weight:800;color:var(--ink);line-height:1}
.review-avg .stars{font-size:18px;margin:6px 0 4px;display:block}
.review-avg .count{font-size:12.5px;color:var(--dim)}
.review-bars{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.review-bar-row{display:grid;grid-template-columns:40px 1fr 36px;gap:8px;align-items:center;font-size:12px;color:var(--dim)}
.review-bar-track{height:8px;background:var(--bg-band);border-radius:99px;overflow:hidden}
.review-bar-fill{height:100%;background:var(--star,#f59e0b);border-radius:99px;transition:width .4s ease}

.review-write-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:var(--ink);color:#fff;border:none;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;margin-bottom:18px;transition:.15s}
.review-write-btn:hover{opacity:.88}

.review-form{background:var(--bg-band);border-radius:10px;padding:20px;margin-bottom:22px;display:none}
.review-form.open{display:block}
.review-form h3{font-size:15px;font-weight:700;margin-bottom:14px}
.review-form label{display:block;font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;margin-top:14px}
.review-form label:first-of-type{margin-top:0}
.review-form input[type=text],.review-form textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);outline:none}
.review-form input[type=text]:focus,.review-form textarea:focus{border-color:var(--orange)}
.review-form textarea{resize:vertical;min-height:80px}

.star-picker{display:flex;gap:4px;font-size:30px;line-height:1;cursor:pointer;user-select:none}
.star-picker span{color:#d1d5db;transition:.1s;transform-origin:center}
.star-picker span.on{color:var(--star,#f59e0b)}
.star-picker span:hover{transform:scale(1.12)}

.review-upload-area{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;cursor:pointer;transition:.15s;background:#fff}
.review-upload-area:hover{border-color:var(--orange);background:#fff8e7}
.review-upload-area .hint{font-size:12px;color:var(--dim);margin-top:4px}
.review-img-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.review-img-thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1.5px solid var(--line);background:var(--bg-band)}
.review-img-thumb img{width:100%;height:100%;object-fit:cover}
.review-img-thumb .rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.review-img-thumb.uploading{opacity:.5}
.review-form-actions{display:flex;gap:10px;margin-top:18px}
.review-submit-btn{padding:10px 22px;background:var(--orange);color:#0f1111;border:none;border-radius:8px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.review-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.review-cancel-btn{padding:10px 18px;background:none;border:1.5px solid var(--line);border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--dim);font-family:inherit}

.review-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.review-images img{width:72px;height:72px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line);transition:.15s}
.review-images img:hover{transform:scale(1.05)}
.review-empty{text-align:center;padding:36px 16px;color:var(--dim)}
.review-empty .ic{font-size:34px;margin-bottom:10px;display:block}