@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

/* =========================
   Brand Identity
========================= */
:root{
  --main:#be396d;
  --main-dark:#a92f5c;
}

/* =========================
   Base
========================= */
body{
  font-family:'Cairo',sans-serif;
}

/* =========================
   Header
========================= */
header,
.top-navbar{
  background:#fff !important;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* =========================
   Product Cards
========================= */
.s-product-card-vertical{
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  transition:0.35s ease;
}

.s-product-card-vertical:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(190,57,109,.25);
}

.s-product-card-image img{
  border-radius:18px 18px 0 0;
  object-fit:contain;
}

.s-product-card-content-title a{
  color:var(--main);
  font-weight:700;
}

/* =========================
   Buttons
========================= */
.s-button-btn,
.s-button-primary{
  background:linear-gradient(135deg,var(--main),#d85687) !important;
  color:#fff !important;
  border:none !important;
  border-radius:50px;
  padding:0.6rem 1.6rem;
  box-shadow:0 6px 18px rgba(190,57,109,.3);
  transition:0.3s ease;
}

.s-button-btn:hover,
.s-button-primary:hover{
  transform:scale(1.05);
  box-shadow:0 10px 28px rgba(190,57,109,.45);
}

/* =========================
   Footer
========================= */
footer.store-footer{
  background:#f7f7f7;
  padding-top:3rem;
  border-top:4px solid var(--main);
}

footer.store-footer h3{
  color:var(--main);
}

footer.store-footer p,
footer.store-footer a{
  color:#777;
}

footer.store-footer a:hover{
  color:var(--main);
}

/* Force white background for the whole store */
body,
.index,
#app,
.store-wrapper,
main {
  background:#ffffff !important;
}


/* =========================================================
   Raed Theme – Fix Custom Banners Section ONLY
   (no gray bg, PNG works, height fixed)
   ========================================================= */

.index section.s-block.s-block--banners {
  background: transparent !important;
}

/* الكارت نفسه */
.index section.s-block.s-block--banners .banner-entry {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* الكونتينر الداخلي الذي يحمل الصورة */
.index section.s-block.s-block--banners .banner-entry .lazy_bg,
.index section.s-block.s-block--banners .banner-entry [data-bg] {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  /* ده أهم سطر */
  aspect-ratio: 1 / 1 !important;
  min-height: 240px !important;
}

/* في الموبايل نخليه أطول */
@media (max-width: 768px) {
  .index section.s-block.s-block--banners .banner-entry .lazy_bg,
  .index section.s-block.s-block--banners .banner-entry [data-bg] {
    min-height: 180px !important;
  }
}

/* نمنع أي overlay */
.index section.s-block.s-block--banners .banner-entry::before,
.index section.s-block.s-block--banners .banner-entry::after {
  display: none !important;
}

/* ===============================
   Raed Theme - True Full Width Hero Slider
   =============================== */

.index section.s-block--photos-slider{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* شيل قيود الكونتينر */
.index section.s-block--photos-slider > .container,
.index section.s-block--photos-slider .s-slider-container,
.index section.s-block--photos-slider .swiper{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* السلايد */
.index section.s-block--photos-slider .swiper-slide{
  width:100% !important;
}

/* الصورة */
.index section.s-block--photos-slider img{
  width:100% !important;
  height: auto !important;
  object-fit: cover;
}


/* ===============================
   Keep 3 Custom Banners Horizontal on Mobile
   (Raed Theme – s-block--banners only)
================================ */

/* الموبايل والتابلت */
@media (max-width: 768px) {

  /* الشبكة الأساسية */
  .index section.s-block--banners .grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }

  /* كل عنصر */
  .index section.s-block--banners .banner-entry{
    min-width: 140px;
    scroll-snap-align: start;
  }

  /* امنع الكسر للعمودي */
  .index section.s-block--banners .grid > *{
    width: auto !important;
  }
}