/* Add custom CSS styles below */ 
@media (max-width: 767px) {
  section[component-id="1078449762"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: 0 !important;
  }

  custom-salla-product-card .s-product-card-image-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

custom-salla-product-card .s-product-card-image {
    overflow: hidden;
    background-color: #fff;
}

div:has(> h3.sub + h2.main + p.desc) > h2.main {
    font-size: 1.3rem !important;
    color: #800402 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

  section[component-id="1078449762"] .square-photos-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  footer .md\:flex.items-center.justify-between.py-4.container {
    background-color: #800402 !important;
    color: #ffffff !important;
    max-width: 100% !important;
    padding-left: 2rem;
    padding-right: 2rem;
}

footer .copyright-text,
footer .copyright-text p,
footer .copyright-text a {
    color: #ffffff !important;
}

  section[component-id="1078449762"] .banner-entry {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  section[component-id="1078449762"] .lazy__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
  }
}

.footer-is-light .store-footer .store-footer__inner {
    --tw-border-opacity: 1;
    border-bottom-color: #e5e7eb;
    border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: #f3f4f6;
    background-color: #800402;
}

.store-footer h3 {
    color: #fff;
}

/* جعل جميع عناصر الفوتر باللون الأبيض فقط */
.store-footer,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer p,
.store-footer span,
.store-footer strong,
.store-footer em,
.store-footer b,
.store-footer a,
.store-footer li,
.store-footer .unicode,
.store-footer .s-trust-badges-label,
.store-footer .s-trust-badges-number,
.store-footer .s-contacts-title,
.store-footer .s-contacts-item,
.store-footer .s-contacts-icon {
    color: #ffffff !important;
}

/* أيقونات SVG داخل الفوتر */
.store-footer svg,
.store-footer svg path,
.store-footer svg circle,
.store-footer svg rect,
.store-footer svg line,
.store-footer svg polyline,
.store-footer svg polygon {
    fill: currentColor !important;
    stroke: currentColor !important;
    color: #ffffff !important;
}

/* الحدود والخطوط داخل الفوتر */
.store-footer hr,
.store-footer [class*="border"] {
    border-color: #ffffff !important;
}

/* أيقونات الخطوط */
.store-footer i,
.store-footer [class*="icon-"],
.store-footer [class^="icon-"] {
    color: #ffffff !important;
}

/* خلفية الهيدر */
#mainnav,
#mainnav > .inner {
    background-color: #800402 !important;
}

/* جميع النصوص والروابط والأيقونات داخل الهيدر */
#mainnav,
#mainnav a,
#mainnav span,
#mainnav p,
#mainnav b,
#mainnav i,
#mainnav button,
#mainnav .text-primary,
#mainnav .text-gray-500 {
    color: #ffffff !important;
}

/* أيقونات SVG داخل الهيدر */
#mainnav svg,
#mainnav svg path,
#mainnav svg circle,
#mainnav svg rect,
#mainnav svg line,
#mainnav svg polyline,
#mainnav svg polygon {
    fill: currentColor !important;
    stroke: currentColor !important;
    color: #ffffff !important;
}


/* حدود القوائم والعناصر */
#mainnav .sub-menu,
#mainnav .s-user-menu-dropdown,
#mainnav [class*="border"] {
    border-color: rgba(255, 255, 255, 0.25) !important;
}


.s-user-menu-trigger {
    background-color: rgb(128 4 2);
}

/* ضمان بقاء النص أبيض عند المرور */
#mainnav a:hover,
#mainnav button:hover,
#mainnav .root-level:hover > a,
#mainnav .sub-menu a:hover {
    color: #ffffff !important;
}

    .top-navbar {
        padding-bottom: .375rem;
        padding-top: .375rem;
        background: #e9ce67;
    }

@media (min-width: 1024px) {
  .container:has(.banner--fixed) {
    width: 100vw !important;
    max-width: none !important;
    padding: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -70px !important;
  }

  .banner--fixed {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .banner--fixed picture {
    display: block !important;
    width: 100% !important;
  }

  .banner--fixed img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }
}