/* Add custom CSS styles below */ 
body{
background-color: #F6F0E9;
}


.banner--fixed img {
    display: block;
    width: 100%;
    border-radius: 0;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: #f3f4f6;
    background-color: #0000;
    -o-object-fit: cover;
    object-fit: cover;
}

.bg-inherit {
    background-color: #E6DED2;
}



.footer-is-light .store-footer .store-footer__inner {
    background-color: #E6DED2;
    color:#000;
    }


.top-navbar {
background-color: #E6DED2;
}


.top-navbar .s-search-input {
    background-color: rgb(255 255 255 / 50%);
    border-style: none;
}

.s-localization-modal-trigger-btn {
    background-color: rgb(255 255 255 / 50%);
}




section.s-block.s-block--fixed-banner .container{
  max-width:100% !important;
  padding:0  !important;
  margin:0 !important;
}
.banner--fixed img {
  border-radius: 0 !important;
  background-color: unset !important;
}
.s-block:first-of-type {
    margin-top: 0 !important;
}



.store-footer__inner {
    margin: 35px;
    background: beige;
    border-radius: 37px;
}

.footer-is-light .store-footer {
    --tw-bg-opacity: 1;
    background-color: #f9fafb;
    background-color: rgb(245 239 232);
    --tw-text-opacity: 1;
    color: #374151;
    color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}




    .banner-entry {
        padding: 1rem;
        background: #ffffff00;
    }


















/* ===============================
   Milkow Categories Banners
   Desktop: 4 Equal Squares
   Mobile: Manual Slider - 2.5 Items
================================ */

/* سكشن الأقسام */
section.s-block.s-block--banners.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Desktop Grid */
section.s-block.s-block--banners.container > .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* كل كارت */
section.s-block.s-block--banners.container .banner-entry.square-photos {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* الصورة جوه الكارت */
section.s-block.s-block--banners.container .banner-entry.square-photos img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}


/* ===============================
   Mobile Slider
   يظهر 2 ونص
================================ */

@media (max-width: 768px) {
  section.s-block.s-block--banners.container {
    padding-left: 12px !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  section.s-block.s-block--banners.container > .grid {
    display: flex !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    padding-right: 70px !important;
    padding-bottom: 8px !important;

    cursor: grab !important;
  }

  section.s-block.s-block--banners.container > .grid:active {
    cursor: grabbing !important;
  }

  /* إخفاء شريط السكرول */
  section.s-block.s-block--banners.container > .grid::-webkit-scrollbar {
    display: none !important;
  }

  section.s-block.s-block--banners.container > .grid {
    scrollbar-width: none !important;
  }

  /* حجم كل عنصر على الموبايل: 2 ونص تقريبًا */
  section.s-block.s-block--banners.container .banner-entry.square-photos {
    flex: 0 0 42% !important;
    width: 42% !important;
    min-width: 42% !important;
    max-width: 42% !important;

    aspect-ratio: 1 / 1 !important;
    scroll-snap-align: start !important;
  }

  section.s-block.s-block--banners.container .banner-entry.square-photos img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}








/* ===============================
   Milkow Product Cards Style
   مثل الصورة الثانية
================================ */

/* كارد المنتج */
.s-product-card-entry,
.product-entry,
.salla-product-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px !important;
}

/* إلغاء شكل الكارد القديم */
.s-product-card-entry * {
  box-shadow: none !important;
}

/* صورة المنتج */
.s-product-card-image,
.s-product-card-image img,
.product-entry__image img,
.s-product-card-entry img {
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* حاوية الصورة */
.s-product-card-image {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background: #f5efe7 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* الصورة نفسها */
.s-product-card-image img,
.s-product-card-entry img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* محتوى الكارد */
.s-product-card-content {
  padding: 18px 8px 8px !important;
  text-align: center !important;
  align-items: center !important;
}

/* اسم المنتج */
.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-entry h3,
.s-product-card-entry h3 a {
  color: #111111 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 auto 12px !important;
  display: block !important;
}

/* إخفاء الوصف */
.s-product-card-content-subtitle,
.s-product-card-content p:not(.s-product-card-price),
.s-product-card-entry .text-sm,
.s-product-card-entry .opacity-80 {
  display: none !important;
}

/* السعر */
.s-product-card-price,
.s-product-card-sale-price,
.s-product-card-content .s-product-card-price {
  color: #ff0000 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-align: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
}

/* لو السعر داخل div */
.s-product-card-price-wrapper,
.s-product-card-content .flex {
  justify-content: center !important;
  text-align: center !important;
}

/* زر إضافة للسلة */
.s-product-card-add-button,
.s-product-card-entry button,
.s-button-btn {
  background: #f1ece5 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 16px !important;
  height: 48px !important;
  min-height: 48px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* لون أيقونة السلة */
.s-product-card-add-button svg,
.s-product-card-entry button svg,
.s-button-btn svg {
  color: #000000 !important;
  fill: none !important;
}

/* Hover للزر */
.s-product-card-add-button:hover,
.s-product-card-entry button:hover,
.s-button-btn:hover {
  background: #e8dfd4 !important;
  color: #000000 !important;
}

/* إخفاء القلب والبادجات الحمراء والتقييم */
.s-product-card-wishlist-btn,
.s-product-card-promotion-title,
.s-product-card-rating,
.s-product-card-entry .s-product-card-wishlist-btn,
.s-product-card-entry .s-product-card-promotion-title,
.s-product-card-entry .s-rating-stars,
.s-product-card-entry .s-product-card-rating,
.s-product-card-entry .s-product-card-badge,
.s-product-card-entry .badge {
  display: none !important;
}

/* إخفاء السعر القديم أو أي تفاصيل زيادة */
.s-product-card-regular-price,
.s-product-card-entry del {
  display: none !important;
}

/* المنتجات المنتهية */
.s-product-card-entry button[disabled],
.s-product-card-add-button[disabled] {
  background: #f1ece5 !important;
  color: #9b9b9b !important;
  opacity: 1 !important;
}

/* المسافات بين الكاردات */
.s-products-list-wrapper,
.s-slider-swiper-wrapper {
  gap: 22px !important;
}

/* موبايل */
@media (max-width: 768px) {
  .s-product-card-entry,
  .product-entry,
  .salla-product-card {
    border-radius: 22px !important;
    padding: 10px !important;
  }

  .s-product-card-image {
    border-radius: 16px !important;
  }

  .s-product-card-content-title,
  .s-product-card-content-title a,
  .s-product-card-entry h3,
  .s-product-card-entry h3 a {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .s-product-card-price,
  .s-product-card-sale-price {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }

  .s-product-card-add-button,
  .s-product-card-entry button,
  .s-button-btn {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
  }
}


















/* ===== Milkow: CSS-only Loading Screen ===== */
:root {
  --loading-bg: #E6DED2;
  --loading-time: 2800ms;
  --logo: url("https://i.ibb.co/67j9LSnY/download-2026-05-10-T042029-474-1.png");
}

/* خلفية شاشة التحميل */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--loading-bg);
  z-index: 2147483647;
  opacity: 1;
  pointer-events: auto;
  animation: milkowOverlayHide var(--loading-time) ease forwards;
}

/* الشعار في المنتصف */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%) scale(1);
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2147483648;
  animation:
    milkowLogoPulse 950ms ease-in-out infinite alternate,
    milkowLogoHide var(--loading-time) ease forwards;
}

/* إخفاء الخلفية */
@keyframes milkowOverlayHide {
  0%, 82% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* إخفاء الشعار */
@keyframes milkowLogoHide {
  0%, 82% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* حركة بسيطة للشعار */
@keyframes milkowLogoPulse {
  from {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12));
  }

  to {
    transform: translate(-50%, -50%) scale(1.05);
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.18));
  }
}

/* موبايل */
@media (max-width: 480px) {
  body::after {
    width: 115px;
    height: 115px;
  }
}









/* ===============================
   Remove Green Flash / Tap Color
================================ */

:root {
  --brand-green: #E6DED2 !important;
  --loading-bg: #E6DED2 !important;
}

/* منع لون الضغط الأخضر على الموبايل */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* منع أي خلفية خضراء عند الضغط على اللوجو أو الروابط */
a,
a:active,
a:focus,
button,
button:active,
button:focus,
.navbar-brand,
.navbar-brand:active,
.navbar-brand:focus,
.header-logo,
.header-logo:active,
.header-logo:focus,
.store-header a,
.store-header a:active,
.store-header a:focus {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* لو شاشة التحميل لسه بتلقط المتغير القديم */
body::before {
  background: #E6DED2 !important;
}





/* ===============================
   WhatsApp Floating Button Fix
================================ */

a.wa-s-n,
.wa-s-n {
  background-color: #25D366 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35) !important;
}

/* لون الأيقونة نفسها */
a.wa-s-n svg,
.wa-s-n svg,
a.wa-s-n i,
.wa-s-n i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover */
a.wa-s-n:hover,
.wa-s-n:hover {
  background-color: #1EBE5D !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Active / Focus */
a.wa-s-n:active,
a.wa-s-n:focus,
.wa-s-n:active,
.wa-s-n:focus {
  background-color: #25D366 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35) !important;
}