/* ZAWIYAT ATHAR | زاوية أثر | FULL CUSTOMIZATION v2.0
   ملف بديل كامل للتنسيق المرفق المبني على ثيم رائد.
   استبدل CSS السابق بالكامل؛ لا تلصقه فوقه أو تحته.
   الهوية: أسود حبري #171717 — عاجي #F7F6F2 — حجري #C9C7C2.
   اختر Tajawal من إعدادات الثيم إن كان متاحاً؛ هذا الملف لا ينزّل خطوطاً.
   الشعار العربي المخصص يُرفع كصورة، ولا يُستبدل بخط نصوص الواجهة.
   ارفع شعار زاوية أثر والأيقونة والصور من إعدادات المتجر؛ CSS لا يرفعها.
   التحقق هنا نحوي ومحلي؛ مطابقة الثيم تحتاج معاينة داخل المتجر الفعلي.
   عدد شرائح السلايدر يضبط من إعدادات الثيم، دون فرض عرض يخالف حسابات Swiper.
*/

/* 01 — Brand */
:root {
  --za-accent: #171717;
  --za-ink: #171717;
  --za-paper: #F7F6F2;
  --za-white: #FFFFFF;
  --za-muted: #707070;
  --za-line: #DEDCD6;
  --za-radius: 2px;
  --za-font: "Tajawal", "Inter", system-ui, sans-serif;
  --za-shadow: none;
  --za-stone: #C9C7C2;
}
body {
  background: var(--za-paper);
  color: var(--za-ink);
  font-family: var(--za-font) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--za-ink); color: var(--za-paper); }
/* Preserve theme navigation positioning. Section gutters are scoped below. */
.store-header :is(a, button),
.s-product-card-entry :is(a, button),
.store-footer a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
:is(.store-header, .s-product-card-entry, .store-footer) :is(a, button):focus-visible {
  outline: 2px solid var(--za-ink) !important;
  outline-offset: 3px;
}
.store-footer :is(a, button):focus-visible { outline-color: var(--za-paper) !important; }

/* 02 — Header and navigation */
.store-header, .main-header, .main-nav-container,
.main-nav-container.fixed-header {
  background: var(--za-paper) !important;
  color: var(--za-ink);
}
.main-nav-container {
  border-bottom: 1px solid var(--za-line);
  box-shadow: 0 2px 12px rgb(23 23 23 / 3%);
}
.navbar-brand img { object-fit: contain; }
.main-menu > li > a {
  color: var(--za-ink);
  font-weight: 600;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}
.main-menu > li > a:hover {
  color: var(--za-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--za-ink);
}
.top-navbar, .top-nav, .announcement-bar {
  background: var(--za-ink) !important;
  color: var(--za-white) !important;
}
.top-navbar a, .top-nav a, .announcement-bar a {
  color: var(--za-paper) !important;
}
.announcement-bar { font-size: 13px; line-height: 1.7; }

/* 03 — Search and text fields: preserve checkboxes and radios */
salla-search input, input[type="search"], .search-input {
  background: var(--za-paper) !important;
  color: var(--za-ink) !important;
  border: 1px solid var(--za-line) !important;
  border-radius: var(--za-radius) !important;
  min-height: 44px;
  box-shadow: none;
}
input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"]),
textarea, select, .s-form-control {
  border: 1px solid var(--za-line);
  border-radius: var(--za-radius);
  color: var(--za-ink);
}
input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="search"]):focus,
textarea:focus, select:focus, .s-form-control:focus {
  border-color: var(--za-ink) !important;
  outline: 2px solid var(--za-accent);
  outline-offset: 2px;
}

/* 04 — Primary buttons; do not recolor payment-provider buttons */
.btn--primary, .btn-primary, .s-button-primary,
salla-button[color="primary"]::part(button) {
  background: var(--za-ink) !important;
  color: var(--za-paper) !important;
  border: 1px solid var(--za-accent) !important;
  border-radius: var(--za-radius) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease;
}
.s-button-btn:focus-visible {
  outline: 2px solid var(--za-ink) !important;
  outline-offset: 3px;
}

/* 05 — Section titles and existing banners */
.section-title, .section-header h2, .s-block__title h2,
.s-slider-block__title h2 {
  color: var(--za-ink) !important;
  font-weight: 600 !important;
  line-height: 1.5;
}
.section-title::after, .s-block__title h2::after,
.s-slider-block__title h2::after { content: none; }
.banner-entry, .main-slider {
  border-radius: var(--za-radius);
  overflow: hidden;
}
/* Full-image banners only; leave slider aspect ratios to theme settings. */
.banner-entry img { display: block; width: 100%; height: auto; }
.swiper-pagination-bullet {
  background: #C8C8C8 !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active { background: var(--za-accent) !important; }
.swiper-button-next, .swiper-button-prev,
.s-slider-block__title-nav-right, .s-slider-block__title-nav-left {
  width: 36px !important;
  height: 36px !important;
  background: var(--za-white) !important;
  color: var(--za-ink) !important;
  border: 1px solid var(--za-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* 06 — Categories */
.category-entry, .category-card,
.s-block--categories .swiper-slide > a {
  background: var(--za-paper);
  border: 1px solid transparent;
  border-radius: var(--za-radius);
  color: var(--za-ink);
  box-shadow: none;
  transition: border-color .2s ease;
}
.category-entry img, .category-card img { object-fit: contain; }
.category-entry :is(h3, h4), .category-card :is(h3, h4) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

/* 07 — Product cards: no forced column layout on horizontal cards */
.s-product-card-entry {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--za-radius) !important;
  overflow: visible;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.s-product-card-entry.s-product-card-vertical {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 0 !important;
  align-self: start;
}
.s-product-card-vertical .s-product-card-image {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  flex: none !important;
  padding: 0 !important;
  background: var(--za-white) !important;
  overflow: hidden;
}
.s-product-card-vertical .s-product-card-image img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  padding: 6px !important;
  /* White margins embedded in source images require image editing. */
}
.s-product-card-vertical .s-product-card-content {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 16px 0 0 !important;
}
.s-product-card-content-title { margin: 0 !important; }
.s-product-card-content-title a {
  color: var(--za-ink) !important;
  font-family: var(--za-font);
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  min-height: 0 !important;
  overflow-wrap: anywhere;
}
.s-product-card-vertical .s-product-card-content-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.s-product-card-content-sub { margin: 0 !important; padding: 0 !important; }
.s-product-card-price {
  color: var(--za-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
/* Keep the current sale price dark; mute only the struck-out old price. */
.s-product-card-entry :is(del, s), .s-product-card-entry .price-before {
  color: var(--za-muted) !important;
  font-size: 12px;
  font-weight: 400;
}
.s-product-card-vertical .s-product-card-content-footer {
  margin-top: 4px !important;
  padding-top: 0 !important;
}
.s-product-card-content-footer salla-add-product-button { display: block; width: 100%; }
.s-product-card-content-footer salla-add-product-button .s-button-btn,
.s-product-card-content-footer salla-add-product-button salla-button::part(button) {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 44px !important;
  background: var(--za-ink) !important;
  color: var(--za-paper) !important;
  border: 1px solid var(--za-accent) !important;
  border-radius: var(--za-radius) !important;
  font-family: var(--za-font);
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.s-product-card-promotion-title {
  background: var(--za-ink) !important;
  color: var(--za-paper) !important;
  border-radius: var(--za-radius) !important;
  padding: 4px 8px;
  font-size: 11px !important;
  font-weight: 600 !important;
}
/* No generic icon selector: do not recolor a selected favorite state. */
.s-product-card-wishlist-btn {
  border-radius: 50% !important;
  background: rgb(255 255 255 / 95%) !important;
  border: 1px solid var(--za-line) !important;
}
.s-products-slider-wrapper .swiper-slide,
.s-block--products-slider .swiper-slide { height: auto !important; }
.s-block--products-slider .swiper { padding-block: 4px 16px; }

/* 08 — Product details, cart and supporting sections */
.product-single, .product-details, .product-main { color: var(--za-ink); }
.product-single .price, .product-details .price { color: var(--za-ink); font-weight: 600; }
.cart-item, .cart-product {
  border: 1px solid var(--za-line);
  border-radius: var(--za-radius);
  background: var(--za-white);
}
.breadcrumbs, .breadcrumb { color: var(--za-muted); }
.pagination a, .pagination button { border-radius: var(--za-radius); }
.pagination .active {
  background: var(--za-ink) !important;
  color: var(--za-paper) !important;
  border-color: var(--za-paper) !important;
}
.s-block--features, .features-section { background: var(--za-paper); }
.feature-item, .features-section .feature { border-radius: var(--za-radius); }

/* 09 — Footer */
.store-footer, .store-footer__inner {
  background: var(--za-ink) !important;
  color: #D4D4D4 !important;
}
.store-footer__inner { border-top: 1px solid rgb(255 255 255 / 8%); }
.store-footer :is(h2, h3, h4, .footer-title) { color: var(--za-white) !important; font-weight: 600; }
.store-footer :is(h3, h4)::after { content: none; }
.store-footer p, .store-footer address,
.store-footer .footer-about, .store-footer .store-about {
  color: #BDBDBD;
  line-height: 1.9;
}
.store-footer a { color: #D4D4D4 !important; }
.store-footer a:hover { color: var(--za-paper) !important; }
.store-footer .contact-social, .store-footer .social-links { color: var(--za-paper); }
.store-footer .contact-social a, .store-footer .social-links a {
  border-radius: 50%;
}
.store-footer__copyright {
  background: #101010 !important;
  color: #BDBDBD !important;
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.store-footer__copyright a { color: var(--za-paper) !important; }
/* Preserve original logos and light backplates for readability. */
.store-footer :is(.payment-methods, .payments-methods) img {
  filter: none !important;
  opacity: 1 !important;
}

/* 10 — Existing mobile navigation; no new bar or positioning */
.bottom-nav, .mobile-nav, salla-bottom-navigation {
  background: var(--za-white) !important;
  border-top: 1px solid var(--za-line);
  box-shadow: 0 -3px 14px rgb(23 23 23 / 4%);
}
.bottom-nav .active, .mobile-nav .active { color: var(--za-ink) !important; font-weight: 600; }
.bottom-nav .active i, .mobile-nav .active i { color: var(--za-ink) !important; }

/* 11 — Hover on devices that support it */
@media (hover: hover) {
  .s-product-card-entry:hover {
    border-color: #D4D4D4 !important;
    box-shadow: var(--za-shadow) !important;
  }
  .category-entry:hover, .category-card:hover,
  .s-block--categories .swiper-slide > a:hover { border-color: var(--za-stone); }
  .swiper-button-next:hover, .swiper-button-prev:hover,
  .s-slider-block__title-nav-right:hover, .s-slider-block__title-nav-left:hover {
    background: var(--za-paper) !important;
  }
  .btn--primary:not(:disabled):not([aria-disabled="true"]):hover, .btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
  .s-button-primary:not(:disabled):not([aria-disabled="true"]):hover,
  salla-button[color="primary"]:not([disabled]):not([aria-disabled="true"])::part(button):hover,
  .s-product-card-content-footer salla-add-product-button .s-button-btn:not(:disabled):not([aria-disabled="true"]):hover,
  .s-product-card-content-footer salla-add-product-button salla-button:not([disabled]):not([aria-disabled="true"])::part(button):hover {
    background: #353535 !important;
    color: var(--za-paper) !important;
    border-color: #353535 !important;
  }
}
/* Disabled purchase controls, including pointer hover. */
.s-product-card-content-footer salla-add-product-button .s-button-btn:disabled,
.s-product-card-content-footer salla-add-product-button .s-button-btn[aria-disabled="true"],
.s-product-card-content-footer salla-add-product-button salla-button[disabled]::part(button),
.s-button-primary:disabled, .btn-primary:disabled, .btn--primary:disabled,
salla-button[color="primary"][disabled]::part(button) {
  background: var(--za-paper) !important;
  color: var(--za-muted) !important;
  border-color: var(--za-line) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 12 — Mobile and motion preferences */
@media (max-width: 768px) {
  .s-product-card-entry { border-radius: var(--za-radius) !important; }
  .s-product-card-vertical .s-product-card-content { padding: 12px 0 0 !important; gap: 6px !important; }
  .s-product-card-content-title a { font-size: 13px !important; }
  .s-product-card-price { font-size: 14px !important; }
  .section-title, .section-header h2, .s-block__title h2, .s-slider-block__title h2 {
    font-size: 20px !important;
  }
  .category-entry :is(h3, h4), .category-card :is(h3, h4) { font-size: 12px; }
  .store-footer__inner { padding-block: 32px; }
  .store-footer :is(h3, h4) { font-size: 16px; }
  .store-footer p, .store-footer li { font-size: 13px; }
  .store-footer__copyright { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .store-header :is(a, button), .s-product-card-entry,
  .s-product-card-entry :is(a, button), .store-footer a,
  .category-entry, .category-card { transition: none !important; }
}


/* 13 — Header proportions: keep the theme's navigation behavior */
.store-header :is(.navbar-brand, .store-logo) { flex-shrink: 0; }
.store-header :is(.navbar-brand, .store-logo) img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 190px !important;
  max-height: 62px !important;
  object-fit: contain !important;
}
.main-nav-container :is(.header-inner, .navbar-inner, .navbar-wrapper) {
  background: var(--za-paper);
}
.main-menu > li > a { font-size: 14px; }
.main-menu > li > a:hover { text-decoration-color: var(--za-ink); }
.top-navbar :is(a, button), .top-nav :is(a, button), .announcement-bar a {
  color: var(--za-paper) !important;
}
.top-navbar input, .top-nav input {
  background: var(--za-paper) !important;
  color: var(--za-ink) !important;
}

/* 14 — Editorial spacing, scoped to storefront sections */
.s-block { margin-block: clamp(28px, 4vw, 64px); }
.s-block > :is(.container, .s-container) {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 48px);
}
.section-header, .s-block__title, .s-slider-block__title {
  margin-bottom: 24px;
  gap: 16px;
}
.section-title, .section-header h2, .s-block__title h2,
.s-slider-block__title h2 { font-size: clamp(22px, 2.2vw, 32px); }
.s-slider-block__title a {
  color: var(--za-ink) !important;
  font-size: 13px;
  text-underline-offset: 5px;
}
.s-slider-block__title a:hover { text-decoration: underline; }
/* Preserve banner source proportions and theme-controlled slider positioning. */
.banner-entry { border-radius: 0; }
.banner-entry img { object-fit: contain; }

/* 15 — Category/search grid: four wide cards, then three, then two.
   Target only actual card parents; do not turn ancestors into nested grids. */
#main-content salla-products-list[data-testid="store-products-list"] {
  --za-products-cols: 4;
  --za-products-gap: 24px;
}
#main-content salla-products-list[data-testid="store-products-list"]
:is(div, section, salla-infinite-scroll):not(.swiper-wrapper):has(> :is(custom-salla-product-card, salla-product-card)) {
  display: grid !important;
  grid-template-columns: repeat(var(--za-products-cols), minmax(0, 1fr)) !important;
  column-gap: var(--za-products-gap) !important;
  row-gap: 36px !important;
  align-items: start;
}
#main-content salla-products-list[data-testid="store-products-list"]
:is(custom-salla-product-card, salla-product-card) {
  min-width: 0;
  max-width: 100%;
}
/* Full original purchase labels remain visible, including options and sold-out states. */
.s-product-card-vertical .s-product-card-content-title a {
  min-height: 3.3em !important;
}
.s-product-card-vertical .s-product-card-content-footer {
  position: static;
  width: 100%;
  margin-top: 12px !important;
}
.s-product-card-content-footer salla-add-product-button .s-button-btn,
.s-product-card-content-footer salla-add-product-button salla-button::part(button) {
  padding: 10px 14px;
  white-space: normal;
  line-height: 1.5;
}
.store-footer__inner { padding-block: 48px; }
.store-footer .social-links a, .store-footer .contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.store-footer .social-links a:hover, .store-footer .contact-social a:hover {
  background: var(--za-paper);
  color: var(--za-ink) !important;
}

@media (min-width: 769px) and (max-width: 1099px) {
  #main-content salla-products-list[data-testid="store-products-list"] {
    --za-products-cols: 3;
    --za-products-gap: 18px;
  }
}
@media (max-width: 768px) {
  .store-header :is(.navbar-brand, .store-logo) img {
    max-width: 132px !important;
    max-height: 44px !important;
  }
  #main-content salla-products-list[data-testid="store-products-list"] {
    --za-products-cols: 2;
    --za-products-gap: 12px;
  }
  .section-header, .s-block__title, .s-slider-block__title {
    margin-bottom: 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .s-product-card-content-footer salla-add-product-button .s-button-btn,
  .s-product-card-content-footer salla-add-product-button salla-button::part(button) {
    padding-inline: 8px;
    font-size: 12px !important;
  }
  .store-footer__inner { padding-block: 32px; }
}

.s-trust-badges-image{
    opacity:0;
}

.s-trust-badges-wrapper{
    position:relative;
}

.s-trust-badges-wrapper::before{
    content:"";
    width:55px;
    height:55px;
    position:absolute;
    right:0;
    top:0;
    background:url('https://cdn.salla.network/cdn-cgi/image/fit=scale-down,width=70,height=70,onerror=redirect,format=auto/images/commercial-register.png') center/contain no-repeat;
}

.s-trust-badges-label{
    font-size:0;
}

.s-trust-badges-label::after{
    content:"السجل التجاري";
    font-size:14px;
}

.s-trust-badges-number{
    font-size:0;
}

.s-trust-badges-number::after{
    content:"7055036557";
    font-size:16px;
    font-weight:700;
}
/* =========================================
   FIX — Trust Badge Mobile
   إزالة عبارة وثيقة العمل الحر من الجوال
   ========================================= */

@media (max-width: 768px) {

    .s-trust-badges-wrapper {
        position: relative !important;
        font-size: 0 !important;
    }

    /* إخفاء أي نص أصلي داخل الشارة */
    .s-trust-badges-wrapper > * {
        font-size: 0 !important;
    }

    /* إظهار اسم السجل التجاري فقط */
    .s-trust-badges-label {
        font-size: 0 !important;
    }

    .s-trust-badges-label::after {
        content: "السجل التجاري" !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #D4D4D4 !important;
        white-space: nowrap !important;
    }

    /* إظهار رقم السجل فقط */
    .s-trust-badges-number {
        font-size: 0 !important;
    }

    .s-trust-badges-number::after {
        content: "7055036557" !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        color: #FFFFFF !important;
        white-space: nowrap !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — FULL CUSTOMIZATION v2.0
   Luxury Editorial Storefront | Salla Raed
   يوضع هذا الجزء أخيراً حتى تكون له أولوية على القواعد السابقة.
   ===================================================== */

/* =====================================================
   16 — GLOBAL BRAND SYSTEM
   ===================================================== */
:root {
    --za-ink: #171717 !important;
    --za-paper: #F7F6F2 !important;
    --za-stone: #C9C7C2 !important;
    --za-white: #FFFFFF !important;
    --za-muted: #74716C !important;
    --za-line: #DEDCD6 !important;
    --za-soft-line: #ECE9E3 !important;

    --za-radius-xs: 2px;
    --za-radius-sm: 6px;
    --za-radius-md: 10px;
    --za-radius-lg: 14px;

    --za-font: "Tajawal", "Noto Sans Arabic", Arial, sans-serif;
    --za-heading-font: "Aref Ruqaa", "Noto Naskh Arabic", "Tajawal", serif;
    --za-latin-font: "Cormorant Garamond", "Times New Roman", serif;

    --za-shadow-soft: 0 8px 30px rgb(23 23 23 / 5%);
    --za-shadow-hover: 0 12px 34px rgb(23 23 23 / 8%);
    --za-container-pad: clamp(12px, 1.8vw, 30px);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--za-white) !important;
    color: var(--za-ink) !important;
    font-family: var(--za-font) !important;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, .section-title, .s-block__title h2, .s-slider-block__title h2) {
    color: var(--za-ink);
}

:lang(en),
.en,
.brand-en,
.latin-brand {
    font-family: var(--za-latin-font) !important;
    letter-spacing: .14em;
}

/* =====================================================
   17 — FULL WIDTH STOREFRONT + EDITORIAL SPACING
   ===================================================== */
.store-header :is(.container, .s-container),
.main-header :is(.container, .s-container),
.main-nav-container :is(.container, .s-container),
.top-navbar :is(.container, .s-container),
.top-nav :is(.container, .s-container),
.announcement-bar :is(.container, .s-container),
main :is(.container, .s-container),
.home :is(.container, .s-container),
.s-block > :is(.container, .s-container),
.s-slider-block > :is(.container, .s-container),
.s-products-slider-wrapper :is(.container, .s-container),
.s-block--products-slider :is(.container, .s-container),
.s-block--categories :is(.container, .s-container),
.s-block--banners :is(.container, .s-container) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: var(--za-container-pad) !important;
    box-sizing: border-box !important;
}

main,
.main-content,
.content-wrapper,
.page-wrapper {
    padding-top: 0 !important;
}

.s-block,
.s-slider-block,
.s-block--products-slider,
.s-block--categories,
.s-products-slider-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin-block: clamp(22px, 3vw, 44px) !important;
    padding-block: 0 !important;
}

/* =====================================================
   18 — HEADER / NAVIGATION
   ===================================================== */
.store-header,
.main-header,
.main-nav-container,
.main-nav-container.fixed-header {
    width: 100% !important;
    max-width: none !important;
    background: var(--za-paper) !important;
    color: var(--za-ink) !important;
    border-bottom: 1px solid var(--za-soft-line) !important;
    box-shadow: none !important;
}

.top-navbar,
.top-nav,
.announcement-bar {
    width: 100% !important;
    max-width: none !important;
    background: var(--za-ink) !important;
    color: var(--za-paper) !important;
    border: 0 !important;
}

.top-navbar :is(a, button),
.top-nav :is(a, button),
.announcement-bar :is(a, button) {
    color: var(--za-paper) !important;
}

.store-header :is(.inner, .header-inner, .navbar-inner, .navbar-wrapper),
.main-header :is(.inner, .header-inner, .navbar-inner, .navbar-wrapper),
.main-nav-container :is(.inner, .header-inner, .navbar-inner, .navbar-wrapper) {
    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    background: var(--za-paper) !important;
    box-shadow: none !important;
}

.store-logo,
.navbar-brand,
.site-logo,
.logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.store-logo img,
.navbar-brand img,
.site-logo img,
.logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 168px !important;
    max-height: 46px !important;
    object-fit: contain !important;
}

@media (min-width: 769px) {
    .main-menu,
    .nav-menu,
    .navbar-nav {
        display: flex !important;
        align-items: center !important;
        gap: clamp(18px, 2vw, 30px) !important;
        flex-wrap: nowrap !important;
    }
}

.main-menu > li > a,
.nav-menu > li > a,
.navbar-nav > li > a {
    color: var(--za-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-underline-offset: 7px !important;
    transition: opacity .2s ease, text-decoration-color .2s ease !important;
}

@media (hover: hover) {
    .main-menu > li > a:hover,
    .nav-menu > li > a:hover,
    .navbar-nav > li > a:hover {
        color: var(--za-ink) !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
        text-decoration-color: var(--za-ink) !important;
    }
}

.header-actions,
.navbar-actions,
.user-menu,
.store-header__cart,
.store-header__user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* =====================================================
   19 — SEARCH + FORM CONTROLS
   ===================================================== */
salla-search input,
input[type="search"],
.search-input {
    min-height: 44px !important;
    background: var(--za-white) !important;
    color: var(--za-ink) !important;
    border: 1px solid var(--za-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding-inline: 16px !important;
}

input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"]),
textarea,
select,
.s-form-control {
    background: var(--za-white);
    border: 1px solid var(--za-line) !important;
    border-radius: var(--za-radius-sm) !important;
    color: var(--za-ink) !important;
    box-shadow: none !important;
}

input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="search"]):focus,
textarea:focus,
select:focus,
.s-form-control:focus {
    border-color: var(--za-ink) !important;
    outline: 1px solid var(--za-ink) !important;
    outline-offset: 1px !important;
}

/* =====================================================
   20 — SECTION HEADERS / PRODUCT SLIDER HEADER
   ===================================================== */
.section-header,
.s-block__title,
.s-slider-block__title,
.s-slider-block__title-wrap,
.s-block--products-slider .s-slider-block__title,
salla-products-slider .s-slider-block__title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    gap: 14px !important;
}

.section-title,
.section-header h2,
.s-block__title h2,
.s-slider-block__title h2,
.s-block--products-slider .s-slider-block__title h2,
salla-products-slider .s-slider-block__title h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--za-ink) !important;
    font-family: var(--za-heading-font) !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.section-title::after,
.section-header h2::after,
.s-block__title h2::after,
.s-slider-block__title h2::after {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 1px !important;
    margin-top: 7px !important;
    background: var(--za-ink) !important;
    border-radius: 0 !important;
}

.s-block--products-slider .s-slider-block__title a,
.s-products-slider-wrapper .s-slider-block__title a,
salla-products-slider .s-slider-block__title a {
    color: var(--za-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    opacity: .82 !important;
}

@media (hover: hover) {
    .s-block--products-slider .s-slider-block__title a:hover,
    .s-products-slider-wrapper .s-slider-block__title a:hover,
    salla-products-slider .s-slider-block__title a:hover {
        color: var(--za-ink) !important;
        opacity: 1 !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 5px !important;
    }
}

.s-slider-block__title-nav {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.swiper-button-next,
.swiper-button-prev,
.s-slider-block__title-nav-right,
.s-slider-block__title-nav-left {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    background: var(--za-white) !important;
    color: var(--za-ink) !important;
    border: 1px solid var(--za-line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .swiper-button-next:hover,
    .swiper-button-prev:hover,
    .s-slider-block__title-nav-right:hover,
    .s-slider-block__title-nav-left:hover {
        background: var(--za-ink) !important;
        color: var(--za-paper) !important;
        border-color: var(--za-ink) !important;
    }
}

/* =====================================================
   21 — MAIN / CATEGORY BANNERS
   ===================================================== */
.main-slider,
.s-block--banners,
.s-block--banners .container,
.s-block--banners .s-container {
    width: 100% !important;
    max-width: none !important;
}

.main-slider,
.main-slider .swiper,
.main-slider .swiper-wrapper {
    overflow: hidden !important;
}

.banner-entry {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    border-radius: var(--za-radius-md) !important;
    background: var(--za-paper) !important;
    box-shadow: none !important;
}

.banner-entry > a,
.banner-entry picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.banner-entry img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

/* بانرات الأقسام المصممة 350×200 */
.s-block--banners .banner-entry {
    aspect-ratio: 350 / 200 !important;
}

.s-block--banners .banner-entry img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: var(--za-paper) !important;
}

@media (hover: hover) {
    .s-block--banners .banner-entry {
        transition: box-shadow .25s ease, transform .25s ease !important;
    }

    .s-block--banners .banner-entry:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--za-shadow-soft) !important;
    }

    .s-block--banners .banner-entry:hover img {
        transform: none !important;
    }
}

/* =====================================================
   22 — CATEGORIES
   ===================================================== */
.category-entry,
.category-card,
.s-block--categories .swiper-slide > a {
    background: var(--za-paper) !important;
    color: var(--za-ink) !important;
    border: 1px solid transparent !important;
    border-radius: var(--za-radius-md) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.category-entry img,
.category-card img {
    display: block !important;
    width: 100% !important;
    object-fit: contain !important;
}

.category-entry :is(h3, h4),
.category-card :is(h3, h4) {
    color: var(--za-ink) !important;
    font-family: var(--za-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

@media (hover: hover) {
    .category-entry:hover,
    .category-card:hover,
    .s-block--categories .swiper-slide > a:hover {
        border-color: var(--za-stone) !important;
    }
}

/* =====================================================
   23 — LUXURY PRODUCT CARD
   ===================================================== */
.s-product-card-entry.s-product-card-vertical {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--za-white) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}

.s-product-card-vertical .s-product-card-image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--za-paper) !important;
    border: 0 !important;
    border-radius: var(--za-radius-sm) !important;
    overflow: hidden !important;
}

.s-product-card-vertical .s-product-card-image img {
    display: block !important;
    width: 90% !important;
    height: 90% !important;
    max-width: 90% !important;
    max-height: 90% !important;
    margin: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    transition: transform .35s ease !important;
}

@media (hover: hover) {
    .s-product-card-entry:hover .s-product-card-image img {
        transform: scale(1.025) !important;
    }
}

.s-product-card-vertical .s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 10px 2px 0 !important;
    background: var(--za-white) !important;
    text-align: right !important;
}

.s-product-card-vertical .s-product-card-content-title {
    margin: 0 !important;
    padding: 0 !important;
}

.s-product-card-vertical .s-product-card-content-title a,
.s-product-card-entry:hover .s-product-card-content-title a,
.s-product-card-entry:focus-within .s-product-card-content-title a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    height: 3.25em !important;
    min-height: 3.25em !important;
    overflow: hidden !important;
    color: var(--za-ink) !important;
    -webkit-text-fill-color: var(--za-ink) !important;
    font-family: var(--za-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.62 !important;
    text-decoration: none !important;
}

.s-product-card-vertical .s-product-card-content-title a * {
    color: var(--za-ink) !important;
    -webkit-text-fill-color: var(--za-ink) !important;
}

.s-product-card-vertical .s-product-card-content-sub {
    margin: 0 !important;
    padding: 0 !important;
}

.s-product-card-vertical .s-product-card-price {
    margin: 0 !important;
    color: var(--za-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.s-product-card-vertical :is(del, s, .price-before) {
    color: var(--za-muted) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

.s-product-card-vertical .s-product-card-promotion-title {
    background: var(--za-ink) !important;
    color: var(--za-paper) !important;
    border-radius: 0 0 var(--za-radius-sm) 0 !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* المفضلة */
.s-product-card-vertical .s-product-card-wishlist-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background: rgb(255 255 255 / 94%) !important;
    color: var(--za-ink) !important;
    border: 1px solid var(--za-line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* زر الشراء — واضح وفخم ويحافظ على نصوص الحالات المختلفة */
.s-product-card-vertical .s-product-card-content-footer {
    position: static !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
}

.s-product-card-vertical .s-product-card-content-footer salla-add-product-button {
    display: block !important;
    width: 100% !important;
}

.s-product-card-vertical salla-add-product-button .s-button-btn,
.s-product-card-vertical salla-add-product-button salla-button::part(button) {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    background: var(--za-ink) !important;
    color: var(--za-paper) !important;
    border: 1px solid var(--za-ink) !important;
    border-radius: var(--za-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--za-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    transition: background-color .2s ease, color .2s ease !important;
}

@media (hover: hover) {
    .s-product-card-vertical salla-add-product-button .s-button-btn:not(:disabled):not([aria-disabled="true"]):hover,
    .s-product-card-vertical salla-add-product-button salla-button:not([disabled]):not([aria-disabled="true"])::part(button):hover {
        background: #353535 !important;
        border-color: #353535 !important;
        color: var(--za-paper) !important;
    }
}

.s-product-card-vertical salla-add-product-button .s-button-btn:disabled,
.s-product-card-vertical salla-add-product-button .s-button-btn[aria-disabled="true"],
.s-product-card-vertical salla-add-product-button salla-button[disabled]::part(button) {
    background: var(--za-paper) !important;
    color: var(--za-muted) !important;
    border-color: var(--za-line) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* =====================================================
   24 — PRODUCT LIST GRID
   كبير 5 | لابتوب 4 | تابلت 3 | جوال 2
   ===================================================== */
#main-content salla-products-list[data-testid="store-products-list"] {
    --za-products-cols: 5;
    --za-products-gap: 20px;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
}

@supports selector(:has(*)) {
    #main-content
    salla-products-list[data-testid="store-products-list"]
    :is(div, section, salla-infinite-scroll):not(.swiper-wrapper):has(> :is(custom-salla-product-card, salla-product-card)),

    #main-content
    salla-products-list[data-testid="store-products-list"]
    :is(div, section, salla-infinite-scroll):not(.swiper-wrapper):has(> * > :is(custom-salla-product-card, salla-product-card)) {
        display: grid !important;
        grid-template-columns: repeat(var(--za-products-cols), minmax(0, 1fr)) !important;
        column-gap: var(--za-products-gap) !important;
        row-gap: 32px !important;
        width: 100% !important;
        max-width: none !important;
        align-items: start !important;
    }

    #main-content
    salla-products-list[data-testid="store-products-list"]
    :is(div, section, salla-infinite-scroll):not(.swiper-wrapper):has(> * > :is(custom-salla-product-card, salla-product-card)) > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

#main-content salla-products-list[data-testid="store-products-list"] :is(custom-salla-product-card, salla-product-card) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

@media (min-width: 1500px) {
    #main-content salla-products-list[data-testid="store-products-list"] {
        --za-products-cols: 5;
        --za-products-gap: 22px;
    }
}

@media (min-width: 1100px) and (max-width: 1499px) {
    #main-content salla-products-list[data-testid="store-products-list"] {
        --za-products-cols: 4;
        --za-products-gap: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1099px) {
    #main-content salla-products-list[data-testid="store-products-list"] {
        --za-products-cols: 3;
        --za-products-gap: 16px;
    }
}

@media (max-width: 768px) {
    #main-content salla-products-list[data-testid="store-products-list"] {
        --za-products-cols: 2;
        --za-products-gap: 10px;
    }
}

/* =====================================================
   25 — PRODUCT DETAILS PAGE
   ===================================================== */
.product-single,
.product-details,
.product-main {
    color: var(--za-ink) !important;
}

.product-single :is(h1, .product-title),
.product-details :is(h1, .product-title) {
    color: var(--za-ink) !important;
    font-family: var(--za-heading-font) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.product-single .price,
.product-details .price {
    color: var(--za-ink) !important;
    font-weight: 700 !important;
}

.product-single :is(.product-description, .description),
.product-details :is(.product-description, .description) {
    color: #3C3A37 !important;
    line-height: 2 !important;
}

.product-single :is(.gallery, .product-gallery),
.product-main :is(.gallery, .product-gallery) {
    background: var(--za-paper) !important;
    border-radius: var(--za-radius-md) !important;
    overflow: hidden !important;
}

/* =====================================================
   26 — CART / CHECKOUT SUPPORTING UI
   ===================================================== */
.cart-item,
.cart-product {
    background: var(--za-white) !important;
    border: 1px solid var(--za-soft-line) !important;
    border-radius: var(--za-radius-md) !important;
    box-shadow: none !important;
}

.breadcrumbs,
.breadcrumb {
    color: var(--za-muted) !important;
    font-size: 12px !important;
}

.pagination a,
.pagination button {
    border-radius: 50% !important;
    border-color: var(--za-line) !important;
}

.pagination .active {
    background: var(--za-ink) !important;
    color: var(--za-paper) !important;
    border-color: var(--za-ink) !important;
}

/* =====================================================
   27 — PRIMARY BUTTONS
   ===================================================== */
.btn--primary,
.btn-primary,
.s-button-primary,
salla-button[color="primary"]::part(button) {
    background: var(--za-ink) !important;
    color: var(--za-paper) !important;
    border: 1px solid var(--za-ink) !important;
    border-radius: var(--za-radius-sm) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .btn--primary:not(:disabled):hover,
    .btn-primary:not(:disabled):hover,
    .s-button-primary:not(:disabled):hover,
    salla-button[color="primary"]:not([disabled])::part(button):hover {
        background: #353535 !important;
        color: var(--za-paper) !important;
        border-color: #353535 !important;
    }
}

/* =====================================================
   28 — FOOTER
   ===================================================== */
.store-footer,
.store-footer__inner {
    background: var(--za-ink) !important;
    color: #D0CDC7 !important;
}

.store-footer__inner {
    padding-block: 46px !important;
    border-top: 1px solid rgb(255 255 255 / 8%) !important;
}

.store-footer :is(h2, h3, h4, .footer-title) {
    color: var(--za-white) !important;
    font-family: var(--za-heading-font) !important;
    font-weight: 500 !important;
}

.store-footer :is(h2, h3, h4, .footer-title)::after {
    content: "" !important;
    display: block !important;
    width: 30px !important;
    height: 1px !important;
    margin-top: 8px !important;
    background: var(--za-stone) !important;
}

.store-footer p,
.store-footer address,
.store-footer .footer-about,
.store-footer .store-about {
    color: #BDB9B2 !important;
    line-height: 1.9 !important;
}

.store-footer a {
    color: #D4D0CA !important;
    text-decoration: none !important;
}

@media (hover: hover) {
    .store-footer a:hover,
    .store-footer a:focus {
        color: var(--za-white) !important;
    }
}

.store-footer .social-links a,
.store-footer .contact-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 42px !important;
    color: var(--za-white) !important;
    border: 1px solid rgb(255 255 255 / 28%) !important;
    border-radius: 50% !important;
}

@media (hover: hover) {
    .store-footer .social-links a:hover,
    .store-footer .contact-social a:hover {
        background: var(--za-paper) !important;
        color: var(--za-ink) !important;
        border-color: var(--za-paper) !important;
    }
}

.store-footer__copyright {
    background: #101010 !important;
    color: #A9A69F !important;
    border-top: 1px solid rgb(255 255 255 / 8%) !important;
}

/* =====================================================
   29 — MOBILE CATEGORY BANNERS + MOBILE UI
   ===================================================== */
@media (max-width: 768px) {

    :root {
        --za-container-pad: 10px;
    }

    .store-header :is(.inner, .header-inner, .navbar-inner, .navbar-wrapper),
    .main-header :is(.inner, .header-inner, .navbar-inner, .navbar-wrapper),
    .main-nav-container :is(.inner, .header-inner, .navbar-inner, .navbar-wrapper) {
        min-height: 50px !important;
    }

    .store-logo img,
    .navbar-brand img,
    .site-logo img,
    .logo img {
        max-width: 118px !important;
        max-height: 34px !important;
    }

    .header-actions,
    .navbar-actions,
    .user-menu {
        gap: 7px !important;
    }

    .s-block,
    .s-slider-block,
    .s-block--products-slider,
    .s-block--categories,
    .s-products-slider-wrapper {
        margin-block: 18px !important;
    }

    .section-header,
    .s-block__title,
    .s-slider-block__title,
    .s-block--products-slider .s-slider-block__title,
    salla-products-slider .s-slider-block__title {
        margin-bottom: 10px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .section-title,
    .section-header h2,
    .s-block__title h2,
    .s-slider-block__title h2 {
        font-size: 21px !important;
    }

    @supports selector(:has(*)) {
        .s-block--banners .grid,
        .s-block--banners .banners-grid,
        .s-block--banners .container > div:has(> .banner-entry),
        .s-block--banners .s-container > div:has(> .banner-entry) {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 9px !important;
            width: 100% !important;
        }
    }

    .s-block--banners .banner-entry {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        aspect-ratio: 350 / 200 !important;
        border-radius: 7px !important;
    }

    .s-block--banners .banner-entry img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 7px !important;
        object-fit: contain !important;
    }

    .s-product-card-vertical .s-product-card-image img {
        width: 88% !important;
        height: 88% !important;
        max-width: 88% !important;
        max-height: 88% !important;
    }

    .s-product-card-vertical .s-product-card-content {
        gap: 3px !important;
        padding: 7px 1px 0 !important;
    }

    .s-product-card-vertical .s-product-card-content-title a {
        font-size: 12px !important;
        line-height: 1.55 !important;
        height: 3.1em !important;
        min-height: 3.1em !important;
    }

    .s-product-card-vertical .s-product-card-price {
        font-size: 14px !important;
    }

    .s-product-card-vertical salla-add-product-button .s-button-btn,
    .s-product-card-vertical salla-add-product-button salla-button::part(button) {
        min-height: 38px !important;
        padding: 7px 6px !important;
        font-size: 11px !important;
    }

    .store-footer__inner {
        padding-block: 32px !important;
    }

    .store-footer p,
    .store-footer li {
        font-size: 13px !important;
    }

    .store-footer__copyright {
        text-align: center !important;
    }

    .bottom-nav,
    .mobile-nav,
    salla-bottom-navigation {
        background: rgb(255 255 255 / 96%) !important;
        border-top: 1px solid var(--za-soft-line) !important;
        box-shadow: 0 -4px 18px rgb(23 23 23 / 5%) !important;
        backdrop-filter: blur(10px);
    }

    .bottom-nav .active,
    .mobile-nav .active {
        color: var(--za-ink) !important;
        font-weight: 600 !important;
    }

    /* إعادة زر القائمة إن أخفاه تخصيص سابق */
    .store-header :is(button, a):has([class*="sicon-menu"]),
    .main-header :is(button, a):has([class*="sicon-menu"]),
    .main-nav-container :is(button, a):has([class*="sicon-menu"]),
    .store-header .burger-menu,
    .store-header .menu-trigger,
    .store-header .menu-btn,
    .store-header .nav-trigger,
    .main-header .burger-menu,
    .main-header .menu-trigger,
    .main-header .menu-btn,
    .main-header .nav-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        inset: auto !important;
        background: transparent !important;
        color: var(--za-ink) !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 20 !important;
        flex: 0 0 40px !important;
    }
}

@media (max-width: 380px) {
    @supports selector(:has(*)) {
        .s-block--banners .grid,
        .s-block--banners .banners-grid,
        .s-block--banners .container > div:has(> .banner-entry),
        .s-block--banners .s-container > div:has(> .banner-entry) {
            gap: 7px !important;
        }
    }
}

/* =====================================================
   30 — ACCESSIBILITY / MOTION
   ===================================================== */
:where(a, button, input, select, textarea):focus-visible {
    outline: 1px solid var(--za-ink) !important;
    outline-offset: 3px !important;
}

::selection {
    background: var(--za-ink) !important;
    color: var(--za-paper) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =====================================================
   END — ZAWIYAT ATHAR FULL CUSTOMIZATION v2.0
   ===================================================== */

/* =====================================================
   ZAWIYAT ATHAR — CATEGORY BANNERS SAFE FIX v2.2
   الصورة هي الواجهة المرئية، مع إبقاء أبعاد الحاوية فقط
   حتى لا ينهار قسم البانرات في ثيم رائد.
   ===================================================== */

/* إبقاء الحاوية لأغراض التخطيط فقط، بدون أي مظهر بصري */
.s-block--banners .banner-entry {
    position: relative !important;

    display: block !important;
    width: 100% !important;
    height: auto !important;

    /* ضروري لثيم رائد حتى لا تنهار مساحة البانر */
    aspect-ratio: 350 / 200 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;
}

/* الرابط يملأ مساحة البانر فقط */
.s-block--banners .banner-entry > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* picture يملأ المساحة بدون أي إطار */
.s-block--banners .banner-entry picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* الصورة نفسها هي الزر المرئي بالكامل */
.s-block--banners .banner-entry img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: none !important;
}

/* لا نغيّر Grid الثيم أو الـ wrappers حتى لا يختفي القسم */
.s-block--banners .swiper-slide {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* إلغاء تأثيرات الصندوق فقط */
@media (hover: hover) {
    .s-block--banners .banner-entry:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .s-block--banners .banner-entry:hover img {
        transform: none !important;
    }
}

/* الجوال: نحافظ على نفس بنية الثيم، ونعدل البانر فقط */
@media (max-width: 768px) {
    .s-block--banners .banner-entry {
        width: 100% !important;
        aspect-ratio: 350 / 200 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .s-block--banners .banner-entry > a,
    .s-block--banners .banner-entry picture,
    .s-block--banners .banner-entry img {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — MAIN SLIDER FULL-WIDTH FIX v2.3
   بانر رئيسي واحد بعرض المساحة بدون ظهور الشرائح الجانبية
   ===================================================== */

/* حاوية السلايدر */
.main-slider,
.main-slider .swiper,
.main-slider .swiper-container,
.s-block--slider,
.s-block--slider .swiper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* الغلاف الداخلي */
.main-slider .swiper-wrapper,
.s-block--slider .swiper-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}

/* كل شريحة تأخذ العرض الكامل */
.main-slider .swiper-slide,
.s-block--slider .swiper-slide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 100% !important;
    box-sizing: border-box !important;
}

/* منع ظهور جزء من الشرائح السابقة/التالية */
.main-slider .swiper-slide-prev,
.main-slider .swiper-slide-next,
.s-block--slider .swiper-slide-prev,
.s-block--slider .swiper-slide-next {
    visibility: hidden !important;
}

.main-slider .swiper-slide-active,
.s-block--slider .swiper-slide-active {
    visibility: visible !important;
}

/* الصورة نفسها بعرض الشريحة */
.main-slider .swiper-slide > a,
.main-slider .swiper-slide picture,
.main-slider .swiper-slide img,
.s-block--slider .swiper-slide > a,
.s-block--slider .swiper-slide picture,
.s-block--slider .swiper-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.main-slider .swiper-slide img,
.s-block--slider .swiper-slide img {
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* إزالة أي مساحة جانبية يضيفها الثيم حول السلايدر */
.main-slider :is(.container, .s-container),
.s-block--slider :is(.container, .s-container) {
    width: 100% !important;
    max-width: none !important;
    padding-inline: var(--za-container-pad) !important;
}

/* أسهم السلايدر فوق البانر نفسه */
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev,
.s-block--slider .swiper-button-next,
.s-block--slider .swiper-button-prev {
    z-index: 20 !important;
}

/* الجوال */
@media (max-width: 768px) {
    .main-slider :is(.container, .s-container),
    .s-block--slider :is(.container, .s-container) {
        padding-inline: 10px !important;
    }

    .main-slider .swiper-slide,
    .s-block--slider .swiper-slide {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — CATEGORY OUTER FRAME HIDE FIX v2.4
   إخفاء الإطار/الخلفية الخارجية حول بانرات الأقسام
   والاعتماد بصريًا على الصورة فقط
   ===================================================== */

/* الحاوية الخارجية لكل عنصر تبقى للتخطيط فقط */
.s-block--banners .swiper-slide,
.s-block--banners .grid > *,
.s-block--banners .banners-grid > *,
.s-block--banners [class*="col-"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    overflow: visible !important;
}

/* بطاقة البانر نفسها بدون إطار خارجي */
.s-block--banners .banner-entry {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

/* الرابط وpicture بدون أي شكل إضافي */
.s-block--banners .banner-entry > a,
.s-block--banners .banner-entry picture {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* الصورة هي العنصر المرئي الوحيد */
.s-block--banners .banner-entry img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;
}

/* منع أي تأثير hover على الصندوق الخارجي */
@media (hover: hover) {
    .s-block--banners .swiper-slide:hover,
    .s-block--banners .grid > *:hover,
    .s-block--banners .banners-grid > *:hover,
    .s-block--banners .banner-entry:hover {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — CATEGORY HOVER FORCE FIX v2.5
   تأثير Hover فعلي على بانرات الأقسام بدون إطار
   ===================================================== */

/* نستخدم selector أقوى من جميع قواعد إلغاء الحركة السابقة */
@media (hover: hover) and (pointer: fine) {

    html body .s-block--banners .banner-entry,
    html body .s-block--banners a.banner-entry,
    html body .s-block--banners .banner-entry > a {
        transition:
            transform .32s cubic-bezier(.2,.7,.2,1),
            opacity .32s ease !important;
        will-change: transform !important;
    }

    html body .s-block--banners .banner-entry img,
    html body .s-block--banners a.banner-entry img,
    html body .s-block--banners .banner-entry picture img {
        transition:
            transform .38s cubic-bezier(.2,.7,.2,1),
            filter .38s ease !important;

        transform: scale(1) !important;
        transform-origin: center center !important;
        will-change: transform, filter !important;
    }

    /* إذا كانت banner-entry نفسها هي الرابط */
    html body .s-block--banners a.banner-entry:hover,
    html body .s-block--banners .banner-entry:hover {
        transform: translateY(-4px) !important;
        box-shadow: none !important;
        background: transparent !important;
        border-color: transparent !important;
    }

    /* إذا كان الرابط داخل banner-entry */
    html body .s-block--banners .banner-entry:hover > a {
        transform: translateY(-4px) !important;
    }

    /* التأثير على الصورة نفسها */
    html body .s-block--banners .banner-entry:hover img,
    html body .s-block--banners a.banner-entry:hover img,
    html body .s-block--banners .banner-entry:hover picture img {
        transform: scale(1.035) !important;
        filter: brightness(.98) contrast(1.025) !important;
    }
}

/* =========================================
   ZAWIYAT ATHAR — PRODUCT SECTION HEADER v2.6
   عنوان يمين + مجموعة تحكم موحدة يسار
   ========================================= */

/* رأس قسم المنتجات */
html body .s-block--products-slider .s-slider-block__title,
html body .s-products-slider-wrapper .s-slider-block__title,
html body salla-products-slider .s-slider-block__title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 46px !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    gap: 20px !important;
}

/* العنوان */
html body .s-block--products-slider .s-slider-block__title h2,
html body .s-products-slider-wrapper .s-slider-block__title h2,
html body salla-products-slider .s-slider-block__title h2 {
    flex: 0 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #171717 !important;

    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;

    text-align: right !important;
    white-space: nowrap !important;
}

/* الخط الرفيع أسفل العنوان */
html body .s-block--products-slider .s-slider-block__title h2::after,
html body .s-products-slider-wrapper .s-slider-block__title h2::after,
html body salla-products-slider .s-slider-block__title h2::after {
    content: "" !important;

    display: block !important;

    width: 38px !important;
    height: 1px !important;

    margin: 8px 0 0 auto !important;

    background: #171717 !important;
    border-radius: 0 !important;
}

/* مجموعة عرض الكل + الأسهم */
html body .s-block--products-slider .s-slider-block__title-nav,
html body .s-products-slider-wrapper .s-slider-block__title-nav,
html body salla-products-slider .s-slider-block__title-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    /* تدفع المجموعة للطرف الآخر في RTL */
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;

    gap: 5px !important;

    min-height: 42px !important;

    padding: 4px 5px 4px 12px !important;

    background: #F7F6F2 !important;
    border: 1px solid #ECE9E3 !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    direction: rtl !important;
}

/* عرض الكل — سواء كان داخل nav أو في بنية مختلفة للثيم */
html body .s-block--products-slider .s-slider-block__title-nav a,
html body .s-products-slider-wrapper .s-slider-block__title-nav a,
html body salla-products-slider .s-slider-block__title-nav a,
html body .s-block--products-slider .s-slider-block__title > a,
html body .s-products-slider-wrapper .s-slider-block__title > a,
html body salla-products-slider .s-slider-block__title > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: max-content !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    color: #171717 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    opacity: 1 !important;
}

/* الأسهم */
html body .s-block--products-slider .s-slider-block__title-nav-right,
html body .s-block--products-slider .s-slider-block__title-nav-left,
html body .s-products-slider-wrapper .s-slider-block__title-nav-right,
html body .s-products-slider-wrapper .s-slider-block__title-nav-left,
html body salla-products-slider .s-slider-block__title-nav-right,
html body salla-products-slider .s-slider-block__title-nav-left {
    position: static !important;
    inset: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #171717 !important;
    background: #FFFFFF !important;

    border: 1px solid #DEDCD6 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
    html body .s-block--products-slider .s-slider-block__title-nav a:hover,
    html body .s-products-slider-wrapper .s-slider-block__title-nav a:hover,
    html body salla-products-slider .s-slider-block__title-nav a:hover {
        text-decoration: underline !important;
        text-underline-offset: 4px !important;
    }

    html body .s-block--products-slider .s-slider-block__title-nav-right:hover,
    html body .s-block--products-slider .s-slider-block__title-nav-left:hover,
    html body .s-products-slider-wrapper .s-slider-block__title-nav-right:hover,
    html body .s-products-slider-wrapper .s-slider-block__title-nav-left:hover,
    html body salla-products-slider .s-slider-block__title-nav-right:hover,
    html body salla-products-slider .s-slider-block__title-nav-left:hover {
        color: #F7F6F2 !important;
        background: #171717 !important;
        border-color: #171717 !important;
    }
}

/* الجوال */
@media (max-width: 768px) {
    html body .s-block--products-slider .s-slider-block__title,
    html body .s-products-slider-wrapper .s-slider-block__title,
    html body salla-products-slider .s-slider-block__title {
        min-height: 38px !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    html body .s-block--products-slider .s-slider-block__title h2,
    html body .s-products-slider-wrapper .s-slider-block__title h2,
    html body salla-products-slider .s-slider-block__title h2 {
        font-size: 20px !important;
        white-space: normal !important;
    }

    html body .s-block--products-slider .s-slider-block__title-nav,
    html body .s-products-slider-wrapper .s-slider-block__title-nav,
    html body salla-products-slider .s-slider-block__title-nav {
        min-height: 36px !important;
        padding: 2px 3px 2px 7px !important;
        gap: 3px !important;
    }

    html body .s-block--products-slider .s-slider-block__title-nav a,
    html body .s-products-slider-wrapper .s-slider-block__title-nav a,
    html body salla-products-slider .s-slider-block__title-nav a {
        min-height: 28px !important;
        padding-inline: 7px !important;
        font-size: 10px !important;
    }

    html body .s-block--products-slider .s-slider-block__title-nav-right,
    html body .s-block--products-slider .s-slider-block__title-nav-left,
    html body .s-products-slider-wrapper .s-slider-block__title-nav-right,
    html body .s-products-slider-wrapper .s-slider-block__title-nav-left,
    html body salla-products-slider .s-slider-block__title-nav-right,
    html body salla-products-slider .s-slider-block__title-nav-left {
        flex-basis: 28px !important;

        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;

        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — PRODUCT SLIDER WIDTH FIX v2.7
   إصلاح انحصار سلايدر المنتجات في الجهة اليمنى
   ===================================================== */

/* إجبار قسم المنتجات ومكوّن سلة نفسه على استخدام كامل العرض */
html body .s-block--products-slider,
html body .s-products-slider-wrapper,
html body salla-products-slider {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* الحاويات الداخلية */
html body .s-block--products-slider > .container,
html body .s-block--products-slider > .s-container,
html body .s-products-slider-wrapper > .container,
html body .s-products-slider-wrapper > .s-container,
html body salla-products-slider > .container,
html body salla-products-slider > .s-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Swiper يأخذ العرض الكامل */
html body .s-block--products-slider .swiper,
html body .s-products-slider-wrapper .swiper,
html body salla-products-slider .swiper,
html body .s-block--products-slider .swiper-container,
html body .s-products-slider-wrapper .swiper-container,
html body salla-products-slider .swiper-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-inline: 0 !important;
}

/* المسار */
html body .s-block--products-slider .swiper-wrapper,
html body .s-products-slider-wrapper .swiper-wrapper,
html body salla-products-slider .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* الشاشة الكبيرة: 5 منتجات */
@media (min-width: 1500px) {
    html body .s-block--products-slider .swiper-slide,
    html body .s-products-slider-wrapper .swiper-slide,
    html body salla-products-slider .swiper-slide {
        width: calc((100% - 64px) / 5) !important;
        min-width: calc((100% - 64px) / 5) !important;
        max-width: calc((100% - 64px) / 5) !important;
        flex: 0 0 calc((100% - 64px) / 5) !important;
        margin-inline-end: 16px !important;
        box-sizing: border-box !important;
    }
}

/* اللابتوب: 4 منتجات */
@media (min-width: 1100px) and (max-width: 1499px) {
    html body .s-block--products-slider .swiper-slide,
    html body .s-products-slider-wrapper .swiper-slide,
    html body salla-products-slider .swiper-slide {
        width: calc((100% - 48px) / 4) !important;
        min-width: calc((100% - 48px) / 4) !important;
        max-width: calc((100% - 48px) / 4) !important;
        flex: 0 0 calc((100% - 48px) / 4) !important;
        margin-inline-end: 16px !important;
        box-sizing: border-box !important;
    }
}

/* التابلت: 3 منتجات */
@media (min-width: 769px) and (max-width: 1099px) {
    html body .s-block--products-slider .swiper-slide,
    html body .s-products-slider-wrapper .swiper-slide,
    html body salla-products-slider .swiper-slide {
        width: calc((100% - 28px) / 3) !important;
        min-width: calc((100% - 28px) / 3) !important;
        max-width: calc((100% - 28px) / 3) !important;
        flex: 0 0 calc((100% - 28px) / 3) !important;
        margin-inline-end: 14px !important;
        box-sizing: border-box !important;
    }
}

/* الجوال: منتجان */
@media (max-width: 768px) {
    html body .s-block--products-slider .swiper-slide,
    html body .s-products-slider-wrapper .swiper-slide,
    html body salla-products-slider .swiper-slide {
        width: calc((100% - 10px) / 2) !important;
        min-width: calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
        flex: 0 0 calc((100% - 10px) / 2) !important;
        margin-inline-end: 10px !important;
        box-sizing: border-box !important;
    }
}

/* آخر بطاقة لا تحتاج هامشاً إضافياً مرئياً */
html body .s-block--products-slider .swiper-slide:last-child,
html body .s-products-slider-wrapper .swiper-slide:last-child,
html body salla-products-slider .swiper-slide:last-child {
    margin-inline-end: 0 !important;
}

/* البطاقة تملأ الشريحة بالكامل */
html body .s-block--products-slider .swiper-slide :is(custom-salla-product-card, salla-product-card),
html body .s-products-slider-wrapper .swiper-slide :is(custom-salla-product-card, salla-product-card),
html body salla-products-slider .swiper-slide :is(custom-salla-product-card, salla-product-card),
html body .s-block--products-slider .swiper-slide .s-product-card-entry,
html body .s-products-slider-wrapper .swiper-slide .s-product-card-entry,
html body salla-products-slider .swiper-slide .s-product-card-entry {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* ضمان أن رأس القسم يمتد أيضاً من اليمين إلى اليسار بالكامل */
html body .s-block--products-slider .s-slider-block__title,
html body .s-products-slider-wrapper .s-slider-block__title,
html body salla-products-slider .s-slider-block__title {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* =====================================================
   ZAWIYAT ATHAR — MOBILE MENU ICON FIX v2.8
   إظهار خطوط زر القائمة الجانبية على الجوال
   ===================================================== */

@media (max-width: 768px) {

    /* زر القائمة موجود بالفعل؛ نرسم الهامبرغر عليه مباشرة
       حتى لا نعتمد على خط الأيقونات في الثيم */
    html body .store-header :is(button, a):has([class*="sicon-menu"]),
    html body .main-header :is(button, a):has([class*="sicon-menu"]),
    html body .main-nav-container :is(button, a):has([class*="sicon-menu"]),
    html body .store-header .burger-menu,
    html body .store-header .menu-trigger,
    html body .store-header .menu-btn,
    html body .store-header .nav-trigger,
    html body .main-header .burger-menu,
    html body .main-header .menu-trigger,
    html body .main-header .menu-btn,
    html body .main-header .nav-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;

        flex: 0 0 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        inset: auto !important;

        color: #171717 !important;

        border: 0 !important;
        border-radius: 50% !important;
        box-shadow: none !important;

        /* ثلاث خطوط واضحة للهامبرغر */
        background-color: transparent !important;
        background-image:
            linear-gradient(#171717, #171717),
            linear-gradient(#171717, #171717),
            linear-gradient(#171717, #171717) !important;
        background-repeat: no-repeat !important;
        background-size:
            22px 2px,
            22px 2px,
            22px 2px !important;
        background-position:
            center calc(50% - 7px),
            center center,
            center calc(50% + 7px) !important;

        z-index: 30 !important;
    }

    /* إخفاء الغليف القديم داخل الزر حتى لا يتكرر فوق الخطوط الجديدة */
    html body .store-header :is(button, a):has([class*="sicon-menu"]) [class*="sicon-menu"],
    html body .main-header :is(button, a):has([class*="sicon-menu"]) [class*="sicon-menu"],
    html body .main-nav-container :is(button, a):has([class*="sicon-menu"]) [class*="sicon-menu"] {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* احتياط إذا كان الثيم يستخدم أيقونة خارج زر :has */
    html body .store-header [class*="sicon-menu"],
    html body .main-header [class*="sicon-menu"],
    html body .main-nav-container [class*="sicon-menu"] {
        color: #171717 !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — TRUST BADGE CLEAN FIX v2.9
   إخفاء وثيقة العمل الحر نهائياً وإظهار السجل التجاري فقط
   ===================================================== */

/* إخفاء النص الأصلي داخل حقول الشارة، بما في ذلك العناصر المتداخلة */
html body .s-trust-badges-label,
html body .s-trust-badges-label *,
html body .s-trust-badges-number,
html body .s-trust-badges-number * {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* منع أي محتوى قديم من ::before */
html body .s-trust-badges-label::before,
html body .s-trust-badges-number::before {
    content: none !important;
    display: none !important;
}

/* اسم السجل التجاري فقط */
html body .s-trust-badges-label::after {
    content: "السجل التجاري" !important;
    display: inline-block !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;

    color: #D4D4D4 !important;
    white-space: nowrap !important;
}

/* رقم السجل فقط */
html body .s-trust-badges-number::after {
    content: "7055036557" !important;
    display: inline-block !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;

    color: #FFFFFF !important;
    white-space: nowrap !important;
}

/* احتياط: إخفاء أي نص مباشر إضافي مرتبط بوثيقة العمل الحر داخل الشارة */
html body .s-trust-badges-wrapper [class*="freelance"],
html body .s-trust-badges-wrapper [class*="self"],
html body .s-trust-badges-wrapper [class*="work-doc"],
html body .s-trust-badges-wrapper [class*="document"] {
    display: none !important;
}

/* تطبيق موحد للجوال والكمبيوتر */
@media (max-width: 768px) {
    html body .s-trust-badges-label,
    html body .s-trust-badges-label *,
    html body .s-trust-badges-number,
    html body .s-trust-badges-number * {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }

    html body .s-trust-badges-label::after {
        content: "السجل التجاري" !important;
        display: inline-block !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #D4D4D4 !important;
    }

    html body .s-trust-badges-number::after {
        content: "7055036557" !important;
        display: inline-block !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — WISHLIST SINGLE BUTTON FIX v3.0
   إزالة الدائرة المزدوجة لزر المفضلة في بطاقة المنتج
   ===================================================== */

/* موضع زر المفضلة */
html body .s-product-card-vertical .s-product-card-wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
    z-index: 20 !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-shadow: none !important;
}

/* إذا كان العنصر salla-button:
   نجعل الـ host شفافاً حتى لا يرسم دائرة ثانية */
html body salla-button.s-product-card-wishlist-btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* الدائرة الوحيدة تكون داخل زر سلة الفعلي */
html body salla-button.s-product-card-wishlist-btn::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgb(255 255 255 / 96%) !important;
    color: #171717 !important;

    border: 1px solid #DEDCD6 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* بعض إصدارات الثيم تستخدم زر داخلي عادي بدل ::part */
html body .s-product-card-vertical
.s-product-card-wishlist-btn .s-button-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgb(255 255 255 / 96%) !important;
    color: #171717 !important;

    border: 1px solid #DEDCD6 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* إذا كان العنصر نفسه button عادي */
html body button.s-product-card-wishlist-btn,
html body a.s-product-card-wishlist-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgb(255 255 255 / 96%) !important;
    color: #171717 !important;

    border: 1px solid #DEDCD6 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* منع أي pseudo-element من رسم دائرة إضافية */
html body .s-product-card-vertical .s-product-card-wishlist-btn::before,
html body .s-product-card-vertical .s-product-card-wishlist-btn::after {
    box-shadow: none !important;
}

/* الجوال */
@media (max-width: 768px) {
    html body .s-product-card-vertical .s-product-card-wishlist-btn {
        top: 8px !important;
        inset-inline-start: 8px !important;

        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    html body salla-button.s-product-card-wishlist-btn::part(button),
    html body .s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn,
    html body button.s-product-card-wishlist-btn,
    html body a.s-product-card-wishlist-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — FAST CHECKOUT SAFE CONFIG v3.2
   تخصيص زر الشراء السريع ضمن الحدود التي تسمح بها سلة
   ===================================================== */

/*
   زر "اشتر الآن" في ثيم رائد يأتي من Fast Checkout داخل
   salla-add-product-button[quick-buy].
   سلة تسمح بتخصيص المقاس والزوايا فقط لهذا المكوّن.
*/
html body salla-mini-checkout-widget {
    --salla-fast-checkout-button-height: 44px;
    --salla-fast-checkout-button-width: 100%;
    --salla-fast-checkout-button-border-radius: 6px;
}

/* نحافظ على عرض مكوّن الإضافة والشراء السريع كاملاً */
html body form[data-testid="store-product-form"]
salla-add-product-button[data-testid="store-product-add-to-cart"][quick-buy] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    html body salla-mini-checkout-widget {
        --salla-fast-checkout-button-height: 42px;
        --salla-fast-checkout-button-width: 100%;
        --salla-fast-checkout-button-border-radius: 6px;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — FAST CHECKOUT HOST FIX v3.3
   الزر الداخلي .s-fast-checkout-button موجود داخل Web Component
   لذلك نتحكم فقط في الـ host والمتغيرات المدعومة من سلة.
   ===================================================== */

html body salla-add-product-button[quick-buy],
html body salla-mini-checkout-widget {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 1 !important;
}

html body salla-mini-checkout-widget {
    --salla-fast-checkout-button-height: 44px;
    --salla-fast-checkout-button-width: 100%;
    --salla-fast-checkout-button-border-radius: 6px;
}

/* لا نضع color/background على الزر الداخلي لأن سلة لا تسمح بتخصيصه */
@media (max-width: 768px) {
    html body salla-mini-checkout-widget {
        --salla-fast-checkout-button-height: 42px;
        --salla-fast-checkout-button-width: 100%;
        --salla-fast-checkout-button-border-radius: 6px;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — FAST CHECKOUT CONTRAST FIX v3.4
   جعل زر اشتر الآن ظاهرًا عبر خلفية الـ host
   لأن الزر الداخلي outline وداخل Shadow DOM
   ===================================================== */

/* خلفية داكنة خلف زر Fast Checkout الشفاف */
html body salla-mini-checkout-widget {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    background: #171717 !important;
    border-radius: 6px !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;

    --salla-fast-checkout-button-height: 44px;
    --salla-fast-checkout-button-width: 100%;
    --salla-fast-checkout-button-border-radius: 6px;
}

/* إذا كان الـ widget داخل quick-buy نضمن أن الخلفية تصل لكامل المساحة */
html body salla-add-product-button[quick-buy] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body salla-add-product-button[quick-buy] salla-mini-checkout-widget {
    background: #171717 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* إزالة أي خلفية فاتحة مفروضة على حاوية الشراء السريع */
html body :is(
    .product-single,
    .product-details,
    .product-main
) salla-mini-checkout-widget {
    background-color: #171717 !important;
}

/* الجوال */
@media (max-width: 768px) {
    html body salla-mini-checkout-widget {
        --salla-fast-checkout-button-height: 42px;
        --salla-fast-checkout-button-width: 100%;
        --salla-fast-checkout-button-border-radius: 6px;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — WISHLIST BUTTON CLEAN FIX v3.5
   زر مفضلة واحد، واضح، بدون دائرة ثانية أو تداخل
   ===================================================== */

/* موضع ومساحة الزر */
html body .s-product-card-vertical .s-product-card-wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
    z-index: 30 !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-shadow: none !important;
}

/* إذا كان العنصر Wrapper أو salla-button: لا نرسم دائرة على الـ host */
html body salla-button.s-product-card-wishlist-btn,
html body .s-product-card-vertical div.s-product-card-wishlist-btn,
html body .s-product-card-vertical span.s-product-card-wishlist-btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* الدائرة الوحيدة: الزر الداخلي */
html body salla-button.s-product-card-wishlist-btn::part(button),
html body .s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn,
html body .s-product-card-vertical .s-product-card-wishlist-btn > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255,255,255,.96) !important;
    color: #171717 !important;

    border: 1px solid #DEDCD6 !important;
    border-radius: 50% !important;

    box-shadow: 0 2px 10px rgba(23,23,23,.08) !important;
}

/* إذا كان العنصر نفسه button أو a */
html body button.s-product-card-wishlist-btn,
html body a.s-product-card-wishlist-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,.96) !important;
    color: #171717 !important;

    border: 1px solid #DEDCD6 !important;
    border-radius: 50% !important;

    box-shadow: 0 2px 10px rgba(23,23,23,.08) !important;
}

/* حجم القلب ومحاذاته */
html body .s-product-card-vertical .s-product-card-wishlist-btn svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;

    display: block !important;
    margin: 0 !important;

    color: currentColor !important;
}

/* منع أي دوائر إضافية من pseudo elements */
html body .s-product-card-vertical .s-product-card-wishlist-btn::before,
html body .s-product-card-vertical .s-product-card-wishlist-btn::after,
html body .s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn::before,
html body .s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn::after {
    content: none !important;
    display: none !important;
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
    html body salla-button.s-product-card-wishlist-btn::part(button):hover,
    html body .s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn:hover,
    html body .s-product-card-vertical .s-product-card-wishlist-btn > button:hover,
    html body button.s-product-card-wishlist-btn:hover,
    html body a.s-product-card-wishlist-btn:hover {
        background: #171717 !important;
        color: #F7F6F2 !important;
        border-color: #171717 !important;
    }
}

/* الجوال */
@media (max-width: 768px) {
    html body .s-product-card-vertical .s-product-card-wishlist-btn {
        top: 8px !important;
        inset-inline-start: 8px !important;

        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    html body salla-button.s-product-card-wishlist-btn::part(button),
    html body .s-product-card-vertical .s-product-card-wishlist-btn .s-button-btn,
    html body .s-product-card-vertical .s-product-card-wishlist-btn > button,
    html body button.s-product-card-wishlist-btn,
    html body a.s-product-card-wishlist-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    html body .s-product-card-vertical .s-product-card-wishlist-btn svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }
}

/* =====================================================
   ZAWIYAT ATHAR — HIDE WISHLIST BUTTON v3.6
   إخفاء زر المفضلة من بطاقات المنتجات
   ===================================================== */

html body .s-product-card-wishlist-btn,
html body salla-button.s-product-card-wishlist-btn,
html body button.s-product-card-wishlist-btn,
html body a.s-product-card-wishlist-btn,
html body .s-product-card-entry [class*="wishlist"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}