/* ============================================================
   ZENITURE — Global Custom CSS
   ============================================================ */

:root {
  --brand-green: #0f2e22;
  --brand-logo-green: #3e7a4d;
  --brand-gold: #c9a961;
  --brand-cream: #f5efe0;
  --brand-bg: #f7f7f4;
  --brand-muted: #6b6b6b;
  --brand-border: #e8e4d6;
}

/* Force page background */
html body,
html body.salla-theme,
html {
  background: var(--brand-bg) !important;
  background-color: var(--brand-bg) !important;
}

/* ============================================================
   1. HIDE TOP NAVBAR + SEARCH
   ============================================================ */
.store-header .top-navbar { display: none !important; }

.s-search-modal,
.s-search-container,
salla-search { display: none !important; }

/* ============================================================
   2. MAIN NAV TRANSPARENT
   ============================================================ */
html body .store-header .main-nav-container,
html body .store-header #mainnav,
html body .store-header .main-nav-container.bg-white,
html body .store-header #mainnav.bg-white,
html body .store-header .main-nav-container[class*="bg-white"],
html body .store-header .main-nav-container .inner,
html body .store-header .main-nav-container .inner.bg-inherit,
html body .store-header .main-nav-container[style*="height"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 72px !important;
  padding: 12px 0 !important;
}

html body .store-header .shadow-default,
html body .store-header [class*="shadow-"],
html body .store-header .inner,
html body .store-header .bg-white,
html body .store-header .bg-inherit {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   3. HIDE user-menu, contacts
   ============================================================ */
salla-user-menu,
salla-contacts { display: none !important; }

/* ============================================================
   4. HAMBURGER
   ============================================================ */
.store-header .mburger,
.store-header a.mburger,
a[href="#mobile-menu"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 46, 34, 0.06) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

.store-header .mburger:hover {
  background: rgba(15, 46, 34, 0.12) !important;
  transform: scale(1.05);
}

.store-header .mburger i,
.store-header .mburger .sicon-menu {
  color: var(--brand-green) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* ============================================================
   5. LOGO — MUCH BIGGER
   ============================================================ */
html body .store-header .navbar-brand,
html body .store-header a.navbar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .store-header .navbar-brand img,
html body .store-header a.navbar-brand img {
  height: 56px !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 200px !important;
  min-width: 120px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* ============================================================
   6. HEADER LAYOUT
   ============================================================ */
.store-header .main-nav-container .flex.items-stretch.justify-between,
.store-header #mainnav .flex.justify-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
  gap: 8px !important;
  position: relative !important;
}

.store-header .main-nav-container .flex.items-center:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

.store-header .navbar-brand.zn-moved-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: static !important;
  transform: none !important;
  order: 2 !important;
}

.store-header .main-nav-container .flex.items-center.justify-end {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  order: 3 !important;
}

/* ============================================================
   7. CART BUTTON
   ============================================================ */
salla-cart-summary,
.s-cart-summary-wrapper { margin: 0 !important; }

.s-cart-summary-wrapper {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(15, 46, 34, 0.06) !important;
  padding: 0 !important;
  position: relative !important;
  transition: all 0.2s !important;
}

.s-cart-summary-wrapper:hover {
  background: rgba(15, 46, 34, 0.12) !important;
  transform: scale(1.05);
}

.s-cart-summary-content,
.s-cart-summary-total { display: none !important; }

.s-cart-summary-wrapper .sicon-shopping-bag,
.s-cart-summary-wrapper i[slot="icon"],
.s-cart-summary-wrapper .header-btn__icon,
.s-cart-summary-wrapper svg {
  color: var(--brand-green) !important;
  fill: var(--brand-green) !important;
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 1 !important;
}

.s-cart-summary-count {
  background: var(--brand-green) !important;
  color: var(--brand-cream) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  border: 2px solid var(--brand-bg) !important;
  position: absolute !important;
  top: -4px !important;
  inset-inline-end: -4px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.s-cart-summary-count:empty { display: none !important; }

/* ============================================================
   8. LANGUAGE TOGGLE — iOS switch
   ============================================================ */
salla-localization-modal,
salla-localization-modal.zn-moved-lang,
.s-localization-modal-trigger-btn { display: none !important; }

.header .sicon-sar,
.store-header .sicon-sar { display: none !important; }

.zn-lang-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  width: 68px !important;
  height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(15, 46, 34, 0.08) !important;
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
}

.zn-lang-label {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--brand-muted);
  transition: color 0.25s ease;
  pointer-events: none;
  font-family: 'Archivo', 'Cairo', sans-serif;
  text-transform: uppercase;
  user-select: none;
}

.zn-lang-toggle[data-lang="ar"] .zn-lang-label--ar,
.zn-lang-toggle[data-lang="en"] .zn-lang-label--en {
  color: var(--brand-green) !important;
}

.zn-lang-knob {
  position: absolute;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 46, 34, 0.25), 0 0 0 1px rgba(15, 46, 34, 0.05);
  transition: transform 0.28s cubic-bezier(0.35, 1.2, 0.5, 1);
  pointer-events: none;
  z-index: 1;
}

html[dir="ltr"] .zn-lang-toggle .zn-lang-knob { left: 3px; right: auto; }
html[dir="ltr"] .zn-lang-toggle[data-lang="ar"] .zn-lang-knob { transform: translateX(0); }
html[dir="ltr"] .zn-lang-toggle[data-lang="en"] .zn-lang-knob { transform: translateX(36px); }

html[dir="rtl"] .zn-lang-toggle .zn-lang-knob { right: 3px; left: auto; }
html[dir="rtl"] .zn-lang-toggle[data-lang="ar"] .zn-lang-knob { transform: translateX(0); }
html[dir="rtl"] .zn-lang-toggle[data-lang="en"] .zn-lang-knob { transform: translateX(-36px); }

.zn-lang-toggle:hover { background: rgba(15, 46, 34, 0.13) !important; }

/* ============================================================
   9. BOTTOM TAB NAV
   ============================================================ */
.zn-tabbar {
  position: fixed !important;
  bottom: 0 !important;
  inset-inline: 0 !important;
  z-index: 999 !important;
  background: rgba(247, 247, 244, 0.94) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--brand-border) !important;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  box-shadow: 0 -4px 24px rgba(15, 46, 34, 0.06) !important;
}

@media (min-width: 768px) {
  .zn-tabbar { display: none !important; }
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.zn-tab {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 4px !important;
  color: var(--brand-muted) !important;
  text-decoration: none !important;
  font-family: 'Cairo', 'Archivo', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transition: color 0.2s !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[dir="ltr"] .zn-tab {
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.zn-tab svg {
  width: 24px !important;
  height: 24px !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
  fill: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.zn-tab:active svg { transform: scale(0.9); }
.zn-tab:hover { color: var(--brand-green) !important; }
.zn-tab.is-active { color: var(--brand-green) !important; }

.zn-tab.is-active::before {
  content: "";
  position: absolute;
  top: -9px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gold);
}

html[dir="rtl"] .zn-tab.is-active::before { transform: translateX(50%); }
.zn-tab.is-active svg { stroke-width: 1.9 !important; }

[dir="rtl"] .zn-tabbar [data-lang="en"] { display: none !important; }
[dir="ltr"] .zn-tabbar [data-lang="ar"] { display: none !important; }

/* ============================================================
   10. PRODUCT CARDS — smaller (wider selector net)
   ============================================================ */
html body .products-grid,
html body .products-list,
html body .home-products,
html body .grid-products,
html body [class*="products-slider"] .swiper-wrapper,
html body salla-products-slider,
html body salla-products-list {
  gap: 10px !important;
  row-gap: 16px !important;
}

/* Container reset — broad selector net */
html body [class*="product-entry"],
html body [class*="product-card"],
html body [class*="product-item"],
html body .s-product-card,
html body salla-product-card,
html body salla-product-item {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
}

/* Force smaller inner content width — nuke any theme min-width */
html body [class*="product-entry"] > *,
html body [class*="product-card"] > *,
html body .s-product-card > * {
  max-width: 100% !important;
}

/* Image — cap aspect ratio, tight bottom margin */
html body [class*="product-entry"] img,
html body [class*="product-card"] img,
html body [class*="product-item"] img,
html body .s-product-card img,
html body salla-product-card img,
html body .product-image img,
html body .s-product-card-image img {
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

html body .product-image,
html body .s-product-card-image,
html body [class*="product-entry"] .image,
html body [class*="product-card"] .image {
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: rgba(15, 46, 34, 0.04) !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Product name */
html body [class*="product-entry"] h3,
html body [class*="product-entry"] .title,
html body [class*="product-entry"] .name,
html body [class*="product-card"] h3,
html body [class*="product-card"] .title,
html body [class*="product-card"] .name,
html body .s-product-card-title,
html body .s-product-card-content h3,
html body .product-entry__title {
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: var(--brand-green) !important;
  margin: 0 0 4px !important;
  text-transform: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html[dir="rtl"] [class*="product-entry"] h3,
html[dir="rtl"] [class*="product-card"] .name,
html[dir="rtl"] .s-product-card-title,
html[lang="ar"] .s-product-card-title {
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
}

/* Price */
html body [class*="product-entry"] .price,
html body [class*="product-card"] .price,
html body .s-product-card-price,
html body .product-price,
html body .product-entry__price {
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--brand-green) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

html body .s-product-card-offer-price,
html body .old-price,
html body .compare-price,
html body .product-price-before {
  font-size: 11px !important;
  color: var(--brand-muted) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  opacity: 0.7 !important;
}

/* Badges */
html body [class*="product-badge"],
html body .s-product-card-badge,
html body .badge {
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
  top: 8px !important;
  inset-inline-start: 8px !important;
}

/* ============================================================
   11. ADD TO CART BUTTONS — logo green + white text
   ============================================================ */
html body button.add-to-cart,
html body button.btn-add-to-cart,
html body .add-to-cart-btn,
html body .product-add-to-cart,
html body a.add-to-cart,
html body .s-product-card-action-btn,
html body .s-product-card-btn,
html body salla-add-product-button button,
html body salla-button[shape="btn"] button,
html body .btn.btn-add-to-cart,
html body [class*="add-to-cart"],
html body [class*="AddToCart"] {
  background: var(--brand-logo-green) !important;
  background-color: var(--brand-logo-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 20px !important;
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Force white text on ALL inner elements (spans, icons, text) */
html body button.add-to-cart *,
html body .add-to-cart-btn *,
html body .s-product-card-action-btn *,
html body salla-add-product-button button *,
html body [class*="add-to-cart"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

html[dir="rtl"] button.add-to-cart,
html[dir="rtl"] .add-to-cart-btn,
html[dir="rtl"] .s-product-card-action-btn,
html[lang="ar"] button.add-to-cart,
html[lang="ar"] .s-product-card-action-btn,
html[lang="ar"] [class*="add-to-cart"] {
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

html body button.add-to-cart:hover,
html body .add-to-cart-btn:hover,
html body .s-product-card-action-btn:hover,
html body salla-add-product-button button:hover,
html body [class*="add-to-cart"]:hover {
  background: #2d6240 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(62, 122, 77, 0.25) !important;
}

/* Product page full-width variant */
html body .product-details .add-to-cart,
html body .product-single .add-to-cart,
html body .product-sticky-cta .add-to-cart {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 13px !important;

  /* ============================================================
   12. FORCE CATEGORIES GRID 4 COLUMNS ON ALL SIZES
   ============================================================ */
html body .zn-cats .zn-cats__grid,
html body section.zn-cats .zn-cats__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

/* Smaller cards on mobile so 4 columns actually fit */
@media (max-width: 600px) {
  html body .zn-cats .zn-cat-card {
    padding: 10px 4px !important;
    gap: 6px !important;
    aspect-ratio: 1 / 1.1 !important;
    border-radius: 6px !important;
  }

  html body .zn-cats .zn-cat-card__icon {
    width: 26px !important;
    height: 26px !important;
  }

  html body .zn-cats .zn-cat-card__label {
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 380px) {
  html body .zn-cats .zn-cats__grid {
    gap: 4px !important;
  }
  html body .zn-cats .zn-cat-card {
    padding: 8px 3px !important;
  }
  html body .zn-cats .zn-cat-card__label {
    font-size: 8px !important;
  }
}

/* Horizontal padding of the categories section — tighter on mobile */
@media (max-width: 600px) {
  html body .zn-cats {
    padding-left: 12px !important;
    padding-right: 12px !important;

    
  }
}
}

/* ============================================================
   13. CATEGORIES GRID — FINAL NUCLEAR OVERRIDE
   ============================================================ */
html[lang] body section.zn-cats .zn-cats__grid,
html body .zn-cats > .zn-cats__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  grid-auto-flow: row !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body .zn-cats .zn-cats__grid > *,
html body .zn-cats .zn-cat-card {
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  flex: unset !important;
}

@media (max-width: 600px) {
  html[lang] body section.zn-cats .zn-cats__grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 5px !important;
  }

  html body .zn-cats .zn-cat-card {
    padding: 10px 3px !important;
    gap: 5px !important;
    aspect-ratio: 1 / 1.15 !important;
    border-radius: 5px !important;
    min-width: 0 !important;
  }

  html body .zn-cats .zn-cat-card__icon {
    width: 24px !important;
    height: 24px !important;
  }

  html body .zn-cats .zn-cat-card__label {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
  }

  html body .zn-cats {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 380px) {
  html body .zn-cats .zn-cat-card__label {
    font-size: 8px !important;
  }
}

/* ============================================================
   14. PRODUCT CARDS — tighten inner spacing only (Path A, safe)
   DO NOT touch buttons, wishlist, or grid. Only title/price/margins.
   ============================================================ */

/* Tighter spacing between image and content block */
html body custom-salla-product-card .s-product-card-image {
  margin-bottom: 6px !important;
}

/* Content block: use flex column with tight gaps */
html body custom-salla-product-card .s-product-card-content {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

/* Title — smaller, 2-line max */
html body custom-salla-product-card .s-product-card-content-title,
html body custom-salla-product-card .s-product-card-content-title a {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--brand-green, #0f2e22) !important;
  margin: 0 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

html[dir="rtl"] custom-salla-product-card .s-product-card-content-title {
  font-family: 'Cairo', sans-serif !important;
}

html[dir="ltr"] custom-salla-product-card .s-product-card-content-title {
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  letter-spacing: -0.005em !important;
}

/* Price — tighter, smaller */
html body custom-salla-product-card .s-product-card-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--brand-green, #0f2e22) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

html body custom-salla-product-card .s-product-card-price .sicon-sar {
  font-size: 10px !important;
  opacity: 0.7 !important;
}

/* Old / compare price */
html body custom-salla-product-card .s-product-card-offer-price {
  font-size: 10px !important;
  color: var(--brand-muted, #6b6b6b) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  opacity: 0.7 !important;
}

/* Content sub-block (where price lives) tighter margins */
html body custom-salla-product-card .s-product-card-content-sub {
  margin: 0 !important;
  padding: 0 !important;
}

html body custom-salla-product-card .s-product-card-content-main {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer (add-to-cart area) — only top margin, don't touch buttons */
html body custom-salla-product-card .s-product-card-content-footer {
  margin-top: 6px !important;
}

/* Grid gap — a touch more air between rows */
html body .s-products-list-wrapper,
html body .s-products-list-wrapper.s-products-list-vertical-cards {
  row-gap: 16px !important;
}

/* ============================================================
   16. HIDE "Made perfectly on Salla" attribution
   ============================================================ */
html body .store-footer .copyright-text,
html body .store-footer .copyright-text p {
  display: none !important;
}

/* ============================================================
   SECTION 18: HEADER + BOTTOM TAB NAV + ACCOUNT ICON
   ============================================================ */

/* ----- Header restyle ----- */
.salla-search-wrapper,
.header-search-wrapper,
.search-input-container,
.site-search {
  display: none !important;
}

.site-header,
.header,
#header,
header.main-header {
  background: var(--brand-bg, #faf8f2) !important;
  border-bottom: 1px solid var(--brand-border, #e8e4d6);
  padding: 12px 16px !important;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  background-color: rgba(250, 248, 242, 0.92) !important;
}

.site-header .logo,
.header .logo,
.site-logo,
.brand-logo,
.header-logo img {
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--brand-green, #0f2e22) !important;
}

html[dir="rtl"] .site-header .logo,
html[lang="ar"] .site-header .logo,
html[dir="rtl"] .site-logo,
html[lang="ar"] .site-logo {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}

.header-icon,
.site-header .icon,
.site-header button svg,
.header svg,
.header-actions svg,
.salla-cart-trigger svg,
.salla-user-menu svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--brand-green, #0f2e22) !important;
  stroke-width: 1.6 !important;
  fill: none !important;
  color: var(--brand-green, #0f2e22) !important;
}

.header-actions button,
.header-actions a,
.salla-cart-trigger,
.salla-user-menu,
.header .hamburger,
.menu-trigger,
.cart-trigger,
.account-trigger {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(15, 46, 34, 0.05) !important;
  border: none !important;
  transition: all 0.2s;
}

.header-actions button:hover,
.header-actions a:hover,
.salla-cart-trigger:hover,
.salla-user-menu:hover,
.header .hamburger:hover {
  background: rgba(15, 46, 34, 0.12) !important;
  transform: scale(1.05);
}

.cart-count,
.cart-badge,
.salla-cart-count,
.header-cart-count {
  background: var(--brand-green, #0f2e22) !important;
  color: var(--brand-cream, #f5efe0) !important;
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 2px solid var(--brand-bg, #faf8f2) !important;
  position: absolute !important;
  top: -4px !important;
  inset-inline-end: -4px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.language-switcher,
.lang-switcher,
.salla-language-switcher {
  border: 1px solid var(--brand-border, #e8e4d6) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-family: 'Archivo', 'Cairo', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--brand-green, #0f2e22) !important;
  background: transparent !important;
  text-transform: uppercase;
}

html[dir="rtl"] .language-switcher,
html[lang="ar"] .language-switcher {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  text-transform: none !important;
}

/* ----- Account icon (injected by JS) ----- */
.zn-account-trigger {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(15, 46, 34, 0.05) !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin: 0 6px;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: var(--brand-green, #0f2e22);
  flex-shrink: 0;
  vertical-align: middle;
  padding: 0;
}
.zn-account-trigger:hover {
  background: rgba(15, 46, 34, 0.12) !important;
  transform: scale(1.05);
}
.zn-account-trigger svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-green, #0f2e22);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ----- Login modal fix on mobile ----- */
@media (max-width: 767px) {
  .salla-modal,
  .modal,
  .modal-content,
  salla-modal,
  salla-login,
  .salla-login,
  .auth-modal,
  [class*="login-modal"],
  [class*="auth-overlay"] {
    z-index: 9999 !important;
  }

  .salla-modal .modal-body,
  .modal .modal-body,
  salla-modal .modal-body,
  salla-login .modal-body,
  .auth-modal .modal-body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .salla-modal.bottom-sheet,
  salla-modal.bottom-sheet {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal-backdrop,
  .salla-modal-backdrop,
  [class*="backdrop"] {
    z-index: 9998 !important;
    bottom: 0 !important;
  }
}

/* ----- Bottom tab nav ----- */
.zn-tabbar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 99;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--brand-border, #e8e4d6);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  box-shadow: 0 -4px 24px rgba(15, 46, 34, 0.06);
}

@media (min-width: 768px) {
  .zn-tabbar { display: none; }
}



.zn-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--brand-muted, #6b6b6b);
  text-decoration: none;
  font-family: 'Archivo', 'Cairo', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

html[dir="rtl"] .zn-tab,
html[lang="ar"] .zn-tab {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  text-transform: none;
}

.zn-tab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.zn-tab:active svg { transform: scale(0.9); }
.zn-tab:hover { color: var(--brand-green, #0f2e22); }
.zn-tab.is-active { color: var(--brand-green, #0f2e22); }

.zn-tab.is-active::before {
  content: "";
  position: absolute;
  top: -9px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gold, #c9a961);
}

html[dir="rtl"] .zn-tab.is-active::before {
  transform: translateX(50%);
}

.zn-tab.is-active svg { stroke-width: 1.9; }

.zn-tab-label {
  display: block;
  line-height: 1;
  pointer-events: none;
}

.zn-tab-icon-wrap {
  position: relative;
  display: inline-flex;
  pointer-events: none;
}

[dir="rtl"] .zn-tabbar .lang-en { display: none; }
[dir="ltr"] .zn-tabbar .lang-ar { display: none; }


/* =========================================================
   HIDE TABBAR ONLY ON ACTUAL PRODUCT PAGE
   ========================================================= */

@media (max-width: 767px) {

  /* ONLY single product page */
  body.product-single,
  body.product-page {

    padding-bottom: 0 !important;
  }

  body.product-single .zn-tabbar,
  body.product-page .zn-tabbar {

    display: none !important;
  }
}