:root {
  --main-color: #133e84;
  --second-color: #04a2d1;
  --third-color: #fff;
  --fourth-color: #f7f7f7;
  --body: #f7f7f7;
  --logo: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/lGEeNa/E7Ge7RzhZlG0jlcnQmPHFuSCeXDbUGm7VcEi2Vi7.png");
  --wave: url("https://iili.io/FT5BZqN.png");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  color: var(--third-color);
  background: var(--second-color);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--body);
}

::-webkit-scrollbar-thumb {
  background: var(--main-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--second-color);
}

body,
.flex-col {
  background: var(--body);
}

/* Reserve the ticker space before JavaScript creates it. */
body {
  position: relative;
  padding-top: 44px;
}

.container {
  max-width: 1500px;
}

.s-block {
  margin-top: 2rem;
}

/* Header */
.top-navbar,
.main-nav-container,
header.store-header,
.bg-inherit {
  background: var(--fourth-color);
}

.top-navbar {
  min-height: 48px;
}

.main-nav-container {
  min-height: 70px;
  box-shadow: none;
}

.main-nav-container.fixed-header .inner {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 5px var(--main-color);
}

.header-btn__icon.icon,
.sicon-user-circle,
.sicon-menu,
.s-contacts-topnav-link,
.topnav-link-item {
  color: var(--main-color) !important;
}

.header-btn__icon.icon:hover,
.sicon-user-circle:hover,
.sicon-menu:hover,
.s-contacts-topnav-link:hover,
.topnav-link-item:hover {
  color: var(--second-color) !important;
}

.top-navbar .s-search-input {
  border: 0;
  background: var(--third-color);
  box-shadow: 1px 1px 5px var(--main-color);
}

.s-cart-summary-count {
  background: var(--second-color);
}

@media (min-width: 1024px) {
  .main-nav-container {
    min-height: 100px;
  }

  .main-menu li.root-level > a {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    color: var(--main-color);
    transition: color 0.25s ease, background-color 0.25s ease;
  }

  .main-menu li.root-level > a:hover {
    color: var(--third-color);
    background: var(--second-color);
    border-radius: 4px;
  }
}

/* Mobile menu */
.mm-ocd__content {
  background: rgba(210, 221, 235, 0.92);
}

.mm-spn.mm-spn--light {
  color: var(--third-color);
  background: linear-gradient(var(--second-color), var(--main-color));
}

[dir="rtl"] .mm-spn.mm-spn--navbar.mm-spn--main::after {
  content: "";
  display: block;
  width: auto;
  height: 90px;
  margin: 30px 50px 11px;
  background: var(--third-color) var(--logo) top center / contain no-repeat;
  border-radius: 90px;
}

/* Images: always visible and never zero-sized */
img,
picture,
picture img {
  max-width: 100%;
}

html body .s-product-card-image,
html body .s-product-card-image img,
html body .banner--fixed img,
html body salla-slider.photos-slider,
html body salla-slider.photos-slider img,
html body .lazy__bg {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.s-product-card-image {
  position: relative;
  width: 100%;
  min-height: 1px;
  overflow: hidden;
  background: transparent;
}

.s-product-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.banner--fixed img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0.375rem;
  object-fit: cover;
}

.banner--fixed {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.banner--fixed img {
  height: 100% !important;
}

.lazy__bg {
  min-height: 1px;
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat !important;
}

.s-block--photos-slider {
  margin-top: 0 !important;
}

salla-slider.photos-slider .swiper-slide {
  position: relative;
  height: auto !important;
  overflow: hidden;
}

salla-slider.photos-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

#photos-0-slider .swiper {
  aspect-ratio: 1108 / 428;
  overflow: hidden;
}

#photos-0-slider .swiper-wrapper,
#photos-0-slider .swiper-slide,
#photos-0-slider .swiper-slide a,
#photos-0-slider .swiper-slide img {
  height: 100% !important;
}

#photos-0-slider .swiper-slide img {
  object-fit: cover !important;
}

#photos-4-slider .swiper {
  aspect-ratio: 1281 / 622;
  overflow: hidden;
}

#photos-4-slider .swiper-wrapper,
#photos-4-slider .swiper-slide,
#photos-4-slider .swiper-slide a,
#photos-4-slider .swiper-slide img {
  height: 100% !important;
}

#photos-4-slider .swiper-slide img {
  object-fit: cover !important;
}

/* Product cards */
.s-product-card-vertical {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

.s-product-card-vertical .s-product-card-image {
  aspect-ratio: 1 / 1;
  height: auto !important;
}

.s-product-card-content {
  padding: 0.5rem !important;
  background: transparent !important;
}

.s-product-card-content-title a {
  display: -webkit-box;
  height: auto;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--main-color) !important;
  font-weight: 600;
  line-height: 1.5;
}

.s-product-card-content-title a:hover {
  color: var(--second-color) !important;
}

.s-product-card-content-sub {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.s-product-card-price {
  color: var(--main-color) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.s-button-btn {
  color: var(--third-color);
  background: linear-gradient(135deg, var(--second-color), var(--main-color));
}

.s-button-outline {
  border-color: transparent !important;
}

/* Titles and links */
.s-slider-block__title h2,
.s-block__title h2,
.s-slider-block__display-all,
a.s-block__display-all {
  color: var(--main-color);
}

.s-slider-block__display-all:hover,
a.s-block__display-all:hover {
  color: var(--second-color);
}

/* Announcement ticker */
.banner-swap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
  padding: 10px 0;
  color: var(--third-color);
  background: linear-gradient(45deg, var(--second-color), var(--main-color));
}

.bannt {
  display: flex;
  width: max-content;
  animation: storeTicker 28s linear infinite;
}

.bannt:hover {
  animation-play-state: paused;
}

.banrerr {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0 42px;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
}

@keyframes storeTicker {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* Scrolling offers */
.scrolling-text {
  display: flex;
  width: 100%;
  height: 32px;
  overflow: hidden;
  align-items: center;
  color: var(--main-color);
  background: rgba(255, 255, 255, 0.88);
}

.scrolling-text .text-container {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: offersTicker 40s linear infinite;
}

.scrolling-text span {
  white-space: nowrap;
}

@keyframes offersTicker {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* Footer waves */
.store-footer {
  position: relative;
  margin-top: 115px;
  background: linear-gradient(to top, var(--main-color), var(--second-color)) !important;
}

.waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: var(--wave) repeat-x;
  background-size: 1000px 100px;
}

#wave1 { opacity: 1; animation: waveRight 8s linear infinite; }
#wave2 { opacity: 0.5; animation: waveLeft 9s linear infinite; }
#wave3 { opacity: 0.2; animation: waveRight 11s linear infinite; }
#wave4 { opacity: 0.7; animation: waveLeft 12s linear infinite; }

@keyframes waveRight {
  from { background-position-x: 1000px; }
  to { background-position-x: 0; }
}

@keyframes waveLeft {
  from { background-position-x: 0; }
  to { background-position-x: 1000px; }
}

/* FAQ */
#faq-section {
  width: min(90%, 800px);
  margin: 2rem auto;
  padding: 2rem;
}

#faq-section h2 {
  margin-bottom: 1.5rem;
  color: var(--main-color);
  text-align: center;
}

.faq-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #ddd;
}

.faq-question {
  width: 100%;
  border: 0;
  color: var(--main-color);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
}

.faq-answer[hidden] {
  display: none;
}

.faq-answer {
  margin: 0.75rem 0 0;
  color: #334155;
}

/* Back to top */
#backToTop {
  position: fixed;
  right: 20px;
  bottom: 95px;
  z-index: 1000;
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: var(--third-color);
  background: var(--main-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

#backToTop.is-visible {
  display: grid;
  place-items: center;
}

/* WhatsApp: inserted only after window load */
.custom-whatsapp-container {
  position: fixed;
  bottom: 25px;
  left: 20px;
  z-index: 9999;
  font-family: inherit;
}

.whatsapp-float-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: 50px;
  color: #fff;
  background: #25d366;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float-link:hover {
  color: #fff;
  background: #20ba5a;
  transform: translateY(-2px);
}

.whatsapp-icon-box {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.whatsapp-text {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .custom-whatsapp-container {
    bottom: 18px;
    left: 12px;
  }

  .whatsapp-text {
    display: none;
  }

  .whatsapp-float-link {
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}/* إصلاح CLS: ألصق هذا المقطع في نهاية CSS الحالي. */

/* حجز مساحة شريط الإعلانات قبل إنشائه بواسطة JavaScript. */
body {
  position: relative !important;
  padding-top: 44px !important;
}

html body .banner-swap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  min-height: 44px !important;
}

/* تثبيت مساحة السلايدر الرئيسي قبل تحميل الصور. */
html body #photos-0-slider .swiper {
  aspect-ratio: 1108 / 428 !important;
  overflow: hidden !important;
}

html body #photos-0-slider .swiper-wrapper,
html body #photos-0-slider .swiper-slide,
html body #photos-0-slider .swiper-slide a,
html body #photos-0-slider .swiper-slide img {
  height: 100% !important;
  min-height: 1px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body #photos-0-slider .swiper-slide img {
  width: 100% !important;
  object-fit: cover !important;
}

/* تثبيت مساحة السلايدر الثاني حسب نسبة صورته الحالية. */
html body #photos-4-slider .swiper {
  aspect-ratio: 1281 / 622 !important;
  overflow: hidden !important;
}

html body #photos-4-slider .swiper-wrapper,
html body #photos-4-slider .swiper-slide,
html body #photos-4-slider .swiper-slide a,
html body #photos-4-slider .swiper-slide img {
  height: 100% !important;
  min-height: 1px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body #photos-4-slider .swiper-slide img {
  width: 100% !important;
  object-fit: cover !important;
}

/* حجز مساحة البانرات وبطاقات المنتجات. */
html body .banner--fixed {
  aspect-ratio: 2 / 1 !important;
  overflow: hidden !important;
}

html body .banner--fixed img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  object-fit: cover !important;
}

html body .s-product-card-vertical .s-product-card-image {
  width: 100% !important;
  height: auto !important;
  min-height: 1px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

html body .s-product-card-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  object-fit: contain !important;
}/*
 * إصلاح ظهور صور السلايدر فوق بعضها قبل اكتمال تحميل مكوّن سلة.
 * ألصق هذا المقطع في نهاية CSS الحالي.
 */

/* حجز مساحة السلايدر الرئيسي من أول لحظة. */
html body #photos-0-slider {
  display: block !important;
  overflow: hidden !important;
}

html body #photos-0-slider .swiper {
  aspect-ratio: 1108 / 428 !important;
  overflow: hidden !important;
}

/* قبل التهيئة: إخفاء كل الشرائح عدا الأولى. */
html body salla-slider.photos-slider:not(.hydrated) .swiper-slide {
  display: none !important;
}

html body salla-slider.photos-slider:not(.hydrated) .swiper-slide:first-child {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html body salla-slider.photos-slider:not(.hydrated) .swiper-slide:first-child a,
html body salla-slider.photos-slider:not(.hydrated) .swiper-slide:first-child img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html body salla-slider.photos-slider:not(.hydrated) .swiper-slide:first-child img {
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
}

/* بعد التهيئة لا نفرض transform أو display على الشرائح؛ سلة تدير الحركة. */
html body salla-slider.photos-slider.hydrated {
  opacity: 1 !important;
  visibility: visible !important;
}