/* ============================================================
   eXtra Theme Override for 6valley v16
   Transforms the storefront to match Extra.com design language
   Author: Custom Theme
   ============================================================ */

/* ---- 1. GOOGLE FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ---- 2. CSS DESIGN TOKENS ---- */
:root {
  /* Primary/secondary colors from admin panel — with fallback so UI never breaks
     if admin hasn't configured colors yet (#FFD400 = eXtra yellow, #003145 = eXtra navy) */
  --extra-yellow:        var(--web-primary,  #FFD400);
  --extra-yellow-dark:   var(--web-primary,  #E6BE00);
  --extra-yellow-hover:  var(--web-primary,  #FFD400);
  --extra-navy:          var(--web-secondary, #003145);
  --extra-navy-light:    var(--web-secondary, #003145);
  --extra-dark:          #0B1F2A;
  --extra-bg:            #F2F3F5;
  --extra-white:         #FFFFFF;
  --extra-text:          #1A1A1A;
  --extra-text-sec:      #4B5563;
  --extra-muted:         #6B7280;
  --extra-border:        #E5E7EB;
  --extra-border-light:  #F3F4F6;
  --extra-price-red:     #E2231A;
  --extra-green:         #16A34A;
  --extra-green-bg:      #DCFCE7;
  --extra-radius:        10px;
  --extra-radius-sm:     6px;
  --extra-radius-lg:     16px;
  --extra-shadow:        0 1px 6px rgba(0,0,0,.07);
  --extra-shadow-md:     0 2px 12px rgba(0,0,0,.09);
  --extra-shadow-hover:  0 6px 20px rgba(0,0,0,.13);
  --extra-transition:    all 0.2s ease;
}

/* ---- 3. BASE / TYPOGRAPHY ---- */
body {
  font-family: 'Cairo', 'Open Sans', sans-serif !important;
  background-color: var(--extra-bg) !important;
  color: var(--extra-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Cairo', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
}

p, span, a, li, td, th, input, button, select, textarea {
  font-family: 'Cairo', 'Open Sans', sans-serif;
}

/* ============================================================
   4. TOP UTILITY BAR  — eXtra style: white/light background
   ============================================================ */
header.rtl.__inline-10 .topbar {
  background-color: #F7F8FA !important;
  border-bottom: 1px solid var(--extra-border) !important;
  padding: 5px 0 !important;
  min-height: 34px !important;
}

header.rtl.__inline-10 .topbar .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 24px !important;
}

header.rtl.__inline-10 .topbar .topbar-link,
header.rtl.__inline-10 .topbar .topbar-text {
  color: #555 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'Cairo', sans-serif !important;
}

header.rtl.__inline-10 .topbar .topbar-link:hover {
  color: var(--extra-navy) !important;
  text-decoration: none !important;
}

header.rtl.__inline-10 .topbar .dropdown-toggle::after {
  border-top-color: #888 !important;
}

header.rtl.__inline-10 .topbar .dropdown-menu {
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-hover) !important;
  border: 1px solid var(--extra-border) !important;
}

header.rtl.__inline-10 .topbar .dropdown-item {
  font-size: 13px !important;
  font-family: 'Cairo', sans-serif !important;
  color: var(--extra-text) !important;
  padding: 6px 16px !important;
}

header.rtl.__inline-10 .topbar .dropdown-item:hover {
  background-color: rgba(0, 49, 69, 0.06) !important;
  color: var(--extra-navy) !important;
}

/* ============================================================
   5. MAIN HEADER (Navbar Sticky)
   ============================================================ */
header.rtl.__inline-10 .navbar-sticky.bg-light,
header.rtl.__inline-10 .navbar-sticky.mobile-head {
  background-color: var(--extra-white) !important;
  box-shadow: 0 2px 12px rgba(0, 49, 69, 0.08) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: none !important;
}

header.rtl.__inline-10 .navbar-sticky .navbar.navbar-expand-md {
  padding: 0 !important;
}

/* Logo */
header.rtl.__inline-10 .navbar-brand {
  flex-shrink: 0 !important;
}

header.rtl.__inline-10 .navbar-brand img.__inline-11 {
  max-height: 50px !important;
  width: auto !important;
}

/* Search bar - eXtra style */
header.rtl.__inline-10 .input-group-overlay.search-form-mobile {
  flex: 1 1 0 !important;
  max-width: 640px !important;
  margin: 0 16px !important;
}

header.rtl.__inline-10 .search-form-mobile .search_form > .d-flex {
  border: 2px solid var(--extra-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #FAFAFA !important;
  transition: var(--extra-transition) !important;
}

header.rtl.__inline-10 .search-form-mobile .search_form > .d-flex:focus-within {
  border-color: var(--extra-yellow) !important;
  background-color: var(--extra-white) !important;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.18) !important;
}

header.rtl.__inline-10 .search-form-mobile .form-control.search-bar-input {
  border: none !important;
  background: transparent !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  color: var(--extra-text) !important;
  padding: 10px 16px !important;
  height: 46px !important;
  box-shadow: none !important;
}

header.rtl.__inline-10 .search-form-mobile .form-control.search-bar-input::placeholder {
  color: var(--extra-muted) !important;
  font-size: 13px !important;
}

header.rtl.__inline-10 .search-form-mobile button.search_button {
  background-color: var(--extra-yellow) !important;
  border: none !important;
  border-radius: 0 !important;
  height: 46px !important;
  padding: 0 22px !important;
  flex-shrink: 0 !important;
  transition: var(--extra-transition) !important;
  cursor: pointer !important;
}

header.rtl.__inline-10 .search-form-mobile button.search_button:hover {
  background-color: var(--extra-yellow-dark) !important;
}

header.rtl.__inline-10 .search-form-mobile button.search_button .input-group-text {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}

header.rtl.__inline-10 .search-form-mobile button.search_button .czi-search {
  color: var(--extra-navy) !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

/* Search autocomplete card */
header .search-card {
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-hover) !important;
  border: 1px solid var(--extra-border) !important;
}

/* Navbar tools (icons) */
header.rtl.__inline-10 .navbar-tool-icon-box.bg-secondary {
  background-color: var(--extra-bg) !important;
  border-radius: var(--extra-radius-sm) !important;
  width: 42px !important;
  height: 42px !important;
  transition: var(--extra-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

header.rtl.__inline-10 .navbar-tool-icon-box.bg-secondary:hover {
  background-color: var(--extra-yellow) !important;
}

header.rtl.__inline-10 .navbar-tool-icon-box .navbar-tool-icon,
header.rtl.__inline-10 .navbar-tool-icon-box .czi-heart,
header.rtl.__inline-10 .navbar-tool-icon-box .tio-search {
  color: var(--extra-navy) !important;
  font-size: 18px !important;
}

/* Cart counter badge */
header.rtl.__inline-10 .navbar-tool-label {
  background-color: var(--extra-price-red) !important;
  color: var(--extra-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  line-height: 18px !important;
}

/* Wishlist count */
header.rtl.__inline-10 .countWishlist {
  background-color: var(--extra-price-red) !important;
  color: var(--extra-white) !important;
}

/* User dropdown */
header.rtl.__inline-10 .navbar-tool-text {
  font-family: 'Cairo', sans-serif !important;
  color: var(--extra-text) !important;
}

header.rtl.__inline-10 .navbar-tool-text small {
  color: var(--extra-muted) !important;
  font-size: 11px !important;
}

/* ============================================================
   6. MAIN NAVIGATION BAR — eXtra style: white, categories as horizontal links
   ============================================================ */
header.rtl.__inline-10 .navbar-stuck-menu {
  background-color: var(--extra-white) !important;
  border-top: 1px solid var(--extra-border) !important;
  border-bottom: 1px solid var(--extra-border) !important;
  padding: 0 !important;
  min-height: 44px !important;
}

header.rtl.__inline-10 .navbar-stuck-menu .navbar-expand-md {
  padding: 0 !important;
  min-height: 44px !important;
}

header.rtl.__inline-10 .navbar-stuck-menu .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

/* ── "الفئات" trigger button in main header (like eXtra's "المنتجات") ── */
.extra-cat-btn {
  background-color: var(--extra-yellow) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--extra-navy) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: var(--extra-transition) !important;
  line-height: 1.3 !important;
}
.extra-cat-btn:hover {
  background-color: var(--extra-yellow-dark) !important;
}
.extra-cat-btn svg path {
  fill: var(--extra-navy) !important;
}

/* ── Megamenu dropdown — eXtra style sidebar ── */
.megamenu-wrap {
  background-color: var(--extra-white) !important;
  border-top: 3px solid var(--extra-yellow) !important;
  border-bottom: 1px solid var(--extra-border) !important;
  box-shadow: 0 8px 32px rgba(0, 49, 69, 0.14) !important;
  z-index: 999 !important;
}
.megamenu-wrap .container {
  padding: 0 !important;
}
.megamenu-wrap .category-menu-wrap {
  max-height: 480px !important;
  overflow-y: auto !important;
}
.megamenu-wrap .category-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  min-width: 260px !important;
}
.megamenu-wrap .category-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 20px !important;
  color: var(--extra-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
  border-right: 3px solid transparent !important;
}
html[dir="ltr"] .megamenu-wrap .category-menu > li > a {
  border-right: none !important;
  border-left: 3px solid transparent !important;
}
.megamenu-wrap .category-menu > li > a:hover {
  background-color: rgba(255, 212, 0, 0.1) !important;
  border-right-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
}
html[dir="ltr"] .megamenu-wrap .category-menu > li > a:hover {
  border-left-color: var(--extra-yellow) !important;
}
.megamenu-wrap .category-menu > li > a img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
}
/* Arrow icon on categories with sub-items */
.megamenu-wrap .category-menu > li.has-sub-item > a .czi-arrow-left,
.megamenu-wrap .category-menu > li.has-sub-item > a .czi-arrow-right {
  margin-right: auto !important;
  margin-left: 0 !important;
  color: var(--extra-muted) !important;
  font-size: 12px !important;
}
html[dir="ltr"] .megamenu-wrap .category-menu > li.has-sub-item > a .czi-arrow-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Mega menu sub-panel */
.megamenu-wrap .mega_menu {
  background-color: var(--extra-white) !important;
  border: 1px solid var(--extra-border) !important;
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-hover) !important;
}
.megamenu-wrap .mega_menu_inner h6 a {
  color: var(--extra-navy) !important;
  font-weight: 700 !important;
  font-family: 'Cairo', sans-serif !important;
}
.megamenu-wrap .mega_menu_inner a {
  color: var(--extra-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
}
.megamenu-wrap .mega_menu_inner a:hover {
  color: var(--extra-navy) !important;
}

/* ── Secondary nav (eXtra second-row style) ── */
.extra-secondary-nav {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 0 !important;
  height: 44px !important;
  align-items: stretch !important;
}
.extra-secondary-nav::-webkit-scrollbar { display: none; }

.extra-secondary-nav .nav-link {
  color: #1A1A1A !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Cairo', sans-serif !important;
  padding: 0 13px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
  text-decoration: none !important;
}
.extra-secondary-nav .nav-link:hover,
.extra-secondary-nav .nav-item.active .nav-link {
  color: var(--extra-navy) !important;
  border-bottom-color: var(--extra-yellow) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}
.extra-secondary-nav .extra-deals-link .nav-link,
.extra-secondary-nav .extra-deals-nav-link {
  color: var(--extra-price-red) !important;
  font-weight: 700 !important;
}

/* Nav bar dropdown menus */
header.rtl.__inline-10 .navbar-stuck-menu .dropdown-menu {
  border-radius: var(--extra-radius) !important;
  border: 1px solid var(--extra-border) !important;
  box-shadow: var(--extra-shadow-hover) !important;
  margin-top: 0 !important;
  min-width: 180px !important;
}

header.rtl.__inline-10 .navbar-stuck-menu .dropdown-item {
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  color: var(--extra-text) !important;
  padding: 7px 16px !important;
}

header.rtl.__inline-10 .navbar-stuck-menu .dropdown-item:hover {
  background-color: rgba(0, 49, 69, 0.05) !important;
  color: var(--extra-navy) !important;
}

/* Mobile nav links inside collapse */
header.rtl.__inline-10 .navbar-stuck-menu .navbar-nav .nav-link {
  color: var(--extra-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  font-family: 'Cairo', sans-serif !important;
  white-space: nowrap !important;
}

/* Navbar toggler (mobile hamburger — dark lines on white nav) */
header.rtl.__inline-10 .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,49,69,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mobile: collapse background */
@media (max-width: 767px) {
  header.rtl.__inline-10 .navbar-stuck-menu .navbar-collapse {
    background-color: var(--extra-white) !important;
    border-top: 1px solid var(--extra-border) !important;
    padding: 8px 0 !important;
  }
}

/* ============================================================
   7. PROMO CHIPS STRIP
   ============================================================ */
.extra-promo-strip {
  background-color: var(--extra-white);
  border-bottom: 1px solid var(--extra-border-light);
  padding: 7px 0;
  overflow: hidden;
}

.extra-promo-strip .container {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.extra-promo-strip .container::-webkit-scrollbar { display: none; }

.extra-promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 13px;
  background-color: var(--extra-bg);
  border: 1px solid var(--extra-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--extra-text);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--extra-transition);
  font-family: 'Cairo', sans-serif;
  text-decoration: none !important;
  line-height: 1.5;
}

.extra-promo-chip:hover {
  background-color: var(--extra-yellow);
  border-color: var(--extra-yellow);
  color: var(--extra-navy) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 212, 0, 0.35);
}

.extra-promo-chip .extra-chip-icon {
  font-size: 13px;
  color: var(--extra-navy);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .extra-promo-strip { display: none; }
}

/* ============================================================
   8. HERO SLIDER
   ============================================================ */
.hero-slider .owl-item a {
  display: block;
  border-radius: var(--extra-radius-lg) !important;
  overflow: hidden !important;
}

.hero-slider .owl-item img.__slide-img {
  border-radius: var(--extra-radius-lg) !important;
  display: block !important;
}

/* Slider nav arrows */
.hero-slider .owl-nav {
  margin: 0 !important;
}

.hero-slider .owl-nav .owl-prev,
.hero-slider .owl-nav .owl-next {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;
  box-shadow: var(--extra-shadow-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: var(--extra-transition) !important;
  z-index: 5 !important;
  border: none !important;
  color: var(--extra-navy) !important;
  font-size: 18px !important;
}

.hero-slider .owl-nav .owl-prev { left: 10px !important; }
.hero-slider .owl-nav .owl-next { right: 10px !important; }

.hero-slider .owl-nav .owl-prev:hover,
.hero-slider .owl-nav .owl-next:hover {
  background: var(--extra-yellow) !important;
  box-shadow: var(--extra-shadow-hover) !important;
}

/* Slider dots */
.hero-slider .owl-dots {
  position: absolute;
  bottom: 12px;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.hero-slider .owl-dots .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 4px !important;
  transition: var(--extra-transition) !important;
  margin: 0 !important;
}

.hero-slider .owl-dots .owl-dot.active span {
  width: 24px !important;
  background-color: var(--extra-yellow) !important;
}

/* Category menu sidebar in slider */
.__top-slider-cate .category-menu-wrap {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-md) !important;
  border: 1px solid var(--extra-border-light) !important;
  overflow: hidden !important;
}

.__top-slider-cate .category-menu {
  padding: 4px 0 !important;
  margin: 0 !important;
}

.__top-slider-cate .category-menu li {
  list-style: none !important;
  position: relative !important;
}

.__top-slider-cate .category-menu li a {
  color: var(--extra-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: var(--extra-transition) !important;
  text-decoration: none !important;
}

.__top-slider-cate .category-menu li a:hover {
  background-color: rgba(255, 212, 0, 0.08) !important;
  color: var(--extra-navy) !important;
}

.__top-slider-cate .category-menu li .mega_menu {
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-hover) !important;
  border: 1px solid var(--extra-border-light) !important;
  left: 100% !important;
}

html[dir="rtl"] .__top-slider-cate .category-menu li .mega_menu {
  left: auto !important;
  right: 100% !important;
}

.__top-slider-cate .category-menu .text-primary {
  color: var(--extra-navy) !important;
  font-weight: 700 !important;
}

/* Hero slider wrapper */
.bg-transparent.pt-3 {
  background-color: transparent !important;
}

/* ============================================================
   8b. HERO — Full-Width Peek Carousel (matches Extra.com exactly)
   ────────────────────────────────────────────────────────────
   Source analysis of extra.com swiper:
   - Each slide: width=1440 height=480, margin-left=-65px
   - Container: min-height:480px, full viewport width, no padding
   - Peek: 65px of adjacent slides visible on each side
   - object-fit: contain, object-position: left center
   We replicate this with Owl stagePadding:65 + full-width wrapper.
   ============================================================ */

/* Outer: clip at section level only — inner must be visible for peek to work */
.extra-hero-section {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.extra-hero-outer {
  overflow: visible;
  width: 100%;
}

/* ── Full-width wrapper — padding-free ──
   The 80% visual appearance comes from stagePadding in Owl JS (10% of viewport).
   Padding here would double-stack the gap and break the layout. */
.extra-hero-fw {
  width: 100%;
  padding: 0;
  overflow: visible;
}

/* Override style.css calc(100% - 254px) that shrinks slider for old sidebar */
.extra-hero-fw.__top-slider-images,
.extra-hero-fw .__top-slider-images {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Owl carousel fills the padded 80% window */
.extra-hero-fw .owl-carousel {
  width: 100% !important;
}

/* CRITICAL: must be visible so stagePadding peek shows in the 10% gap areas */
.extra-hero-fw .owl-stage-outer {
  overflow: visible !important;
}

/* Fix grey background artifact on slide links */
.extra-hero-fw .owl-item a,
.__top-slider-images .owl-item a {
  background-color: transparent !important;
  background: none !important;
}

/* ── Slide image: 100% of the padded carousel = visually ~80% of viewport ──
   Image is full-width of the carousel (which is already the 80% padded window).
   Adjacent slides peek 65px into the padding area on each side — their images
   start at position 0, so the full 65px shows actual slide image content. */
.extra-hero-fw .owl-item img.__slide-img {
  height: 480px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 16px !important;
}

/* Override style.css heights (340/386/420px) → 480px */
.extra-hero-fw .__slide-img,
.extra-hero-fw .__top-slider-images .__slide-img,
.extra-hero-fw .owl-item img.__slide-img {
  height: 480px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
}

/* Slide anchor: transparent, no overflow so border-radius on img shows */
.extra-hero-fw .owl-item a {
  display: block !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Active slide: full opacity */
.hero-slider .owl-item.active > a,
.hero-slider .owl-item.active > .extra-slide-item {
  opacity: 1;
}

/* Peek slides: dimmed so active stands out */
.hero-slider .owl-item:not(.active) > a,
.hero-slider .owl-item:not(.active) > .extra-slide-item {
  opacity: 0.60;
  transform: scale(0.97);
  transition: opacity 0.3s, transform 0.3s;
}

/* Nav arrows: just inside each edge of the 80% image (the carousel width) */
.extra-hero-fw .hero-slider .owl-nav .owl-prev {
  left: 20px !important;
}
.extra-hero-fw .hero-slider .owl-nav .owl-next {
  right: 20px !important;
}
html[dir="rtl"] .extra-hero-fw .hero-slider .owl-nav .owl-prev {
  left: auto !important;
  right: 20px !important;
}
html[dir="rtl"] .extra-hero-fw .hero-slider .owl-nav .owl-next {
  right: auto !important;
  left: 20px !important;
}

/* Dots: centered under the active slide */
.extra-hero-fw .hero-slider .owl-dots {
  padding: 0;
}

/* Reset the sidebar-width override from style.css at 1280px+ */
@media (min-width: 1280px) {
  .extra-hero-fw.__top-slider-images {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .extra-hero-fw {
    padding: 0 4%;   /* tighter gap on mobile */
  }
  .extra-hero-fw .owl-item img.__slide-img {
    height: 200px !important;
    border-radius: 10px !important;
  }
  /* No peek on mobile — clip stage */
  .extra-hero-fw .owl-stage-outer { overflow: hidden !important; }
  .hero-slider .owl-item:not(.active) > a,
  .hero-slider .owl-item:not(.active) > .extra-slide-item {
    opacity: 1;
    transform: none;
  }
  .extra-hero-fw .hero-slider .owl-nav .owl-prev { left: 10px !important; }
  .extra-hero-fw .hero-slider .owl-nav .owl-next { right: 10px !important; }
  html[dir="rtl"] .extra-hero-fw .hero-slider .owl-nav .owl-prev { left: auto !important; right: 10px !important; }
  html[dir="rtl"] .extra-hero-fw .hero-slider .owl-nav .owl-next { right: auto !important; left: 10px !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .extra-hero-fw .owl-item img.__slide-img { height: 300px !important; }
  .extra-hero-fw .hero-slider .owl-nav .owl-prev { left: 16px !important; }
  .extra-hero-fw .hero-slider .owl-nav .owl-next { right: 16px !important; }
  html[dir="rtl"] .extra-hero-fw .hero-slider .owl-nav .owl-prev { left: auto !important; right: 16px !important; }
  html[dir="rtl"] .extra-hero-fw .hero-slider .owl-nav .owl-next { right: auto !important; left: 16px !important; }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .extra-hero-fw .owl-item img.__slide-img { height: 380px !important; }
}

/* ============================================================
   9. SECTION CARDS (White cards wrapping each content section)
   ============================================================ */
.container .__inline-62,
.container.rtl .__inline-62 {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  padding: 0 0 12px 0 !important;
  overflow: hidden !important;
}

.section-card-margin {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
}

/* Section title headers */
.feature-product-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--extra-text) !important;
}

.arrival-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--extra-text) !important;
  margin-bottom: 0 !important;
}

.featured_deal_title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--extra-text) !important;
}

/* View all link pill button */
.view-all-text,
a.view-all-text {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--extra-navy) !important;
  border: 1.5px solid var(--extra-border) !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  transition: var(--extra-transition) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

a.view-all-text:hover {
  background-color: var(--extra-navy) !important;
  color: var(--extra-white) !important;
  border-color: var(--extra-navy) !important;
  text-decoration: none !important;
}

/* ============================================================
   10. PRODUCT CARDS — eXtra Style
   ============================================================ */
/* Feature product card (_feature-product.blade.php) */
.product-single-hover {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow) !important;
  border: 1px solid var(--extra-border-light) !important;
  transition: var(--extra-transition) !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.product-single-hover:hover {
  box-shadow: var(--extra-shadow-hover) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255, 212, 0, 0.4) !important;
}

/* Discount badge on card */
.product-single-hover .for-discount-value {
  background-color: var(--extra-price-red) !important;
  color: var(--extra-white) !important;
  border-radius: 4px 0 4px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3 !important;
  font-family: 'Cairo', sans-serif !important;
}

html[dir="rtl"] .product-single-hover .for-discount-value {
  left: auto !important;
  right: 0 !important;
  border-radius: 0 4px 0 4px !important;
}

/* Product image wrapper */
.product-single-hover .inline_product {
  background-color: var(--extra-white) !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
}

.product-single-hover .inline_product a.rounded img,
.product-single-hover .inline_product img {
  width: 100% !important;
  max-height: 170px !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Quick view overlay */
.product-single-hover .quick-view {
  opacity: 0 !important;
  transition: var(--extra-transition) !important;
}

.product-single-hover:hover .quick-view {
  opacity: 1 !important;
}

.product-single-hover .quick-view .btn-circle {
  background: var(--extra-white) !important;
  border: 1px solid var(--extra-border) !important;
  box-shadow: var(--extra-shadow) !important;
  transition: var(--extra-transition) !important;
}

.product-single-hover .quick-view .btn-circle:hover {
  background: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
}

/* Product details text area */
.product-single-hover .single-product-details {
  padding: 8px 12px 14px !important;
  border-top: 1px solid var(--extra-border-light) !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.product-single-hover .single-product-details h3 {
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}

.product-single-hover .single-product-details h3 a {
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--extra-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.45 !important;
}

.product-single-hover .single-product-details h3 a:hover {
  color: var(--extra-navy) !important;
  text-decoration: none !important;
}

/* Price styling */
.product-single-hover .product-price {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.product-single-hover .product-price .text-accent,
.product-single-hover .product-price .text-dark.fs-15,
.product-single-hover .product-price .text-dark {
  font-family: 'Cairo', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--extra-price-red) !important;
}

.product-single-hover .product-price del.category-single-product-price,
.product-single-hover .category-single-product-price {
  color: var(--extra-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}

/* Star ratings */
.product-single-hover .tio-star,
.product-single-hover .tio-star-half {
  color: #F59E0B !important;
  font-size: 11px !important;
}

.product-single-hover .tio-star-outlined {
  color: #D1D5DB !important;
  font-size: 11px !important;
}

.product-single-hover .badge-style,
.product-single-hover .badge-style2 {
  color: var(--extra-muted) !important;
  font-size: 11px !important;
}

/* Flash deal product cards (_product-card-1 and _product-card-2) */
.flash_deal_product {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow) !important;
  border: 1px solid var(--extra-border-light) !important;
  transition: var(--extra-transition) !important;
  overflow: hidden !important;
  position: relative !important;
}

.flash_deal_product:hover {
  box-shadow: var(--extra-shadow-hover) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255, 212, 0, 0.35) !important;
}

.flash_deal_product .for-discount-value {
  background-color: var(--extra-price-red) !important;
  color: var(--extra-white) !important;
  border-radius: 4px 0 4px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3 !important;
}

html[dir="rtl"] .flash_deal_product .for-discount-value {
  left: auto !important;
  right: 0 !important;
  border-radius: 0 4px 0 4px !important;
}

.flash_deal_product .flash-deals-background-image {
  background-color: var(--extra-bg) !important;
  border-radius: var(--extra-radius-sm) !important;
  padding: 8px !important;
}

.flash_deal_product .flash-deals-background-image img.__img-125px {
  max-width: 120px !important;
  max-height: 120px !important;
  object-fit: contain !important;
}

.flash_deal_product .flash-product-title {
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--extra-text) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.flash_deal_product .flash-product-title:hover {
  color: var(--extra-navy) !important;
  text-decoration: none !important;
}

.flash_deal_product .flash-product-price {
  font-family: 'Cairo', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--extra-price-red) !important;
}

.flash_deal_product .category-single-product-price {
  color: var(--extra-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

.flash_deal_product .tio-star,
.flash_deal_product .tio-star-half {
  color: #F59E0B !important;
  font-size: 11px !important;
}

.flash_deal_product .tio-star-outlined {
  color: #D1D5DB !important;
  font-size: 11px !important;
}

.flash-deal-shadow {
  box-shadow: var(--extra-shadow) !important;
}

/* ============================================================
   11. FLASH DEAL SECTION WRAPPER
   ============================================================ */
.__flash-deal-wrap,
.flash-deal-section,
section.featured_deal {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
}

.__featured-deal-wrap {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  padding: 16px !important;
  box-shadow: var(--extra-shadow) !important;
}

.__featured-deal-wrap.bg--light {
  background-color: var(--extra-white) !important;
}

/* Flash deal header */
.flash-section-title,
.__flash-deal-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  color: var(--extra-text) !important;
}

/* Countdown timers — identify any timer digits */
.__time,
.time-count,
.countdown-timer span,
[class*="countdown"],
[id*="countdown"] span {
  background-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
  padding: 2px 6px !important;
  min-width: 32px !important;
  display: inline-block !important;
  text-align: center !important;
}

/* ============================================================
   12. CATEGORY SECTION HOME
   ============================================================ */
.__category-section-home,
.category-section-home {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  padding: 16px !important;
}

/* Category icon — make it circular */
.category-icon-div img,
.category-single-item img {
  border-radius: 50% !important;
  border: 2px solid var(--extra-border-light) !important;
  transition: var(--extra-transition) !important;
  object-fit: cover !important;
  background-color: var(--extra-bg) !important;
}

.category-icon-div:hover img,
.category-single-item:hover img {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.18) !important;
  transform: scale(1.04) !important;
}

.category-single-item .text-dark,
.category-single-item span,
.category-single-item p {
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--extra-text) !important;
  margin-top: 6px !important;
}

.category-single-item a {
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
  transition: var(--extra-transition) !important;
}

.category-single-item a:hover span,
.category-single-item a:hover p {
  color: var(--extra-navy) !important;
}

/* ============================================================
   13. COMPANY RELIABILITY / TRUST BAR
   ============================================================ */
.shipping-policy-web {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  padding: 20px 0 !important;
}

.footer-top-slide-item {
  padding: 8px !important;
}

.footer-top-slide-item .shipping-method-system {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer-top-slide-item .shopping-method-icon {
  width: 64px !important;
  height: 64px !important;
  background-color: rgba(255, 212, 0, 0.1) !important;
  border: 2px solid rgba(255, 212, 0, 0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--extra-transition) !important;
}

.footer-top-slide-item:hover .shopping-method-icon {
  background-color: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
}

.footer-top-slide-item .shopping-method-icon img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

.footer-top-slide-item .w-100.text-center p {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--extra-text) !important;
}

/* ============================================================
   14. FOOTER — LINKS / SERVICE CARDS
   ============================================================ */
.max-w-1160px .row .footer-slide-item {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  border: 1px solid var(--extra-border-light) !important;
  transition: var(--extra-transition) !important;
  padding: 16px 12px !important;
}

.footer-slide-item:hover {
  box-shadow: var(--extra-shadow-hover) !important;
  border-color: var(--extra-yellow) !important;
}

.footer-slide-item .heading {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--extra-text) !important;
}

.footer-slide-item .des {
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  color: var(--extra-muted) !important;
}

.footer-slide-item a {
  text-decoration: none !important;
  color: var(--extra-text) !important;
}

.footer-slide-item:hover .heading {
  color: var(--extra-yellow) !important;
}

/* ============================================================
   15. FOOTER (Dark eXtra style)
   ============================================================ */

/* Fixed dark navy background — independent of admin secondary color.
   Yellow top border ties the footer to the brand primary color. */
footer.page-footer {
  background-color: #13202f !important;
  color: #e8edf2 !important;
  border-top: 4px solid var(--extra-yellow, #FFD400) !important;
}

footer.page-footer .custom-light-primary-color-20,
footer.page-footer > .custom-light-primary-color-20 {
  background-color: #13202f !important;
}

footer.page-footer .pt-4 {
  background-color: #13202f !important;
}

footer.page-footer .footer-header {
  color: var(--extra-yellow, #FFD400) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid rgba(255, 212, 0, 0.25) !important;
}

footer.page-footer .widget-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

footer.page-footer .widget-list-item {
  margin-bottom: 8px !important;
}

footer.page-footer .widget-list-link {
  color: rgba(232, 237, 242, 0.7) !important;
  font-size: 13px !important;
  font-family: 'Cairo', sans-serif !important;
  transition: var(--extra-transition) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

footer.page-footer .widget-list-link::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background-color: var(--extra-yellow, #FFD400) !important;
  opacity: 0.5 !important;
  flex-shrink: 0 !important;
  transition: var(--extra-transition) !important;
}

footer.page-footer .widget-list-link:hover {
  color: var(--extra-yellow, #FFD400) !important;
  text-decoration: none !important;
}

footer.page-footer .widget-list-link:hover::before {
  opacity: 1 !important;
}

html[dir="rtl"] footer.page-footer .widget-list-link:hover {
  transform: none !important;
}

footer.page-footer .text-muted {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Copyright / bottom bar — clearly distinct from main footer body */
footer.page-footer .bg-white-overlay-50 {
  background-color: #0a1622 !important;
  border-top: 1px solid rgba(255, 212, 0, 0.15) !important;
}

footer.page-footer .bg-white-overlay-50 p,
footer.page-footer .bg-white-overlay-50 span,
footer.page-footer .bg-white-overlay-50 li,
footer.page-footer .bg-white-overlay-50 a {
  color: rgba(232, 237, 242, 0.45) !important;
  font-size: 12px !important;
  font-family: 'Cairo', sans-serif !important;
}

footer.page-footer .bg-white-overlay-50 a:hover {
  color: var(--extra-yellow, #FFD400) !important;
}

/* Footer copyright bar (class-based fallback) */
footer.page-footer .page-footer-bottom,
footer.page-footer .footer-bottom {
  background-color: #0a1622 !important;
  border-top: 1px solid rgba(255, 212, 0, 0.15) !important;
  padding: 14px 0 !important;
}

footer.page-footer .footer-bottom .text-muted,
footer.page-footer .footer-bottom small {
  color: rgba(232, 237, 242, 0.45) !important;
  font-size: 12px !important;
}

/* Footer logo — invert to white on dark bg */
footer.page-footer .footer-web-logo img {
  filter: brightness(0) invert(1) !important;
  max-height: 44px !important;
}

/* Download app heading in footer */
footer.page-footer h6.footer-header {
  font-size: 11px !important;
}

/* Contact info links (phone, email, support) */
footer.page-footer .start_address .widget-list-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 0 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

footer.page-footer .start_address .widget-list-link:hover {
  color: var(--extra-yellow) !important;
  transform: none !important;
}

footer.page-footer .start_address i {
  color: var(--extra-yellow, #FFD400) !important;
  font-size: 14px !important;
  width: 16px !important;
  flex-shrink: 0 !important;
}

footer.page-footer .fa-map-marker {
  color: var(--extra-yellow, #FFD400) !important;
}

footer.page-footer .__text-14px {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13px !important;
  font-family: 'Cairo', sans-serif !important;
}

/* Social media buttons in footer */
footer.page-footer .social-btn,
footer.page-footer .social-icon,
footer.page-footer a[href*="facebook"],
footer.page-footer a[href*="twitter"],
footer.page-footer a[href*="instagram"],
footer.page-footer a[href*="youtube"],
footer.page-footer a[href*="linkedin"],
footer.page-footer a[href*="tiktok"],
footer.page-footer a[href*="pinterest"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background-color: rgba(255, 212, 0, 0.12) !important;
  border: 1px solid rgba(255, 212, 0, 0.3) !important;
  color: var(--extra-yellow, #FFD400) !important;
  transition: var(--extra-transition) !important;
  text-decoration: none !important;
  margin: 3px !important;
  font-size: 15px !important;
}

footer.page-footer .social-btn:hover,
footer.page-footer .social-icon:hover,
footer.page-footer a[href*="facebook"]:hover,
footer.page-footer a[href*="twitter"]:hover,
footer.page-footer a[href*="instagram"]:hover,
footer.page-footer a[href*="youtube"]:hover,
footer.page-footer a[href*="linkedin"]:hover,
footer.page-footer a[href*="tiktok"]:hover,
footer.page-footer a[href*="pinterest"]:hover {
  background-color: var(--extra-yellow, #FFD400) !important;
  border-color: var(--extra-yellow, #FFD400) !important;
  color: #13202f !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(255, 212, 0, 0.3) !important;
}

/* Subscribe form — targets actual classes used in the blade template */
footer.page-footer .subscribe-border,
footer.page-footer input[name="subscription_email"] {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--extra-white) !important;
  border-radius: var(--extra-radius-sm) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  padding-inline-end: 100px !important;
}

footer.page-footer .subscribe-border::placeholder,
footer.page-footer input[name="subscription_email"]::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}

footer.page-footer .subscribe-border:focus,
footer.page-footer input[name="subscription_email"]:focus {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.15) !important;
  outline: none !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

footer.page-footer .subscribe-button {
  background-color: var(--extra-yellow, #FFD400) !important;
  color: #13202f !important;
  border: none !important;
  border-radius: var(--extra-radius-sm) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 0 18px !important;
  transition: var(--extra-transition) !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(255, 212, 0, 0.25) !important;
}

footer.page-footer .subscribe-button:hover {
  background-color: #e6be00 !important;
  color: #13202f !important;
  box-shadow: 0 4px 14px rgba(255, 212, 0, 0.4) !important;
}

/* HR dividers inside footer — visible on dark background */
footer.page-footer hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
  opacity: 1 !important;
}

/* "Start a conversation" / "Address" section labels */
footer.page-footer .font-weight-bold.footer-header {
  color: var(--extra-yellow, #FFD400) !important;
}

/* Newsletter description text */
footer.page-footer .mobile-fs-12 {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
}

/* App store buttons */
.store-contents a img {
  border-radius: var(--extra-radius-sm) !important;
  transition: var(--extra-transition) !important;
  opacity: 0.9;
}

.store-contents a:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

/* ============================================================
   16. OWL CAROUSEL GLOBAL NAVIGATION
   ============================================================ */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  background: var(--extra-white) !important;
  border: 1px solid var(--extra-border) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--extra-shadow) !important;
  transition: var(--extra-transition) !important;
  color: var(--extra-navy) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
  background: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
  box-shadow: var(--extra-shadow-md) !important;
}

/* ============================================================
   17. GLOBAL BUTTONS
   ============================================================ */
.btn--primary,
.btn-primary {
  background-color: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
  font-weight: 700 !important;
  font-family: 'Cairo', sans-serif !important;
  transition: var(--extra-transition) !important;
  border-radius: var(--extra-radius-sm) !important;
}

.btn--primary:hover,
.btn-primary:hover {
  background-color: var(--extra-yellow-dark) !important;
  border-color: var(--extra-yellow-dark) !important;
  color: var(--extra-dark) !important;
}

.web-text-primary {
  color: var(--extra-navy) !important;
}

/* ============================================================
   18. CLEARANCE SALE & BANNERS
   ============================================================ */
.clearance-sale-wrap,
.__clearance-products {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
}

/* Promotional / footer banners */
.footer_banner_img.__inline-63 {
  border-radius: var(--extra-radius) !important;
  display: block !important;
  width: 100% !important;
}

.promotional-banner-slider .owl-item a {
  display: block !important;
}

.promotional-banner-slider .owl-item img {
  border-radius: var(--extra-radius) !important;
}

/* ============================================================
   19. BRANDS SECTION
   ============================================================ */
.brand-slider {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  padding: 12px 0 !important;
}

.brands-slider .__brand-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  border-radius: var(--extra-radius-sm) !important;
  transition: var(--extra-transition) !important;
  border: 1px solid transparent !important;
}

.brands-slider .__brand-item:hover {
  border-color: var(--extra-border) !important;
  background-color: var(--extra-bg) !important;
  box-shadow: var(--extra-shadow) !important;
}

.brands-slider .__brand-item img {
  max-height: 48px !important;
  object-fit: contain !important;
  filter: grayscale(25%) !important;
  transition: var(--extra-transition) !important;
  opacity: 0.85 !important;
}

.brands-slider .__brand-item:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* ============================================================
   20. TOP SELLERS / VENDORS
   ============================================================ */
.seller-single-div {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  border: 1px solid var(--extra-border-light) !important;
  box-shadow: var(--extra-shadow) !important;
  transition: var(--extra-transition) !important;
  overflow: hidden !important;
}

.seller-single-div:hover {
  box-shadow: var(--extra-shadow-hover) !important;
  border-color: rgba(255, 212, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   21. DEAL OF THE DAY
   ============================================================ */
.__deal-of-day-wrap,
.deal-of-the-day-wrap {
  background: linear-gradient(135deg, var(--extra-navy) 0%, var(--extra-navy-light) 100%) !important;
  border-radius: var(--extra-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--extra-shadow-hover) !important;
}

/* ============================================================
   22. NEW ARRIVALS SECTION
   ============================================================ */
section.new-arrival-section {
  background-color: transparent !important;
}

section.new-arrival-section .container.rtl {
  background-color: transparent !important;
}

.new_arrival_product {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  overflow: hidden !important;
}

/* ============================================================
   23. BEST SELLING & TOP RATED SECTIONS
   ============================================================ */
.__best-selling-wrap,
.__top-rated-wrap {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  overflow: hidden !important;
}

/* ============================================================
   24. SEARCH RESULTS PAGE
   ============================================================ */
.section-title,
.search-result-section-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  color: var(--extra-text) !important;
}

/* Filter sidebar */
.sidebar-filter {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow) !important;
  border: 1px solid var(--extra-border-light) !important;
}

/* ============================================================
   25. CART & CHECKOUT
   ============================================================ */
.cart-title,
.checkout-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
}

/* Cart offcanvas */
.cart-offcanvas-area,
.side-cart-content {
  font-family: 'Cairo', sans-serif !important;
}

/* ============================================================
   26. MOBILE BOTTOM NAV (if exists)
   ============================================================ */
.mobile-bottom-nav,
.mobile-nav-bottom {
  background-color: var(--extra-white) !important;
  border-top: 1px solid var(--extra-border) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07) !important;
}

.mobile-bottom-nav .nav-item a,
.mobile-bottom-nav .nav-link {
  color: var(--extra-muted) !important;
  font-size: 10px !important;
  font-family: 'Cairo', sans-serif !important;
  transition: var(--extra-transition) !important;
}

.mobile-bottom-nav .nav-item.active a,
.mobile-bottom-nav .nav-link.active {
  color: var(--extra-navy) !important;
}

/* ============================================================
   27. ANNOUNCEMENT BAR
   ============================================================ */
#announcement {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ============================================================
   28. MODALS
   ============================================================ */
.modal-content {
  border-radius: var(--extra-radius-lg) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
  border-bottom: 1px solid var(--extra-border-light) !important;
  font-family: 'Cairo', sans-serif !important;
}

.modal-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  color: var(--extra-text) !important;
}

/* ============================================================
   29. BREADCRUMB
   ============================================================ */
.breadcrumb {
  background-color: transparent !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  padding: 8px 0 !important;
}

.breadcrumb-item a {
  color: var(--extra-navy) !important;
  text-decoration: none !important;
}

.breadcrumb-item.active {
  color: var(--extra-muted) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--extra-muted) !important;
}

/* ============================================================
   30. INPUT FORMS GLOBAL
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  font-family: 'Cairo', sans-serif !important;
  border-radius: var(--extra-radius-sm) !important;
  border-color: var(--extra-border) !important;
  color: var(--extra-text) !important;
}

.form-control:focus {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.18) !important;
}

/* ============================================================
   31. SECTION SPACING
   ============================================================ */
.__inline-61.d-flex.flex-column.gap-20 {
  padding: 14px 0 30px !important;
  gap: 16px !important;
}

/* Category-wise product section */
.__category-wise-product {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   32. RTL SPECIFIC OVERRIDES
   ============================================================ */
html[dir="rtl"] .view-all-text:hover {
  transform: none !important;
}

html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev i,
html[dir="rtl"] .owl-carousel .owl-nav button.owl-next i {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] footer.page-footer .widget-list-link:hover {
  transform: translateX(4px) !important;
}

html[dir="rtl"] .for-discount-value {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] .czi-arrow-right::before {
  transform: scaleX(-1) !important;
  display: inline-block !important;
}

/* ============================================================
   33. RESPONSIVE — TABLET (768–1199px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  header.rtl.__inline-10 .input-group-overlay.search-form-mobile {
    max-width: 380px !important;
    margin: 0 10px !important;
  }

  .product-single-hover .inline_product {
    min-height: 140px !important;
  }

  .product-single-hover .inline_product img {
    max-height: 130px !important;
  }
}

/* ============================================================
   34. RESPONSIVE — MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  /* Header mobile */
  header.rtl.__inline-10 .navbar-sticky.mobile-head {
    padding: 6px 0 !important;
  }

  header.rtl.__inline-10 .navbar-brand img.__inline-11 {
    max-height: 38px !important;
  }

  /* Hide desktop search on mobile (it has its own) */
  header.rtl.__inline-10 .search-form-mobile.d-lg-none .search_form .d-flex {
    border-radius: 8px !important;
  }

  /* Product cards mobile */
  .product-single-hover .inline_product {
    min-height: 130px !important;
    padding: 10px !important;
  }

  .product-single-hover .inline_product img {
    max-height: 120px !important;
  }

  .product-single-hover .single-product-details {
    padding: 6px 10px 10px !important;
  }

  .product-single-hover .product-price .text-accent,
  .product-single-hover .product-price .text-dark.fs-15 {
    font-size: 14px !important;
  }

  /* Flash deal mobile */
  .flash_deal_product .flash-deals-background-image img.__img-125px {
    max-width: 80px !important;
    max-height: 80px !important;
  }

  /* Section headers mobile */
  .feature-product-title,
  .arrival-title,
  .featured_deal_title {
    font-size: 15px !important;
  }

  /* Footer mobile */
  footer.page-footer .footer-header {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  footer.page-footer .widget-list-link {
    font-size: 12px !important;
  }

  /* Promo strip mobile — hide */
  .extra-promo-strip {
    display: none !important;
  }

  /* Nav stuck menu — white on mobile too (eXtra style) */
  header.rtl.__inline-10 .navbar-stuck-menu {
    background-color: var(--extra-white) !important;
  }

  header.rtl.__inline-10 .navbar-stuck-menu .nav-link {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--extra-text) !important;
  }

  header.rtl.__inline-10 .navbar-stuck-menu .collapse.navbar-collapse {
    background-color: var(--extra-white) !important;
    border-radius: 0 0 var(--extra-radius) var(--extra-radius) !important;
    padding: 4px 0 8px !important;
    border-top: 1px solid var(--extra-border-light) !important;
  }

  /* Footer slide items */
  .footer-slide-item {
    padding: 12px 8px !important;
  }

  .footer-slide-item .heading {
    font-size: 12px !important;
  }

  /* Sections spacing */
  .__inline-61.d-flex.flex-column.gap-20 {
    padding: 8px 0 20px !important;
    gap: 12px !important;
  }
}

/* ============================================================
   35. DESKTOP LARGE (≥ 1200px)
   ============================================================ */
@media (min-width: 1200px) {
  header.rtl.__inline-10 .input-group-overlay.search-form-mobile {
    max-width: 680px !important;
  }

  .product-single-hover .inline_product {
    min-height: 190px !important;
  }

  .product-single-hover .inline_product img {
    max-height: 180px !important;
  }
}

/* ============================================================
   36. LOADING / SPINNER
   ============================================================ */
.loading-parent-first-div .spinner-border,
.loading-parent-first-div svg {
  color: var(--extra-yellow) !important;
}

/* ============================================================
   37. APP DOWNLOAD BANNER (Mobile)
   ============================================================ */
.app-download-popup {
  background-color: var(--extra-white) !important;
  border: 1px solid var(--extra-border) !important;
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-hover) !important;
}

.app-download-popup .btn--primary {
  background-color: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

/* ============================================================
   38. HERO BANNER SECTION — TARGETED FIXES
   ============================================================ */

/* ---- Kill the ugly grey background on owl slide items ---- */
.__top-slider-images .owl-item a,
.__top-slider-images .owl-item .extra-slide-item,
.extra-hero-slider .owl-item a {
  background-color: transparent !important;
  background: none !important;
}

/* ---- Hero section outer wrapper ---- */
.extra-hero-section {
  padding-top: 12px !important;
  padding-bottom: 0 !important;
}

/* ---- Hero row: tight fit ---- */
.extra-hero-row {
  align-items: stretch !important;
  gap: 0 !important;
}

/* ============================================================
   39. CATEGORY SIDEBAR — eXtra Style
   ============================================================ */
.extra-cat-sidebar {
  padding: 0 !important;
}

.extra-cat-menu-wrap {
  background: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) 0 0 var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow-md) !important;
  border: 1px solid var(--extra-border-light) !important;
  border-right: none !important;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

html[dir="rtl"] .extra-cat-menu-wrap {
  border-radius: 0 var(--extra-radius-lg) var(--extra-radius-lg) 0 !important;
  border-right: 1px solid var(--extra-border-light) !important;
  border-left: none !important;
}

.extra-cat-list {
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  flex-grow: 1 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--extra-border) transparent !important;
}

.extra-cat-list::-webkit-scrollbar { width: 3px; }
.extra-cat-list::-webkit-scrollbar-track { background: transparent; }
.extra-cat-list::-webkit-scrollbar-thumb { background: var(--extra-border); border-radius: 2px; }

.extra-cat-item {
  position: relative !important;
}

.extra-cat-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  color: var(--extra-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--extra-transition) !important;
  border-bottom: 1px solid var(--extra-border-light) !important;
  gap: 8px !important;
}

.extra-cat-link:hover {
  background-color: rgba(255, 212, 0, 0.07) !important;
  color: var(--extra-navy) !important;
  text-decoration: none !important;
  padding-right: 18px !important;
}

html[dir="rtl"] .extra-cat-link:hover {
  padding-right: 14px !important;
  padding-left: 18px !important;
}

.extra-cat-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.extra-cat-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--extra-border-light) !important;
  background: var(--extra-bg) !important;
}

.extra-cat-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 140px !important;
}

.extra-cat-arrow {
  font-size: 10px !important;
  color: var(--extra-muted) !important;
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
}

.extra-cat-item:hover .extra-cat-arrow {
  color: var(--extra-navy) !important;
  opacity: 1 !important;
}

/* Category "View All" item */
.extra-cat-viewall {
  border-top: 1px solid var(--extra-border-light) !important;
  background: var(--extra-bg) !important;
}

.extra-cat-viewall-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  color: var(--extra-navy) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--extra-transition) !important;
}

.extra-cat-viewall-link:hover {
  background-color: var(--extra-yellow) !important;
  color: var(--extra-dark) !important;
  text-decoration: none !important;
}

/* Mega menu from category sidebar */
.extra-cat-item .mega_menu {
  border-radius: var(--extra-radius) !important;
  box-shadow: var(--extra-shadow-hover) !important;
  border: 1px solid var(--extra-border-light) !important;
  padding: 12px !important;
}

/* ============================================================
   40. HERO SLIDER IMAGES — eXtra Style
   ============================================================ */

/* Slider outer wrapper */
.extra-slider-col {
  padding: 0 !important;
}

.extra-slider-wrap {
  height: 100% !important;
}

/* Slider container: rounded, overflow-hidden */
.extra-hero-slider.owl-carousel,
.extra-hero-slider {
  border-radius: 0 var(--extra-radius-lg) var(--extra-radius-lg) 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

html[dir="rtl"] .extra-hero-slider.owl-carousel,
html[dir="rtl"] .extra-hero-slider {
  border-radius: var(--extra-radius-lg) 0 0 var(--extra-radius-lg) !important;
}

/* When no sidebar, full radius */
.extra-hero-row:not(:has(.extra-cat-sidebar)) .extra-hero-slider {
  border-radius: var(--extra-radius-lg) !important;
}

/* Slide item */
.extra-slide-item {
  display: block !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* Slide image */
.extra-slide-img {
  display: block !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: var(--extra-bg) !important;
  /* eXtra proportions: ~3.2:1 ratio desktop */
}

/* Desktop heights */
@media (min-width: 1280px) {
  .extra-slide-img {
    height: 400px !important;
    max-height: 420px !important;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .extra-slide-img {
    height: 360px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .extra-slide-img {
    height: 300px !important;
  }
}

@media (max-width: 767px) {
  .extra-hero-slider {
    border-radius: var(--extra-radius) !important;
  }
  .extra-slide-img {
    height: auto !important;
    min-height: 160px !important;
    max-height: 240px !important;
  }
  .extra-hero-section {
    padding-top: 8px !important;
  }
}

/* Owl carousel navigation for hero */
.extra-hero-slider .owl-nav {
  position: absolute !important;
  top: 50% !important;
  width: 100% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 8px !important;
}

.extra-hero-slider .owl-nav .owl-prev,
.extra-hero-slider .owl-nav .owl-next {
  pointer-events: all !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transition: var(--extra-transition) !important;
  position: static !important;
  transform: none !important;
  color: var(--extra-navy) !important;
  font-size: 16px !important;
  opacity: 0.9 !important;
}

.extra-hero-slider .owl-nav .owl-prev:hover,
.extra-hero-slider .owl-nav .owl-next:hover {
  background: var(--extra-yellow) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
}

.extra-hero-slider .owl-nav .owl-prev span,
.extra-hero-slider .owl-nav .owl-next span {
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--extra-navy) !important;
  font-weight: 400 !important;
}

/* Owl dots */
.extra-hero-slider .owl-dots {
  position: absolute !important;
  bottom: 14px !important;
  left: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

.extra-hero-slider .owl-dots .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  background: rgba(255,255,255,0.55) !important;
  border-radius: 4px !important;
  margin: 0 !important;
  transition: var(--extra-transition) !important;
  display: block !important;
}

.extra-hero-slider .owl-dots .owl-dot.active span {
  width: 22px !important;
  background: var(--extra-yellow) !important;
  border-radius: 4px !important;
}

/* ============================================================
   41. eXtra SERVICE CARDS (4 cards below slider)
   ============================================================ */
.extra-service-cards {
  display: flex !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.extra-service-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  border: 1px solid var(--extra-border-light) !important;
  box-shadow: var(--extra-shadow) !important;
  text-decoration: none !important;
  color: var(--extra-text) !important;
  transition: var(--extra-transition) !important;
  min-width: 0 !important;
}

.extra-service-card:hover {
  border-color: var(--extra-yellow) !important;
  box-shadow: var(--extra-shadow-md) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: var(--extra-navy) !important;
}

.extra-service-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--extra-radius-sm) !important;
  background: rgba(255, 212, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: var(--extra-transition) !important;
}

.extra-service-icon--red {
  background: rgba(226, 35, 26, 0.08) !important;
}

.extra-service-icon--blue {
  background: rgba(0, 49, 69, 0.08) !important;
}

.extra-service-icon--green {
  background: rgba(22, 163, 74, 0.08) !important;
}

.extra-service-card:hover .extra-service-icon {
  background: var(--extra-yellow) !important;
}

.extra-service-card:hover .extra-service-icon--red {
  background: rgba(226, 35, 26, 0.15) !important;
}

.extra-service-card:hover .extra-service-icon--blue {
  background: rgba(0, 49, 69, 0.12) !important;
}

.extra-service-card:hover .extra-service-icon--green {
  background: rgba(22, 163, 74, 0.12) !important;
}

.extra-service-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.extra-service-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--extra-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.extra-service-sub {
  font-family: 'Cairo', sans-serif !important;
  font-size: 11px !important;
  color: var(--extra-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 991px) {
  .extra-service-cards {
    flex-wrap: wrap !important;
  }
  .extra-service-card {
    flex: 0 0 calc(50% - 6px) !important;
    padding: 10px 12px !important;
  }
  .extra-service-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .extra-service-title {
    font-size: 12px !important;
  }
  .extra-service-sub {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .extra-service-cards {
    display: none !important;
  }
}

/* ============================================================
   42. ALSO FIX: Category Sidebar (legacy classes override)
   ============================================================ */

/* Remove default background from owl carousel slider items */
.hero-slider .owl-item a,
.__top-slider-images .owl-item a {
  background-color: transparent !important;
  background: none !important;
}

/* Slider wrapper padding fix */
.__top-slider-images > div {
  height: 100% !important;
}

/* hero-slider in RTL needs ltr direction to animate properly */
.hero-slider {
  direction: ltr !important;
}

/* ============================================================
   43. SECTION TITLE ACCENT BARS — eXtra yellow 4px bar style
   ============================================================ */
.feature-product-title,
.arrival-title,
.featured_deal_title,
.categories-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
  color: var(--extra-text) !important;
  position: relative !important;
  padding-right: 14px !important;
  display: inline-block !important;
}

.feature-product-title::before,
.arrival-title::before,
.featured_deal_title::before,
.categories-title::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 20px !important;
  background-color: var(--extra-yellow) !important;
  border-radius: 2px !important;
}

html[dir="ltr"] .feature-product-title,
html[dir="ltr"] .arrival-title,
html[dir="ltr"] .featured_deal_title,
html[dir="ltr"] .categories-title {
  padding-right: 0 !important;
  padding-left: 14px !important;
}

html[dir="ltr"] .feature-product-title::before,
html[dir="ltr"] .arrival-title::before,
html[dir="ltr"] .featured_deal_title::before,
html[dir="ltr"] .categories-title::before {
  right: auto !important;
  left: 0 !important;
}

/* Brands title */
.__text-22px {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
  color: var(--extra-text) !important;
  position: relative !important;
  padding-right: 14px !important;
  display: inline-block !important;
}

.__text-22px::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 20px !important;
  background-color: var(--extra-yellow) !important;
  border-radius: 2px !important;
}

html[dir="ltr"] .__text-22px {
  padding-right: 0 !important;
  padding-left: 14px !important;
}

html[dir="ltr"] .__text-22px::before {
  right: auto !important;
  left: 0 !important;
}

@media (max-width: 767px) {
  .feature-product-title,
  .arrival-title,
  .featured_deal_title,
  .categories-title,
  .__text-22px {
    font-size: 16px !important;
  }
  .feature-product-title::before,
  .arrival-title::before,
  .featured_deal_title::before,
  .categories-title::before,
  .__text-22px::before {
    height: 16px !important;
  }
}

/* ============================================================
   44. CATEGORY SECTION ICONS — 80px circular eXtra style
   ============================================================ */
.__cate-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.__cate-item .__img {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  background-color: var(--extra-bg) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  border: 2px solid var(--extra-border-light) !important;
  transition: var(--extra-transition) !important;
  padding: 0 !important;
}

.__cate-item a:hover .__img {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.18) !important;
}

.__cate-item .__img img {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
}

/* Mobile category slider icons */
.__cate-item .mw-100 {
  width: 72px !important;
  height: 72px !important;
  background-color: var(--extra-bg) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  border: 2px solid var(--extra-border-light) !important;
  transition: var(--extra-transition) !important;
}

.__cate-item .mw-100.h-auto {
  width: 72px !important;
  height: 72px !important;
}

.__cate-item .mw-100 img,
.__cate-item .mw-100.h-auto img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: 46px !important;
  max-height: 46px !important;
}

.__cate-item a:hover .mw-100 {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.15) !important;
}

.__cate-item h3 {
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--extra-text) !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  max-width: 90px !important;
  word-break: break-word !important;
}

.__cate-item a:hover h3 {
  color: var(--extra-navy) !important;
}

/* Desktop category row gap */
.__inline-62 .card-body .row.mt-3 {
  row-gap: 14px !important;
}

/* ============================================================
   45. ADD TO CART BUTTON — yellow eXtra button at card bottom
   ============================================================ */
.extra-add-to-cart-btn {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-top: 1px solid rgba(0, 49, 69, 0.08) !important;
  border-radius: 0 0 var(--extra-radius) var(--extra-radius) !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

.extra-add-to-cart-btn:hover,
.extra-add-to-cart-btn:focus {
  background-color: var(--extra-navy) !important;
  color: var(--extra-white) !important;
  text-decoration: none !important;
  outline: none !important;
}

.extra-add-to-cart-btn.out-of-stock {
  background-color: var(--extra-border) !important;
  color: var(--extra-muted) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  .extra-add-to-cart-btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   46. FLASH DEAL SECTION — red gradient header (eXtra style)
   ============================================================ */
.flash-deals-wrapper {
  border-radius: var(--extra-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--extra-shadow) !important;
}

.flash-deal-view-all-web {
  background: linear-gradient(135deg, #b71c1c 0%, var(--extra-price-red) 100%) !important;
  padding: 14px 20px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Force all text inside flash header to white */
.flash-deal-view-all-web .flash-deal-text h1,
.flash-deal-view-all-web .flash-deal-text h1 span,
.flash-deal-view-all-web .flash-deal-text .web-text-primary,
.flash-deal-view-all-web .web-text-primary h1,
.flash-deal-view-all-web h1.web-text-primary {
  color: var(--extra-white) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
}

/* View all link on red background */
.flash-deal-view-all-web a.view-all-text,
.flash-deal-view-all-web .view-all-text {
  color: var(--extra-white) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.flash-deal-view-all-web a.view-all-text:hover,
.flash-deal-view-all-web .view-all-text:hover {
  background-color: var(--extra-white) !important;
  color: var(--extra-price-red) !important;
  border-color: var(--extra-white) !important;
}

.flash-deal-view-all-web a.view-all-text i,
.flash-deal-view-all-web .view-all-text i {
  color: inherit !important;
}

/* Countdown container in navy */
.countdown-card .countdown-background {
  background: linear-gradient(135deg, var(--extra-navy) 0%, var(--extra-navy-light) 100%) !important;
  border-radius: var(--extra-radius) !important;
  overflow: hidden !important;
}

/* Flash deal "hurry up" text */
.h2.fs-16.fw-semibold.text-primary,
.flashdeal-responsive h2 {
  color: var(--extra-navy) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Flash deal section content padding */
section.overflow-hidden .container .flash-deals-wrapper .d-sm-block {
  padding: 16px !important;
}

/* ============================================================
   47. NEW ARRIVALS + BEST SELLING SECTION HEADERS
   ============================================================ */
section.new-arrival-section .container.rtl .section-header {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) var(--extra-radius-lg) 0 0 !important;
  padding: 16px 20px 12px !important;
  margin-bottom: 0 !important;
  box-shadow: var(--extra-shadow) !important;
}

section.new-arrival-section .container.rtl.mb-3 .new_arrival_product {
  border-radius: 0 0 var(--extra-radius-lg) var(--extra-radius-lg) !important;
}

/* Wrap new arrival + section header into seamless card */
.new_arrival_product {
  padding: 0 16px 16px !important;
}

/* Best selling / top rated inner section titles */
.__best-selling-wrap .section-header h2,
.__top-rated-wrap .section-header h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
  color: var(--extra-text) !important;
  position: relative !important;
  padding-right: 14px !important;
  display: inline-block !important;
}

.__best-selling-wrap .section-header h2::before,
.__top-rated-wrap .section-header h2::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 18px !important;
  background-color: var(--extra-yellow) !important;
  border-radius: 2px !important;
}

/* ============================================================
   48. FEATURED DEAL SECTION — uniform card padding
   ============================================================ */
.__featured-deal-wrap .d-flex.flex-wrap.justify-content-between {
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--extra-border-light) !important;
}

.__featured-deal-wrap .owl-carousel {
  padding: 12px !important;
}

/* ============================================================
   49. SECTION BANNERS — rounded + shadow
   ============================================================ */
.container.rtl.pt-0 > a > .footer_banner_img.__inline-63,
.container.rtl > a > .footer_banner_img.__inline-63 {
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: var(--extra-shadow) !important;
}

/* ============================================================
   50. BRANDS SECTION — white card per brand
   ============================================================ */
.brands-slider .owl-item .text-center {
  padding: 4px !important;
}

.brands-slider .__brand-item {
  background-color: var(--extra-white) !important;
  border: 1px solid var(--extra-border) !important;
  border-radius: var(--extra-radius) !important;
  padding: 12px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 70px !important;
  transition: var(--extra-transition) !important;
}

.brands-slider .__brand-item:hover {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 4px 14px rgba(255, 212, 0, 0.2) !important;
  transform: translateY(-2px) !important;
}

.brands-slider .__brand-item img {
  max-height: 44px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: grayscale(15%) !important;
  opacity: 0.85 !important;
  transition: var(--extra-transition) !important;
}

.brands-slider .__brand-item:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* ============================================================
   51. EXTRA PRODUCT CARD — matches eXtra.com product grid exactly
   ============================================================

   Structure:
   .extra-product-card
   ├── .extra-card-img-area        ← square white image area
   │   ├── .extra-discount-badge  ← red pill top-right (RTL)
   │   ├── .extra-oos-overlay     ← out-of-stock dim
   │   ├── .extra-card-img-link   ← image anchor
   │   │   └── img.extra-card-img
   │   └── .extra-card-overlay    ← quick-view hover layer
   ├── .extra-card-info            ← text area
   │   ├── .extra-card-brand      ← brand name (small gray)
   │   ├── .extra-card-name h3    ← product name (2-line clamp)
   │   ├── .extra-card-stars      ← star row
   │   └── .extra-card-price      ← price block
   └── .extra-add-to-cart-btn     ← yellow full-width button (section 45)
   ============================================================ */

/* ── Card container ── */
.extra-product-card {
  background-color: var(--extra-white) !important;
  border-radius: var(--extra-radius) !important;
  border: 1px solid var(--extra-border-light) !important;
  box-shadow: var(--extra-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important;
  position: relative !important;
}

.extra-product-card:hover {
  box-shadow: 0 6px 22px rgba(0, 49, 69, 0.12) !important;
  border-color: rgba(255, 212, 0, 0.55) !important;
  transform: translateY(-3px) !important;
}

/* ── Image area — square white zone ── */
.extra-card-img-area {
  position: relative !important;
  background-color: var(--extra-white) !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--extra-border-light) !important;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1/1) {
  .extra-card-img-area {
    padding-bottom: 100% !important;
    height: 0 !important;
  }
  .extra-card-img-link {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── Discount badge ── */
.extra-discount-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background-color: var(--extra-price-red) !important;
  color: var(--extra-white) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  line-height: 1.4 !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

html[dir="ltr"] .extra-discount-badge {
  right: auto !important;
  left: 10px !important;
}

/* ── Out of stock overlay ── */
.extra-oos-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
  border-radius: 0 !important;
}

.extra-oos-overlay span {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: var(--extra-white) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
}

/* ── Product image ── */
.extra-card-img-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 16px !important;
}

.extra-card-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.extra-product-card:hover .extra-card-img {
  transform: scale(1.04) !important;
}

/* ── Quick-view hover overlay ── */
.extra-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(0, 49, 69, 0.04) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 14px !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
  z-index: 5 !important;
}

.extra-product-card:hover .extra-card-overlay {
  opacity: 1 !important;
}

.extra-quick-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  background-color: var(--extra-white) !important;
  border: 1px solid var(--extra-border) !important;
  border-radius: 20px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--extra-navy) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
  transition: background-color 0.18s, color 0.18s !important;
  cursor: pointer !important;
}

.extra-quick-view-btn:hover {
  background-color: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
  text-decoration: none !important;
}

.extra-quick-view-btn i {
  font-size: 14px !important;
}

/* ── Info area (text below image) ── */
.extra-card-info {
  padding: 10px 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

/* Brand name */
.extra-card-brand {
  font-family: 'Cairo', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--extra-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Product name */
.extra-card-name {
  margin: 0 !important;
  line-height: 1.45 !important;
  flex: 1 !important;
}

.extra-card-name a {
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--extra-text) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.45 !important;
}

.extra-card-name a:hover {
  color: var(--extra-navy) !important;
  text-decoration: none !important;
}

/* Star ratings */
.extra-card-stars {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  margin-top: 2px !important;
}

.extra-star-on {
  color: #F59E0B !important;
  font-size: 11px !important;
}

.extra-star-off {
  color: #D1D5DB !important;
  font-size: 11px !important;
}

.extra-stars-count {
  font-family: 'Cairo', sans-serif !important;
  font-size: 11px !important;
  color: var(--extra-muted) !important;
  margin-right: 3px !important;
  margin-left: 3px !important;
}

/* Price block */
.extra-card-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}

.extra-price-current {
  font-family: 'Cairo', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--extra-price-red) !important;
  line-height: 1.2 !important;
  direction: ltr !important;
  display: inline-block !important;
}

.extra-price-old {
  font-family: 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9CA3AF !important;
  text-decoration: line-through !important;
  direction: ltr !important;
  display: inline-block !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .extra-card-img-link {
    padding: 10px !important;
  }
  .extra-card-info {
    padding: 8px 10px 6px !important;
  }
  .extra-card-name a {
    font-size: 12px !important;
  }
  .extra-price-current {
    font-size: 15px !important;
  }
  .extra-discount-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

@media (min-width: 1200px) {
  .extra-card-img-link {
    padding: 20px !important;
  }
  .extra-card-name a {
    font-size: 14px !important;
  }
  .extra-price-current {
    font-size: 18px !important;
  }
}

/* ── Ensure owl carousel items have full height ── */
.featured_products_listSlide .owl-item > div,
.featured_products_listSlide .owl-item .extra-product-card,
.category-wise-product-slider .owl-item > div,
.category-wise-product-slider .owl-item .extra-product-card,
.owl-carousel .owl-item .extra-product-card {
  height: 100% !important;
}

.featured_products_listSlide .owl-stage {
  display: flex !important;
}

.featured_products_listSlide .owl-item {
  display: flex !important;
  flex-direction: column !important;
}

/* ── Clickable area — needed by custom.js `.clickable` handler ── */
.extra-card-img-area.clickable {
  cursor: pointer !important;
}

/* ── Equal-height cards in ALL owl carousels using eXtra card ── */
.owl-carousel .owl-stage {
  display: flex !important;
}

.owl-carousel .owl-item {
  display: flex !important;
  flex-direction: column !important;
}

.owl-carousel .owl-item > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Grid context cards: no extra shadow (border-only) ── */
.product-with-bg .extra-product-card,
.product-with-bg .xpc,
.__category-wise-product .extra-product-card,
.__category-wise-product .xpc {
  box-shadow: none !important;
  border: 1px solid var(--extra-border-light) !important;
}

/* ── Bootstrap grid equal height ── */
.row .extra-product-card,
.row .xpc {
  height: 100% !important;
}

/* ============================================================
   §52 — xpc: Product Card (YOU XPRESS inspired layout)
   ============================================================ */

/* ── Card shell ─────────────────────────────────────────────── */
.xpc {
  background-color: var(--extra-white) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: box-shadow 0.22s, border-color 0.22s, transform 0.22s !important;
  position: relative !important;
}
.xpc:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.11) !important;
  border-color: #D1D5DB !important;
  transform: translateY(-2px) !important;
}

/* ── Image area: 1/1 square ────────────────────────────────── */
.xpc-img-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: var(--extra-white) !important;
  padding: 12px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.xpc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.28s ease !important;
}
.xpc:hover .xpc-img {
  transform: scale(1.05) !important;
}

/* ── Info area ──────────────────────────────────────────────── */
.xpc-info {
  padding: 10px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  min-height: 110px !important;
}

/* ── Product name — 1-line clamp ────────────────────────────── */
.xpc-name {
  margin: 0 !important;
  padding: 0 !important;
}
.xpc-name a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.xpc-name a:hover {
  color: var(--extra-navy) !important;
}

/* ── Price block ────────────────────────────────────────────── */
.xpc-price-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
}
.xpc-price-main {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.xpc-price-now {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--extra-navy) !important;
  line-height: 1.2 !important;
}
.xpc-price-was {
  font-size: 11px !important;
  color: #9CA3AF !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}
.xpc-price-pill-row {
  display: flex !important;
  align-items: center !important;
  margin-top: 1px !important;
}
.xpc-discount-pill {
  display: inline-block !important;
  background-color: var(--extra-price-red) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
}

/* ── Action buttons (pill style at bottom) ──────────────────── */
.xpc-btns {
  display: flex !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  flex-wrap: wrap !important;
}
.xpc-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  border: 1.5px solid #E5E7EB !important;
  background: transparent !important;
  color: var(--extra-text) !important;
  cursor: pointer !important;
  transition: border-color 0.18s, color 0.18s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: 'Cairo', sans-serif !important;
}
.xpc-btn-cart:hover {
  border-color: var(--extra-navy) !important;
  color: var(--extra-navy) !important;
}
.xpc-btn-view:hover {
  border-color: var(--extra-navy) !important;
  color: var(--extra-navy) !important;
}
.xpc-btn-oos {
  border-color: #D1D5DB !important;
  color: #9CA3AF !important;
  cursor: not-allowed !important;
  font-size: 11px !important;
}

/* ── Owl carousel: equal-height xpc cards ───────────────────── */
.owl-carousel .owl-item > div.xpc,
.owl-carousel .owl-item .xpc {
  height: 100% !important;
}

/* ── Bootstrap col: equal-height xpc cards ─────────────────── */
.row .xpc,
[class*="col-"] .xpc {
  height: 100% !important;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 575px) {
  .xpc-img-wrap {
    padding: 8px !important;
  }
  .xpc-info {
    padding: 8px 10px 10px !important;
    min-height: 96px !important;
  }
  .xpc-name a {
    font-size: 12px !important;
  }
  .xpc-price-now {
    font-size: 13px !important;
  }
  .xpc-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 1200px) {
  .xpc-name a {
    font-size: 14px !important;
  }
  .xpc-price-now {
    font-size: 16px !important;
  }
  .xpc-img-wrap {
    padding: 14px !important;
  }
}

/* ── RTL/LTR alignment ──────────────────────────────────────── */
html[dir="ltr"] .xpc-price-main {
  flex-direction: row !important;
}

/* ============================================================
   §53 — Section-level eXtra design system
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   A. xsec — White section card (universal wrapper)
   ───────────────────────────────────────────────────────────── */
.xsec {
  background: var(--extra-white) !important;
  border-radius: var(--extra-radius-lg) !important;
  border: 1px solid var(--extra-border-light) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Section header row */
.xsec-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--extra-border-light) !important;
  gap: 10px !important;
}

/* Section title with yellow left-border accent */
.xsec-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--extra-navy) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  padding-right: 13px !important;   /* RTL: space for bar on right */
  letter-spacing: 0 !important;
}
.xsec-title::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 22px !important;
  background: var(--extra-yellow) !important;
  border-radius: 2px !important;
}
html[dir="ltr"] .xsec-title {
  padding-right: 0 !important;
  padding-left: 13px !important;
}
html[dir="ltr"] .xsec-title::before {
  right: auto !important;
  left: 0 !important;
}

/* View-all link */
.xsec-view-all {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--extra-navy) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.xsec-view-all:hover { color: var(--extra-yellow) !important; }
.xsec-view-all i { font-size: 11px !important; }

/* Content area */
.xsec-body {
  padding: 16px 18px !important;
}
.xsec-body-flush {
  padding: 10px 8px 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   B. Owl carousel nav — circular arrows matching eXtra style
   ───────────────────────────────────────────────────────────── */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--extra-white) !important;
  border: 1.5px solid var(--extra-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--extra-navy) !important;
  font-size: 13px !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  margin: 0 3px !important;
  line-height: 1 !important;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
  background: var(--extra-yellow) !important;
  border-color: var(--extra-yellow) !important;
  color: var(--extra-navy) !important;
}
.owl-carousel .owl-nav button.disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.owl-carousel .owl-nav {
  margin-top: 10px !important;
  text-align: center !important;
}
/* Nav row: inline-flex centered below the slider */
.xsec .owl-carousel .owl-nav,
.xfd-products .owl-carousel .owl-nav {
  margin-top: 8px !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   C. xcats — Category icons horizontal row
   ───────────────────────────────────────────────────────────── */
.xcats-grid {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.xcats-item {
  flex: 1 !important;
  min-width: 0 !important;
}
.xcats-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  padding: 10px 4px !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}
.xcats-link:hover { background: var(--extra-bg) !important; }
.xcats-icon-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: var(--extra-bg) !important;
  border: 1.5px solid var(--extra-border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.xcats-link:hover .xcats-icon-wrap {
  border-color: var(--extra-yellow) !important;
  background: #FFFBEA !important;
}
.xcats-icon-wrap img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}
.xcats-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--extra-text) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* category owl slider items */
.categories--slider .xcats-item { padding: 0 4px !important; }

/* ─────────────────────────────────────────────────────────────
   D. xfd — Flash Deal section (side-panel + slider)
   ───────────────────────────────────────────────────────────── */
.xfd-wrapper {
  display: flex !important;
  border-radius: var(--extra-radius-lg) !important;
  overflow: hidden !important;
  background: var(--extra-white) !important;
  border: 1px solid var(--extra-border-light) !important;
  min-height: 280px !important;
}

/* Colored side panel */
.xfd-panel {
  width: 190px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(160deg, #7B0000 0%, #C62828 60%, #D32F2F 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 12px !important;
  gap: 5px !important;
  text-align: center !important;
  position: relative !important;
}
.xfd-panel-emoji {
  font-size: 30px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
.xfd-panel-title {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.xfd-panel-sub {
  color: rgba(255,255,255,0.75) !important;
  font-size: 11px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.xfd-ends-label {
  color: rgba(255,255,255,0.65) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 6px 0 4px !important;
}

/* Countdown */
.xfd-countdown {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  direction: ltr !important;
}
.xfd-time-unit {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}
.xfd-time-unit .cz-countdown-value {
  background: rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  min-width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.xfd-time-unit .cz-countdown-text {
  color: rgba(255,255,255,0.65) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
}
.xfd-sep {
  color: rgba(255,255,255,0.7) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding-bottom: 16px !important;
  line-height: 1 !important;
}

/* View all button */
.xfd-view-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 10px !important;
  padding: 6px 14px !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.xfd-view-all-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

/* Product slider area */
.xfd-products {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 10px 6px 6px !important;
  background: var(--extra-white) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.xfd-products .owl-carousel .owl-nav {
  position: static !important;
  margin-top: 6px !important;
}

/* Mobile: stack panel on top */
@media (max-width: 575px) {
  .xfd-wrapper { flex-direction: column !important; min-height: auto !important; }
  .xfd-panel {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    gap: 8px 14px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .xfd-panel-emoji { font-size: 22px !important; }
  .xfd-panel-title { font-size: 15px !important; }
  .xfd-panel-sub,
  .xfd-ends-label { display: none !important; }
  .xfd-time-unit .cz-countdown-value {
    min-width: 30px !important; height: 30px !important; font-size: 14px !important;
  }
  .xfd-view-all-btn { margin-top: 0 !important; }
}
@media (min-width: 576px) and (max-width: 991px) {
  .xfd-panel { width: 150px !important; padding: 14px 10px !important; }
  .xfd-panel-title { font-size: 14px !important; }
  .xfd-time-unit .cz-countdown-value {
    min-width: 34px !important; height: 34px !important; font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   E. Home page gap between sections
   ───────────────────────────────────────────────────────────── */
.__inline-61 > .container,
.__inline-61 > section {
  margin-bottom: 0 !important;
}
.__inline-61 {
  gap: 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   F. Brand slider card
   ───────────────────────────────────────────────────────────── */
.__brand-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 70px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--extra-border-light) !important;
  border-radius: 8px !important;
  background: var(--extra-white) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.__brand-item:hover {
  border-color: var(--extra-yellow) !important;
  box-shadow: 0 2px 8px rgba(255,212,0,0.2) !important;
}
.__brand-item img {
  max-height: 48px !important;
  max-width: 100px !important;
  object-fit: contain !important;
  filter: grayscale(40%) !important;
  transition: filter 0.15s !important;
}
.__brand-item:hover img { filter: grayscale(0%) !important; }

/* ─────────────────────────────────────────────────────────────
   G. Deal of the Day wrapper & Latest Products
   ───────────────────────────────────────────────────────────── */
.deal_of_the_day {
  border-radius: var(--extra-radius-lg) !important;
  border: 1px solid var(--extra-border-light) !important;
  background: var(--extra-white) !important;
  overflow: hidden !important;
}
.latest-product-margin .xsec-head {
  padding: 12px 14px !important;
}
.latest-product-margin > .d-flex {
  padding: 12px 4px !important;
}
.latest-product-margin > .d-flex > h2 {
  padding-right: 13px !important;
  position: relative !important;
}
.latest-product-margin > .d-flex > h2::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important; height: 20px !important;
  background: var(--extra-yellow) !important;
  border-radius: 2px !important;
}
html[dir="ltr"] .latest-product-margin > .d-flex > h2 {
  padding-right: 0 !important;
  padding-left: 13px !important;
}
html[dir="ltr"] .latest-product-margin > .d-flex > h2::before {
  right: auto !important;
  left: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   H. Best selling / Top rated (small product list cards)
   ───────────────────────────────────────────────────────────── */
.col-lg-6 > .card.__shadow {
  border: 1px solid var(--extra-border-light) !important;
  border-radius: var(--extra-radius-lg) !important;
  box-shadow: none !important;
}
.__best-selling {
  display: block !important;
  padding: 8px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.__best-selling:hover { background: var(--extra-bg) !important; }
.best-selleing-image {
  width: 72px !important;
  height: 72px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: var(--extra-bg) !important;
  border: 1px solid var(--extra-border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.best-selleing-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4px !important;
}
.best-selling-details {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 8px !important; /* RTL */
}
html[dir="ltr"] .best-selling-details {
  padding-right: 0 !important;
  padding-left: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   I. New arrival / featured deal section (._product-card-2 area)
   ───────────────────────────────────────────────────────────── */
.new-arrival-section .xsec { margin-bottom: 0 !important; }

/* ── Responsive: mobile section heads ─── */
@media (max-width: 575px) {
  .xsec-head { padding: 11px 12px !important; }
  .xsec-title { font-size: 15px !important; }
  .xsec-body { padding: 12px !important; }
  .xsec-body-flush { padding: 6px 4px 4px !important; }
  .xsec .owl-carousel .owl-nav { display: none !important; } /* hide nav on mobile */
}

/* ── Ensure xsec nav doesn't overflow on small screens ── */
@media (max-width: 767px) {
  .xsec .owl-carousel .owl-nav { display: none !important; }
}

/* ============================================================
   §54 — xptabs: Product Hub Tabs Section
   ============================================================ */

/* ── Wrapper card ─────────────────────────────────────────── */
.xptabs {
  background: var(--extra-white);
  border-radius: var(--extra-radius-lg);
  border: 1px solid var(--extra-border-light);
  overflow: hidden;
}

/* ── Tab header row ───────────────────────────────────────── */
.xptabs-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  border-bottom: 2px solid var(--extra-border-light) !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.xptabs-head::-webkit-scrollbar { display: none !important; }

/* ── Nav (tab buttons row) ────────────────────────────────── */
.xptabs-nav {
  display: flex !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}

/* ── Individual tab button ────────────────────────────────── */
.xptabs-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 15px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--extra-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: 'Cairo', sans-serif !important;
  transition: color 0.18s, border-color 0.18s !important;
}
.xptabs-btn:hover {
  color: var(--extra-navy) !important;
}
.xptabs-btn.is-active {
  color: var(--extra-navy) !important;
  border-bottom-color: var(--extra-yellow) !important;
}

/* Subtle count pill on each tab */
.xptabs-btn::after {
  content: none !important;
}

/* ── View all link ────────────────────────────────────────── */
.xptabs-viewall {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 15px 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--extra-navy) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: opacity 0.15s !important;
}
.xptabs-viewall:hover { opacity: 0.75 !important; color: var(--extra-navy) !important; }

/* ── Content body ─────────────────────────────────────────── */
.xptabs-body {
  padding: 20px !important;
  background: var(--extra-bg) !important;
}

/* ── Individual panel ─────────────────────────────────────── */
.xptabs-panel {
  display: none !important;
}
.xptabs-panel.is-active {
  display: block !important;
  animation: xptabs-in 0.22s ease !important;
}

@keyframes xptabs-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .xptabs-head {
    padding: 0 10px !important;
  }
  .xptabs-btn {
    padding: 12px 12px !important;
    font-size: 13px !important;
  }
  .xptabs-body {
    padding: 12px !important;
  }
}

/* ============================================================
   END OF eXtra THEME
   ============================================================ */