/* ============================================================================
   Le Bonheur — Luxury CSS for Salla theme "Raed" (رائد)
   Built on the REAL Raed class names from the official theme source.
   Paste into: تخصيص متقدم → تخصيص باستخدام CSS  (replace everything).
   ============================================================================ */

/* 1) Fonts — IBM Plex Sans Arabic (Floward-like: one calm modern family for everything) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* 2) Brand tokens — Raed reads --color-primary everywhere */
:root{
  --color-primary:#7d562d;          /* deep gold */
  --color-primary-d:#6a4826;
  --color-primary-l:#96703f;
  --color-primary-reverse:#ffffff;
  --color-text:#50453b;             /* warm muted text */
  --main-text-color:#1f1c18;
  --bg-gray:#f6f2ec;

  --lb-gold:#d4a373;                /* champagne */
  --lb-sage:#6f7d75;                /* sage from the logo */
  --lb-sage-soft:#e7ece9;
  --lb-paper:#faf9f6;
  --lb-line:#e2d7c8;
  --lb-shadow:0 12px 32px -12px rgba(125,86,45,.18);
  --lb-shadow-lg:0 24px 56px -16px rgba(125,86,45,.28);
}

/* 3) Base */
body{
  background:var(--lb-paper);
  font-family:'IBM Plex Sans Arabic',sans-serif;
  color:var(--main-text-color);
  -webkit-font-smoothing:antialiased;
}

/* Headings — same family, heavier weight (Floward-style consistency) */
h1,h2,h3,h4{ font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:600; }

/* 4) HERO — big white title with soft shadow (fixes unreadable title) */
.s-block--hero-slider .home-slider__content h2{
  color:#ffffff !important;
  font-size:clamp(2rem,5vw,3.4rem);
  text-shadow:0 3px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
  letter-spacing:.01em;
}
.s-block--hero-slider .home-slider__content p{
  color:#f5f1ea !important;
  font-size:clamp(.95rem,1.6vw,1.2rem);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  font-family:'IBM Plex Sans Arabic',sans-serif;
}
/* soften the dark overlay a touch (Raed default is 60% black) */
.s-block--hero-slider .swiper-slide .overlay-bg:after{
  background:linear-gradient(180deg,rgba(20,18,15,.35) 0%,rgba(20,18,15,.55) 100%);
}

/* 5) Section titles — boutique look with a gold underline */
.s-block__title h2{
  font-size:1.6rem;
  color:var(--main-text-color);
  padding-bottom:.55rem;
  position:relative;
}
.s-block__title h2:after{
  content:'';
  position:absolute;
  bottom:0;
  inset-inline-start:0;
  width:56px;
  height:2px;
  background:linear-gradient(90deg,var(--color-primary),var(--lb-gold));
  border-radius:2px;
}
.s-block__display-all{ color:var(--color-primary); }

/* 6) Buttons — pill + champagne feel */
.btn{
  border-radius:9999px !important;
  letter-spacing:.02em;
  box-shadow:var(--lb-shadow);
}
.btn:hover{ opacity:1; filter:brightness(1.07); }
salla-button::part(button){ border-radius:9999px; }

/* 7) Product cards — soft, airy, luxury */
.s-product-card{
  border-radius:18px !important;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--lb-line);
  box-shadow:var(--lb-shadow);
  transition:transform .35s ease, box-shadow .35s ease;
}
.s-product-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--lb-shadow-lg);
}
.s-product-card-image img{ transition:transform .6s ease; }
.s-product-card:hover .s-product-card-image img{ transform:scale(1.04); }

/* 8) Store features (the 3 cards) — sage circles + soft cards */
.s-block--features__item{
  background:#fff;
  border:1px solid var(--lb-line);
  border-radius:18px;
  box-shadow:var(--lb-shadow);
  padding:2rem 1.25rem;
  transition:transform .3s ease;
}
.s-block--features__item:hover{ transform:translateY(-4px); }
.s-block--features__item .feature-icon{
  background:var(--lb-sage) !important;
  box-shadow:0 8px 20px -8px rgba(111,125,117,.5);
}
.s-block--features__item h2{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1rem; font-weight:700; }

/* 9) Testimonials block — warm tint instead of flat grey */
.s-block--testimonials, [class*="testimonial"]{ background-color:transparent; }

/* 10) Footer — sage green boutique footer */
.store-footer{ background:var(--lb-sage) !important; }
.store-footer__inner{
  background:rgba(0,0,0,.08) !important;
  border-b-color:rgba(255,255,255,.12) !important;
}
.store-footer, .store-footer a, .store-footer h3, .store-footer p{ color:#f3f5f4; }
.store-footer .social-link{ border-color:rgba(255,255,255,.4); }
.store-footer .social-link:hover{ background:rgba(255,255,255,.12); opacity:1; }

/* 11) Inputs */
input,select,textarea{ border-radius:12px !important; }
input:focus,select:focus,textarea:focus{
  border-color:var(--color-primary) !important;
  box-shadow:0 0 0 1px var(--color-primary) !important;
}

/* 12) Header — clean & airy */
.store-header, header{ box-shadow:0 4px 24px -12px rgba(125,86,45,.12); }

/* 13) More breathing room between homepage sections */
.s-block{ margin-top:3.5rem; margin-bottom:3.5rem; }
.s-block--hero-slider{ margin-top:0; }