/* ============================================================
   DIFFERENT STORE — COMPLETE CUSTOM STYLES
   Header layout + Product sections + Global product cards
   Salla theme — Arabic RTL
   Last updated: v8 — border radius fix on your edited version
   ============================================================ */


/* ============================================================
   1. HERO SLIDER
   ============================================================ */

section.s-block--hero-slider salla-slider#main-slider-0,
section.s-block--hero-slider salla-slider#main-slider-0 .swiper-slide,
section.s-block--hero-slider salla-slider#main-slider-0 .swiper-slide-active {
  height: 700px !important;
}

#main-slider-0 .swiper-slide .slide--cat-entry,
#main-slider-0 .swiper-slide [class*="content"] {
  position: absolute !important;
  top: 50% !important;
  right: 10% !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

#main-slider-0 .swiper-slide h2,
#main-slider-0 .swiper-slide p {
  display: block !important;
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

#main-slider-0 .swiper-slide a {
  display: block !important;
  width: fit-content !important;
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  border-radius: 12px !important;
}


/* ============================================================
   2. HEADER LAYOUT — Desktop
   Logo right / Navigation center / Icons left
   ============================================================ */

@media (min-width: 1024px) {

  header#store-header #mainnav.main-nav-container,
  header#store-header #mainnav .inner,
  header#store-header #mainnav .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  header#store-header #mainnav .container {
    display: grid !important;
    grid-template-columns: 220px 1fr 220px !important;
    align-items: center !important;
    padding-inline: 40px !important;
    direction: rtl !important;
    gap: 0 !important;
  }

  header#store-header #mainnav .container > #header-logo {
    grid-column: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
  }

  header#store-header #mainnav .container > #header-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    direction: rtl !important;
  }

  header#store-header #mainnav .container > #header-icons {
    grid-column: 3 !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    direction: rtl !important;
  }

  /* Force all icons visible */
  header#store-header #mainnav .container > #header-icons *,
  header#store-header #mainnav .container > #header-icons button,
  header#store-header #mainnav .container > #header-icons a,
  header#store-header #mainnav .container > #header-icons [class*="icon"],
  header#store-header #mainnav .container > #header-icons [class*="btn"],
  header#store-header #mainnav .container > #header-icons [class*="wishlist"],
  header#store-header #mainnav .container > #header-icons [class*="search"],
  header#store-header #mainnav .container > #header-icons salla-cart-summary {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Nav links horizontal row */
  header#store-header custom-main-menu #mobile-menu ul.main-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
  }

  header#store-header custom-main-menu #mobile-menu ul.main-menu > li.lg\:hidden {
    display: none !important;
  }

  header#store-header custom-main-menu #mobile-menu ul.main-menu > li.root-level {
    display: inline-flex !important;
    margin: 0 !important;
  }

  header#store-header custom-main-menu ul ul,
  header#store-header custom-main-menu .sub-menu {
    display: none !important;
  }

}


/* ============================================================
   3. PRODUCT SECTIONS — Homepage only
   (your manually edited values preserved)
   ============================================================ */

section.s-block--best-offers,
section[id*="best-offers"] {
  background-color: transparent !important;
  padding: 32px 0 !important;
}

section[id*="best-offers"] .s-slider-block__title h2,
section[id*="best-offers"] .s-slider-block__title h3 {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #545454 !important;
  margin-bottom: 0px !important;
  text-align: right !important;
}

section[id*="best-offers"] .s-slider-block__display-all a,
section[id*="best-offers"] .s-slider-block_display-all {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #2c2418 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #2c2418 !important;
  padding-bottom: 2px !important;
  transition: opacity 0.3s ease !important;
}

section[id*="best-offers"] .s-slider-block__display-all a:hover {
  opacity: 0.5 !important;
}

section[id*="best-offers"] .s-slider-nav-arrow {
  background: transparent !important;
  border: 0px solid #2c2418 !important;
  border-radius: 12px !important;
  width: 40px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2c2418 !important;
  transition: all 0.3s ease !important;
}

section[id*="best-offers"] .s-slider-nav-arrow:hover {
  background: #2c2418 !important;
  color: #f7f4ef !important;
}

section[id*="best-offers"] + section[id*="best-offers"] {
  border-top: 1px solid #d8d8d8 !important;
}


/* ============================================================
   4. PRODUCT CARD — Global (all pages)
   ============================================================ */

/* Slide wrapper — no radius here, just spacing */
.s-products-slider-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px !important;
  cursor: pointer !important;
}

/* THE REAL CARD ELEMENT — this is what renders visually.
   border-radius + overflow:hidden here clips the image top
   corners and button bottom corners to the rounded shape */
custom-salla-product-card,
custom-salla-product-card.s-product-card-entry,
custom-salla-product-card.s-product-card-vertical {
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #C7C7C7 !important;
  width: 100% !important;
}

/* Image container — no independent radius, parent clips it */
.s-products-slider-card .product-image,
.s-products-slider-card [class*="image"],
salla-product-card [class*="image"],
custom-salla-product-card [class*="image"],
.product-card [class*="image"] {
  background-color: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
}

/* Product image zoom */
.s-products-slider-card img,
salla-product-card img,
custom-salla-product-card img,
.product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: block !important;
}

.s-products-slider-card:hover img,
salla-product-card:hover img,
custom-salla-product-card:hover img,
.product-card:hover img {
  transform: scale(1.06) !important;
}

/* Product info area */
.s-products-slider-card [class*="content"],
.s-products-slider-card [class*="info"],
.s-products-slider-card [class*="details"],
salla-product-card [class*="content"],
salla-product-card [class*="info"],
custom-salla-product-card [class*="content"],
custom-salla-product-card [class*="info"],
custom-salla-product-card [class*="details"],
.product-card [class*="content"] {
  padding: 16px 0px 0px 0px !important;
  border-radius: 0 !important;
  text-align: center !important;
  background: #3A3A3A !important;
}

/* Remove black separator line */
.s-products-slider-card [class*="category"],
.s-products-slider-card [class*="tag"],
.s-products-slider-card [class*="type"],
salla-product-card [class*="category"],
salla-product-card [class*="tag"],
salla-product-card [class*="type"],
custom-salla-product-card [class*="category"],
custom-salla-product-card [class*="tag"],
custom-salla-product-card [class*="type"],
.product-card [class*="category"],
.product-card [class*="tag"] {
  border: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Hide hr and divider elements */
.s-products-slider-card hr,
.s-products-slider-card [class*="divider"],
.s-products-slider-card [class*="separator"],
salla-product-card hr,
salla-product-card [class*="divider"],
custom-salla-product-card hr,
custom-salla-product-card [class*="divider"],
custom-salla-product-card [class*="separator"],
.product-card hr,
.product-card [class*="separator"] {
  display: none !important;
}

/* Remove any stray top/bottom borders on card children */
.s-products-slider-card > *,
.s-products-slider-card [class*="footer"],
.s-products-slider-card [class*="bottom"],
salla-product-card [class*="footer"],
salla-product-card [class*="bottom"],
custom-salla-product-card [class*="footer"],
custom-salla-product-card [class*="bottom"],
.product-card [class*="footer"] {
  border-top: none !important;
  border-bottom: none !important;
}

/* Product name — your edited font size preserved */
.s-products-slider-card [class*="name"],
.s-products-slider-card [class*="title"],
salla-product-card [class*="name"],
salla-product-card [class*="title"],
custom-salla-product-card [class*="name"],
custom-salla-product-card [class*="title"],
.product-card [class*="name"] {
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: 0em !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* Product price */
.s-products-slider-card [class*="price"],
.s-products-slider-card salla-price,
salla-product-card [class*="price"],
salla-product-card salla-price,
custom-salla-product-card [class*="price"],
custom-salla-product-card salla-price,
.product-card [class*="price"] {
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: 0em !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Old price */
.s-products-slider-card [class*="price"] del,
.s-products-slider-card [class*="old-price"],
salla-product-card [class*="price"] del,
salla-product-card [class*="old-price"],
custom-salla-product-card [class*="price"] del,
custom-salla-product-card [class*="old-price"],
.product-card [class*="old-price"] {
  color: #8a8a8a !important;
  font-size: 16px !important;
  text-decoration: line-through !important;
}

/* Discount badge */
.s-products-slider-card [class*="discount"],
.s-products-slider-card [class*="sale"],
.s-products-slider-card [class*="badge"],
salla-product-card [class*="discount"],
salla-product-card [class*="badge"],
custom-salla-product-card [class*="discount"],
custom-salla-product-card [class*="badge"],
.product-card [class*="badge"] {
  background: #2c2418 !important;
  color: #f7f4ef !important;
  font-size: 24px !important;
  letter-spacing: 0em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

/* ----------------------------------------
   ADD TO CART BUTTON — wipe fill animation
   ---------------------------------------- */

/* Base state — always visible, dark background */
.s-products-slider-card [class*="add-to-cart"],
.s-products-slider-card [class*="add_to_cart"],
.s-products-slider-card [class*="cart-btn"],
.s-products-slider-card button[type="button"],
.s-products-slider-card salla-add-product-button,
salla-product-card [class*="add-to-cart"],
salla-product-card [class*="add_to_cart"],
salla-product-card salla-add-product-button,
salla-product-card button[type="button"],
custom-salla-product-card [class*="add-to-cart"],
custom-salla-product-card salla-add-product-button,
custom-salla-product-card button[type="button"],
.product-card [class*="add-to-cart"],
.product-card button[type="button"] {
  position: relative !important;
  overflow: hidden !important;
  background: #3a3a3a !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  padding: 12px 20px !important;
  margin-top: 12px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: color 0.4s ease, border-color 0.4s ease !important;
  z-index: 0 !important;
}

/* Wipe layer — starts off-screen to the left */
.s-products-slider-card [class*="add-to-cart"]::before,
.s-products-slider-card [class*="add_to_cart"]::before,
.s-products-slider-card [class*="cart-btn"]::before,
.s-products-slider-card button[type="button"]::before,
.s-products-slider-card salla-add-product-button::before,
salla-product-card [class*="add-to-cart"]::before,
salla-product-card salla-add-product-button::before,
salla-product-card button[type="button"]::before,
custom-salla-product-card [class*="add-to-cart"]::before,
custom-salla-product-card salla-add-product-button::before,
custom-salla-product-card button[type="button"]::before,
.product-card [class*="add-to-cart"]::before,
.product-card button[type="button"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: #E6E6E6 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: -1 !important;
}

/* Wipe slides in on hover */
.s-products-slider-card [class*="add-to-cart"]:hover::before,
.s-products-slider-card [class*="add_to_cart"]:hover::before,
.s-products-slider-card [class*="cart-btn"]:hover::before,
.s-products-slider-card button[type="button"]:hover::before,
.s-products-slider-card salla-add-product-button:hover::before,
salla-product-card [class*="add-to-cart"]:hover::before,
salla-product-card salla-add-product-button:hover::before,
salla-product-card button[type="button"]:hover::before,
custom-salla-product-card [class*="add-to-cart"]:hover::before,
custom-salla-product-card salla-add-product-button:hover::before,
custom-salla-product-card button[type="button"]:hover::before,
.product-card [class*="add-to-cart"]:hover::before,
.product-card button[type="button"]:hover::before {
  transform: translateX(0) !important;
}

/* Text and border on hover */
.s-products-slider-card [class*="add-to-cart"]:hover,
.s-products-slider-card [class*="add_to_cart"]:hover,
.s-products-slider-card [class*="cart-btn"]:hover,
.s-products-slider-card button[type="button"]:hover,
.s-products-slider-card salla-add-product-button:hover,
salla-product-card [class*="add-to-cart"]:hover,
salla-product-card salla-add-product-button:hover,
salla-product-card button[type="button"]:hover,
custom-salla-product-card [class*="add-to-cart"]:hover,
custom-salla-product-card salla-add-product-button:hover,
custom-salla-product-card button[type="button"]:hover,
.product-card [class*="add-to-cart"]:hover,
.product-card button[type="button"]:hover {
  color: #ffffff !important;
  font-size: 20px !important;
  border-color: #A39984 !important;
}

/* Remove the black rectangle inside product info area */
 .s-product-card-content [class*="badge"],
 .s-product-card-content [class*="sale"],
 .s-product-card-content [class*="discount"],
 .s-product-card-content [class*="promotion"],
 .s-product-card-content [class*="separator"],
 .s-product-card-content [class*="divider"],
 .s-product-card-content hr {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================
   Hide white borders/dividers in site footer
   ========================================= */

footer,
.store-footer,
.s-footer {
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove column borders and horizontal divider lines */
footer *,
.store-footer *,
.s-footer * {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Remove pseudo-element lines if the theme creates them */
footer::before,
footer::after,
footer *::before,
footer *::after,
.store-footer::before,
.store-footer::after,
.store-footer *::before,
.store-footer *::after,
.s-footer::before,
.s-footer::after,
.s-footer *::before,
.s-footer *::after {
  border: 0 !important;
  box-shadow: none !important;
}

/* Specifically remove footer grid box borders */
footer [class*="grid"],
footer [class*="column"],
footer [class*="col"],
footer [class*="widget"],
footer [class*="block"],
footer [class*="links"],
footer [class*="contact"] {
  border: 0 !important;
  box-shadow: none !important;
}

/* Product name — force white, deep selectors */
.s-products-slider-card [class*="name"],
.s-products-slider-card [class*="title"],
salla-product-card [class*="name"],
salla-product-card [class*="title"],
custom-salla-product-card [class*="name"],
custom-salla-product-card [class*="title"],
custom-salla-product-card .s-product-card-content [class*="name"],
custom-salla-product-card .s-product-card-content [class*="title"],
.s-product-card-entry [class*="name"],
.s-product-card-entry [class*="title"],
.s-product-card-vertical [class*="name"],
.s-product-card-vertical [class*="title"],
.product-card [class*="name"],
.s-product-card-content h3,
.s-product-card-content h2,
.s-product-card-content p,
.s-product-card-content span,
.s-product-card-content a {
  color: #ffffff !important;
}