/* ============================================================
   LUMIÈRE ORNE — FINAL STORE CSS  (v3)
   Paste ALL of this in Salla's Custom CSS box (replace old).
   Bilingual store (AR default + EN). No JavaScript needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Jost:wght@300;400;500&family=Tajawal:wght@300;400;500;700&display=swap');

/* ---------- Brand tokens ---------- */
:root{
  --lo-porcelain:#FBFAF8;
  --lo-mist:#ECE8E2;
  --lo-powder:#AED8E0;
  --lo-powder-deep:#6FA7B0;
  --lo-ink:#20201F;
  --lo-soft-ink:#75736E;
  --lo-gold:#C2A45B;
  --lo-night:#171715;
}

/* ============ 1) TYPOGRAPHY ============ */
body, .s-block, p, span, a, li, div, input, textarea, button{ font-family:"Tajawal", sans-serif; }
body{ background:var(--lo-porcelain) !important; color:var(--lo-ink) !important; }
h1,h2,h3,h4,.section-title,.title{
  font-family:"Cormorant Garamond", serif !important;
  font-weight:600 !important; letter-spacing:.02em; color:var(--lo-ink) !important;
}
a{ transition:color .3s; }
a:hover{ color:var(--lo-powder-deep) !important; }
::selection{ background:rgba(174,216,224,.5); }

/* ============ 2) HEADER ============ */
header, .s-header, #mainnav{
  background:#FFFFFF !important; border-bottom:1px solid var(--lo-mist) !important; box-shadow:none !important;
}
header .logo img, .s-header .logo img{ filter:grayscale(1) contrast(.92); }
header a, .s-header a{ color:var(--lo-ink) !important; }
header a:hover{ color:var(--lo-powder-deep) !important; }

/* ============ 3) SIDE MENU / PANEL ============ */
#mobile-menu, .s-mobile-menu, .mobile-menu{
  background:var(--lo-porcelain) !important;
  box-shadow:0 30px 60px -40px rgba(40,40,40,.4);
}
#mobile-menu a, .s-mobile-menu a, .mobile-menu a{
  position:relative; color:var(--lo-ink) !important; font-size:16px !important;
  padding:14px 24px !important; text-decoration:none !important;
  overflow:hidden; transition:color .35s, padding .4s !important;
}
#mobile-menu a::before, .s-mobile-menu a::before, .mobile-menu a::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to left, rgba(174,216,224,.42), transparent 70%);
  transform:translateX(-100%); transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
#mobile-menu a:hover, .s-mobile-menu a:hover, .mobile-menu a:hover{
  color:var(--lo-powder-deep) !important; padding-right:34px !important;
}
#mobile-menu a:hover::before, .mobile-menu a:hover::before{ transform:translateX(0); }
#mobile-menu a > *, .mobile-menu a > *{ position:relative; z-index:1; }
#mobile-menu li, .s-mobile-menu li, .mobile-menu li{
  border-bottom:1px solid transparent !important;
  background:
    linear-gradient(var(--lo-porcelain),var(--lo-porcelain)) padding-box,
    linear-gradient(to left, transparent, var(--lo-gold), transparent) border-box !important;
}

/* ============ 4) MENU BUTTON — three dashes (☰) — MOBILE ONLY ============ */
/* Hidden on desktop (≥992px) where the horizontal nav shows */
@media (min-width:992px){
  a[href="#mobile-menu"]{ display:none !important; }
}
/* Kept + styled on mobile (<992px) */
@media (max-width:991px){
  a[href="#mobile-menu"]{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:44px; height:44px; position:relative;
    font-size:0 !important; color:transparent !important;
  }
  a[href="#mobile-menu"]::before{
    content:""; position:absolute; top:50%; left:50%;
    width:22px; height:1.6px; background:var(--lo-ink);
    transform:translate(-50%,-50%);
    box-shadow:0 -7px 0 var(--lo-ink), 0 7px 0 var(--lo-ink);
  }
  a[href="#mobile-menu"]:hover::before{
    background:var(--lo-powder-deep);
    box-shadow:0 -7px 0 var(--lo-powder-deep), 0 7px 0 var(--lo-powder-deep);
  }
}

/* ============ 5) BUTTONS + white add-to-cart label ============ */
.btn, .btn-primary, button.add-to-cart, .s-button-primary, salla-button, .button--primary{
  background:var(--lo-ink) !important; border:none !important; border-radius:2px !important;
  letter-spacing:.06em; font-weight:500 !important;
  transition:background .35s, transform .2s !important;
}
.btn, .btn *, .btn-primary, .btn-primary *,
.s-button-primary, .s-button-primary *,
button.add-to-cart, button.add-to-cart *,
salla-add-product-button, salla-add-product-button *,
.button--primary, .button--primary *{
  color:#fff !important; fill:#fff !important;
}
.btn:hover, .btn-primary:hover, button.add-to-cart:hover, .s-button-primary:hover, .button--primary:hover{
  background:var(--lo-powder-deep) !important; transform:translateY(-1px);
}
.btn-outline, .button--outline, .btn-light{
  background:transparent !important; border:1px solid var(--lo-gold) !important; border-radius:2px !important;
}
.btn-outline, .btn-outline *, .button--outline, .btn-light{ color:var(--lo-ink) !important; }

/* ============ 6) PRODUCT CARDS (image zoom + wishlist) ============ */
.product-entry, .s-product-card-entry, .product-card{
  background:#fff !important; border:1px solid var(--lo-mist) !important;
  border-radius:3px !important; box-shadow:none !important;
  transition:transform .4s, box-shadow .4s !important; overflow:hidden;
}
.product-entry:hover, .s-product-card-entry:hover, .product-card:hover{
  transform:translateY(-4px) !important; box-shadow:0 18px 40px -28px rgba(40,40,40,.45) !important;
}
.s-product-card-image, .product-entry .image-wrap, .product-card figure{ overflow:hidden; }
.s-product-card-image img, .product-entry img, .product-card img{
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.product-entry:hover img, .s-product-card-entry:hover img, .product-card:hover img{ transform:scale(1.06); }
.product-entry .title, .s-product-card-content h3, .product-card .title{
  font-family:"Tajawal", sans-serif !important; font-weight:400 !important; letter-spacing:.01em;
}
.product-entry .price, .s-product-card-price, .product-card .price{ color:var(--lo-ink) !important; font-weight:500 !important; }
.s-product-card-wishlist-btn, .product-entry .wishlist-btn, [class*="wishlist"] button{
  border:1px solid var(--lo-mist) !important; border-radius:50% !important; transition:.3s !important;
}
.s-product-card-wishlist-btn:hover, [class*="wishlist"] button:hover{
  border-color:var(--lo-gold) !important; color:var(--lo-gold) !important;
}
.s-product-card-promotion-title, .product-entry .badge, .sale-badge{
  background:var(--lo-gold) !important; color:#fff !important; border-radius:2px !important; letter-spacing:.04em;
}

/* ============ 7) SECTION TITLES ============ */
.section-title, .s-block-title, .home-section-title{ position:relative; padding-bottom:14px; }
.section-title::after, .s-block-title::after, .home-section-title::after{
  content:""; display:block; width:46px; height:1px; margin-top:12px;
  background:linear-gradient(to left, var(--lo-gold), transparent);
}

/* ============ 8) FEATURE CARDS ============ */
.feature, .features-item, .s-features-item{
  background:#fff !important; border:1px solid var(--lo-mist) !important;
  border-radius:4px !important; position:relative; overflow:hidden;
  transition:transform .4s, box-shadow .4s, border-color .4s !important;
}
.feature::after, .features-item::after, .s-features-item::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background:linear-gradient(to right,transparent,var(--lo-gold),transparent);
  transform:translateX(-50%); transition:width .5s;
}
.feature:hover, .features-item:hover, .s-features-item:hover{
  transform:translateY(-5px); box-shadow:0 20px 45px -30px rgba(40,40,40,.5); border-color:transparent !important;
}
.feature:hover::after, .features-item:hover::after, .s-features-item:hover::after{ width:70%; }
.feature i, .features-item i, .s-features-item i,
.feature svg, .features-item svg, .s-features-item svg{ color:#3f6870 !important; stroke:#3f6870 !important; }

/* ============ 9) FOOTER — dark luxe ============ */
footer, .s-footer{ position:relative; }
footer::before, .s-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to left,transparent,var(--lo-gold),transparent); opacity:.5;
}
footer h3, footer h4, .s-footer h3, .s-footer h4, .footer-title{
  color:#fff !important; letter-spacing:.12em; position:relative; padding-bottom:10px;
}
footer h3::after, footer h4::after, .footer-title::after{
  content:""; position:absolute; right:0; bottom:0; width:26px; height:1px; background:var(--lo-gold);
}
footer a, .s-footer a{ color:#a7a49e !important; transition:color .3s, padding .3s; }
footer a:hover, .s-footer a:hover{ color:var(--lo-gold) !important; padding-right:5px; }
footer .social a, footer [class*="social"] a{ border:1px solid #333 !important; border-radius:50% !important; transition:.35s; }
footer .social a:hover, footer [class*="social"] a:hover{ border-color:var(--lo-gold) !important; color:var(--lo-gold) !important; }

/* ============ 10) INPUTS / SCROLLBAR / MISC ============ */
input, textarea, select{ border:1px solid var(--lo-mist) !important; border-radius:2px !important; background:#fff !important; }
input:focus, textarea:focus, select:focus{ border-color:var(--lo-gold) !important; outline:none !important; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:var(--lo-mist); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--lo-powder-deep); }