/* =========================================================
   ALTHILAL RAMADAN THEME v1.7-clean (FULL CSS - FORCED) - MOBILE FIXED
   ========================================================= */

:root{
  --rm-bg0:#0C121F;
  --rm-bg1:#281A01;
  --rm-bg2:#120B02;

  --rm-g0:#F3D7BD;
  --rm-g1:#CCA07A;

  --rm-text:#F8EBDD;
  --rm-muted:rgba(248,235,221,.74);

  --rm-border:rgba(204,160,122,.22);
  --rm-border-strong:rgba(204,160,122,.34);

  --rm-radius:16px;
  --rm-radius-sm:12px;
  --rm-pill:999px;

  --rm-shadow:0 18px 44px rgba(0,0,0,.35);
  --rm-shadow-soft:0 10px 22px rgba(0,0,0,.22);

  --rm-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, "Noto Kufi Arabic","Cairo",sans-serif;
}

/* =======================
   GLOBAL MOBILE SAFETY
   - Prevent horizontal overflow
   ======================= */
*,
*::before,
*::after{
  box-sizing: border-box !important;
}

html, body{
  font-family: var(--rm-font) !important;
  background: transparent !important;
  color: var(--rm-text) !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

img, svg, video, canvas{
  max-width: 100% !important;
  height: auto !important;
}

/* Base gradient */
body{
  overflow-x: hidden;
  background:
    radial-gradient(1200px 620px at 50% -10%, rgba(204,160,122,.18), transparent 60%),
    radial-gradient(900px 540px at 10% 20%, rgba(165,116,75,.12), transparent 55%),
    linear-gradient(180deg, var(--rm-bg0) 0%, var(--rm-bg1) 60%, var(--rm-bg2) 100%) !important;
  padding-bottom: 0 !important;
}

/* Zoom-proof gradient lock */
body::after{
  content:"";
  position: fixed !important;
  inset: -25vh -25vw !important;
  width: 150vw !important;
  height: 150vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(1200px 620px at 50% -10%, rgba(204,160,122,.18), transparent 60%),
    radial-gradient(900px 540px at 10% 20%, rgba(165,116,75,.12), transparent 55%),
    linear-gradient(180deg, #0C121F 0%, #281A01 60%, #120B02 100%) !important;
  transform: translateZ(0);
}

/* Stars overlay */
body::before{
  content:"";
  position: fixed !important;
  inset: -25vh -25vw !important;
  width: 150vw !important;
  height: 150vh !important;
  z-index:0 !important;
  pointer-events:none;
  opacity:.90;
  background:
    radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,.85) 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 42%, rgba(255,255,255,.70) 55%, transparent 60%),
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.55) 55%, transparent 60%),
    radial-gradient(2px 2px at 22% 76%, rgba(255,255,255,.75) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 26% 10%, rgba(255,255,255,.62) 55%, transparent 60%),
    radial-gradient(1.6px 1.6px at 32% 28%, rgba(255,255,255,.78) 55%, transparent 60%),
    radial-gradient(1px 1px at 38% 58%, rgba(255,255,255,.55) 55%, transparent 60%),
    radial-gradient(2px 2px at 42% 14%, rgba(255,255,255,.82) 55%, transparent 60%),
    radial-gradient(1.4px 1.4px at 48% 34%, rgba(255,255,255,.66) 55%, transparent 60%),
    radial-gradient(1px 1px at 52% 72%, rgba(255,255,255,.55) 55%, transparent 60%),
    radial-gradient(2px 2px at 58% 18%, rgba(255,255,255,.82) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 44%, rgba(255,255,255,.62) 55%, transparent 60%),
    radial-gradient(1px 1px at 66% 8%, rgba(255,255,255,.55) 55%, transparent 60%),
    radial-gradient(1.7px 1.7px at 72% 30%, rgba(255,255,255,.78) 55%, transparent 60%),
    radial-gradient(1px 1px at 76% 62%, rgba(255,255,255,.55) 55%, transparent 60%),
    radial-gradient(2px 2px at 82% 12%, rgba(255,255,255,.85) 55%, transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 40%, rgba(255,255,255,.65) 55%, transparent 60%),
    radial-gradient(1px 1px at 90% 22%, rgba(255,255,255,.55) 55%, transparent 60%),
    radial-gradient(2px 2px at 92% 70%, rgba(255,255,255,.76) 55%, transparent 60%),
    radial-gradient(1.4px 1.4px at 96% 14%, rgba(255,255,255,.66) 55%, transparent 60%);
  filter:
    drop-shadow(0 0 10px rgba(204,160,122,.12))
    drop-shadow(0 0 22px rgba(255,255,255,.05));
  transform: translateZ(0);
  animation: rmStars 7s ease-in-out infinite alternate;
}
@keyframes rmStars{ from{ transform: translateY(0); opacity:.84; } to{ transform: translateY(8px); opacity:.96; } }

/* ensure content above bg layers */
body > *{ position:relative; z-index:1; }

/* wrappers sometimes clip fixed layers */
#app, .app-inner{ overflow: visible !important; }

/* IMPORTANT:
   كان عندك overflow: visible على .container وكل شيء، ده سبب خروج عناصر على الموبايل
   نخلي X مقفول، وY visible عشان الأسهم/الظلال */
#app, .app-inner, main, header, footer, section{
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.container{
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* Typography */
h1,h2,h3,h4,h5,h6{ color: var(--rm-g0) !important; letter-spacing:.2px; }
p{ color: rgba(248,235,221,.82); }
a{ color: var(--rm-g1) !important; text-decoration:none; }
a:hover{ color:#FFE7CF !important; }
small, em{ color: rgba(248,235,221,.76) !important; }

/* =======================
   Header surfaces
   ======================= */
.bg-white, .shadow-default, #mainnav.main-nav-container{
  background:
    radial-gradient(900px 120px at 20% 0%, rgba(204,160,122,.14), transparent 60%),
    linear-gradient(90deg, rgba(12,18,31,.92), rgba(40,26,1,.84)) !important;
  border-bottom: 1px solid rgba(204,160,122,.18) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}
.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700{
  color: rgba(248,235,221,.76) !important;
  opacity: 1 !important;
}

/* TOP NAVBAR: search only */
.store-header .top-navbar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 8px !important;
}
.store-header .top-navbar .container{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.store-header .top-navbar .flex-1{
  flex: 0 1 auto !important;
  width: 100% !important;
  display:flex !important;
  justify-content:center !important;
}
.store-header .top-navbar .header-buttons,
.store-header .top-navbar salla-contacts.s-contacts-header{
  display:none !important;
}
.store-header .top-navbar .header-search{
  flex: 0 1 760px !important;
  width: min(760px, calc(100vw - 24px)) !important;
  max-width: min(760px, calc(100vw - 24px)) !important;
  margin: 0 auto !important;
}
.store-header .top-navbar salla-search,
.store-header .top-navbar .s-search-container{ width: 100% !important; }
.store-header .top-navbar .s-search-input{
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(12,18,31,.55) !important;
  border: 1px solid rgba(204,160,122,.26) !important;
  color: rgba(248,235,221,.95) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

/* MAIN NAV layout */
header, .store-header{ background: transparent !important; }
#mainnav{ backdrop-filter: blur(10px); }

/* ===== Desktop: RTL Grid ===== */
@media (min-width: 1024px){
  #mainnav .container > .flex.items-stretch.justify-between.relative{
    display:grid !important;
    grid-template-columns: max-content minmax(0,1fr) max-content !important;
    align-items:center !important;
    column-gap: 18px !important;
  }

  #mainnav .container > .flex.items-stretch.justify-between.relative > .flex.items-center:not(.justify-end){
    justify-self: end !important;
    min-width: 240px !important;
    display:flex !important;
    align-items:center !important;
    gap: 14px !important;
  }

  #mainnav a.navbar-brand img{
    display:block !important;
    height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  #mainnav custom-main-menu{
    justify-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    display:flex !important;
    justify-content:center !important;
  }
  #mainnav custom-main-menu ul.main-menu{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #mainnav .container > .flex.items-stretch.justify-between.relative > .flex.items-center.justify-end{
    justify-self: start !important;
    min-width: 240px !important;
  }
}

/* ===== Mobile/tablet: FLEX + remove any min-widths ===== */
@media (max-width: 1023.98px){
  #mainnav .container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #mainnav .container > .flex.items-stretch.justify-between.relative{
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* Kill the desktop min-width that makes overflow */
  #mainnav .container > .flex.items-stretch.justify-between.relative > .flex.items-center:not(.justify-end),
  #mainnav .container > .flex.items-stretch.justify-between.relative > .flex.items-center.justify-end{
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  #mainnav a.navbar-brand img{ height: 44px !important; }

  /* Hide desktop menu (burger should handle) */
  #mainnav custom-main-menu{ display:none !important; }

  /* Tighter controls to fit */
  .s-user-menu-trigger,
  a.s-cart-summary-wrapper{
    padding: 7px 9px !important;
    gap: 8px !important;
  }
}

/* Menu links */
custom-main-menu ul.main-menu li.root-level > a{
  color: rgba(248,235,221,.96) !important;
  font-weight: 900 !important;
  padding: 10px 12px !important;
  border-radius: var(--rm-pill) !important;
  white-space: nowrap !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
custom-main-menu ul.main-menu li.root-level > a:hover{
  background: rgba(204,160,122,.14) !important;
  color: #FFE7CF !important;
  transform: translateY(-1px);
}

/* Hide auto-generated "المزيد" dropdown */
#mainnav :where(#more-menu-dropdown, li#more-menu-dropdown){ display: none !important; }
#mainnav :where(#more-menu-dropdown > a, #more-menu-dropdown a[aria-label="المزيد"], a[aria-label="المزيد"]){ display: none !important; }

/* =======================
   Generic cards / blocks
   ======================= */
.s-block, .s-card, .card, .panel, .box, .section{
  border-radius: var(--rm-radius) !important;
  border: 1px solid var(--rm-border) !important;
  background: linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.60)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.26) !important;
}

/* Product cards */
.s-product-card, .s-product-card-entry, .product-card, .product-item,
custom-salla-product-card .s-product-card-entry{
  border-radius: var(--rm-radius) !important;
  border: 1px solid var(--rm-border) !important;
  background: linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.60)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.26) !important;
  overflow: hidden;
}
.s-product-card-content-title a,
.s-product-card-content-title{
  color: rgba(243,215,189,.96) !important;
  font-weight: 900 !important;
}
.s-product-card-price,
.s-product-card-price *{ color: rgba(248,235,221,.92) !important; }

/* Features */
.s-block--features__item{
  border-radius: 16px !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  background: linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.60)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.26) !important;
  padding: 16px !important;
}
.s-block--features__item h2{
  color: rgba(243,215,189,.96) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  margin-top: 10px !important;
}
.s-block--features__item p{ color: rgba(248,235,221,.78) !important; margin-top: 6px !important; }
.s-block--features__item .feature-icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(204,160,122,.12) !important;
  border: 1px solid rgba(204,160,122,.20) !important;
}
.s-block--features__item .feature-icon i{ color: rgba(248,235,221,.92) !important; font-size: 20px !important; }

/* Buttons */
button, .btn, .s-btn, .s-button-element{
  border-radius: 14px !important;
  border: 1px solid rgba(204,160,122,.30) !important;
  box-shadow: var(--rm-shadow-soft) !important;
  font-weight: 900 !important;
}
button.s-button-element,
.s-button-element.s-button-btn{
  background: linear-gradient(180deg, rgba(204,160,122,.22), rgba(129,79,14,.34)) !important;
  color: rgba(248,235,221,.96) !important;
}
.s-button-outline{
  background: rgba(12,18,31,.40) !important;
  border-color: rgba(204,160,122,.26) !important;
}

/* Forms */
input, select, textarea, .s-form-control{
  border-radius: 12px !important;
  background: rgba(12,18,31,.64) !important;
  border: 1px solid rgba(204,160,122,.24) !important;
  color: rgba(248,235,221,.96) !important;
  max-width: 100% !important;
}
input::placeholder, textarea::placeholder{ color: rgba(248,235,221,.52) !important; }

/* User menu trigger */
.s-user-menu-trigger{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  background: rgba(12,18,31,.22) !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  color: rgba(248,235,221,.95) !important;
}
.s-user-menu-trigger:hover{ background: rgba(204,160,122,.10) !important; border-color: rgba(204,160,122,.28) !important; }
.s-user-menu-avatar-wrap{
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  overflow:hidden !important;
  border: 1px solid rgba(204,160,122,.22) !important;
}
.s-user-menu-trigger-avatar{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
.s-user-menu-trigger-hello{ color: rgba(248,235,221,.70) !important; font-weight: 700 !important; font-size: 12px !important; }
.s-user-menu-trigger-name{ margin: 0 !important; color: rgba(243,215,189,.96) !important; font-weight: 900 !important; font-size: 13px !important; line-height: 1.2 !important; }
.s-user-menu-trigger-icon svg{ fill: rgba(248,235,221,.78) !important; }

/* Wishlist button (heart) */
.s-product-card-wishlist-btn.s-button-element{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  background: rgba(12,18,31,.52) !important;
  border: 1px solid rgba(204,160,122,.24) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}
.s-product-card-wishlist-btn .s-button-text{
  width: 100% !important;
  height: 100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.s-product-card-wishlist-btn i.sicon-heart{ color: rgba(248,235,221,.86) !important; font-size: 18px !important; }
.s-product-card-wishlist-btn:hover{ background: rgba(204,160,122,.12) !important; border-color: rgba(204,160,122,.36) !important; }
.s-product-card-wishlist-btn.favorited,
.s-product-card-wishlist-btn.added,
.s-product-card-wishlist-btn.is-added,
.s-product-card-wishlist-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(204,160,122,.24), rgba(129,79,14,.30)) !important;
  border-color: rgba(204,160,122,.44) !important;
}
.s-product-card-wishlist-btn.favorited i.sicon-heart,
.s-product-card-wishlist-btn.added i.sicon-heart,
.s-product-card-wishlist-btn.is-added i.sicon-heart,
.s-product-card-wishlist-btn[aria-pressed="true"] i.sicon-heart{ color: rgba(255,236,214,.98) !important; }

/* Cart summary + SINGLE icon (slot icon only) */
a.s-cart-summary-wrapper{
  border-radius: 14px !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  background: rgba(12,18,31,.18) !important;
  padding: 8px 10px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}
a.s-cart-summary-wrapper:hover{ background: rgba(204,160,122,.10) !important; border-color: rgba(204,160,122,.28) !important; }

#mainnav salla-cart-summary i[slot="icon"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#mainnav salla-cart-summary .s-cart-summary-icon{ display: none !important; }
a.s-cart-summary-wrapper #s-cart-icon i.header-btn__icon.sicon-shopping-bag{ display: inline-flex !important; }

.s-cart-summary-count{
  background: rgba(204,160,122,.22) !important;
  border: 1px solid rgba(204,160,122,.30) !important;
  color: rgba(248,235,221,.98) !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  border-radius: var(--rm-pill) !important;
}
.s-cart-summary-total{ color: rgba(248,235,221,.92) !important; }

/* Product options themed + CART BUG FIX */
#app :where(salla-product-options.s-product-options-wrapper, .s-product-options-wrapper, .cart-options .s-product-options-wrapper){
  border-radius: 18px !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  background:
    radial-gradient(900px 180px at 30% 0%, rgba(204,160,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.58)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
  padding: 16px !important;
}
#app :where(.cart-options .s-product-options-option-label b, .s-product-options-option-label b){
  color: rgba(243,215,189,.96) !important;
  font-weight: 900 !important;
}
#app :where(
  salla-conditional-fields,
  .s-product-options-option-container,
  .s-product-options-option,
  .s-product-options-option-content,
  .s-product-options-option-content > div,
  .s-product-options-multiple-options-wrapper.required,
  .s-product-options-multiple-options-wrapper
){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper, .s-product-options-multiple-options-wrapper){
  display: grid !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 0 !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper > label, .s-product-options-multiple-options-wrapper > label){
  background: rgba(12,18,31,.22) !important;
  border: 1px solid rgba(204,160,122,.16) !important;
  border-radius: 16px !important;
  padding: 12px 12px !important;
  color: rgba(248,235,221,.92) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  outline: none !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper > label:hover, .s-product-options-multiple-options-wrapper > label:hover){
  background: rgba(204,160,122,.10) !important;
  border-color: rgba(204,160,122,.28) !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper input[type="checkbox"], .s-product-options-multiple-options-wrapper input[type="checkbox"]){
  width: 18px !important;
  height: 18px !important;
  accent-color: rgba(204,160,122,.90) !important;
  outline: none !important;
  box-shadow: none !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper input[type="checkbox"]:invalid, .s-product-options-multiple-options-wrapper input[type="checkbox"]:invalid){
  outline: none !important;
  box-shadow: none !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper > label > div, .s-product-options-multiple-options-wrapper > label > div){
  color: rgba(248,235,221,.90) !important;
  font-weight: 800 !important;
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper input[type="checkbox"]:checked, .s-product-options-multiple-options-wrapper input[type="checkbox"]:checked){
  filter: drop-shadow(0 0 10px rgba(204,160,122,.20));
}
#app :where(.cart-options .s-product-options-multiple-options-wrapper > label:has(input[type="checkbox"]:checked), .s-product-options-multiple-options-wrapper > label:has(input[type="checkbox"]:checked)){
  background: linear-gradient(180deg, rgba(204,160,122,.18), rgba(12,18,31,.28)) !important;
  border-color: rgba(204,160,122,.40) !important;
}

/* Comments + reviews (fix gray) */
.s-comments.s-comments-product{ margin-top: 18px !important; }
.s-comments.s-comments-product .s-comments-container{
  background:
    radial-gradient(800px 160px at 30% 0%, rgba(204,160,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.60)) !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
  padding: 16px !important;
  min-height: auto !important;
  height: auto !important;
}
.s-comments.s-comments-product .s-comments-container .s-comments-header,
.s-comments.s-comments-product .s-comments-container > div{ background: transparent !important; }
salla-comment-form, salla-reviews-summary{ display:block !important; }
salla-reviews-summary{
  background: rgba(12,18,31,.18) !important;
  border: 1px solid rgba(204,160,122,.14) !important;
  border-radius: 16px !important;
}

/* Add-to-cart toast */
.s-add-product-toast{
  border-radius: 18px !important;
  border: 1px solid rgba(204,160,122,.20) !important;
  background: linear-gradient(180deg, rgba(12,18,31,.92), rgba(40,26,1,.80)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45) !important;
  color: rgba(248,235,221,.94) !important;
}
.s-add-product-toast__title{ color: rgba(243,215,189,.96) !important; font-weight: 900 !important; }
.s-add-product-toast__name{ color: rgba(248,235,221,.92) !important; }
.s-add-product-toast__divider{ opacity: .25 !important; }
.s-add-product-toast__close i{ color: rgba(248,235,221,.85) !important; }
.s-add-product-toast__progress-bar{ background: rgba(204,160,122,.72) !important; }

/* Sliders: keep vertical overflow, avoid horizontal overflow */
.s-block,
.s-block .container,
.s-products-slider-wrapper,
.s-slider-wrapper,
.s-slider-container,
.swiper,
.swiper-wrapper,
.swiper-slide{
  overflow-y: visible !important;
  overflow-x: clip !important;
}
.s-products-slider-wrapper,
.s-slider-wrapper,
.s-slider-container,
.swiper{ position: relative !important; z-index: 3 !important; max-width: 100% !important; }

.s-block--slider-with-bg.s-block--full-bg,
.s-block--tabs-produtcs.s-block--full-bg{ background: transparent !important; }

.s-block--slider-with-bg .slider-bg,
.s-block--tabs-produtcs .slider-bg{
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28) !important;
  filter: saturate(0.95) contrast(1.02);
}

.s-slider-prev, .s-slider-next{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(204,160,122,.26) !important;
  background: rgba(12,18,31,.58) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(0,0,0,.22) !important;
}
.s-slider-prev:hover, .s-slider-next:hover{
  background: rgba(204,160,122,.12) !important;
  border-color: rgba(204,160,122,.36) !important;
}
.s-slider-prev svg, .s-slider-next svg,
.s-slider-prev .s-slider-button-icon svg, .s-slider-next .s-slider-button-icon svg{ fill: rgba(248,235,221,.92) !important; }
.s-slider-prev.disabled, .s-slider-next.disabled,
.s-slider-prev.swiper-button-disabled, .s-slider-next.swiper-button-disabled{ opacity: .45 !important; cursor: not-allowed !important; }

.swiper-pagination-bullet{ background: rgba(248,235,221,.35) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active{ background: rgba(204,160,122,.85) !important; }

/* Ribbon + Lanterns styling */
.rm-ribbon{
  width: calc(100% - 24px) !important;
  max-width: 1280px !important;
  margin: 12px auto 16px !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  background:
    radial-gradient(900px 120px at 30% 0%, rgba(204,160,122,.12), transparent 62%),
    linear-gradient(90deg, rgba(12,18,31,.78), rgba(40,26,1,.72)) !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  box-shadow: var(--rm-shadow) !important;
  backdrop-filter: blur(8px);
  text-align: center !important;
}
.rm-ribbon .rm-title{ font-weight: 900 !important; color: var(--rm-g0) !important; font-size: 28px !important; line-height: 1.2 !important; }
.rm-ribbon .rm-sub{
  margin-top: 8px !important;
  color: rgba(248,235,221,.84) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.75 !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 480px){
  .rm-ribbon .rm-title{ font-size: 22px !important; }
  .rm-ribbon .rm-sub{ font-size: 13px !important; }
  .rm-ribbon{ padding: 12px 12px !important; }
}

/* Lanterns: prevent pushing layout on tiny screens (they are fixed but we still guard) */
@media (max-width: 480px){
  .rm-lantern{ transform: scale(.90) !important; }
  .rm-lantern.rm-left{ left: 6px !important; }
  .rm-lantern.rm-right{ right: 6px !important; }
}

.rm-lantern{
  position: fixed !important;
  top: 10px !important;
  width: 40px;
  height: 98px;
  pointer-events:none;
  z-index: 9999;
  opacity: .92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.rm-lantern.rm-left{ left: 10px !important; }
.rm-lantern.rm-right{ right: 10px !important; }
.rm-lantern .cap{
  position:absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 14px;
  border-radius: 10px 10px 8px 8px;
  background: linear-gradient(180deg, rgba(243,215,189,.96), rgba(129,79,14,.88));
  border: 1px solid rgba(255,255,255,.12);
}
.rm-lantern .body{
  position:absolute; top: 28px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 58px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(12,18,31,.66), rgba(40,26,1,.56));
  border: 1px solid rgba(204,160,122,.25);
  overflow:hidden;
}
.rm-lantern .glow{
  position:absolute; inset:-18px;
  background: radial-gradient(circle at 50% 45%, rgba(204,160,122,.34), transparent 62%);
  animation: rmGlow 2.6s ease-in-out infinite;
}
.rm-lantern .chain{
  position:absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 20px;
  background: rgba(204,160,122,.55);
}
@keyframes rmGlow{ 0%,100%{transform:scale(1);opacity:.72;} 50%{transform:scale(1.06);opacity:1;} }
.rm-swing{ transform-origin:50% 0%; animation: rmSwing 4.2s ease-in-out infinite; }
@keyframes rmSwing{ 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);} }
.rm-crescent{ display:none !important; }

/* Footer unify */
footer.store-footer{ background: transparent !important; }

.store-footer__inner{
  border-radius: 22px !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  background:
    radial-gradient(1000px 260px at 50% 0%, rgba(204,160,122,.16), transparent 62%),
    linear-gradient(180deg, rgba(40,26,1,.86), rgba(12,18,31,.96)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
}

/* bottom bar */
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: rgba(0,0,0,.14) !important;
  border-top: 1px solid rgba(204,160,122,.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  border-bottom-left-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
}
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center,
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center *{
  color: rgba(248,235,221,.78) !important;
}
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center .s-payments-list{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center .s-payments-list-item{
  background: rgba(12,18,31,.18) !important;
  border: 1px solid rgba(204,160,122,.14) !important;
  border-radius: 14px !important;
  padding: 6px 8px !important;
}

/* WhatsApp (disable floating) */
a.wa-s-n{
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;

  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 !important;

  border-radius: 14px !important;
  background: rgba(12,18,31,.18) !important;
  border: 1px solid rgba(204,160,122,.14) !important;
  box-shadow: none !important;

  color: rgba(248,235,221,.92) !important;
  transform: none !important;
}
a.wa-s-n:hover{ background: rgba(204,160,122,.12) !important; border-color: rgba(204,160,122,.28) !important; }
a.wa-s-n svg{ width: 22px !important; height: 22px !important; display:block !important; }

/* place inside copyright line once moved */
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center .copyright-text{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.store-footer__inner + .md\\:flex.items-center.justify-between.py-4.container.text-center .copyright-text a.wa-s-n{
  order: -1 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before, .rm-lantern .glow, .rm-swing{ animation: none !important; }
}

/* =========================================================
   FORCE LAYER (must stay at END)
   ========================================================= */
body, #app, .app-inner, main, header, footer{ background-color: transparent !important; }

[class*="bg-white"],
[class*="bg-gray"],
.bg-white,
.bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
.bg-slate-50, .bg-slate-100,
.bg-neutral-50, .bg-neutral-100,
.bg-zinc-50, .bg-zinc-100{
  background: transparent !important;
}

#app :where(
  .s-block,.s-card,.card,.panel,.box,.section,
  .shadow-default,.shadow,[class*="shadow-"],
  [class*="rounded"],[class*="border"],
  [role="dialog"],[role="region"]
){
  border-radius: var(--rm-radius) !important;
  border: 1px solid var(--rm-border) !important;
  background: linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.60)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.26) !important;
  color: var(--rm-text) !important;
}

#app :where(
  .text-gray-300,.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700,
  [class*="text-gray"],[class*="text-slate"],[class*="text-neutral"],[class*="text-zinc"]
){
  color: rgba(248,235,221,.78) !important;
  opacity: 1 !important;
}

/* FINAL FIX: cart options pills still gray */
#app .cart-options,
#app .cart-options *{
  background-color: transparent !important;
}
#app .cart-options :where(salla-product-options.s-product-options-wrapper, .s-product-options-wrapper){
  background:
    radial-gradient(900px 180px at 30% 0%, rgba(204,160,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.58)) !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}
#app .cart-options .s-product-options-multiple-options-wrapper{ gap: 12px !important; }
#app .cart-options .s-product-options-multiple-options-wrapper > label{
  background: rgba(12,18,31,.30) !important;
  border: 1px solid rgba(204,160,122,.22) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.14) !important;
}
#app .cart-options .s-product-options-multiple-options-wrapper > label > div{
  background: transparent !important;
  border: 0 !important;
  color: rgba(248,235,221,.92) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
#app .cart-options .s-product-options-multiple-options-wrapper > label::before,
#app .cart-options .s-product-options-multiple-options-wrapper > label::after{
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(204,160,122,.18) !important;
}
#app .cart-options .s-product-options-multiple-options-wrapper > label:has(input[type="checkbox"]:checked){
  background: linear-gradient(180deg, rgba(204,160,122,.18), rgba(12,18,31,.34)) !important;
  border-color: rgba(204,160,122,.42) !important;
}

/* PRODUCT COMMENTS / REVIEWS */
#app salla-comments,
#app salla-comments .s-comments,
#app salla-comments .s-comments-container{
  background: transparent !important;
}
#app salla-comments .s-comments-container{
  background:
    radial-gradient(900px 180px at 30% 0%, rgba(204,160,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(12,18,31,.78), rgba(40,26,1,.58)) !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
  padding: 18px !important;
}
#app salla-comments .s-comments-header,
#app salla-comments .s-comments-container > div{
  background: transparent !important;
  border-color: rgba(204,160,122,.16) !important;
}
#app salla-comments salla-comment-form,
#app salla-comments salla-reviews-summary{
  display: block;
  background: transparent !important;
  border: 0 !important;
}
#app salla-comments :is(.s-card, .card, .panel, .s-box, .box){
  background: rgba(12,18,31,.30) !important;
  border: 1px solid rgba(204,160,122,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.14) !important;
}
#app salla-comments,
#app salla-comments *{
  color: rgba(248,235,221,.92) !important;
}
#app salla-comments :is(small, .text-gray-500, .text-gray-400, .muted){
  color: rgba(248,235,221,.62) !important;
}


/* =========================================================
   PATCH: Fix product cards being clipped (sliders/lists)
   Put this at the VERY END of your CSS
   ========================================================= */

/* Keep page safe from horizontal overflow */
html, body{ overflow-x: hidden !important; }

/* Allow product cards/shadows/images to show normally */
#app :where(
  .s-products-slider-wrapper,
  .s-products-slider-slider,
  .s-slider-wrapper,
  .s-slider-container,
  .swiper,
  .swiper-wrapper,
  .swiper-slide,
  .s-products-list,
  .s-products-list-wrapper,
  .s-products-list-horizontal-cards,
  custom-salla-product-card,
  .s-product-card-entry,
  .s-product-card-image,
  .s-product-card-content
){
  overflow: visible !important;
}

/* This is the main culprit in your HTML: container has overflow-hidden */
#app :where(
  section.s-block--slider-with-bg .container,
  section.s-block--tabs-produtcs .container,
  .s-block--slider-with-bg .container.overflow-hidden,
  .s-block--tabs-produtcs .container.overflow-hidden,
  .container.overflow-hidden:has(.s-products-slider-wrapper)
){
  overflow: visible !important;
}

/* If any slider background wrapper clips, keep it visible (but keep its own rounded mask) */
#app :where(
  .s-block--slider-with-bg,
  .s-block--tabs-produtcs,
  .s-block--slider-with-bg .slider-bg,
  .s-block--tabs-produtcs .slider-bg
){
  overflow: visible !important;
}

/* Product images: prevent weird cropping inside the card */
#app :where(.s-product-card-image-cover){
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* Optional: if you still see horizontal scroll because of arrows, clip only the X on outer wrapper */
#app :where(.s-slider-wrapper, .s-slider-container, .swiper){
  overflow-x: clip !important;
  overflow-y: visible !important;
}