/*
Theme Name: Adel Express
Theme URI: https://adelexpres.com
Description: ثيم متجر إلكتروني — Elementor — WooCommerce — RTL — تصميم موبايل كتطبيق
Version: 2.0.0
Author: Adel Express
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: adel-express
Tags: e-commerce, woocommerce, elementor, rtl-language, custom-colors, custom-logo
*/

/* =========================================================
   DESIGN TOKENS — Adel Express palette
   ========================================================= */
:root {
  /* Brand — extracted from the Adel Express logo gradient */
  --p:        #FF7A00;   /* logo orange (mid-tone) */
  --p-d:      #E2450A;   /* logo orange (deep/shadow) */
  --p-l:      #FFF1E5;   /* light orange tint */
  --p2:       #FFA733;   /* logo orange (light highlight) */
  --s:        #0B1F45;   /* logo navy blue */
  --s-d:      #061430;   /* logo navy (deepest) */
  --s-l:      #1B3A6B;   /* logo navy (lighter) */
  --acc:      #00A8E8;   /* logo cyan/sky-blue accent */

  /* Brand gradients — mirror the logo's orange → blue blend */
  --grad-brand:  linear-gradient(120deg, var(--p2) 0%, var(--p) 30%, var(--p-d) 48%, var(--s) 66%, var(--s-d) 100%);
  --grad-brand-r: linear-gradient(300deg, var(--p2) 0%, var(--p) 30%, var(--p-d) 48%, var(--s) 66%, var(--s-d) 100%);
  --grad-navy:   linear-gradient(135deg, var(--s-l) 0%, var(--s) 55%, var(--s-d) 100%);
  --grad-accent: linear-gradient(90deg, var(--acc) 0%, var(--s) 100%);

  /* Neutral */
  --t:        #1a1a1a;
  --t-2:      #4b5563;
  --t-3:      #6b7280;
  --t-4:      #9ca3af;
  --bd:       #e5e7eb;
  --bd-l:     #f3f4f6;
  --bg:       #f5f6f8;
  --card:     #ffffff;

  /* Status */
  --ok: #22c55e; --er: #ef4444; --wa: #f59e0b; --inf: #3b82f6;

  /* Sizing */
  --cont: 1280px;
  --r-xs: 4px; --r-s: 8px; --r: 12px; --r-l: 16px; --r-xl: 24px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh:    0 2px 8px rgba(0,0,0,.06);
  --sh-l:  0 8px 24px rgba(0,0,0,.1);
  --sh-xl: 0 16px 48px rgba(0,0,0,.14);

  --tr: .2s cubic-bezier(.4,0,.2,1);
  --tr-s: .4s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body {
  font-family: 'Cairo','Tajawal','Segoe UI',system-ui,sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--t);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--p); }
img { max-width: 100%; height: auto; display: block; }
ul,ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input,textarea,select { font-family: inherit; }

/* =========================================================
   LAYOUT
   ========================================================= */
.cont { max-width: var(--cont); margin: 0 auto; padding: 0 16px; }
.sec  { padding: 32px 0; }
.sec-sm { padding: 20px 0; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; border-radius: var(--r); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all var(--tr); white-space: nowrap; line-height: 1.2;
  border: 2px solid transparent; text-decoration: none;
}
.btn-p { background: var(--p); color: #fff; border-color: var(--p); }
.btn-p:hover { background: var(--p-d); border-color: var(--p-d); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,122,0,.3); }
.btn-s { background: var(--s); color: #fff; border-color: var(--s); }
.btn-s:hover { background: var(--s-d); color: #fff; }
.btn-o { background: transparent; color: var(--p); border-color: var(--p); }
.btn-o:hover { background: var(--p); color: #fff; }
.btn-ow { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ow:hover { background: #fff; color: var(--p); border-color: #fff; }
.btn-g { background: var(--bg); color: var(--t-2); border-color: var(--bd); }
.btn-g:hover { background: var(--bd); }
.btn-sm { padding: 7px 14px; font-size: 11px; }
.btn-lg { padding: 13px 32px; font-size: 14px; }
.btn-blk { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* =========================================================
   TOPBAR (Adel Express style — dark navy)
   ========================================================= */
.tb {
  background: var(--grad-brand-r); color: rgba(255,255,255,.9);
  font-size: 12px; padding: 8px 0;
}
.tb-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tb a { color: rgba(255,255,255,.85); }
.tb a:hover { color: var(--p); }
.tb-l, .tb-r { display: flex; align-items: center; gap: 16px; }
.tb-sep { color: rgba(255,255,255,.25); }

/* =========================================================
   HEADER (Adel Express — clean white, big search)
   ========================================================= */
.hd { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: var(--sh-xs); border-bottom: 1px solid var(--bd); }
.hd::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); }
.hd-in { display: flex; align-items: center; gap: 20px; padding: 14px 0; }

/* Logo */
.lg { display: flex; align-items: center; flex-shrink: 0; }
.lg-img { height: 44px; width: auto; object-fit: contain; display: block; }
.lg-img--ft { height: 40px; }
.lg-img { height: 44px; width: auto; }
.lg-t { display: flex; flex-direction: row; align-items: center; line-height: 1; gap: 0; white-space: nowrap; }
.lg-t-1 { font-size: 22px; font-weight: 900; color: var(--s); letter-spacing: -.5px; }
.lg-t-2 { font-size: 22px; font-weight: 900; color: var(--p); letter-spacing: -.5px; margin-right: 6px; }

/* Search */
.srch {
  flex: 1; display: flex; align-items: stretch;
  background: #fff; border: 2px solid var(--bd); border-radius: var(--r);
  height: 46px; transition: border-color var(--tr), box-shadow var(--tr);
  position: relative;
}
.srch:focus-within { border-color: var(--p); box-shadow: 0 0 0 3px rgba(255,122,0,.1); }
.srch-cat {
  border: none; background: var(--bg); padding: 0 14px; font-size: 12px;
  color: var(--t-2); cursor: pointer; outline: none; min-width: 130px;
  border-left: 1px solid var(--bd);
  border-radius: 0 var(--r) var(--r) 0;
}
[dir="ltr"] .srch-cat { border-left: none; border-right: 1px solid var(--bd); border-radius: var(--r) 0 0 var(--r); }
.srch-inp { flex: 1; border: none; background: transparent; padding: 0 14px; font-size: 13px; outline: none; min-width: 0; }
.srch-btn {
  background: var(--p); color: #fff; padding: 0 22px; font-size: 13px;
  font-weight: 700; transition: background var(--tr); display: flex; align-items: center; gap: 6px;
  border-radius: var(--r) 0 0 var(--r);
}
[dir="ltr"] .srch-btn { border-radius: 0 var(--r) var(--r) 0; }
.srch-btn:hover { background: var(--p-d); }

/* Header actions */
.hact { display: flex; align-items: center; gap: 4px; }
.ha {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: var(--r); cursor: pointer;
  background: none; color: var(--t); font-size: 10px; font-weight: 600;
  transition: all var(--tr); text-decoration: none;
}
.ha:hover { background: var(--bg); color: var(--p); }
.ha-ico { font-size: 22px; line-height: 1; }
.ha-b {
  position: absolute; top: 2px; right: 4px;
  background: var(--p); color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Burger */
.brg { display: none; flex-direction: column; gap: 4px; padding: 8px; }
.brg-l { width: 22px; height: 2px; background: var(--t); border-radius: 2px; }

/* =========================================================
   CATEGORY NAV BAR (circular icons, centered, under the header)
   ========================================================= */
.cat-nav { background: #fff; border-bottom: 1px solid var(--bd-l); position: sticky; top: var(--hd-h, 65px); z-index: 99; }
.cat-nav-list {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 6px; list-style: none; margin: 0; padding: 10px 0;
  overflow-x: auto; scrollbar-width: none;
}
.cat-nav-list::-webkit-scrollbar { display: none; }
.cat-nav-item { position: relative; flex: 0 0 auto; }
.cat-nav-link {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; width: 84px; padding: 6px 4px 8px; border-radius: var(--r);
  color: var(--t); text-decoration: none; transition: all var(--tr);
}
.cat-nav-link:hover { background: var(--bg); color: var(--p); }
.cat-nav-ic {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background-size: cover; background-position: center;
  border: 2px solid var(--bd-l); transition: all var(--tr);
}
.cat-nav-link:hover .cat-nav-ic { border-color: var(--p); transform: scale(1.06); }
.cat-nav-name {
  font-size: 11px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-nav-arrow { display: none; }

/* Dropdown of branches — centered under its parent circle */
.cat-nav-drop {
  position: absolute; top: 100%; right: 50%; transform: translate(50%, 8px);
  min-width: 220px; max-width: 280px;
  background: #fff; border-radius: var(--r-l); box-shadow: var(--sh-l);
  border: 1px solid var(--bd-l); padding: 12px; z-index: 200;
  opacity: 0; visibility: hidden; transition: all var(--tr);
}
.cat-nav-item.has-children:hover .cat-nav-drop,
.cat-nav-item.has-children.open .cat-nav-drop {
  opacity: 1; visibility: visible; transform: translate(50%, 0);
}
.cat-nav-drop-inner {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 4px;
  max-height: 320px; overflow-y: auto;
}
.cat-nav-drop-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 8px 4px; border-radius: var(--r-s);
  color: var(--t-2); text-decoration: none; font-size: 10.5px; font-weight: 600;
  transition: all .15s;
}
.cat-nav-drop-item:hover { background: var(--bg); color: var(--p); }
.cat-nav-drop-ic {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background-size: cover; background-position: center;
}
.cat-nav-drop-item span:last-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Mobile — category nav becomes a full-width vertical list; branches expand
   inline under their section (tap the section to reveal them) instead of the
   circular horizontal-scroll bar used on desktop. */
@media (max-width: 767px) {
  .cat-nav-list { flex-direction: column; align-items: stretch; overflow: visible; padding: 4px 14px; gap: 0; }
  .cat-nav-item { width: 100%; border-bottom: 1px solid var(--bd-l); }
  .cat-nav-item:last-child { border-bottom: none; }
  .cat-nav-link {
    flex-direction: row; width: 100%; text-align: right; gap: 12px;
    padding: 10px 2px; border-radius: 0;
  }
  [dir="ltr"] .cat-nav-link { text-align: left; }
  .cat-nav-link:hover { background: none; }
  .cat-nav-ic { width: 38px; height: 38px; font-size: 17px; border-width: 1px; }
  .cat-nav-name {
    font-size: 13px; font-weight: 700; flex: 1; text-align: inherit;
    -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cat-nav-arrow { display: flex; font-size: 10px; color: var(--t-3); transition: transform var(--tr); flex-shrink: 0; }
  .cat-nav-item.has-children.open .cat-nav-arrow { transform: rotate(180deg); color: var(--p); }

  /* Branches: hidden by default, expand inline when the section is tapped */
  .cat-nav-drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; max-width: none; box-shadow: none; border: none;
    border-radius: 0; padding: 0; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height var(--tr);
  }
  .cat-nav-item.has-children.open .cat-nav-drop { max-height: 600px; }
  .cat-nav-drop-inner { display: flex; flex-direction: column; grid-template-columns: none; max-height: none; gap: 0; padding: 2px 0 10px; }
  .cat-nav-drop-item { flex-direction: row; text-align: right; gap: 12px; padding: 8px 2px 8px 50px; font-size: 12.5px; }
  [dir="ltr"] .cat-nav-drop-item { text-align: left; padding: 8px 50px 8px 2px; }
  .cat-nav-drop-ic { width: 30px; height: 30px; font-size: 14px; }
  .cat-nav-drop-item span:last-child { -webkit-line-clamp: 1; white-space: nowrap; }
}

/* Category accordion list reused inside the mobile drawer (same "tap the
   section to reveal its branches" behaviour as the header nav on mobile,
   but applied regardless of viewport since the drawer is narrow either way) */
.dr-cats { margin: 0 -18px 4px; padding: 4px 18px 10px; border-bottom: 1px solid var(--bd-l); }
.dr-cats .cat-nav-list { flex-direction: column; align-items: stretch; overflow: visible; padding: 0; gap: 0; }
.dr-cats .cat-nav-item { width: 100%; border-bottom: 1px solid var(--bd-l); }
.dr-cats .cat-nav-item:last-child { border-bottom: none; }
.dr-cats .cat-nav-link { flex-direction: row; width: 100%; text-align: right; gap: 12px; padding: 10px 2px; border-radius: 0; }
[dir="ltr"] .dr-cats .cat-nav-link { text-align: left; }
.dr-cats .cat-nav-link:hover { background: none; }
.dr-cats .cat-nav-ic { width: 36px; height: 36px; font-size: 16px; border-width: 1px; }
.dr-cats .cat-nav-name { font-size: 13px; font-weight: 700; flex: 1; text-align: inherit; -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-cats .cat-nav-arrow { display: flex; font-size: 10px; color: var(--t-3); transition: transform var(--tr); flex-shrink: 0; }
.dr-cats .cat-nav-item.has-children.open .cat-nav-arrow { transform: rotate(180deg); color: var(--p); }
.dr-cats .cat-nav-drop { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; max-width: none; box-shadow: none; border: none; border-radius: 0; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height var(--tr); }
.dr-cats .cat-nav-item.has-children.open .cat-nav-drop { max-height: 600px; }
.dr-cats .cat-nav-drop-inner { display: flex; flex-direction: column; grid-template-columns: none; max-height: none; gap: 0; padding: 2px 0 10px; }
.dr-cats .cat-nav-drop-item { flex-direction: row; text-align: right; gap: 12px; padding: 8px 2px 8px 48px; font-size: 12.5px; }
[dir="ltr"] .dr-cats .cat-nav-drop-item { text-align: left; padding: 8px 48px 8px 2px; }
.dr-cats .cat-nav-drop-ic { width: 28px; height: 28px; font-size: 13px; }
.dr-cats .cat-nav-drop-item span:last-child { -webkit-line-clamp: 1; white-space: nowrap; }

/* =========================================================
   NAVBAR (deep navy with primary categories button)
   ========================================================= */
.nv { background: linear-gradient(90deg, var(--s-d) 0%, var(--s) 60%, var(--s-l) 100%); }
.nv-in { display: flex; align-items: stretch; height: 46px; }
.nv-cb {
  background: var(--p); color: #fff;
  padding: 0 22px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: background var(--tr);
}
.nv-cb:hover { background: var(--p-d); }
.nv-l { display: flex; align-items: stretch; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nv-l::-webkit-scrollbar { display: none; }
.nv-i { display: flex; align-items: center; padding: 0 16px; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 500; white-space: nowrap; transition: all var(--tr); }
.nv-i:hover { color: #fff; background: rgba(255,255,255,.08); }
.nv-i.hot { color: var(--p); }
.nv-r { display: flex; align-items: center; padding: 0 16px; color: rgba(255,255,255,.7); font-size: 12px; }
.nv-r a { color: rgba(255,255,255,.9); font-weight: 700; }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero { background: var(--grad-navy); margin-bottom: 24px; }
.hero-l { display: grid; grid-template-columns: 240px 1fr; min-height: 380px; }
.hero-sb { background: #fff; max-height: 380px; overflow-y: auto; border-left: 1px solid var(--bd-l); }
[dir="ltr"] .hero-sb { border-left: none; border-right: 1px solid var(--bd-l); }
.hero-cl { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 13px; color: var(--t); border-bottom: 1px solid var(--bd-l); transition: all var(--tr); }
.hero-cl:hover { background: var(--p-l); color: var(--p); padding-right: 24px; }
[dir="ltr"] .hero-cl:hover { padding-right: 18px; padding-left: 24px; }
.hero-cl-i { font-size: 18px; width: 22px; }
.hero-cl-a { margin-right: auto; color: var(--t-4); }
[dir="ltr"] .hero-cl-a { margin-right: 0; margin-left: auto; }

.slr { position: relative; height: 380px; overflow: hidden; }
.sl { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; display: flex; align-items: center; padding: 40px 48px; background-size: cover; background-position: center; }
.sl.act { opacity: 1; visibility: visible; }
.sl::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(11,31,69,.85) 0%, rgba(11,31,69,.35) 55%, transparent 90%); }
[dir="ltr"] .sl::before { background: linear-gradient(250deg, rgba(11,31,69,.85) 0%, rgba(11,31,69,.35) 55%, transparent 90%); }
.sl-c { position: relative; z-index: 2; max-width: 480px; color: #fff; }
.sl-bg { display: inline-flex; gap: 5px; background: var(--p); color: #fff; padding: 5px 13px; border-radius: var(--r-xs); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.sl-t { font-size: 38px; font-weight: 900; line-height: 1.15; margin-bottom: 12px; }
.sl-t em { color: var(--p); font-style: normal; }
.sl-d { font-size: 14px; opacity: .85; margin-bottom: 22px; }
.sl-btn { display: flex; gap: 10px; flex-wrap: wrap; }

.slr-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.slr-d { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all var(--tr); }
.slr-d.act { background: var(--p); width: 24px; border-radius: 4px; }
.slr-ar { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 3; transition: all var(--tr); }
.slr-ar:hover { background: var(--p); border-color: var(--p); }
.slr-pv { right: 14px; }
.slr-nx { left: 14px; }
[dir="ltr"] .slr-pv { right: auto; left: 14px; }
[dir="ltr"] .slr-nx { left: auto; right: 14px; }

/* =========================================================
   FEATURES BAR
   ========================================================= */
.fb { background: #fff; padding: 20px 0; border-radius: var(--r-l); margin-bottom: 24px; box-shadow: var(--sh-xs); }
.fb-g { display: grid; grid-template-columns: repeat(4,1fr); }
.fb-i { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-left: 1px solid var(--bd-l); }
.fb-i:first-child { border-left: none; }
[dir="ltr"] .fb-i { border-left: none; border-right: 1px solid var(--bd-l); }
[dir="ltr"] .fb-i:first-child { border-right: none; }
.fb-ic { font-size: 30px; }
.fb-l { font-size: 13px; font-weight: 700; color: var(--s); }
.fb-s { font-size: 11px; color: var(--t-3); margin-top: 2px; }

/* =========================================================
   SECTION HEADER
   ========================================================= */
.sh { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.sh-t { font-size: 22px; font-weight: 800; color: var(--s); padding-bottom: 10px; position: relative; display: inline-flex; align-items: center; gap: 8px; }
.sh-t::after { content: ''; position: absolute; bottom: 0; right: 0; width: 48px; height: 3px; background: var(--p); border-radius: 2px; }
[dir="ltr"] .sh-t::after { right: auto; left: 0; }
.sh-l { font-size: 12px; font-weight: 700; color: var(--p); display: flex; align-items: center; gap: 4px; padding-bottom: 14px; }
.sh-l:hover { gap: 6px; }

/* =========================================================
   CATEGORIES GRID
   ========================================================= */
.cg { display: grid; grid-template-columns: repeat(8,1fr); gap: 14px; }
.cc { background: #fff; border-radius: var(--r-l); padding: 18px 12px; text-align: center; cursor: pointer; transition: all var(--tr); border: 1px solid transparent; }
.cc:hover { transform: translateY(-4px); box-shadow: var(--sh-l); border-color: var(--p-l); }
.cc-i { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--p-l); display: flex; align-items: center; justify-content: center; font-size: 30px; transition: all var(--tr); }
.cc:hover .cc-i { background: var(--p); transform: scale(1.1); }
.cc-n { font-size: 12px; font-weight: 600; color: var(--t); margin-bottom: 3px; }
.cc-s { font-size: 10px; color: var(--t-4); }

/* Category card with real photo (falls back to icon+color when no image is set) */
.cc-i { background-size: cover; background-position: center; }

/* Section + subcategory mega-panel (hover on desktop, tap on mobile) */
.cc-wrap { position: relative; }
.cc-wrap.has-children .cc-n::after { content: ' ▾'; font-size: 9px; color: var(--t-4); }
.cc-mega {
  position: absolute; top: calc(100% + 8px); right: 0; left: 0;
  background: #fff; border-radius: var(--r-l); box-shadow: var(--sh-l);
  border: 1px solid var(--bd-l); padding: 10px; z-index: 30;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--tr);
}
.cc-wrap.has-children:hover .cc-mega,
.cc-wrap.has-children.open .cc-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.cc-mega-inner { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.cc-mega-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: var(--r-s); font-size: 12px; font-weight: 600; color: var(--t-2);
  transition: all .15s;
}
.cc-mega-item:hover { background: var(--bg); color: var(--p); }
.cc-mega-ic {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background-size: cover; background-position: center;
}

@media (max-width: 767px) {
  .cc-mega { position: static; box-shadow: none; border: none; padding: 6px 0 0; margin-top: 4px; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transform: none; }
  .cc-wrap.has-children.open .cc-mega { max-height: 400px; }
  .cc-wrap.has-children:hover .cc-mega { max-height: 0; }
}

/* =========================================================
   FLASH SALE BANNER
   ========================================================= */
.fl {
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  border-radius: var(--r-l); padding: 22px 26px;
  color: #fff; display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 14px;
  position: relative; overflow: hidden;
}
.fl::before { content: ''; position: absolute; top: -50%; right: -10%; width: 200px; height: 200px; background: radial-gradient(rgba(255,255,255,.2), transparent 70%); }
.fl-l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; }
.fl-t { font-size: 22px; font-weight: 900; }
.fl-cd { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.2); padding: 6px 10px; border-radius: var(--r); backdrop-filter: blur(4px); }
.cdu { background: rgba(255,255,255,.15); padding: 4px 9px; border-radius: var(--r-s); text-align: center; min-width: 42px; }
.cdu-n { font-size: 17px; font-weight: 900; line-height: 1; }
.cdu-l { font-size: 8px; text-transform: uppercase; opacity: .8; margin-top: 1px; }
.fl a { position: relative; }

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.pg { display: grid; grid-template-columns: repeat(var(--cols,5),1fr); gap: 16px; }
.pc {
  background: #fff; border-radius: var(--r-l); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: all var(--tr); border: 1px solid transparent;
  box-shadow: var(--sh-xs);
}
.pc:hover { transform: translateY(-4px); box-shadow: var(--sh-l); border-color: var(--bd-l); }
.pc-m { position: relative; overflow: hidden; aspect-ratio: 1; background: #f8f8f8; }
.pc-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pc:hover .pc-img { transform: scale(1.07); }
.pc-bs { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
[dir="ltr"] .pc-bs { right: auto; left: 10px; }
.bd { display: inline-flex; padding: 3px 8px; border-radius: var(--r-xs); font-size: 10px; font-weight: 700; color: #fff; line-height: 1.4; }
.bd-sa { background: var(--er); }
.bd-nw { background: var(--ok); }
.bd-pr { background: var(--p); }
.pc-ac { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; opacity: 0; transform: translateX(-8px); transition: all var(--tr); }
[dir="ltr"] .pc-ac { left: auto; right: 10px; transform: translateX(8px); }
.pc:hover .pc-ac { opacity: 1; transform: translateX(0); }
.pa { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--t-3); box-shadow: var(--sh-xs); transition: all var(--tr); }
.pa:hover, .pa.act { background: var(--p); color: #fff; border-color: var(--p); }
.pa.wished { color: var(--er); }
.pc-b { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pc-cat { font-size: 10px; color: var(--t-4); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.pc-n { font-size: 13px; font-weight: 600; color: var(--t); line-height: 1.45; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--tr); min-height: 36px; }
.pc:hover .pc-n { color: var(--p); }
.pc-r { display: flex; align-items: center; gap: 5px; }
.st { color: var(--wa); font-size: 11px; letter-spacing: .5px; }
.rc { font-size: 10px; color: var(--t-3); }
.pc-p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pn { font-size: 16px; font-weight: 800; color: var(--p); }
.pw { font-size: 12px; color: var(--t-4); text-decoration: line-through; }
.po { font-size: 10px; font-weight: 700; color: var(--ok); }
.pc-sh { font-size: 10px; color: var(--ok); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pc-f { padding: 0 12px 12px; }
.pc-atc { width: 100%; background: var(--p); color: #fff; padding: 9px; font-size: 12px; font-weight: 700; border-radius: var(--r-s); transition: all var(--tr); display: flex; align-items: center; justify-content: center; gap: 5px; }
.pc-atc:hover { background: var(--p-d); transform: translateY(-1px); }

/* =========================================================
   PROMO BANNERS
   ========================================================= */
.pb { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
.pb-c {
  background: linear-gradient(135deg, var(--p), #ffb347);
  border-radius: var(--r-l); padding: 24px 26px; color: #fff;
  position: relative; overflow: hidden; cursor: pointer; transition: all var(--tr);
  min-height: 150px; display: flex; flex-direction: column; justify-content: center;
}
.pb-c:hover { transform: translateY(-4px); box-shadow: var(--sh-l); }
.pb-c:nth-child(2) { background: linear-gradient(135deg, var(--s), var(--s-l)); }
.pb-c:nth-child(3) { background: linear-gradient(135deg, var(--ok), #4ade80); }
.pb-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .9; margin-bottom: 6px; }
.pb-t { font-size: 20px; font-weight: 900; margin-bottom: 4px; line-height: 1.2; }
.pb-d { font-size: 12px; opacity: .85; margin-bottom: 12px; }
.pb-b { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.2); padding: 7px 14px; border-radius: var(--r-s); align-self: flex-start; }

/* =========================================================
   PRODUCT TABS (tabbed product sections)
   ========================================================= */
.tabs { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 2px solid var(--bd-l); flex-wrap: wrap; }
.tab { padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--t-3); border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--tr); }
.tab.act { color: var(--p); border-bottom-color: var(--p); }
.tab:hover { color: var(--p); }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.nl { background: linear-gradient(135deg, var(--s), var(--s-d)); border-radius: var(--r-l); padding: 44px 28px; color: #fff; text-align: center; margin-top: 32px; position: relative; overflow: hidden; }
.nl::before { content: ''; position: absolute; top: -50%; left: -10%; width: 300px; height: 300px; background: radial-gradient(rgba(255,122,0,.15), transparent 70%); }
.nl::after { content: ''; position: absolute; bottom: -50%; right: -10%; width: 300px; height: 300px; background: radial-gradient(rgba(255,122,0,.1), transparent 70%); }
.nl-t { font-size: 24px; font-weight: 900; margin-bottom: 6px; position: relative; }
.nl-s { font-size: 13px; opacity: .7; margin-bottom: 22px; position: relative; }
.nl-f { display: flex; max-width: 460px; margin: 0 auto; background: #fff; border-radius: var(--r); overflow: hidden; position: relative; }
.nl-i { flex: 1; border: none; padding: 13px 16px; font-size: 13px; outline: none; color: var(--t); }
.nl-b { background: var(--p); color: #fff; padding: 13px 26px; font-weight: 700; font-size: 13px; transition: background var(--tr); }
.nl-b:hover { background: var(--p-d); }

/* =========================================================
   FOOTER
   ========================================================= */
.ft { background: linear-gradient(135deg, var(--s-l) 0%, var(--s) 40%, var(--s-d) 75%, var(--p-d) 100%); color: rgba(255,255,255,.75); margin-top: 40px; position: relative; overflow: hidden; }
.ft::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); }
.ft-b { padding: 48px 0 32px; }
.ft-g { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; }
.ft-brand { text-align: right; }
[dir="ltr"] .ft-brand { text-align: left; }
.ft-d { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.85; margin: 14px 0 16px; }
.ft-soc { display: flex; gap: 6px; }
.ft-sb { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; transition: all var(--tr); }
.ft-sb:hover { background: var(--grad-brand); transform: translateY(-2px); }
.ft-h { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--p); display: inline-block; }
.ft-l { display: flex; flex-direction: column; gap: 8px; }
.ft-l a { font-size: 12px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 5px; transition: all var(--tr); }
.ft-l a::before { content: '›'; color: var(--p); font-size: 13px; }
.ft-l a:hover { color: var(--p); transform: translateX(-3px); }
[dir="ltr"] .ft-l a:hover { transform: translateX(3px); }
.ft-app { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ft-app a { background: rgba(255,255,255,.08); padding: 10px 14px; border-radius: var(--r-s); display: flex; align-items: center; gap: 8px; font-size: 12px; transition: all var(--tr); }
.ft-app a:hover { background: rgba(255,255,255,.15); }
.ft-app-i { font-size: 22px; }
.ft-bot { background: rgba(0,0,0,.28); padding: 14px 0; position: relative; z-index: 1; }
.ft-br { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ft-cp { font-size: 11px; color: rgba(255,255,255,.4); }
.ft-pay-imgs { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ft-pay-img { height: auto; max-height: 36px; width: auto; max-width: 280px; object-fit: contain; background: #fff; border-radius: 10px; padding: 8px 14px; opacity: 1; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.ft-pay-img--wallets { max-height: 30px; padding: 6px 14px; }
.ft-pay-img:hover { opacity: .9; }

/* =========================================================
   FLOATING ACTIONS
   ========================================================= */
.bt-top { position: fixed; bottom: 90px; left: 18px; width: 42px; height: 42px; border-radius: 50%; background: var(--p); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: var(--sh-l); opacity: 0; visibility: hidden; transition: all var(--tr); z-index: 90; }
[dir="ltr"] .bt-top { left: auto; right: 18px; }
.bt-top.sh { opacity: 1; visibility: visible; }
.wa-btn { position: fixed; bottom: 90px; right: 18px; width: 50px; height: 50px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 16px rgba(37,211,102,.4); z-index: 90; transition: transform var(--tr); }
[dir="ltr"] .wa-btn { right: auto; left: 18px; }
.wa-btn:hover { transform: scale(1.1); color: #fff; }

/* =========================================================
   TOAST
   ========================================================= */
.ts-wrap { position: fixed; top: 80px; left: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
[dir="ltr"] .ts-wrap { left: auto; right: 16px; }
.ts { background: var(--s); color: #fff; padding: 12px 16px; border-radius: var(--r); font-size: 13px; box-shadow: var(--sh-l); display: flex; align-items: center; gap: 8px; animation: tsIn .25s; border-right: 4px solid var(--p); }
[dir="ltr"] .ts { border-right: none; border-left: 4px solid var(--p); }
.ts.err { border-color: var(--er); }
@keyframes tsIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
[dir="ltr"] @keyframes tsIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }

/* =========================================================
   DRAWERS (cart, mobile menu)
   ========================================================= */
.ovl { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1999; opacity: 0; visibility: hidden; transition: all var(--tr); }
.ovl.open { opacity: 1; visibility: visible; }
.dr { position: fixed; top: 0; right: -100%; width: 340px; max-width: 100%; height: 100vh; height: 100dvh; background: #fff; z-index: 2000; transition: right var(--tr-s); box-shadow: var(--sh-xl); display: flex; flex-direction: column; }
[dir="ltr"] .dr { right: auto; left: -100%; transition: left var(--tr-s); }
.dr.open { right: 0; }
[dir="ltr"] .dr.open { left: 0; }
.dr-h { background: #fff; color: var(--t-1); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid var(--bd-l); }
.dr-c { font-size: 22px; color: var(--t-2); background: none; border: none; cursor: pointer; }
.dr-b { flex: 1; overflow-y: auto; padding: 14px 18px; }

/* =========================================================
   MOBILE BOTTOM NAV (App-like)
   ========================================================= */
/* Mobile bottom nav — see full block at end of file */

/* =========================================================
   APP-LIKE MOBILE STYLES
   ========================================================= */
@media (max-width: 768px) {
  body { padding-bottom: 76px; background: #fff; }

  /* Hide topbar/navbar on mobile (replaced by bottom nav) */
  .tb { display: none; }
  .nv { display: none; }

  /* Compact header */
  .hd { box-shadow: var(--sh-xs); }
  .hd-in { gap: 8px; padding: 10px 12px; height: 54px; }
  .lg-img { height: 32px; }
  .lg-t-1, .lg-t-2 { font-size: 17px; }
  .brg { display: flex; }

  /* Burger sits at the far edge of the header (far LEFT in RTL), away from the
     logo, instead of being crammed right next to it. `order` works for both
     directions because flex `order` follows the writing direction. */
  .brg { order: 99; margin-inline-start: auto; padding: 8px 4px; }
  .lg { order: 1; margin-inline-end: auto; }

  /* Search becomes icon */
  .srch { display: none; }

  /* Mobile search bar (full width below header) */
  .m-srch { display: block; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--bd-l); }
  .m-srch-inp {
    width: 100%; height: 40px; border-radius: var(--r);
    background: var(--bg); border: 1px solid var(--bd);
    padding: 0 14px; font-size: 13px; outline: none;
    display: flex; align-items: center; gap: 8px; color: var(--t-3);
  }
  .m-srch-inp:focus { border-color: var(--p); background: #fff; }

  /* Hide some header actions on mobile */
  .ha { padding: 4px 8px; }
  .ha > span:last-child { display: none; }
  .ha-ico { font-size: 20px; }

  /* Show mobile bottom nav */
  .mnb { display: block; }

  /* Hero - mobile app style */
  .hero-l { grid-template-columns: 1fr; }
  .hero-sb { display: none; }
  .slr { height: 200px; }
  .sl { padding: 24px 20px; }
  .sl-t { font-size: 22px; }
  .sl-d { display: none; }
  .sl-btn { gap: 6px; }
  .sl-btn .btn { padding: 8px 16px; font-size: 12px; }

  /* Compact sections */
  .sec { padding: 20px 0; }
  .cont { padding: 0 12px; }
  .sh-t { font-size: 17px; }

  /* Features Bar - 2 cols */
  .fb { padding: 14px 0; border-radius: var(--r); margin: 0 12px 20px; }
  .fb-g { grid-template-columns: repeat(2,1fr); gap: 14px 0; }
  .fb-i { padding: 0 14px; border: none; gap: 8px; }
  .fb-i:nth-child(odd) { border-left: 1px solid var(--bd-l); }
  [dir="ltr"] .fb-i:nth-child(odd) { border-left: none; border-right: 1px solid var(--bd-l); }
  .fb-ic { font-size: 24px; }
  .fb-l { font-size: 12px; }
  .fb-s { font-size: 10px; }

  /* Categories - full wrapping grid, no scroll */
  .cg {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  }
  .cc {
    padding: 12px 6px; border-radius: var(--r);
  }
  .cc-i { width: 50px; height: 50px; font-size: 24px; margin-bottom: 6px; }
  .cc-n { font-size: 11px; }
  .cc-s { display: none; }

  /* Flash Sale */
  .fl { padding: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .fl-t { font-size: 18px; }
  .fl-cd { font-size: 11px; gap: 4px; padding: 5px 8px; }
  .cdu { min-width: 36px; padding: 3px 6px; }
  .cdu-n { font-size: 14px; }

  /* Products - 2 cols app style */
  .pg { grid-template-columns: repeat(2,1fr); gap: 10px; --cols: 2; }
  .pc { border-radius: var(--r); }
  .pc-b { padding: 10px; gap: 4px; }
  .pc-cat { display: none; }
  .pc-n { font-size: 12px; min-height: 32px; -webkit-line-clamp: 2; }
  .pn { font-size: 14px; }
  .pw { font-size: 11px; }
  .po { display: none; }
  .pc-sh { font-size: 9px; }
  .pc-f { padding: 0 10px 10px; }
  .pc-atc { padding: 8px; font-size: 11px; }
  .pc-ac { opacity: 1 !important; transform: translateX(0) !important; }
  .pc-ac a[aria-label="👁"] { display: none; } /* hide quick view, keep wishlist */

  /* Promo banners - stacked */
  .pb { grid-template-columns: 1fr; gap: 10px; }
  .pb-c { padding: 18px; min-height: 110px; }
  .pb-t { font-size: 17px; }

  /* Newsletter */
  .nl { padding: 32px 20px; margin: 20px 12px; border-radius: var(--r); }
  .nl-t { font-size: 18px; }
  .nl-f { flex-direction: column; background: transparent; gap: 8px; }
  .nl-i { border-radius: var(--r); background: #fff; }
  .nl-b { border-radius: var(--r); }

  /* Footer */
  .ft { display: none; }
  .ft-b { padding: 32px 0 20px; }
  .ft-g { grid-template-columns: 1fr; gap: 28px; }
  .ft-br { flex-direction: column; gap: 10px; text-align: center; }
  .ft-pay-imgs { align-items: center; }

  /* Tabs */
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; gap: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
}

@media (max-width: 480px) {
  .sl-t { font-size: 19px; }
  .pg { gap: 8px; }
  .sh-t { font-size: 15px; }
}

/* =========================================================
   WooCommerce overrides
   ========================================================= */
.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce .button {
  background: var(--p) !important; color: #fff !important;
  border-radius: var(--r-s) !important; font-family: inherit !important;
  font-weight: 700 !important; padding: 10px 22px !important;
  font-size: 13px !important; transition: all var(--tr) !important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover { background: var(--p-d) !important; }
.woocommerce .star-rating span::before { color: var(--wa); }
.bcrm { font-size: 11px; color: var(--t-3); margin-bottom: 16px; }
.bcrm a { color: var(--t-3); }
.bcrm a:hover { color: var(--p); }
.bc-sp { margin: 0 6px; color: var(--t-4); }

/* =========================================================
   UNIFIED BUTTON SYSTEM (overrides — single source of truth)
   ========================================================= */
.btn, .ae-btn, button.button, .button, a.button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce .actions > button, .single_add_to_cart_button,
.woocommerce-Button, .added_to_cart, #place_order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 11px 22px !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
  white-space: nowrap !important;
  border: 2px solid var(--p) !important;
  background: var(--p) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 42px !important;
}
.btn:hover, .ae-btn:hover, button.button:hover, .button:hover, a.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover, #place_order:hover {
  background: var(--p-d) !important;
  border-color: var(--p-d) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(255,122,0,.3) !important;
}
.btn[disabled], .button:disabled, .woocommerce .button:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.btn-s, .ae-btn-secondary, .woocommerce .button.alt:not(.disabled) {
  background: var(--s) !important;
  border-color: var(--s) !important;
  color: #fff !important;
}
.btn-s:hover, .ae-btn-secondary:hover, .woocommerce .button.alt:hover {
  background: var(--s-d) !important;
  border-color: var(--s-d) !important;
}
.btn-o, .ae-btn-outline {
  background: transparent !important;
  color: var(--p) !important;
  border-color: var(--p) !important;
}
.btn-o:hover, .ae-btn-outline:hover {
  background: var(--p) !important;
  color: #fff !important;
}
.btn-g, .ae-btn-ghost {
  background: var(--bg) !important;
  color: var(--t-2) !important;
  border-color: var(--bd) !important;
}
.btn-g:hover, .ae-btn-ghost:hover {
  background: var(--bd) !important;
  border-color: var(--t-4) !important;
}
.btn-ow, .ae-btn-outline-white {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.7) !important;
}
.btn-ow:hover { background: #fff !important; color: var(--p) !important; border-color: #fff !important; }
.btn-sm { padding: 7px 14px !important; font-size: 11px !important; min-height: 32px !important; }
.btn-lg { padding: 13px 32px !important; font-size: 14px !important; min-height: 48px !important; }
.btn-blk, .ae-btn-block { width: 100% !important; }

/* =========================================================
   BRANDS SLIDER (Apple, Samsung, Honor, etc.)
   ========================================================= */
.brands-wrap { background: #fff; border-radius: var(--r-l); padding: 24px; box-shadow: var(--sh-xs); }
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.brand-cell {
  background: #fafafa;
  border: 1px solid var(--bd-l);
  border-radius: var(--r);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--tr);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  position: relative;
  overflow: hidden;
}
.brand-cell:hover {
  border-color: var(--p);
  background: #fff;
  box-shadow: var(--sh);
  transform: translateY(-3px);
}
.brand-cell img {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  object-fit: contain;
  filter: grayscale(80%);
  transition: filter var(--tr);
}
.brand-cell:hover img { filter: grayscale(0); }
.brand-cell-text {
  font-size: 17px;
  font-weight: 800;
  color: var(--t-3);
  letter-spacing: -.3px;
  transition: color var(--tr);
}
.brand-cell:hover .brand-cell-text { color: var(--p); }

/* =========================================================
   SINGLE PRODUCT — REIMAGINED (AliExpress/Apple inspired)
   ========================================================= */
.sp-wrap { background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-xs); }
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 320px;
  gap: 24px;
  padding: 24px;
}

/* Gallery */
.sp-gal { display: flex; flex-direction: column; gap: 12px; }
.sp-main-wrap {
  background: #fafafa;
  border-radius: var(--r);
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.sp-main-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .4s;
}
.sp-main-wrap:hover .sp-main-img { transform: scale(1.1); }
.sp-discount-tag {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(135deg, var(--er), var(--wa));
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 8px 14px; border-radius: var(--r);
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
  z-index: 2;
}
.sp-wish-overlay {
  position: absolute; top: 14px; left: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; box-shadow: var(--sh);
  transition: all var(--tr); border: 2px solid transparent;
  z-index: 2; color: var(--t-3);
}
.sp-wish-overlay:hover, .sp-wish-overlay.wished {
  border-color: var(--er); color: var(--er);
  background: #fff;
}
.sp-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.sp-thumb {
  aspect-ratio: 1; border-radius: var(--r-s);
  overflow: hidden; cursor: pointer;
  border: 2px solid var(--bd); background: #fafafa;
  transition: all .15s;
}
.sp-thumb:hover, .sp-thumb.active {
  border-color: var(--p);
  transform: scale(1.05);
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Info (middle column) */
.sp-info { display: flex; flex-direction: column; gap: 14px; }
.sp-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--p); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  width: fit-content;
}
.sp-title {
  font-size: 22px; font-weight: 800; line-height: 1.35;
  color: var(--s); margin: 0;
}
.sp-meta-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--t-3);
  padding-bottom: 14px; border-bottom: 1px solid var(--bd-l);
}
.sp-rating-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fef3c7; color: #92400e;
  padding: 4px 10px; border-radius: 20px;
  font-weight: 700; font-size: 12px;
}
.sp-sold-count {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--t-3);
}
.sp-stock-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700;
}
.sp-stock-status.in { color: var(--ok); }
.sp-stock-status.out { color: var(--er); }

/* Price card (highlighted) */
.sp-price-card {
  background: linear-gradient(135deg, var(--p-l), #fff7ed);
  border: 2px dashed var(--p);
  border-radius: var(--r);
  padding: 18px 20px;
}
.sp-price-line {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.sp-price-now {
  font-size: 32px; font-weight: 900; color: var(--p);
  line-height: 1;
}
.sp-price-old {
  font-size: 16px; color: var(--t-4);
  text-decoration: line-through;
}
.sp-saving {
  background: var(--ok); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 4px;
  margin-right: auto;
}
.sp-price-deal {
  margin-top: 8px; font-size: 11px; color: var(--er);
  font-weight: 700; display: flex; align-items: center; gap: 5px;
}
.sp-countdown-mini {
  display: inline-flex; gap: 3px; margin-right: 4px;
  font-family: monospace; font-weight: 800;
}
.sp-countdown-mini span {
  background: var(--er); color: #fff;
  padding: 2px 6px; border-radius: 3px;
  min-width: 24px; text-align: center;
}

/* Variations */
.sp-variant-group { margin-top: 4px; }
.sp-variant-label {
  font-size: 12px; font-weight: 700; color: var(--t);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.sp-variant-label span { color: var(--t-3); font-weight: 500; }
.sp-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-variant {
  padding: 8px 16px; border: 2px solid var(--bd);
  border-radius: var(--r-s); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  background: #fff; min-width: 60px; text-align: center;
}
.sp-variant:hover { border-color: var(--p); }
.sp-variant.active { border-color: var(--p); background: var(--p-l); color: var(--p); }
.sp-variant-color {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--bd);
  cursor: pointer; transition: box-shadow .15s;
}
.sp-variant-color.active, .sp-variant-color:hover {
  box-shadow: 0 0 0 2px var(--p);
}

/* Short description */
.sp-short-desc {
  font-size: 13px; line-height: 1.85; color: var(--t-2);
}
.sp-features-list {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); border-radius: var(--r); padding: 14px 16px;
}
.sp-feature-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--t-2);
}
.sp-feature-row::before {
  content: '✓'; color: var(--ok); font-weight: 900;
  font-size: 14px; flex-shrink: 0;
}

/* Right column: Buy box (Apple-style) */
.sp-buy-box {
  background: var(--bg);
  border-radius: var(--r-l);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  height: fit-content;
  position: sticky; top: 90px;
}
.sp-buy-title {
  font-size: 14px; font-weight: 800; color: var(--s);
  margin-bottom: 4px;
}
.sp-buy-price {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 22px; font-weight: 900; color: var(--p);
}
.sp-buy-price small { font-size: 13px; color: var(--t-4); text-decoration: line-through; font-weight: 600; }
.sp-buy-delivery {
  background: #fff; border-radius: var(--r-s);
  padding: 12px 14px; font-size: 12px;
  border: 1px solid var(--bd-l);
}
.sp-buy-delivery-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0;
}
.sp-buy-delivery-row + .sp-buy-delivery-row { border-top: 1px solid var(--bd-l); padding-top: 8px; margin-top: 3px; }
.sp-buy-delivery-icon { font-size: 16px; flex-shrink: 0; }
.sp-buy-delivery-label { font-size: 11px; color: var(--t-3); }
.sp-buy-delivery-text { font-weight: 700; color: var(--t); font-size: 12px; }

/* Qty selector */
.sp-qty-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: var(--r-s);
  padding: 10px 14px; border: 1px solid var(--bd-l);
}
.sp-qty-label { font-size: 12px; font-weight: 700; color: var(--t); }
.sp-qty-wrap {
  display: flex; align-items: center; gap: 0;
  background: var(--bg); border-radius: var(--r-xs);
  overflow: hidden;
}
.sp-qty-btn {
  width: 30px; height: 30px;
  background: transparent; border: none;
  font-size: 16px; font-weight: 700; color: var(--t-2);
  cursor: pointer; transition: all .15s;
}
.sp-qty-btn:hover { background: var(--p); color: #fff; }
.sp-qty-input {
  width: 44px; text-align: center; border: none;
  background: transparent; font-size: 14px; font-weight: 700;
  font-family: inherit; outline: none;
}

/* Action buttons */
.sp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sp-buy-now {
  background: linear-gradient(135deg, var(--p), #FFA733) !important;
  color: #fff !important;
  padding: 13px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: var(--r) !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px !important;
}
.sp-buy-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,122,0,.4) !important;
}
.sp-add-to-cart {
  background: var(--s) !important;
  color: #fff !important;
  padding: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--r) !important;
  border: 2px solid var(--s) !important;
  min-height: 46px !important;
}
.sp-add-to-cart:hover { background: var(--s-d) !important; }

/* Trust badges */
.sp-trust {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 8px;
}
.sp-trust-item {
  background: #fff; border-radius: var(--r-s);
  padding: 10px 8px; text-align: center;
  font-size: 10px; color: var(--t-3); font-weight: 600;
  border: 1px solid var(--bd-l);
}
.sp-trust-icon { font-size: 18px; margin-bottom: 3px; display: block; }

/* Share buttons */
.sp-share {
  display: flex; gap: 6px; align-items: center;
  font-size: 11px; color: var(--t-3);
  margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--bd);
}
.sp-share-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: all .15s;
  border: 1px solid var(--bd-l);
}
.sp-share-btn:hover { background: var(--p); color: #fff; border-color: var(--p); transform: translateY(-2px); }

/* Tabs + Description */
.sp-tabs-wrap {
  background: #fff; border-radius: var(--r-l);
  padding: 24px; box-shadow: var(--sh-xs); margin-top: 16px;
}
.sp-tabs-nav {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--bd-l);
  margin-bottom: 24px; overflow-x: auto;
  scrollbar-width: none;
}
.sp-tabs-nav::-webkit-scrollbar { display: none; }
.sp-tab-btn {
  padding: 12px 22px; font-size: 13px; font-weight: 700;
  color: var(--t-3); border-bottom: 3px solid transparent;
  margin-bottom: -2px; cursor: pointer;
  transition: all var(--tr); white-space: nowrap;
  background: none; border-left: none; border-right: none; border-top: none;
}
.sp-tab-btn.active { color: var(--p); border-bottom-color: var(--p); }
.sp-tab-btn:hover { color: var(--p); }

/* Highlight features cards (Apple style) */
.sp-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-top: 20px;
}
.sp-highlight {
  background: linear-gradient(135deg, var(--bg), #fff);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
  border: 1px solid var(--bd-l);
  transition: all var(--tr);
}
.sp-highlight:hover { transform: translateY(-3px); border-color: var(--p); }
.sp-highlight-icon { font-size: 32px; margin-bottom: 8px; }
.sp-highlight-title { font-size: 13px; font-weight: 700; color: var(--s); margin-bottom: 4px; }
.sp-highlight-desc { font-size: 11px; color: var(--t-3); line-height: 1.6; }

/* Recommended products (4 desktop / 2 mobile) */
.recom-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* =========================================================
   ACCOUNT AVATAR UPLOAD
   ========================================================= */
.acc-avatar-wrap {
  position: relative; display: inline-block;
  margin-bottom: 12px;
}
.acc-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.3);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  object-fit: cover; background: #fff;
}
.acc-avatar-edit {
  position: absolute; bottom: 0; right: -4px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; border: 3px solid var(--s);
  transition: all var(--tr);
}
.acc-avatar-edit:hover { background: var(--p-d); transform: scale(1.1); }
.acc-avatar-input { display: none; }

/* =========================================================
   FORM FIELDS — Premium look (wide, no decorative icons)
   ========================================================= */
.fld-group { margin-bottom: 16px; }
.fld-input-wrap { position: relative; }
.fld-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--bd);
  border-radius: var(--r);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--t);
  outline: none;
  transition: all var(--tr);
}
/* Reserve space for the show/hide password toggle only when it's present */
.fld-input-wrap:has(.fld-eye) .fld-input { padding-right: 44px; }
[dir="rtl"] .fld-input-wrap:has(.fld-eye) .fld-input { padding-right: 16px; padding-left: 44px; }
.fld-input:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 4px rgba(255,122,0,.1);
}
.fld-label {
  font-size: 13px; font-weight: 700; color: var(--t);
  margin-bottom: 6px; display: block;
}
.fld-eye {
  position: absolute; top: 50%; right: 14px;
  transform: translateY(-50%);
  font-size: 18px; color: var(--t-4);
  cursor: pointer; background: none; border: none;
}
[dir="rtl"] .fld-eye { right: auto; left: 14px; }

/* =========================================================
   MOBILE BOTTOM NAV — Refined (better sizing)
   ========================================================= */
@media (max-width: 768px) {
  /* mnb rules consolidated into the single "MOBILE BOTTOM NAV — Modern App Style v2" block below */

  /* Single product: stack columns */
  .sp-layout { grid-template-columns: 1fr !important; gap: 16px !important; padding: 14px !important; }
  .sp-buy-box { position: relative !important; top: 0 !important; }
  .sp-title { font-size: 18px !important; }
  .sp-price-now { font-size: 26px !important; }
  .sp-thumbs { grid-template-columns: repeat(5, 1fr) !important; }

  /* Recommended: 2 cols */
  .recom-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Brand cells: smaller */
  .brand-cell { height: 70px !important; padding: 14px 10px !important; }
  .brand-cell-text { font-size: 14px !important; }

  /* Tabs: scrollable */
  .sp-tab-btn { padding: 10px 14px !important; font-size: 12px !important; }
}

/* ============================================================
   UNIFIED BUTTONS (single source for whole theme)
   ============================================================ */
.btn, .ae-btn, button.button, .button, a.button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .single_add_to_cart_button,
.woocommerce-Button, #place_order, .checkout-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important; padding: 11px 22px !important;
  border-radius: var(--r) !important; font-size: 13px !important; font-weight: 700 !important;
  line-height: 1.2 !important; cursor: pointer !important; transition: all var(--tr) !important;
  white-space: nowrap !important; border: 2px solid var(--p) !important;
  background: var(--p) !important; color: #fff !important; text-decoration: none !important;
  font-family: inherit !important; min-height: 42px !important; box-shadow: none !important;
}
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover, #place_order:hover {
  background: var(--p-d) !important; border-color: var(--p-d) !important;
  transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(255,122,0,.3) !important;
}
.btn[disabled], .button:disabled { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; }
.btn-s, .ae-btn-secondary, .woocommerce .button.alt { background: var(--s) !important; border-color: var(--s) !important; }
.btn-s:hover, .woocommerce .button.alt:hover { background: var(--s-d) !important; border-color: var(--s-d) !important; }
.btn-o, .ae-btn-outline { background: transparent !important; color: var(--p) !important; border-color: var(--p) !important; }
.btn-o:hover { background: var(--p) !important; color: #fff !important; }
.btn-g, .ae-btn-ghost { background: var(--bg) !important; color: var(--t-2) !important; border-color: var(--bd) !important; }
.btn-g:hover { background: var(--bd) !important; border-color: var(--t-4) !important; }
.btn-ow { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
.btn-ow:hover { background: #fff !important; color: var(--p) !important; }
.btn-sm { padding: 7px 14px !important; font-size: 11px !important; min-height: 32px !important; }
.btn-lg { padding: 13px 32px !important; font-size: 14px !important; min-height: 48px !important; }
.btn-blk { width: 100% !important; }

/* ============================================================
   BRANDS GRID
   ============================================================ */
.brnd-wrap { background: #fff; border-radius: var(--r-l); padding: 22px; box-shadow: var(--sh-xs); }
.brnd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.brnd-cell { background: #fafafa; border: 1px solid var(--bd-l); border-radius: var(--r); padding: 20px 14px;
  text-align: center; cursor: pointer; transition: all var(--tr); display: flex; align-items: center;
  justify-content: center; height: 90px; overflow: hidden; }
.brnd-cell:hover { border-color: var(--p); background: #fff; box-shadow: var(--sh); transform: translateY(-3px); }
.brnd-cell img { max-width: 100%; max-height: 50px; object-fit: contain; filter: grayscale(80%); transition: filter var(--tr); }
.brnd-cell:hover img { filter: grayscale(0); }
.brnd-cell-txt { font-size: 17px; font-weight: 800; color: var(--t-3); transition: color var(--tr); }
.brnd-cell:hover .brnd-cell-txt { color: var(--p); }

/* ============================================================
   SINGLE PRODUCT — AliExpress / Apple reimagined
   ============================================================ */
.sp-wrap { background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-xs); }
.sp-layout { display: grid; grid-template-columns: 1fr 1fr 320px; gap: 24px; padding: 24px; }
.sp-gal { display: flex; flex-direction: column; gap: 12px; }
.sp-main-wrap { background: #fafafa; border-radius: var(--r); aspect-ratio: 1; overflow: hidden; position: relative; cursor: zoom-in; }
.sp-main-img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.sp-main-wrap:hover .sp-main-img { transform: scale(1.1); }
.sp-discount-tag { position: absolute; top: 14px; right: 14px; background: linear-gradient(135deg, var(--er), var(--wa));
  color: #fff; font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: var(--r);
  box-shadow: 0 4px 12px rgba(239,68,68,.3); z-index: 2; }
.sp-wish-overlay { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px;
  cursor: pointer; box-shadow: var(--sh); transition: all var(--tr); border: 2px solid transparent;
  z-index: 2; color: var(--t-3); }
.sp-wish-overlay:hover, .sp-wish-overlay.wished { border-color: var(--er); color: var(--er); }
.sp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sp-thumb { aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; cursor: pointer;
  border: 2px solid var(--bd); background: #fafafa; transition: all .15s; }
.sp-thumb:hover, .sp-thumb.active { border-color: var(--p); transform: scale(1.05); }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sp-info { display: flex; flex-direction: column; gap: 14px; }
.sp-brand-line { font-size: 12px; color: var(--p); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.sp-title { font-size: 22px; font-weight: 800; line-height: 1.35; color: var(--s); margin: 0; }
.sp-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--bd-l); }
.sp-rating-pill { background: #fef3c7; color: #92400e; padding: 4px 10px; border-radius: 20px;
  font-weight: 700; font-size: 12px; }
.sp-stock-status { font-weight: 700; }
.sp-stock-status.in { color: var(--ok); }
.sp-stock-status.out { color: var(--er); }
.sp-price-card { background: linear-gradient(135deg, var(--p-l), #fff7ed);
  border: 2px dashed var(--p); border-radius: var(--r); padding: 18px 20px; }
.sp-price-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sp-price-now { font-size: 32px; font-weight: 900; color: var(--p); line-height: 1; }
.sp-price-old { font-size: 16px; color: var(--t-4); text-decoration: line-through; }
.sp-saving { background: var(--ok); color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 4px; }
.sp-price-deal { margin-top: 8px; font-size: 11px; color: var(--er); font-weight: 700;
  display: flex; align-items: center; gap: 5px; }
.sp-countdown-mini { display: inline-flex; gap: 3px; font-family: monospace; font-weight: 800; }
.sp-countdown-mini span { background: var(--er); color: #fff; padding: 2px 6px; border-radius: 3px;
  min-width: 24px; text-align: center; }
.sp-variant-label { font-size: 12px; font-weight: 700; color: var(--t); margin-bottom: 8px; }
.sp-variant-label span { color: var(--t-3); font-weight: 500; }
.sp-variants-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-variant { padding: 8px 16px; border: 2px solid var(--bd); border-radius: var(--r-s);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; background: #fff; }
.sp-variant.active, .sp-variant:hover { border-color: var(--p); background: var(--p-l); color: var(--p); }
.sp-features-list { background: var(--bg); border-radius: var(--r); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; }
.sp-feature-row { display: flex; gap: 8px; font-size: 12px; color: var(--t-2); }
.sp-feature-row::before { content: '✓'; color: var(--ok); font-weight: 900; font-size: 14px; }

/* Buy box (right column, Apple-style) */
.sp-buy-box { background: var(--bg); border-radius: var(--r-l); padding: 20px;
  display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; height: fit-content; }
.sp-buy-title { font-size: 14px; font-weight: 800; color: var(--s); }
.sp-buy-price { display: flex; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 900; color: var(--p); }
.sp-buy-price small { font-size: 13px; color: var(--t-4); text-decoration: line-through; font-weight: 600; }
.sp-buy-delivery { background: #fff; border-radius: var(--r-s); padding: 12px 14px;
  font-size: 12px; border: 1px solid var(--bd-l); }
.sp-buy-delivery-row { display: flex; gap: 8px; padding: 5px 0; }
.sp-buy-delivery-row + .sp-buy-delivery-row { border-top: 1px solid var(--bd-l); padding-top: 8px; margin-top: 3px; }
.sp-buy-delivery-icon { font-size: 16px; flex-shrink: 0; }
.sp-buy-delivery-label { font-size: 11px; color: var(--t-3); }
.sp-buy-delivery-text { font-weight: 700; font-size: 12px; }
.sp-qty-row { display: flex; align-items: center; justify-content: space-between; background: #fff;
  border-radius: var(--r-s); padding: 10px 14px; border: 1px solid var(--bd-l); }
.sp-qty-wrap { display: flex; align-items: center; background: var(--bg); border-radius: var(--r-xs); overflow: hidden; }
.sp-qty-btn { width: 30px; height: 30px; background: transparent; border: none; font-size: 16px;
  font-weight: 700; cursor: pointer; transition: all .15s; }
.sp-qty-btn:hover { background: var(--p); color: #fff; }
.sp-qty-input { width: 44px; text-align: center; border: none; background: transparent;
  font-size: 14px; font-weight: 700; font-family: inherit; outline: none; }
.sp-buy-now { background: linear-gradient(135deg, var(--p), #FFA733) !important;
  padding: 13px !important; font-size: 14px !important; font-weight: 800 !important; min-height: 48px !important;
  border: none !important; }
.sp-buy-now:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(255,122,0,.4) !important; }
.sp-add-to-cart-btn { background: var(--s) !important; border-color: var(--s) !important;
  padding: 12px !important; font-size: 13px !important; min-height: 46px !important; }
.sp-add-to-cart-btn:hover { background: var(--s-d) !important; border-color: var(--s-d) !important; }
.sp-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-trust-item { background: #fff; border-radius: var(--r-s); padding: 10px 8px;
  text-align: center; font-size: 10px; color: var(--t-3); font-weight: 600; border: 1px solid var(--bd-l); }
.sp-trust-icon { font-size: 18px; margin-bottom: 3px; display: block; }
.sp-tabs-wrap { background: #fff; border-radius: var(--r-l); padding: 24px;
  box-shadow: var(--sh-xs); margin-top: 16px; }
.sp-tabs-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--bd-l);
  margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.sp-tab-btn { padding: 12px 22px; font-size: 13px; font-weight: 700; color: var(--t-3);
  border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer;
  transition: all var(--tr); white-space: nowrap; background: none; border-left: none;
  border-right: none; border-top: none; }
.sp-tab-btn.active, .sp-tab-btn:hover { color: var(--p); border-bottom-color: var(--p); }

/* Recommended (4 desktop / 2 mobile) */
.recom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ============================================================
   ACCOUNT AVATAR UPLOAD
   ============================================================ */
.acc-avatar-wrap { position: relative; display: inline-block; }
.acc-avatar { width: 90px; height: 90px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.3); object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); background: #fff; }
.acc-avatar-edit { position: absolute; bottom: 0; right: -4px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--p);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; border: 3px solid var(--s); transition: all var(--tr); }
.acc-avatar-edit:hover { background: var(--p-d); transform: scale(1.1); }
.acc-avatar-input { display: none; }

/* ============================================================
   MOBILE BOTTOM NAV — Refined sizing
   ============================================================ */
@media (max-width: 768px) {
  /* Old mnb override block 2 removed */

  /* Single Product: stack columns */
  .sp-layout { grid-template-columns: 1fr !important; gap: 16px !important; padding: 14px !important; }
  .sp-buy-box { position: relative !important; top: 0 !important; }
  .sp-title { font-size: 18px !important; }
  .sp-price-now { font-size: 26px !important; }
  /* Recommended: 2 cols on mobile */
  .recom-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* Brands: smaller */
  .brnd-cell { height: 70px !important; padding: 14px 10px !important; }
  .brnd-cell-txt { font-size: 14px !important; }
}

/* ============================================================
   LOGO & HEADER IMPROVEMENTS (Desktop + Mobile)
   ============================================================ */

/* Desktop logo - refined size */
.lg-img { height: 40px !important; width: auto; max-width: 160px; object-fit: contain; }
.lg-t-1 { font-size: 20px !important; font-weight: 900; }
.lg-t-2 { font-size: 20px !important; font-weight: 900; }

/* Desktop header improvements */
.hd { box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.hd-in { padding: 16px 0 !important; gap: 24px !important; min-height: 76px; justify-content: space-between; }

/* Search bar refined — narrower, not full-width */
.srch { flex: 0 1 420px; max-width: 420px; height: 44px !important; border-radius: 14px !important; border-width: 2px !important; }
.srch-inp { font-size: 14px; }
.srch-cat { font-size: 13px; font-weight: 600; }
.srch-btn { font-weight: 700; padding: 0 24px !important; font-size: 14px !important; }

/* Header actions improved */
.ha { padding: 8px 12px !important; gap: 4px !important; }
.ha-ico { font-size: 24px !important; }
.ha > span:last-child { font-size: 11px !important; font-weight: 600; }
.ha-b { top: 4px !important; right: 6px !important; }


/* === Mobile-only elements hidden by default === */
.m-srch-drawer, .m-srch-btn { display: none; }

/* ============================================================
   MOBILE HEADER (App-like, refined sizes)
   ============================================================ */
@media (max-width: 768px) {
  /* Hide topbar */
  .tb { display: none !important; }

  /* Compact header */
  .hd { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
  .hd-in {
    padding: 10px 14px !important;
    min-height: 60px !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Burger button - LEFT side */
  .brg {
    display: flex !important;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--bg);
    align-items: center; justify-content: center;
    gap: 3px !important;
    padding: 0 !important;
    flex-direction: column;
    flex-shrink: 0;
    order: 1;
  }
  .brg-l { width: 18px !important; height: 2px !important; background: var(--t) !important; }

  /* Logo - RIGHT side, NOT touching burger */
  .lg { flex: 0 0 auto; order: 3; }
  .lg-img { height: 38px !important; max-width: 140px; }
  .lg-t-1, .lg-t-2 { font-size: 19px !important; }

  /* Hide desktop search on mobile */
  .srch { display: none !important; }

  /* Header actions - icons only, center */
  .hact {
    gap: 4px !important;
    flex-shrink: 0;
    order: 2;
    margin: 0 auto;
  }
  .ha {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    background: var(--bg);
    border-radius: 10px;
    margin-right: 0;
  }
  .ha-ico { font-size: 18px !important; }
  .ha > span:last-child { display: none !important; }
  .ha-b {
    top: -2px !important;
    right: -2px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    border-width: 2px !important;
  }
  [dir="ltr"] .ha-b { right: auto !important; left: -2px !important; }

  /* Account + wishlist shown on mobile */

  /* Mobile search drawer (slides down from top) */
  .m-srch-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff;
    z-index: 200;
    padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .m-srch-drawer.open { transform: translateY(0); }
  .m-srch-drawer-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
  }
  .m-srch-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--bg);
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--t-2);
    flex-shrink: 0;
  }
  .m-srch-input {
    flex: 1;
    height: 44px;
    border: 2px solid var(--bd);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: var(--bg);
  }
  .m-srch-input:focus { border-color: var(--p); background: #fff; }

  /* Hide desktop nav on mobile */
  .nv { display: none !important; }
}

/* Hide mobile search button on desktop */
@media (min-width: 769px) {
  .m-srch-btn { display: none !important; }
  .m-srch-drawer { display: none !important; }
}

/* ============================================================
   CART PAGE - MOBILE FRIENDLY (Product-style design)
   ============================================================ */
.ae-cart-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: flex-start;
}
.ae-cart-items {
  background: #fff;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.ae-cart-head {
  background: linear-gradient(135deg, var(--s), var(--s-l));
  color: #fff;
  padding: 16px 22px;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ae-cart-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd-l);
  align-items: center;
}
.ae-cart-row:last-child { border-bottom: none; }
.ae-cart-img {
  width: 90px; height: 90px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
}
.ae-cart-img img { width: 100%; height: 100%; object-fit: cover; }
.ae-cart-info { min-width: 0; }
.ae-cart-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--s);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ae-cart-price-line {
  font-size: 14px;
  font-weight: 800;
  color: var(--p);
}
.ae-cart-remove {
  font-size: 11px;
  color: var(--er);
  font-weight: 700;
  text-decoration: none;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ae-cart-qty {
  display: flex;
  background: var(--bg);
  border-radius: var(--r-s);
  overflow: hidden;
  align-items: center;
}
.ae-cart-qty-btn {
  width: 32px; height: 36px;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: var(--t-2);
  transition: all .15s;
}
.ae-cart-qty-btn:hover { background: var(--p); color: #fff; }
.ae-cart-qty-input {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.ae-cart-subtotal {
  font-size: 16px;
  font-weight: 800;
  color: var(--p);
  white-space: nowrap;
}

/* Summary (sticky aside) */
.ae-cart-summary {
  background: #fff;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  position: sticky;
  top: 90px;
}
.ae-cart-sum-head {
  background: var(--s);
  color: #fff;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 14px;
}
.ae-cart-sum-body { padding: 20px; }
.ae-cart-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13px;
}
.ae-cart-sum-row.total {
  border-top: 2px solid var(--bd);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 800;
}
.ae-cart-sum-row.total span:last-child { color: var(--p); }
.ae-cart-coupon {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.ae-cart-coupon input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r-s);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.ae-cart-coupon input:focus { border-color: var(--p); }

/* CART - MOBILE */
@media (max-width: 768px) {
  .ae-cart-wrap { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ae-cart-summary { position: relative !important; top: 0 !important; }
  .ae-cart-row {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    grid-template-rows: auto auto;
  }
  .ae-cart-img { width: 80px; height: 80px; }
  .ae-cart-info { grid-column: 2; }
  .ae-cart-name { font-size: 13px !important; -webkit-line-clamp: 2; }
  .ae-cart-row .ae-cart-qty,
  .ae-cart-row .ae-cart-subtotal {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .ae-cart-bottom-actions {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px dashed var(--bd-l);
  }
  .ae-cart-head { padding: 12px 16px; font-size: 13px; }
  .ae-cart-sum-body { padding: 16px; }
}

/* ============================================================
   CHECKOUT - Product-page style design
   ============================================================ */
.ae-checkout-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: flex-start;
}
.ae-checkout-main {
  background: #fff;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.ae-checkout-section {
  padding: 22px 24px;
  border-bottom: 1px solid var(--bd-l);
}
.ae-checkout-section:last-child { border-bottom: none; }
.ae-checkout-section h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--s);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ae-checkout-section h3::before {
  content: attr(data-step);
  background: var(--p);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

/* Style WooCommerce form rows like premium product fields */
.woocommerce-checkout .form-row {
  margin-bottom: 14px;
  position: relative;
}
.woocommerce-checkout .form-row label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 7px !important;
  color: var(--t) !important;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 2px solid var(--bd) !important;
  border-radius: var(--r) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  outline: none !important;
  background: #fff !important;
  transition: all var(--tr) !important;
  height: auto !important;
  min-height: 48px !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 4px rgba(255,122,0,.1) !important;
}

/* Order summary (right side) */
.ae-checkout-aside {
  background: #fff;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  position: sticky;
  top: 90px;
}
.ae-checkout-aside-head {
  background: var(--s);
  color: #fff;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 14px;
}
.ae-checkout-aside-body { padding: 18px 20px; }

/* Make place order button big and prominent like Buy Now on product page */
#place_order {
  background: linear-gradient(135deg, var(--p), #FFA733) !important;
  color: #fff !important;
  padding: 15px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: var(--r) !important;
  border: none !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 14px !important;
  cursor: pointer;
  transition: all var(--tr) !important;
}
#place_order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,122,0,.4) !important;
}

/* Payment methods - card-style */
.wc_payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
}
.wc_payment_method {
  background: var(--bg);
  border: 2px solid var(--bd);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: all var(--tr);
}
.wc_payment_method:has(input:checked) {
  border-color: var(--p);
  background: var(--p-l);
}
.wc_payment_method label {
  font-weight: 700 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.wc_payment_method .payment_box {
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--r-s);
  margin-top: 10px;
  font-size: 12px;
  color: var(--t-3);
  line-height: 1.7;
}

/* CHECKOUT - MOBILE */
@media (max-width: 768px) {
  .ae-checkout-wrap { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ae-checkout-aside { position: relative !important; top: 0 !important; }
  .ae-checkout-section { padding: 16px !important; }
}

/* ============================================================
   REGISTER FORM - additional polish
   ============================================================ */
.woocommerce-form-register .form-row,
.woocommerce-form-login .form-row { position: relative; margin-bottom: 14px; }

/* Make sure register tab is clickable */
.woocommerce-form-register input,
.woocommerce-form-login input {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 2px solid var(--bd) !important;
  border-radius: var(--r) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  outline: none !important;
}
.woocommerce-form-register input:focus,
.woocommerce-form-login input:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 4px rgba(255,122,0,.1) !important;
}

/* ============================================================
   MY ACCOUNT pages - all forms styled properly
   ============================================================ */
.woocommerce-EditAccountForm,
.woocommerce-EditAddressForm,
.lost_reset_password {
  max-width: 720px;
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-EditAddressForm fieldset {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
}
.woocommerce-EditAccountForm legend,
.woocommerce-EditAddressForm legend {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--s) !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
  width: 100%;
  display: block;
}

/* All input fields inside My Account (catch-all) */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content textarea,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content .select2-selection {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 2px solid var(--bd) !important;
  border-radius: var(--r) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  outline: none !important;
  background: #fff !important;
  transition: all var(--tr) !important;
  height: auto !important;
  min-height: 48px !important;
}
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-MyAccount-content select:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 4px rgba(255,122,0,.1) !important;
}
.woocommerce-MyAccount-content label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--t) !important;
  margin-bottom: 6px !important;
}
.woocommerce-MyAccount-content .form-row {
  margin-bottom: 14px !important;
}
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
  background: linear-gradient(135deg, var(--p), #FFA733) !important;
  color: #fff !important;
  padding: 13px 28px !important;
  border-radius: var(--r) !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  min-height: 48px !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
}
.woocommerce-MyAccount-content .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,122,0,.3) !important;
}

/* Required asterisk */
.woocommerce-MyAccount-content .required {
  color: var(--er) !important;
  text-decoration: none;
}

/* Description text below fields */
.woocommerce-MyAccount-content em,
.woocommerce-MyAccount-content small {
  font-size: 11px;
  color: var(--t-3);
  display: block;
  margin-top: 6px;
}

/* ============================================================
   MOBILE BOTTOM NAV — Modern app style (icon-only, circular chips)
   ============================================================ */
.mnb {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 76px;
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -6px 22px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mnb::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; background: var(--grad-brand-r); border-radius: 4px; }

.mnb-l {
  display: grid;
  grid-template-columns: 1fr 1fr 72px 1fr 1fr;
  height: 100%;
  align-items: center;
  position: relative;
}

.mnb-i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
}

.mnb-i .mnb-ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7bcc6;
  background: #f4f5f7;
  transition: all .2s;
}
.mnb-i .mnb-ic svg { width: 24px; height: 24px; stroke: currentColor; }

.mnb-i.act .mnb-ic {
  background: var(--p-l);
  color: var(--p);
}

/* FAB wrap — center column */
.mnb-fab-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

/* FAB button — elevated circle */
.mnb-fab {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00C2FF, #0072FF);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,114,255,.4);
  border: 4px solid #fff;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  z-index: 2;
}
.mnb-fab svg { width: 27px; height: 27px; stroke: #fff; }

.mnb-fab:hover,
.mnb-fab:active {
  transform: translateX(-50%) scale(1.06);
}

/* Cart badge */
.mnb-fab .mnb-b,
.mnb-b {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 20px;
  height: 20px;
  background: #0072FF;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  z-index: 3;
  line-height: 1;
}

@media (min-width: 769px) {
  .mnb { display: none !important; }
}
@media (max-width: 768px) {
  .mnb { display: block; }
  /* add bottom padding so content isn't hidden behind nav */
  body { padding-bottom: 76px; }
}

/* ============================================================
   MOBILE HEADER - Clean: ☰ Logo [wish] [cart] [account]
   ============================================================ */
@media (max-width: 768px) {
  /* Show wishlist on mobile explicitly */
  .ha[href*="wishlist"] { display: flex !important; }

  /* Hide m-srch-btn (removed from HTML too) */
  .m-srch-btn, .m-srch-drawer { display: none !important; }

  /* Mobile header actions: wish + cart + account */
  .hact {
    display: flex !important;
    align-items: center;
    gap: 4px;
  }
  .hact .ha {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    background: var(--bg);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .hact .ha .ha-ico { font-size: 18px !important; }
  .hact .ha > span:last-child { display: none !important; }
  .hact .ha.cart-trig { background: var(--p-l) !important; }

  /* Cart removed from mobile header (already available via the bottom nav FAB) */
  .hact .ha.cart-trig { display: none !important; }

  /* Account icon removed from mobile header (already available via the bottom nav) */
  .hact .ha:first-child { display: none !important; }

  /* Push hamburger to far end away from logo (logo stays right on RTL) */
  .hd-in { display: flex !important; align-items: center; justify-content: space-between !important; }
  .brg   { order: 10; margin-right: auto; margin-left: 0; }
  [dir="rtl"] .brg { margin-right: 0; margin-left: auto; }

  /* Cart badge on header cart button */
  .hact .ha-b {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    font-size: 8px !important;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--er) !important;
    color: #fff !important;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff !important;
  }
}

/* ============================================================
   POLICY PAGES (returns, privacy, shipping, terms)
   ============================================================ */
.ae-policy-wrap {
  background: #fff;
  border-radius: var(--r-l);
  padding: 36px 40px;
  box-shadow: var(--sh-xs);
  max-width: 820px;
  margin: 0 auto;
}
.ae-policy-wrap h1 {
  font-size: 26px;
  font-weight: 900;
  color: var(--s);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ae-policy-wrap .ae-policy-date {
  font-size: 12px;
  color: var(--t-3);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--p);
  display: inline-block;
}
.ae-policy-wrap h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--s);
  margin: 28px 0 10px;
  padding-right: 12px;
  border-right: 4px solid var(--p);
}
.ae-policy-wrap h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--s);
  margin: 20px 0 8px;
}
.ae-policy-wrap p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--t-2);
  margin-bottom: 12px;
}
.ae-policy-wrap ul {
  margin: 10px 0 16px 0;
  padding: 0;
  list-style: none;
}
.ae-policy-wrap ul li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--t-2);
  padding: 7px 14px;
  background: var(--bg);
  border-radius: var(--r-s);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ae-policy-wrap ul li::before {
  content: '✓';
  color: var(--p);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.ae-policy-info-box {
  background: var(--p-l);
  border: 2px solid var(--p);
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 13px;
  color: var(--t);
  line-height: 1.8;
}
@media (max-width: 768px) {
  .ae-policy-wrap { padding: 20px 16px !important; }
  .ae-policy-wrap h1 { font-size: 20px !important; }
  .ae-policy-wrap h2 { font-size: 15px !important; }
}

/* Wishlist page grid */
@media (max-width: 768px) {
  .recom-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ============================================================
   CHECKOUT — Premium Redesign (override previous)
   ============================================================ */
.woocommerce-checkout, .woocommerce-cart {
  background: #f6f7f9;
}
body.woocommerce-checkout #content,
body.woocommerce-checkout .site-content {
  background: #f6f7f9;
}

/* Container */
.woocommerce-checkout .ae-checkout-wrap {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 24px !important;
  align-items: flex-start;
  padding: 30px 0;
  max-width: 1280px;
  margin: 0 auto;
}

/* Step header (replaces emoji circles) */
.woocommerce-checkout .ae-checkout-main {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px rgba(15, 28, 60, 0.06) !important;
  border: 1px solid #ecedef;
}
.woocommerce-checkout .ae-checkout-section {
  padding: 26px 28px !important;
  border-bottom: 1px solid #f0f1f3 !important;
  position: relative;
}
.woocommerce-checkout .ae-checkout-section h3 {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #0B1F45 !important;
  margin: 0 0 22px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-right: 0 !important;
}
.woocommerce-checkout .ae-checkout-section h3::before {
  content: attr(data-step) !important;
  background: linear-gradient(135deg, #FF7A00, #FFA733) !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,122,0,.3);
}

/* Form rows - 2 columns layout for compact form */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.woocommerce-checkout .form-row {
  margin-bottom: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
.woocommerce-checkout .form-row.form-row-wide,
.woocommerce-checkout .form-row-full,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_address_2_field,
.woocommerce-checkout #order_comments_field {
  grid-column: 1 / -1 !important;
}

/* Labels & inputs */
.woocommerce-checkout .form-row label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin-bottom: 7px !important;
  color: #374151 !important;
  letter-spacing: .2px;
}
.woocommerce-checkout .form-row label .required {
  color: #ef4444 !important;
  text-decoration: none !important;
  margin-right: 3px;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select {
  width: 100% !important;
  padding: 13px 15px !important;
  border: 1.5px solid #e2e4e8 !important;
  border-radius: 10px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  background: #fafbfc !important;
  transition: all .2s !important;
  min-height: 48px !important;
  color: #111;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row .select2-container--focus .select2-selection {
  border-color: #FF7A00 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,122,0,.12) !important;
  outline: none !important;
}
.woocommerce-checkout .form-row textarea {
  min-height: 100px !important;
  resize: vertical;
}
.woocommerce-checkout .select2-container .select2-selection--single {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
}

/* Hide login prompt clutter */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  background: #fff8f3 !important;
  border: 1.5px dashed #FF7A00 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
}
.woocommerce-checkout .showcoupon,
.woocommerce-checkout .showlogin {
  color: #FF7A00 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Right side - Order summary */
.woocommerce-checkout .ae-checkout-aside {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px rgba(15, 28, 60, 0.06) !important;
  border: 1px solid #ecedef !important;
  position: sticky !important;
  top: 90px !important;
}
.woocommerce-checkout .ae-checkout-aside-head {
  background: linear-gradient(135deg, #0B1F45, #1B3A6B) !important;
  color: #fff !important;
  padding: 18px 22px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.woocommerce-checkout .ae-checkout-aside-body {
  padding: 18px 22px !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
  border: none !important;
  width: 100% !important;
}
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table .product-name strong {
  font-size: 13px !important;
  color: #0B1F45 !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: none !important;
  padding: 10px 0 !important;
  border-bottom: 1px dashed #eee !important;
  font-size: 13px !important;
}
.woocommerce-checkout-review-order-table .product-name {
  color: #374151 !important;
  font-weight: 600;
  font-size: 13px !important;
  line-height: 1.5;
}
.woocommerce-checkout-review-order-table .product-name strong.product-quantity {
  font-weight: 800;
  color: #FF7A00;
  margin-right: 4px;
}
.woocommerce-checkout-review-order-table .product-total {
  text-align: left !important;
  white-space: nowrap;
  font-weight: 700;
  color: #0B1F45;
}
.woocommerce-checkout-review-order-table .cart_item:last-child td {
  border-bottom: 2px solid #f0f1f3 !important;
}
.woocommerce-checkout-review-order-table tfoot tr th {
  font-weight: 700;
  color: #4b5563;
  padding: 12px 0 !important;
}
.woocommerce-checkout-review-order-table tfoot tr td {
  text-align: left !important;
  font-weight: 800;
  color: #0B1F45;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total th {
  font-size: 15px !important;
  color: #0B1F45 !important;
  font-weight: 900 !important;
  padding-top: 16px !important;
  border-top: 2px solid #f0f1f3 !important;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  font-size: 22px !important;
  color: #FF7A00 !important;
  font-weight: 900 !important;
  padding-top: 16px !important;
  border-top: 2px solid #f0f1f3 !important;
}

/* Payment methods - REDESIGN */
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 18px !important;
  padding: 0 !important;
}
.woocommerce-checkout #payment > .wc_payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce-checkout #payment .wc_payment_method {
  background: #fafbfc !important;
  border: 2px solid #e2e4e8 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  transition: all .22s !important;
  position: relative;
  cursor: pointer;
}
.woocommerce-checkout #payment .wc_payment_method:hover {
  border-color: rgba(255,122,0,.4) !important;
  background: #fff !important;
}
.woocommerce-checkout #payment .wc_payment_method:has(input:checked) {
  border-color: #FF7A00 !important;
  background: linear-gradient(135deg, #FFF0E5, #FFE0CC) !important;
  box-shadow: 0 4px 14px rgba(255,122,0,.18) !important;
}
.woocommerce-checkout #payment .wc_payment_method > label {
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #0B1F45 !important;
  width: 100%;
  margin: 0 !important;
  padding-right: 26px !important;
  position: relative;
}
.woocommerce-checkout #payment .wc_payment_method > input[type="radio"] {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
}
/* Custom radio */
.woocommerce-checkout #payment .wc_payment_method > label::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #cdd1d6 !important;
  border-radius: 50% !important;
  background: #fff !important;
  flex-shrink: 0;
  transition: all .2s;
}
.woocommerce-checkout #payment .wc_payment_method:has(input:checked) > label::before {
  border-color: #FF7A00 !important;
  background: #FF7A00 !important;
  box-shadow: inset 0 0 0 4px #fff;
}
.woocommerce-checkout #payment .wc_payment_method img {
  max-height: 28px !important;
  margin: 0 !important;
  vertical-align: middle;
}
.woocommerce-checkout #payment .wc_payment_method .payment_box {
  background: #fff !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  margin: 12px 0 0 !important;
  font-size: 12.5px !important;
  color: #6b7280 !important;
  line-height: 1.7 !important;
  border: 1px solid #f0f1f3;
}
.woocommerce-checkout #payment .wc_payment_method .payment_box::before {
  display: none !important;
}

/* Terms checkbox */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  background: #fafbfc;
  border: 1.5px solid #e2e4e8;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.woocommerce-checkout .form-row.validate-required.woocommerce-invalid input.input-checkbox {
  outline: 2px solid #ef4444 !important;
}

/* PLACE ORDER BUTTON */
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, #FF7A00 0%, #FFA733 50%, #FF7A00 100%) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  border: none !important;
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 8px !important;
  cursor: pointer;
  transition: all .25s !important;
  box-shadow: 0 8px 22px rgba(255,122,0,.35) !important;
  letter-spacing: .3px;
  text-transform: none !important;
  position: relative;
  overflow: hidden;
  font-family: 'Cairo', sans-serif !important;
}
.woocommerce-checkout #place_order:hover {
  background-position: right center !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255,122,0,.5) !important;
}
.woocommerce-checkout #place_order:active {
  transform: translateY(0) !important;
}
.woocommerce-checkout #place_order::after {
  content: '🔒';
  margin-right: 8px;
  font-size: 14px;
}

/* Secure badge below button */
.woocommerce-checkout .ae-checkout-secure {
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Coupon form polish */
.woocommerce-checkout .woocommerce-form-coupon {
  background: #fafbfc !important;
  border: 1.5px solid #e2e4e8 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin: 0 0 16px 0 !important;
}
.woocommerce-checkout .woocommerce-form-coupon p {
  margin: 0 0 8px 0 !important;
  font-size: 12px !important;
}
.woocommerce-checkout .woocommerce-form-coupon input[name="coupon_code"] {
  margin-bottom: 8px !important;
}
.woocommerce-checkout .woocommerce-form-coupon button {
  background: #0B1F45 !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  cursor: pointer;
  font-family: 'Cairo', sans-serif !important;
}
.woocommerce-checkout .woocommerce-form-coupon button:hover {
  background: #1B3A6B !important;
}

/* MOBILE */
@media (max-width: 900px) {
  .woocommerce-checkout .ae-checkout-wrap {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px 12px !important;
  }
  .woocommerce-checkout .ae-checkout-aside {
    position: relative !important;
    top: 0 !important;
  }
  .woocommerce-checkout .ae-checkout-section {
    padding: 18px 16px !important;
  }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-checkout #place_order {
    font-size: 15px !important;
    padding: 14px !important;
  }
}

/* ============================================================
   CART PAGE — Premium Redesign
   ============================================================ */
body.woocommerce-cart {
  background: #f6f7f9 !important;
}
body.woocommerce-cart .woocommerce {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 16px;
}

.woocommerce-cart .ae-cart-wrap {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 24px !important;
  align-items: flex-start;
}

/* Items column */
.woocommerce-cart .ae-cart-items {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15,28,60,0.06) !important;
  border: 1px solid #ecedef;
}

.woocommerce-cart .ae-cart-head {
  background: linear-gradient(135deg, #0B1F45, #1B3A6B) !important;
  color: #fff !important;
  padding: 18px 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* Cart row */
.woocommerce-cart .ae-cart-row {
  display: grid !important;
  grid-template-columns: 100px 1fr auto auto auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px 22px !important;
  border-bottom: 1px solid #f0f1f3 !important;
  transition: background .2s;
}
.woocommerce-cart .ae-cart-row:hover {
  background: #fafbfc;
}
.woocommerce-cart .ae-cart-row:last-child {
  border-bottom: none !important;
}

.woocommerce-cart .ae-cart-img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid #f0f1f3;
}
.woocommerce-cart .ae-cart-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px;
}

.woocommerce-cart .ae-cart-info {
  min-width: 0;
}
.woocommerce-cart .ae-cart-name {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0B1F45 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce-cart .ae-cart-name:hover {
  color: #FF7A00 !important;
}
.woocommerce-cart .ae-cart-price-line {
  font-size: 13px !important;
  color: #FF7A00 !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.woocommerce-cart .ae-cart-price-line .woocommerce-Price-amount {
  color: #FF7A00 !important;
  font-weight: 700 !important;
}
.woocommerce-cart .ae-cart-remove {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: #ef4444 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  transition: color .2s;
}
.woocommerce-cart .ae-cart-remove:hover {
  color: #b91c1c !important;
}

/* Qty selector */
.woocommerce-cart .ae-cart-qty {
  display: inline-flex !important;
  align-items: center !important;
  background: #fafbfc !important;
  border: 1.5px solid #e2e4e8 !important;
  border-radius: 10px !important;
  overflow: hidden;
  height: 40px;
}
.woocommerce-cart .ae-cart-qty-btn {
  width: 36px;
  height: 38px;
  background: transparent !important;
  border: none !important;
  color: #0B1F45 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: background .15s;
  padding: 0 !important;
}
.woocommerce-cart .ae-cart-qty-btn:hover {
  background: #FF7A00 !important;
  color: #fff !important;
}
.woocommerce-cart .ae-cart-qty-input {
  width: 44px !important;
  height: 38px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0B1F45 !important;
  -moz-appearance: textfield;
  padding: 0 !important;
}
.woocommerce-cart .ae-cart-qty-input::-webkit-inner-spin-button,
.woocommerce-cart .ae-cart-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Subtotal per item */
.woocommerce-cart .ae-cart-subtotal {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #0B1F45 !important;
  white-space: nowrap;
  text-align: left;
  min-width: 100px;
}

/* Empty cart */
.woocommerce-cart .cart-empty {
  background: #fff;
  border-radius: 16px;
  padding: 60px 24px !important;
  text-align: center;
  box-shadow: 0 6px 24px rgba(15,28,60,0.06);
  font-size: 18px !important;
  color: #6b7280 !important;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-top: 20px !important;
}
.woocommerce-cart .return-to-shop .button {
  background: linear-gradient(135deg, #FF7A00, #FFA733) !important;
  color: #fff !important;
  padding: 14px 36px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: 0 6px 18px rgba(255,122,0,.3);
  transition: all .2s;
}
.woocommerce-cart .return-to-shop .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,122,0,.4);
}

/* Coupon row + update cart button */
.woocommerce-cart .ae-cart-bottom,
.woocommerce-cart .cart-collaterals {
  margin-top: 20px;
}
.woocommerce-cart .coupon {
  background: #fff !important;
  border-radius: 12px;
  padding: 16px 18px !important;
  border: 1px solid #ecedef;
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.woocommerce-cart .coupon label {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #0B1F45 !important;
  margin-bottom: 0 !important;
  width: 100%;
}
.woocommerce-cart .coupon input[type="text"] {
  flex: 1 !important;
  min-width: 200px;
  padding: 12px 14px !important;
  border: 1.5px solid #e2e4e8 !important;
  border-radius: 10px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  background: #fafbfc !important;
  transition: all .2s;
}
.woocommerce-cart .coupon input[type="text"]:focus {
  border-color: #FF7A00 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,122,0,.1) !important;
  outline: none;
}
.woocommerce-cart .coupon button,
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart button[name="apply_coupon"] {
  background: #0B1F45 !important;
  color: #fff !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'Cairo', sans-serif !important;
  transition: all .2s;
  white-space: nowrap;
}
.woocommerce-cart .coupon button:hover,
.woocommerce-cart button[name="apply_coupon"]:hover {
  background: #1B3A6B !important;
}
.woocommerce-cart .actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.woocommerce-cart button[name="update_cart"] {
  background: #fff !important;
  color: #0B1F45 !important;
  border: 1.5px solid #e2e4e8 !important;
}
.woocommerce-cart button[name="update_cart"]:hover {
  border-color: #FF7A00 !important;
  color: #FF7A00 !important;
}
.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cart totals (right side) */
.woocommerce-cart .ae-cart-totals,
.woocommerce-cart .cart_totals {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15,28,60,0.06) !important;
  border: 1px solid #ecedef !important;
  position: sticky;
  top: 90px;
}
.woocommerce-cart .ae-cart-totals-head,
.woocommerce-cart .cart_totals h2 {
  background: linear-gradient(135deg, #0B1F45, #1B3A6B) !important;
  color: #fff !important;
  padding: 16px 22px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin: 0 !important;
}
.woocommerce-cart .ae-cart-totals-body,
.woocommerce-cart .cart_totals .shop_table {
  padding: 18px 22px !important;
}
.woocommerce-cart .ae-cart-totals .cart_totals_table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-cart .cart_totals table tr {
  border-bottom: 1px dashed #f0f1f3;
}
.woocommerce-cart .cart_totals table tr:last-child,
.woocommerce-cart .cart_totals table .order-total {
  border-bottom: none;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 12px 0 !important;
  font-size: 13px !important;
  border: none !important;
  background: transparent !important;
}
.woocommerce-cart .cart_totals table th {
  font-weight: 700 !important;
  color: #4b5563 !important;
  text-align: right;
}
.woocommerce-cart .cart_totals table td {
  text-align: left !important;
  font-weight: 800;
  color: #0B1F45;
}
.woocommerce-cart .cart_totals .order-total th {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #0B1F45 !important;
  padding-top: 16px !important;
  border-top: 2px solid #f0f1f3 !important;
}
.woocommerce-cart .cart_totals .order-total td {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #FF7A00 !important;
  padding-top: 16px !important;
  border-top: 2px solid #f0f1f3 !important;
}

/* PROCEED TO CHECKOUT button */
.woocommerce-cart .wc-proceed-to-checkout {
  padding: 16px 22px 22px !important;
  margin: 0 !important;
}
.woocommerce-cart .checkout-button {
  background: linear-gradient(135deg, #FF7A00 0%, #FFA733 50%, #FF7A00 100%) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  border: none !important;
  width: 100% !important;
  min-height: 56px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  cursor: pointer;
  transition: all .25s !important;
  box-shadow: 0 8px 22px rgba(255,122,0,.35) !important;
  letter-spacing: .3px;
  font-family: 'Cairo', sans-serif !important;
}
.woocommerce-cart .checkout-button:hover {
  background-position: right center !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255,122,0,.5) !important;
  color: #fff !important;
}
.woocommerce-cart .checkout-button::after {
  content: '←';
  font-size: 18px;
}

/* Continue shopping button */
.woocommerce-cart .ae-cart-continue,
.woocommerce-cart .wc-backward {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: #0B1F45 !important;
  border: 1.5px solid #e2e4e8 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all .2s;
  margin-top: 14px;
}
.woocommerce-cart .ae-cart-continue:hover,
.woocommerce-cart .wc-backward:hover {
  border-color: #FF7A00 !important;
  color: #FF7A00 !important;
  background: #FFF0E5 !important;
}

/* Mobile - Cart */
@media (max-width: 768px) {
  body.woocommerce-cart .woocommerce {
    padding: 14px 10px;
  }
  .woocommerce-cart .ae-cart-wrap {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .woocommerce-cart .ae-cart-row {
    grid-template-columns: 80px 1fr !important;
    grid-template-areas:
      "img info"
      "img qty"
      "img total" !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .woocommerce-cart .ae-cart-img { grid-area: img; width: 80px; height: 80px; }
  .woocommerce-cart .ae-cart-info { grid-area: info; }
  .woocommerce-cart .ae-cart-qty { grid-area: qty; justify-self: start; }
  .woocommerce-cart .ae-cart-subtotal {
    grid-area: total;
    justify-self: start;
    font-size: 14px !important;
  }
  .woocommerce-cart .ae-cart-name { font-size: 13px !important; }
  .woocommerce-cart .cart_totals .order-total td { font-size: 18px !important; }
  .woocommerce-cart .checkout-button { font-size: 15px !important; padding: 14px !important; }
  .woocommerce-cart .ae-cart-totals,
  .woocommerce-cart .cart_totals {
    position: relative !important;
    top: 0 !important;
  }
}

/* ============================================================
   PLACE ORDER, ADD TO CART, PROCEED — UNIFIED BUTTON STYLES
   ============================================================ */
.button.add_to_cart_button,
.single_add_to_cart_button,
.woocommerce-page .button.alt,
.woocommerce a.button.alt,
button.button.alt {
  background: linear-gradient(135deg, #FF7A00, #FFA733) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255,122,0,.3);
}
.button.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.woocommerce-page .button.alt:hover,
.woocommerce a.button.alt:hover,
button.button.alt:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,122,0,.45) !important;
  color: #fff !important;
}

/* Secondary button (View Cart, Continue) */
.woocommerce a.added_to_cart {
  background: #0B1F45 !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block;
  margin-right: 6px;
}
.woocommerce a.added_to_cart:hover {
  background: #1B3A6B !important;
  color: #fff !important;
}

/* =========================================================
   SHIPMENT TRACKER — animated 4-stage timeline
   ========================================================= */
.ae-trk-wrap { display: flex; flex-direction: column; gap: 16px; }
.ae-trk-card {
  background: #fff; border-radius: var(--r-l); box-shadow: var(--sh-xs);
  padding: 22px 24px 26px; position: relative; overflow: hidden;
}
.ae-trk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-brand); }

.ae-trk-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.ae-trk-ord { font-size: 14px; font-weight: 800; color: var(--s); }
.ae-trk-ord span { font-weight: 500; color: var(--t-3); font-size: 11.5px; margin-right: 10px; }
[dir="ltr"] .ae-trk-ord span { margin-right: 0; margin-left: 10px; }
.ae-trk-meta { display: flex; gap: 16px; font-size: 12px; color: var(--t-3); flex-wrap: wrap; }
.ae-trk-meta b { color: var(--s); font-weight: 700; }

/* Cancelled / pending states */
.ae-trk-x { background: #fef2f2; color: var(--er); font-weight: 700; font-size: 13px; padding: 14px 16px; border-radius: var(--r-s); text-align: center; }
.ae-trk-wait { background: #fffbeb; color: #92400e; font-weight: 700; font-size: 13px; padding: 14px 16px; border-radius: var(--r-s); text-align: center; }

/* Track line + truck */
.ae-trk-track { position: relative; padding: 0 6px 6px; }
.ae-trk-line { position: absolute; top: 19px; right: 6%; left: 6%; height: 4px; background: var(--bd); border-radius: 4px; overflow: hidden; z-index: 1; }
.ae-trk-line-fill {
  position: absolute; top: 0; right: 0; height: 100%; width: 0%;
  background: var(--grad-brand); border-radius: 4px; overflow: hidden;
  transition: width 1.3s cubic-bezier(.4,0,.2,1);
}
[dir="ltr"] .ae-trk-line-fill { right: auto; left: 0; }
.ae-trk-line-fill::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 10px, transparent 10px 22px);
  animation: aeDash 1s linear infinite;
}
@keyframes aeDash { from { background-position: 0 0; } to { background-position: -32px 0; } }

.ae-trk-truck {
  position: absolute; top: 19px; right: 6%; transform: translate(50%,-50%);
  font-size: 22px; line-height: 1; z-index: 3;
  transition: right 1.3s cubic-bezier(.4,0,.2,1), opacity .4s;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
[dir="ltr"] .ae-trk-truck { right: auto; left: 6%; transform: translate(-50%,-50%); transition: left 1.3s cubic-bezier(.4,0,.2,1), opacity .4s; }

.ae-trk-track[data-stage="0"] .ae-trk-line-fill,
.ae-trk-track[data-stage="1"] .ae-trk-line-fill { width: 0%; }
.ae-trk-track[data-stage="2"] .ae-trk-line-fill { width: 33.33%; }
.ae-trk-track[data-stage="3"] .ae-trk-line-fill { width: 66.66%; }
.ae-trk-track[data-stage="4"] .ae-trk-line-fill { width: 100%; }

.ae-trk-track[data-stage="0"] .ae-trk-truck,
.ae-trk-track[data-stage="1"] .ae-trk-truck { right: 6%; }
.ae-trk-track[data-stage="2"] .ae-trk-truck { right: 35.3%; }
.ae-trk-track[data-stage="3"] .ae-trk-truck { right: 64.6%; }
.ae-trk-track[data-stage="4"] .ae-trk-truck { opacity: 0; right: 94%; }
[dir="ltr"] .ae-trk-track[data-stage="0"] .ae-trk-truck,
[dir="ltr"] .ae-trk-track[data-stage="1"] .ae-trk-truck { left: 6%; }
[dir="ltr"] .ae-trk-track[data-stage="2"] .ae-trk-truck { left: 35.3%; }
[dir="ltr"] .ae-trk-track[data-stage="3"] .ae-trk-truck { left: 64.6%; }
[dir="ltr"] .ae-trk-track[data-stage="4"] .ae-trk-truck { opacity: 0; left: 94%; }

.ae-trk-truck { animation: aeBob 1.4s ease-in-out infinite; }
@keyframes aeBob { 0%,100% { transform: translate(50%,-50%) translateY(0); } 50% { transform: translate(50%,-50%) translateY(-3px); } }
[dir="ltr"] .ae-trk-truck { animation: aeBobLtr 1.4s ease-in-out infinite; }
@keyframes aeBobLtr { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-3px); } }

/* Nodes */
.ae-trk-nodes { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; }
.ae-trk-node { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 25%; text-align: center; }
.ae-trk-ic {
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  border: 3px solid var(--bd); display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all .5s cubic-bezier(.4,0,.2,1); position: relative;
}
.ae-trk-node.done .ae-trk-ic { border-color: var(--p); background: var(--p-l); color: var(--p); font-weight: 900; }
.ae-trk-node.act .ae-trk-ic { border-color: var(--p); background: var(--grad-brand); color: #fff; animation: aePulseRing 1.7s ease-out infinite; }
@keyframes aePulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,0,.55); }
  70%  { box-shadow: 0 0 0 15px rgba(255,122,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,0,0); }
}
.ae-trk-node[data-k="4"].done .ae-trk-ic { background: var(--ok); border-color: var(--ok); color: #fff; animation: aePop .6s cubic-bezier(.4,0,.2,1); }
@keyframes aePop { 0% { transform: scale(.5); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.ae-trk-lbl { font-size: 11px; font-weight: 700; color: var(--t-4); transition: color .4s; line-height: 1.3; }
.ae-trk-node.done .ae-trk-lbl, .ae-trk-node.act .ae-trk-lbl { color: var(--s); }
.ae-trk-tm { font-size: 9.5px; color: var(--t-4); }

.ae-trk-done-msg {
  margin-top: 22px; background: linear-gradient(90deg, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0; color: #166534; font-size: 12.5px; font-weight: 700;
  padding: 12px 16px; border-radius: var(--r-s); text-align: center;
  animation: aeFadeUp .5s ease;
}
@keyframes aeFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ae-trk-note { margin-top: 14px; background: var(--p-l); color: var(--t-2); font-size: 12px; padding: 11px 14px; border-radius: var(--r-s); border-right: 3px solid var(--p); }
[dir="ltr"] .ae-trk-note { border-right: none; border-left: 3px solid var(--p); }

@media (max-width: 640px) {
  .ae-trk-wrap { gap: 12px; }
  .ae-trk-card { padding: 16px 14px 20px; }
  .ae-trk-top { flex-direction: column; gap: 8px; margin-bottom: 22px; }
  .ae-trk-ord { font-size: 15px; }
  .ae-trk-meta {
    gap: 8px; font-size: 11px;
    flex-direction: column;
    background: var(--bg); border-radius: var(--r-s);
    padding: 10px 12px;
  }
  .ae-trk-meta > div { display: flex; justify-content: space-between; }
  .ae-trk-lbl { font-size: 9px; }
  .ae-trk-ic { width: 30px; height: 30px; font-size: 13px; }
  .ae-trk-truck { font-size: 16px; }
  .ae-trk-line { top: 15px; }
  .ae-trk-nodes { padding-top: 4px; }
  .ae-trk-node { gap: 5px; }
  .ae-trk-done-msg { font-size: 12px; padding: 10px 12px; }
  .ae-trk-note { font-size: 11px; padding: 10px 12px; margin-top: 10px; }
  .ae-trk-x, .ae-trk-wait { font-size: 12px; padding: 12px; }
}

/* =========================================================
   PRODUCT PAGE — discount coupon box
   ========================================================= */
.ae-coupon-box { margin-top: 16px; }
.ae-coupon-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--p-l); color: var(--p-d); border: 1.5px dashed var(--p);
  border-radius: var(--r-s); padding: 10px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.ae-coupon-toggle:hover { background: var(--p); color: #fff; }
.ae-coupon-form { display: none; gap: 8px; margin-top: 10px; }
.ae-coupon-form.show { display: flex; }
.ae-coupon-form input {
  flex: 1; height: 42px; border: 1.5px solid var(--bd); border-radius: var(--r-s);
  padding: 0 14px; font-size: 13px; font-family: inherit; outline: none;
}
.ae-coupon-form input:focus { border-color: var(--p); }
.ae-coupon-btn {
  height: 42px; padding: 0 20px; border-radius: var(--r-s); border: none;
  background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity .2s;
}
.ae-coupon-btn:hover { opacity: .9; }
.ae-coupon-btn:disabled { opacity: .6; cursor: not-allowed; }
.ae-coupon-msg { margin-top: 8px; font-size: 12.5px; font-weight: 700; min-height: 16px; }
.ae-coupon-msg.ok { color: #22c55e; }
.ae-coupon-msg.err { color: var(--er); }
.ae-coupon-applied {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  border-radius: var(--r-s); padding: 10px 16px; font-size: 13px; font-weight: 700;
}

/* =========================================================
   SHOP FILTERS — shared sidebar (shop archive + homepage widget)
   ========================================================= */
.ds-mfilter-toggle {
  display: none;
  background: var(--p);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--r-s);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.ds-filters {
  background: #fff;
  border-radius: var(--r-l);
  padding: 18px;
  box-shadow: var(--sh-xs);
  /* The category list is long (20+ sections), so this sidebar is routinely
     TALLER than the viewport. A `position: sticky` element taller than the
     screen sticks at its top and its lower part (price + quick filters) can
     never be scrolled to — it ends up clipped and painted over by the
     category list. Constraining the height and letting the sidebar scroll
     internally keeps every block reachable. */
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Slim scrollbar so the internal scroll doesn't look broken */
.ds-filters::-webkit-scrollbar { width: 6px; }
.ds-filters::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
.ds-filters::-webkit-scrollbar-track { background: transparent; }
.ds-filters-close {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bd-l);
  font-weight: 800;
  font-size: 15px;
  color: var(--s);
}
.ds-filters-close button {
  background: var(--bg);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}

.ds-filter-block { margin-bottom: 18px; }
.ds-filter-h {
  font-size: 13px;
  font-weight: 800;
  color: var(--s);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--p);
  display: inline-block;
}

/* Categories — checkbox list, comprehensive, NO internal scroll */
.ds-filter-cats {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 4px;
  width: 100%;
}
.ds-filter-cat {
  display: flex !important;
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--t-2);
  border-radius: var(--r-s);
  transition: all .15s;
  cursor: pointer;
  font-weight: 600;
}
.ds-filter-cat span:first-of-type { flex: 1; }
.ds-filter-cat input[type="checkbox"] { accent-color: var(--p); width: 16px; height: 16px; flex-shrink: 0; }
.ds-filter-cat:hover { background: var(--bg); color: var(--p); }
.ds-filter-cat.active { background: var(--p-l); color: var(--p); font-weight: 700; }
.ds-filter-count {
  background: var(--bg);
  color: var(--t-3);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.ds-filter-cat.active .ds-filter-count { background: var(--p); color: #fff; }

/* Category filter — each section is a dropdown (checkbox to select, click to expand) */
.ds-filter-tree { padding-right: 2px; }
.ds-filter-group { margin-bottom: 4px; }

.ds-filter-dd-head {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--bd-l); border-radius: var(--r-s);
  transition: all var(--tr);
}
.ds-filter-dd-head.active { background: var(--p-l); border-color: var(--p); }
.ds-filter-dd-check { display: flex; align-items: center; padding: 0 0 0 10px; flex-shrink: 0; }
[dir="ltr"] .ds-filter-dd-check { padding: 0 10px 0 0; }
.ds-filter-dd-check input { accent-color: var(--p); width: 16px; height: 16px; }

.ds-filter-dd-trigger {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 9px 10px; cursor: pointer;
  font-family: inherit; text-align: right; color: var(--t-2);
}
[dir="ltr"] .ds-filter-dd-trigger { text-align: left; }
.ds-filter-dd-static { cursor: default; }
.ds-filter-dd-name { flex: 1; font-size: 12.5px; font-weight: 700; }
.ds-filter-dd-head.active .ds-filter-dd-name { color: var(--p); }
.ds-filter-dd-arrow { font-size: 10px; color: var(--t-3); transition: transform var(--tr); flex-shrink: 0; }
.ds-filter-group.open .ds-filter-dd-arrow { transform: rotate(180deg); color: var(--p); }

/* Dropdown panel with the branches — JS controls height via inline style */
.ds-filter-children {
  overflow: hidden;
  transition: height .22s ease;
  background: #fff;
  border-radius: 0 0 var(--r-s) var(--r-s);
  border: none;
  margin: 0;
  padding: 0;
  /* collapsed by default via JS — see main.js filterAccordion */
}
.ds-filter-children-inner { padding: 6px 10px 6px 20px; }
[dir="ltr"] .ds-filter-children-inner { padding: 6px 20px 6px 10px; }
.ds-filter-group.open > .ds-filter-children {
  border: 1.5px solid var(--bd-l);
  border-top: none;
  margin-top: -4px;
}
.ds-filter-cat-child { font-weight: 500; font-size: 11.5px; }

.ds-filter-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--bd);
  border-radius: var(--r-s);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.ds-filter-input:focus { border-color: var(--p); }

.ds-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.ds-filter-check input { accent-color: var(--p); width: 16px; height: 16px; flex-shrink: 0; }

ul.products { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 14px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }

.woocommerce-pagination { margin-top: 28px; text-align: center; }
.woocommerce-pagination ul { display: inline-flex !important; gap: 6px !important; padding: 0; margin: 0; list-style: none; }
.woocommerce-pagination ul li { background: #fff !important; border: 1px solid var(--bd) !important; border-radius: var(--r-s) !important; overflow: hidden; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span { min-width: 36px; height: 36px; display: flex !important; align-items: center; justify-content: center; font-weight: 700; color: var(--t-2); padding: 0 10px !important; }
.woocommerce-pagination ul li .current { background: var(--p) !important; color: #fff !important; }
.woocommerce-ordering select { padding: 8px 12px; border: 1.5px solid var(--bd); border-radius: var(--r-s); font-family: inherit; outline: none; background: #fff; }

/* Homepage widget wrapper variant */
.ds-filters-home { position: static; margin-bottom: 24px; }
.ds-filters-home .ds-filters { position: static; }

/* ===== TABLET (3 cols) ===== */
@media (max-width:1024px) {
  ul.products { grid-template-columns: repeat(3,1fr) !important; }
}

/* ===== MOBILE: filters become drawer, 2-col products ===== */
@media (max-width:768px) {
  .ds-shop-layout { grid-template-columns: 1fr !important; }
  .ds-mfilter-toggle { display: inline-flex; align-items: center; gap: 6px; }

  /* Bottom-sheet style panel */
  .ds-filters {
    position: fixed !important;
    bottom: 0; right: 0; left: 0; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    height: 88vh;
    z-index: 2000;
    border-radius: 22px 22px 0 0 !important;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    padding: 0 !important;
  }
  .ds-filters.open {
    transform: translateY(0) !important;
    right: auto !important;
  }

  /* Drag handle */
  .ds-filters::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--bd);
    border-radius: 4px;
    margin: 12px auto 0;
  }

  /* Close header */
  .ds-filters-close {
    display: flex;
    position: sticky; top: 0;
    background: #fff;
    z-index: 10;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--bd-l);
    margin-bottom: 0 !important;
    border-bottom-color: var(--bd-l) !important;
  }
  .ds-filters-close button {
    width: 34px; height: 34px;
    background: var(--bg);
    border-radius: 50%;
    font-size: 15px;
  }

  /* Content padding */
  .ds-filter-form { padding: 16px 18px 100px; }

  /* Section headers bigger on mobile */
  .ds-filter-h { font-size: 14px; }

  /* Each category row taller for easier tap */
  .ds-filter-dd-trigger { padding: 11px 12px; }
  .ds-filter-dd-name { font-size: 13px; }
  .ds-filter-cat { padding: 10px 12px; font-size: 13px; }

  /* Sticky apply button at bottom */
  .ds-filter-form::after {
    content: '';
    display: block; height: 0;
  }
  .ds-filter-form {
    position: relative;
  }

  /* Floating apply bar */
  .ds-filters-apply-bar {
    position: fixed;
    bottom: 0; right: 0; left: 0;
    padding: 14px 18px 18px;
    background: #fff;
    border-top: 1px solid var(--bd-l);
    z-index: 2010;
    display: none;
  }
  .ds-filters.open .ds-filters-apply-bar { display: block; }
  .ds-filters-apply-btn {
    display: block; width: 100%;
    padding: 14px;
    background: var(--grad-brand);
    color: #fff; font-family: inherit;
    font-size: 15px; font-weight: 800;
    border: none; border-radius: var(--r-l);
    cursor: pointer;
    text-align: center;
  }

  ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
}

/* =========================================================
   LOGIN / REGISTER PAGE — full width on mobile
   ========================================================= */
@media (max-width: 640px) {
  .lg-page-wrap { padding: 0 !important; min-height: auto !important; background: #fff !important; }
  .lg-page-card { max-width: 100% !important; border-radius: 0 !important; box-shadow: none !important; }
  .lg-page-body { padding: 20px 16px 26px !important; }
}


/* =========================================================
   FIX: category filter dropdown — hard-locked layout.
   Elementor/plugin CSS was forcing .ds-filter-children to
   position:absolute + height:auto, which pulled every branch
   list out of normal flow so they all painted on top of the
   section rows. These !important rules re-assert normal flow.
   ========================================================= */
.ds-filter-tree { display: flex !important; flex-direction: column !important; gap: 4px; width: 100%; }
.ds-filter-group { position: relative !important; width: 100%; margin-bottom: 4px; }

.ds-filter-dd-head { position: relative !important; width: 100%; min-height: 38px; }
.ds-filter-dd-trigger { min-width: 0; overflow: hidden; }
.ds-filter-dd-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-filter-dd-arrow { flex: 0 0 auto; }
.ds-filter-dd-head .ds-filter-count { flex: 0 0 auto; }

/* The branch panel MUST stay in normal flow and stay clipped when collapsed. */
.ds-filter-group > .ds-filter-children {
  position: relative !important;   /* never absolute -> no stacking on top of rows */
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  float: none !important;
  overflow: hidden !important;     /* keeps branches hidden while collapsed */
  width: auto !important;
  transition: height .22s ease;
}
/* Collapsed by default; JS sets an inline height to animate open. */
.ds-filter-group:not(.open) > .ds-filter-children { height: 0 !important; }
.ds-filter-group.open > .ds-filter-children { height: auto; overflow: visible !important; }

.ds-filter-children-inner {
  display: flex !important; flex-direction: column !important;
  gap: 2px; padding: 4px 22px 6px 6px;
}
[dir="ltr"] .ds-filter-children-inner { padding: 4px 6px 6px 22px; }
.ds-filter-cat-child { font-size: 11.5px; font-weight: 600; padding: 6px 8px; }
.ds-filter-cat-child span:first-of-type {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Live (AJAX) filtering — loading state ===== */
#ae-shop-results { position: relative; transition: opacity .18s ease; }
#ae-shop-results.ae-loading { opacity: .45; pointer-events: none; }
#ae-shop-results.ae-loading::after {
  content: ''; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--bd-l); border-top-color: var(--p);
  animation: ae-spin .7s linear infinite; z-index: 5;
}
@keyframes ae-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* =========================================================
   MOBILE FILTER DRAWER — better UX
   The list is long (20 sections x ~6 branches). On a phone the
   sections must be compact, obviously tappable, and collapsed
   by default so the list is scannable instead of a wall of text.
   ========================================================= */
@media (max-width: 768px) {

  /* Drawer sizing: nearly full-height sheet with its own scroll */
  .ds-filters { border-radius: 18px 18px 0 0; }
  .ds-filter-form {
    max-height: calc(85vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* NOTE: an earlier version made .ds-filter-h and .ds-filter-search
     position:sticky here. That was a mistake: .ds-filter-h is the heading of
     EVERY block (التصنيفات / السعر / فلاتر سريعة), so all of them stuck to the
     same top:0 and painted on top of the category list. Sticky also promotes
     the elements onto their own layer, which broke the overflow:hidden that
     keeps collapsed branches invisible. They stay in normal flow now. */
  .ds-filter-block .ds-filter-h {
    position: static;
    background: #fff; margin: 0 0 8px; padding: 10px 0 8px;
  }
  .ds-filter-search { position: static; }

  /* Bigger, clearly tappable section rows (44px min = touch target) */
  .ds-filter-dd-head { min-height: 46px; border-radius: 10px; }
  .ds-filter-dd-trigger { padding: 12px 10px; }
  .ds-filter-dd-name { font-size: 13.5px; }
  .ds-filter-dd-check { padding-inline-start: 12px; }
  .ds-filter-dd-check input { width: 20px; height: 20px; }

  /* Arrow gets a visible hit area so it reads as "expandable" */
  .ds-filter-dd-arrow {
    font-size: 13px; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(0,0,0,.04);
  }
  .ds-filter-group.open .ds-filter-dd-head {
    border-color: var(--p);
    background: var(--p-l);
  }

  /* Branches: indented, roomy rows */
  .ds-filter-children-inner { padding: 6px 14px 8px 6px; gap: 2px; }
  [dir="ltr"] .ds-filter-children-inner { padding: 6px 6px 8px 14px; }
  .ds-filter-cat-child { min-height: 40px; font-size: 12.5px; padding: 9px 10px; }
  .ds-filter-cat-child input[type="checkbox"] { width: 18px; height: 18px; }

  /* Hide the noisy "0" pills on mobile — they add clutter and no value */
  .ds-filter-count { font-size: 10px; padding: 2px 6px; }
  .ds-filter-cat-child .ds-filter-count { display: none; }

  /* Price inputs: bigger tap targets, no iOS zoom (needs >=16px) */
  .ds-filter-price .ds-filter-input { padding: 11px 10px; font-size: 16px; }
  .ds-filter-check { padding: 11px 0; font-size: 13px; }
  .ds-filter-check input { width: 20px; height: 20px; }
}


/* =========================================================
   FILTER — DENSITY
   The theme ships 21 sections / 107 branches. Even after empty
   categories are hidden, the list must stay compact enough to
   scan. These rules tighten the rows and cap the category list
   so the price / quick-filter blocks below it are always
   reachable without scrolling past a wall of checkboxes.
   ========================================================= */

/* Cap ONLY the category list — never the whole sidebar, so the
   blocks after it keep their normal place in the flow. */
.ds-filter-tree {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 4px;
}
.ds-filter-tree::-webkit-scrollbar { width: 5px; }
.ds-filter-tree::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
.ds-filter-tree::-webkit-scrollbar-track { background: transparent; }

/* Tighter section rows */
.ds-filter-dd-head { min-height: 32px; }
.ds-filter-dd-trigger { padding: 6px 8px; gap: 6px; }
.ds-filter-dd-name { font-size: 12px; font-weight: 700; }
.ds-filter-dd-check { padding-inline-start: 8px; }
.ds-filter-dd-check input { width: 14px; height: 14px; }
.ds-filter-group { margin-bottom: 2px; }

/* Tighter branch rows */
.ds-filter-children-inner { padding: 2px 18px 4px 4px; gap: 0; }
[dir="ltr"] .ds-filter-children-inner { padding: 2px 4px 4px 18px; }
.ds-filter-cat-child { min-height: 28px; padding: 4px 8px; font-size: 11.5px; }
.ds-filter-cat-child input[type="checkbox"] { width: 13px; height: 13px; }

/* The "0" pills add noise; keep them subtle */
.ds-filter-count { font-size: 9.5px; padding: 1px 5px; }

@media (max-width: 768px) {
  /* On mobile the drawer already scrolls, so give the list more room */
  .ds-filter-tree { max-height: 46vh; }
  .ds-filter-dd-head { min-height: 40px; }
  .ds-filter-dd-trigger { padding: 9px 10px; }
  .ds-filter-dd-name { font-size: 13px; }
  .ds-filter-dd-check input { width: 18px; height: 18px; }
  .ds-filter-cat-child { min-height: 34px; padding: 7px 9px; font-size: 12px; }
}