/* =====================================================================
   AL-HULOUL — LUXURY LIGHT THEME
   ورق عاجي + كحلي عميق + أزرق العلامة + لمسات ذهبية رفيعة
   (الفوتر يفضل داكن عن قصد — ده اللي بيدي الإحساس الفخم)
   ===================================================================== */
html.light-mode {
  --ink: #0b1b33;
  --body: #475569;
  --muted: #64748b;
  --paper: #f7f9fc;
  --card: #ffffff;
  --line: rgba(15, 40, 80, .10);
  --line-brand: rgba(41, 171, 226, .28);
  --brand-ink: #0f6a93;
  --gold-soft: rgba(184, 137, 43, .35);
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, .04), 0 6px 18px rgba(11, 27, 51, .06);
  --shadow-md: 0 2px 4px rgba(11, 27, 51, .04), 0 14px 36px rgba(11, 27, 51, .09);
  --shadow-lg: 0 4px 10px rgba(11, 27, 51, .05), 0 26px 60px rgba(11, 27, 51, .14);
}

/* ---------- Base ---------- */
html.light-mode body {
  background: var(--paper) !important;
  color: var(--body) !important;
}

html.light-mode ::-webkit-scrollbar-track {
  background: #e8eef5 !important;
}

html.light-mode ::-webkit-scrollbar-thumb {
  background: rgba(41, 171, 226, .55) !important;
}

/* ---------- Text ---------- */
html.light-mode :is(h1, h2, h3, h4, h5, h6, p, span, div, strong, label, li, small).text-white {
  color: var(--ink) !important;
}

html.light-mode .text-slate-100,
html.light-mode .text-slate-200 {
  color: #1e293b !important;
}

html.light-mode .text-slate-300 {
  color: #334155 !important;
}

html.light-mode .text-slate-400 {
  color: var(--muted) !important;
}

html.light-mode .text-slate-500,
html.light-mode .text-slate-600 {
  color: #7b8aa0 !important;
}

html.light-mode [class*="text-brand-200"] {
  color: var(--body) !important;
}

html.light-mode [class*="text-brand-300"] {
  color: var(--brand-ink) !important;
}

html.light-mode .text-brand-400 {
  color: #1487b8 !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
  color: #94a3b8 !important;
}

html.light-mode .hover\:text-white:hover {
  color: var(--brand-ink) !important;
}

html.light-mode .group:hover .group-hover\:text-white {
  color: var(--brand-ink) !important;
}

/* ---------- Dark arbitrary surfaces → soft paper ---------- */
html.light-mode :is(.bg-\[\#0d1e38\], .bg-\[\#0a1b33\], .bg-\[\#0a1628\], .bg-\[\#060e1c\],
  .bg-\[\#0d1e38\]\/90, .bg-\[\#0d1e38\]\/80, .bg-\[\#0d1e38\]\/70,
  .bg-\[\#060e1c\]\/80, .bg-\[\#0a1628\]\/90) {
  background-color: #f2f7fc !important;
  border-color: var(--line-brand) !important;
}

html.light-mode .bg-slate-800\/60,
html.light-mode .bg-slate-700\/60,
html.light-mode .bg-slate-800\/80,
html.light-mode .bg-slate-700 {
  background-color: #eaf1f8 !important;
}

html.light-mode .border-slate-700,
html.light-mode .border-slate-800 {
  border-color: var(--line) !important;
}

html.light-mode .from-\[\#0a1b33\] {
  --tw-gradient-from: #f6fafd !important;
  --tw-gradient-to: #e9f2f9 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ---------- Header / announcement bar ---------- */
html.light-mode header {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-brand) !important;
  box-shadow: 0 1px 0 var(--gold-soft), 0 8px 28px rgba(11, 27, 51, .06) !important;
}

html.light-mode header nav a,
html.light-mode #mobile-menu a {
  color: #334155 !important;
}

html.light-mode header nav a:hover,
html.light-mode #mobile-menu a:hover {
  color: #1487b8 !important;
}

html.light-mode #mobile-menu {
  background: #fff !important;
}

html.light-mode body>div.bg-gradient-to-r {
  background: linear-gradient(90deg, #eaf4fb, #ffffff 50%, #eaf4fb) !important;
  border-bottom: 1px solid var(--gold-soft) !important;
}

html.light-mode header input {
  background: #f2f7fc !important;
  color: var(--ink) !important;
  border-color: var(--line-brand) !important;
}

html.light-mode header input:focus {
  background: #fff !important;
  border-color: #29ABE2 !important;
}

html.light-mode .logo-pod-frame,
html.light-mode header .from-\[\#0d1e38\] {
  background: linear-gradient(135deg, #ffffff, #eaf4fb) !important;
  border-color: var(--gold-soft) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff !important;
}

/* ---------- Hero ---------- */
html.light-mode section#home,
html.light-mode body>section.dot-grid {
  background: linear-gradient(160deg, #ffffff 0%, #eef6fc 55%, #f7f9fc 100%) !important;
  color: var(--ink) !important;
}

html.light-mode section#home h1,
html.light-mode body>section.dot-grid h1 {
  color: var(--ink) !important;
}

html.light-mode section#home p {
  color: var(--body) !important;
  text-shadow: none !important;
}

html.light-mode section#home .absolute.rounded-full,
html.light-mode body>section.dot-grid>.absolute.rounded-full {
  opacity: .5;
}

html.light-mode .dot-grid {
  background-image: radial-gradient(rgba(41, 171, 226, .16) 1px, transparent 1px) !important;
}

html.light-mode section#home a.border.text-white,
html.light-mode body>section.dot-grid a.text-white.border {
  color: var(--ink) !important;
  background: #fff !important;
  border-color: var(--gold-soft) !important;
  box-shadow: var(--shadow-sm);
}

html.light-mode section#home a.border.text-white:hover {
  border-color: #29ABE2 !important;
}

html.light-mode section#home a.border.text-white i.text-emerald-400,
html.light-mode body>section.dot-grid a.text-white.border i.text-emerald-400 {
  color: #059669 !important;
}

/* Gradient text */
html.light-mode .text-shimmer {
  background-image: linear-gradient(90deg, #0f6a93 0%, #29ABE2 40%, #0f6a93 60%, #1487b8 100%) !important;
}

html.light-mode .text-gold-shimmer {
  background-image: linear-gradient(90deg, #9a6f1c 0%, #d9a93f 45%, #9a6f1c 60%, #c28f2c 100%) !important;
}

html.light-mode .bg-clip-text.text-transparent {
  --tw-gradient-from: #0f6a93 !important;
  --tw-gradient-via: #29ABE2 !important;
  --tw-gradient-to: #0a4d6e !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

/* ---------- Badges ---------- */
html.light-mode .section-badge {
  background: linear-gradient(135deg, rgba(41, 171, 226, .10), rgba(184, 137, 43, .08)) !important;
  border: 1px solid var(--gold-soft) !important;
  color: var(--brand-ink) !important;
}

html.light-mode body>section .inline-flex.rounded-full.border.backdrop-blur-md {
  background: #fff !important;
  color: var(--brand-ink) !important;
  border-color: var(--gold-soft) !important;
}

html.light-mode [class*="bg-brand-400/15"],
html.light-mode [class*="bg-brand-400/10"] {
  background-color: rgba(41, 171, 226, .10) !important;
}

html.light-mode .bg-emerald-500\/20 {
  background: rgba(16, 185, 129, .12) !important;
}

html.light-mode .text-emerald-300 {
  color: #047857 !important;
}

html.light-mode .text-emerald-400 {
  color: #059669 !important;
}

/* ---------- Cards ---------- */
html.light-mode .luxury-card,
html.light-mode .store-card,
html.light-mode .cat-showcase-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
}

html.light-mode .luxury-card::before,
html.light-mode .store-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

html.light-mode .luxury-card:hover,
html.light-mode .store-card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(41, 171, 226, .45) !important;
}

html.light-mode .cat-showcase-card:hover,
html.light-mode .cat-showcase-card.active {
  background: linear-gradient(145deg, #ffffff, #eaf5fc) !important;
  border-color: #29ABE2 !important;
  box-shadow: 0 12px 28px -6px rgba(41, 171, 226, .28) !important;
}

html.light-mode .luxury-card h3,
html.light-mode .luxury-card h4,
html.light-mode .store-card h3,
html.light-mode .store-card h4 {
  color: var(--ink) !important;
}

html.light-mode .luxury-card p,
html.light-mode .store-card p {
  color: var(--muted) !important;
}

html.light-mode .luxury-card ul li {
  color: #475569 !important;
}

html.light-mode .luxury-card .text-white,
html.light-mode .store-card .text-white,
html.light-mode .cat-showcase-card .text-white {
  color: var(--ink) !important;
}

html.light-mode .luxury-card button .text-white,
html.light-mode .store-card button .text-white {
  color: #fff !important;
}

html.light-mode .luxury-card [class*="border-t"] {
  border-color: var(--line) !important;
}

html.light-mode .luxury-card .blur-2xl {
  opacity: .5;
}

/* Dynamic category palette on white */
html.light-mode .luxury-card .text-cyan-300 {
  color: #0e7490 !important;
}

html.light-mode .luxury-card .text-blue-300 {
  color: #1d4ed8 !important;
}

html.light-mode .luxury-card .text-emerald-300 {
  color: #047857 !important;
}

html.light-mode .luxury-card .text-amber-300 {
  color: #b45309 !important;
}

html.light-mode .luxury-card .text-purple-300 {
  color: #7e22ce !important;
}

html.light-mode .luxury-card .text-pink-300 {
  color: #be185d !important;
}

html.light-mode .luxury-card a.text-cyan-400 {
  color: #0e7490 !important;
}

html.light-mode .luxury-card a.text-blue-400 {
  color: #1d4ed8 !important;
}

html.light-mode .luxury-card a.text-emerald-400 {
  color: #047857 !important;
}

html.light-mode .luxury-card a.text-amber-400 {
  color: #b45309 !important;
}

html.light-mode .luxury-card a.text-purple-400 {
  color: #7e22ce !important;
}

html.light-mode .luxury-card a.text-pink-400 {
  color: #be185d !important;
}

html.light-mode .group:hover .group-hover\:text-cyan-300 {
  color: #0e7490 !important;
}

html.light-mode .group:hover .group-hover\:text-blue-300 {
  color: #1d4ed8 !important;
}

html.light-mode .group:hover .group-hover\:text-emerald-300 {
  color: #047857 !important;
}

html.light-mode .group:hover .group-hover\:text-amber-300 {
  color: #b45309 !important;
}

html.light-mode .group:hover .group-hover\:text-purple-300 {
  color: #7e22ce !important;
}

html.light-mode .group:hover .group-hover\:text-pink-300 {
  color: #be185d !important;
}

html.light-mode .luxury-card .bg-cyan-500\/15 {
  background: rgba(14, 116, 144, .09) !important;
  border-color: rgba(14, 116, 144, .25) !important;
}

html.light-mode .luxury-card .bg-blue-500\/15 {
  background: rgba(29, 78, 216, .08) !important;
  border-color: rgba(29, 78, 216, .22) !important;
}

html.light-mode .luxury-card .bg-emerald-500\/15 {
  background: rgba(4, 120, 87, .09) !important;
  border-color: rgba(4, 120, 87, .25) !important;
}

html.light-mode .luxury-card .bg-amber-500\/15 {
  background: rgba(180, 83, 9, .09) !important;
  border-color: rgba(180, 83, 9, .25) !important;
}

html.light-mode .luxury-card .bg-purple-500\/15 {
  background: rgba(126, 34, 206, .08) !important;
  border-color: rgba(126, 34, 206, .22) !important;
}

html.light-mode .luxury-card .bg-pink-500\/15 {
  background: rgba(190, 24, 93, .08) !important;
  border-color: rgba(190, 24, 93, .22) !important;
}

/* ---------- Sections ---------- */
html.light-mode section#categories {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef5fb 100%) !important;
}

html.light-mode section#categories>.absolute {
  opacity: .45;
}

html.light-mode section#services {
  background: linear-gradient(160deg, #ffffff 0%, #f1f8fc 100%) !important;
}

html.light-mode section#about {
  background: linear-gradient(160deg, #ffffff 0%, #f4f9fd 60%, #ffffff 100%) !important;
  border-top: 1px solid var(--line) !important;
}

html.light-mode section#categories h2,
html.light-mode section#services h2,
html.light-mode section#about h2,
html.light-mode section#products h2,
html.light-mode section#contact h2 {
  color: var(--ink) !important;
}

html.light-mode section#categories p,
html.light-mode section#services p,
html.light-mode section#about p {
  color: var(--body) !important;
}

html.light-mode #about-hq-box {
  background: #ffffff !important;
}

html.light-mode #about-hq-box h4 {
  color: var(--ink) !important;
}

html.light-mode .luxury-divider {
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent) !important;
}

html.light-mode #trust-bar {
  background: linear-gradient(90deg, #ffffff 0%, #f3f8fc 50%, #ffffff 100%) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--gold-soft) !important;
}

/* ---------- Floating hero badges ---------- */
html.light-mode .float-anim,
html.light-mode .float-anim-slow {
  background: #ffffff !important;
  border: 1px solid var(--gold-soft) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ---------- Inputs ---------- */
html.light-mode input,
html.light-mode textarea,
html.light-mode select {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: #cfdbe8 !important;
}

html.light-mode input:focus,
html.light-mode textarea:focus,
html.light-mode select:focus {
  border-color: #29ABE2 !important;
  box-shadow: 0 0 0 4px rgba(41, 171, 226, .12) !important;
  outline: none;
}

/* ---------- Shop ---------- */
html.light-mode .store-card .aspect-\[4\/3\] {
  background: linear-gradient(180deg, #f6fafd, #e9f2f9) !important;
  border-color: var(--line) !important;
}

html.light-mode .store-card .quick-view-btn {
  background: rgba(255, 255, 255, .94) !important;
  color: #334155 !important;
  box-shadow: var(--shadow-sm);
}

html.light-mode .store-card .quick-view-btn:hover {
  background: #29ABE2 !important;
  color: #fff !important;
}

html.light-mode .bg-emerald-950\/60 {
  background: rgba(16, 185, 129, .10) !important;
  border-color: rgba(16, 185, 129, .35) !important;
}

html.light-mode .bg-emerald-950\/60:hover {
  background: #059669 !important;
  color: #fff !important;
}

html.light-mode .modal-backdrop {
  background: rgba(11, 27, 51, .45) !important;
  backdrop-filter: blur(8px);
}

html.light-mode #productModal>div,
html.light-mode #cartDrawer>div>div {
  background: #ffffff !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
}

html.light-mode #modalProductVisual {
  background: linear-gradient(180deg, #f6fafd, #e9f2f9) !important;
}

html.light-mode #cartItemsContainer>div {
  background: #f6fafd !important;
  border-color: var(--line) !important;
}

html.light-mode #cartItemsContainer .text-white {
  color: var(--ink) !important;
}

html.light-mode #closeModalBtn,
html.light-mode #closeCartBtn {
  color: #64748b !important;
}

html.light-mode #closeModalBtn:hover,
html.light-mode #closeCartBtn:hover {
  color: var(--ink) !important;
}

html.light-mode .fixed.bottom-5 {
  background: #0b1b33 !important;
  color: #fff !important;
  border-color: rgba(184, 137, 43, .5) !important;
}

html.light-mode .fixed.bottom-5 * {
  color: #fff !important;
}

/* ---------- Buttons keep white labels ---------- */
html.light-mode .btn-brand-primary,
html.light-mode .btn-brand-primary *,
html.light-mode .add-to-cart-btn,
html.light-mode .add-to-cart-btn *,
html.light-mode a.btn-glow,
html.light-mode a.btn-glow *,
html.light-mode button.btn-glow,
html.light-mode button.btn-glow *,
html.light-mode #header-call-btn,
html.light-mode #header-call-btn *,
html.light-mode #cartToggleBtn,
html.light-mode #cartToggleBtn *,
html.light-mode #header-cart-btn,
html.light-mode #header-cart-btn *,
html.light-mode #floatingCartBtn,
html.light-mode #floatingCartBtn *,
html.light-mode #cartCheckoutBtn,
html.light-mode #cartCheckoutBtn *,
html.light-mode #modalAddToCartBtn,
html.light-mode #modalAddToCartBtn *,
html.light-mode #modalDirectWaBtn,
html.light-mode #modalDirectWaBtn *,
html.light-mode .whatsapp-float,
html.light-mode .whatsapp-float * {
  color: #fff !important;
}

html.light-mode #cartCountBadge,
html.light-mode #headerCartBadge,
html.light-mode #floatingCartCount {
  color: #0b1b33 !important;
}

/* ---------- Footer: يفضل داكن فخم ---------- */
html.light-mode footer {
  background: linear-gradient(180deg, #0b1b33 0%, #060e1c 100%) !important;
  border-top: 1px solid var(--gold-soft) !important;
}

html.light-mode footer :is(h1, h2, h3, h4, h5, h6, p, span, div, strong, label, li, a).text-white {
  color: #fff !important;
}

html.light-mode footer .text-slate-200 {
  color: #e2e8f0 !important;
}

html.light-mode footer .text-slate-300 {
  color: #cbd5e1 !important;
}

html.light-mode footer .text-slate-400 {
  color: #94a3b8 !important;
}

html.light-mode footer .text-slate-500 {
  color: #64748b !important;
}

html.light-mode footer [class*="text-brand-300"] {
  color: #7dd3fc !important;
}

html.light-mode footer .text-brand-400 {
  color: #29ABE2 !important;
}

html.light-mode footer [class*="text-brand-200"] {
  color: #bae6fd !important;
}

html.light-mode footer .bg-slate-900 {
  background: #0f172a !important;
}

html.light-mode footer .border-slate-800,
html.light-mode footer .border-slate-700 {
  border-color: #1e293b !important;
}

html.light-mode footer [class*="bg-brand-400/15"] {
  background: rgba(41, 171, 226, .15) !important;
}

html.light-mode footer .hover\:text-white:hover {
  color: #fff !important;
}

html.light-mode footer .bg-\[\#0d1e38\],
html.light-mode footer .from-\[\#0d1e38\] {
  background-color: #0d1e38 !important;
}


/* =====================================================================
   SHOP — Guarantee card / Category cards / Product cards (polish pass)
   ===================================================================== */

/* ---------- "ضمان شركة الحلول" (hero side card) ---------- */
html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl {
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%) !important;
  border: 1px solid var(--gold-soft) !important;
  box-shadow: var(--shadow-lg) !important;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl>.border-b,
html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl .border-t {
  border-color: var(--line) !important;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl .grid>div {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl .grid>div:hover {
  border-color: rgba(41, 171, 226, .45) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl h3,
html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl h4 {
  color: var(--ink) !important;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl p {
  color: var(--muted) !important;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl .text-slate-300 {
  color: #475569 !important;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl .bg-emerald-500\/20 {
  background: rgba(16, 185, 129, .10) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, .30) !important;
}

html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl .w-10.h-10 {
  background: linear-gradient(135deg, #f1f9fe, #e1f1fa) !important;
  border: 1px solid rgba(41, 171, 226, .35) !important;
  color: #1487b8 !important;
}

/* ---------- Category cards (shop) ---------- */
html.light-mode .cat-showcase-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

html.light-mode .cat-showcase-card:hover {
  background: #ffffff !important;
  border-color: rgba(41, 171, 226, .55) !important;
  box-shadow: 0 14px 30px -8px rgba(41, 171, 226, .25), var(--shadow-sm) !important;
  transform: translateY(-3px);
}

html.light-mode .cat-showcase-card.active {
  background: linear-gradient(180deg, #ffffff 0%, #eaf5fc 100%) !important;
  border: 2px solid #29ABE2 !important;
  box-shadow: 0 0 0 4px rgba(41, 171, 226, .10), 0 16px 32px -10px rgba(41, 171, 226, .35) !important;
}

html.light-mode .cat-showcase-card>div:first-child {
  /* صندوق الأيقونة */
  background: linear-gradient(145deg, #f7fbff, #e3f1fa) !important;
  border: 1px solid rgba(41, 171, 226, .30) !important;
  color: #1487b8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(41, 171, 226, .10);
}

html.light-mode .cat-showcase-card.active>div:first-child {
  background: linear-gradient(145deg, #29ABE2, #1487b8) !important;
  border-color: #1487b8 !important;
  color: #fff !important;
}

html.light-mode .cat-showcase-card span.text-white,
html.light-mode .cat-showcase-card .font-black {
  color: var(--ink) !important;
}

html.light-mode .cat-showcase-card.active span.font-black {
  color: #0f6a93 !important;
}

html.light-mode .cat-showcase-card .text-brand-400 {
  color: #1487b8 !important;
}

html.light-mode .cat-showcase-card .text-slate-400 {
  color: var(--muted) !important;
}

/* ---------- Product cards (shop) ---------- */
html.light-mode .store-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm) !important;
}

html.light-mode .store-card::before {
  display: none;
}

html.light-mode .store-card:hover {
  border-color: rgba(41, 171, 226, .50) !important;
  box-shadow: 0 22px 48px -12px rgba(11, 27, 51, .18), 0 0 0 1px rgba(41, 171, 226, .15) !important;
}

/* منطقة الصورة */
html.light-mode .store-card>div:first-child {
  background: linear-gradient(180deg, #fafdff 0%, #e8f1f8 100%) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* بادج الحالة (أعلى يمين) */
html.light-mode .store-card>div:first-child>span:first-child {
  background: rgba(255, 255, 255, .96) !important;
  color: #0f6a93 !important;
  border: 1px solid var(--gold-soft) !important;
  box-shadow: var(--shadow-sm);
}

/* عدّاد الصور */
html.light-mode .store-card .bg-black\/75 {
  background: rgba(255, 255, 255, .94) !important;
  color: #334155 !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}

html.light-mode .store-card .bg-black\/75 * {
  color: #334155 !important;
}

/* منطقة التفاصيل */
html.light-mode .store-card .to-\[\#040912\]\/50 {
  --tw-gradient-from: rgba(255, 255, 255, 0) !important;
  --tw-gradient-to: rgba(240, 247, 252, .85) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html.light-mode .store-card .text-brand-400 {
  color: #1487b8 !important;
  letter-spacing: .02em;
}

html.light-mode .store-card h3 {
  color: var(--ink) !important;
}

html.light-mode .store-card:hover h3,
html.light-mode .store-card .group-hover\:text-brand-300 {
  transition: color .25s ease;
}

html.light-mode .group:hover .group-hover\:text-brand-300 {
  color: #1487b8 !important;
}

html.light-mode .store-card p.text-slate-400 {
  color: #64748b !important;
}

/* التاجز */
html.light-mode .store-card span.rounded-md.border {
  background: #eef6fc !important;
  color: #0f6a93 !important;
  border-color: rgba(41, 171, 226, .28) !important;
}

/* فاصل الأزرار */
html.light-mode .store-card .border-t {
  border-color: var(--line) !important;
}

/* واتساب */
html.light-mode .store-card a[href*="wa.me"] {
  background: rgba(16, 185, 129, .10) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, .35) !important;
}

html.light-mode .store-card a[href*="wa.me"]:hover {
  background: #059669 !important;
  color: #fff !important;
}

html.light-mode .store-card a[href*="wa.me"]:hover i {
  color: #fff !important;
}

/* أضف للسلة */
html.light-mode .store-card .add-to-cart-btn {
  background: linear-gradient(135deg, #29ABE2 0%, #1487b8 100%) !important;
  border: 1px solid rgba(20, 135, 184, .6) !important;
  box-shadow: 0 6px 16px -4px rgba(41, 171, 226, .45) !important;
}

html.light-mode .store-card .add-to-cart-btn:hover {
  background: linear-gradient(135deg, #1d9bd0 0%, #0f6a93 100%) !important;
  box-shadow: 0 10px 22px -4px rgba(41, 171, 226, .55) !important;
}

html.light-mode .store-card .add-to-cart-btn i {
  color: #fde68a !important;
}


/* =====================================================================
   SHOP LAYOUT — sidebar (الأقسام) + search above grid
   ===================================================================== */
html.light-mode .shop-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f6fafd 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  position: relative;
}

@media (min-width: 1024px) {
  .shop-sidebar {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}

html.light-mode .shop-sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

html.light-mode .shop-sidebar h2 {
  color: var(--ink) !important;
}

html.light-mode #categoriesShowcaseGrid {
  scrollbar-width: thin;
}

html.light-mode #categoriesShowcaseGrid .cat-showcase-card {
  box-shadow: none !important;
  border-radius: 1rem;
  background: #ffffff !important;
}

html.light-mode #categoriesShowcaseGrid .cat-showcase-card:hover {
  transform: translateX(-3px);
  background: #f4faff !important;
  box-shadow: 0 8px 20px -8px rgba(41, 171, 226, .30) !important;
}

html.light-mode #categoriesShowcaseGrid .cat-showcase-card.active {
  transform: none;
  background: linear-gradient(90deg, #eaf5fc 0%, #ffffff 100%) !important;
  border: 1px solid #29ABE2 !important;
  box-shadow: inset -3px 0 0 #29ABE2, 0 8px 22px -10px rgba(41, 171, 226, .4) !important;
}

html.light-mode #categoriesShowcaseGrid .cat-showcase-card>div:first-child {
  box-shadow: none;
}

/* Search field */
html.light-mode #storeSearchInput {
  background: #ffffff !important;
  border: 1px solid rgba(15, 40, 80, .12) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
}

html.light-mode #storeSearchInput:hover {
  border-color: rgba(41, 171, 226, .45) !important;
}

html.light-mode #storeSearchInput:focus {
  border-color: #29ABE2 !important;
  box-shadow: 0 0 0 4px rgba(41, 171, 226, .12), var(--shadow-sm) !important;
}

html.light-mode #productsCountBadge {
  background: #eef6fc !important;
  color: #0f6a93 !important;
  border-color: rgba(41, 171, 226, .3) !important;
}

html.light-mode #storeEmptyState {
  background: #ffffff !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-md) !important;
}

/* =====================================================================
   PRODUCT DETAIL PAGE (product.html) - LUXURY LIGHT THEME PASS
   ===================================================================== */
html.light-mode #mainImageContainer {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.12) !important;
  box-shadow: 0 10px 30px rgba(11, 27, 51, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}

html.light-mode #mainImageContainer img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.04));
}

html.light-mode #prevImgBtn,
html.light-mode #nextImgBtn {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0b1b33 !important;
  border: 1px solid rgba(15, 40, 80, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html.light-mode #prevImgBtn:hover,
html.light-mode #nextImgBtn:hover {
  background: #29ABE2 !important;
  color: #ffffff !important;
  border-color: #29ABE2 !important;
}

html.light-mode .thumb-btn {
  background: #ffffff !important;
  border: 2px solid rgba(15, 40, 80, 0.1) !important;
}

html.light-mode .thumb-btn.active {
  border-color: #29ABE2 !important;
  box-shadow: 0 4px 12px rgba(41, 171, 226, 0.25) !important;
}

html.light-mode .thumb-btn:hover:not(.active) {
  border-color: rgba(41, 171, 226, 0.5) !important;
}

html.light-mode .sticky-info-card #productName {
  color: #0b1b33 !important;
}

html.light-mode .sticky-info-card .bg-gradient-to-r.from-\[\#0a1b33\].to-\[\#0d1e38\] {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7fd 100%) !important;
  border-color: rgba(41, 171, 226, 0.3) !important;
  box-shadow: 0 4px 20px rgba(11, 27, 51, 0.04) !important;
}

html.light-mode #productPrice {
  color: #0f6a93 !important;
}

html.light-mode #productTags span {
  background: #eaf4fb !important;
  color: #0f6a93 !important;
  border-color: rgba(41, 171, 226, 0.3) !important;
}

html.light-mode .qty-counter {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.15) !important;
  box-shadow: 0 2px 8px rgba(11, 27, 51, 0.04) !important;
}

html.light-mode .qty-counter button {
  color: #0b1b33 !important;
}

html.light-mode .qty-counter button:hover {
  background: #eaf4fb !important;
  color: #0f6a93 !important;
}

html.light-mode #qtyDisplay {
  color: #0b1b33 !important;
  border-color: rgba(15, 40, 80, 0.12) !important;
}

html.light-mode .sticky-info-card .grid-cols-3 > div {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.1) !important;
  box-shadow: 0 2px 8px rgba(11, 27, 51, 0.03) !important;
}

html.light-mode .sticky-info-card .grid-cols-3 > div span {
  color: #475569 !important;
}

html.light-mode .tab-btn {
  color: #64748b !important;
}

html.light-mode .tab-btn.active {
  color: #0f6a93 !important;
  border-bottom-color: #29ABE2 !important;
}

html.light-mode .tab-content > div {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.1) !important;
  box-shadow: 0 4px 20px rgba(11, 27, 51, 0.04) !important;
}

html.light-mode .tab-content #specsGrid > div {
  background: #f8fafc !important;
  border-color: rgba(15, 40, 80, 0.08) !important;
}

html.light-mode .related-card {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.1) !important;
  box-shadow: 0 4px 16px rgba(11, 27, 51, 0.04) !important;
}

html.light-mode .related-card:hover {
  border-color: #29ABE2 !important;
  box-shadow: 0 10px 25px rgba(11, 27, 51, 0.1) !important;
}

html.light-mode .related-card > div:first-child {
  background: #f8fafc !important;
}

html.light-mode .related-card h3 {
  color: #0b1b33 !important;
}

html.light-mode #stickyBottomBar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 40, 80, 0.12) !important;
  box-shadow: 0 -4px 20px rgba(11, 27, 51, 0.08) !important;
}

html.light-mode #stickyBottomBar #stickyPrice {
  color: #0b1b33 !important;
}

html.light-mode #cartDrawer > div:nth-child(2) {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.12) !important;
}

html.light-mode #cartDrawer .bg-\[\#0a1628\] {
  background: #ffffff !important;
}

html.light-mode #cartDrawer .bg-\[\#060e1c\] {
  background: #f8fafc !important;
}

html.light-mode #cartDrawer #cartTotal {
  color: #0b1b33 !important;
}

html.light-mode #orderModal .bg-\[\#0a1628\] {
  background: #ffffff !important;
  border-color: rgba(15, 40, 80, 0.12) !important;
  box-shadow: 0 25px 60px rgba(11, 27, 51, 0.2) !important;
}

html.light-mode #orderModal input,
html.light-mode #orderModal textarea {
  background: #f8fafc !important;
  color: #0b1b33 !important;
  border-color: #cbd5e1 !important;
}

html.light-mode #orderModal input:focus,
html.light-mode #orderModal textarea:focus {
  background: #ffffff !important;
  border-color: #29ABE2 !important;
  box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.15) !important;
}

html.light-mode #orderModal .bg-\[\#060e1c\] {
  background: #f8fafc !important;
  border-color: rgba(15, 40, 80, 0.08) !important;
}

html.light-mode #orderModal .step-num {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

html.light-mode #orderModal .step-item.active .step-num {
  background: #29ABE2 !important;
  color: #ffffff !important;
  border-color: #29ABE2 !important;
}

html.light-mode #orderModal .step-item.done .step-num {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

html.light-mode .skeleton {
  background: linear-gradient(to right, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%) !important;
  background-size: 800px 104px !important;
}


/* =====================================================================
   MOBILE FIXES
   ===================================================================== */
html.light-mode,
html.light-mode body {
  overflow-x: clip;
}

html {
  scroll-padding-top: 5.5rem;
}

/* زر المعاينة السريعة: على اللمس مفيش hover، فنظهره دايماً */
@media (hover: none) {
  .store-card .quick-view-btn {
    opacity: 1 !important;
  }

  html.light-mode .luxury-card:hover,
  html.light-mode .store-card:hover,
  html.light-mode .cat-showcase-card:hover {
    transform: none;
  }
}

@media (max-width: 639px) {

  /* Toast ما يطلعش برا الشاشة */
  html.light-mode .fixed.bottom-5 {
    max-width: calc(100vw - 1.5rem);
    width: max-content;
  }

  /* سلة الطلب: تتمرر لو الشاشة قصيرة */
  html.light-mode #cartDrawer>div>div {
    overflow-y: auto;
  }

  #cartItemsContainer {
    max-height: 45vh !important;
  }

  /* مودال المنتج */
  #productModal {
    padding: .75rem !important;
    align-items: flex-end !important;
  }

  #productModal>div {
    padding: 1.25rem !important;
    border-radius: 1.5rem !important;
  }

  /* الشارات والعناوين في كارت الضمان */
  html.light-mode body>section.dot-grid .rounded-3xl.backdrop-blur-xl {
    padding: 1.1rem !important;
  }

  /* الأقسام الأفقية: مساحة سحب واضحة */
  #categoriesShowcaseGrid {
    margin-inline: -.25rem;
    padding-inline: .25rem;
    scroll-snap-type: x proximity;
  }

  .shop-sidebar {
    padding: .9rem !important;
    border-radius: 1.25rem;
  }

  /* هيرو المتجر والرئيسية */
  body>section.dot-grid h1 {
    font-size: 1.9rem !important;
    line-height: 1.25 !important;
  }
}