/* Neutralize aggressive popup overrides specifically on the real /cart page */
html.is-cart-page .s-cart-summary,
html.is-cart-page [class*="cart-summary"],
html.is-cart-page [class*="cart-modal"],
html.is-cart-page salla-cart-summary,
html.is-cart-page salla-modal {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  float: none !important;
}

/* Ensure the layout stacks cleanly inside the cart container */
html.is-cart-page .cart-wrapper,
html.is-cart-page .cart-page__content {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
salla-add-product-toast {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
}
header, .store-header, .site-header {
  position: relative !important;
}

.vibe-cart-icon {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  text-decoration: none !important;
  z-index: 50 !important;
}
salla-add-product-button,
salla-add-product-button button,
[class*="add-to-cart"],
[class*="add-product"] {
  background-color: #fbacea !important;
  background: #fbacea !important;
  position: relative !important;
  z-index: 1 !important;
}

salla-add-product-button *,
[class*="add-to-cart"] *,
[class*="add-product"] * {
  position: relative !important;
  z-index: 2 !important;
}
salla-add-product-button,
salla-add-product-button *,
[class*="add-to-cart"],
[class*="add-to-cart"] *,
[class*="add-product"],
[class*="add-product"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
[class*="price"] [class*="price"] {
  border: true !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 1 !important;
}
.review-box,
.faq-box,
.faq-item {
  background-color: #ffffff !important;
}
.framer-pills,
.vibe-gallery {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
.vibe-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
}

.vibe-gallery-item {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.vibe-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px) {
  .vibe-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.vibe-gallery-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 2px solid #fbcfe8 !important;
}
html, body {
  overflow-x: hidden !important;
}

div#custom-vibe-ticker.custom-vibe-ticker {
  background: #ea7794 !important;
  background-color: #ea7794 !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 7px 0 !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  transform: rotate(0deg) !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

.vibe-track {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

#custom-vibe-ticker:hover .vibe-track {
  animation-play-state: paused !important;
}

.vibe-phrase-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 4px !important;
}

.vibe-phrase-text {
  color: #d1fae5 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  white-space: nowrap !important;
}

.vibe-diamond {
  color: #e53935 !important;
  font-size: 14px !important;
}

@keyframes vibe-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
/* Base Canvas Override */
body, main, .salla-theme-wrapper {
  background-color: #fdfbf7 !important;
  direction: rtl !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.framer-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px;
  color: #1f2937;
}

/* Hero Section */
.framer-hero {
  background-color: #f472b6;
  color: #ffffff;
  border-radius: 28px;
  padding: 44px 20px;
  text-align: center;
  box-shadow: 0 10px 25px -5px rgba(244, 114, 182, 0.3);
  margin-bottom: 24px;
}

.framer-hero h1 {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: #ffffff !important;
}

.framer-hero p {
  font-size: 1.05rem;
  opacity: 0.95;
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.framer-hero-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #db2777 !important;
  font-weight: 800;
  padding: 14px 36px;
  border-radius: 9999px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.framer-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Feature Pills */
.framer-pills {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.framer-pill {
  background-color: #fbcfe8;
  color: #9d174d;
  padding: 8px 20px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Category Grid */
.framer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.framer-card {
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}

.framer-card:hover {
  transform: translateY(-3px);
}

.framer-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.framer-card p {
  font-size: 0.88rem;
  line-height: 1.5;
}

.card-pink { background-color: #fbcfe8; color: #831843; }
.card-mint { background-color: #d1fae5; color: #065f46; }
.card-yellow { background-color: #fef08a; color: #713f12; }
.card-peach { background-color: #ffedd5; color: #7c2d12; }

/* Section Titles */
.framer-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 32px 0 16px;
}

/* Review Grid */
.framer-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.review-box {
  background-color: #f0d8e0 !important;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.review-stars { color: ffc107; margin-bottom: 8px; }
.review-user { font-size: 0.85rem; color: #6b7280; margin-top: 8px; font-weight: 600; }

/* FAQ Accordion Box */
.framer-faq {
  background-color: #f0e6ea;
  border-radius: 24px;
  padding: 20px 24px;
  border: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 40px;
}

.faq-item {
  padding: 14px 0;
  border-bottom: 1px solid #f0e6ea;
}

.faq-item:last-child { 
  border-bottom: none; 
}

.faq-q { 
  font-weight: 700; 
  font-size: 1rem; 
  margin-bottom: 4px; 
}

.faq-a { 
  font-size: 0.9rem; 
  color: #000000; 
}
.s-block-products, [class*="products-grid"], .s-products-list {
  display: flex !important;
  justify-content: center !important;
  max-width: 900px !important;
  margin: 20px auto 30px auto !important;
  padding: 0 16px !important;
}

/* Constrain Product Card Width */
[class*="product-card"], article, .s-product-card-entry {
  max-width: 380px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background-color: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.04) !important;
}
/* Ultra-Subtle Pastel Ambient Canvas */
body, main, .salla-theme-wrapper, #app {
  background: 
    radial-gradient(circle at 15% 15%, #fce7f3 0%, transparent 45%),
    radial-gradient(circle at 85% 40%, #fef9c3 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, #dcfce7 0%, transparent 50%),
    #fdfbf7 !important;
  background-attachment: fixed !important;
}
/* Subtle Button Magnetic Pulse */
.framer-hero-btn, .s-button-element, [class*="add-to-cart"] {
  animation: gentle-pulse 2.5s infinite ease-in-out !important;
}

@keyframes gentle-pulse {
  0% { transform: scale(1); box-shadow: 0 4px 14px rgba(244, 114, 182, 0.25); }
  50% { transform: scale(1.03); box-shadow: 0 8px 22px rgba(244, 114, 182, 0.45); }
  100% { transform: scale(1); box-shadow: 0 4px 14px rgba(244, 114, 182, 0.25); }
}

/* Live Viewer Urgency Pill */
.live-viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff;
  color: #831843;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid #fbcfe8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-top: 12px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}


/* Sticky Mobile Conversion Bar */
.framer-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #fbcfe8;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9998;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.framer-sticky-bar.visible {
  transform: translateY(0);
}

.sticky-btn {
  background: linear-gradient(135deg, #f472b6 0%, #db2777 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: 9999px;
  text-decoration: none !important;
  font-size: 0.88rem;
  box-shadow: 0 4px 14px rgba(219, 39, 119, 0.3);
}

/* Weekend Delivery Urgency Badge */
.delivery-urgency-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fef08a;
  color: #713f12;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 14px;
  border: 1px dashed #facc15;
}

/* Micro Trust Badges Row */
.framer-trust-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #4b5563;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
/* Breathing Effect for Salla's Native Top-Left Header Cart */
salla-cart-summary,
.s-cart-summary,
header a[href*="cart"],
.site-header [class*="cart"],
.header-btn-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: header-cart-breathe 2.8s ease-in-out infinite !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  transition: transform 0.2s ease !important;
}

@keyframes header-cart-breathe {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 2px 6px rgba(244, 114, 182, 0.3));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 6px 14px rgba(244, 114, 182, 0.65));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 6px rgba(244, 114, 182, 0.3));
  }
}

/* Hover Scale Accent */
salla-cart-summary:hover,
header a[href*="cart"]:hover {
  transform: scale(1.2) !important;
}
/* Deep Target Salla Web Component Container */
salla-price,
.s-product-card-price,
.s-price-wrapper,
[class*="price"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #fbcfe8 !important;
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.15) !important;
  margin: 12px auto !important;
}
/* Force Active Price Text & Currency */
salla-price *, 
[class*="price"] span, 
[class*="price"] div,
.s-price-amount {
  color: #db2777 !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
}

/* Original Strikethrough Price Override */
salla-price [class*="original"],
salla-price [class*="before"],
salla-price del,
salla-price s {
  color: #9ca3af !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  margin-left: 8px !important;
  opacity: 0.8 !important;
}
/* Mobile Screen Responsive Price Pill Sizing */
@media (max-width: 768px) {
  salla-price,
  .s-product-card-price,
  .s-price-wrapper,
  [class*="price"] {
    padding: 4px 14px !important;
    margin: 6px auto !important;
    border-width: 1px !important;
  }

  /* Scale down mobile price text */
  salla-price *, 
  [class*="price"] span, 
  [class*="price"] div,
  .s-price-amount {
    font-size: 1.1rem !important;
  }

  /* Scale down mobile original strikethrough price */
  salla-price [class*="original"],
  salla-price [class*="before"],
  salla-price del,
  salla-price s {
    font-size: 0.78rem !important;
    margin-left: 4px !important;
  }
}
/* Hide Landing Page Elements Inside Cart Page & Cart Modals */
body[class*="cart"] #framer-root,
.s-cart-page #framer-root,
salla-cart-modal #framer-root,
[class*="cart-drawer"] #framer-root,
.s-cart-summary #framer-root,
.s-cart-page .delivery-urgency-badge,
.s-cart-page .live-viewer-badge,
.s-cart-page .framer-trust-row,
salla-cart-modal .live-viewer-badge,
salla-cart-modal .delivery-urgency-badge,
salla-cart-modal .framer-trust-row {
  display: none !important;
}
/* Force Header Above All Page Content */
header, 
.site-header, 
salla-header, 
.header-wrapper, 
[class*="header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Lower Injected Landing Content Stacking Layer */
#framer-root, 
.framer-wrapper {
  position: relative !important;
  z-index: 1 !important;
}
/* Ultra-Wide Top Banner Styling */
.framer-top-banner {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 16px auto !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.06) !important;
}

.framer-top-banner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 28px !important;
}
/* 1. Hide/Cancel Standalone Top Banner */
#framer-wide-banner,
.framer-top-banner {
  display: none !important;
}

/* 2. Replace Hero Pink Background with Banner Image */
.framer-hero {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
    url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') center/cover no-repeat !important;
  color: #ffffff !important;
  border-radius: 28px !important;
  padding: 52px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Text Legibility & Contrast Adjustments */
.framer-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.framer-hero p {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
}
/* Mobile Hero Soft Fade into Light Ambient Canvas */
@media (max-width: 768px) {
  .framer-hero {
    background: 
      linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.35) 0%, 
        rgba(0, 0, 0, 0.15) 35%, 
        rgba(253, 251, 247, 0.8) 75%, 
        #fdfbf7 100%
      ),
      url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') center top / contain no-repeat !important;
    background-color: #fdfbf7 !important;
    border: 1px solid rgba(251, 207, 232, 0.4) !important;
  }

  /* Ensure Text Readability Across the Gradient Fade */
  .framer-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8) !important;
  }

  .framer-hero p {
    color: #1f2937 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9) !important;
  }
}
/* Mobile Hero Image Fade into Pastel Mesh Gradient */
@media (max-width: 768px) {
  .framer-hero {
    background: 
      linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.45) 0%, 
        rgba(0, 0, 0, 0.05) 35%, 
        rgba(251, 207, 232, 0.85) 65%, 
        rgba(254, 240, 138, 0.95) 100%
      ),
      url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') center top / contain no-repeat,
      linear-gradient(135deg, #fbcfe8 0%, #a7f3d0 50%, #fef08a 100%) !important;
    background-color: #fbcfe8 !important;
  }

  /* Mobile Text Contrast across Mesh Fade */
  .framer-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7) !important;
  }

  .framer-hero p {
    color: #831843 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9) !important;
  }
}
/* True Image Opacity Fade into Pastel Mesh Gradient */
@media (max-width: 768px) {
  .framer-hero {
    position: relative !important;
    background: linear-gradient(135deg, #fbcfe8 0%, #a7f3d0 50%, #fef08a 100%) !important;
    overflow: hidden !important;
  }

  /* Separate image element with bottom feathering mask */
  .framer-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') center top / contain no-repeat !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 75%) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 75%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Lift text and elements above the image layer */
  .framer-hero > * {
    position: relative !important;
    z-index: 1 !important;
  }

  .framer-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.75) !important;
  }

  .framer-hero p {
    color: #831843 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9) !important;
  }
}
/* Fix Mobile Hero Fade: Kill Base Background & Apply Alpha Feather */
@media (max-width: 768px) {
  .framer-hero {
    background-image: none !important;
    background: linear-gradient(135deg, #fbcfe8 0%, #a7f3d0 50%, #fef08a 100%) !important;
    position: relative !important;
    overflow: hidden !important;
  }
/* Mobile Hero Seamless Edge Blend Overlay */
@media (max-width: 768px) {
  .framer-hero {
    position: relative !important;
    background-color: #fbcfe8 !important;
    background-image: 
      url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp'),
      linear-gradient(135deg, #fbcfe8 0%, #a7f3d0 50%, #fef08a 100%) !important;
    background-position: top center, center !important;
    background-size: 100% auto, cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }

  /* Gradient Overlay Covering the Image Boundary */
  .framer-hero::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.0) 30%,
      rgba(251, 207, 232, 0.75) 60%,
      rgba(254, 240, 138, 0.95) 90%,
      #fef08a 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Lift Content Above Gradient Overlay */
  .framer-hero > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .framer-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  }

  .framer-hero p {
    color: #831843 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9) !important;
  }
}
  /* Feathered Image Overlay */
  .framer-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;
    background-image: url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') !important;
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 70%) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Lift Hero Text Layer Above Mask */
  .framer-hero > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .framer-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75) !important;
  }

  .framer-hero p {
    color: #831843 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8) !important;
  }
}
/* Mobile Hero Image Aspect Ratio & Seamless Blend Fix */
@media (max-width: 768px) {
  #framer-root .framer-hero,
  .framer-hero {
    height: auto !important;
    min-height: 260px !important;
    padding: 30px 16px 50px 16px !important;
    background-image: 
      linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.2) 0%, 
        rgba(0, 0, 0, 0) 40%, 
        rgba(251, 207, 232, 0.7) 75%, 
        #fbcfe8 100%
      ),
      url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') !important;
    background-position: top center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: #fbcfe8 !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(251, 207, 232, 0.4) !important;
  }

  /* Keep mobile hero typography readable */
  #framer-root .framer-hero h1,
  .framer-hero h1 {
    font-size: 1.4rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 8px !important;
  }

  #framer-root .framer-hero p,
  .framer-hero p {
    font-size: 0.9rem !important;
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
  }
}
/* Mobile Hero Fade - Very Light Mint Green Bottom */
@media (max-width: 768px) {
  #framer-root .framer-hero,
  .framer-hero {
    background-image: 
      linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.25) 0%, 
        rgba(0, 0, 0, 0) 35%, 
        rgba(209, 250, 229, 0.75) 75%, 
        #d1fae5 100%
      ),
      url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') !important;
    background-color: #d1fae5 !important;
    box-shadow: 0 8px 24px rgba(167, 243, 208, 0.35) !important;
  }
}
/* Reset Old Overlay Layers & Force Ultra-Light Mint Green Bottom Fade */
@media (max-width: 768px) {
  /* Kill old pseudo-element overlays carrying yellow styles */
  #framer-root .framer-hero::before,
  #framer-root .framer-hero::after,
  .framer-hero::before,
  .framer-hero::after {
    display: none !important;
    content: "" !important;
    background: none !important;
  }

  /* Apply Direct Light Mint Green Gradient Fade */
  html body #framer-root .framer-hero,
  html body .framer-hero {
    background-image: 
      linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.35) 0%, 
        rgba(0, 0, 0, 0) 35%, 
        rgba(236, 253, 245, 0.85) 75%, 
        #ecfdf5 100%
      ),
      url('https://cdn.files.salla.network/other/106580286/20e25d80-97a9-48d6-83b8-b8e365ad1554-original.webp') !important;
    background-position: top center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: #ecfdf5 !important;
    box-shadow: 0 8px 24px rgba(167, 243, 208, 0.2) !important;
  }
}
/* Card Placement & Framer Styling under Pills */
a.product-popup-trigger,
a[href*="p628546074"] {
  display: block !important;
  margin: 20px auto !important;
  max-width: 320px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
  border: 2px solid rgba(251, 207, 232, 0.6) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

a.product-popup-trigger:active,
a.product-popup-trigger:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 16px 36px rgba(251, 207, 232, 0.5) !important;
}
/* Compact Product Card Container with Pastel Mesh Gradient */
.framer-pills + *,
salla-product-card,
.product-entry,
.product-item,
.product-card {
  background: linear-gradient(135deg, #fbcfe8 0%, #a7f3d0 50%, #fef08a 100%) !important;
  max-width: 280px !important;
  width: 85% !important;
  margin: 12px auto !important;
  padding: 10px !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 20px rgba(251, 207, 232, 0.35) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-sizing: border-box !important;
}

/* Trim Inner Product Link & Image Dimensions */
a.product-popup-trigger,
a[href*="p628546074"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}

a.product-popup-trigger img {
  max-height: 220px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}
/* Ultra-High Elevation Sticky Top Header */
header,
.site-header,
.main-header,
salla-header,
.header-wrapper,
.sticky-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 18px 45px -4px rgba(0, 0, 0, 0.32), 0 8px 20px -2px rgba(0, 0, 0, 0.22) !important;
  border-bottom: 1px solid rgba(251, 207, 232, 0.6) !important;
}

/* Clear isolated inner element shadows */
header *,
.site-header *,
.main-header *,
salla-header * {
  box-shadow: none !important;
}
/* Clean Pill-Accordion FAQ Section */
.framer-faq-container {
  width: 90% !important;
  max-width: 420px !important;
  margin: 24px auto 32px auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  direction: rtl !important;
  text-align: right !important;
}

.faq-pill-item {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid #fbcfe8 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(251, 207, 232, 0.2) !important;
}

.faq-pill-item.active {
  border-color: #a7f3d0 !important;
  box-shadow: 0 6px 18px rgba(167, 243, 208, 0.35) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

.faq-pill-header {
  width: 100% !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  outline: none !important;
  text-align: right !important;
}

.faq-icon {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: #f472b6 !important;
  transition: transform 0.3s ease !important;
  line-height: 1 !important;
}

.faq-pill-item.active .faq-icon {
  transform: rotate(45deg) !important;
  color: #10b981 !important;
}

.faq-pill-body {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease !important;
  padding: 0 18px !important;
}

.faq-pill-item.active .faq-pill-body {
  max-height: 120px !important;
  opacity: 1 !important;
  padding: 0 18px 14px 18px !important;
}

.faq-pill-body p {
  margin: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
}
/* Brighter Outer Box Yellow (#FEE066) Pill Styling */
.dandelion-pill-target {
  background-color: #FEE066 !important;
  background: #FEE066 !important;
  border: 1.5px solid #FEF08A !important;
  box-shadow: 0 4px 14px rgba(254, 224, 102, 0.45) !important;
  transition: all 0.25s ease !important;
}

.dandelion-pill-target *,
.dandelion-pill-target p,
.dandelion-pill-target span {
  color: #1f2937 !important;
  font-weight: 700 !important;
}
/* Emergency Force-Show Product Elements */
salla-product-card,
.product-card,
.product-entry,
.product-popup-trigger,
salla-add-product-button {
  display: block !important;
  visibility: visiable !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  position: relative !important;
  z-index: 100 !important;
}
/* Native App Micro-Interactions & Tap Dynamics */
button,
a,
[role="button"],
.faq-pill-item,
.dandelion-pill-target,
.floating-buy-btn,
.framer-pills > *,
salla-add-product-button,
salla-button,
.product-card {
  -webkit-tap-highlight-color: #fbacea !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
  will-change: transform !important;
  user-select: none !important;
}

/* Tactile Spring-Scale Compression on Press */
button:active,
a:active,
[role="button"]:active,
.faq-pill-item:active,
.dandelion-pill-target:active,
.floating-buy-btn:active,
.framer-pills > *:active,
salla-add-product-button:active,
salla-button:active,
.product-card:active {
  transform: scale(0.96) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
/* Hard-Centered Desktop Price Badge */
@media (min-width: 768px) {
  salla-product-price,
  .product-price,
  .product-card .price,
  [class*="product-price"],
  .price-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important; /* Overrides parent flex-start layout */
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
    max-width: max-content !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    transform: none !important;
  }
}
/* Force Parent Container Child Alignment */
@media (min-width: 768px) {
  /* Center children inside Salla's card content layout */
  .product-card,
  salla-product-card,
  .product-entry,
  .product-card__content,
  .product-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
/* -----------------------------------------------------------------
   1. Salla Cart Popup & Modal Overlay Fix (Overriding Header)
   ----------------------------------------------------------------- */
/* Force header to allow popping out and sit below modal layer */
header, 
.s-header, 
.header-wrapper, 
.top-navbar {
  z-index: 99 !important;
  overflow: visible !important;
}

/* Force cart popup, drawer, and Salla web component modals above everything */
salla-cart-summary,
salla-modal,
.s-cart-summary,
.s-cart-summary-wrapper,
.s-cart-drawer,
.s-cart-modal,
.s-modal,
[class*="cart-summary"],
[class*="cart-drawer"],
[class*="cart-modal"],
[class*="cart-popup"] {
  z-index: 999999 !important;
  position: fixed !important;
}

/* Force dark overlay backdrop to sit over header but behind popup */
salla-modal-bg,
.s-modal-bg,
.s-cart-summary__overlay,
[class*="modal-backdrop"],
[class*="overlay"] {
  z-index: 999998 !important;
  position: fixed !important;
  inset: 0 !important;
}


/* -----------------------------------------------------------------
   2. Desktop Info Box Alignment (PC-Only min-width: 1024px)
   ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  #628546074, 
  custom-salla-product-card {
    position: relative !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 40px auto !important;
  }

  #framer-absolute-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: right !important;
    background-color: #a7f3d0 !important;
    padding: 32px !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 410px !important;
    width: 420px !important;
    z-index: 50 !important;
  }

  #framer-absolute-box .box-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
  }

  #framer-absolute-box .pills-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #framer-absolute-box .info-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    transition: transform 0.2s ease !important;
  }

  #framer-absolute-box .info-pill:hover {
    transform: translateY(-2px) !important;
  }

  #framer-absolute-box .info-pill.span-full {
    grid-column: span 2 !important;
  }

  #framer-absolute-box .info-icon {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }

  #framer-absolute-box .card-yellow { background-color: #fef08a !important; color: #713f12 !important; }
  #framer-absolute-box .card-peach  { background-color: #ffedd5 !important; color: #7c2d12 !important; }
  #framer-absolute-box .card-pink   { background-color: #fbcfe8 !important; color: #831843 !important; }
  #framer-absolute-box .card-mint   { background-color: #d1fae5 !important; color: #065f46 !important; }
}

@media (max-width: 1023px) {
  #framer-absolute-box {
    display: none !important;
  }
}
/* Lower Header Stacking Context */
header, 
.s-header, 
.header-wrapper, 
.top-navbar {
  z-index: 100 !important;
  position: relative !important;
}

/* Force Cart Modal & Backdrop to absolute top layer */
salla-modal,
salla-cart-summary,
.s-cart-summary,
.s-cart-summary-wrapper,
.s-cart-drawer,
.s-cart-modal,
.s-modal,
[class*="cart-summary"],
[class*="cart-drawer"],
[class*="cart-modal"],
[class*="cart-popup"] {
  z-index: 9999999 !important;
  position: fixed !important;
}

salla-modal-bg,
.s-modal-bg,
.s-cart-summary__overlay,
[class*="modal-backdrop"],
[class*="overlay"] {
  z-index: 9999998 !important;
  position: fixed !important;
  inset: 0 !important;
}

/* Desktop Info Box Alignment (PC-Only min-width: 1024px) */
@media (min-width: 1024px) {
  #628546074, 
  custom-salla-product-card {
    position: relative !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 40px auto !important;
  }

  #framer-absolute-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: right !important;
    background-color: #a7f3d0 !important;
    padding: 32px !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 410px !important;
    width: 420px !important;
    z-index: 50 !important;
  }

  #framer-absolute-box .box-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
  }

  #framer-absolute-box .pills-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #framer-absolute-box .info-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    transition: transform 0.2s ease !important;
  }

  #framer-absolute-box .info-pill:hover {
    transform: translateY(-2px) !important;
  }

  #framer-absolute-box .info-pill.span-full {
    grid-column: span 2 !important;
  }

  #framer-absolute-box .info-icon {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }

  #framer-absolute-box .card-yellow { background-color: #fef08a !important; color: #713f12 !important; }
  #framer-absolute-box .card-peach  { background-color: #ffedd5 !important; color: #7c2d12 !important; }
  #framer-absolute-box .card-pink   { background-color: #fbcfe8 !important; color: #831843 !important; }
  #framer-absolute-box .card-mint   { background-color: #d1fae5 !important; color: #065f46 !important; }
}

@media (max-width: 1023px) {
  #framer-absolute-box {
    display: none !important;
  }
}
/* Hide sticky bottom order bar on scroll */
salla-sticky-product-bar,
.s-sticky-product-bar,
.product-sticky-bar,
[class*="sticky-product"],
[class*="sticky-add-to-cart"],
[class*="sticky-bar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Hide product details, titles, badges, and buy button while keeping the image intact */

/* Ensure the main product image stays completely visible */
#628546074 img,
#628546074 .product-entry__image,
custom-salla-product-card img,
custom-salla-product-card .product-entry__image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Lower Header Stacking Context */
header, 
.s-header, 
.header-wrapper, 
.top-navbar {
  z-index: 100 !important;
  position: relative !important;
}

/* Force Cart Modal & Backdrop to absolute top layer */
salla-modal,
salla-cart-summary,
.s-cart-summary,
.s-cart-summary-wrapper,
.s-cart-drawer,
.s-cart-modal,
.s-modal,
[class*="cart-summary"],
[class*="cart-drawer"],
[class*="cart-modal"],
[class*="cart-popup"] {
  z-index: 9999999 !important;
  position: fixed !important;
}

salla-modal-bg,
.s-modal-bg,
.s-cart-summary__overlay,
[class*="modal-backdrop"],
[class*="overlay"] {
  z-index: 9999998 !important;
  position: fixed !important;
  inset: 0 !important;
}

/* Hide sticky bottom order bar on scroll */
salla-sticky-product-bar,
.s-sticky-product-bar,
.product-sticky-bar,
[class*="sticky-product"],
[class*="sticky-add-to-cart"],
[class*="sticky-bar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide product text, badges, and buy buttons while isolating the image */
#628546074 > *:not(:has(img)),
custom-salla-product-card > *:not(:has(img)),
#628546074 .product-entry__content,
#628546074 .s-product-card-content,
#628546074 salla-add-to-cart-button,
custom-salla-product-card .product-entry__content,
custom-salla-product-card .s-product-card-content,
custom-salla-product-card salla-add-to-cart-button {
  display: none !important;
}

/* Force product image to remain fully visible */
#628546074 img,
#628546074 .product-entry__image,
custom-salla-product-card img,
custom-salla-product-card .product-entry__image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Desktop Info Box Alignment (PC-Only min-width: 1024px) */
@media (min-width: 1024px) {
  #628546074, 
  custom-salla-product-card {
    position: relative !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 40px auto !important;
  }

  #framer-absolute-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: right !important;
    background-color: #a7f3d0 !important;
    padding: 32px !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 410px !important;
    width: 420px !important;
    z-index: 50 !important;
  }

  #framer-absolute-box .box-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
  }

  #framer-absolute-box .pills-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #framer-absolute-box .info-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    transition: transform 0.2s ease !important;
  }

  #framer-absolute-box .info-pill:hover {
    transform: translateY(-2px) !important;
  }

  #framer-absolute-box .info-pill.span-full {
    grid-column: span 2 !important;
  }

  #framer-absolute-box .info-icon {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }

  #framer-absolute-box .card-yellow { background-color: #fef08a !important; color: #713f12 !important; }
  #framer-absolute-box .card-peach  { background-color: #ffedd5 !important; color: #7c2d12 !important; }
  #framer-absolute-box .card-pink   { background-color: #fbcfe8 !important; color: #831843 !important; }
  #framer-absolute-box .card-mint   { background-color: #d1fae5 !important; color: #065f46 !important; }
}

@media (max-width: 1023px) {
  #framer-absolute-box {
    display: none !important;
  }
}
/* -----------------------------------------------------------------
   1. Lower Header Stacking Context & Fix Cart Modal Layering
   ----------------------------------------------------------------- */
header, 
.s-header, 
.header-wrapper, 
.top-navbar {
  z-index: 100 !important;
  position: relative !important;
}

salla-modal,
salla-cart-summary,
.s-cart-summary,
.s-cart-summary-wrapper,
.s-cart-drawer,
.s-cart-modal,
.s-modal,
[class*="cart-summary"],
[class*="cart-drawer"],
[class*="cart-modal"],
[class*="cart-popup"] {
  z-index: 9999999 !important;
  position: fixed !important;
}

salla-modal-bg,
.s-modal-bg,
.s-cart-summary__overlay,
[class*="modal-backdrop"],
[class*="overlay"] {
  z-index: 9999998 !important;
  position: fixed !important;
  inset: 0 !important;
}

/* -----------------------------------------------------------------
   2. Hide Sticky Bottom Order Bar on Scroll
   ----------------------------------------------------------------- */
salla-sticky-product-bar,
.s-sticky-product-bar,
.product-sticky-bar,
[class*="sticky-product"],
[class*="sticky-add-to-cart"],
[class*="sticky-bar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* -----------------------------------------------------------------
   3. Desktop Info Box Alignment (PC-Only min-width: 1024px)
   ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  #628546074, 
  custom-salla-product-card {
    position: relative !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 40px auto !important;
  }

  #framer-absolute-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: right !important;
    background-color: #a7f3d0 !important;
    padding: 32px !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 410px !important;
    width: 420px !important;
    z-index: 50 !important;
  }

  #framer-absolute-box .box-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
  }

  #framer-absolute-box .pills-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #framer-absolute-box .info-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    transition: transform 0.2s ease !important;
  }

  #framer-absolute-box .info-pill:hover {
    transform: translateY(-2px) !important;
  }

  #framer-absolute-box .info-pill.span-full {
    grid-column: span 2 !important;
  }

  #framer-absolute-box .info-icon {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }

  #framer-absolute-box .card-yellow { background-color: #fef08a !important; color: #713f12 !important; }
  #framer-absolute-box .card-peach  { background-color: #ffedd5 !important; color: #7c2d12 !important; }
  #framer-absolute-box .card-pink   { background-color: #fbcfe8 !important; color: #831843 !important; }
  #framer-absolute-box .card-mint   { background-color: #d1fae5 !important; color: #065f46 !important; }
}

@media (max-width: 1023px) {
  #framer-absolute-box {
    display: none !important;
  }
}
/* Restore product card container, background gradient, and padding buffer */
#628546074,
custom-salla-product-card,
#628546074 .product-entry,
custom-salla-product-card .product-entry,
#628546074 [class*="wrapper"],
custom-salla-product-card [class*="wrapper"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: initial !important;
}
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@800;900&display=swap');

/* -----------------------------------------------------------------
   1. Lower Header Stacking Context & Fix Cart Modal Layering
   ----------------------------------------------------------------- */
header, 
.s-header, 
.header-wrapper, 
.top-navbar {
  z-index: 100 !important;
  position: relative !important;
}

salla-modal,
salla-cart-summary,
.s-cart-summary,
.s-cart-summary-wrapper,
.s-cart-drawer,
.s-cart-modal,
.s-modal,
[class*="cart-summary"],
[class*="cart-drawer"],
[class*="cart-modal"],
[class*="cart-popup"] {
  z-index: 9999999 !important;
  position: fixed !important;
}

salla-modal-bg,
.s-modal-bg,
.s-cart-summary__overlay,
[class*="modal-backdrop"],
[class*="overlay"] {
  z-index: 9999998 !important;
  position: fixed !important;
  inset: 0 !important;
}

/* -----------------------------------------------------------------
   2. Hide Sticky Bottom Order Bar on Scroll
   ----------------------------------------------------------------- */
salla-sticky-product-bar,
.s-sticky-product-bar,
.product-sticky-bar,
[class*="sticky-product"],
[class*="sticky-add-to-cart"],
[class*="sticky-bar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* -----------------------------------------------------------------
   3. Restore Product Card Container, Background & Gradient Buffer
   ----------------------------------------------------------------- */
#628546074,
custom-salla-product-card,
#628546074 .product-entry,
custom-salla-product-card .product-entry,
#628546074 [class*="wrapper"],
custom-salla-product-card [class*="wrapper"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: initial !important;
}

/* -----------------------------------------------------------------
   4. Desktop Layout & Bigger Promo Title Styling (PC-Only min-width: 1024px)
   ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  #628546074, 
  custom-salla-product-card {
    position: relative !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 40px auto !important;
  }

  /* Make promo title bigger, bold, and positioned at the top */
  .custom-promo-title {
    font-family: 'Tajawal', system-ui, sans-serif !important;
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.2px !important;
    position: relative !important;
    top: -18px !important;
    margin-top: -10px !important;
    margin-bottom: 2px !important;
  }

  /* Desktop Floating Info Box */
  #framer-absolute-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: right !important;
    background-color: #a7f3d0 !important;
    padding: 32px !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 410px !important;
    width: 420px !important;
    z-index: 50 !important;
  }

  #framer-absolute-box .box-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
  }

  #framer-absolute-box .pills-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #framer-absolute-box .info-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    transition: transform 0.2s ease !important;
  }

  #framer-absolute-box .info-pill:hover {
    transform: translateY(-2px) !important;
  }

  #framer-absolute-box .info-pill.span-full {
    grid-column: span 2 !important;
  }

  #framer-absolute-box .info-icon {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }

  #framer-absolute-box .card-yellow { background-color: #fef08a !important; color: #713f12 !important; }
  #framer-absolute-box .card-peach  { background-color: #ffedd5 !important; color: #7c2d12 !important; }
  #framer-absolute-box .card-pink   { background-color: #fbcfe8 !important; color: #831843 !important; }
  #framer-absolute-box .card-mint   { background-color: #d1fae5 !important; color: #065f46 !important; }
}

@media (max-width: 1023px) {
  #framer-absolute-box {
    display: none !important;
  }
}
/* Fix product modal overlay grey-out and click blocking */
salla-modal,
salla-product-modal,
.s-modal,
.s-modal-wrapper,
.s-modal-dialog,
.s-modal-body,
[class*="modal-container"],
[class*="modal-content"],
[class*="product-modal"] {
  z-index: 99999999 !important;
  pointer-events: auto !important;
}

salla-modal-bg,
.s-modal-bg,
.s-cart-summary__overlay,
[class*="modal-backdrop"],
[class*="modal-overlay"] {
  z-index: 9999900 !important;
}
/* Force replacement image on all product card & gallery image tags */
salla-product-image img,
salla-slider img,
salla-product-card img,
custom-salla-product-card img,
.product-slider img,
.product-images img,
.product-entry img,
#628546074 img {
  content: url("https://cdn.files.salla.network/products/106580286/e3c0b34c-da91-4e3e-be95-be4e6bf2333b-original.webp") !important;
  object-fit: cover !important;
}

/* Force background image containers */
[style*="cdn.files.salla.network"]:not(#framer-absolute-box) {
  background-image: url("https://cdn.files.salla.network/products/106580286/e3c0b34c-da91-4e3e-be95-be4e6bf2333b-original.webp") !important;
}
/* Reduce vertical height and padding of Salla search bar */
salla-search,
.s-search,
.s-search-input-wrapper,
.s-search-input,
.search-bar,
.search-input {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Align text and input inside the smaller search container */
salla-search input,
.s-search-input input,
input[type="search"].s-search-input {
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px !important;
  line-height: 36px !important;
}

/* Keep search icons vertically centered inside the smaller box */
salla-search i,
salla-search [class*="icon"],
.s-search-icon {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
/* Reduce header/top-bar vertical padding and height by 25% */
header,
.site-header,
.main-header,
.top-header,
salla-header,
.s-header,
[class*="site-header"],
[class*="main-header"] {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: auto !important;
}

header .container,
.site-header .container,
.header-wrapper,
.s-header-wrapper,
[class*="header-wrapper"],
[class*="header-inner"],
[class*="header-container"] {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: auto !important;
}

/* Proportionally scale logo height */
header img,
.site-header img,
salla-header img,
.header-logo img,
[class*="logo"] img {
  max-height: 38px !important;
  width: auto !important;
}
/* Override Salla header height variables & Tailwind utility classes */
:root {
  --header-height: 50px !important;
}

header,
salla-header,
.site-header,
.main-header,
.header-wrapper,
.header-section,
[class*="header"],
[class*="navbar"] {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
  max-height: 55px !important;
}

/* Force inner flex/grid layout rows to shrink */
header > div,
salla-header > div,
.site-header > div,
.header-wrapper > div,
[class*="header"] > div,
[class*="navbar"] > div {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Scale logo down proportionately */
header img,
salla-header img,
[class*="header"] img,
[class*="logo"] img {
  max-height: 30px !important;
  width: auto !important;
}
/* Force Salla wrappers to transparent so background renders through */
html,
body,
#app,
.main-content,
.page-wrapper,
salla-content,
[class*="content-wrapper"] {
  background: transparent !important;
  background-color: transparent !important;
}
/* Force Salla theme root background variables */
:root {
  --bg-main: #C1B487 !important;
  --color-bg: #C1B487 !important;
  --body-bg: #C1B487 !important;
}

/* Multi-layered organic wave gradient from Top Right to Bottom Left */
html,
body,
#app,
.s-body,
.main-content,
.page-wrapper,
salla-content {
  background-color: #EE9878 !important;
  background-image: 
    /* Top Right: Sage Gold Wave */
    radial-gradient(ellipse 130% 70% at 100% -10%, #C1B487 0%, #C1B487 50%, transparent 75%),
    
    /* Middle: Peach Sand Squiggle Blend */
    radial-gradient(ellipse 110% 65% at 55% 45%, #EAB299 0%, #EAB299 45%, transparent 75%),
    
    /* Bottom Left: Terracotta Coral Wave Base */
    radial-gradient(ellipse 140% 80% at 0% 110%, #EE9878 0%, #EE9878 60%, transparent 85%),
    
    /* Diagonal flow blend */
    linear-gradient(225deg, #C1B487 0%, #EAB299 50%, #EE9878 100%) !important;
  
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Make content containers transparent so the page-wide gradient flows through */
html,
body,
#app,
.s-body,
.main-content,
.page-wrapper,
salla-content,
section {
  background-color: transparent !important;
  background-image: none !important;
}

/* Page-length flowing gradient: Sage Gold (Top) -> Peach (Middle) -> Terracotta (Bottom) */
html,
body {
  min-height: 100vh !important;
  background: linear-gradient(
    205deg,
    #C1B487 0%,
    #C1B487 28%,
    #EAB299 45%,
    #EAB299 68%,
    #EE9878 85%,
    #EE9878 100%
  ) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
}
/* Force all default Salla containers to transparent so background shows through */
html,
body,
#app,
.s-body,
.main-content,
.page-wrapper,
salla-content,
section,
main,
header,
footer {
  background: transparent !important;
  background-color: transparent !important;
}

/* Fixed full-screen squiggly wave background (Top-Right to Bottom-Left) */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  background-color: #EE9878 !important; /* Bottom-left base: Terracotta Coral */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1000,0 L1000,750 Q700,500 450,750 T0,550 Z' fill='%23EAB299'/%3E%3Cpath d='M250,0 L1000,0 L1000,450 Q750,250 500,420 T200,0 Z' fill='%23C1B487'/%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Ensure content layers stay transparent over the background */
html,
body,
#app,
.s-body,
.main-content,
.page-wrapper,
salla-content,
section,
main,
header,
footer {
  background: transparent !important;
  background-color: transparent !important;
}

/* Full-screen squiggly wave background with blended color transitions */
body::before {
  content: "" !important;
  position: fixed !important;
  top: -4% !important;
  left: -4% !important;
  width: 108vw !important;
  height: 108vh !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  background-color: #EE9878 !important; /* Bottom-Left: Terracotta Coral */
  
  /* Organic SVG wavy paths with embedded soft-blur filter */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='blend' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='22' /%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23blend)'%3E%3Cpath d='M0,0 L1000,0 L1000,800 Q720,520 420,780 T0,580 Z' fill='%23F7A4B9'/%3E%3Cpath d='M220,0 L1000,0 L1000,480 Q720,220 480,420 T180,0 Z' fill='%23C1B487'/%3E%3C/g%3E%3C/svg%3E") !important;
  
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: blur(12px) !important; /* Extra CSS smooth-blend pass */
  transform: scale(1.05) !important; /* Prevents edge bleeding */
}
/* Reset theme variables */
:root {
  --bg-main: #C3EADB !important;
  --color-bg: #C3EADB !important;
  --body-bg: #C3EADB !important;
}

/* Clear pseudo-element overlays */
body::before,
body::after {
  display: none !important;
  content: none !important;
}

/* Full-viewport subtle mint gradient */
html,
body {
  min-height: 100vh !important;
  background: linear-gradient(
    140deg,
    #DCF8 0%,   /* Lighter mint highlight */
    #C3EADB 48%,  /* Original mint base */
    #A6DEC7 100%  /* Slightly deeper mint shadow */
  ) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Ensure inner wrappers remain transparent for background flow */
#app,
.s-body,
.main-content,
.page-wrapper,
salla-content,
section,
main,
footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Reset theme variables to ultra-light mint green */
:root {
  --bg-main: #EAF8F2 !important;
  --color-bg: #EAF8F2 !important;
  --body-bg: #EAF8F2 !important;
}

/* Clear pseudo-element background overlays */
body::before,
body::after {
  display: none !important;
  content: none !important;
}

/* Set solid light mint green across all page wrappers */
html,
body,
#app,
.s-body,
.main-content,
.page-wrapper,
salla-content,
section,
main,
footer {
  background-color: #EAF8F2 !important;
  background-image: none !important;
}

/* Apply deep pink frame border to product image boxes & cards */
salla-product-image,
salla-product-card,
custom-salla-product-card,
.product-slider,
.product-images,
.product-entry,
.product-card,
#628546074,
.product-entry__image,
.product-details__gallery {
  border: 3.5px solid #E5457A !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(229, 69, 122, 0.15) !important;
}

/* Ensure images fit cleanly inside the pink frame */
salla-product-image img,
salla-product-card img,
custom-salla-product-card img,
.product-slider img,
.product-images img,
.product-entry img {
  border-radius: 14px !important;
}
/* Ensure the targeted replaced image scales properly */
.custom-replaced-banner-img,
[data-src*="106580286"] {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}
/* Direct target for the Framer Hero background image */
html body #framer-root .framer-hero,
html body .framer-hero,
#framer-root .framer-hero {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(234, 248, 242, 0.85) 75%,
    #EAF8F2 100%
  ),
  url("https://cdn.files.salla.network/other/106580286/eb883203-a1f9-473f-bff9-e5e1db1c9e92-original.webp") !important;
  background-position: top center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Add a small #fbacea outline around image boxes and the hero container */
.framer-hero,
.product-card img,
salla-product-card img,
.s-block--banner img,
[class*="banner"] img {
  outline: 2px solid #fbacea !important;
  outline-offset: -2px !important;
}

/* For rounded image wrappers or containers */
.framer-hero {
  border: 2px solid #fbacea !important;
}
/* Move the mint green fade to the top of the Framer Hero box */
html body #framer-root .framer-hero,
html body .framer-hero,
#framer-root .framer-hero {
  background-image: linear-gradient(
    to bottom,
    #EAF8F2 0%,
    rgba(234, 248, 242, 0.85) 25%,
    rgba(0, 0, 0, 0) 65%,
    rgba(0, 0, 0, 0.35) 100%
  ),
  url("https://cdn.files.salla.network/other/106580286/eb883203-a1f9-473f-bff9-e5e1db1c9e92-original.webp") !important;
  background-position: top center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Add #fbacea outline to the four placeholder boxes */
.grid-cols-4 .bg-white,
.s-block--twelve-cols .bg-white,
.box-placeholder,
.skeleton,
[class*="col-"] .bg-white {
  outline: 3px solid #fbacea !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
}

/* Ensure smooth rounded corners match the outline */
.grid-cols-4 .bg-white,
.s-block--twelve-cols .bg-white {
  border-radius: 28px !important;
}
/* Add #fbacea outline and match the rounded corners for the gallery items */
#framer-lengthy-gallery .framer-lengthy-item,
.framer-lengthy-item {
  border: 3px solid #fbacea !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* Stretch #fbacea background edge-to-edge behind the reviews section */
.framer-reviews {
  position: relative !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -40px !important;
  bottom: -40px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* Force reviews to stack vertically in a clean line */
.framer-reviews {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.framer-reviews > * {
  width: 100% !important;
  max-width: 100% !important;
}
/* Stretch #fbacea background edge-to-edge, extending higher up and shorter at the bottom */
.framer-reviews {
  position: relative !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -85px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* Force reviews to stack vertically in a clean line */
.framer-reviews {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.framer-reviews > * {
  width: 100% !important;
  max-width: 100% !important;
}
/* Pull the top extension back down a bit, keeping the bottom locked */
.framer-reviews {
  position: relative !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* Force reviews to stack vertically in a clean line */
.framer-reviews {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.framer-reviews > * {
  width: 100% !important;
  max-width: 100% !important;
}
/* Edge-to-edge #fbacea background */
.framer-reviews {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* Force light pink and shadow, clearing Framer's hardcoded white inner backgrounds */
.framer-reviews > * {
  background-color: #fff5f8 !important;
  box-shadow: 0 4px 15px rgba(229, 69, 122, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.framer-reviews > * div {
  background-color: transparent !important;
}
/* Edge-to-edge #fbacea background wrapper */
.framer-reviews {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}
/* 1. Reviews Section: Edge-to-edge #fbacea background + modern cards */
.framer-reviews {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -35px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

.framer-reviews > * {
  background-color: #ffffff !important;
  border: 1px solid rgba(229, 69, 122, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(229, 69, 122, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* 2. FAQ Section: Edge-to-edge #ffc09f background */
.framer-faq {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-faq::before {
  content: "" !important;
  position: absolute !important;
  top: -65px !important; /* Brought the top down a teensy bit */
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #ffc09f !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}
/* 1. Reviews Section: Edge-to-edge #fbacea background + modern cards */
.framer-reviews {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -35px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

.framer-reviews > * {
  background-color: #ffffff !important;
  border: 1px solid rgba(229, 69, 122, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(229, 69, 122, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* 2. FAQ Section: Edge-to-edge #ffc09f background */
.framer-faq {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-faq::before {
  content: "" !important;
  position: absolute !important;
  top: -65px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #ffc09f !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* 3. Product Section Background - Fixed height wrapper */
.salla-product-slider, 
.product-slider, 
.salla-product-block {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.salla-product-slider::before, 
.product-slider::before, 
.salla-product-block::before {
  content: "" !important;
  position: absolute !important;
  top: -15px !important;
  height: calc(100% + 30px) !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #e8f4fd !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* 4. Product Card & Image Box locked to 500x300px */
.salla-product-card, 
.product-card, 
.product-entry {
  width: 500px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.salla-product-card img,
.product-card img,
.product-entry img,
.salla-product-slider img {
  width: 500px !important;
  max-width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}
/* 1. Reviews Section: Edge-to-edge #fbacea background + modern cards */
.framer-reviews {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -35px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #fbacea !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

.framer-reviews > * {
  background-color: #ffffff !important;
  border: 1px solid rgba(229, 69, 122, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(229, 69, 122, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* 2. FAQ Section: Edge-to-edge #ffc09f background */
.framer-faq {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-faq::before {
  content: "" !important;
  position: absolute !important;
  top: -65px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #ffc09f !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* 3. Product Section Background - Fixed height wrapper */
.salla-product-slider, 
.product-slider, 
.salla-product-block {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.salla-product-slider::before, 
.product-slider::before, 
.salla-product-block::before {
  content: "" !important;
  position: absolute !important;
  top: -15px !important;
  height: calc(100% + 30px) !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #e8f4fd !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* 4. Product Card & Image Box locked to 500x300px */
.salla-product-card, 
.product-card, 
.product-entry {
  width: 500px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.salla-product-card img,
.product-card img,
.product-entry img,
.salla-product-slider img {
  width: 500px !important;
  max-width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 5. Lengthy Gallery Items Sized to 160.5px x 214px */
#framer-lengthy-gallery, 
.framer-lengthy-gallery {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
/* 1. Reviews Section: Edge-to-edge #fbacea background + modern cards */
.framer-reviews {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-reviews::before {
  content: "" !important;
  position: absolute !important;
  top: -50px !important;
  bottom: -35px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #EAF5F1 !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

.framer-reviews > * {
  background-color: #ffffff !important;
  border: 1px solid rgba(229, 69, 122, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(229, 69, 122, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* 2. FAQ Section: Edge-to-edge #ffc09f background */
.framer-faq {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.framer-faq::before {
  content: "" !important;
  position: absolute !important;
  top: -65px !important;
  bottom: -10px !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #EAF5F1 !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* 3. Product Section Background - Fixed height wrapper */
.salla-product-slider, 
.product-slider, 
.salla-product-block {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.salla-product-slider::before, 
.product-slider::before, 
.salla-product-block::before {
  content: "" !important;
  position: absolute !important;
  top: -15px !important;
  height: calc(100% + 30px) !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  background-color: #e8f4fd !important;
  z-index: -1 !important;
  border-radius: 0 !important;
}

/* 4. Product Card & Image Box locked to 500x300px */
.salla-product-card, 
.product-card, 
.product-entry {
  width: 500px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.salla-product-card img,
.product-card img,
.product-entry img,
.salla-product-slider img {
  width: 500px !important;
  max-width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}
/* 1. Disable Salla's conflicting native overlay */
body.menu-is-open .overlay-layer,
.overlay-layer {
  display: none !important;
}

/* 2. Render a clean grey backdrop at the root level (goes UNDER the menu) */
body.menu-is-open::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  z-index: 99998 !important;
  pointer-events: auto !important;
}

/* 3. Force the menu drawer to sit strictly on top with full interactivity */
body.menu-is-open salla-sidebar,
body.menu-is-open .salla-sidebar,
body.menu-is-open [class*="sidebar"],
body.menu-is-open [class*="menu-drawer"] {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}
.framer-faq .faq-item {
  background-color: #f0e6ea !important;
}
.faq-item {
  border-radius: 16px !important;
}
.review-box {
  background-color: #f0e6ea !important;
}