/* ===============================
   Backgrounds & General Styling
================================ */
body#app {
  background-image: url(https://cdn.salla.sa/form-builder/zSZjKjEg2KX1lcwGuxTkKFjYxRykw6yf9FMMBZhG.png);
}

#mobile-menu {
  background-image: url(https://cdn.salla.sa/form-builder/zSZjKjEg2KX1lcwGuxTkKFjYxRykw6yf9FMMBZhG.png) !important;
}

body.index .app-inner:before {
  opacity: 0.3 !important;
}

.s-block__title {
  display: none;
}

/* ===============================
   SEO & Typography
================================ */
.product-single .main-content h1 {
  color: #000000 !important;
}

.s-block .s-block__title,
.product-entry .product-entry__title a,
.product-entry .f_product-footer .text-gray-600 {
  color: #000000 !important;
}

button.s-button-primary {
  border-width: 0;
  background-color: #ffffff !important;
}

.f_quick-links > ul > li a,
.f_brands-nav > ul > li a {
  display: flex;
  background-color: #fbfbfb !important;
}

.breadcrumbs li a {
  color: #000000 !important;
}

.rtl .fix-align,
[dir=rtl] .fix-align {
  color: #000000 !important;
}

body .RVP-slider .product-card h3 {
  color: #000000 !important;
}

.f_bordered-product {
  border: 0.125rem solid #e77218;
}

/* ===============================
   Vertical Banner – FINAL STABLE
================================ */

/* الحاوية */
.salla-vertical-banner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  position: relative;
  z-index: 1;
}

/* الصورة */
.salla-vertical-banner img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;

  /* يمنع القص */
  object-fit: contain !important;

  /* يمنع تجميد السحب */
  touch-action: pan-y !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ===============================
   Mobile Optimization (Safe)
================================ */
@media (max-width: 768px) {

  .salla-vertical-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 !important;
    border-radius: 14px !important;
  }

  .salla-vertical-banner img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
/* Fix Salla editor preview image clipping */
.product-description img,
.product__description img {
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
}
/* =========================================
   Banner: FULL SCREEN + Remove THEME Frame
   (works even if frame is from theme wrapper)
========================================= */

/* 1) Remove frame from the detected wrapper ONLY */
.banner-no-frame {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* also kill pseudo frames if theme uses them */
.banner-no-frame::before,
.banner-no-frame::after {
  content: none !important;
  display: none !important;
}

/* 2) Banner wrapper base */
.salla-vertical-banner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

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

  overflow: hidden !important;
  touch-action: pan-y !important;
}

/* 3) Banner image (no click, no gaps) */
.salla-vertical-banner img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;

  object-fit: contain !important;

  /* image itself doesn't receive taps (JS also sets it) */
  pointer-events: none !important;

  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 4) Mobile: edge-to-edge full screen */
@media (max-width: 768px) {

  .salla-vertical-banner {
    width: 100vw !important;
    max-width: 100vw !important;

    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .salla-vertical-banner img {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

[class*="image"],
[class*="banner"],
[class*="slider"] img {
  border: none !important;
  box-shadow: none !important;
}