/**
 * store-base.css — HABiiX Store Base Styles
 * Uses CSS custom properties defined by theme files (or gold-luxury defaults).
 * Add new themes in store-themes.js — no CSS changes needed.
 */

/* ── Reset + Root ─────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Mobile Tap Highlight Removal ─────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button, [onclick], .product-card, .cat-nav-item, .social-icon, .promo-nav, .feat-img-nav, .feat-img-dot {
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
input, textarea, select { -webkit-tap-highlight-color: transparent; }

:root {
  /* Default: gold-luxury (overridden by theme loader) */
  --primary:      #D4AF37;
  --primary-light:#F4E4B8;
  --primary-dark: #B8941F;
  --bg:           #0A0A0A;
  --bg-card:      #1A1A1A;
  --text:         #FFFFFF;
  --text-muted:   #AAAAAA;
  --accent:       #D4AF37;
  /* Aliases for backwards compat */
  --gold:       var(--primary);
  --gold-light: var(--primary-light);
  --gold-dark:  var(--primary-dark);
  --black:      var(--bg);
  --black-light:var(--bg-card);
  --white:      var(--text);
  --gray:       var(--text-muted);
  --gray-dark:  #666666;
  --gray-light: #CCCCCC;
}

html, body { height: 100%; }

body {
  font-family: 'Tajawal', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: none;
}

body.theme-ready {
  transition: background .3s, color .3s;
}

body.theme-light { background: var(--bg); }

/* ── Performance mode: remove ambient motion ───────────────────────────── */
.hero-bg::before,
.flash-header-strip,
.promo-banner,
#storeCoverImg,
.feat-img-slide.active img,
.limited-banner,
.limited-icon,
.card-limited-badge,
.offline-overlay,
.offline-emoji,
.product-detail-popup,
.habii-wa-fab.idle,
.habii-wa-popup,
.habii-wa-popup-typing span {
  animation: none !important;
}

.feat-img-track,
.product-grid,
.add-to-cart-btn,
.scroll-btn,
.sf-toast {
  transition: none !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(212,175,55,.3); border-radius: 3px; }

/* ── Hero Background Shimmer ─────────────────────────────────────────────── */
.hero-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-card) 50%, var(--bg) 100%);
  z-index: -1;
}
.hero-bg::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
  background: radial-gradient(circle, rgba(212,175,55,.08) 0%, transparent 70%);
  animation: shimmer 15s linear infinite;
}
@keyframes shimmer { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* ── Flash Sale Header Strip ──────────────────────────────────────────────── */
.flash-header-strip {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, #e84118, #f0932b, #e84118);
  background-size: 200% auto;
  animation: shimmerBanner 4s linear infinite;
  color: #fff; padding: 7px 16px;
  font-size: .82rem; font-weight: 700;
  position: relative; z-index: 22;
  max-width: 1300px; margin: 0 auto;
  border-radius: 0 0 14px 14px;
  flex-wrap: wrap;
  cursor: pointer;
}
.flash-header-text {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 1; min-width: 0; text-align: center;
}
.flash-header-title {
  font-size: .88rem; font-weight: 900; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.flash-header-sub {
  font-size: .72rem; font-weight: 500; opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.flash-header-countdown {
  display: flex; gap: 5px; flex-shrink: 0;
}
.flash-cd-block {
  text-align: center;
  background: rgba(0,0,0,.35); border-radius: 7px;
  padding: 4px 7px; min-width: 38px;
  backdrop-filter: blur(4px);
}
.flash-cd-num {
  display: block; font-size: 1.05rem; font-weight: 900; line-height: 1.15;
  color: #fff;
}
.flash-cd-lbl {
  display: block; font-size: .55rem; font-weight: 600; opacity: .8;
  text-transform: uppercase; letter-spacing: .3px;
}
.flash-header-close {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.flash-header-close:hover { background: rgba(255,255,255,.4); }

/* ── Promo Banner ─────────────────────────────────────────────────────────── */
.promo-banner {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-dark));
  color: var(--bg);
  text-align: center;
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 700;
  position: relative !important; top: 0; left: 0; right: 0; z-index: 20;
  animation: shimmerBanner 3s linear infinite;
  background-size: 200% auto;
  border-radius: 0 0 14px 14px;
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.promo-banner #promoBannerText {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-nav {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.22);
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.promo-nav:hover { background: rgba(255,255,255,.34); }
@keyframes shimmerBanner { 0%,100%{background-position:0%} 50%{background-position:100%} }

/* ── Store Cover Image ─────────────────────────────────────────────────── */
/* Ambient Ken Burns drift on cover image */
@keyframes coverDrift {
  0%, 100% { transform: scale(1.04) translate(0%, 0%); }
  33%       { transform: scale(1.06) translate(-0.6%, 0.3%); }
  66%       { transform: scale(1.05) translate(0.5%, -0.3%); }
}
/* Not full-width: centered card with rounded corners */
.store-cover {
  position: relative;
  width: calc(100% - 28px); max-width: 1280px; max-height: 280px;
  margin: 10px auto 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
/* Separator between promo and cover when both visible */
.store-cover-separator {
  height: 3px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  margin: 0; padding: 0; position: relative; z-index: 199;
}
#storeCoverImg {
  width: 100%; height: 280px; object-fit: cover; display: block;
  animation: coverDrift 18s ease-in-out infinite;
  transform-origin: center;
}
.store-cover-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(transparent, var(--bg));
}
.cover-logo-container {
  position: absolute; inset: 0; left: 0; right: 0;
  max-width: 1240px; margin: 0 auto; pointer-events: none;
}
.cover-logo {
  position: absolute; bottom: 16px; inset-inline-start: 20px;
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--primary);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  z-index: 2; background: var(--bg); pointer-events: auto;
}
@media (max-width: 768px) {
  .store-cover { max-height: 180px; margin: 0 auto; width: calc(100% - 16px); }
  #storeCoverImg { height: 180px; }
  .cover-logo { width: 64px; height: 64px; bottom: 10px; inset-inline-start: 16px; }
}

/* ── Header (below cover, scrolls with page) ──────────────────────── */
.header {
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,175,55,.2);
  position: relative; z-index: 10; padding: 12px 20px;
  max-width: 1300px; margin: 0 auto;
  border-radius: 0 0 14px 14px;
}
.header-content { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; }
/* ── Header Social Bar (second row, logo side vs icons side) ────────────── */
.header-social-bar {
  max-width: 1200px; margin: 5px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 2px 0;
  border-top: 1px solid rgba(var(--primary-rgb,212,175,55),.1);
}
.header-social-lbl {
  font-size: .72rem; color: var(--text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.header-socials {
  display: flex; align-items: center; gap: 5px;
}
.header-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(var(--primary-rgb,212,175,55),.08);
  border: 1px solid rgba(var(--primary-rgb,212,175,55),.15);
  transition: background .15s, transform .15s;
  text-decoration: none; overflow: hidden;
}
.header-socials a:hover { background: rgba(var(--primary-rgb,212,175,55),.2); transform: scale(1.1); }
.header-socials a img { width: 15px; height: 15px; object-fit: contain; opacity: .85; }
.header-socials a:hover img { opacity: 1; }
.logo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--primary);
  box-shadow: 0 0 20px rgba(var(--primary-rgb, 212,175,55), .3);
}
.store-name {
  font-size: 1.4rem; font-weight: 900; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-search-btn {
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.2); color: var(--primary);
  border-radius: 8px; padding: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.header-search-btn:hover { background: rgba(212,175,55,.2); }
.lang-switch {
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.2);
  color: var(--primary); border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-family: inherit; font-size: .78rem; font-weight: 700;
  transition: background .15s;
  min-width: 58px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap; line-height: 1;
}
.lang-switch:hover { background: rgba(212,175,55,.2); }
/* ── Currency Picker ─────────────────────────────────────────── */
.fx-picker-wrap { position: relative; display: inline-block; }
.fx-picker-btn {
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.2);
  color: var(--primary); border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-family: inherit; font-size: .78rem; font-weight: 700;
  transition: background .15s;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; line-height: 1;
}
.fx-picker-btn:hover { background: rgba(212,175,55,.2); }
.fx-picker-btn svg { flex-shrink: 0; }

.fx-picker-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 260px; max-height: 340px;
  background: var(--card-bg, #1e1e1e); border: 1px solid rgba(212,175,55,.25);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.45);
  z-index: 9999; overflow: hidden;
  display: flex; flex-direction: column;
}
[dir="rtl"] .fx-picker-dropdown { right: auto; left: 0; }

.fx-picker-search {
  width: 100%; border: none; border-bottom: 1px solid rgba(212,175,55,.15);
  background: transparent; color: var(--text, #fff);
  padding: 10px 12px; font-size: .82rem; font-family: inherit;
  outline: none;
}
.fx-picker-search::placeholder { color: var(--text-muted, #666); }

.fx-picker-list {
  overflow-y: auto; flex: 1; padding: 4px 0;
  scrollbar-width: thin;
}
.fx-picker-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; border: none; background: transparent; color: var(--text, #fff);
  padding: 8px 12px; cursor: pointer; font-family: inherit; font-size: .8rem;
  text-align: start; transition: background .12s;
}
.fx-picker-item:hover { background: rgba(212,175,55,.1); }
.fx-picker-item.active { background: rgba(212,175,55,.18); }
.fx-item-flag { font-size: 1.15rem; flex-shrink: 0; }
.fx-item-info { display: flex; gap: 4px; align-items: baseline; flex: 1; min-width: 0; }
.fx-item-code { font-weight: 700; font-size: .8rem; }
.fx-item-name { font-size: .72rem; color: var(--text-muted, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-rate-hint { font-size: .62rem; color: var(--text-muted, #666); white-space: nowrap; margin-inline-start: auto; }
.fx-picker-empty { padding: 16px; text-align: center; color: var(--text-muted, #666); font-size: .8rem; }

.fx-hint {
  font-size: .72em; color: var(--text-muted, #94a3b8); font-weight: 400;
  white-space: nowrap;
}
.header-search-bar {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  max-width: 1200px; margin: 0 auto; position: relative;
}
.header-search-bar.open { max-height: 60px; padding-top: 8px; overflow: visible; }
.header-search-bar input {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(212,175,55,.2);
  border-radius: 10px; padding-block: 10px; padding-inline: 14px 40px; color: var(--text);
  font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
/* Hide native browser clear button on search inputs */
.header-search-bar input[type='search']::-webkit-search-cancel-button,
.header-search-bar input[type='search']::-webkit-search-decoration { display: none; }
.header-search-bar input:focus { border-color: var(--primary); }
.header-search-close {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.header-search-bar.open .header-search-close {
  opacity: 1; pointer-events: auto; color: #fff;
}

/* ── Countdown ────────────────────────────────────────────────────────────── */
.countdown {
  background: rgba(var(--primary-rgb, 212,175,55), .08);
  border: 1px solid var(--primary);
  border-radius: 15px;
  max-width: 520px;
  margin: 20px auto;
  padding: 18px 24px;
  display: none; flex-direction: column; align-items: center; gap: 12px;
}
.countdown-title { color: var(--primary); font-weight: 700; font-size: .95rem; }
.countdown-timer { display: flex; gap: 12px; }
.countdown-block {
  text-align: center;
  background: var(--bg-card);
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 68px;
}
.countdown-number { display: block; color: var(--primary); font-size: 1.6rem; font-weight: 900; line-height: 1; }
.countdown-label  { display: block; color: var(--text-muted); font-size: .7rem; margin-top: 4px; }

/* ── Bio ─────────────────────────────────────────────────────────────────── */
.bio { text-align: center; padding: 14px 20px 10px; color: var(--text-muted); font-size: .95rem; max-width: 800px; margin: 0 auto; display: none; }
.bio-title {
  font-size: 1.15rem; font-weight: 800; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════ Storefront Sections ═════════════════════════════════════════ */

/* ── Generic Section Wrapper ─────────────────────────────────────────────── */
.sf-section { padding: 30px 20px; max-width: 1200px; margin: 0 auto; }

.section-title {
  text-align: center; font-size: 2rem; font-weight: 900; margin-bottom: 30px;
  background: linear-gradient(135deg, var(--primary), var(--text));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Keep emojis native-colored (not affected by text gradient) */
.section-title .section-icon {
  -webkit-text-fill-color: initial;
  background: none;
}

/* ── Search-results mode ─────────────────────────────────────────────────── */
/* Fix: position: fixed on .header-search-bar was broken because .header has
   backdrop-filter, which creates a new containing block.  Instead, fix the
   ENTIRE header to the viewport top so the search bar scrolls with it. */
body.search-results-active .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  border-radius: 0;
  max-width: 100%;
}
body.search-results-active .header-search-bar {
  max-height: 60px;
  padding: 8px 0;
  overflow: visible;
}
/* Push page content below the fixed header */
body.search-results-active .store-cover,
body.search-results-active .promo-banner {
  margin-top: 0;           /* cover may have been visible above header */
}
body.search-results-active #allProductsSection {
  padding-top: 10px;
}
/* Hide everything except All Products while searching */
body.search-results-active .store-cover,
body.search-results-active .promo-banner,
body.search-results-active #featuredSection,
body.search-results-active #limitedSection,
body.search-results-active #categorySections,
body.search-results-active .countdown,
body.search-results-active .bio,
body.search-results-active .category-nav,
body.search-results-active .category-nav.is-pinned {
  display: none !important;
}
/* Switch All Products from horizontal slider to wrapping grid */
body.search-results-active #allProductsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  overflow-x: visible;
  gap: 16px;
}
body.search-results-active #allProductsGrid .product-card {
  min-width: unset;
  max-width: unset;
}
/* Hide slider arrows + dots during search */
body.search-results-active .cat-slider-arrow,
body.search-results-active .cat-slider-dots,
body.search-results-active .view-all-wrap {
  display: none !important;
}

/* Back-compat: old .products selector (alias) */
.products { padding: 30px 20px; max-width: 1200px; margin: 0 auto; }

/* ── Category Navigation (circular icons + outside arrows) ───────────────── */
.category-nav {
  max-width: 1200px; margin: 8px auto 0; padding: 6px 0 4px;
  display: block;
  position: relative;
  z-index: 95;
  padding-inline: 44px;
  background: linear-gradient(180deg, rgba(26,26,26,.78), rgba(10,10,10,.72));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--primary-rgb,212,175,55),.18);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  overflow: visible;
  box-sizing: border-box;
  transition: none;
}
.category-nav.is-pinned {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 8px));
  margin: 0;
}
.category-nav.is-pinned.is-compact {
  padding-top: 6px;
  padding-bottom: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(26,26,26,.92), rgba(10,10,10,.86));
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
/* Outside scroll arrows */
.cat-nav-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(var(--primary-rgb,212,175,55),.3);
  background: rgba(var(--primary-rgb,212,175,55),.08);
  color: var(--primary); font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, border-color .2s, opacity .2s;
  padding: 0; z-index: 2;
  position: absolute; top: 50%; transform: translateY(-50%);
  direction: ltr !important;
  unicode-bidi: isolate;
  font-family: system-ui, Arial, sans-serif;
}
.cat-nav-arrow-prev { left: 10px; }
.cat-nav-arrow-next { right: 10px; }
.cat-nav-arrow:hover {
  background: rgba(var(--primary-rgb,212,175,55),.2);
  border-color: var(--primary);
}
.category-nav-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding: 10px 54px 8px 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; justify-content: flex-start;
  scroll-behavior: smooth; flex-wrap: nowrap;
  scroll-padding-inline-start: 4px; scroll-padding-inline-end: 54px;
  direction: ltr;
  min-width: 0;
}
.category-nav-scroll::-webkit-scrollbar { display: none; }

.cat-nav-item:hover { transform: translateY(-8px); }

.cat-nav-circle {
  width: 62px; height: 62px; border-radius: 50%; overflow: visible;
  border: 2.5px solid var(--primary);
  background: rgba(var(--primary-rgb, 212,175,55), .08);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .3s, border-color .3s, transform .25s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.cat-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer; scroll-snap-align: center;
  min-width: 74px; flex-shrink: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  padding-top: 6px;
}
.cat-nav-label {
  font-size: .72rem; font-weight: 700; color: var(--text);
  text-align: center; max-width: 104px; line-height: 1.22;
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: break-word;
  min-height: 2.2em;
  display: flex; align-items: center; justify-content: center;
  transition: none;
}
.category-nav.is-pinned.is-compact .cat-nav-arrow {
  width: 30px; height: 30px; font-size: 1.2rem;
}
.category-nav.is-pinned.is-compact .cat-nav-item {
  min-width: 74px;
}
.category-nav.is-pinned.is-compact .cat-nav-circle {
  width: 62px; height: 62px;
}
.category-nav.is-pinned.is-compact .cat-nav-label {
  font-size: .72rem;
  min-height: 2.2em;
}
.cat-nav-item:hover .cat-nav-circle {
  box-shadow: 0 8px 22px rgba(var(--primary-rgb, 212,175,55), .4);
  border-color: var(--primary-light);
  transform: scale(1.08);
}
.cat-nav-circle img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.cat-nav-circle.cat-nav-system {
  background: radial-gradient(circle at 30% 30%, rgba(var(--primary-rgb,212,175,55),.24), rgba(var(--primary-rgb,212,175,55),.1));
}
.cat-nav-system-icon {
  font-size: 1.55rem;
  line-height: 1;
}
.cat-nav-emoji { font-size: 1.8rem; line-height: 1; }



/* ── Featured Full-Image Slideshow ───────────────────────────────────────── */
.sf-section-featured {
  padding: 6px 0 0; max-width: 1280px;
  width: calc(100% - 28px); margin: 8px auto 0;
}
.sf-section-featured #featuredTitle {
  margin-bottom: 10px;
}
.feat-img-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 16/6; border-radius: 18px;
  cursor: grab; -webkit-user-select: none; user-select: none;
  background: rgba(0,0,0,.08);
  box-shadow: 0 6px 28px rgba(0,0,0,.2);
}
.feat-img-wrap:active { cursor: grabbing; }
.feat-img-track {
  display: flex; height: 100%;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform; direction: ltr;
}
.feat-img-slide {
  min-width: 100%; height: 100%; position: relative; overflow: hidden;
}
.feat-img-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
  transition: none;
}
.feat-img-slide.active img { transform: none; }
.feat-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 28px; gap: 6px; pointer-events: none;
}
.feat-img-name {
  color: #fff; font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 700; margin: 0; line-height: 1.2; max-width: 72%;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.feat-img-price {
  color: rgba(255,255,255,.9); font-size: clamp(.85rem, 2.5vw, 1.1rem);
  font-weight: 600; margin: 0;
}
.feat-img-btn {
  pointer-events: auto; align-self: flex-start; margin-top: 4px;
  background: var(--primary); color: var(--bg);
  border: none; border-radius: 30px;
  padding: 8px 22px; font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.feat-img-btn:hover:not(:disabled) { transform: scale(1.06); }
.feat-img-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Nav arrows */
.feat-img-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4; padding: 0;
  opacity: 0; transition: opacity .2s, background .2s;
  direction: ltr;
}
.feat-img-nav:hover { background: rgba(0,0,0,.7); }
.feat-img-wrap:hover .feat-img-nav { opacity: 1; }
.feat-img-prev { left: 16px; } .feat-img-next { right: 16px; }
/* Pause button */
.feat-img-pause {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #fff; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4; padding: 0; opacity: 0; transition: opacity .2s;
}
.feat-img-wrap:hover .feat-img-pause,
.feat-img-pause.paused { opacity: 1; }
/* Dots */
.feat-img-dots {
  position: absolute; bottom: 12px; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center; z-index: 3;
}
.feat-img-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: none;
  cursor: pointer; padding: 0; transition: background .2s, transform .2s;
}
.feat-img-dot.active { background: #fff; transform: scale(1.4); }
@media (hover: none) {
  .feat-img-nav { opacity: .8; } .feat-img-pause { opacity: .8; }
}

/* ── Limited Time Offers ─────────────────────────────────────────────────── */
.limited-banner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px; border-radius: 14px; margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(239,68,68,.1));
  border: 1px solid rgba(245,158,11,.3);
  animation: limitedPulse 3s ease-in-out infinite;
}
@keyframes limitedPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.15); }
  50%     { box-shadow: 0 0 20px 4px rgba(245,158,11,.2); }
}
.limited-icon { font-size: 1.6rem; animation: limitedBolt 1.5s ease-in-out infinite alternate; }
@keyframes limitedBolt {
  0% { transform: scale(1); }
  100% { transform: scale(1.2) rotate(-5deg); }
}
.limited-title {
  font-size: 1.3rem; font-weight: 900; margin: 0;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.limited-banner-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.limited-banner-countdown {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  /* Reuses .countdown-block / .countdown-number / .countdown-label styles */
}
.limited-subtitle {
  font-size: .88rem; font-weight: 500; margin: 0;
  color: rgba(245,158,11,.8);
}

/* ── Card Countdown Timer ────────────────────────────────────────────────── */
.card-countdown {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Courier New', monospace; font-size: .8rem; font-weight: 700;
  color: #f59e0b; padding: 4px 10px; border-radius: 8px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2);
  margin-bottom: 8px; width: fit-content;
}

/* ── Card Limited Offer Badge ────────────────────────────────────────────────── */
.card-limited-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; font-weight: 700; color: #ea580c;
  padding: 4px 10px; border-radius: 8px; margin-bottom: 8px;
  background: rgba(234,88,12,.1); border: 1px solid rgba(234,88,12,.2);
  width: fit-content;
  animation: limitedBadgePulse 2s ease-in-out infinite;
}
@keyframes limitedBadgePulse { 0%,100%{opacity:1} 50%{opacity:.65} }

/* ── All Products – View All Button ──────────────────────────────────────── */
.view-all-wrap {
  display: flex; justify-content: center; margin-top: 28px;
}
.view-all-btn {
  padding: 12px 36px; border: 2px solid var(--primary); border-radius: 30px;
  background: transparent; color: var(--primary); font-size: .95rem;
  font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all .25s;
}
.view-all-btn:hover {
  background: var(--primary); color: var(--bg);
  box-shadow: 0 4px 18px rgba(var(--primary-rgb, 212,175,55), .35);
  transform: translateY(-2px);
}

/* ── Category Section Titles ─────────────────────────────────────────────── */
.cat-section-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* ── Scroll Margin for Sticky Nav Offset ─────────────────────────────────── */
.sf-section, .category-section, #featuredSection, #limitedSection, #allProductsSection {
  scroll-margin-top: 110px;
}
.cat-section-icon {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--primary);
}

/* ── Category Section Horizontal Slider ──────────────────────────────────── */
.category-section .product-slider {
  display: flex; gap: 14px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px 0 12px;
}
.cat-slider-wrap { position: relative; }
.cat-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(15,23,42,.85);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
}
.cat-slider-arrow:disabled { opacity: .4; cursor: not-allowed; }
.cat-slider-arrow-prev { left: -2px; }
.cat-slider-arrow-next { right: -2px; }
[dir="rtl"] .cat-slider-arrow-prev { left: auto; right: -2px; }
[dir="rtl"] .cat-slider-arrow-next { right: auto; left: -2px; }
.cat-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.cat-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(148,163,184,.55);
  cursor: pointer;
}
.cat-slider-dot.active { background: var(--primary); transform: scale(1.15); }
.category-section .product-slider::-webkit-scrollbar { display: none; }
.category-section .product-slider .product-card {
  min-width: 44%; max-width: 260px; flex: 0 0 auto;
}
@media (max-width: 768px) {
  .category-section .product-slider .product-card { min-width: 155px; max-width: 170px; }
  .category-section .product-slider { gap: 10px; }
  .cat-slider-arrow { width: 26px; height: 26px; font-size: .95rem; }
}

/* ── All Products Horizontal Slider (phone + web) ───────────────────────── */
#allProductsGrid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 12px;
}
#allProductsGrid::-webkit-scrollbar { display: none; }
#allProductsGrid .product-card {
  min-width: 220px;
  max-width: 240px;
  flex: 0 0 auto;
}

#allProductsGrid.store-empty-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52vh;
  overflow: visible;
  padding: 12px 0 16px;
}

.store-empty-state {
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.8vw, 2.3rem);
  line-height: 1.3;
  color: var(--text);
  opacity: .95;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #allProductsGrid { gap: 10px; }
  #allProductsGrid .product-card {
    min-width: 155px;
    max-width: 170px;
  }
}

/* ── Category Section View More ──────────────────────────────────────────── */
.cat-section-more-wrap {
  display: flex; justify-content: center; margin-top: 14px;
}
.cat-section-more-btn {
  padding: 8px 28px; border: 1.5px solid var(--primary); border-radius: 24px;
  background: transparent; color: var(--primary); font-size: .85rem;
  font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all .25s;
}
.cat-section-more-btn:hover {
  background: var(--primary); color: var(--bg);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 212,175,55), .3);
}

/* ── Product Grid ────────────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  min-height: 180px;
  transition: opacity .18s ease;
}

.product-grid.is-loading {
  opacity: .7;
}

.product-card {
  background: var(--bg-card); border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(212,175,55,.1); position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  border-color: var(--primary);
}
.out-of-stock {
  position: absolute; inset: 0; background: rgba(0,0,0,.7); display: flex;
  align-items: center; justify-content: center; z-index: 2;
  color: #ef4444; font-weight: 700; font-size: 1.1rem;
}
.product-badge {
  position: absolute; z-index: 3; padding: 4px 12px;
  border-radius: 20px; font-size: .75rem; font-weight: 700;
}
.badge-gold    { background: linear-gradient(135deg,var(--primary-dark),var(--primary)); color: var(--bg); top:15px; }
[dir="rtl"] .badge-gold  { right:15px; }
[dir="ltr"] .badge-gold  { left: 15px; }
.badge-shifted { top: 50px; }
.badge-discount{ background: linear-gradient(135deg,#ef4444,#dc2626); color:#fff; top:15px; }
[dir="rtl"] .badge-discount { left: 15px; }
[dir="ltr"] .badge-discount { right:15px; }
.stock-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; margin-bottom: 8px;
}
.stock-low  { background: #f59e0b; color: #fff; }
.stock-ok   { background: #10b981; color: #fff; }
.stock-free-delivery { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.28); }
.card-image-stock {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
}
.card-image-stock .stock-badge {
  margin-bottom: 0;
  backdrop-filter: blur(3px);
}
[dir="rtl"] .card-image-stock {
  left: auto;
  right: 10px;
}

/* product-image-wrap defined above in zoom section */
.product-image { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.product-card:hover .product-image { transform: scale(1.05); }
.product-card:hover .product-image-wrap.has-alt .product-image { transform: none; }

.product-info { padding: 14px; }
.product-name { color: var(--text); font-weight: 700; font-size: .95rem; margin-bottom: 8px; line-height: 1.4; }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.product-price         { color: var(--primary); font-weight: 900; font-size: 1.1rem; }
.product-compare-price { color: var(--text-muted); text-decoration: line-through; font-size: .85rem; }
.add-to-cart-btn {
  width: 100%; padding: 10px; border: none; border-radius: 10px; cursor: pointer;
  font-size: .85rem; font-weight: 700; font-family: inherit;
  background: linear-gradient(135deg,var(--primary-dark),var(--primary));
  color: var(--bg); transition: all .2s;
}
.add-to-cart-btn:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.02); }
.add-to-cart-btn.btn-in-cart { background: linear-gradient(135deg,#22c55e,#16a34a); }
.add-to-cart-btn.btn-oos { background: rgba(239,68,68,.2); color: #ef4444; cursor: not-allowed; }

/* ── Cart Qty Controller ─────────────────────────────────────────────────── */
.cart-qty-ctrl { display:flex; align-items:center; gap:0; width:100%; border-radius:10px; overflow:hidden; border:1px solid rgba(212,175,55,.3); margin-top:4px; }
.cqc-btn { background:rgba(212,175,55,.12); color:var(--primary); border:none; font-size:1.15rem; font-weight:700; cursor:pointer; width:38px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.cqc-btn:hover:not(:disabled) { background:rgba(212,175,55,.28); }
.cqc-btn:disabled { color:rgba(255,255,255,.25); cursor:not-allowed; }
.cqc-count { flex:1; text-align:center; font-weight:700; color:var(--primary); font-size:.95rem; line-height:36px; }
.cqc-max { color:#22c55e; }

/* ── Stock + Delivery side-by-side ──────────────────────────────────────── */
.stock-delivery-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px; }
.stock-delivery-row .stock-badge { white-space:normal; word-break:break-word; }

/* ═══ Variant & Customization Indicators on Product Cards ═══ */
.card-variant-indicator { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:5px; }
.card-variant-dots { display:flex; gap:3px; align-items:center; }
.card-variant-dot {
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.2);
  display:inline-block; transition:transform .15s; cursor:default;
}
.card-variant-dot:hover { transform:scale(1.25); }
.card-variant-more { font-size:.68rem; color:var(--text-muted,#94a3b8); font-weight:600; margin-left:2px; }
.card-variant-count {
  font-size:.7rem; padding:2px 8px; border-radius:10px;
  background:rgba(var(--primary-rgb,59,130,246),.1); color:var(--primary);
  font-weight:600; white-space:nowrap;
}
.card-custom-indicator {
  font-size:.7rem; padding:2px 8px; border-radius:10px; margin-bottom:5px;
  background:rgba(245,158,11,.1); color:#f59e0b;
  font-weight:600; display:inline-block;
}
/* Light theme indicators */
body.theme-light .card-variant-dot { border-color:#e2e8f0; }

/* ── Cart Icon ───────────────────────────────────────────────────────────── */
.cart-icon {
  position: fixed; bottom: 18px; left: 20px; right: auto !important;
  z-index: 90; cursor: pointer;
  background: linear-gradient(135deg,var(--primary-dark),var(--primary));
  color: var(--bg); width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 4px 20px rgba(212,175,55,.4);
  transition: transform .2s, box-shadow .2s;
  border: none; outline: none;
}
.cart-icon:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(212,175,55,.5); }
.cart-badge {
  position: absolute; top: -4px; background: #ef4444; color: #fff;
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900;
}
[dir="rtl"] .cart-badge { left: -4px; }
[dir="ltr"] .cart-badge { right:-4px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.sf-toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card); border: 1px solid rgba(212,175,55,.3); color: var(--text);
  padding: 12px 24px; border-radius: 12px; font-size: .9rem; font-weight: 600;
  opacity: 0; transition: all .3s; z-index: 9999; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.sf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  background: var(--bg-card); border-top: 2px solid rgba(212,175,55,.3);
  padding: 50px 20px 20px; margin-top: 80px;
}
.footer-content {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px; margin-bottom: 30px;
}
.footer-section h3 { color: var(--primary); font-size: 1.1rem; margin-bottom: 15px; font-weight: 700; }
.footer-logo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--primary); margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb, 212,175,55), .2);
}
.footer-section p, .footer-section a {
  color: var(--gray-light); font-size: .92rem; line-height: 1.9; margin: 6px 0;
  display: block; text-decoration: none;
}
.footer-section a:hover { color: var(--primary); }
.footer-socials { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.social-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0;
  padding: 6px; border-radius: 8px;
  background: transparent; border: none;
  transition: transform .25s ease, filter .25s ease;
  overflow: visible; line-height: 0;
}
.social-icon img {
  width: 32px; height: 32px; object-fit: contain; display: block;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  opacity: .85;
}

/* Tooltip */
.social-icon::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg-card); color: var(--text); border: 1px solid rgba(255,255,255,.12);
  padding: 4px 10px; border-radius: 6px; font-size: .72rem; font-weight: 600;
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .2s ease, transform .2s ease; z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.social-icon:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Hover: lift + scale + full color */
.social-icon:hover {
  transform: translateY(-3px) scale(1.15);
}
.social-icon:hover img {
  opacity: 1; transform: scale(1.05);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.footer-policies a { display: flex; align-items: center; gap: 8px; }
.footer-policies a:hover::before { content: '›'; color: var(--primary); margin-inline-end: -4px; }
.footer-bio-row {
  display: flex; align-items: flex-start; gap: 8px; justify-content: center;
  max-width: 700px; margin: 20px auto 0; padding: 14px 18px;
  background: rgba(var(--primary-rgb, 212,175,55), .04); border-radius: 10px;
}
.footer-bio-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.7; }
.footer-bio-row p { color: var(--text-muted); font-size: .88rem; line-height: 1.7; margin: 0; text-align: center; }
.footer-divider { border: none; height: 1px; background: rgba(212,175,55,.2); margin: 30px 0 20px; }
.powered-by { color: var(--gray-dark); font-size: .88rem; text-align: center; }
.powered-by a { color: var(--primary); text-decoration: none; font-weight: 700; }
.footer-controls {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px;
}
.footer-lang-switch {
  border: 1px solid rgba(212,175,55,.25);
  background: rgba(212,175,55,.08);
  color: var(--primary);
  border-radius: 10px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.footer-lang-switch:hover { background: rgba(212,175,55,.15); }

#footerCompanyName,
#footerAddress {
  text-align: start;
}

/* ── Scroll Buttons ─────────────────────────────────────────────────────── */
.scroll-btn {
  position: fixed;
  inset-inline-end: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.35);
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.28));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 92;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.scroll-btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-btn.hide {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.scroll-btn:hover { transform: translateY(-2px); }
.scroll-btn.scroll-up { bottom: 182px; }
.scroll-btn.scroll-down { bottom: 126px; }

/* ── Offline Overlay ──────────────────────────────────────────────────────── */
.offline-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,10,10,.93); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; gap: 1.2rem; animation: offlineFadeIn .4s ease;
}
@keyframes offlineFadeIn { from { opacity:0 } to { opacity:1 } }
.offline-emoji     { font-size: 4rem; animation: offlineFloat 2s ease-in-out infinite alternate; }
@keyframes offlineFloat { 0%{transform:translateY(0)} 100%{transform:translateY(-12px)} }
.offline-overlay h2 { font-size: 1.8rem; color: var(--primary); }
.offline-overlay p  { color: var(--text-muted); font-size: 1.05rem; max-width: 400px; }
.offline-retry-btn {
  padding: 10px 28px; background: var(--primary); color: var(--bg); border: none;
  border-radius: 25px; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: transform .2s, box-shadow .2s;
}
.offline-retry-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(212,175,55,.4); }

/* ── Policy Popup ─────────────────────────────────────────────────────────── */
.policy-overlay { display: none; position: fixed; inset:0; background:rgba(0,0,0,.7); z-index:10000; justify-content:center; align-items:center; padding:20px; }
.policy-overlay.is-open { display: flex; }
.policy-popup { background:var(--bg-card); border:1px solid rgba(212,175,55,.3); border-radius:16px; max-width:640px; width:100%; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.policy-popup-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(212,175,55,.2); }
.policy-popup-header h3 { color:var(--primary); margin:0; font-size:1.1rem; }
.policy-popup-close { background:transparent; border:none; color:var(--text-muted); font-size:1.4rem; cursor:pointer; width:36px; height:36px; border-radius:8px; transition:background .15s; }
.policy-popup-close:hover { background:rgba(255,255,255,.1); }
.policy-popup-body { padding:20px; overflow-y:auto; color:var(--text-muted); font-size:.9rem; line-height:1.9; white-space:pre-wrap; }
.footer-policies { margin-top: 8px; }
.footer-policies a { color:var(--text-muted); font-size:.9rem; cursor:pointer; }
.footer-policies a:hover { color:var(--primary); }

/* ── Product Detail Popup ─────────────────────────────────────────────────── */
.product-detail-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); z-index:10001; justify-content:center; align-items:center; padding:16px; }
.product-detail-overlay.is-open { display:flex; }
.product-detail-popup { background:var(--bg-card); border:1px solid rgba(212,175,55,.3); border-radius:16px; max-width:720px; width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 80px rgba(212,175,55,.15); animation:productPopIn .3s ease; }
@keyframes productPopIn { from{opacity:0;transform:translateY(30px) scale(.95)} to{opacity:1;transform:none} }
.product-detail-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid rgba(212,175,55,.2); }
.product-detail-header h3 { color:var(--primary); margin:0; font-size:1.05rem; font-weight:700; }
.product-detail-close { background:transparent; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer; width:36px; height:36px; border-radius:8px; transition:background .15s; }
.product-detail-close:hover { background:rgba(255,255,255,.08); }
.product-detail-body  { flex:1; overflow-y:auto; }
.product-detail-footer{ border-top:1px solid rgba(212,175,55,.2); padding:14px 20px; background:var(--bg-card); display:none; }
.product-detail-footer.show { display:block; }

.pd-gallery-wrap { width:100%; background:var(--bg); }
.pd-gallery { position:relative; width:100%; background:var(--bg); overflow:hidden; touch-action:pan-y pinch-zoom; }
.pd-gallery-img { width:100%; height:350px; object-fit:contain; display:block; transition:opacity .3s; }
.pd-gallery-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(212,175,55,.7); color:var(--bg); border:none; width:36px; height:36px; border-radius:50%; font-size:1.2rem; font-weight:900; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:2; transition:background .2s; direction:ltr !important; unicode-bidi:bidi-override; }
.pd-gallery-nav:hover { background:var(--primary); }
.pd-gallery-nav.prev { left:10px; right:auto; }
.pd-gallery-nav.next { right:10px; left:auto; }
.pd-gallery.has-multi .pd-gallery-nav { display:flex; }
.pd-gallery-dots { display:flex; gap:6px; justify-content:center; padding:10px 0 4px; }
.pd-gallery-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; cursor:pointer; transition:background .2s; }
.pd-gallery-dot.active { background:var(--primary); }
.pd-gallery-dot-video { width:auto; border-radius:10px; padding:0 6px; font-size:.55rem; line-height:8px; }
.pd-video-play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); border:none; color:#fff; width:56px; height:56px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s; }
.pd-video-play-btn:hover { background:rgba(212,175,55,.8); transform:translate(-50%,-50%) scale(1.1); }

/* ── Zoom Button & Overlay ───────────────────────────────────────────────── */
.pd-zoom-btn { position:absolute; bottom:12px; right:12px; z-index:3; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border:none; width:36px; height:36px; border-radius:50%; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s; }
.pd-zoom-btn:hover { background:rgba(212,175,55,.8); transform:scale(1.1); }
.pd-zoom-overlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; cursor:grab; animation:zoomFadeIn .2s ease; }
@keyframes zoomFadeIn { from{opacity:0} to{opacity:1} }
.pd-zoom-close { position:absolute; top:16px; right:16px; z-index:2; background:rgba(255,255,255,.12); border:none; color:#fff; width:40px; height:40px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.pd-zoom-close:hover { background:rgba(255,255,255,.25); }
.pd-zoom-hint { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2; background:rgba(0,0,0,.6); color:#fff; padding:6px 16px; border-radius:20px; font-size:.78rem; pointer-events:none; transition:opacity .4s; }
.pd-zoom-img { max-width:90vw; max-height:85vh; object-fit:contain; transition:transform .3s ease; cursor:grab; user-select:none; -webkit-user-drag:none; }
.pd-zoom-img:active { cursor:grabbing; }

/* ── Second Image Hover Reveal (product cards) ───────────────────────────── */
.product-image-wrap { position:relative; width:100%; height:220px; overflow:hidden; background: rgba(0,0,0,.3); }
.product-image-alt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
.product-image-wrap.has-alt .product-image:first-child { transition:opacity .4s ease; }
.product-card:hover .product-image-wrap.has-alt .product-image:first-child { opacity:0; }
.product-card:hover .product-image-wrap.has-alt .product-image-alt { opacity:1; }

/* ── Per-Product Countdown ───────────────────────────────────────────────── */
.pd-countdown { background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(239,68,68,.08)); border:1px solid rgba(245,158,11,.25); border-radius:12px; padding:10px 16px; text-align:center; }
.pd-countdown-label { font-size:.78rem; color:var(--text-muted); margin-bottom:6px; font-weight:600; }
.pd-countdown-timer { display:flex; align-items:center; justify-content:center; gap:4px; font-family:'Courier New', monospace; }
.cd-block { background:rgba(0,0,0,.25); color:var(--primary); padding:4px 8px; border-radius:6px; font-size:1.1rem; font-weight:900; display:inline-flex; flex-direction:column; align-items:center; min-width:38px; }
.cd-block small { font-size:.55rem; color:var(--text-muted); font-weight:600; font-family:inherit; text-transform:uppercase; }
.cd-sep { color:var(--primary); font-weight:900; font-size:1.1rem; }

.pd-info   { padding:20px; display:flex; flex-direction:column; gap:14px; }
.pd-name   { font-size:1.25rem; font-weight:900; color:var(--text); }
.pd-badges { display:flex; gap:8px; flex-wrap:wrap; }
.pd-badge  { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:var(--bg); padding:4px 14px; border-radius:20px; font-size:.78rem; font-weight:700; }
.pd-badge.discount { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
.pd-badge.delivery { background:rgba(212,175,55,.12); color:var(--primary); border:1px solid rgba(212,175,55,.3); }
.pd-badge-free-delivery { background: rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.28); }
.pd-price-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pd-price   { font-size:1.8rem; font-weight:900; color:var(--primary); }
.pd-compare-price { font-size:1.1rem; color:var(--gray-dark); text-decoration:line-through; }
.pd-desc    { color:var(--text-muted); font-size:.92rem; line-height:1.9; white-space:pre-wrap; }
.pd-features { display:flex; flex-direction:column; gap:6px; }
.pd-feature { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.88rem; }
.pd-feature::before { content:'✓'; color:var(--primary); font-weight:700; flex-shrink:0; }
.pd-add-to-cart { width:100%; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:var(--bg); border:none; padding:16px; border-radius:12px; font-size:1.05rem; font-weight:700; cursor:pointer; transition:all .25s; font-family:inherit; }
.pd-add-to-cart:hover { filter:brightness(1.1); transform:scale(1.02); }
.pd-out-of-stock { width:100%; background:rgba(255,0,0,.12); color:#ef4444; border:1px solid rgba(255,0,0,.25); padding:14px; border-radius:12px; font-size:1rem; font-weight:700; text-align:center; }
.pd-action-buttons { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Checkout Sheet ───────────────────────────────────────────────────────── */
.checkout-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); z-index:10002; justify-content:flex-end; align-items:flex-end; }
.checkout-overlay.is-open { display:flex; }
.checkout-sheet { background:var(--bg-card); width:100%; max-width:560px; max-height:92vh; margin:0 auto; border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -20px 60px rgba(212,175,55,.15); animation:sheetSlideUp .35s ease; }
@keyframes sheetSlideUp { from{transform:translateY(100%);opacity:0} to{transform:none;opacity:1} }
.checkout-handle { width:40px; height:5px; background:rgba(255,255,255,.2); border-radius:3px; margin:10px auto 0; }
.checkout-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px 10px; border-bottom:1px solid rgba(212,175,55,.2); }
.checkout-header h3 { color:var(--primary); margin:0; font-size:1.1rem; font-weight:700; }
.checkout-close { background:transparent; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer; width:36px; height:36px; border-radius:8px; transition:background .15s; }
.checkout-close:hover { background:rgba(255,255,255,.08); }
.checkout-body  { flex:1; overflow-y:auto; padding:16px 20px; }

.checkout-cart-summary { background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.18); border-radius:12px; padding:14px; margin-bottom:18px; }
.checkout-cart-item { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.checkout-cart-item:last-child { border-bottom:none; }
.checkout-cart-item img { width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid rgba(212,175,55,.2); }
.checkout-cart-item-info { flex:1; min-width:0; }
.checkout-cart-item-name  { font-size:.85rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkout-cart-item-price { font-size:.8rem; color:var(--primary); font-weight:700; }
.checkout-cart-item-qty   { display:flex; align-items:center; gap:6px; }
.checkout-qty-btn { width:28px; height:28px; border-radius:50%; border:1px solid rgba(212,175,55,.3); background:rgba(212,175,55,.1); color:var(--primary); font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.checkout-qty-btn:hover { background:var(--primary); color:var(--bg); }
.checkout-qty-num { font-weight:700; color:var(--text); font-size:.9rem; min-width:20px; text-align:center; }
.checkout-cart-item-remove { background:none; border:none; color:#ef4444; font-size:1.1rem; cursor:pointer; padding:4px; border-radius:6px; transition:background .15s; }
.checkout-cart-item-remove:hover { background:rgba(239,68,68,.12); }
.checkout-totals { display:flex; justify-content:space-between; align-items:center; padding:10px 0 0; margin-top:6px; border-top:1px solid rgba(212,175,55,.2); }
.checkout-total-label  { color:var(--text-muted); font-size:.9rem; }
.checkout-total-amount { color:var(--primary); font-size:1.2rem; font-weight:900; }

.co-section-title { color:var(--primary); font-size:.88rem; font-weight:700; margin:16px 0 8px; display:flex; align-items:center; gap:6px; }
.co-field { margin-bottom:12px; }
.co-field label { display:block; font-size:.78rem; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.co-field label .required { color:#ef4444; margin:0 2px; }
.co-field input, .co-field select, .co-field textarea {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.18);
  border-radius:10px; padding:11px 14px; color:var(--text); font-size:.9rem;
  font-family:inherit; outline:none; transition:border-color .2s, box-shadow .2s;
}
.co-field input:focus, .co-field select:focus, .co-field textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.co-field input.invalid { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); animation:invalidFade 3s ease-out forwards; }
.co-field textarea { resize:vertical; min-height:60px; }
@keyframes invalidFade {
  0%,70% { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
  100%    { border-color:rgba(212,175,55,.18); box-shadow:none; }
}
.co-field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co-phone-row { display:flex; gap:8px; }
.co-phone-row .co-dropdown-wrap { width:140px; flex-shrink:0; }

/* Checkout dropdown */
.co-dropdown-wrap  { position:relative; }
.co-dropdown-toggle {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.18);
  border-radius:10px; padding:11px 36px 11px 14px; color:var(--text); font-size:.9rem;
  font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:border-color .2s, box-shadow .2s; text-align:inherit; position:relative;
}
.co-dropdown-toggle::after { content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%); border:5px solid transparent; border-top-color:var(--primary); }
.co-dropdown-toggle.open, .co-dropdown-toggle:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(212,175,55,.12); }
.co-dropdown-toggle.invalid { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); animation:invalidFade 3s ease-out forwards; }
.co-dropdown-toggle .co-toggle-text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; min-width:0; }
.co-dropdown-toggle .co-placeholder { color:rgba(255,255,255,.3); }
.co-dropdown-panel { display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); background:#1e1e1e; border:1px solid rgba(212,175,55,.28); border-radius:10px; z-index:200; max-height:260px; box-shadow:0 8px 30px rgba(0,0,0,.5); overflow:hidden; flex-direction:column; }
.co-dropdown-panel.open { display:flex; }
.co-dropdown-search { padding:10px 12px; border-bottom:1px solid rgba(212,175,55,.12); }
.co-dropdown-search input { width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(212,175,55,.18); border-radius:8px; padding:8px 12px; color:var(--text); font-size:.83rem; outline:none; font-family:inherit; }
.co-dropdown-search input:focus { border-color:var(--primary); }
.co-dropdown-search input::placeholder { color:rgba(255,255,255,.28); }
.co-dropdown-list { overflow-y:auto; max-height:200px; padding:4px 0; }
.co-dropdown-list::-webkit-scrollbar { width:4px; }
.co-dropdown-list::-webkit-scrollbar-thumb { background:rgba(212,175,55,.25); border-radius:2px; }
.co-dropdown-item { display:flex; align-items:center; gap:8px; padding:9px 14px; cursor:pointer; color:var(--text-muted); font-size:.84rem; transition:background .1s; }
.co-dropdown-item:hover, .co-dropdown-item.highlighted { background:rgba(212,175,55,.1); color:var(--primary); }
.co-dropdown-item.selected { background:rgba(212,175,55,.18); color:var(--primary); font-weight:700; }
.co-dropdown-empty { padding:12px; color:rgba(255,255,255,.28); font-size:.82rem; text-align:center; }
.co-flag { width:22px; height:16px; border-radius:2px; object-fit:cover; flex-shrink:0; vertical-align:middle; }

/* Invoice summary */
.co-invoice-summary { background:rgba(212,175,55,.05); border:1px solid rgba(212,175,55,.14); border-radius:10px; padding:12px 14px; margin-top:10px; }
.co-invoice-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:.83rem; color:var(--text-muted); }
.co-invoice-row.co-promo-row { color:#22c55e; }
.co-invoice-row.co-total-row { border-top:1px solid rgba(212,175,55,.18); margin-top:6px; padding-top:10px; font-size:1.05rem; font-weight:900; color:var(--primary); }
.co-promo-input-wrap { display:flex; gap:6px; margin:4px 0; }
.co-promo-input-wrap input { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.18); border-radius:8px; padding:8px 12px; color:var(--text); font-size:.82rem; outline:none; font-family:inherit; text-transform:uppercase; }
.co-promo-input-wrap input:focus { border-color:var(--primary); }
.co-promo-input-wrap button { background:var(--primary); color:var(--bg); border:none; border-radius:8px; padding:8px 14px; font-weight:700; font-size:.8rem; cursor:pointer; white-space:nowrap; font-family:inherit; transition:opacity .15s; }
.co-promo-input-wrap button:hover { opacity:.85; }
.co-promo-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.28); border-radius:6px; padding:3px 8px; font-size:.78rem; color:#22c55e; font-weight:600; }
.co-promo-tag button { background:none; border:none; color:#ef4444; font-size:.9rem; cursor:pointer; padding:0 2px; }

/* Special note */
.co-special-note-wrap textarea { background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25); border-radius:10px; padding:10px 14px; color:var(--text); font-size:.88rem; font-family:inherit; outline:none; width:100%; resize:vertical; min-height:60px; transition:border-color .2s; }
.co-special-note-wrap textarea:focus { border-color:#a78bfa; box-shadow:0 0 0 3px rgba(139,92,246,.12); }
.co-special-note-wrap textarea::placeholder { color:rgba(255,255,255,.22); }

/* Action buttons */
.checkout-actions { padding:14px 20px; border-top:1px solid rgba(212,175,55,.2); display:flex; flex-direction:column; gap:10px; }
.co-btn { width:100%; padding:15px; border:none; border-radius:12px; font-size:1rem; font-weight:700; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; }
.co-btn-order   { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:var(--bg); }
.co-btn-order:hover   { filter:brightness(1.1); transform:scale(1.01); }
.co-btn-continue { background: var(--primary); color: var(--bg); }
.co-btn-continue:hover { filter: brightness(1.08); transform: scale(1.01); }
.co-btn-whatsapp{ background:#25D366; color:#fff; }
.co-btn-whatsapp:hover{ background:#22c55e; transform:scale(1.01); }
.co-btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.checkout-overlay.co-success-mode .checkout-actions { display:none !important; }

/* Success */
.co-success { text-align:center; padding:40px 20px; }
.co-success-icon { font-size:4rem; margin-bottom:16px; animation:successPop .4s ease; }
@keyframes successPop { 0%{transform:scale(0)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
.co-success h3 { color:var(--primary); font-size:1.3rem; margin-bottom:8px; }
.co-success p  { color:var(--text-muted); font-size:.9rem; line-height:1.6; }
.co-success-order-num { color:var(--primary); font-weight:900; font-size:1.1rem; margin-top:8px; }

/* ── WhatsApp Widget (new widget uses inline <style> from store-widgets.js) ── */
#habiiWaWidgetContainer { z-index: 9999; }

/* ── Stock Badges (Checkout + Product Detail) ────────────────────────────── */
.co-stock-badge {
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  display: inline-block; margin-top: 3px;
}
.co-stock-low { background: rgba(245,158,11,.15); color: #f59e0b; }
.co-stock-ok  { background: rgba(16,185,129,.12); color: #10b981; }
.co-stock-oos { background: rgba(239,68,68,.12);  color: #ef4444; }

.pd-stock {
  font-size: .82rem; font-weight: 700; padding: 6px 14px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 4px; white-space: normal; word-break: break-word;
}
.pd-stock-low { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.pd-stock-ok  { background: rgba(16,185,129,.08); color: #10b981; border: 1px solid rgba(16,185,129,.2); }
/* Stock + delivery time row — badges side by side, text fully visible */
.pd-stock-delivery-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.pd-stock-delivery-row .pd-badge.delivery { margin-top:0; white-space:normal; word-break:break-word; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .store-name     { font-size:1.1rem; }
  .product-grid   { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
  body.search-results-active #allProductsGrid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .product-image-wrap { height:160px; }
  .product-info { padding: 10px; }
  .product-name { font-size: .85rem; margin-bottom: 6px; }
  .product-price { font-size: .95rem; }
  .product-compare-price { font-size: .78rem; }
  .add-to-cart-btn { padding: 8px; font-size: .8rem; }
  .stock-badge { font-size: .65rem; padding: 2px 7px; }
  .product-badge { font-size: .68rem; padding: 3px 9px; }
  .section-title  { font-size:1.5rem; }
  .sf-section     { padding:20px 14px; }

  /* Category nav mobile */
  .category-nav { padding: 8px 0 4px; padding-inline: 36px; }
  .cat-nav-arrow { width: 28px; height: 28px; font-size: 1.1rem; }
  .cat-nav-arrow-prev { left: 8px; }
  .cat-nav-arrow-next { right: 8px; }
  .category-nav-scroll { gap: 10px; justify-content: flex-start; padding: 8px 44px 6px 2px; scroll-padding-inline-start: 2px; scroll-padding-inline-end: 44px; }
  .cat-nav-circle { width: 56px; height: 56px; }
  .cat-nav-label { font-size: .7rem; max-width: 76px; min-height: 2.5em; }
  .cat-nav-item { min-width: 64px; padding-top: 4px; }
  .category-nav.is-pinned.is-compact { padding-top: 4px; padding-bottom: 3px; }
  .category-nav.is-pinned.is-compact .cat-nav-arrow { width: 24px; height: 24px; font-size: .95rem; }
  .category-nav.is-pinned.is-compact .cat-nav-circle { width: 50px; height: 50px; }
  .category-nav.is-pinned.is-compact .cat-nav-item { min-width: 58px; }
  .category-nav.is-pinned.is-compact .cat-nav-label { font-size: .66rem; min-height: 2.1em; }

  /* Featured slideshow mobile */
  .feat-img-wrap { aspect-ratio: 4/3; border-radius: 14px; }
  .sf-section-featured { width: calc(100% - 16px); margin-top: 6px; }
  .sf-section-featured #featuredTitle { margin-bottom: 8px; }
  .feat-img-nav { width: 34px; height: 34px; font-size: 1.2rem; }
  .feat-img-prev { left: 10px; } .feat-img-next { right: 10px; }
  .feat-img-overlay { padding: 14px 16px; }

  .promo-banner { gap: 8px; padding: 8px 10px; }
  .promo-nav { width: 24px; height: 24px; font-size: 1rem; }
  .promo-banner #promoBannerText { font-size: .82rem; }

  /* Flash header strip mobile — single line */
  .flash-header-strip { gap: 6px; padding: 5px 8px; flex-wrap: nowrap; }
  .flash-header-text { flex: 1; min-width: 0; }
  .flash-header-title { font-size: .72rem; }
  .flash-header-sub { font-size: .58rem; opacity: .8; }
  .flash-cd-block { padding: 2px 4px; min-width: 28px; border-radius: 4px; }
  .flash-cd-num { font-size: .82rem; }
  .flash-cd-lbl { font-size: .44rem; }
  .flash-header-close { width: 18px; height: 18px; font-size: .8rem; }

  /* Limited offers mobile */
  .limited-banner { padding:10px 12px; gap:6px; }
  .limited-title { font-size:1rem; }
  .limited-subtitle { font-size:.78rem; text-align:center; }
  .limited-banner-countdown { gap:5px; }
  /* Smaller countdown blocks inside the banner on mobile */
  .limited-banner-countdown .countdown-block { min-width:48px; padding:7px 8px; }
  .limited-banner-countdown .countdown-number { font-size:1.1rem; }
  .limited-banner-countdown .countdown-label { font-size:.6rem; }

  /* View All mobile */
  .view-all-btn { padding:10px 28px; font-size:.88rem; }

  .product-detail-popup { max-height:95vh; border-radius:12px 12px 0 0; }
  .pd-gallery-img { height:260px; }
  .pd-gallery-video { height:260px !important; }
  .pd-name        { font-size:1.05rem; }
  .pd-price       { font-size:1.4rem; }
  .checkout-sheet { max-width:100%; border-radius:16px 16px 0 0; }
  .co-field-row   { grid-template-columns:1fr; }
  .co-phone-row .co-dropdown-wrap { width:130px; }
  #habiiWaWidgetContainer { bottom:14px; right:12px; }
  .cart-icon       { left:16px; bottom:14px; right:auto !important; }
  /* Header social bar: visible on mobile too, compact */
  .header-social-bar { margin: 4px auto 0; padding: 4px 2px 0; }
  .header-social-lbl { font-size: .68rem; }
  .header-socials a { width: 24px; height: 24px; }
  .header-socials a img { width: 13px; height: 13px; }

  /* Scroll margin smaller on mobile (compact nav) */
  .sf-section, .category-section, #featuredSection, #limitedSection, #allProductsSection {
    scroll-margin-top: 90px;
  }

  .footer { padding:30px 16px 16px; margin-top:50px; }
  .footer-content { grid-template-columns:1fr; gap:28px; text-align:center; }
  .footer-section { display:flex; flex-direction:column; align-items:center; }
  .footer-logo { margin-left:auto; margin-right:auto; display:block; }
  .footer-section h3 { font-size:1rem; margin-bottom:10px; }
  .footer-section p, .footer-section a { text-align:center; }
  #footerCompanyName, #footerAddress { text-align: center; }
  .footer-section h3 { font-size: 1.15rem; }
  .footer-section p, .footer-section a { font-size: 1rem; line-height: 1.9; }
  .footer-socials { justify-content:center; }
  .footer-policies { display:flex; flex-direction:column; align-items:center; }
  .footer-policies a { justify-content:center; }
  .footer-bio-row { padding:10px 14px; flex-direction:column; align-items:center; }
  .footer-bio-row p { text-align:center; }
  .scroll-btn { inset-inline-end: 12px; width: 42px; height: 42px; }
  .scroll-btn.scroll-up { bottom: 168px; }
  .scroll-btn.scroll-down { bottom: 116px; }
  .countdown { max-width:92vw; padding:14px 12px; }
  .countdown-block { min-width:58px; padding:10px 12px; }
  .countdown-number { font-size:1.35rem; }
}

/* ── Light Theme Adjustments ─────────────────────────────────────────────── */
body.theme-light .header { background:rgba(255,255,255,.95); border-color:rgba(0,0,0,.1); }
body.theme-light .product-card { border-color:rgba(0,0,0,.08); }
body.theme-light .checkout-sheet { background:#fff; }
body.theme-light .co-field input { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12); color:#1a1a1a; }
body.theme-light .co-dropdown-toggle { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12); color:#1a1a1a; }
body.theme-light .co-dropdown-panel  { background:#fff; }
body.theme-light .co-dropdown-item   { color:#444; }

/* Light theme — new sections */
body.theme-light .cat-nav-circle { background:rgba(var(--primary-rgb,212,175,55),.06); border-color:var(--primary); }
body.theme-light .cat-nav-label { color:#333; }
body.theme-light .cat-nav-arrow { background:rgba(var(--primary-rgb,212,175,55),.06); border-color:rgba(0,0,0,.12); color:var(--primary); }
body.theme-light .cat-nav-arrow:hover { background:rgba(var(--primary-rgb,212,175,55),.15); }
body.theme-light .feat-img-nav { background: rgba(0,0,0,.5); }
body.theme-light .feat-img-dot { background: rgba(0,0,0,.25); }
body.theme-light .feat-img-dot.active { background: var(--primary); }
body.theme-light .limited-banner { background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(239,68,68,.06)); border-color:rgba(245,158,11,.2); }
body.theme-light .limited-subtitle { color:rgba(180,90,0,.7); }
body.theme-light .card-countdown { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.15); }
body.theme-light .card-limited-badge { background:rgba(234,88,12,.07); border-color:rgba(234,88,12,.15); color:#c2410c; }
body.theme-light .view-all-btn { border-color:var(--primary); color:var(--primary); }
body.theme-light .view-all-btn:hover { background:var(--primary); color:#fff; }

/* ═══════════════  Variant Picker (Product Detail Popup)  ═══════════════════ */
.pd-variants { margin:12px 0 6px; }
.pd-variant-group { margin-bottom:12px; }
.pd-variant-label {
  font-size:.82rem; font-weight:700; color:var(--text);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.3px;
}
.pd-variant-options { display:flex; flex-wrap:wrap; gap:8px; }

/* Pills */
.pd-variant-pill {
  padding:7px 16px; border-radius:20px; font-size:.82rem;
  border:1.5px solid var(--text-muted,#888); background:transparent;
  color:var(--text); cursor:pointer; transition:all .2s;
  font-family:inherit; line-height:1.2;
}
.pd-variant-pill:hover { border-color:var(--primary); background:rgba(var(--primary-rgb,212,175,55),.08); }
.pd-variant-pill.active {
  border-color:var(--primary); background:var(--primary);
  color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(var(--primary-rgb,212,175,55),.35);
}

/* Color Swatches */
.pd-variant-swatch {
  width:34px; height:34px; border-radius:50%; border:2.5px solid transparent;
  cursor:pointer; transition:all .2s; position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.pd-variant-swatch:hover { transform:scale(1.15); }
.pd-variant-swatch.active {
  border-color:var(--primary); transform:scale(1.15);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb,212,175,55),.3), 0 2px 8px rgba(0,0,0,.2);
}
.pd-variant-swatch.active::after {
  content:'✓'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); color:#fff; font-size:.7rem;
  text-shadow:0 1px 2px rgba(0,0,0,.5); font-weight:700;
}

/* Dropdown */
.pd-variant-dropdown {
  width:100%; max-width:260px; padding:9px 14px; border-radius:8px;
  border:1.5px solid var(--text-muted,#888); background:var(--bg-card,#1a1a1a);
  color:var(--text); font-size:.85rem; font-family:inherit;
  cursor:pointer; appearance:auto; transition:border-color .2s;
}
.pd-variant-dropdown:focus { border-color:var(--primary); outline:none; }
body.theme-light .pd-variant-dropdown { background:#fff; border-color:#ccc; color:#333; }

/* Missing / Unselected highlight animation */
.pd-variant-missing {
  animation: variantShake .4s ease-in-out;
}
.pd-variant-missing .pd-variant-label { color:#ef4444 !important; }
@keyframes variantShake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-4px); }
  40%     { transform:translateX(4px); }
  60%     { transform:translateX(-3px); }
  80%     { transform:translateX(2px); }
}

/* Light theme overrides */
body.theme-light .pd-variant-pill { border-color:#ccc; color:#333; }
body.theme-light .pd-variant-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
body.theme-light .pd-variant-swatch { box-shadow:0 1px 4px rgba(0,0,0,.1); }
body.theme-light .pd-variant-label { color:#333; }

/* ═══════════════════ Product Customization Storefront ═══════════════════ */
.pd-customization { margin-top:14px; padding:12px; background:rgba(var(--primary-rgb,59,130,246),.04); border:1px solid rgba(var(--primary-rgb,59,130,246),.15); border-radius:12px; }
.pd-custom-title { font-weight:700; font-size:.88rem; color:var(--text,#1e293b); margin-bottom:10px; }
.pd-custom-field { margin-bottom:10px; }
.pd-custom-field.pd-custom-missing { animation: shake .3s; border-left:3px solid #ef4444; padding-left:8px; border-radius:4px; }
.pd-custom-label { display:block; font-size:.82rem; font-weight:600; color:var(--text,#334155); margin-bottom:4px; }
.pd-custom-input, .pd-custom-textarea {
  width:100%; border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:8px 12px;
  font-size:.85rem; background:rgba(255,255,255,.08); color:var(--text,#1e293b);
  box-sizing:border-box; font-family:inherit; transition:border-color .2s;
}
.pd-custom-input:focus, .pd-custom-textarea:focus { outline:none; border-color:var(--primary); }
.pd-custom-textarea { resize:vertical; min-height:60px; }
.pd-custom-image-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pd-custom-image-btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:rgba(var(--primary-rgb,59,130,246),.1); border:2px dashed rgba(var(--primary-rgb,59,130,246),.3);
  border-radius:8px; cursor:pointer; font-size:.82rem; color:var(--primary); font-weight:600;
  transition:background .2s;
}
.pd-custom-image-btn:hover { background:rgba(var(--primary-rgb,59,130,246),.2); }
.pd-custom-img-preview { flex:1; min-width:80px; }
.pd-gift-designs { display:flex; flex-wrap:wrap; gap:6px; }
.pd-gift-design-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 12px; border:2px solid rgba(255,255,255,.12); border-radius:10px;
  background:rgba(255,255,255,.06); cursor:pointer; transition:all .2s;
  min-width:60px; font-family:inherit;
}
.pd-gift-design-btn:hover { border-color:var(--primary); background:rgba(var(--primary-rgb,59,130,246),.08); }
.pd-gift-design-btn.active { border-color:var(--primary); background:rgba(var(--primary-rgb,59,130,246),.15); box-shadow:0 0 0 3px rgba(var(--primary-rgb,59,130,246),.15); }
.pd-gift-emoji { font-size:1.4rem; }
.pd-gift-name { font-size:.72rem; color:var(--text,#64748b); font-weight:600; }
.pd-gift-msg { margin-top:6px; }

/* Light theme customization */
body.theme-light .pd-custom-input, body.theme-light .pd-custom-textarea { border-color:#e2e8f0; background:#fff; }
body.theme-light .pd-gift-design-btn { border-color:#e2e8f0; background:#fafbfc; }
body.theme-light .pd-gift-design-btn.active { border-color:var(--primary); background:rgba(var(--primary-rgb,59,130,246),.08); }