/*
Theme Name: WhatsShop Modern
Theme URI: https://whatsshop.in
Author: WhatsShop
Description: Modern WhatsApp E-Commerce theme. Order directly via WhatsApp!
Version: 4.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: whatsshop
Tags: e-commerce, whatsapp, mobile-first, modern, responsive
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ============================================================
   VARIABLES
============================================================ */
/* ============================================================
   UNIFIED THEME SYSTEM — Dark Default
   All colors auto-switch via data-theme attribute
============================================================ */
:root {
  /* Brand colors — same in both modes */
  --wa:      #25D366;
  --wa-dark: #128C7E;
  --accent:  #FF6B35;
  --accent2: #FF3D6B;
  --off:     #FF3D6B;
  --purple:  #7C3AED;
  --grad:    linear-gradient(135deg,#FF6B35,#FF3D6B);
  --gwa:     linear-gradient(135deg,#25D366,#128C7E);
  --r:16px; --r-sm:12px; --r-xs:8px;
  --shadow:  0 4px 24px rgba(0,0,0,.4);
  --max:1280px;
  --font-head: 'Syne', sans-serif;

  /* DARK MODE (default) — semantic variables */
  --bg:      #0D0D1A;
  --bg-card: #161628;
  --bg-surf: #1E1E38;
  --text:    #F1F1F8;
  --muted:   #8888AA;
  --subtle:  #555577;
  --border:  #2A2A4A;
  --sh-col:  rgba(0,0,0,.5);
  --input-bg:#1E1E38;
  --header-bg: rgba(22,22,40,.97);
  --nav-bg:    rgba(22,22,40,.97);
  --card-hover: #1E1E38;
  --shadow-card: 0 4px 24px rgba(0,0,0,.4);

  /* Aliases for backward compat */
  --dark:    var(--bg);
  --card:    var(--bg-card);
  --surface: var(--bg-surf);
}

/* LIGHT MODE — override all semantic vars */
[data-theme="light"] {
  --bg:      #F4F6FB;
  --bg-card: #FFFFFF;
  --bg-surf: #EEF1F8;
  --text:    #1A1A2E;
  --muted:   #6B7280;
  --subtle:  #9CA3AF;
  --border:  #DDE3EF;
  --sh-col:  rgba(0,0,0,.1);
  --input-bg:#FFFFFF;
  --header-bg: rgba(255,255,255,.96);
  --nav-bg:    rgba(255,255,255,.96);
  --card-hover: #F8F9FC;
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);

  /* Aliases */
  --dark:    var(--bg);
  --card:    var(--bg-card);
  --surface: var(--bg-surf);
}
/* ============================================================
   RESET
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;overflow-y:scroll;-webkit-font-smoothing:antialiased;max-width:100vw;transition:background .25s,color .25s;}
html{overflow-x:hidden;max-width:100%;scroll-behavior:smooth;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;object-fit:cover;}
button{cursor:pointer;font-family:inherit;border:none;outline:none;}
h1,h2,h3,h4,h5,h6{font-family:"Syne",sans-serif;}

/* ============================================================
   SITE WRAPPER — FULL WIDTH ON ALL SCREENS
============================================================ */
.ws-wrapper { width:100%; background:var(--bg); }
.ws-main-col { width:100%; }
/* Hide side panels — we don't use them anymore */
.ws-side-left,.ws-side-right { display:none !important; }

/* ============================================================
   HEADER — FULL WIDTH DESKTOP
============================================================ */
.ws-header {
  background:rgba(22,22,40,.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:0 24px;
  height:64px;
  position:sticky; top:0; z-index:600;
  display:flex; align-items:center; gap:16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  width:100%;
}
.ws-logo {
  font-family:"Syne",sans-serif; font-size:22px; font-weight:800;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  white-space:nowrap; text-decoration:none; line-height:1;
}
.ws-logo-dot { display:none; }
.ws-header-center {
  flex:1; max-width:500px; margin:0 auto;
}
.ws-header-search-form { display:flex; gap:0; }
.ws-header-search-input {
  flex:1; background:var(--bg-surf); border:1.5px solid var(--border);
  border-radius:12px 0 0 12px; padding:10px 16px;
  color:var(--text); font-size:14px; outline:none;
  transition:border-color .2s;
}
.ws-header-search-input:focus { border-color:var(--wa); }
.ws-header-search-input::placeholder { color:var(--muted); }
.ws-header-search-btn {
  background:var(--gwa); color:#fff; border:none;
  border-radius:0 12px 12px 0; padding:10px 16px;
  font-size:14px; flex-shrink:0;
}
.ws-header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.ws-cart-btn {
  position:relative; background:var(--bg-surf);
  border-radius:10px; border:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; font-size:13px; font-weight:600;
  text-decoration:none; color:var(--text); white-space:nowrap;
  transition:background .2s;
}
.ws-cart-btn:hover { background:var(--border); }
.ws-cart-count {
  position:absolute; top:-6px; right:-6px;
  background:var(--accent2); color:#fff;
  font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}
.ws-header-wa {
  background:var(--gwa); color:#fff; border:none;
  padding:9px 18px; border-radius:10px;
  font-size:13px; font-weight:700; font-family:"Syne",sans-serif;
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; white-space:nowrap;
}

/* Mobile header search — hidden on desktop, shown on mobile */
.ws-search-wrap { display:none; }

/* ============================================================
   PAGE CONTAINER — FULL WIDTH WITH MAX
============================================================ */
.ws-container {
  width:100%; max-width:var(--max); margin:0 auto; padding:0 20px;
}
.ws-full { width:100%; }

/* ============================================================
   HERO BANNER — FULL WIDTH
============================================================ */
.ws-banner {
  margin:20px auto; max-width:var(--max); margin-left:auto; margin-right:auto;
  border-radius:20px;
  background:linear-gradient(135deg,#1A0533 0%,#3B1F8A 60%,#6B21A8 100%);
  padding:32px 32px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  min-height:200px;
}
.ws-banner::before {
  content:""; position:absolute; right:-30px; top:-30px;
  width:220px; height:220px; background:rgba(255,255,255,.06); border-radius:50%;
}
.ws-banner::after {
  content:""; position:absolute; right:100px; bottom:-60px;
  width:160px; height:160px; background:rgba(255,255,255,.03); border-radius:50%;
}
.ws-banner-inner { position:relative; z-index:1; max-width:60%; }
.ws-banner-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:20px; letter-spacing:1px;
  margin-bottom:12px; font-family:"Syne",sans-serif;
}
.ws-banner h1 { font-size:36px; font-weight:800; line-height:1.15; margin-bottom:10px; color:#fff; }
.ws-banner-sub { font-size:14px; color:rgba(255,255,255,.7); margin-bottom:20px; }
.ws-banner-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--grad); color:#fff; border:none;
  padding:13px 28px; border-radius:14px; font-weight:700;
  font-size:15px; font-family:"Syne",sans-serif;
  box-shadow:0 4px 20px rgba(255,107,53,.45);
}
.ws-banner-badge {
  position:relative; z-index:1; flex-shrink:0; margin-left:auto; margin-right:20px;
  background:var(--accent2); color:#fff; font-family:"Syne",sans-serif;
  width:90px; height:90px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; line-height:1.1;
  box-shadow:0 6px 24px rgba(255,61,107,.5);
}
.ws-banner-badge-num { font-size:28px; font-weight:800; }
.ws-banner-badge-txt { font-size:11px; font-weight:600; }

/* ============================================================
   TRENDING + DELIVERY — FULL WIDTH
============================================================ */
.ws-trending {
  display:flex; align-items:center; gap:12px; padding:10px 20px;
  background:rgba(255,107,53,.08);
  border-top:1px solid rgba(255,107,53,.2);
  border-bottom:1px solid rgba(255,107,53,.2); overflow:hidden;
}
.ws-trend-pill {
  flex-shrink:0; background:var(--grad); color:#fff;
  font-size:10px; font-weight:700; padding:4px 12px;
  border-radius:20px; font-family:"Syne",sans-serif; letter-spacing:1px;
}
.ws-trend-scroll { flex:1; overflow:hidden; }
.ws-trend-text {
  font-size:13px; color:var(--trend-text, var(--muted)); white-space:nowrap;
  animation:scrollLeft 25s linear infinite; display:inline-block;
}
@keyframes scrollLeft { from{transform:translateX(100%);} to{transform:translateX(-100%);} }

.ws-delivery {
  max-width:var(--max); margin:12px auto; padding:0 20px;
}
.ws-delivery-inner {
  background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.25);
  border-radius:12px; padding:11px 16px;
  display:flex; align-items:center; gap:10px;
  font-size:13px; line-height:1.4; color:rgba(255,255,255,.85);
  flex-wrap:nowrap; white-space:nowrap; overflow:hidden;
}
.ws-delivery-inner span:last-child { white-space:normal; }
.ws-delivery strong { color:var(--wa); }
.ws-delivery-icon {
  font-size:18px; flex-shrink:0;
  line-height:1; display:flex; align-items:center;
}

/* ============================================================
   SECTIONS
============================================================ */
.ws-sec { max-width:var(--max); margin:20px auto 12px; padding:0 20px; }
.ws-sec-row { display:flex; justify-content:space-between; align-items:center; }
.ws-sec-title { font-size:18px; font-weight:700; font-family:"Syne",sans-serif; color:var(--text); }
.ws-sec-link { font-size:13px; color:var(--accent); font-weight:600; text-decoration:none; }
.ws-sec-link:hover { opacity:.8; }

/* ============================================================
   CATEGORIES — FULL WIDTH SCROLL
============================================================ */
.ws-cats {
  display:flex; gap:10px; overflow-x:auto;
  padding:0 20px 8px; max-width:var(--max); margin:0 auto;
  scrollbar-width:none;
}
.ws-cats::-webkit-scrollbar { display:none; }
.ws-cat {
  flex-shrink:0; padding:8px 20px; border-radius:20px;
  font-size:13px; font-weight:600; border:1px solid var(--border);
  background:var(--bg-surf); color:var(--muted); cursor:pointer;
  transition:all .2s; white-space:nowrap; text-decoration:none;
}
.ws-cat:hover { border-color:var(--accent); color:var(--accent); }
.ws-cat.active,.ws-cat.current-cat,.ws-cat.current-cat-ancestor {
  background:var(--grad); border-color:transparent; color:#fff;
}

/* ============================================================
   DEALS ROW — HORIZONTAL SCROLL
============================================================ */
.ws-deals-row {
  display:flex; gap:14px; overflow-x:auto;
  padding:0 20px 10px; max-width:var(--max); margin:0 auto;
  scrollbar-width:none;
}
.ws-deals-row::-webkit-scrollbar { display:none; }
.ws-deal-card {
  flex-shrink:0; width:170px; background:var(--bg-card);
  border-radius:var(--r); border:1px solid var(--border);
  overflow:hidden; cursor:pointer; transition:transform .2s;
  text-decoration:none; color:inherit; display:block;
}
.ws-deal-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.ws-deal-img {
  height:110px; position:relative; background:var(--bg-surf);
  display:flex; align-items:center; justify-content:center; font-size:38px; overflow:hidden;
}
.ws-deal-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ws-deal-body { padding:10px 12px; }
.ws-deal-name { font-size:13px; font-weight:600; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ws-deal-price { font-size:14px; font-weight:700; color:var(--accent2); }

/* ============================================================
   BADGES
============================================================ */
.ws-badge { position:absolute; top:8px; left:8px; z-index:3; font-size:9px; font-weight:700; padding:3px 9px; border-radius:20px; font-family:"Syne",sans-serif; pointer-events:none; }
.ws-badge-sale { background:var(--off); color:#fff; }
.ws-badge-hot  { background:var(--accent); color:#fff; }
.ws-badge-new  { background:var(--purple); color:#fff; }

/* ============================================================
   PRODUCT GRID — RESPONSIVE COLUMNS
   Mobile: 2 col | Tablet: 3 col | Desktop: 4 col | Wide: 5 col
============================================================ */
.ws-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  max-width:var(--max); margin:0 auto; padding:0 20px;
}
@media(min-width:640px)  { .ws-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px)  { .ws-grid { grid-template-columns:repeat(4,1fr); } }
@media(min-width:1100px) { .ws-grid { grid-template-columns:repeat(5,1fr); } }

/* ============================================================
   PRODUCT CARD — GRID
============================================================ */
.ws-pcard {
  background:var(--bg-card); border-radius:var(--r);
  overflow:hidden; border:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:transform .2s,box-shadow .2s; cursor:pointer; position:relative;
}
.ws-pcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.ws-pcard::before {
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.04));
  transform:skewX(-15deg); transition:left .5s; pointer-events:none; z-index:1;
}
.ws-pcard:hover::before { left:125%; }
.ws-pcard-img {
  position:relative; width:100%; padding-top:100%;
  background:var(--bg-surf); overflow:hidden; flex-shrink:0; display:block;
}
.ws-pcard-img > img,
.ws-pcard-img > span.emoji-fallback {
  position:absolute; inset:0; width:100%; height:100%;
}
.ws-pcard-img > img { object-fit:cover; }
.ws-pcard-img > span.emoji-fallback {
  display:flex; align-items:center; justify-content:center; font-size:44px;
}
.ws-pcard-body { padding:12px; display:flex; flex-direction:column; flex:1; }
.ws-pcard-name {
  font-size:13px; font-weight:600; color:var(--text); margin-bottom:8px;
  line-height:1.35; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; flex:1; text-decoration:none;
}
.ws-pcard-prices { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:10px; min-height:22px; }
.ws-price    { font-size:15px; font-weight:700; color:var(--wa); display:inline-block; }
.ws-old-price{ font-size:11px; color:var(--muted); text-decoration:line-through; display:inline-block; }
.ws-pcard-btns { display:flex; gap:8px; }
.ws-btn-order {
  flex:1; background:var(--gwa); color:#fff; border:none;
  border-radius:var(--r-xs); padding:9px 6px; font-size:11px; font-weight:700;
  font-family:"Syne",sans-serif; display:flex; align-items:center;
  justify-content:center; gap:4px; transition:opacity .2s;
}
.ws-btn-order:hover { opacity:.85; }
.ws-btn-cart {
  width:36px; height:36px; flex-shrink:0; background:var(--bg-surf);
  color:var(--text); border:1px solid var(--border); border-radius:var(--r-xs);
  display:flex; align-items:center; justify-content:center; font-size:16px; transition:all .2s;
}
.ws-btn-cart:hover { background:var(--accent); border-color:var(--accent); }
.ws-btn-cart.added { background:var(--wa); border-color:var(--wa); }

/* ============================================================
   PRODUCT LIST
============================================================ */
.ws-list { display:flex; flex-direction:column; gap:12px; max-width:var(--max); margin:0 auto; padding:0 20px; }
.ws-pcard-list {
  background:var(--bg-card); border-radius:var(--r); border:1px solid var(--border);
  display:flex; gap:16px; padding:14px; color:inherit; transition:transform .2s; cursor:pointer;
}
.ws-pcard-list:hover { transform:translateX(3px); }
.ws-pcard-list-img {
  width:100px; height:100px; flex-shrink:0; border-radius:var(--r-sm);
  background:var(--bg-surf); display:flex; align-items:center;
  justify-content:center; font-size:36px; position:relative; overflow:hidden;
}
.ws-pcard-list-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ws-pcard-list-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.ws-pcard-list-name { font-size:15px; font-weight:600; margin-bottom:5px; color:var(--text); text-decoration:none; }
.ws-pcard-list-desc { font-size:12px; color:var(--muted); margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.ws-pcard-list-prices { display:flex; align-items:center; gap:8px; margin-bottom:10px; min-height:22px; }
.ws-pcard-list-btns { display:flex; gap:8px; }
.ws-btn-order-sm { flex:1; background:var(--gwa); color:#fff; border:none; border-radius:var(--r-xs); padding:8px 12px; font-size:12px; font-weight:700; font-family:"Syne",sans-serif; display:flex; align-items:center; justify-content:center; gap:4px; }
.ws-btn-cart-sm { width:34px; height:34px; flex-shrink:0; background:var(--bg-surf); color:var(--text); border:1px solid var(--border); border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .2s; }
.ws-btn-cart-sm:hover,.ws-btn-cart-sm.added { background:var(--wa); border-color:var(--wa); }

/* ============================================================
   SINGLE PRODUCT — DESKTOP 2-COLUMN LAYOUT
============================================================ */
.ws-single { padding-bottom:60px; }
.ws-back-bar {
  max-width:var(--max); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border);
}
.ws-back-btn {
  width:36px; height:36px; background:var(--bg-surf); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-size:18px; text-decoration:none;
}
.ws-back-label { font-size:13px; color:var(--muted); }
/* Desktop: side-by-side */
.ws-product-layout {
  max-width:var(--max); margin:0 auto; padding:24px 20px;
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media(min-width:768px) {
  .ws-product-layout { grid-template-columns:1fr 1fr; align-items:start; }
}
.ws-gallery { border-radius:var(--r); overflow:hidden; background:var(--bg-surf); }
.ws-gallery-main {
  width:100%; aspect-ratio:1/1; max-height:480px;
  display:flex; align-items:center; justify-content:center;
  font-size:100px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-surf),var(--bg-card));
}
.ws-gallery-main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ws-gallery-thumbs { display:flex; gap:8px; padding:10px; background:var(--bg-card); overflow-x:auto; }
.ws-gallery-thumb {
  width:60px; height:60px; flex-shrink:0; border-radius:10px;
  border:2px solid transparent; background:var(--bg-surf); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden;
}
.ws-gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.ws-gallery-thumb.active { border-color:var(--wa); }
.ws-product-info { padding:4px 0; }
.ws-product-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.ws-product-badge { font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; font-family:"Syne",sans-serif; }
.ws-product-title { font-size:24px; font-weight:800; line-height:1.2; margin-bottom:12px; }
.ws-product-prices { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.ws-product-price { font-size:28px; font-weight:800; color:var(--wa); }
.ws-product-old  { font-size:16px; color:var(--muted); text-decoration:line-through; }
.ws-product-saving { background:rgba(37,211,102,.15); color:var(--wa); font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; }
.ws-product-desc { font-size:14px; color:rgba(255,255,255,.72); line-height:1.9; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.ws-product-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.ws-meta-chip { font-size:12px; padding:5px 14px; border-radius:20px; border:1px solid var(--border); color:var(--muted); text-decoration:none; }
.ws-meta-chip:hover { border-color:var(--wa); color:var(--wa); }
.ws-product-actions { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.ws-product-order-btn {
  width:100%; background:var(--gwa); color:#fff; border:none;
  border-radius:var(--r); padding:18px; font-size:17px; font-weight:700;
  font-family:"Syne",sans-serif; display:flex; align-items:center;
  justify-content:center; gap:10px; box-shadow:0 6px 24px rgba(37,211,102,.4);
}
.ws-product-cart-btn {
  width:100%; background:transparent; color:var(--text); border:1.5px solid var(--border);
  border-radius:var(--r); padding:15px; font-size:15px; font-weight:600;
  font-family:"Syne",sans-serif; display:flex; align-items:center;
  justify-content:center; gap:8px; transition:all .2s;
}
.ws-product-cart-btn:hover { border-color:var(--accent); color:var(--accent); }
.ws-product-cart-btn.added { background:var(--wa); border-color:var(--wa); color:#fff; }
.ws-product-content { font-size:14px; color:rgba(255,255,255,.65); line-height:1.9; margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.ws-product-content h3 { font-size:16px; font-weight:700; margin-bottom:12px; color:var(--text); }

/* Sticky bar — single product */
.ws-sticky-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:400;
  background:rgba(22,22,40,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--border); padding:12px 20px;
  display:flex; gap:12px; align-items:center;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.ws-sticky-bar.visible { transform:translateY(0); }
.ws-sticky-price { font-size:18px; font-weight:800; color:var(--wa); font-family:"Syne",sans-serif; flex-shrink:0; }
.ws-sticky-order {
  flex:1; max-width:300px; background:var(--gwa); color:#fff; border:none;
  border-radius:12px; padding:13px; font-size:15px; font-weight:700;
  font-family:"Syne",sans-serif; display:flex; align-items:center;
  justify-content:center; gap:6px;
}
.ws-sticky-cart {
  width:48px; height:48px; flex-shrink:0; background:var(--bg-surf);
  color:var(--text); border:1px solid var(--border); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}

/* ============================================================
   CART PAGE
============================================================ */
.ws-cart-wrap { max-width:860px; margin:0 auto; padding:24px 20px 80px; }
.ws-cart-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.ws-cart-title { font-size:22px; font-weight:800; font-family:"Syne",sans-serif; }
.ws-cart-item {
  background:var(--bg-card); border-radius:var(--r-sm); border:1px solid var(--border);
  padding:14px; display:flex; gap:14px; margin-bottom:12px; align-items:center;
  transition:opacity .3s,transform .3s;
}
.ws-cart-item.removing { opacity:0; transform:translateX(-20px); }
.ws-cart-item-img { width:72px; height:72px; flex-shrink:0; border-radius:10px; background:var(--bg-surf); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden; position:relative; }
.ws-cart-item-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ws-cart-item-info { flex:1; }
.ws-cart-item-name { font-size:14px; font-weight:600; margin-bottom:6px; }
.ws-cart-item-price { font-size:16px; font-weight:700; color:var(--wa); }
.ws-cart-remove { width:34px; height:34px; flex-shrink:0; background:rgba(255,61,107,.12); border:none; border-radius:50%; color:var(--accent2); font-size:15px; display:flex; align-items:center; justify-content:center; }
.ws-cart-summary { background:var(--bg-surf); border-radius:var(--r-sm); border:1px solid var(--border); padding:18px; margin:16px 0 20px; }
.ws-cart-summary-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14px; }
.ws-cart-summary-row:last-child { margin-top:12px; padding-top:14px; border-top:1px solid var(--border); }
.ws-cart-summary-row:last-child .ws-cart-total-amt { font-size:24px; font-weight:800; color:var(--wa); }
.ws-cart-label { color:var(--muted); }
.ws-cart-val { font-weight:600; color:var(--text); }
.ws-cart-order-btn {
  width:100%; background:var(--gwa); color:#fff; border:none;
  border-radius:var(--r); padding:18px; font-size:17px; font-weight:700;
  font-family:"Syne",sans-serif; display:flex; align-items:center;
  justify-content:center; gap:10px; box-shadow:0 6px 24px rgba(37,211,102,.4);
}
.ws-cart-empty { text-align:center; padding:80px 20px; }
.ws-cart-empty-icon { font-size:72px; margin-bottom:18px; }
.ws-cart-empty h3 { font-size:22px; margin-bottom:10px; }
.ws-cart-empty p { font-size:14px; color:var(--muted); margin-bottom:24px; }
.ws-cart-empty a { display:inline-flex; align-items:center; gap:6px; background:var(--grad); color:#fff; padding:14px 28px; border-radius:var(--r-sm); font-weight:700; font-family:"Syne",sans-serif; font-size:15px; }

/* ============================================================
   WA MODAL
============================================================ */
.ws-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:900; align-items:center; justify-content:center; padding:20px; }
.ws-modal-overlay.open { display:flex; }
.ws-modal { width:100%; max-width:440px; background:var(--bg-card); border-radius:24px; border:1px solid var(--border); overflow:hidden; animation:modalIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes modalIn { from{opacity:0;transform:scale(.94);} to{opacity:1;transform:scale(1);} }
.ws-modal-head { background:var(--gwa); padding:20px 22px; display:flex; align-items:center; gap:12px; }
.ws-modal-icon { width:48px; height:48px; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; }
.ws-modal-name { font-size:17px; font-weight:700; font-family:"Syne",sans-serif; color:#fff; }
.ws-modal-num  { font-size:13px; color:rgba(255,255,255,.75); margin-top:3px; }
.ws-modal-close { margin-left:auto; background:rgba(255,255,255,.15); color:#fff; border:none; width:32px; height:32px; border-radius:50%; font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ws-modal-chat { padding:18px; background:#0B1E12; }
.ws-modal-bubble { background:#1E4D2B; border-radius:4px 18px 18px 18px; padding:14px 16px; font-size:13px; line-height:1.9; color:#D4EDDA; font-family:monospace; white-space:pre-wrap; word-break:break-word; }
.ws-modal-foot { padding:16px 18px 20px; display:flex; gap:12px; }
.ws-modal-cancel { background:var(--bg-surf); color:var(--muted); border:1px solid var(--border); border-radius:var(--r-sm); padding:13px 18px; font-size:14px; cursor:pointer; }
.ws-modal-send { flex:1; background:var(--gwa); color:#fff; border:none; border-radius:var(--r-sm); padding:14px; font-size:16px; font-weight:700; font-family:"Syne",sans-serif; }

/* ============================================================
   FLOATING WA BUTTON
============================================================ */
.ws-float {
  position:fixed; bottom:24px; right:24px; z-index:500;
  width:60px; height:60px; background:var(--wa); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; text-decoration:none;
  box-shadow:0 6px 24px rgba(37,211,102,.55);
  animation:floatBob 3s ease-in-out infinite;
}
.ws-float::after { content:""; position:absolute; width:100%; height:100%; border-radius:50%; background:rgba(37,211,102,.35); animation:floatPulse 2s ease-out infinite; }
@keyframes floatBob { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }
@keyframes floatPulse { 0%{transform:scale(1);opacity:.8;}100%{transform:scale(2);opacity:0;} }

/* ============================================================
   BOTTOM NAV — MOBILE ONLY
============================================================ */
.ws-bottom-nav {
  display:flex; position:fixed; bottom:0; left:0; right:0; z-index:700;
  background:rgba(22,22,40,.97); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  padding:8px 0 calc(10px + env(safe-area-inset-bottom));
}
/* HIDE bottom nav on desktop */
@media(min-width:768px) { .ws-bottom-nav { display:none; } }
.ws-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-size:9px; font-weight:600; text-decoration:none; font-family:"Syne",sans-serif; }
.ws-nav-item svg { width:22px; height:22px; }
.ws-nav-item:hover,.ws-nav-item.active { color:var(--accent); }
.ws-nav-wa-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; }
.ws-nav-wa-circle { width:50px; height:50px; background:var(--gwa); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin-top:-20px; box-shadow:0 4px 20px rgba(37,211,102,.5); border:3px solid var(--dark); }
.ws-nav-wa-label { font-size:9px; font-weight:700; color:var(--wa); font-family:"Syne",sans-serif; }

/* ============================================================
   PADDING — MOBILE HAS BOTTOM NAV, DESKTOP DOESNT
============================================================ */
.ws-pb { padding-bottom:80px; }
@media(min-width:768px) { .ws-pb { padding-bottom:40px; } }

/* ============================================================
   FOOTER — FULL WIDTH
============================================================ */
.ws-footer {
  background:var(--bg-card); border-top:1px solid var(--border);
  padding:40px 20px 32px; text-align:center; margin-top:40px;
}
.ws-footer-inner { max-width:var(--max); margin:0 auto; }
.ws-footer-logo { font-size:24px; font-weight:800; font-family:"Syne",sans-serif; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; }
.ws-footer p { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:16px; }
.ws-footer-wa { display:inline-flex; align-items:center; gap:8px; background:var(--gwa); color:#fff; padding:13px 28px; border-radius:30px; font-weight:700; font-size:14px; font-family:"Syne",sans-serif; text-decoration:none; }
.ws-footer-bottom { margin-top:24px; font-size:12px; color:#444; }

/* ============================================================
   DESKTOP NAV BAR (top navigation links)
============================================================ */
.ws-desktop-nav {
  display:none; background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
@media(min-width:768px) {
  .ws-desktop-nav { display:block; }
}
.ws-desktop-nav-inner {
  max-width:var(--max); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:4px; overflow-x:auto;
  scrollbar-width:none;
}
.ws-desktop-nav-inner::-webkit-scrollbar { display:none; }
.ws-desktop-nav-link {
  padding:10px 16px; font-size:13px; font-weight:500;
  color:var(--muted); white-space:nowrap; text-decoration:none;
  border-bottom:2px solid transparent; transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.ws-desktop-nav-link:hover { color:var(--text); border-bottom-color:var(--accent); }
.ws-desktop-nav-link.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ============================================================
   PAGINATION
============================================================ */
.ws-pagination { padding:24px 20px; text-align:center; max-width:var(--max); margin:0 auto; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.ws-pagination a,.ws-pagination span { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--bg-surf); color:var(--muted); text-decoration:none; transition:all .2s; }
.ws-pagination a:hover { border-color:var(--accent); color:var(--accent); }
.ws-pagination .current { background:var(--grad); border-color:transparent; color:#fff; }

/* ============================================================
   404
============================================================ */
.ws-404 { padding:100px 20px; text-align:center; max-width:500px; margin:0 auto; }
.ws-404-icon { font-size:80px; margin-bottom:20px; }
.ws-404 h1 { font-size:28px; margin-bottom:10px; }
.ws-404 p { color:var(--muted); margin-bottom:24px; }
.ws-404 a { display:inline-flex; gap:6px; align-items:center; background:var(--grad); color:#fff; padding:14px 28px; border-radius:var(--r-sm); font-weight:700; font-family:"Syne",sans-serif; }

/* ============================================================
   TOAST
============================================================ */
.ws-toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--wa); color:#fff; padding:11px 24px; border-radius:30px; font-size:14px; font-weight:600; z-index:9999; font-family:"Syne",sans-serif; box-shadow:0 4px 20px rgba(37,211,102,.4); pointer-events:none; white-space:nowrap; animation:toastIn .3s ease,toastOut .4s ease 1.8s forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1}to{opacity:0;transform:translateX(-50%) translateY(-8px)} }
@media(min-width:768px) { .ws-toast { bottom:24px; } }

/* ============================================================
   MISC HELPERS
============================================================ */
.ws-divider { height:1px; background:var(--border); max-width:var(--max); margin:0 auto 0; }
.ws-related-title { font-size:18px; font-weight:700; font-family:"Syne",sans-serif; max-width:var(--max); margin:28px auto 14px; padding:0 20px; }

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);} }
.ws-pcard      { animation:fadeInUp .35s ease both; }
.ws-pcard-list { animation:fadeInUp .35s ease both; }
.ws-deal-card  { animation:fadeInUp .35s ease both; }
.ws-pcard:nth-child(2),.ws-pcard-list:nth-child(2){animation-delay:.04s;}
.ws-pcard:nth-child(3),.ws-pcard-list:nth-child(3){animation-delay:.08s;}
.ws-pcard:nth-child(4),.ws-pcard-list:nth-child(4){animation-delay:.12s;}
.ws-pcard:nth-child(5){animation-delay:.16s;}
.ws-pcard:nth-child(6){animation-delay:.20s;}

/* ============================================================
   MOBILE ADJUSTMENTS
============================================================ */
@media(max-width:640px) {
  .ws-banner { margin:12px; padding:20px 16px; }
  .ws-banner h1 { font-size:22px; }
  .ws-banner-badge { width:68px; height:68px; }
  .ws-banner-badge-num { font-size:22px; }
  .ws-banner-sub { margin-bottom:14px; }
  .ws-grid { gap:10px; padding:0 14px; }
  .ws-sec,.ws-cats,.ws-deals-row,.ws-list,.ws-pagination,.ws-related-title { padding-left:14px; padding-right:14px; }
  .ws-pcard-name { font-size:12px; }
  .ws-btn-order { font-size:9px; padding:7px 3px; }
}
@media(max-width:360px) {
  .ws-banner h1 { font-size:19px; }
  .ws-banner-badge { width:58px; height:58px; }
  .ws-banner-badge-num { font-size:18px; }
}

/* ============================================================
   DEAL CARD — ENHANCED WITH BOTH PRICES
============================================================ */
.ws-deal-body { padding:10px 12px 12px; }
.ws-deal-name { font-size:13px;font-weight:600;margin-bottom:5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.ws-deal-price { font-size:14px;font-weight:700;color:var(--accent2); }

/* ORDER ID CARD */
.ws-order-id-card {
  background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.3);
  border-radius:12px;padding:12px 16px;margin-bottom:14px;
}

/* SAVINGS BADGE ON CARDS */
.ws-savings-line {
  font-size:11px;color:var(--wa);font-weight:600;
  margin-top:-4px;margin-bottom:8px;display:flex;align-items:center;gap:4px;
}

/* ============================================================
   NEW HEADER CLASSES v7
============================================================ */
.ws-hdr-search {
  flex:1; max-width:480px; margin:0 16px; display:none;
}
@media(min-width:768px){ .ws-hdr-search { display:block; } }
.ws-hdr-search form { display:flex; border-radius:12px; overflow:hidden; border:1.5px solid var(--border); }
.ws-hdr-search-input { flex:1; background:var(--bg-surf); border:none; padding:10px 14px; color:var(--text); font-size:13px; outline:none; }
.ws-hdr-search-input::placeholder { color:var(--muted); }
.ws-hdr-search-btn { background:var(--gwa); color:#fff; border:none; padding:10px 14px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; }

.ws-hdr-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.ws-hdr-cart {
  position:relative; display:flex; align-items:center; gap:6px;
  background:var(--bg-surf); border:1px solid var(--border);
  border-radius:10px; padding:8px 14px; color:var(--text);
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.ws-hdr-cart-label { display:none; }
@media(min-width:768px){ .ws-hdr-cart-label { display:inline; } }
.ws-hdr-wa {
  display:flex; align-items:center; gap:6px;
  background:var(--gwa); color:#fff; border:none;
  padding:9px 14px; border-radius:10px; font-size:13px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}
.ws-hdr-wa span { display:none; }
@media(min-width:640px){ .ws-hdr-wa span { display:inline; } }

/* Mobile search bar */
.ws-mob-search {
  padding:10px 14px; background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
@media(min-width:768px){ .ws-mob-search { display:none !important; } }
.ws-mob-search form { display:flex; gap:8px; }
.ws-mob-search-input {
  flex:1; background:var(--bg-surf); border:1.5px solid var(--border);
  border-radius:12px; padding:10px 14px; color:var(--text);
  font-size:14px; outline:none;
}
.ws-mob-search-input::placeholder { color:var(--muted); }
.ws-mob-search-input:focus { border-color:var(--wa); }
.ws-mob-search-btn {
  background:var(--gwa); color:#fff; border:none;
  border-radius:12px; padding:10px 16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}

/* Desktop nav */
.ws-desk-nav { display:none; background:var(--bg-card); border-bottom:1px solid var(--border); transition:background .25s; }
@media(min-width:768px){ .ws-desk-nav { display:block; } }
.ws-desk-nav-inner {
  max-width:var(--max); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; overflow-x:auto; scrollbar-width:none;
}
.ws-desk-nav-inner::-webkit-scrollbar { display:none; }
.ws-desk-nav-link {
  padding:10px 16px; font-size:13px; font-weight:500; color:var(--muted);
  white-space:nowrap; text-decoration:none;
  border-bottom:2px solid transparent; transition:all .2s;
}
.ws-desk-nav-link:hover { color:var(--text); border-bottom-color:var(--accent); }
.ws-desk-nav-link.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ============================================================
   NEW BOTTOM NAV v7 — Cart center, WA on right
============================================================ */
.ws-bot-nav {
  display:flex;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:700;
  background:rgba(22,22,40,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  padding:8px 0 calc(10px + env(safe-area-inset-bottom));
  align-items:flex-end;
  /* SCROLL JITTER FIX */
  will-change:transform;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  touch-action:none;
}
@media(min-width:768px){ .ws-bot-nav { display:none; } }
.ws-bot-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:9px; font-weight:600; text-decoration:none;
  transition:color .2s;
}
.ws-bot-item svg { width:22px; height:22px; }
.ws-bot-item:hover,.ws-bot-item.active { color:var(--accent); }
.ws-bot-center-wrap {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; margin-bottom:0;
}
.ws-bot-center-btn {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-top:-20px; box-shadow:0 4px 20px rgba(0,0,0,.4);
  border:3px solid var(--dark);
}
.ws-bot-center-label {
  font-size:9px; font-weight:700; margin-top:1px;
}

/* Product card image — FIXED aspect ratio square */
.ws-pcard-img {
  position:relative; width:100%; padding-top:100%;
  background:var(--bg-surf); overflow:hidden; display:block;
}
.ws-pcard-img img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ws-pcard-img .emoji-fallback {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:42px;
}

/* ============================================================
   WA MODAL — Desktop center, mobile bottom sheet
============================================================ */
.ws-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.75); z-index:900;
  align-items:flex-end; justify-content:center;
}
@media(min-width:768px){
  .ws-modal-overlay { align-items:center; }
  .ws-modal { border-radius:24px; max-width:440px; }
}
.ws-modal-overlay.open { display:flex; }
.ws-modal {
  width:100%; max-width:480px; background:var(--bg-card);
  border-radius:24px 24px 0 0; border:1px solid var(--border);
  overflow:hidden; animation:modalIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }
@media(min-width:768px){ @keyframes modalIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} } }
.ws-modal-head { background:var(--gwa); padding:18px 20px; display:flex; align-items:center; gap:12px; }
.ws-modal-icon { width:46px; height:46px; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ws-modal-name { font-size:16px; font-weight:700; color:#fff; }
.ws-modal-num  { font-size:12px; color:rgba(255,255,255,.75); margin-top:2px; }
.ws-modal-close { margin-left:auto; background:rgba(255,255,255,.15); color:#fff; border:none; width:32px; height:32px; border-radius:50%; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ws-modal-chat { padding:16px; background:#0B1E12; }
.ws-modal-bubble { background:#1E4D2B; border-radius:4px 16px 16px 16px; padding:14px 16px; font-size:13px; line-height:1.9; color:#D4EDDA; white-space:pre-wrap; word-break:break-word; font-family:monospace; }
.ws-modal-foot { padding:14px 16px 20px; display:flex; gap:10px; }
.ws-modal-cancel { background:var(--bg-surf); color:var(--muted); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 16px; font-size:14px; cursor:pointer; }
.ws-modal-send { flex:1; background:var(--gwa); color:#fff; border:none; border-radius:var(--r-sm); padding:14px; font-size:16px; font-weight:700; }

/* ============================================================
   BOTTOM NAV SCROLL FIX — GPU layer, no jitter
============================================================ */
.ws-bot-nav {
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
}

/* ============================================================
   HORIZONTAL SCROLL FIX
============================================================ */
.ws-wrapper,
.ws-main-col {
  max-width: 100%;
  overflow-x: hidden;
}
.ws-grid,
.ws-list,
.ws-cats,
.ws-deals-row,
.ws-sec,
.ws-delivery,
.ws-related-title,
.ws-pagination {
  box-sizing: border-box;
}

/* ============================================================
   PRICE COLOR — manageable via --wa variable
============================================================ */
.ws-price {
  color: var(--wa) !important;
}
.ws-product-price {
  color: var(--wa) !important;
}
.ws-cart-item-price {
  color: var(--wa) !important;
}
.ws-deal-price {
  color: var(--accent2) !important;
}

/* ============================================================
   % OFF BADGE — accent2 color (manageable)
============================================================ */
.ws-off-badge {
  background: var(--off);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .3px;
  display: inline-block;
  font-family: var(--font-head);
}
.ws-saving-pill {
  background: rgba(37,211,102,.15);
  color: var(--wa);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
}
.ws-product-saving {
  background: rgba(37,211,102,.15);
  color: var(--wa);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

/* ============================================================
   FONT — apply heading font everywhere via CSS var
============================================================ */
.ws-banner h1,
.ws-logo,
.ws-sec-title,
.ws-product-title,
.ws-cart-title,
.ws-footer-logo,
.ws-btn-order,
.ws-btn-order-sm,
.ws-cart-order-btn,
.ws-product-order-btn,
.ws-header-wa,
.ws-hdr-wa,
.ws-desk-nav-link,
.ws-bot-item,
.ws-bot-center-label,
.ws-banner-cta,
.ws-banner-tag,
.ws-trend-pill,
.ws-footer-wa,
.ws-badge,
.ws-hdr-cart {
  font-family: var(--font-head) !important;
}

/* ============================================================
   SINGLE PRODUCT SAVING % OFF COLOR — uses --wa + --accent2
============================================================ */
span.ws-product-saving { color: var(--wa); background: rgba(37,211,102,.15); }

/* ============================================================
   DESKTOP ONLY — hide on mobile
============================================================ */
.ws-desktop-only {
  display: none !important;
}
@media (min-width: 768px) {
  .ws-desktop-only {
    display: inline-flex !important;
  }
}

/* ============================================================
   HEADER CART — clean icon only on mobile
============================================================ */
.ws-hdr-cart {
  position: relative;
  width: 40px; height: 40px;
  background: var(--surface);
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); text-decoration: none;
  transition: background .2s;
  flex-shrink: 0;
}
.ws-hdr-cart:hover { background: var(--border); }
.ws-cart-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--off); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   FOOTER — FULL REDESIGN WITH LINKS
============================================================ */
.ws-footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 40px 20px 100px;
  margin-top: 40px;
}
.ws-footer-inner { max-width: var(--max); margin: 0 auto; }

.ws-footer-top {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.ws-footer-logo {
  font-size: 24px; font-weight: 800;
  font-family: var(--font-head);
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 10px;
}
.ws-footer-desc {
  font-size: 13px; color: var(--muted);
  line-height: 1.7; margin-bottom: 16px;
  max-width: 400px; margin-left: auto; margin-right: auto;
}
.ws-footer-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gwa); color: #fff;
  padding: 12px 24px; border-radius: 30px;
  font-weight: 700; font-size: 14px;
  font-family: var(--font-head); text-decoration: none;
}

/* Footer links grid */
.ws-footer-links-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.ws-footer-links-title {
  font-size: 12px; font-weight: 700;
  color: var(--text); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 14px;
  font-family: var(--font-head);
}
.ws-footer-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ws-footer-links li a {
  font-size: 13px; color: var(--muted);
  text-decoration: none; transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
.ws-footer-links li a:hover { color: var(--accent); }

/* Footer bottom bar */
.ws-footer-bottom {
  font-size: 12px; color: #444;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center;
}
.ws-footer-bottom-sep { color: #333; }

/* Remove old float button — display:none just in case */
.ws-float { display: none !important; }

/* ============================================================
   SLIDE-UP MENU PANEL (5th bottom nav button)
============================================================ */
.ws-menu-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 800;
}
.ws-menu-overlay.show { display: block; }

.ws-menu-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 850;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.ws-menu-panel.show { transform: translateY(0); }

.ws-menu-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.ws-menu-panel-title {
  font-size: 16px; font-weight: 700;
  font-family: var(--font-head); color: var(--text);
}
.ws-menu-panel-close {
  width: 32px; height: 32px;
  background: var(--surface); color: var(--muted);
  border: none; border-radius: 50%; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ws-menu-panel-body { padding: 8px 0 20px; }
.ws-menu-panel-links {
  list-style: none; margin: 0; padding: 0;
}
.ws-menu-panel-links li a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; font-size: 15px; font-weight: 500;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.ws-menu-panel-links li a:hover {
  background: var(--surface);
}
.ws-menu-panel-links li a svg {
  color: var(--muted); flex-shrink: 0;
}

/* ============================================================
   BOTTOM NAV — 5 items
============================================================ */
.ws-bot-nav {
  display: flex;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 700;
  background: rgba(22,22,40,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  align-items: flex-end;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
@media(min-width:768px){ .ws-bot-nav { display:none; } }
.ws-bot-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  color: var(--muted); font-size: 9px; font-weight: 600;
  text-decoration: none; transition: color .2s;
  font-family: var(--font-head);
}
.ws-bot-item svg { width: 22px; height: 22px; }
.ws-bot-item:hover, .ws-bot-item.active { color: var(--accent); }
.ws-bot-center-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 2px; text-decoration: none;
}
.ws-bot-center-btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: -20px; box-shadow: 0 4px 20px rgba(0,0,0,.4);
  border: 3px solid var(--dark);
}
.ws-bot-center-label { font-size: 9px; font-weight: 700; }

/* Page bottom padding */
.ws-pb { padding-bottom: 80px; }
@media(min-width:768px){ .ws-pb { padding-bottom: 40px; } }

/* ============================================================
   THEME TOGGLE BUTTON
============================================================ */
.ws-theme-toggle-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border-color);
}
.ws-theme-toggle {
  width: 52px; height: 28px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 6px; position: relative; transition: background .3s;
}
.ws-theme-sun  { font-size: 14px; color: #F59E0B; line-height: 1; }
.ws-theme-moon { font-size: 12px; color: #818CF8; line-height: 1; }
.ws-theme-toggle::after {
  content: '';
  position: absolute; width: 20px; height: 20px;
  background: var(--accent); border-radius: 50%;
  left: 3px; transition: left .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
[data-theme="light"] .ws-theme-toggle::after { left: calc(100% - 23px); }
.ws-theme-label { font-size: 12px; color: var(--text-muted); }

/* Header theme toggle (small) */
.ws-hdr-theme {
  width: 34px; height: 34px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--text-muted);
  transition: all .2s; flex-shrink: 0;
}
.ws-hdr-theme:hover { background: var(--border-color); }

/* ============================================================
   MODERN DARK COLOR — use CSS vars from dark root
============================================================ */
body         { background: var(--bg-primary, var(--dark)); color: var(--text-primary, var(--text)); }
.ws-header   { background: var(--bg-card, var(--card)); }
.ws-pcard    { background: var(--bg-card, var(--card)); border-color: var(--border-color, var(--border)); }
.ws-deal-card{ background: var(--bg-card, var(--card)); border-color: var(--border-color, var(--border)); }

/* ============================================================
   CART ANIMATION — bounce when item added
============================================================ */
@keyframes ws-cart-bounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35) rotate(-8deg); }
  50%  { transform: scale(1.2) rotate(8deg); }
  75%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes ws-cart-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 255,107,53), .6); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--accent-rgb, 255,107,53), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 255,107,53), 0); }
}
.ws-cart-added {
  animation: ws-cart-bounce .6s cubic-bezier(.36,.07,.19,.97) both !important;
}
.ws-bot-center-btn.ws-cart-added {
  animation: ws-cart-bounce .6s cubic-bezier(.36,.07,.19,.97) both,
             ws-cart-pulse .6s ease !important;
}

/* Spinner for cart button loading */
.ws-btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ws-spin .7s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* ============================================================
   BOTTOM CART QUANTITY BADGE
============================================================ */
.ws-bot-cart-qty {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--off, #FF3D6B);
  color: #fff; font-size: 10px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--dark, #0D0D1A);
  font-family: var(--font-head);
  animation: ws-badge-pop .3s cubic-bezier(.36,.07,.19,.97);
}
@keyframes ws-badge-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ============================================================
   MODERN COLOR THEME PRESETS (set via --accent in admin)
============================================================ */
/* These are applied via dynamic CSS from admin */
/* Preset 1 — Coral Fire (default): accent=#FF6B35, accent2=#FF3D6B */
/* Preset 2 — Ocean Blue:           accent=#0EA5E9, accent2=#6366F1 */
/* Preset 3 — Royal Purple:         accent=#7C3AED, accent2=#EC4899 */
/* Preset 4 — Emerald:              accent=#10B981, accent2=#06B6D4 */
/* Preset 5 — Midnight Gold:        accent=#F59E0B, accent2=#EF4444 */

/* ============================================================
   TOAST ANIMATION
============================================================ */
@keyframes ws-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   LIGHT MODE — COMPLETE AUTO-SWITCH
   All elements use CSS variables so they auto-update
============================================================ */

/* Smooth transition for ALL theme switches */
*, *::before, *::after {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}
/* But NOT transitions for transforms/animations */
.ws-pcard:hover, .ws-bot-center-btn, .ws-cart-added,
button, a { transition: background-color .25s, color .2s, border-color .2s, transform .2s, opacity .2s; }

/* Body & Wrapper */
body,
.ws-wrapper,
.ws-main-col      { background: var(--bg); color: var(--text); }

/* Header */
.ws-header        { background: var(--header-bg); border-bottom-color: var(--border); }
.ws-desk-nav      { background: var(--bg-card); border-bottom-color: var(--border); }
.ws-desk-nav-link { color: var(--muted); }
.ws-desk-nav-link:hover, .ws-desk-nav-link.active { color: var(--accent); }
.ws-mob-search    { background: var(--bg-card); border-bottom-color: var(--border); }
.ws-mob-search-input,
.ws-hdr-search-input { background: var(--bg-surf); border-color: var(--border); color: var(--text); }
.ws-hdr-cart      { background: var(--bg-surf); border-color: var(--border); color: var(--text); }
.ws-hdr-theme     { background: var(--bg-surf); border-color: var(--border); color: var(--muted); }

/* Cards */
.ws-pcard         { background: var(--bg-card); border-color: var(--border); }
.ws-pcard-list    { background: var(--bg-card); border-color: var(--border); }
.ws-deal-card     { background: var(--bg-card); border-color: var(--border); }
.ws-pcard-name    { color: var(--text); }
.ws-pcard-list-name { color: var(--text); }
.ws-pcard-list-desc { color: var(--muted); }
.ws-pcard-img     { background: var(--bg-surf); }
.ws-pcard-list-img { background: var(--bg-surf); }
.ws-btn-cart      { background: var(--bg-surf); border-color: var(--border); color: var(--text); }

/* Product image area */
.ws-deal-img      { background: var(--bg-surf); }
.ws-gallery-main  { background: linear-gradient(135deg, var(--bg-surf), var(--bg-card)); }
.ws-gallery-thumbs { background: var(--bg-card); }
.ws-gallery-thumb { background: var(--bg-surf); border-color: transparent; }

/* Section titles */
.ws-sec-title     { color: var(--text); }
.ws-sec-link      { color: var(--accent); }

/* Categories */
.ws-cat           { background: var(--bg-surf); border-color: var(--border); color: var(--muted); }
.ws-delivery      { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.25); color: var(--text); }
.ws-delivery-inner { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.25); color: var(--text); }

/* Product Info */
.ws-product-title { color: var(--text); }
.ws-product-desc  { color: var(--muted); }
.ws-meta-chip     { border-color: var(--border); color: var(--muted); }
.ws-product-cart-btn { border-color: var(--border); color: var(--text); }
.ws-product-content { color: var(--muted); }
.ws-product-content h3 { color: var(--text); }
.ws-back-bar      { border-bottom-color: var(--border); background: var(--bg-card); }
.ws-back-btn      { background: var(--bg-surf); color: var(--text); }
.ws-back-label    { color: var(--muted); }

/* Cart */
.ws-cart-wrap     { color: var(--text); }
.ws-cart-title    { color: var(--text); }
.ws-cart-item     { background: var(--bg-card); border-color: var(--border); }
.ws-cart-item-name { color: var(--text); }
.ws-cart-summary  { background: var(--bg-surf); border-color: var(--border); }
.ws-cart-label    { color: var(--muted); }
.ws-cart-val      { color: var(--text); }

/* Bottom Nav */
.ws-bot-nav       { background: var(--nav-bg); border-top-color: var(--border); }
.ws-bot-item      { color: var(--muted); }
.ws-bot-item:hover,
.ws-bot-item.active { color: var(--accent); }
.ws-bot-center-btn { border-color: var(--bg); }

/* Menu Panel */
.ws-menu-panel,
.ws-menu-panel-header { background: var(--bg-card); border-color: var(--border); }
.ws-menu-panel-title  { color: var(--text); }
.ws-menu-panel-close  { background: var(--bg-surf); color: var(--muted); }
.ws-menu-panel-links li a { color: var(--text); border-bottom-color: var(--border); }
.ws-menu-panel-links li a:hover { background: var(--bg-surf); }

/* WA Modal */
.ws-modal         { background: var(--bg-card); border-color: var(--border); }
.ws-modal-cancel  { background: var(--bg-surf); color: var(--muted); border-color: var(--border); }
.ws-modal-name    { color: #fff; }

/* Search Page */
.ws-mob-search-input::placeholder,
.ws-hdr-search-input::placeholder { color: var(--muted); }

/* Footer */
.ws-footer        { background: var(--bg-card); border-top-color: var(--border); }
.ws-footer-desc   { color: var(--muted); }
.ws-footer-links-title { color: var(--text); }
.ws-footer-links li a  { color: var(--muted); }
.ws-footer-bottom { color: var(--subtle); }
.ws-footer-links-wrap  { border-bottom-color: var(--border); }
.ws-footer-top    { border-bottom-color: var(--border); }

/* Theme Toggle */
.ws-theme-toggle  { background: var(--bg-surf); border-color: var(--border); }
.ws-theme-toggle-wrap { border-top-color: var(--border); }
.ws-theme-label   { color: var(--muted); }

/* Cart Empty */
.ws-cart-empty h3 { color: var(--text); }
.ws-cart-empty p  { color: var(--muted); }

/* Old bg references — catch any missed ones */
[data-theme="light"] { background-color: var(--bg); }
[data-theme="light"] body { background: var(--bg); }

/* ============================================================
   THEME TOGGLE BUTTON — improved
============================================================ */
.ws-theme-toggle {
  width: 56px; height: 30px;
  background: var(--bg-surf);
  border: 1.5px solid var(--border);
  border-radius: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 7px; position: relative;
}
.ws-theme-toggle::after {
  content: '';
  position: absolute; width: 22px; height: 22px;
  background: var(--accent); border-radius: 50%;
  left: 3px;
  transition: left .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
[data-theme="light"] .ws-theme-toggle::after { left: calc(100% - 25px); }
.ws-theme-sun  { font-size: 14px; line-height: 1; z-index: 1; }
.ws-theme-moon { font-size: 12px; line-height: 1; z-index: 1; }

/* ============================================================
   TEXT COLOR — ADMIN MANAGEABLE
   All text elements use --text and --muted CSS variables
   which are set by admin via color pickers
============================================================ */

/* Product card names — most important */
.ws-pcard-name,
.ws-pcard-list-name,
.ws-deal-name,
.ws-product-title,
.ws-cart-title,
.ws-sec-title,
.ws-section-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

/* Muted/description text */
.ws-pcard-list-desc,
.ws-product-desc,
.ws-back-label,
.ws-cart-label,
.ws-muted,
.ws-footer-desc {
  color: var(--muted) !important;
}

/* Body text */
body { color: var(--text); }

/* Light mode specific — ensure cards have dark text */
[data-theme="light"] .ws-pcard-name,
[data-theme="light"] .ws-pcard-list-name,
[data-theme="light"] .ws-deal-name,
[data-theme="light"] .ws-product-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  color: var(--text) !important;
}

[data-theme="light"] .ws-pcard-list-desc,
[data-theme="light"] .ws-product-desc,
[data-theme="light"] .ws-deal-body .ws-deal-name {
  color: var(--muted) !important;
}

/* Footer text in light mode */
[data-theme="light"] .ws-footer-links li a,
[data-theme="light"] .ws-footer-desc,
[data-theme="light"] .ws-footer-bottom {
  color: var(--muted) !important;
}
[data-theme="light"] .ws-footer-links-title {
  color: var(--text) !important;
}

/* ============================================================
   PRODUCT GALLERY — MULTIPLE IMAGES + YOUTUBE
============================================================ */
.ws-gallery-thumbs {
  display: flex; gap: 8px; padding: 10px;
  background: var(--bg-card); overflow-x: auto; scrollbar-width:none;
}
.ws-gallery-thumbs::-webkit-scrollbar { display:none; }
.ws-gallery-thumb {
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 10px; border: 2px solid transparent;
  background: var(--bg-surf); cursor: pointer;
  overflow: hidden; transition: border-color .2s;
  position: relative; /* for YT play overlay */
}
.ws-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ws-gallery-thumb.active { border-color: var(--wa); }
.ws-gallery-thumb:hover  { border-color: var(--accent); }

/* Gallery main area — square aspect ratio */
.ws-gallery-main {
  width: 100%;
  aspect-ratio: 1 / 1; /* overridden inline for video */
  max-height: 480px;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: aspect-ratio .3s, max-height .3s;
}
.ws-gallery-main img {
  position: absolute; top:0; left:0;
  width: 100%; height: 100%; object-fit: cover;
}
.ws-gallery-main iframe {
  position: absolute; top:0; left:0;
  width: 100%; height: 100%; border: none; background:#000;
}

/* ============================================================
   UPI PAYMENT SECTION — Cart Page
============================================================ */
.ws-upi-section {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  margin: 16px 0;
  overflow: hidden;
}
.ws-upi-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.ws-upi-header:hover { background: var(--bg-surf); }
.ws-upi-arrow {
  font-size: 12px; color: var(--muted);
  transition: transform .25s;
}
.ws-upi-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
}
.ws-upi-amount {
  display: flex; flex-direction: column;
  align-items: center; padding: 16px 0 14px;
  gap: 4px;
}
.ws-upi-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.ws-upi-app-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 12px 6px;
  border-radius: 12px; text-decoration: none;
  color: #fff; font-size: 11px; font-weight: 700;
  font-family: var(--font-head);
  transition: opacity .2s, transform .15s;
  min-height: 70px;
}
.ws-upi-app-btn:hover {
  opacity: .88; transform: translateY(-2px);
}
.ws-upi-app-btn img {
  width: 28px; height: 28px;
  object-fit: contain; border-radius: 6px;
  background: rgba(255,255,255,.15);
}
.ws-upi-qr-wrap {
  background: var(--bg-surf);
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column;
  align-items: center;
}
.ws-upi-qr {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.ws-upi-qr img {
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* ============================================================
   PRODUCT PAGE — QUANTITY SELECTOR
============================================================ */
.ws-product-qty-wrap {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0 12px; flex-wrap: wrap;
}
.ws-product-qty {
  display: flex; align-items: center;
  background: var(--bg-surf);
  border: 1.5px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.ws-product-qty .ws-qty-btn {
  width: 38px; height: 38px;
  background: none; border: none;
  color: var(--text); font-size: 20px;
  font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ws-product-qty .ws-qty-btn:hover { background: var(--border); }
#wsQtyNum {
  min-width: 36px; text-align: center;
  font-size: 16px; font-weight: 700;
  color: var(--text); padding: 0 4px;
}