/* Tajawal — Google Fonts (Arabic + Latin) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ==========================================================================
   Mr WallStreet - Salla Custom CSS
   Theme: ANGEL by AfterAds
   Color System: Financial Trading Theme (Navy Dark / Clean Light)
   ========================================================================== */


/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
  /* --- Brand (ثابتة في الثيمين) --- */
  --primary: #ec2224;
  --primary-hover: #d41e20;
  --primary-light: #f25254;
  --primary-dark: #bc0000;
  --secondary: #f9ed38;
  --secondary-hover: #e0d420;
  --secondary-light: #fbf16a;

  /* --- سوق (ثابتة) --- */
  --bull: #16c784;
  --bull-hover: #0ea76d;
  --bear: #ec2224;
  --bear-hover: #d41e20;
  --neutral: #8a96aa;

  /* --- حالة (ثابتة) --- */
  --warning: #f07632;
  --info: #3b82f6;
  --success: #16c784;

  /* --- خلفيات (لايت) --- */
  --bg-body: #f4f4f4;
  --bg-primary: #ffffff;
  --bg-secondary: #ebebeb;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --bg-elevated: #f0f0f0;
  --bg-input: #f8f8f8;
  --bg-sidebar: #fdfdfd;

  /* --- نصوص (لايت) --- */
  --text-primary: #010e21;
  --text-secondary: #2a3448;
  --text-muted: #556677;
  --text-disabled: #7a889e;

  /* --- حدود (لايت) --- */
  --border: #d6d6d6;
  --border-light: #ebebeb;

  /* --- ظلال (لايت) --- */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.12);

  /* --- صور --- */
  --img-brightness: 1;
  --img-brightness-hover: 1;

  /* --- overlay --- */
  --overlay: rgba(0, 0, 0, 0.4);

  /* --- Salla vars --- */
  --bg-color: #f4f4f4;
  --header-bg: #ffffff;
  --menu-bg: #ffffff;
  --footer-bg: #f4f4f4;
  --color-primary: #010e21;

  /* --- Typography --- */
  --font-primary: 'Tajawal', sans-serif;
}

html.dark {
  /* --- خلفيات (دارك) --- */
  --bg-body: #010e21;
  --bg-primary: #030f24;
  --bg-secondary: #061628;
  --bg-card: #091b30;
  --bg-card-hover: #0d2038;
  --bg-elevated: #112544;
  --bg-input: #0b1d34;
  --bg-sidebar: #020d1e;

  /* --- نصوص (دارك) --- */
  --text-primary: #ffffff;
  --text-secondary: #c6d2e2;
  --text-muted: #8a96aa;
  --text-disabled: #576172;

  /* --- حدود (دارك) --- */
  --border: #1c2e48;
  --border-light: #1a2d4a;

  /* --- ظلال (دارك) --- */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.5);

  /* --- صور --- */
  --img-brightness: 0.92;
  --img-brightness-hover: 1;

  /* --- overlay --- */
  --overlay: rgba(1, 14, 33, 0.8);

  /* --- Salla vars --- */
  --bg-color: #010e21 !important;
  --header-bg: #030f24 !important;
  --menu-bg: #020d1e !important;
  --footer-bg: #010e21 !important;
  --color-primary: #ffffff !important;
  --color-primary-light: #c6d2e2 !important;
  --color-primary-reverse: #091b30 !important;
  --dark-bg-main: #010e21 !important;
  --dark-text-main: #ffffff !important;
  --dark-text-sec: #c6d2e2 !important;
  --dark-grey: #091b30 !important;
}


/* ==========================================================================
   2. BODY & PAGE
   ========================================================================== */

/* Force Tajawal font — override PingARLT from ANGEL theme */
/* EXCLUDE: i[class*="sicon"] (icon font needs sallaicons) */
:root {
  --font-main: 'Tajawal', sans-serif !important;
  --font-secondary: 'Tajawal', sans-serif !important;
}
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, div, section, footer, header, nav, article,
label, input, button, textarea, select,
strong, .font-primary, .da-tm, .da-ts, .da-fm,
.btn, .s-button-text, .tab-trigger, .font-regular {
  font-family: 'Tajawal', sans-serif !important;
}
/* Protect icon fonts */
i[class*="sicon"],
i[class*="icon"],
.sicon-sar,
[class*="sicon-"] {
  font-family: 'sallaicons' !important;
}

body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

.app-inner { background-color: var(--bg-body) !important; }


/* ==========================================================================
   3. MODE TOGGLER
   ========================================================================== */

.mode.light-mode { display: block !important; }
.mode.dark-mode { display: none !important; }
html.dark .mode.light-mode { display: none !important; }
html.dark .mode.dark-mode { display: block !important; }

.mode-toggler {
  color: var(--text-primary) !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}
.mode-toggler:hover { transform: scale(1.1) !important; }

.store-header .mode-toggler svg { stroke: currentColor !important; fill: none !important; width: 22px !important; height: 22px !important; }
.store-header .mode-toggler svg circle,
.store-header .mode-toggler svg line,
.store-header .mode-toggler svg path { stroke: currentColor !important; fill: none !important; }


/* ==========================================================================
   4. HEADER & NAVIGATION

   الهيدر عنده class="store-header dark" ثابت
   نستخدم html.dark للدارك مود الفعلي
   ========================================================================== */

.store-header { z-index: 100 !important; }

/* Nav Container */
#mainnav.main-nav-container { transition: box-shadow 0.4s ease, background-color 0.3s ease, backdrop-filter 0.3s ease !important; }

/* لايت */
.store-header #mainnav.main-nav-container { box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important; background-color: #ffffff !important; }
.store-header.fixed-pinned #mainnav.main-nav-container {
  box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  background-color: rgba(255,255,255,0.95) !important;
}
.store-header .header-inner.inner { background-color: #ffffff !important; border-bottom: 1px solid #ebebeb !important; transition: background-color 0.3s ease !important; }

/* دارك */
html.dark .store-header #mainnav.main-nav-container { background-color: #030f24 !important; box-shadow: 0 1px 6px rgba(0,0,0,0.3) !important; }
html.dark .store-header.fixed-pinned #mainnav.main-nav-container {
  box-shadow: 0 2px 20px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  background-color: rgba(3,15,36,0.95) !important;
}
html.dark .store-header .header-inner.inner { background-color: #030f24 !important; border-bottom-color: #1c2e48 !important; }

/* Override .dark على الهيدر */
.store-header .da-tm, .store-header .da-ts, .store-header .da-fm,
.store-header .text-primary, .store-header .text-black,
.store-header i[class*="sicon-"], .store-header .header-btn,
.store-header .header-btn i, .store-header .header-btn svg { color: #010e21 !important; }
.store-header svg:not(.mode) path { fill: #010e21 !important; }

html.dark .store-header .da-tm, html.dark .store-header .da-ts, html.dark .store-header .da-fm,
html.dark .store-header .text-primary, html.dark .store-header .text-black,
html.dark .store-header i[class*="sicon-"], html.dark .store-header .header-btn,
html.dark .store-header .header-btn i, html.dark .store-header .header-btn svg { color: #ffffff !important; }
html.dark .store-header svg:not(.mode) path { fill: #ffffff !important; }

/* Header Buttons */
.store-header .header-btn { transition: opacity 0.3s ease, transform 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; padding: 0.4rem !important; }
.store-header .header-btn:hover { opacity: 0.7 !important; transform: scale(1.05) !important; }
.store-header .header-btn:active { transform: scale(0.97) !important; }

/* Search */
.store-header .search-btn.header-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; }
.store-header .search-btn.header-btn:hover { transform: scale(1.08) !important; opacity: 1 !important; background-color: #f0f0f0 !important; }
html.dark .store-header .search-btn.header-btn:hover { background-color: rgba(255,255,255,0.08) !important; }

/* Menu */
.store-header .mburger { text-decoration: none !important; }
.store-header .mburger .sicon-menu { color: #010e21 !important; }
.store-header .mburger p { color: #010e21 !important; font-weight: 600 !important; }
html.dark .store-header .mburger .sicon-menu { color: #ffffff !important; }
html.dark .store-header .mburger p { color: #ffffff !important; }

/* Logo */
.navbar-brand { transition: opacity 0.3s ease, transform 0.3s ease !important; }
.navbar-brand:hover { opacity: 0.85 !important; transform: scale(1.02) !important; }
.store-header .navbar-brand .logo-light { display: block !important; }
.store-header .navbar-brand .logo-dark { display: none !important; }
html.dark .store-header .navbar-brand .logo-light { display: none !important; }
html.dark .store-header .navbar-brand .logo-dark { display: block !important; }

/* Currency */
.store-header .currency.btn, .store-header .currency-btn, .store-header .currency-btn span { color: #010e21 !important; }
html.dark .store-header .currency.btn, html.dark .store-header .currency-btn, html.dark .store-header .currency-btn span { color: #ffffff !important; }

/* User Menu */
.store-header salla-user-menu .s-user-menu-trigger-hello { color: #556677 !important; font-size: 0.7rem !important; }
.store-header salla-user-menu .s-user-menu-trigger-name { color: #010e21 !important; font-weight: 600 !important; font-size: 0.85rem !important; }
.store-header salla-user-menu .s-user-menu-trigger-icon svg path { fill: #556677 !important; }
html.dark .store-header salla-user-menu .s-user-menu-trigger-hello { color: #8a96aa !important; }
html.dark .store-header salla-user-menu .s-user-menu-trigger-name { color: #ffffff !important; }
html.dark .store-header salla-user-menu .s-user-menu-trigger-icon svg path { fill: #8a96aa !important; }
.store-header salla-user-menu .s-user-menu-trigger-avatar { border-radius: 50% !important; border: 2px solid #d6d6d6 !important; transition: border-color 0.3s ease !important; }
html.dark .store-header salla-user-menu .s-user-menu-trigger-avatar { border-color: #1c2e48 !important; }
.store-header salla-user-menu .s-user-menu-trigger:hover .s-user-menu-trigger-avatar { border-color: #ec2224 !important; }

/* User Dropdown */
salla-user-menu .s-user-menu-dropdown { background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; }
salla-user-menu .s-user-menu-dropdown-header { background-color: var(--bg-elevated) !important; border-bottom: 1px solid var(--border) !important; }
salla-user-menu .s-user-menu-dropdown-header span { color: var(--text-muted) !important; }
salla-user-menu .s-user-menu-dropdown-header p { color: var(--text-primary) !important; font-weight: 600 !important; }
salla-user-menu .s-user-menu-dropdown-item-link { color: var(--text-secondary) !important; transition: all 0.2s ease !important; border-radius: 6px !important; }
salla-user-menu .s-user-menu-dropdown-item-link:hover { color: var(--text-primary) !important; background-color: var(--bg-elevated) !important; }
salla-user-menu .s-user-menu-dropdown-item-prefix svg path { fill: var(--text-muted) !important; transition: fill 0.2s ease !important; }
salla-user-menu .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg path { fill: var(--primary) !important; }
salla-user-menu .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover { color: var(--bear) !important; }
salla-user-menu .s-user-menu-dropdown-item-logout:hover .s-user-menu-dropdown-item-prefix svg path { fill: var(--bear) !important; }

/* Cart */
.store-header salla-cart-summary .header-btn, .store-header salla-cart-summary .header-btn i { color: #010e21 !important; }
.store-header salla-cart-summary .s-cart-summary-count { color: #ffffff !important; background-color: #ec2224 !important; }
.store-header salla-cart-summary .s-cart-summary-icon svg path { fill: #010e21 !important; }
html.dark .store-header salla-cart-summary .header-btn, html.dark .store-header salla-cart-summary .header-btn i { color: #ffffff !important; }
html.dark .store-header salla-cart-summary .s-cart-summary-icon svg path { fill: #ffffff !important; }

/* Ad Banner — HIDDEN (replaced by Elfsight Popup) */
.angel-ad { display: none !important; }

/* Search Modal */
.angel-search-modal .angelmodal__container_search { border-radius: 16px !important; background-color: var(--bg-card) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--border) !important; }
.angelmodal__close { color: var(--text-primary) !important; }

/* Slider Arrows */
.s-slider-nav-arrow { color: var(--text-primary) !important; transition: opacity 0.3s ease, transform 0.2s ease !important; }
.s-slider-nav-arrow:hover:not([disabled]) { opacity: 0.65 !important; transform: scale(1.08) !important; }
.s-slider-nav-arrow[disabled] { opacity: 0.2 !important; }


/* ==========================================================================
   4.17 TICKER TAPE
   ========================================================================== */

section.s-block.s-block--bundle-html-content { padding: 0 !important; margin: 0 !important; position: relative !important; z-index: 98 !important; overflow: hidden !important; border: none !important; background-color: #131722 !important; line-height: 0 !important; scrollbar-width: none !important; height: 78px !important; max-height: 78px !important; }
section.s-block.s-block--bundle-html-content::-webkit-scrollbar { display: none !important; }
section.s-block.s-block--bundle-html-content > *, section.s-block.s-block--bundle-html-content .s-block-html-content { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; overflow: hidden !important; scrollbar-width: none !important; }
section.s-block.s-block--bundle-html-content > *::-webkit-scrollbar, section.s-block.s-block--bundle-html-content .s-block-html-content::-webkit-scrollbar { display: none !important; }
section.s-block.s-block--bundle-html-content iframe { display: block !important; width: 100% !important; height: 78px !important; border: none !important; margin: 0 !important; padding: 0 !important; scrollbar-width: none !important; overflow: hidden !important; }
section.s-block.s-block--bundle-html-content iframe::-webkit-scrollbar { display: none !important; }
@media (max-width: 768px) { section.s-block.s-block--bundle-html-content iframe { height: 66px !important; } }


/* ==========================================================================
   5. PRODUCT CARDS
   ========================================================================== */

.s-product-card-entry {
  background-color: var(--bg-card) !important;
  border-color: var(--border-light) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
}
.s-product-card-entry:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; border-color: var(--border) !important; }
.s-product-card-content { color: var(--text-primary) !important; }
.s-product-card-content-title a { color: var(--text-primary) !important; }
.s-product-card-content-title a:hover { color: var(--text-secondary) !important; }
.s-product-card-price { color: var(--text-primary) !important; }
.s-product-card-content-footer { border-color: var(--border-light) !important; }
.s-product-card-category, .s-product-card-brand { color: var(--text-muted) !important; }

.s-product-card-promotion-title { letter-spacing: 0.02em !important; background-color: var(--primary) !important; color: #ffffff !important; }

.s-product-card-image img { transition: transform 0.4s ease, filter 0.3s ease !important; filter: brightness(var(--img-brightness)) !important; }
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.03) !important; filter: brightness(var(--img-brightness-hover)) !important; }

html.dark .s-product-card-out-of-stock .s-product-card-image::after { background-color: rgba(1,14,33,0.6) !important; }
.s-product-card-wishlist-btn button, .angel-quick-view-button { color: var(--text-primary) !important; }
html.dark .s-rating-stars-wrapper .s-rating-stars-selected svg { fill: var(--secondary) !important; }


/* ==========================================================================
   6. SPECIAL PRODUCT SECTION
   ========================================================================== */

section.s-block.s-block--special-product { padding: 3.5rem 0 !important; background-color: var(--bg-body) !important; }
@media (max-width: 768px) { section.s-block.s-block--special-product { padding: 2rem 0 !important; } }

/* .container.dark — لا نتدخل، ANGEL theme يطبّق color:#ffffff تلقائياً على da-tm
   لأنه يرى .dark على .container → نص أبيض على خلفية داكنة في اللايت والدارك */

/* Card */
.s-block--special-product .bg-white.da-bgg, .s-block--special-product .bg-white { background-color: var(--bg-card) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--border-light) !important; border-radius: 12px !important; overflow: hidden !important; }
.s-block--special-product .bg-white:hover { box-shadow: var(--shadow-hover) !important; }

/* Image */
.s-block--special-product .p_image { overflow: hidden !important; }
.s-block--special-product .p_image img { transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.3s ease !important; filter: brightness(var(--img-brightness)) !important; object-fit: cover !important; }
.s-block--special-product .p_image:hover img { transform: scale(1.05) !important; filter: brightness(var(--img-brightness-hover)) !important; }

/* Title */
.s-block--special-product h2 { font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; }
.s-block--special-product h2 { color: #010e21 !important; }
html.dark .s-block--special-product h2 { color: #ffffff !important; }

/* Subtitle */
.s-block--special-product p.da-tm { color: #2a3448 !important; line-height: 1.7 !important; }
html.dark .s-block--special-product p.da-tm { color: #c6d2e2 !important; }

/* Price */
.special-price { align-items: baseline !important; gap: 0.5rem !important; }
.special-price-current { font-weight: 800 !important; font-size: 1.35rem !important; color: var(--primary) !important; }
.special-price-instead { font-size: 0.85rem !important; color: var(--text-muted) !important; }
.special-price-before { color: var(--text-disabled) !important; text-decoration: line-through !important; }

/* Countdown */
.s-block--special-product .sale-end { color: var(--text-primary) !important; font-weight: 600 !important; }
.s-block--special-product .sale-end i { color: var(--primary) !important; }
.s-block--special-product .s-count-down-item { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; border-radius: 10px !important; min-width: 56px !important; }
.s-block--special-product .s-count-down-item-value { color: var(--text-primary) !important; font-weight: 800 !important; font-size: 1.2rem !important; }
.s-block--special-product .s-count-down-item-label { color: var(--text-muted) !important; font-size: 0.7rem !important; }
.s-block--special-product .s-count-down-end-text { color: var(--text-disabled) !important; }

/* Tabs */
.s-block--special-product .tabs__special { display: flex !important; gap: 0.5rem !important; }
.s-block--special-product .tabs__special .tab-trigger { display: flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; border-radius: 12px !important; cursor: pointer !important; transition: all 0.3s ease !important; color: var(--text-muted) !important; background-color: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; }
.s-block--special-product .tabs__special .tab-trigger:hover { color: var(--text-primary) !important; border-color: var(--border) !important; }
.s-block--special-product .tabs__special .tab-trigger.is-active { color: #ffffff !important; background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(236,34,36,0.3) !important; transform: scale(1.05) !important; }

/* Tab Content */
.s-block--special-product .tabs-wrapper__special .tabs__item h4 { font-weight: 700 !important; color: var(--text-primary) !important; }
.s-block--special-product .tabs-wrapper__special .tabs__item p { color: var(--text-secondary) !important; line-height: 1.75 !important; }

/* Tab content — dark card within white card (light mode identity)
   specificity (0,4,2) beats existing (0,3,1) — white text on intentional dark bg */
body.color-mode-light .s-block--special-product .tabs-wrapper__special .tabs__item {
  background-color: #0d1a2d !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.color-mode-light .s-block--special-product .tabs-wrapper__special .tabs__item h4,
body.color-mode-light .s-block--special-product .tabs-wrapper__special .tabs__item h4.da-tm {
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 0.4rem !important;
}
body.color-mode-light .s-block--special-product .tabs-wrapper__special .tabs__item p,
body.color-mode-light .s-block--special-product .tabs-wrapper__special .tabs__item p.da-tm {
  color: rgba(255,255,255,0.82) !important;
  line-height: 1.75 !important;
  font-size: 0.91rem !important;
}

/* Buttons */
.s-block--special-product .special-products-btn { display: flex !important; gap: 0.75rem !important; flex-wrap: wrap !important; }
.s-block--special-product .s-button-primary.s-button-solid { border-radius: 10px !important; font-weight: 600 !important; box-shadow: var(--shadow-sm) !important; transition: transform 0.2s ease, box-shadow 0.3s ease !important; }
.s-block--special-product .s-button-primary.s-button-solid:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
.s-block--special-product .btn--primary { border-radius: 10px !important; font-weight: 600 !important; transition: all 0.3s ease !important; }
.s-block--special-product .btn--primary { background-color: var(--primary) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(236,34,36,0.2) !important; }
.s-block--special-product .btn--primary:hover { background-color: var(--primary-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(236,34,36,0.3) !important; }
.s-block--special-product .btn--primary:hover i { transform: translateX(-3px) !important; }

@media (max-width: 768px) {
  .s-block--special-product .special-products-btn { flex-direction: column !important; }
  .s-block--special-product .btn--primary, .s-block--special-product .s-button-wide { width: 100% !important; justify-content: center !important; }
}



/* ==========================================================================
   7. STORE FEATURES
   ========================================================================== */

html.dark .s-block--bundle-store-features { --features-bg-color: #061628 !important; }
html.dark .s-block--bundle-store-features salla-store-features-uxcdq8 { --features-bg-color: #061628 !important; }
.s-block--bundle-store-features h4 { color: var(--text-primary) !important; }
.s-block--bundle-store-features p { color: var(--text-secondary) !important; }


/* ==========================================================================
   8. TESTIMONIALS
   ========================================================================== */

.s-block--testimonials .bg-white { background-color: var(--bg-card) !important; border: 1px solid var(--border-light) !important; transition: box-shadow 0.5s ease, border-color 0.3s ease !important; }
.s-block--testimonials .bg-white:hover { box-shadow: var(--shadow-md) !important; border-color: var(--border) !important; }
.s-block--testimonials p.da-tm { color: var(--text-secondary) !important; }
.s-block--testimonials h4.da-tm { color: var(--text-primary) !important; }
.testimonial__icon { color: var(--text-primary) !important; opacity: 0.06 !important; }
.testimonial__avatar { border: 2px solid var(--border) !important; }
.s-block--testimonials .swiper-scrollbar { background-color: var(--border-light) !important; }
.s-block--testimonials .swiper-scrollbar-drag { background-color: var(--border) !important; }
.s-slider-block__title h2 { color: var(--text-primary) !important; }
.s-block__title h2 { color: var(--text-primary) !important; }
.s-block__title p { color: var(--text-secondary) !important; }


/* ==========================================================================
   9. FAQ
   ========================================================================== */

.faqs-list__item { transition: border-color 0.3s ease, box-shadow 0.3s ease !important; background-color: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; }
.faqs-list__item:hover { border-color: var(--border) !important; box-shadow: var(--shadow-sm) !important; }
.s-block--faqs h2.da-cp { color: var(--text-primary) !important; }
.s-block--faqs p.da-ts { color: var(--text-secondary) !important; }
.faqs-list__item label { color: var(--text-primary) !important; }
.faq-item.open-badge { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
.dark .faq-item.open-badge { background-color: var(--bg-card-hover) !important; }
.faq-answer p { color: var(--text-secondary) !important; }
.faq-link.btn-primary { background-color: var(--primary) !important; color: #ffffff !important; }
.faq-link.btn-primary:hover { background-color: var(--primary-hover) !important; }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.store-footer__inner { background-color: var(--bg-body) !important; }
.footer-container.da-brdr { border-color: var(--border-light) !important; }
.store-footer .da-tm { color: var(--text-primary) !important; }
.footer-description, .footer-description p { color: var(--text-secondary) !important; }
.footer-list a.da-tm { color: var(--text-secondary) !important; transition: color 0.3s ease !important; }
.footer-list a.da-tm:hover { color: var(--text-primary) !important; }
.menu-list h3 { color: var(--text-primary) !important; }
.footer-newsletter strong.da-tm { color: var(--text-primary) !important; }
.footer-newsletter p.da-tm { color: var(--text-secondary) !important; }
.mail-input.form-input { background-color: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
.mail-input.form-input::placeholder { color: var(--text-muted) !important; }
.mail-input.form-input:focus { border-color: var(--primary) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(236,34,36,0.15) !important; }
.s-social-list .s-social-link a { color: var(--text-secondary) !important; transition: color 0.3s ease !important; }
.s-social-list .s-social-link a:hover { color: var(--primary) !important; }
.dark .footer-bottom ul li { background-color: var(--bg-card) !important; border: 1px solid var(--border-light) !important; }
.dark .sbc-certificate .sbc-link { background-color: var(--bg-card) !important; }
.sbc-certificate p { color: var(--text-secondary) !important; }
.copyrights, .copyrights p { color: var(--text-muted) !important; opacity: 1 !important; }
.copyrights a { color: var(--text-primary) !important; }
.copyrights a:hover { color: var(--primary) !important; }
.to-top a { color: var(--text-secondary) !important; transition: color 0.3s ease !important; }
.to-top a:hover { color: var(--primary) !important; }
.s-contacts-title { color: var(--text-primary) !important; }
.s-contacts-item { color: var(--text-secondary) !important; transition: color 0.3s ease !important; }
.s-contacts-item:hover { color: var(--primary) !important; }
.dark salla-trust-badges { color: var(--text-secondary) !important; }


/* ==========================================================================
   11. MOBILE MENU
   ========================================================================== */

.mobile-menu { background-color: var(--bg-primary) !important; }
.mm-ocd__content { background-color: var(--bg-primary) !important; }
.mm-spn--navbar { background-color: var(--bg-primary) !important; }
.dark .mm-spn--navbar::after { border-color: var(--border) !important; }
.mobile-menu .sidemenu-link { color: var(--text-secondary) !important; transition: color 0.3s ease !important; }
.mobile-menu .sidemenu-link:hover, .mobile-menu .sidemenu-link:active { color: var(--primary) !important; }
.mobile-menu .menu_title { color: var(--text-secondary) !important; }
.mobile-menu .sidemenu-link:hover .menu_title { color: var(--primary) !important; }
.mobile-menu .links > span { color: var(--text-primary) !important; }


/* ==========================================================================
   12. BUTTONS & INTERACTIONS
   ========================================================================== */

.btn--primary, .btn-primary { transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease !important; }
.btn--primary:hover, .btn-primary:hover { transform: translateY(-1px) !important; }
.btn--primary:active, .btn-primary:active { transform: translateY(0) !important; }
.btn--primary:focus-visible, .btn-primary:focus-visible, .s-button-element:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px !important; }
a { transition: color 0.2s ease !important; }
.s-button-light-outline { border-color: var(--border) !important; color: var(--text-primary) !important; }
.s-button-light-outline:hover { border-color: var(--primary) !important; }
a.hover\:text-primary:hover { color: var(--primary) !important; }


/* ==========================================================================
   13. FORM INPUTS & SEARCH
   ========================================================================== */

input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], textarea, select { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(236,34,36,0.12) !important; }
.s-search-input { background-color: var(--bg-input) !important; color: var(--text-primary) !important; }
.s-search-input::placeholder { color: var(--text-muted) !important; }
.s-search-input-wrapper { background-color: var(--bg-input) !important; border-color: var(--border) !important; }
.s-search-icon svg { fill: var(--text-secondary) !important; }
.s-search-results { background-color: var(--bg-card) !important; border-color: var(--border) !important; }
.s-search-no-results-placeholder { color: var(--text-muted) !important; }
.angel-search-modal .angelmodal__overlay { background-color: var(--overlay) !important; }
.angel-search-modal .angel-title h3 { color: var(--text-primary) !important; }


/* ==========================================================================
   14. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar { width: 8px !important; }
::-webkit-scrollbar-track { background: var(--bg-body) !important; }
::-webkit-scrollbar-thumb { background: var(--border) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--text-disabled) !important; }
* { scrollbar-color: var(--border) var(--bg-body) !important; }


/* ==========================================================================
   15. SELECTION & MISC
   ========================================================================== */

::selection { background-color: rgba(236,34,36,0.15) !important; color: inherit !important; }

.wa-angel { transition: transform 0.3s ease, box-shadow 0.3s ease !important; box-shadow: var(--shadow-md) !important; }
.wa-angel:hover { transform: scale(1.08) !important; box-shadow: var(--shadow-hover) !important; }

.swiper-scrollbar { background-color: var(--border-light) !important; }
.swiper-scrollbar-drag { background-color: var(--border) !important; }
.swiper-pagination-bullet { background-color: var(--text-disabled) !important; }
.swiper-pagination-bullet-active { background-color: var(--primary) !important; }

.shadow-default { box-shadow: var(--shadow-sm) !important; }
.hover\:shadow-default:hover { box-shadow: var(--shadow-md) !important; }

.da-ts { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.dark .text-black { color: var(--text-primary) !important; }


/* ==========================================================================
   16. MODALS & SALLA COMPONENTS
   ========================================================================== */

.angel-theme-modal .angelmodal__container { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
.angel-theme-modal .angelmodal__overlay { background-color: var(--overlay) !important; }
.dark salla-offer-modal { --offer-bg: var(--bg-card) !important; --offer-text: #ffffff !important; }
.dark salla-cookies-bar { --cookies-bg: var(--bg-card) !important; --cookies-text: #ffffff !important; }
.dark salla-login-modal { --login-bg: var(--bg-card) !important; --login-text: #ffffff !important; }
.dark salla-localization-modal { --localization-bg: var(--bg-card) !important; }
.dark .s-add-product-toast { background-color: var(--bg-card) !important; color: #ffffff !important; border: 1px solid var(--border) !important; }
.dark salla-skeleton { --skeleton-bg: var(--bg-card) !important; }

.s-block { transition: background-color 0.3s ease !important; }
.s-products-slider-wrapper, .s-products-list-wrapper { color: var(--text-primary) !important; }
.s-block--best-offers h2 { color: var(--text-primary) !important; }
img.lazy { transition: opacity 0.3s ease !important; }
img.lazy.loaded { opacity: 1 !important; }


/* ==========================================================================
   17. FEATURES LIST (Shadow DOM - CSS Variables only)
   ========================================================================== */

.s-block--bundle-features-list { padding: 3.5rem 0 !important; background-color: var(--bg-body) !important; }
@media (max-width: 768px) { .s-block--bundle-features-list { padding: 2.5rem 0 !important; } }
[class*="salla-features-list"] { color: var(--text-primary) !important; }


/* ==========================================================================
   18. BEST OFFERS SLIDER
   ========================================================================== */

/* --- Section --- */
#best-offers-4-slider {
  padding: 4rem 0 !important;
  background-color: var(--bg-body) !important;
}
@media (max-width: 768px) { #best-offers-4-slider { padding: 2.5rem 0 !important; } }

/* --- Title block --- */
#best-offers-4-slider .s-slider-block__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2rem !important;
  gap: 1rem !important;
}
#best-offers-4-slider .s-slider-block__title h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
@media (max-width: 768px) {
  #best-offers-4-slider .s-slider-block__title { flex-direction: column !important; align-items: flex-end !important; gap: 0.6rem !important; }
  #best-offers-4-slider .s-slider-block__title h2 { font-size: 1.1rem !important; }
}

/* --- Navigation arrows --- */
#best-offers-4-slider .s-slider-prev,
#best-offers-4-slider .s-slider-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-sm) !important;
}
#best-offers-4-slider .s-slider-prev:not(.swiper-button-disabled):hover,
#best-offers-4-slider .s-slider-next:not(.swiper-button-disabled):hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.35) !important;
}
#best-offers-4-slider .s-slider-prev svg path,
#best-offers-4-slider .s-slider-next svg path { fill: currentColor !important; }
#best-offers-4-slider .s-slider-prev.swiper-button-disabled,
#best-offers-4-slider .s-slider-next.swiper-button-disabled { opacity: 0.3 !important; cursor: not-allowed !important; }

/* --- Product card shell (overrides inline border-color:rgb(255,255,255)) --- */
#best-offers-4-slider custom-salla-product-card {
  border-color: var(--border-light) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 16px !important;
  background-color: var(--bg-card) !important;
  box-shadow: 0 4px 20px rgba(1,14,33,0.07) !important;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s ease, border-color 0.3s ease !important;
  overflow: hidden !important;
}
#best-offers-4-slider custom-salla-product-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 18px 44px rgba(236,34,36,0.13) !important;
  border-color: rgba(236,34,36,0.45) !important;
}

/* --- Image container: height explicit so h-full on <a> works --- */
#best-offers-4-slider .s-product-card-image {
  height: 260px !important;
  min-height: 260px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  flex-shrink: 0 !important;
}
#best-offers-4-slider .s-product-card-image a.angel-shine-obj {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
#best-offers-4-slider .s-product-card-image-contain {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(var(--img-brightness)) !important;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.3s ease !important;
}
#best-offers-4-slider custom-salla-product-card:hover .s-product-card-image-contain {
  transform: scale(1.07) !important;
  filter: brightness(var(--img-brightness-hover)) !important;
}
@media (max-width: 768px) {
  #best-offers-4-slider .s-product-card-image { height: 200px !important; min-height: 200px !important; }
}

/* --- Promotion badge (override inline background-color:#0d0d0d) --- */
#best-offers-4-slider .s-product-card-promotion-title {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.73rem !important;
  letter-spacing: 0.02em !important;
  border-radius: 0 0 8px 0 !important;
  padding: 0.3rem 0.8rem !important;
}

/* --- Rating badge --- */
#best-offers-4-slider .s-product-card-rating {
  background-color: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(6px) !important;
  border-radius: 20px !important;
  padding: 0.18rem 0.55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
}
#best-offers-4-slider .s-product-card-rating i { color: #f9ed38 !important; font-size: 0.78rem !important; }
#best-offers-4-slider .s-product-card-rating span { color: #ffffff !important; font-size: 0.76rem !important; font-weight: 700 !important; }

/* --- Action buttons (wishlist / quick view) --- */
#best-offers-4-slider .s-button-light-outline {
  background-color: rgba(255,255,255,0.9) !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}
html.dark #best-offers-4-slider .s-button-light-outline {
  background-color: rgba(9,27,48,0.85) !important;
  color: var(--text-muted) !important;
}
#best-offers-4-slider .s-button-light-outline:hover {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* --- Card content area --- */
#best-offers-4-slider .s-product-card-content {
  padding: 1rem 1.1rem 0.9rem !important;
  gap: 0.5rem !important;
}

/* --- Product title --- */
#best-offers-4-slider .s-product-card-content-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
}
#best-offers-4-slider .s-product-card-content-title a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
#best-offers-4-slider custom-salla-product-card:hover .s-product-card-content-title a { color: var(--primary) !important; }

/* --- Subtitle --- */
#best-offers-4-slider .s-product-card-content-subtitle {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  margin-top: -0.2rem !important;
}

/* --- Price --- */
#best-offers-4-slider .s-product-card-price {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em !important;
}
#best-offers-4-slider .s-product-card-price i { font-size: 0.85rem !important; font-weight: 600 !important; }

/* --- Add to cart button --- */
#best-offers-4-slider .s-button-primary-outline {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  font-size: 0.88rem !important;
}
#best-offers-4-slider .s-button-primary-outline:hover {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.28) !important;
  transform: translateY(-1px) !important;
}

/* --- Out of stock button --- */
#best-offers-4-slider .s-button-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  border-radius: 10px !important;
}

/* --- Footer area inside card --- */
#best-offers-4-slider .s-product-card-content-footer {
  padding-top: 0.5rem !important;
}


/* ==========================================================================
   19. TESTIMONIALS (آراء العملاء) + TRUST TESTIMONIALS (كلمة المؤسس)
   ========================================================================== */

/* ── A) آراء العملاء Slider ── */
section.s-block--testimonials {
  padding: 4.5rem 0 !important;
  background-color: var(--bg-primary) !important;
}
@media (max-width: 768px) { section.s-block--testimonials { padding: 2.5rem 0 !important; } }

/* Title block */
section.s-block--testimonials .s-slider-block__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2.5rem !important;
  gap: 1rem !important;
}
section.s-block--testimonials .s-slider-block__title h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Nav arrows */
section.s-block--testimonials .s-slider-prev,
section.s-block--testimonials .s-slider-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
}
section.s-block--testimonials .s-slider-prev:not(.swiper-button-disabled):hover,
section.s-block--testimonials .s-slider-next:not(.swiper-button-disabled):hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.35) !important;
}
section.s-block--testimonials .s-slider-prev svg path,
section.s-block--testimonials .s-slider-next svg path { fill: currentColor !important; }
section.s-block--testimonials .s-slider-prev.swiper-button-disabled,
section.s-block--testimonials .s-slider-next.swiper-button-disabled { opacity: 0.3 !important; cursor: not-allowed !important; }

/* Scrollbar */
section.s-block--testimonials .swiper-scrollbar {
  background-color: var(--border-light) !important;
  height: 3px !important;
  border-radius: 10px !important;
  margin-top: 1.5rem !important;
}
section.s-block--testimonials .swiper-scrollbar-drag {
  background-color: var(--primary) !important;
  border-radius: 10px !important;
  cursor: grab !important;
  transition: background-color 0.2s ease !important;
}
section.s-block--testimonials .swiper-scrollbar-drag:active { cursor: grabbing !important; }

/* Card */
section.s-block--testimonials .bg-white.da-bgg {
  background-color: var(--bg-card) !important;
  border-radius: 18px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 4px 18px rgba(1,14,33,0.07) !important;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s ease, border-color 0.3s ease !important;
}
section.s-block--testimonials .bg-white.da-bgg:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 36px rgba(236,34,36,0.1) !important;
  border-color: rgba(236,34,36,0.3) !important;
}

/* Avatar */
section.s-block--testimonials .testimonial__avatar {
  border: 3px solid var(--primary) !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.25) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
section.s-block--testimonials .bg-white.da-bgg:hover .testimonial__avatar {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(236,34,36,0.35) !important;
}

/* Name */
section.s-block--testimonials h4.da-tm {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* Stars */
section.s-block--testimonials .s-rating-stars-selected { color: #f9ed38 !important; }
section.s-block--testimonials .s-rating-stars-selected svg { fill: #f9ed38 !important; }

/* Review text */
section.s-block--testimonials p.da-tm {
  color: var(--text-secondary) !important;
  line-height: 1.8 !important;
  font-size: 0.87rem !important;
}

/* Quote icon */
section.s-block--testimonials .testimonial__icon {
  color: var(--primary) !important;
  opacity: 0.12 !important;
  font-size: 4rem !important;
}

/* ── B) كلمة المؤسس (Trust Testimonials) — wrapper فقط, CSS داخلي عبر JS ── */
section.s-block--bundle-trust-testimonials {
  padding: 4rem 0 !important;
  background-color: var(--bg-primary) !important;
}


/* ==========================================================================
   20. FAQ SECTION (الأسئلة الشائعة)
   ========================================================================== */

/* --- Section --- */
section.s-block--faqs {
  padding: 5rem 0 !important;
  background-color: var(--bg-primary) !important;
}
@media (max-width: 768px) { section.s-block--faqs { padding: 3rem 0 !important; } }

/* --- Title block --- */
section.s-block--faqs .s-block__title { margin-bottom: 3rem !important; }
section.s-block--faqs .s-block__title h2 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
}
section.s-block--faqs .s-block__title h2::after {
  content: '' !important;
  display: block !important;
  width: 52px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--primary), var(--primary-light)) !important;
  border-radius: 10px !important;
  margin: 0.55rem auto 0 !important;
}
section.s-block--faqs .s-block__title p {
  color: var(--text-muted) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin-top: 0.5rem !important;
}

/* --- Grid spacing --- */
section.s-block--faqs .faqs-list { gap: 0.85rem !important; }

/* --- Item card: base --- */
section.s-block--faqs .faqs-list__item {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(1,14,33,0.05) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.2s ease !important;
}
section.s-block--faqs .faqs-list__item:hover {
  border-color: rgba(236,34,36,0.32) !important;
  box-shadow: 0 6px 22px rgba(236,34,36,0.09) !important;
}

/* --- Item card: active (checked) --- */
section.s-block--faqs input:checked + .faqs-list__item {
  border-color: var(--primary) !important;
  box-shadow: 0 8px 28px rgba(236,34,36,0.13) !important;
}

/* --- Question label --- */
section.s-block--faqs .faqs-list__item label {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.6 !important;
  padding: 1.25rem 1.5rem !important;
  transition: color 0.25s ease !important;
}
section.s-block--faqs input:checked + .faqs-list__item label { color: var(--primary) !important; }

/* --- Open/close badge icon --- */
section.s-block--faqs .open-badge {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background-color: var(--bg-elevated) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 1rem !important;
  transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
section.s-block--faqs .faqs-list__item:hover .open-badge {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background-color: rgba(236,34,36,0.07) !important;
}
section.s-block--faqs input:checked + .faqs-list__item .open-badge {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 3px 12px rgba(236,34,36,0.32) !important;
}

/* --- Answer text --- */
section.s-block--faqs .faq-answer p {
  color: var(--text-secondary) !important;
  line-height: 1.85 !important;
  font-size: 0.9rem !important;
}

/* --- FAQ link (اعرف المزيد button) --- */
section.s-block--faqs .faq-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background-color: var(--primary) !important;
  color: #ffffff !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 12px rgba(236,34,36,0.22) !important;
  border: none !important;
}
section.s-block--faqs .faq-link:hover {
  background-color: var(--primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(236,34,36,0.32) !important;
}


/* ==========================================================================
   21. TEXT CONTENT CTA (احجز جلسة تعريفية)
   ========================================================================== */

/* CTA theme variables — cascade into Shadow DOM */
:root {
  --cta-bg-from: #ffffff;
  --cta-bg-to: #ffffff;
  --cta-title:  #010e21;
  --cta-subtitle: #556677;
  --cta-glow: 0;
  --cta-sep: var(--border-light);
}
html.dark {
  --cta-bg-from: #010e21;
  --cta-bg-to:   #0a1e38;
  --cta-title:   #ffffff;
  --cta-subtitle: rgba(255,255,255,0.72);
  --cta-glow: 1;
  --cta-sep: transparent;
}

section.s-block--bundle-text-content { padding: 0 !important; background: transparent !important; }
section.s-block--bundle-blog { background-color: var(--bg-primary) !important; }
section.s-block--bundle-blog .s-block-blog { background-color: var(--bg-primary) !important; }
html.dark section.s-block--bundle-blog { background-color: transparent !important; }
html.dark section.s-block--bundle-blog .s-block-blog { background-color: var(--bg-body) !important; }


/* ==========================================================================
   22. PRODUCT SINGLE PAGE
   ========================================================================== */

body.product-single {
  background-color: var(--bg-body) !important;
}

body.product-single .sidebar {
  background: transparent !important;
}

/* Main image slider */
body.product-single .details-slider.image-slider {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1.5px solid var(--border-light) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}
body.product-single .details-slider.image-slider:hover {
  box-shadow: 0 12px 40px rgba(236,34,36,0.12) !important;
  border-color: rgba(236,34,36,0.18) !important;
}

/* Promotion badge — override inline background-color:#0d0d0d */
body.product-single p.promotion-title {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  border-radius: 0 0 10px 10px !important;
  padding: 0.28rem 0.9rem !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.3) !important;
}

/* Wishlist / Share buttons */
body.product-single .wish-share {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
html.dark body.product-single .wish-share {
  background: rgba(0,0,0,0.3) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Thumbnail items */
body.product-single .slide--one-fourth {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  cursor: pointer !important;
}
body.product-single .slide--one-fourth:hover,
body.product-single .slide--one-fourth.swiper-slide-thumb-active {
  border-color: var(--primary) !important;
  box-shadow: 0 3px 12px rgba(236,34,36,0.22) !important;
}

/* Product title */
body.product-single .main-content h1.da-tm {
  color: var(--text-primary) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
}
@media (min-width: 768px) {
  body.product-single .main-content h1.da-tm {
    font-size: 1.45rem !important;
  }
}

/* Price */
body.product-single h2.total-price {
  color: var(--primary) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Before price (crossed) */
body.product-single span.before-price {
  color: var(--text-muted) !important;
  font-size: 0.9rem !important;
  opacity: 0.8 !important;
}

/* Availability pill */
body.product-single .product-availablity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background-color: rgba(22,199,132,0.08) !important;
  border: 1px solid rgba(22,199,132,0.22) !important;
  border-radius: 30px !important;
  padding: 0.22rem 0.8rem !important;
  margin: 0.3rem 0 !important;
}
body.product-single .product-availablity strong {
  color: var(--bull) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

/* Pulsing available dot */
body.product-single span.product-available-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  border-radius: 50% !important;
  background-color: var(--bull) !important;
  display: inline-block !important;
  animation: mw-pulse 2s ease-in-out infinite !important;
}
@keyframes mw-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(22,199,132,0.6); }
  60%  { box-shadow: 0 0 0 8px rgba(22,199,132,0); }
  100% { box-shadow: 0 0 0 0   rgba(22,199,132,0); }
}

/* Description article */
body.product-single article.full-description.details {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 12px !important;
  padding: 1.2rem 1.4rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.95 !important;
  font-size: 0.9rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.35rem !important;
}
body.product-single article.full-description.details p,
body.product-single article.full-description.details li,
body.product-single article.full-description.details strong {
  color: var(--text-secondary) !important;
}

/* Read more button */
body.product-single a#btn-show-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0.35rem 0 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, gap 0.2s ease !important;
}
body.product-single a#btn-show-more:hover {
  color: var(--primary-hover) !important;
  gap: 0.6rem !important;
}

/* Details section cards */
body.product-single section.details,
body.product-single div.product-options.details {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.2rem !important;
  margin-bottom: 0.55rem !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
body.product-single section.details:hover,
body.product-single div.product-options.details:hover {
  border-color: rgba(236,34,36,0.2) !important;
  box-shadow: var(--shadow-md) !important;
}

body.product-single .details__wrapper { margin: 0 !important; }

body.product-single .details__container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

body.product-single .details__title {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  color: var(--text-muted) !important;
  font-size: 0.87rem !important;
  font-weight: 600 !important;
}
body.product-single .details__title i {
  color: var(--primary) !important;
  font-size: 1rem !important;
}

/* Sold count */
body.product-single section.is-sold.details .details__title {
  color: var(--primary) !important;
}
body.product-single .sold-count {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--text-primary) !important;
}

/* Sticky product bar */
body.product-single .sticky-product-bar {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 1.1rem 1.4rem !important;
  transition: box-shadow 0.3s ease !important;
}
html.dark body.product-single .sticky-product-bar {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

body.product-single .sticky-product-bar h2.da-tm {
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* Add to cart button color nudge */
body.product-single salla-add-product-button {
  --s-color-primary: #ec2224 !important;
  --s-button-bg: #ec2224 !important;
  --s-button-bg-hover: #d41e20 !important;
}

/* Payment icons section */
body.product-single .s-block--payment {
  background: transparent !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

body.product-single .s-block--payment ul li {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 7px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.product-single .s-block--payment ul li:hover {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark body.product-single .s-block--payment ul li {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

/* Similar products section */
body.product-single .similar-products {
  background-color: var(--bg-body) !important;
  padding-top: 2rem !important;
  padding-bottom: 2.5rem !important;
}


/* ==========================================================================
   23. FOOTER (الفوتر)
   ========================================================================== */

/* ── Outer Shell ── */
footer.store-footer {
  background-color: var(--bg-sidebar) !important;
  border-top: 1px solid var(--border-light) !important;
  position: relative !important;
}
.store-footer__inner {
  background-color: var(--bg-sidebar) !important;
}
html.dark footer.store-footer {
  border-top-color: var(--border) !important;
}

/* Red top accent line */
footer.store-footer::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary)) !important;
}

/* Section dividers */
.footer-container.da-brdr {
  border-color: var(--border-light) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
html.dark .footer-container.da-brdr {
  border-color: var(--border) !important;
}


/* ══════════════════════════════════════════════════
   BACK TO TOP
   ══════════════════════════════════════════════════ */

.to-top {
  border-bottom: 1px solid var(--border-light) !important;
  margin-bottom: 0 !important;
}
html.dark .to-top {
  border-bottom-color: var(--border) !important;
}

.to-top a {
  color: var(--text-muted) !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  transition: color 0.25s ease !important;
  text-decoration: none !important;
}
.to-top a:hover {
  color: var(--primary) !important;
}
.to-top i.sicon-arrow-up {
  font-size: 1rem !important;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.to-top a:hover i.sicon-arrow-up {
  transform: translateY(-5px) !important;
}


/* ══════════════════════════════════════════════════
   NEWSLETTER SECTION
   ══════════════════════════════════════════════════ */

.footer-newsletter {
  flex: 1 !important;
}

.footer-newsletter strong.da-tm {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

.footer-newsletter p.da-tm {
  color: var(--text-muted) !important;
  font-size: 0.83rem !important;
  line-height: 1.65 !important;
}

/* Email input field */
input.mail-input {
  background-color: var(--bg-input) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-size: 0.87rem !important;
  padding: 0.65rem 1rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  outline: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}
input.mail-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(236,34,36,0.1) !important;
}
input.mail-input::placeholder {
  color: var(--text-disabled) !important;
}

/* Subscribe button */
.footer-newsletter button.s-button-solid.s-button-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 0.87rem !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}
.footer-newsletter button.s-button-solid.s-button-primary:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.28) !important;
}


/* ══════════════════════════════════════════════════
   SOCIAL ICONS (salla-social — light DOM children)
   ══════════════════════════════════════════════════ */

.footer-social {
  display: flex !important;
  align-items: flex-start !important;
}

.social-links {
  gap: 0.6rem !important;
}

.s-social-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.s-social-link a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background-color: var(--bg-elevated) !important;
  border: 1.5px solid var(--border-light) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}
.s-social-link a:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 18px rgba(236,34,36,0.3) !important;
}

.s-social-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

html.dark .s-social-link a {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}


/* ══════════════════════════════════════════════════
   FOOTER MIDDLE — Logo + Links + Contacts
   ══════════════════════════════════════════════════ */

/* Logo */
.logo-footer {
  margin-bottom: 0.85rem !important;
  text-decoration: none !important;
}

/* Store description */
p.footer-description,
p.footer-description p {
  color: var(--text-muted) !important;
  font-size: 0.83rem !important;
  line-height: 1.85 !important;
}

/* Links column heading */
.menu-list h3 {
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.45rem !important;
  border-bottom: 2px solid var(--primary) !important;
  display: inline-block !important;
}

/* Footer links */
.footer-list.store-links-items a {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, padding-inline-end 0.2s ease !important;
  display: block !important;
}
.footer-list.store-links-items a:hover {
  color: var(--primary) !important;
  padding-inline-end: 5px !important;
}


/* ══════════════════════════════════════════════════
   CONTACTS (salla-contacts — light DOM children)
   ══════════════════════════════════════════════════ */

.s-contacts-title {
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.45rem !important;
  border-bottom: 2px solid var(--primary) !important;
  display: inline-block !important;
}

.s-contacts-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* Horizontal — icon pill cards */
.s-contacts-list-horizontal .s-contacts-item {
  padding: 0.55rem !important;
  border-radius: 10px !important;
  background-color: var(--bg-elevated) !important;
  border: 1.5px solid var(--border-light) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease !important;
}
.s-contacts-list-horizontal .s-contacts-item:hover {
  background-color: rgba(236,34,36,0.08) !important;
  border-color: var(--primary) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 5px 14px rgba(236,34,36,0.18) !important;
}
html.dark .s-contacts-list-horizontal .s-contacts-item {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

/* Hide text label — icon only in horizontal row */
.s-contacts-list-horizontal span.unicode {
  display: none !important;
}

.s-contacts-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  padding: 0.25rem 0 !important;
  transition: color 0.2s ease !important;
}
.s-contacts-item:hover {
  color: var(--primary) !important;
}

.s-contacts-icon {
  color: var(--primary) !important;
  flex-shrink: 0 !important;
}
.s-contacts-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}


/* ══════════════════════════════════════════════════
   FOOTER BOTTOM — SBC + Payment icons + Copyright
   ══════════════════════════════════════════════════ */

.footer-bottom {
  border-top: 1px solid var(--border-light) !important;
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important;
}
htmlhtml.dark .footer-bottom {
  border-top-color: var(--border) !important;
}

/* SBC certificate badge */
.sbc-certificate {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
}

/* SBC badge icon box — override hardcoded bg-white */
.sbc-link {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.sbc-link:hover {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark .sbc-link {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

/* Payment icon boxes — override hardcoded bg-white */
.footer-bottom ul li {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.footer-bottom ul li:hover {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
htmlhtml.dark .footer-bottom ul li {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

/* Copyright text */
span.copyrights {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
}
span.copyrights p.text-gray-400 {
  color: var(--text-muted) !important;
  opacity: 0.85 !important;
  margin-bottom: 0 !important;
}
span.copyrights a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
span.copyrights a:hover {
  color: var(--primary) !important;
}


/* ==========================================================================
   24. CART PAGE (صفحة السلة)
   ========================================================================== */

body.cart {
  background-color: var(--bg-body) !important;
}


/* ══════════════════════════════════════════════════
   A) NAV HEADER — Breadcrumb + Title
   ══════════════════════════════════════════════════ */

body.cart .nav-header {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
html.dark body.cart .nav-header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border) !important;
}

body.cart .nav-header h1.da-tm {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}
body.cart .nav-header h1 #items-count {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

/* Breadcrumbs */
body.cart .breadcrumbs a {
  color: var(--primary) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
}
body.cart .breadcrumbs span.da-ts {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
}
body.cart .breadcrumbs i.sicon-keyboard_arrow_left {
  color: var(--text-disabled) !important;
}


/* ══════════════════════════════════════════════════
   B) CART ITEM CARD
   ══════════════════════════════════════════════════ */

body.cart section.cart-item {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 14px !important;
  padding: 1.1rem !important;
  margin-bottom: 0.85rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
body.cart section.cart-item:hover {
  border-color: rgba(236,34,36,0.18) !important;
  box-shadow: var(--shadow-md) !important;
}
html.dark body.cart section.cart-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Product image */
body.cart section.cart-item img.lazy {
  border-radius: 10px !important;
  border: 1px solid var(--border-light) !important;
  object-fit: cover !important;
  width: 5.5rem !important;
  height: 5.5rem !important;
}
html.dark body.cart section.cart-item img.lazy {
  border-color: var(--border) !important;
}

/* Product title */
body.cart section.cart-item h4.da-tm {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
}
body.cart section.cart-item h4.da-tm a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
body.cart section.cart-item h4.da-tm a:hover {
  color: var(--primary) !important;
}

/* Original price (crossed) */
body.cart span#original_price,
body.cart span.item-original-price {
  color: var(--text-disabled) !important;
  font-size: 0.82rem !important;
}

/* Discounted price */
body.cart span#has_discount,
body.cart span.item-price {
  color: var(--primary) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* Regular price (hidden strikethrough) */
body.cart span.item-regular-price {
  color: var(--text-disabled) !important;
}

/* Divider line inside card */
body.cart section.cart-item .border-t {
  border-color: var(--border-light) !important;
  padding-top: 0.85rem !important;
  margin-top: 0.25rem !important;
}
html.dark body.cart section.cart-item .border-t {
  border-color: var(--border) !important;
}

/* Cart item total */
body.cart section.cart-item .text-primary.da-tm {
  font-size: 0.88rem !important;
  color: var(--text-muted) !important;
}
body.cart section.cart-item h5.item-total {
  color: var(--primary) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}

/* Wishlist button */
body.cart button.btn--wishlist {
  color: var(--text-muted) !important;
  border-color: var(--border-light) !important;
  border-radius: 8px !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
body.cart button.btn--wishlist:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Delete button */
body.cart button.btn--delete {
  background-color: rgba(236,34,36,0.08) !important;
  color: var(--primary) !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.cart button.btn--delete:hover {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(236,34,36,0.3) !important;
}


/* ══════════════════════════════════════════════════
   C) SIDEBAR PANELS (Free Shipping / Gifting / Coupon / Summary)
   ══════════════════════════════════════════════════ */

body.cart .sticky > div {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark body.cart .sticky > div {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Free shipping banner */
body.cart #free-shipping {
  background-color: var(--bg-card) !important;
}
body.cart #free-shipping h3.da-tm {
  color: var(--text-primary) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
body.cart #free-shipping p.da-tm {
  color: var(--text-muted) !important;
  font-size: 0.83rem !important;
}
body.cart #free-shipping-bar {
  background-color: var(--border-light) !important;
  border-radius: 99px !important;
  height: 8px !important;
}
body.cart #free-shipping-bar .progress-bg {
  background-color: var(--primary) !important;
}

/* Shipping icon */
body.cart i.bg-primary.rounded-icon {
  background-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(236,34,36,0.25) !important;
}

/* Coupon box */
body.cart div.coupon {
  background-color: var(--bg-card) !important;
}
body.cart div.coupon label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}
body.cart div.coupon label i {
  color: var(--primary) !important;
}

body.cart input#coupon-input {
  background-color: var(--bg-input) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.87rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  outline: none !important;
  width: 100% !important;
}
body.cart input#coupon-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(236,34,36,0.1) !important;
}
body.cart input#coupon-input::placeholder {
  color: var(--text-disabled) !important;
}

body.cart button.btn--coupon {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.83rem !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}
body.cart button.btn--coupon:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 4px 12px rgba(236,34,36,0.28) !important;
}

body.cart #coupon-error {
  color: var(--primary) !important;
  font-size: 0.78rem !important;
}


/* ══════════════════════════════════════════════════
   D) ORDER SUMMARY PANEL
   ══════════════════════════════════════════════════ */

body.cart .shadow-default.bg-white.da-bgg h4.da-tm {
  color: var(--text-primary) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--border-light) !important;
  margin-bottom: 1rem !important;
}
html.dark body.cart .shadow-default.bg-white.da-bgg h4.da-tm {
  border-bottom-color: var(--border) !important;
}

/* Row labels */
body.cart .shadow-default span.da-tm {
  color: var(--text-muted) !important;
  font-size: 0.87rem !important;
}

/* Sub-total / shipping / discount values */
body.cart b#sub-total,
body.cart #shipping-cost b,
body.cart #total-discount b {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* Grand total row */
body.cart .flex.justify-between.text-lg h5.da-tm {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}
body.cart .flex.justify-between.text-lg b.da-tm {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}

/* Divider above total */
body.cart .flex.justify-between.text-lg {
  border-top: 1.5px solid var(--border-light) !important;
  padding-top: 0.85rem !important;
  margin-top: 0.25rem !important;
}
html.dark body.cart .flex.justify-between.text-lg {
  border-top-color: var(--border) !important;
}

/* Checkout button */
body.cart button#cart-submit,
body.cart #cart-submit button {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 0.85rem !important;
  width: 100% !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.2s ease !important;
}
body.cart button#cart-submit:hover,
body.cart #cart-submit button:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 6px 20px rgba(236,34,36,0.35) !important;
  transform: translateY(-2px) !important;
}


/* ══════════════════════════════════════════════════
   E) SIMILAR PRODUCTS SECTION
   ══════════════════════════════════════════════════ */

body.cart .cart-similar-products {
  background-color: var(--bg-body) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}


/* ==========================================================================
   25. BLOG INDEX PAGE (صفحة قائمة المقالات)
   ========================================================================== */

body.blog-index {
  background-color: var(--bg-body) !important;
}


/* ══════════════════════════════════════════════════
   A) NAV HEADER — breadcrumb bar
   ══════════════════════════════════════════════════ */

body.blog-index .nav-header {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
}
html.dark body.blog-index .nav-header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border) !important;
}
body.blog-index .nav-header h1.da-tm {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}
body.blog-index .breadcrumbs a { color: var(--primary) !important; font-size: 0.82rem !important; }
body.blog-index .breadcrumbs span.da-ts { color: var(--text-muted) !important; font-size: 0.82rem !important; }


/* ══════════════════════════════════════════════════
   B) SIDEBAR — Categories
   ══════════════════════════════════════════════════ */

body.blog-index nav[aria-label="Sidebar"] {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark body.blog-index nav[aria-label="Sidebar"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

body.blog-index nav[aria-label="Sidebar"] h2.da-tm {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
body.blog-index nav[aria-label="Sidebar"] .border-b {
  border-color: var(--border-light) !important;
}
html.dark body.blog-index nav[aria-label="Sidebar"] .border-b {
  border-color: var(--border) !important;
}

/* Category links */
body.blog-index nav[aria-label="Sidebar"] .blog-cat a {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.55rem 1rem !important;
  text-decoration: none !important;
}
body.blog-index nav[aria-label="Sidebar"] .blog-cat a:hover {
  color: var(--primary) !important;
  background-color: rgba(236,34,36,0.06) !important;
}
body.blog-index nav[aria-label="Sidebar"] .blog-cat a i {
  color: var(--primary) !important;
}


/* ══════════════════════════════════════════════════
   C) HERO BLOG SLIDER
   ══════════════════════════════════════════════════ */

body.blog-index .blog-slider {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Gradient overlay from bottom */
body.blog-index .blog-slider .has-overlay::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(1,14,33,0.92) 0%,
    rgba(1,14,33,0.55) 45%,
    transparent 80%
  ) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

body.blog-index .blog-slider .absolute.z-10 {
  z-index: 10 !important;
}

/* Slide title */
body.blog-index .blog-slider h3 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
@media (min-width: 768px) {
  body.blog-index .blog-slider h3 {
    font-size: 1.65rem !important;
  }
}

body.blog-index .blog-slider h3 a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
body.blog-index .blog-slider h3 a:hover { color: rgba(255,255,255,0.85) !important; }

/* Slide description */
body.blog-index .blog-slider p.description {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* Read more link on slider */
body.blog-index .blog-slider a.underlined {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  opacity: 0.9 !important;
  transition: opacity 0.2s ease, gap 0.2s ease !important;
  text-decoration: none !important;
}
body.blog-index .blog-slider a.underlined:hover { opacity: 1 !important; }


/* ══════════════════════════════════════════════════
   D) ARTICLE CARDS — Tags Fix (KEY FIX)
   ══════════════════════════════════════════════════ */

/*
 * Problem: tags are in an absolute-positioned flex-wrap container
 * that overflows and covers the entire image.
 * Fix: force single row (nowrap) + clip overflow
 */
body.blog-index .blog-article .post-entry__image ~ div {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  max-width: calc(100% - 0.75rem) !important;
  gap: 0.3rem !important;
  /* bottom of image instead of top */
  top: auto !important;
  bottom: 0.6rem !important;
}

/* Tag pills — dark glass style on images */
body.blog-index .blog-article .post-entry__image ~ div a {
  background-color: rgba(1,14,33,0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 6px !important;
  padding: 0.12rem 0.55rem !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease !important;
  text-decoration: none !important;
}
body.blog-index .blog-article .post-entry__image ~ div a:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}


/* ══════════════════════════════════════════════════
   E) ARTICLE CARDS — Overall Design
   ══════════════════════════════════════════════════ */

/* Grid wrapper */
body.blog-index .blog-articles {
  gap: 3.5rem 1.5rem !important;
  padding-top: 2rem !important;
  padding-bottom: 1rem !important;
}

/* Card */
body.blog-index .blog-article {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.3s ease, box-shadow 0.35s ease,
              transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  overflow: visible !important;
  padding-bottom: 0.25rem !important;
}
body.blog-index .blog-article:hover {
  border-color: rgba(236,34,36,0.2) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-5px) !important;
}
html.dark body.blog-index .blog-article {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Floating image wrapper (-mt-8 creates the lift effect) */
body.blog-index .blog-article > div.relative {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12)) !important;
  transition: filter 0.35s ease !important;
}
body.blog-index .blog-article:hover > div.relative {
  filter: drop-shadow(0 10px 24px rgba(236,34,36,0.15)) !important;
}

/* Article image */
body.blog-index a.post-entry__image {
  border-radius: 12px !important;
  overflow: hidden !important;
  display: block !important;
}
body.blog-index a.post-entry__image .lazy__bg {
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
body.blog-index .blog-article:hover a.post-entry__image .lazy__bg {
  transform: scale(1.05) !important;
}

/* Card content area */
body.blog-index .blog-article .flex.flex-col.gap-1.px-5 {
  padding: 0.75rem 1.2rem 1rem !important;
}

/* Article title */
body.blog-index h3.post-entry__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: var(--text-primary) !important;
  transition: color 0.2s ease !important;
}
body.blog-index h3.post-entry__title a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
body.blog-index h3.post-entry__title:hover a,
body.blog-index .blog-article:hover h3.post-entry__title a {
  color: var(--primary) !important;
}

/* Description excerpt */
body.blog-index .blog-article p.da-ts {
  color: var(--text-muted) !important;
  font-size: 0.83rem !important;
  line-height: 1.7 !important;
}

/* Author + date + read more row */
body.blog-index .blog-article .border-t {
  border-color: var(--border-light) !important;
  padding-top: 0.75rem !important;
  margin-top: 0.5rem !important;
}
html.dark body.blog-index .blog-article .border-t {
  border-color: var(--border) !important;
}

/* Author avatar */
body.blog-index .blog-article .w-8.h-8 {
  background-color: var(--bg-elevated) !important;
  border: 1.5px solid var(--border-light) !important;
}

/* Author name + date */
body.blog-index .blog-article span.da-ts {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
}

/* "Read more" link */
body.blog-index .blog-article a.underlined {
  color: var(--primary) !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, gap 0.2s ease !important;
}
body.blog-index .blog-article a.underlined:hover {
  color: var(--primary-hover) !important;
}
body.blog-index .blog-article a.underlined .flex {
  gap: 0.35rem !important;
  transition: gap 0.2s ease !important;
}
body.blog-index .blog-article a.underlined:hover .flex {
  gap: 0.55rem !important;
}


/* ==========================================================================
   26. FULL BANNER NAV HEADER (صفحة المقال — بانر العنوان)
   ========================================================================== */

/* Upgrade overlay: gradient instead of flat black */
.nav-header.full-banner-entry .overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.62) 50%,
    rgba(0,0,0,0.35) 100%
  ) !important;
  opacity: 1 !important;
}

/* Force ALL text inside banner to white — overrides da-tm / da-ts in light mode */
.nav-header.full-banner-entry,
.nav-header.full-banner-entry * {
  color: #ffffff !important;
}

/* Article title */
.nav-header.full-banner-entry h1 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  color: #ffffff !important;
}
@media (min-width: 768px) {
  .nav-header.full-banner-entry h1 {
    font-size: 1.65rem !important;
  }
}

/* Breadcrumb links */
.nav-header.full-banner-entry .breadcrumbs a {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.nav-header.full-banner-entry .breadcrumbs a:hover {
  color: #ffffff !important;
}

/* Current page (last breadcrumb) */
.nav-header.full-banner-entry .breadcrumbs span.da-ts {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.82rem !important;
}

/* Breadcrumb separator icon */
.nav-header.full-banner-entry .breadcrumbs i {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.75rem !important;
}

/* Min height for banner */
.nav-header.full-banner-entry {
  min-height: 200px !important;
  background-size: cover !important;
  background-position: center !important;
  justify-content: flex-end !important;
  padding-bottom: 1.5rem !important;
}
@media (min-width: 768px) {
  .nav-header.full-banner-entry {
    min-height: 260px !important;
  }
}


/* ==========================================================================
   27. PRODUCT PAGE BUTTONS — Contrast Fix
   ========================================================================== */

/* ── "اطلبه الان" button (s-button-light) ──
   Light mode: white bg + dark text ✓
   Dark mode:  white bg + white text ✗  → fix below
   ─────────────────────────────────────────── */

body.product-single button.s-button-solid.s-button-light {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}
body.product-single button.s-button-solid.s-button-light:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px rgba(236,34,36,0.12) !important;
}

/* Dark mode specific — make even more visible */
html.dark body.product-single button.s-button-solid.s-button-light {
  background-color: var(--bg-elevated) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}
html.dark body.product-single button.s-button-solid.s-button-light:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}


/* ── "أضف للسلة" button (s-button-primary) ──
   Force brand red regardless of --color-primary variable
   ─────────────────────────────────────────── */

body.product-single button.s-button-solid.s-button-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.2s ease !important;
}
body.product-single button.s-button-solid.s-button-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 6px 20px rgba(236,34,36,0.38) !important;
  transform: translateY(-2px) !important;
}

/* Sticky bar add button (wide variant) */
body.product-single button.s-button-solid.s-button-wide.s-button-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}
body.product-single button.s-button-solid.s-button-wide.s-button-primary:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 6px 20px rgba(236,34,36,0.35) !important;
  transform: translateY(-2px) !important;
}

/* Ensure span text inside buttons inherits color */
body.product-single button.s-button-solid span.s-button-text {
  color: inherit !important;
}



/* ==========================================================================
   28. RESPONSIVE — GLOBAL OVERFLOW FIX + MOBILE + TABLET
   ========================================================================== */

/* ── CRITICAL: Prevent horizontal scroll on ALL pages ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.app-inner,
.container,
section,
footer.store-footer,
.store-footer__inner {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ── Fluid images & embeds: mobile only ── */
@media (max-width: 768px) {
  img:not(.logo-light):not(.logo-dark):not(.foo):not(.profile-photo),
  video { max-width: 100% !important; }
}
/* iframes (TradingView ticker excluded) */
iframe:not([src*="elf.site"]) { max-width: 100% !important; }

/* ── Swiper: mobile-only fix (desktop keeps original padding for arrows) ── */
@media (max-width: 768px) {
  .swiper.s-slider-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }
  .s-products-slider-slider {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .swiper-slide {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Shadow DOM sections: cap height on MOBILE only ── */
@media (max-width: 768px) {
  .s-block--bundle-features-list [class*="salla-features-list"],
  .s-block--bundle-store-features [class*="salla-store-features"] {
    max-height: 600px !important;
    overflow: hidden !important;
  }
}


/* ══════════════════════════════════════════════════
   A) MOBILE — max-width: 768px
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Global container padding ── */
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* ── HEADER: reduce 296px → compact ── */
  .store-header .header-inner.inner { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .store-header .navbar-brand img { max-height: 3rem !important; }
  .store-header .header-container { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  /* Announcement bar: hidden (Elfsight Popup replaces it) */

  /* ── Global button consistency — mobile touch targets ── */
  .s-button-btn { font-size: 0.85rem !important; border-radius: 10px !important; min-height: 42px !important; max-width: 100% !important; box-sizing: border-box !important; }
  .btn--primary, .btn-primary { font-size: 0.85rem !important; border-radius: 10px !important; padding: 0.6rem 1.2rem !important; min-height: 42px !important; max-width: 100% !important; }
  .s-button-wide { border-radius: 10px !important; max-width: 100% !important; }
  /* Inline action buttons (wishlist, delete, share, quick-view) stay compact */
  .btn--wishlist, .btn--delete, .btn--share,
  .s-product-card-wishlist, .s-product-card-quick-view-btn,
  .s-product-card-fixed-btn { min-height: auto !important; width: auto !important; max-width: none !important; }
  .s-product-card-actions { flex-direction: column !important; }

  /* ── Global section title consistency ── */
  .s-block__title h2, .s-slider-block__title h2 { font-size: 1.1rem !important; text-align: center !important; }
  .s-block__title p { font-size: 0.78rem !important; text-align: center !important; }
  .s-block__display-all a { font-size: 0.78rem !important; }

  /* ── Section padding reduction ── */
  .s-block { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  section.s-block--faqs { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* ── Swiper/Slider: prevent cards from overflowing viewport ── */
  .swiper-slide { box-sizing: border-box !important; }
  .s-product-card-entry { max-width: 100% !important; box-sizing: border-box !important; }
  /* Product cards inside slider: ensure text doesn't overflow */
  .s-product-card-content-title { overflow: hidden !important; text-overflow: ellipsis !important; }
  .s-product-card-content-title a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; }
  /* Slider buttons (add to cart) inside cards: fit card width */
  .s-product-card-content .s-button-wide { font-size: 0.78rem !important; padding: 0.5rem 0.6rem !important; }

  /* ── Add-to-cart toast ── */
  .s-add-product-toast { max-width: 100vw !important; width: calc(100vw - 2rem) !important; left: 1rem !important; right: 1rem !important; box-sizing: border-box !important; }

  /* ── Out of stock / disabled buttons ── */
  .s-button-disabled { opacity: 0.5 !important; }

  /* ── NAV HEADER (Breadcrumb) ── */
  .nav-header { padding: 1rem !important; }
  .nav-header h1, .nav-header h1.da-tm { font-size: 1.05rem !important; }
  .nav-header.full-banner-entry { min-height: 170px !important; padding: 1rem 1rem 1.2rem !important; }
  .nav-header.full-banner-entry h1 { font-size: 1.1rem !important; line-height: 1.5 !important; }
  .breadcrumbs .flex { flex-wrap: wrap !important; }

  /* ── SPECIAL PRODUCT ── */
  .s-block--special-product { padding: 1.25rem 0 !important; }
  .s-block--special-product .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .s-block--special-product .flex.flex-col.md\:flex-row { flex-direction: column !important; }
  .s-block--special-product .p_image { width: 100% !important; max-height: 220px !important; overflow: hidden !important; }
  .s-block--special-product .p_image a { height: 220px !important; }
  .s-block--special-product .p_image img { object-fit: cover !important; width: 100% !important; height: 100% !important; }
  .s-block--special-product .flex.flex-col.gap-1.p-4 { padding: 0.85rem !important; width: 100% !important; box-sizing: border-box !important; }
  .s-block--special-product h2 { font-size: 1rem !important; line-height: 1.4 !important; text-align: center !important; }
  .s-block--special-product p.da-tm { font-size: 0.78rem !important; text-align: center !important; }
  .s-block--special-product .special-price { font-size: 0.88rem !important; justify-content: center !important; }
  .s-block--special-product .special-price-current { font-size: 1.1rem !important; }
  .s-block--special-product .sale-end { font-size: 0.78rem !important; justify-content: center !important; }
  .s-block--special-product .tabs.tabs__special { flex-wrap: nowrap !important; gap: 0.35rem !important; justify-content: center !important; }
  .s-block--special-product .tab-trigger { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 10px !important; }
  .s-block--special-product .tab-trigger i { font-size: 0.85rem !important; }
  .s-block--special-product .tabs__item { padding: 0.65rem 0.75rem !important; border-radius: 8px !important; }
  .s-block--special-product .tabs__item h4 { font-size: 0.82rem !important; margin-bottom: 0.25rem !important; }
  .s-block--special-product .tabs__item p { font-size: 0.72rem !important; line-height: 1.55 !important; }
  .s-block--special-product .special-products-btn { flex-direction: column !important; gap: 0.45rem !important; }
  .s-block--special-product .special-products-btn .btn,
  .s-block--special-product .special-products-btn salla-add-product-button,
  .s-block--special-product .special-products-btn .s-button-wrap { width: 100% !important; }
  .s-block--special-product .special-products-btn .btn--primary,
  .s-block--special-product .special-products-btn button { border-radius: 10px !important; font-size: 0.85rem !important; padding: 0.65rem !important; }
  .s-block--special-product .s-count-down-list { gap: 0.25rem !important; justify-content: center !important; }
  .s-block--special-product .s-count-down-item { min-width: 48px !important; padding: 0.35rem 0.25rem !important; border-radius: 8px !important; }
  .s-block--special-product .s-count-down-item-value { font-size: 1rem !important; }
  .s-block--special-product .s-count-down-item-label { font-size: 0.6rem !important; }
  .s-block--special-product .s-count-down-end-text { font-size: 0.75rem !important; text-align: center !important; }
  .s-block--special-product .bg-white.da-bgg, .s-block--special-product .bg-white { border-radius: 10px !important; }

  /* ── STORE FEATURES + FEATURES LIST — reduce 1000px+ empty space ── */
  .s-block--bundle-store-features { padding: 0.5rem 0 !important; }
  .s-block--bundle-features-list { padding: 1rem 0 !important; }

  /* ── BEST OFFERS SLIDER ── */
  #best-offers-4-slider { overflow: hidden !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  #best-offers-4-slider .s-block__title { margin-bottom: 1rem !important; flex-direction: column !important; gap: 0.5rem !important; }
  #best-offers-4-slider .s-block__title h2 { font-size: 1.05rem !important; text-align: center !important; }
  #best-offers-4-slider .s-block__display-all { align-self: center !important; }
  #best-offers-4-slider .s-slider-nav-arrow { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; }
  #best-offers-4-slider .s-product-card-content-main { padding: 0.65rem 0.75rem 0.6rem !important; }
  #best-offers-4-slider .s-product-card-content-title a { font-size: 0.8rem !important; line-height: 1.35 !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  #best-offers-4-slider .s-product-card-entry { border-radius: 12px !important; }
  #best-offers-4-slider .s-product-card-image { height: 180px !important; min-height: 180px !important; }
  #best-offers-4-slider .swiper-slide { min-width: 0 !important; }
  #best-offers-4-slider .s-product-card-content-price .s-product-card-sale-price { font-size: 1rem !important; }
  #best-offers-4-slider .s-product-card-content-price .s-product-card-price { font-size: 0.75rem !important; }

  /* ── TESTIMONIALS ── */
  section.s-block--testimonials .s-block__title { margin-bottom: 1.25rem !important; }
  section.s-block--testimonials .s-block__title h2 { font-size: 1.1rem !important; }
  section.s-block--testimonials .s-slider-nav-arrow { width: 32px !important; height: 32px !important; }
  section.s-block--testimonials .bg-white.da-bgg { border-radius: 12px !important; }

  /* ── TRUST TESTIMONIALS (كلمة المؤسس) — compact mobile ── */
  section.s-block--bundle-trust-testimonials { padding: 1rem 0 !important; }
  section.s-block--bundle-trust-testimonials .container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  /* The salla-slider wrapper inside */
  section.s-block--bundle-trust-testimonials .s-slider-wrapper { padding: 0 !important; }
  section.s-block--bundle-trust-testimonials .swiper-slide { padding: 0 !important; }

  /* ── FAQ ── */
  section.s-block--faqs .s-block__title h2 { font-size: 1.15rem !important; }
  section.s-block--faqs .s-block__title { margin-bottom: 1.5rem !important; }
  section.s-block--faqs .faqs-list__item { padding: 0.85rem 0.9rem !important; border-radius: 10px !important; }
  section.s-block--faqs .faqs-list { gap: 0.5rem !important; }
  section.s-block--faqs .open-badge { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 0.85rem !important; }
  section.s-block--faqs .faqs-list__item label span { font-size: 0.82rem !important; }
  section.s-block--faqs .faq-answer p { font-size: 0.8rem !important; }
  section.s-block--faqs .faq-link { padding: 0.5rem 1rem !important; font-size: 0.78rem !important; }

  /* ── CTA TEXT CONTENT (احجز جلسة / من نحن) ── */
  section.s-block--bundle-text-content { padding: 0 !important; }
  .cta-button { padding: 0.65rem 1.2rem !important; font-size: 0.82rem !important; max-width: 100% !important; justify-content: center !important; box-sizing: border-box !important; border-radius: 10px !important; }
  .cta-button .price-info { font-size: 0.72rem !important; }

  /* CTA full-width red button fix (احجز الان بشكل مجاني) */
  .s-block-simple-section__button,
  .s-block-text-content__button {
    margin: 0 1rem !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1.5rem !important;
    box-sizing: border-box !important;
    max-width: calc(100% - 2rem) !important;
  }

  /* ── PRODUCT SINGLE ── */
  body.product-single .main-content h1.da-tm { font-size: 1rem !important; }
  body.product-single h2.total-price { font-size: 1.3rem !important; }
  body.product-single article.full-description.details { padding: 0.85rem 0.9rem !important; font-size: 0.82rem !important; line-height: 1.75 !important; }
  body.product-single section.details,
  body.product-single div.product-options.details { padding: 0.65rem 0.85rem !important; border-radius: 10px !important; }
  body.product-single .sticky-product-bar { border-radius: 10px !important; padding: 0.75rem 0.85rem !important; }
  body.product-single .details-slider.image-slider { border-radius: 12px !important; }

  /* ── FOOTER ── */
  footer.store-footer .footer-top { flex-direction: column !important; gap: 1.25rem !important; }
  footer.store-footer .footer-middle { flex-direction: column !important; gap: 1.5rem !important; }
  footer.store-footer .footer-bottom { flex-direction: column !important; gap: 0.85rem !important; text-align: center !important; }
  .footer-container.da-brdr { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .s-social-link a { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
  .s-social-list { justify-content: center !important; flex-wrap: wrap !important; }
  .footer-newsletter #mail { flex-direction: column !important; gap: 0.6rem !important; }
  .footer-newsletter strong.da-tm { font-size: 0.92rem !important; }
  .menu-list h3 { font-size: 0.85rem !important; margin-bottom: 0.6rem !important; }
  .footer-list.store-links-items a { font-size: 0.78rem !important; margin-bottom: 0.6rem !important; }
  p.footer-description, p.footer-description p { font-size: 0.78rem !important; }
  .footer-bottom ul { justify-content: center !important; }
  .footer-bottom { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
  span.copyrights { text-align: center !important; }
  .to-top a p { font-size: 0.8rem !important; }

  /* ── CART ── */
  body.cart section.cart-item { padding: 0.75rem !important; margin-bottom: 0.5rem !important; border-radius: 10px !important; }
  body.cart section.cart-item img.lazy { width: 4rem !important; height: 4rem !important; border-radius: 8px !important; }
  body.cart section.cart-item h4.da-tm { font-size: 0.78rem !important; line-height: 1.35 !important; }
  body.cart .sticky > div { border-radius: 10px !important; }
  body.cart .shadow-default { padding: 0.75rem !important; }
  body.cart .nav-header h1 { font-size: 1rem !important; }

  /* ── BLOG INDEX ── */
  body.blog-index .blog-articles { gap: 2rem 0.75rem !important; }
  body.blog-index .blog-slider { border-radius: 10px !important; margin-bottom: 1.5rem !important; }
  body.blog-index .blog-slider h3 { font-size: 1rem !important; line-height: 1.4 !important; }
  body.blog-index .blog-slider p.description { font-size: 0.78rem !important; line-height: 1.55 !important; }
  body.blog-index h3.post-entry__title { font-size: 0.85rem !important; }
  body.blog-index .blog-article .flex.flex-col.gap-1.px-5 { padding: 0.6rem 0.85rem 0.75rem !important; }
  body.blog-index .blog-article { border-radius: 12px !important; }
  body.blog-index nav[aria-label="Sidebar"] { border-radius: 10px !important; margin-bottom: 0.85rem !important; }

  /* ── BLOG ARTICLE (full-banner) ── */
  .nav-header.full-banner-entry { min-height: 160px !important; }

}


/* ══════════════════════════════════════════════════
   B) SMALL MOBILE — max-width: 420px (360px devices)
   ══════════════════════════════════════════════════ */

@media (max-width: 420px) {

  .container { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }

  /* Special product */
  .s-block--special-product h2 { font-size: 0.88rem !important; }
  .s-block--special-product p.da-tm { font-size: 0.72rem !important; }
  .s-block--special-product .special-price { font-size: 0.82rem !important; gap: 0.25rem !important; }
  .s-block--special-product .special-price-current { font-size: 0.95rem !important; }
  .s-block--special-product .s-count-down-item { min-width: 40px !important; }
  .s-block--special-product .tab-trigger { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .s-block--special-product .tabs__item h4 { font-size: 0.75rem !important; }
  .s-block--special-product .tabs__item p { font-size: 0.68rem !important; }

  /* FAQ */
  section.s-block--faqs .s-block__title h2 { font-size: 1rem !important; }
  section.s-block--faqs .faqs-list__item { padding: 0.7rem 0.75rem !important; }

  /* Product */
  body.product-single h2.total-price { font-size: 1.15rem !important; }
  body.product-single .main-content h1.da-tm { font-size: 0.92rem !important; }

  /* Cart */
  body.cart section.cart-item img.lazy { width: 3.5rem !important; height: 3.5rem !important; }
  body.cart section.cart-item h4.da-tm { font-size: 0.72rem !important; }

  /* Blog */
  body.blog-index .blog-slider h3 { font-size: 0.88rem !important; }
  body.blog-index .blog-articles { gap: 1.75rem 0.5rem !important; }

  /* Footer */
  .s-social-link a { width: 30px !important; height: 30px !important; }
  .s-social-icon svg { width: 14px !important; height: 14px !important; }

  /* Best offers */
  #best-offers-4-slider .s-slider-nav-arrow { width: 28px !important; height: 28px !important; }

  /* Trust testimonials */
  .s-block-trust-testimonials__image { width: 75px !important; height: 75px !important; }
  .s-block-trust-testimonials__feedback { font-size: 0.75rem !important; }

  /* CTA button */
  .cta-button { font-size: 0.78rem !important; padding: 0.6rem 1rem !important; }
  .cta-button .price-info { font-size: 0.7rem !important; }
}


/* ══════════════════════════════════════════════════
   C) TABLET — 769px to 1024px
   ══════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

  footer.store-footer .footer-middle { flex-wrap: wrap !important; }
  footer.store-footer .footer-middle > div { min-width: 45% !important; margin-bottom: 1rem !important; }
  #best-offers-4-slider .s-slider-nav-arrow { width: 36px !important; height: 36px !important; }
  section.s-block--testimonials .s-slider-nav-arrow { width: 36px !important; height: 36px !important; }
  .s-block--special-product .tabs__item p { font-size: 0.82rem !important; }

}