/* ============================================
   ZONE+ v2 - Amazon Egypt Inspired Frontend
   RTL Support • Mobile-First • Modern E-Commerce
   ============================================ */

/* ===== CSS Variables ===== */
:root {
  --navy-950:#030913;
  --navy-900:#071427;
  --navy-850:#0a1b34;
  --navy-800:#0d2343;
  --navy-700:#15345f;
  --blue-600:#0677ff;
  --blue-500:#1493ff;
  --blue-400:#27c8ff;
  --blue-300:#74deff;
  --ink:#0d1728;
  --muted:#667085;
  --muted-2:#98a2b3;
  --line:#e5eaf1;
  --line-strong:#d7dee9;
  --surface:#ffffff;
  --surface-2:#f6f8fb;
  --surface-3:#eef3f9;
  --page:#f2f5f9;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#e5484d;
  --whatsapp:#25d366;
  --amber-100:#fffbeb;
  --amber-500:#d97706;
  --shadow-xs:0 1px 2px rgba(12,24,45,.04);
  --shadow-sm:0 7px 22px rgba(9,30,66,.07);
  --shadow-md:0 16px 45px rgba(9,30,66,.12);
  --shadow-lg:0 28px 80px rgba(0,14,42,.2);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --header-height:64px;
  --header-search-height:40px;
  color-scheme:light;
}

/* Dark theme */
body[data-theme="dark"] {
  --ink:#eff6ff;
  --muted:#a9b8cc;
  --muted-2:#7d90aa;
  --line:#233653;
  --line-strong:#314765;
  --surface:#0d1b2d;
  --surface-2:#0a1728;
  --surface-3:#13253b;
  --page:#06101d;
  --shadow-xs:0 1px 2px rgba(0,0,0,.18);
  --shadow-sm:0 8px 24px rgba(0,0,0,.22);
  --shadow-md:0 18px 46px rgba(0,0,0,.34);
  --shadow-lg:0 30px 90px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ===== Base Styles ===== */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header-height); }
body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll { overflow:hidden; }
button, input, select, textarea { font:inherit; }
button { color:inherit; background:none; border:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; border-radius:var(--radius-sm); }
svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline:3px solid rgba(39,200,255,.45);
  outline-offset:2px;
}
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* ===== Layout Utilities ===== */
.container { width:var(--container-max); margin-inline:auto; padding:0 16px; box-sizing:border-box; }
.ltr { direction:ltr; unicode-bidi:embed; }
.rtl { direction:rtl; unicode-bidi:embed; }

/* ===== Announcement ===== */
.announcement {
  background:linear-gradient(90deg,#04101f,#0a2243 48%,#04101f);
  color:#dbeafe;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
  padding:6px 0;
}
.announcement__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.announcement p { margin:0; display:flex; align-items:center; gap:10px; }
.announcement__dot {
  width:7px; height:7px; border-radius:50%; background:#3ddcff;
  box-shadow:0 0 0 5px rgba(61,220,255,.12);
}
.announcement__links { display:flex; align-items:center; gap:16px; }
.announcement__links a { display:flex; align-items:center; gap:6px; color:#bcd0ea; }
.announcement__links svg { width:14px; height:14px; color:#4fdcff; }

/* ===== Header ===== */
.site-header {
  position:sticky; top:0; z-index:200;
  background:rgba(7,20,39,.97);
  color:#fff;
  box-shadow:0 10px 32px rgba(0,0,0,.15);
  backdrop-filter:blur(20px);
}
.header-main {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px;
  height:var(--header-height);
}
.header-left { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mobile-menu-button {
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.brand { display:flex; align-items:center; height:36px; }
.brand img { height:36px; width:auto; }

/* Search bar */
.header-center { flex:1; min-width:0; max-width:520px; }
.header-search {
  display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
  height:var(--header-search-height);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
  width:100%;
}
.header-search:focus-within {
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(6,119,255,.15);
}
.search-toggle {
  display:grid; place-items:center;
  width:44px; height:100%;
  background:transparent; color:var(--muted);
}
.search-toggle svg { width:20px; height:20px; }
.search-toggle:hover { color:var(--ink); }
.header-search input {
  flex:1; border:none; background:transparent;
  padding:0 10px; font-size:14px; color:var(--ink);
}
.header-search input::placeholder { color:var(--muted-2); }
.header-search button[type="submit"] {
  display:grid; place-items:center;
  width:48px; height:100%;
  background:var(--blue-600); color:#fff;
  font-weight:700; font-size:14px;
}
.header-search button[type="submit"]:hover { background:#056bdd; }
.search-suggestions {
  position:absolute; top:100%; left:0; right:0;
  background:var(--surface); border:1px solid var(--line);
  border-top:none; border-radius:var(--radius);
  box-shadow:var(--shadow-md); z-index:100;
  max-height:300px; overflow-y:auto;
  display:none;
}
.search-suggestions.hidden { display:none; }
.suggestion-item {
  display:flex; align-items:center;
  padding:10px 14px; cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.03);
}
.suggestion-item:hover { background:var(--surface-2); }
.suggestion-item img {
  width:40px; height:40px; object-fit:cover;
  margin-right:10px;
}
.suggestion-item strong { display:block; font-size:13px; }
.suggestion-item small { color:var(--muted); font-size:11px; }

/* Header actions */
.header-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.header-action {
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:var(--radius);
  color:#fff; position:relative;
}
.header-action:hover { background:rgba(255,255,255,.12); }
.header-action svg { width:22px; height:22px; }
.header-action .counter {
  position:absolute; top:6px; right:2px;
  width:16px; height:16px;
  background:var(--warning); color:#fff;
  border-radius:50%; font-size:10px;
  font-weight:800; display:grid; place-items:center; line-height:1;
}

/* Desktop nav */
.desktop-nav {
  background:var(--navy-850); border-bottom:1px solid var(--line);
  position:sticky; top:var(--header-height); z-index:150;
}
.desktop-nav__inner {
  display:flex; align-items:center; gap:8px;
  padding:0 12px; overflow-x:auto;
}
.all-categories-button {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
  font-weight:700; font-size:13px;
}
.all-categories-button svg { width:16px; height:16px; }
.desktop-nav a {
  padding:6px 14px; border-radius:var(--radius);
  font-size:13px; font-weight:600; white-space:nowrap;
}
.desktop-nav a:hover { background:rgba(6,119,255,.1); color:var(--blue-600); }
.nav-whatsapp {
  margin-left:auto;
  background:var(--whatsapp); color:#fff;
  padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:700;
}
.nav-whatsapp:hover { opacity:.9; }
.nav-whatsapp svg { width:16px; height:16px; }

/* ===== Mega Menu ===== */
.mega-menu {
  position:fixed; top:0; right:0; bottom:0;
  width:100%; max-width:420px;
  background:var(--surface); z-index:250;
  transform:translateX(100%);
  transition:transform .3s ease;
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.mega-menu.open { transform:translateX(0); }
.mega-menu__head {
  padding:16px;
  display:flex; align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.mega-menu__head .eyebrow {
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.mega-menu__head h2 { font-size:20px; margin-top:4px; }
.megaClose {
  width:36px; height:36px; display:grid;
  place-items:center; border-radius:var(--radius);
  color:var(--muted);
}
.megaClose:hover { background:var(--surface-2); color:var(--ink); }
.mega-menu__grid { padding:16px; overflow-y:auto; flex:1; }

/* ===== Hero ===== */
.hero-section {
  padding:24px 0; position:relative; overflow:hidden;
}
.hero-shell { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
.hero-copy { text-align:center; }
.hero-brand-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; background:var(--amber-100);
  color:var(--amber-500); border-radius:20px;
  font-size:12px; font-weight:800; margin-bottom:12px;
}
.pulse { width:6px; height:6px; background:var(--warning); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.hero-copy h1 { font-size:28px; line-height:1.2; margin-bottom:12px; }
.hero-copy h1 span { color:var(--blue-600); }
.hero-copy p {
  color:var(--muted); font-size:15px;
  margin-bottom:20px; max-width:600px; margin-inline:auto;
}
.hero-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-proof { display:flex; gap:14px; justify-content:center; margin-top:20px; font-size:12px; color:var(--muted); }
.hero-proof span { display:flex; align-items:center; gap:6px; }
.hero-stage {
  height:320px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-radius:var(--radius-lg);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.hero-stage img {
  max-width:90%; max-height:260px; object-fit:contain;
}

/* ===== Trust Strip ===== */
.trust-strip {
  display:flex; gap:14px;
  padding:16px 0; overflow-x:auto;
  border-bottom:1px solid var(--line);
}
.trust-strip::-webkit-scrollbar { display:none; }
.trust-strip article {
  flex:0 0 auto; min-width:150px;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:var(--muted); font-size:12px;
}
.trust-strip article span {
  width:32px; height:32px; display:grid;
  place-items:center; background:var(--surface-2);
  border-radius:50%; color:var(--blue-500);
}
.trust-strip article strong {
  color:var(--ink); font-weight:700; font-size:13px;
}

/* ===== Section Headers ===== */
.section-space { padding:32px 0; }
.section-header {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:20px; padding:0 4px;
}
.section-header h2 {
  font-size:20px; font-weight:800;
  display:flex; align-items:center; gap:8px;
}
.section-header h2:before {
  content:''; width:4px; height:24px;
  background:linear-gradient(135deg,var(--blue-400),var(--blue-600));
  border-radius:2px;
}
.view-all { font-size:13px; font-weight:700; color:var(--blue-600); }
.view-all:hover { text-decoration:underline; }

/* ===== Category Grid ===== */
.category-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.category-card--brand { grid-column:1/-1; }

/* ===== Product Grid ===== */
.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px;
}
.product-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.product-card:hover {
  transform:translateY(-4px); box-shadow:var(--shadow-md);
  border-color:var(--blue-400);
}
.product-card__image-wrap {
  aspect-ratio:1;
  position:relative; overflow:hidden;
  background:var(--surface-2);
  min-height:200px; width:100%;
}
.product-card__image-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s;
}
.product-card:hover .product-card__image-wrap img { transform:scale(1.05); }
.product-badge {
  position:absolute; top:8px; right:8px;
  background:var(--danger); color:#fff;
  font-size:10px; font-weight:800;
  padding:2px 6px; border-radius:4px; z-index:2;
}
.product-badge.new { background:var(--blue-600); }
.product-actions {
  position:absolute; bottom:-50px; left:0; right:0;
  display:flex; gap:6px; padding:8px;
  background:rgba(255,255,255,.95);
  border-top:1px solid var(--line);
}
.product-card:hover .product-actions { bottom:0; }
.btn-quick-add {
  flex:1; background:var(--blue-600); color:#fff;
  padding:8px; border-radius:var(--radius);
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.btn-quick-add:hover { background:#056bdd; }
.btn-quick-add svg { width:14px; height:14px; }
.btn-quick-wish {
  width:36px; height:36px; display:grid;
  place-items:center; border-radius:var(--radius);
  background:var(--surface); color:var(--muted);
  border:1px solid var(--line);
}
.btn-quick-wish.is-active {
  color:var(--danger); border-color:var(--danger);
}
.btn-quick-wish:hover { background:var(--surface-2); color:var(--ink); }
.product-card__info {
  padding:12px; flex:1;
  display:flex; flex-direction:column;
}
.product-card__category {
  font-size:11px; color:var(--blue-600);
  font-weight:800; text-transform:uppercase;
  margin-bottom:4px;
}
.product-card__name {
  font-size:14px; font-weight:800; line-height:1.3;
  margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-card__price {
  display:flex; align-items:baseline; gap:6px;
  margin-bottom:8px;
}
.product-card__price .current { font-size:16px; font-weight:900; }
.product-card__price .old {
  font-size:13px; color:var(--muted);
  text-decoration:line-through;
}
.product-card__rating {
  font-size:12px; color:var(--warning); margin-bottom:6px;
}
.product-card__stock {
  font-size:11px; color:var(--success); font-weight:700;
  margin-bottom:10px;
}
.product-card__stock.oos { color:var(--danger); }
.product-card__footer {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:8px 12px; border-top:1px solid var(--line);
}
.btn-add-cart {
  flex:1; background:linear-gradient(135deg,var(--blue-400),var(--blue-600));
  color:#fff; padding:10px; border-radius:var(--radius);
  font-weight:800; font-size:13px; text-align:center;
}
.btn-add-cart:hover { filter:brightness(1.1); }
.btn-buy-now {
  flex:1; background:var(--surface); border:2px solid var(--line);
  color:var(--ink); padding:10px; border-radius:var(--radius);
  font-weight:800; font-size:13px; text-align:center;
}
.btn-buy-now:hover { border-color:var(--ink); background:var(--surface-2); }

/* ===== Empty State ===== */
.empty-state {
  text-align:center; padding:60px 20px;
}
.empty-state__icon {
  width:64px; height:64px;
  background:var(--surface-2); border-radius:50%;
  display:grid; place-items:center; margin:0 auto 16px;
  color:var(--muted-2);
}
.empty-state__icon svg { width:32px; height:32px; }
.empty-state h3 { font-size:18px; margin-bottom:8px; }
.empty-state p { color:var(--muted); margin-bottom:20px; }

/* ===== Filters Panel ===== */
.filters-panel {
  display:none; position:fixed; top:0; right:0; bottom:0;
  width:100%; max-width:340px;
  background:var(--surface); z-index:300;
  transform:translateX(100%);
  transition:transform .3s ease;
  box-shadow:var(--shadow-lg);
  overflow-y:auto; border-right:1px solid var(--line);
}
.filters-panel.open { transform:translateX(0); }
.filters-panel__head {
  padding:16px;
  display:flex; align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.filters-panel__head h3 { font-size:17px; font-weight:800; }
.filters-close {
  width:36px; height:36px; display:grid;
  place-items:center; border-radius:var(--radius);
  color:var(--muted);
}
.filters-close:hover { background:var(--surface-2); color:var(--ink); }
.filters-panel__body { padding:16px; }
.filter-group { margin-bottom:20px; }
.filter-group h4 {
  font-size:13px; font-weight:800;
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.filter-option {
  display:flex; align-items:center; gap:8px;
  padding:8px 0; cursor:pointer;
}
.filter-option input { width:18px; height:18px; accent-color:var(--blue-600); }
.filter-option label { font-size:13px; color:var(--ink); }
.filter-option small { color:var(--muted); font-size:11px; margin-left:auto; }
.price-range { margin-top:8px; }
.price-range input[type="range"] {
  width:100%; accent-color:var(--blue-600);
}
.price-range .labels {
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--muted); margin-top:4px;
}
.btn-apply-filters {
  width:100%; background:var(--blue-600); color:#fff;
  padding:12px; border-radius:var(--radius);
  font-weight:800; font-size:14px; margin-top:16px;
}
.btn-apply-filters:hover { background:#056bdd; }
.btn-reset-filters {
  width:100%; background:transparent; border:1px solid var(--line);
  color:var(--ink); padding:10px; border-radius:var(--radius);
  font-weight:800; font-size:13px; margin-top:8px;
}

/* ===== Sort & Results Summary ===== */
.results-bar {
  display:flex; align-items:center;
  justify-content:space-between;
  gap:12px; margin-bottom:16px;
  padding:12px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  flex-wrap:wrap;
}
.results-summary { font-size:13px; color:var(--muted); }
.sort-select {
  padding:8px 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
  color:var(--ink); font-size:13px; min-width:160px;
}
.btn-toggle-filters {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
  color:var(--ink); font-size:13px; font-weight:700;
}
.btn-toggle-filters svg { width:16px; height:16px; }

/* ===== Product Detail ===== */
.product-detail { padding:24px 0; }
.detail-shell {
  display:grid; grid-template-columns:1fr 420px;
  gap:24px;
}
.detail-gallery { display:flex; flex-direction:column; gap:12px; }
.detail-main-image {
  aspect-ratio:1; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; position:relative;
}
.detail-main-image img { width:100%; height:100%; object-fit:contain; }
.detail-thumbs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.thumb {
  aspect-ratio:1; background:var(--surface-2);
  border:2px solid transparent; border-radius:var(--radius);
  overflow:hidden; cursor:pointer;
  transition:border-color .2s;
}
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb.active { border-color:var(--blue-600); }
.detail-badge {
  position:absolute; top:12px; right:12px;
  background:var(--danger); color:#fff;
  font-size:11px; font-weight:800;
  padding:4px 8px; border-radius:4px;
}
.detail-badge.new { background:var(--blue-600); }
.detail-info h1 { font-size:26px; line-height:1.3; margin-bottom:12px; }
.detail-category {
  font-size:12px; color:var(--blue-600);
  font-weight:800; text-transform:uppercase;
  margin-bottom:6px;
}
.detail-rating {
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px;
}
.stars { color:var(--warning); font-size:18px; }
.detail-rating b {
  font-size:13px; color:var(--muted); font-weight:600; margin-left:4px;
}
.detail-price { font-size:28px; font-weight:900; margin-bottom:8px; }
.detail-price .old {
  font-size:18px; color:var(--muted);
  text-decoration:line-through; margin-left:8px; font-weight:500;
}
.detail-discount {
  display:inline-block; background:var(--success);
  color:#fff; font-size:12px; font-weight:800;
  padding:2px 8px; border-radius:4px; margin-left:8px;
}
.detail-stock {
  font-size:14px; font-weight:700; margin-bottom:16px;
}
.detail-stock.oos { color:var(--danger); }
.detail-stock.instock { color:var(--success); }
.detail-actions {
  display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap;
}
.qty-selector {
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}
.qty-btn {
  width:40px; height:40px; display:grid;
  place-items:center; font-size:20px; color:var(--ink);
}
.qty-btn:hover { background:var(--surface-2); }
.qty-input {
  width:50px; height:40px; text-align:center;
  border:none; border-left:1px solid var(--line);
  border-right:1px solid var(--line); background:transparent;
  color:var(--ink); font-size:14px; font-weight:700;
}
.btn-add-cart-detail {
  flex:1; background:linear-gradient(135deg,var(--blue-400),var(--blue-600));
  color:#fff; padding:14px 20px; border-radius:var(--radius);
  font-weight:900; font-size:15px; text-align:center;
}
.btn-add-cart-detail:disabled { opacity:.6; cursor:not-allowed; }
.btn-buy-now-detail {
  flex:1; background:var(--surface); border:2px solid var(--blue-600);
  color:var(--blue-600); padding:14px 20px; border-radius:var(--radius);
  font-weight:900; font-size:15px; text-align:center;
}
.btn-buy-now-detail:hover { background:var(--blue-600); color:#fff; }
.btn-whatsapp-order {
  width:100%; background:var(--whatsapp); color:#fff;
  padding:12px; border-radius:var(--radius);
  font-weight:900; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
}
.btn-whatsapp-order svg { width:20px; height:20px; }
.detail-description {
  margin-top:24px; border-top:1px solid var(--line);
  padding-top:20px;
}
.detail-description h3 { font-size:17px; font-weight:800; margin-bottom:10px; }
.detail-description p { color:var(--muted); line-height:1.7; white-space:pre-line; }
.detail-features { margin-top:16px; }
.detail-features h4 {
  font-size:14px; font-weight:800; margin-bottom:8px;
  color:var(--muted);
}
.detail-features ul {
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
}
.detail-features li {
  font-size:12px; padding:6px 10px;
  background:var(--surface-2); border-radius:var(--radius);
  color:var(--ink); font-weight:600; border:1px solid var(--line);
}

/* ===== Related Products ===== */
.related-products {
  margin-top:40px; padding-top:24px;
  border-top:1px solid var(--line);
}
.related-products h3 { font-size:20px; font-weight:800; margin-bottom:16px; }

/* ===== Bottom Nav (Mobile) ===== */
.mobile-bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  height:70px; background:var(--surface);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
  z-index:180; box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.mobile-bottom-nav a, .mobile-bottom-nav button {
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
  padding:8px 4px; color:var(--muted);
  font-size:10px; font-weight:700; position:relative;
}
.mobile-bottom-nav a.active, .mobile-bottom-nav button.active { color:var(--blue-600); }
.mobile-bottom-nav svg { width:24px; height:24px; }
.mobile-bottom-nav i {
  position:absolute; top:4px; right:4px;
  width:16px; height:16px; background:var(--blue-600);
  color:#fff; border-radius:50%; font-size:9px;
  font-style:normal; display:grid; place-items:center;
}

/* ===== Toast ===== */
.toast-stack {
  position:fixed; top:90px; right:16px;
  z-index:400; display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.toast {
  background:var(--ink); color:#fff;
  padding:12px 16px; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); font-size:13px;
  pointer-events:auto; display:flex; align-items:center; gap:10px;
  animation:slideIn .3s ease;
}
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }

/* ===== Back to Top ===== */
#backToTop {
  position:fixed; bottom:100px; right:16px;
  width:44px; height:44px; background:var(--blue-600);
  color:#fff; border-radius:50%; display:grid;
  place-items:center; z-index:100;
  box-shadow:var(--shadow-md); opacity:0;
  transition:opacity .3s; pointer-events:none;
}
#backToTop.visible { opacity:1; pointer-events:auto; }

/* ===== Floating Actions (WhatsApp FAB) ===== */
.floating-actions { position:fixed; bottom:90px; right:16px; z-index:150; }

.whatsapp-fab {
  width:56px; height:56px;
  background:var(--whatsapp); color:#fff;
  border-radius:50%; display:grid;
  place-items:center; box-shadow:var(--shadow-md);
  z-index:150;
}
.whatsapp-fab svg { width:26px; height:26px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .filters-panel { display:block; }

  /* Header search on mobile */
  .header-center {
    position:fixed; top:0; right:0; bottom:0;
    width:100%; max-width:340px;
    background:var(--surface); z-index:350;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:var(--shadow-lg);
    flex-direction:column;
    padding:16px; border-left:1px solid var(--line);
  }
  .header-center.open { transform:translateX(0); }
  .header-center .header-search {
    height:48px; flex-direction:column;
  }
  .header-search input { font-size:16px; }
  .header-search button[type="submit"] { width:56px; }

  .mobile-menu-button { display:grid; }

  /* Hero section responsive */
  .hero-section { padding:20px 0; }
  .hero-shell { gap:16px; }
  .hero-copy h1 { font-size:28px; }
  .hero-copy p { font-size:15px; }
  .hero-stage { height:260px; }
}

/* ===== Fluid Typography (Auto Resolution) ===== */
:root {
  --fs-body: clamp(0.875rem, 0.875rem + ((1vw - 3.2px) * 0.2), 1rem);
  --fs-sm: clamp(0.75rem, 0.75rem + ((1vw - 3.2px) * 0.15), 0.875rem);
  --fs-lg: clamp(1.125rem, 1.125rem + ((1vw - 3.2px) * 0.3), 1.5rem);
  --fs-xl: clamp(1.5rem, 1.5rem + ((1vw - 3.2px) * 0.4), 2.25rem);
  --fs-display: clamp(2rem, 2rem + ((1vw - 3.2px) * 0.8), 3.5rem);
  --line-tight: 1.2; --line-normal: 1.5; --line-relaxed: 1.75;
  --container-max: min(1480px, calc(100vw - 32px));
  --container-wide: min(1200px, calc(100vw - 24px));
  --container-narrow: min(680px, calc(100vw - 16px));
}

body { font-size: var(--fs-body); line-height: var(--line-normal); }
h1 { font-size: var(--fs-display); line-height: var(--line-tight); }
h2 { font-size: var(--fs-xl); line-height: var(--line-tight); }
h3 { font-size: var(--fs-lg); line-height: var(--line-tight); }
.small, .text-sm { font-size: var(--fs-sm); }

/* Responsive images */
img { max-width:100%; height:auto; display:block; }
.hero-stage img, .product-card__image-wrap img,
.detail-main-image img, .thumb img {
  width:100%; height:100%; object-fit:cover;
}

/* Container */
.container {
  width: var(--container-max);
  margin-inline: auto;
  padding: 0 16px;
}

/* Grid systems */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  width: 100%;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(10px, 2vw, 14px);
  width: 100%;
}
.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  width: 100%;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(10px, 2vw, 16px);
  width: 100%;
}

/* Touch-friendly tap targets */
button, a, .header-action, .icon-button {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

/* Header responsive */
.header-main {
  flex-wrap: nowrap;
  gap: clamp(6px, 1vw, 10px);
  padding: 0 clamp(8px, 2vw, 12px);
  height: clamp(56px, 8vw, 72px);
}
.header-left, .header-right {
  flex-shrink: 0;
  gap: clamp(4px, 1vw, 8px);
}
.header-center {
  flex: 1;
  min-width: 0;
  max-width: clamp(300px, 60vw, 520px);
}
.header-search {
  height: clamp(36px, 6vw, 44px);
  width: 100%;
}
.search-toggle { width: clamp(36px, 6vw, 44px); }
.header-search input {
  font-size: clamp(12px, 3vw, 14px);
  padding: 0 clamp(8px, 2vw, 12px);
}
.header-search button[type="submit"] {
  width: clamp(40px, 7vw, 48px);
}

/* Desktop nav responsive */
.desktop-nav__inner {
  gap: clamp(4px, 1vw, 8px);
  padding: 0 clamp(8px, 2vw, 12px);
  overflow-x: auto;
}
.desktop-nav a {
  padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 14px);
  font-size: clamp(11px, 2.5vw, 13px);
  white-space: nowrap;
}
.nav-whatsapp {
  font-size: clamp(10px, 2vw, 11px);
  padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px);
}

/* Hero section responsive */
.hero-section { padding: clamp(20px, 4vw, 32px) 0; }
.hero-shell { gap: clamp(16px, 4vw, 24px); }
.hero-copy h1 { font-size: var(--fs-display); margin-bottom: clamp(8px, 2vw, 12px); }
.hero-copy p { font-size: var(--fs-body); margin-bottom: clamp(16px, 4vw, 20px); }
.hero-stage { height: clamp(200px, 40vw, 320px); }

/* Section spacing */
.section-space { padding: clamp(24px, 5vw, 40px) 0; }
.section-header { margin-bottom: clamp(16px, 4vw, 24px); }
.section-header h2 { font-size: var(--fs-xl); }

/* Cards responsive */
.product-card, .category-card { width: 100%; }
.product-card__name { font-size: clamp(12px, 3vw, 14px); }
.product-card__price .current { font-size: clamp(14px, 3.5vw, 16px); }
.product-card__price .old { font-size: clamp(11px, 2.5vw, 13px); }

/* Buttons responsive */
.button, .btn-primary, .btn-add-cart, .btn-buy-now {
  padding: clamp(10px, 2vw, 14px) clamp(16px, 4vw, 24px);
  font-size: clamp(12px, 3vw, 14px);
  border-radius: var(--radius);
  width: auto; min-width: 44px;
}

/* Forms responsive */
input, select, textarea {
  font-size: clamp(14px, 3vw, 16px);
  padding: clamp(8px, 2vw, 12px);
  border-radius: var(--radius-sm);
  width: 100%; box-sizing: border-box;
}

/* Mobile bottom nav */
.mobile-bottom-nav {
  height: clamp(64px, 10vw, 70px);
  padding: clamp(4px, 1vw, 6px) max(10px, env(safe-area-inset-right))
           clamp(6px + env(safe-area-inset-bottom), 4vw, 12px)
           max(10px, env(safe-area-inset-left));
}
.mobile-bottom-nav svg {
  width: clamp(18px, 4vw, 22px); height: clamp(18px, 4vw, 22px);
}
.mobile-bottom-nav span { font-size: clamp(8px, 2vw, 9px); }

/* Cart and wishlist sheets */
.sheet__panel { width: min(90vw, 400px); max-width: 90vw; }

/* Product detail page responsive */
.detail-shell { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 24px); }
.detail-main-image {
  aspect-ratio: 1;
  height: clamp(250px, 50vw, 500px);
}
.detail-thumbs { grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 1.5vw, 8px); }
.thumb { aspect-ratio: 1; }
.detail-info h1 { font-size: clamp(20px, 5vw, 28px); }
.detail-price { font-size: clamp(20px, 5vw, 28px); }
.qty-selector { width: clamp(120px, 25vw, 160px); }
.qty-btn {
  width: clamp(36px, 7vw, 40px); height: clamp(36px, 7vw, 40px);
}
.qty-input {
  width: clamp(40px, 8vw, 50px); height: clamp(36px, 7vw, 40px);
}

/* Filters panel mobile */
.filters-panel {
  width: min(90vw, 340px);
  max-width: min(90vw, 340px);
}

/* Mega menu responsive */
.mega-menu {
  width: min(95vw, 420px); max-width: min(95vw, 420px);
}
.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(10px, 2vw, 12px);
}

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .header-main {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .mobile-bottom-nav {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* Prevent horizontal overflow */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Print styles */
@media print {
  .site-header, .floating-actions, .mobile-bottom-nav, .toast-stack {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
}

/* ===== Breakpoint-specific adjustments ===== */
/* Extra small phones (< 480px) */
@media (max-width: 479px) {
  :root {
    --header-height: 56px;
    --header-search-height: 40px;
  }
  .hero-copy h1 { font-size: clamp(1.5rem, 10vw, 2rem); }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .announcement { font-size: 11px; padding: 4px 0; }
  .announcement__inner { gap: 8px; }
}

/* Small phones (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .hero-copy h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* Tablets (768px - 900px) */
@media (min-width: 768px) and (max-width: 900px) {
  .hero-shell { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .header-center { max-width: 400px; }
}

/* Small desktop (901px - 1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
  .container { width: var(--container-wide); }
  .header-center { max-width: 480px; }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Large desktop (> 1200px) */
@media (min-width: 1201px) {
  .container { width: var(--container-max); }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Product Placeholder (when no image) ===== */
.product-placeholder {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--ink); font-size: 14px;
}

/* ===== Mobile & RTL Visual Fixes ===== */
/* Mobile header panel - RTL border fix */
@media (max-width: 900px) {
  [dir=rtl] .header-center {
    border-left: none !important;
    border-right: 1px solid var(--line) !important;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }
  [dir=rtl] .header-center.open {
    transform: translateX(0) !important;
  }

  /* Ensure header items don't overlap on mobile */
  .header-main { flex-wrap: nowrap; gap: 6px; padding: 0 6px; }
  .header-left { gap: 6px; }
  .header-right { gap: 4px; }

  /* Header action buttons - consistent sizing */
  .header-action { width: 40px; height: 40px; }
  .header-action svg { width: 20px; height: 20px; }
  .mobile-menu-button { width: 40px; height: 40px; }
  .mobile-menu-button svg { width: 20px; height: 20px; }
  .search-toggle { width: 40px; height: 100%; }
  .search-toggle svg { width: 18px; height: 18px; }
  .brand img { height: 32px; width: auto; max-width: 120px; }
}

/* WhatsApp FAB - ensure proper positioning */
.whatsapp-fab { width: 56px; height: 56px; }

/* Close/X icons - consistent sizing */
.icon-button svg, [use=#i-close] { width: 20px !important; height: 20px !important; }
.dialog-close svg, .megaClose svg, .filters-close svg, .promo-close svg {
  width: 20px; height: 20px;
}

/* Mobile bottom nav - consistent icon sizing */
.mobile-bottom-nav svg { width: 22px; height: 22px; }

/* Ensure search input doesn't collapse */
.header-search input { min-width: 120px; }

/* Product cards - ensure consistent height */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card__info { flex: 1; display: flex; flex-direction: column; }
.product-card__footer { margin-top: auto; }

/* Mega menu - proper RTL alignment */
[dir=rtl] .mega-menu__grid { direction: rtl; }
[dir=rtl] .category-card { text-align: right; }
[dir=rtl] .category-card b, [dir=rtl] .category-card small {
  display: block; text-align: right;
}

/* Toast stack - proper positioning */
.toast-stack { top: 100px; right: 16px; left: auto; }

/* Back to top button */
#backToTop { bottom: 160px; right: 16px; }

/* Mobile product image sizing fixes */
@media (max-width: 479px) {
  .product-card__image-wrap {
    min-height: 140px !important;
    aspect-ratio: 1 !important;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .product-card__image-wrap { min-height: 160px !important; }
}

/* Fix Grid Layout Conflicts */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: clamp(12px, 2vw, 18px) !important;
  width: 100% !important;
}
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}
.product-card__info { flex: 1 !important; display: flex !important; flex-direction: column !important; }
.product-card__footer { margin-top: auto !important; }

/* Product Detail Mobile Image Fixes */
@media (max-width: 767px) {
  .detail-main-image {
    height: clamp(200px, 60vw, 350px) !important;
  }
  .detail-thumbs {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
}

/* Header Search Mobile Fixes */
@media (max-width: 479px) {
  .header-main { gap: 4px !important; padding: 0 4px !important; }
  .header-left { gap: 4px !important; }
  .header-right { gap: 2px !important; }
  .header-action {
    width: 36px !important; height: 36px !important;
  }
  .header-action svg {
    width: 18px !important; height: 18px !important;
  }
}