@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   SHAGHAF SKIN — هوية "Wood Echome" | من الفكرة إلى التنفيذ
   بنفسجي Wood Echome + لؤلؤي
   ============================================================ */

:root{
  --sh-pink:#261f1a;
  --sh-pink-2:#c39f72;
  --sh-pink-3:#C39F72;
  --sh-pink-soft:#e8dcc8;
  --sh-pink-mist:#f1e7db;
  --sh-cream:#F7EEE0;
  --sh-cream-2:#FFFFFF;
  --sh-sand:#F6F1EA;
  --sh-ink:#3a2f26;
  --sh-ink-soft:#7C6A54;
  --sh-line:rgba(38,31,26,.16);
  --sh-shadow:0 20px 44px -24px rgba(195,159,114,.35);
  --sh-radius:18px;

  /* ---- إعادة تلوين متغيرات الموقع الأساسية ---- */
  --pink:#e8dcc8;--pink2:#c39f72;--pink3:#261f1a;--pink-dark:#C39F72;
  --rose:#261f1a;--soft:#fdfbf7;--soft2:#F6F1EA;--soft3:#F6F1EA;
  --card:rgba(255,255,255,.9);--card2:rgba(255,255,255,.95);
  --border:rgba(38,31,26,.16);--border2:rgba(38,31,26,.32);
  --text:#3a2f26;--muted:#7C6A54;--muted2:#3a2f26;
  --bg:#F7EEE0;--bg2:#F5EBDC;--bg3:#EFE2CF;
  --sale:#261f1a;--sale-glow:rgba(38,31,26,.25);
  --rose-color:#261f1a;--rose-dark:#C39F72;
  --as-brand:#261f1a;--as-brand2:#c39f72;--as-soft:#FFFFFF;--as-line:rgba(38,31,26,.18);
}

/* ---------- خلفية الصفحة: بيج كريمي ناعم ---------- */
html,body{
  background:linear-gradient(180deg,#F8F0E3 0%,#F5EBDC 55%,#F2E6D5 100%) !important;
  background-attachment:fixed !important;
  color:var(--sh-ink) !important;
}
body::before{content:none !important}

/* ---------- الخطوط ---------- */
body,.nav-link,.p-desc,.faq-card-a-inner,.footer-link,input,textarea,select,button{
  font-family:'El Messiri','Baloo Bhaijaan 2',system-ui,sans-serif;
}
h1,h2,h3,.sec-title,.section-title,.cats-showcase-title,.faq-header-title,
.vr-hero-title,.hero-title,.p-name,.detail-name,.footer-brand,.cart-head-title,
.nav-logo-txt,.nav-logo-name{
  font-family:'Baloo Bhaijaan 2','El Messiri',sans-serif !important;
  letter-spacing:0 !important;
  font-weight:800 !important;
}

/* ---------- شريط التنقل ---------- */
.navbar{
  background:rgba(248,240,229,.92) !important;
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--sh-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset !important;
}
.nav-logo-txt,.nav-logo-name{color:var(--sh-pink) !important}
.nav-link{color:var(--sh-ink-soft) !important;font-weight:700}
.nav-link:hover,.nav-link.active{color:var(--sh-pink) !important}
.nav-link.active{border-bottom:2px solid var(--sh-pink)}
.nav-icon-btn,.nav-logout,.country-btn,.back-link,.btn-outline{
  background:transparent !important;
  border:1px solid var(--sh-line) !important;
  border-radius:14px !important;
  color:var(--sh-ink) !important;
  transition:.25s ease;
}
.nav-icon-btn:hover,.nav-logout:hover,.country-btn:hover,.back-link:hover{
  background:var(--sh-pink-mist) !important;border-color:var(--sh-pink) !important;color:var(--sh-pink) !important;
}
.nav-logo img,.loading-logo,.ls-logo{border-radius:12px !important;border:none !important;background:transparent !important}

/* ---------- الهيرو ---------- */
.hero,.vr-hero-luxe{
  background:transparent !important;
  border-bottom:1px solid var(--sh-line);
}
.vr-hero-luxe .hero-overlay,.vr-hero-luxe .hero-grid{display:none !important}
.vr-orb{display:none !important}
.vr-hero-eyebrow{
  font-family:'El Messiri',sans-serif !important;
  color:var(--sh-pink) !important;font-size:.74rem !important;letter-spacing:4px !important;
}
.vr-hero-title{
  background:none !important;-webkit-text-fill-color:currentColor !important;
  color:var(--sh-ink) !important;font-size:clamp(2rem,5vw,3.4rem) !important;
  letter-spacing:0 !important;line-height:1.5 !important;
}
.vr-hero-title em{
  font-style:normal !important;color:var(--sh-pink) !important;
  -webkit-text-fill-color:var(--sh-pink) !important;background:none !important;
  font-family:'Baloo Bhaijaan 2',sans-serif !important;font-weight:800 !important;
}
.vr-hero-line{
  width:120px !important;height:2px !important;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--sh-pink),transparent) !important;
}
.vr-hero-sub{color:var(--sh-ink-soft) !important;font-size:1.02rem !important;line-height:2}
.vr-hero-tags span{
  background:var(--sh-pink-mist) !important;border:1px solid var(--sh-line) !important;
  border-radius:999px !important;color:var(--sh-pink-3) !important;
  font-size:.78rem !important;padding:7px 14px !important;font-weight:700 !important;
}
.rf-hero-bullets{
  display:grid;gap:8px;justify-items:center;margin:18px auto 22px;max-width:520px;
  color:var(--sh-ink-soft);font-size:.88rem;line-height:1.9;
}
.rf-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.vr-hero-carousel{
  border-radius:26px !important;
  box-shadow:var(--sh-shadow) !important;
  border:1px solid var(--sh-pink-soft);
  outline:1px solid var(--sh-line);outline-offset:9px;
}
.hero-scroll span{color:var(--sh-pink) !important;opacity:.85}
.hero-scroll-line{background:linear-gradient(to bottom,var(--sh-pink),transparent) !important}

/* ---------- الأزرار ---------- */
.rf-btn,.p-cart-btn,.checkout-btn,.add-cart-btn,.btn-primary,.confirm-btn,.sort-btn.active,
.btn-add,.btn-submit,.btn-checkout,.detail-add-btn{
  border-radius:14px !important;letter-spacing:0 !important;font-weight:800 !important;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease !important;
}
.p-cart-btn,.checkout-btn,.add-cart-btn,.btn-primary,.confirm-btn,.rf-btn,
.btn-add,.btn-submit,.btn-checkout,.detail-add-btn{
  background:linear-gradient(135deg,#c39f72,#261f1a) !important;
  color:#fff !important;border:none !important;
  box-shadow:0 12px 26px -14px rgba(38,31,26,.75) !important;
}
.p-cart-btn:hover,.checkout-btn:hover,.add-cart-btn:hover,.btn-primary:hover,.rf-btn:hover,
.btn-add:hover,.btn-submit:hover,.btn-checkout:hover,.detail-add-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#261f1a,#C39F72) !important;
}
.rf-btn-ghost,.detail-cart-btn{
  background:#fff !important;color:var(--sh-pink) !important;
  border:1.6px solid var(--sh-pink) !important;box-shadow:none !important;
}
.rf-btn-ghost:hover,.detail-cart-btn:hover{background:var(--sh-pink-mist) !important}
.rf-btn,.rf-btn-ghost{
  display:inline-flex;align-items:center;gap:8px;padding:13px 28px;
  font-size:.9rem;text-decoration:none;cursor:pointer;border-radius:14px;
}
.sort-btn{border-radius:12px !important}
#sortBar{border-radius:14px !important;border-color:var(--sh-line) !important;background:rgba(255,255,255,.7) !important}
.cat-pill{
  border-radius:999px !important;border:1px solid var(--sh-line) !important;
  background:#fff !important;color:var(--sh-ink-soft) !important;font-weight:700 !important;
}
.cat-pill.active{background:var(--sh-pink) !important;color:#fff !important;border-color:var(--sh-pink) !important}
.announce-bar,.sale-strip{background:linear-gradient(90deg,#261f1a,#c39f72,#261f1a) !important}
.toast.info{background:linear-gradient(135deg,#c39f72,#261f1a) !important}
.tab.active{color:var(--sh-pink) !important}
.tab::after{background:linear-gradient(90deg,#261f1a,#c39f72) !important}
.sidebar-item.active{color:var(--sh-pink) !important;border-right-color:var(--sh-pink) !important;background:var(--sh-pink-mist) !important}
::-webkit-scrollbar-thumb{background:linear-gradient(#c39f72,#261f1a) !important}

/* ---------- عناوين الأقسام ---------- */
.sec-header{border-bottom:1px solid var(--sh-line);padding-bottom:12px}
.sec-title{color:var(--sh-ink) !important;font-size:1.55rem !important}
.sec-count{color:var(--sh-pink) !important;font-size:.75rem;letter-spacing:1px}
.cats-showcase-title,.faq-header-title{color:var(--sh-ink) !important}
.faq-header-sub{color:var(--sh-ink-soft) !important}
.faq-header-line{background:linear-gradient(90deg,transparent,var(--sh-pink),transparent) !important}

/* ---------- كروت المنتجات ---------- */
.product-card{
  background:var(--sh-cream-2) !important;
  border:1px solid var(--sh-line) !important;
  border-radius:20px !important;
  box-shadow:none !important;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  border-color:var(--sh-pink-soft) !important;
  box-shadow:var(--sh-shadow) !important;
}
.p-img-wrap{background:#F6F1EA !important}
.p-cat{color:var(--sh-pink) !important;letter-spacing:1px !important;font-size:.66rem !important}
.p-name{color:var(--sh-ink) !important;font-size:1.04rem !important}
.p-desc{color:var(--sh-ink-soft) !important}
.p-price-normal,.p-price-sale{color:var(--sh-pink-3) !important;font-family:'Baloo Bhaijaan 2',sans-serif !important}
.p-price-orig{color:var(--sh-ink-soft) !important;opacity:.6}
.p-badge{border-radius:999px !important;letter-spacing:.5px !important;font-size:.62rem !important}
.badge-sale{background:var(--sh-pink) !important;color:#fff !important}
.badge-new{background:linear-gradient(135deg,#c39f72,#261f1a) !important;color:#fff !important}
.p-fav{background:rgba(255,255,255,.92) !important;border:1px solid var(--sh-line) !important;border-radius:999px !important}
.p-fav svg{fill:none;stroke:var(--sh-pink);stroke-width:1.7}
.p-fav.liked svg{fill:var(--sh-pink);stroke:var(--sh-pink)}

/* ---------- كروت الفئات ---------- */
.cat-card{
  background:var(--sh-cream-2) !important;
  border:1px solid var(--sh-line) !important;
  border-radius:22px !important;box-shadow:none !important;overflow:hidden;
}
.cat-card:hover{box-shadow:var(--sh-shadow) !important;border-color:var(--sh-pink-soft) !important;transform:translateY(-4px) !important}
.cat-card-img{border-radius:0 !important;background:#F6F1EA !important}
.cat-card-name{
  font-family:'Baloo Bhaijaan 2',sans-serif !important;color:var(--sh-ink) !important;
  font-size:.92rem !important;padding:12px 6px !important;letter-spacing:0 !important;
}

/* ---------- الحقول ---------- */
.search-wrap,.filters-bar{background:transparent !important}
.search-inp,input[type="text"],input[type="tel"],input[type="email"],input[type="number"],textarea,select{
  background:rgba(255,255,255,.85) !important;
  border:1px solid var(--sh-line) !important;
  border-radius:14px !important;
  color:var(--sh-ink) !important;
}
.search-inp:focus,input:focus,textarea:focus,select:focus{
  outline:none !important;border-color:var(--sh-pink) !important;
  box-shadow:0 0 0 4px rgba(38,31,26,.12) !important;
}

/* ---------- FAQ ---------- */
.faq-card{
  background:var(--sh-cream-2) !important;border:1px solid var(--sh-line) !important;
  border-radius:18px !important;box-shadow:none !important;
}
.faq-card-q{color:var(--sh-ink) !important;font-weight:800 !important}
.faq-icon{color:var(--sh-pink) !important}
.faq-card-a-inner{color:var(--sh-ink-soft) !important;line-height:2}

/* ---------- الفوتر ---------- */
.footer{background:linear-gradient(180deg,transparent,rgba(250,246,240,.8)) !important;border-top:1px solid var(--sh-line) !important}
.footer-brand{color:var(--sh-pink) !important;letter-spacing:0 !important}
.footer-link{color:var(--sh-ink-soft) !important}
.footer-link:hover{color:var(--sh-pink) !important}
.footer-copy{color:var(--sh-ink-soft) !important;opacity:.75}
.footer-sep{background:linear-gradient(90deg,transparent,var(--sh-pink),transparent) !important}
.footer-wa,.footer-ig{border-radius:999px !important;border:1px solid var(--sh-line) !important;color:var(--sh-pink) !important}

/* ---------- السلة والتفاصيل ---------- */
.cart-panel,.detail-panel,.modal,.sheet,.login-card,.cart-summary,.checkout-section,.order-card{
  background:var(--sh-cream-2) !important;border-color:var(--sh-line) !important;border-radius:20px !important;
}
.detail-name{color:var(--sh-ink) !important}
.detail-cat{color:var(--sh-pink) !important;letter-spacing:1px}
.detail-desc{color:var(--sh-ink-soft) !important;line-height:2}

/* ---------- شريط الجوال ---------- */
.mobile-nav-inner{
  background:rgba(253,248,240,.96) !important;border:1px solid var(--sh-line) !important;
  border-radius:20px !important;backdrop-filter:blur(16px);
}
.mobile-nav-btn{color:var(--sh-ink-soft) !important}
.mobile-nav-btn.active{color:var(--sh-pink) !important}

/* ---------- شريط الثقة ---------- */
.rf-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:0;background:var(--sh-line);
  border-top:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line);
}
.rf-strip div{
  background:var(--sh-cream-2);padding:18px 10px;text-align:center;
  font-size:.82rem;color:var(--sh-ink-soft);font-weight:700;
}
.rf-strip b{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;color:var(--sh-pink);font-size:.95rem;margin-bottom:4px}
@media(max-width:640px){.rf-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- الوضع الليلي ---------- */
[data-theme="dark"] html,[data-theme="dark"] body{
  background:radial-gradient(900px 480px at 88% -8%, rgba(38,31,26,.12), transparent 60%),#141110 !important;
  color:#F6F1EA !important;
}
[data-theme="dark"] .product-card,[data-theme="dark"] .cat-card,[data-theme="dark"] .faq-card,
[data-theme="dark"] .mobile-nav-inner,[data-theme="dark"] .navbar{
  background:rgba(31,25,21,.94) !important;border-color:rgba(195,159,114,.22) !important;
}
[data-theme="dark"] .p-name,[data-theme="dark"] .sec-title,[data-theme="dark"] .cat-card-name,
[data-theme="dark"] .faq-card-q,[data-theme="dark"] .vr-hero-title{color:#F6F1EA !important}
[data-theme="dark"] .p-desc,[data-theme="dark"] .vr-hero-sub,[data-theme="dark"] .faq-card-a-inner,
[data-theme="dark"] .rf-hero-bullets{color:#d8c8b0 !important}
[data-theme="dark"] .hero,[data-theme="dark"] .vr-hero-luxe{background:#171310 !important}
[data-theme="dark"] .rf-strip div{background:#1c1714}

/* ---------- ضبط مسافات الهيرو ---------- */
.vr-hero-luxe{min-height:auto !important;padding:46px 22px 54px !important}
.vr-hero-inner{align-items:center !important;gap:34px !important}
.vr-hero-carousel{height:440px !important}
.vr-hero-title{margin:6px 0 0 !important}
.vr-hero-sub{margin-top:16px !important}
.hero-scroll{display:none !important}
@media(max-width:900px){
  .vr-hero-luxe{padding:30px 14px 40px !important}
  .vr-hero-carousel{height:300px !important;border-radius:22px !important}
}

/* ---------- الفئات: توسيط الشبكة ---------- */
.cats-grid,#catsGrid{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:18px !important}
.cats-grid>*,#catsGrid>*{flex:0 0 240px !important;max-width:280px !important}
.section-divider svg path,.sec-divider svg path,.divider-orn svg path{stroke:var(--sh-pink) !important;fill:none !important}
.section-divider path[fill]:not([fill="none"]),.divider-orn path[fill]:not([fill="none"]){fill:var(--sh-pink) !important}

/* ---------- إصلاح الفراغ أسفل شريط التصنيفات ---------- */
.cats-scroll,#catsScroll{flex:0 0 auto !important;height:auto !important;min-height:0 !important;align-items:center !important}
.filters-bar{margin-bottom:10px !important}
.filters-bar+.products-section,.products-section{padding-top:8px !important}

/* ---------- أزرار السلة الكبيرة ---------- */
.detail-add-btn{
  height:62px !important;min-height:62px !important;width:100% !important;
  font-size:1.06rem !important;font-weight:800 !important;
  border-radius:18px !important;gap:12px !important;margin-top:6px !important;
}
.detail-add-btn svg{width:22px !important;height:22px !important}
.detail-cart-btn{
  height:56px !important;min-height:56px !important;width:100% !important;
  font-size:1rem !important;font-weight:800 !important;border-radius:18px !important;
  gap:10px !important;margin-top:10px !important;
}
.detail-cart-btn svg{width:20px !important;height:20px !important}
@media(max-width:600px){
  .detail-add-btn{height:58px !important;min-height:58px !important;font-size:1rem !important}
  .detail-cart-btn{height:54px !important;min-height:54px !important;font-size:.96rem !important}
}

/* ============================================================
   توحيد ألوان لوحة التحكم مع هوية Wood Echome (بنفسجي + لؤلؤي)
   ============================================================ */
:root{
  --pink:#efe3d2 !important;--pink2:#F2A8C4 !important;--pink3:#261f1a !important;--pink-dark:#171310 !important;
  --rose:#261f1a !important;--rose-color:#261f1a !important;--rose-dark:#171310 !important;
  --soft:#FFF8FB !important;--soft2:#fdfbf7 !important;--soft3:#F6F1EA !important;
  --bg:#F8F0E3 !important;--bg2:#F5EBDC !important;--bg3:#EFE2CF !important;
  --border:rgba(38,31,26,.18) !important;--border2:rgba(38,31,26,.32) !important;
  --text:#3a2f26 !important;--muted:#7C6A54 !important;--muted2:#3a2f26 !important;
  --sale:#261f1a !important;--sale-glow:rgba(38,31,26,.25) !important;
}
.btn-white,.toast.info,.zajal-badge-inline{
  background:linear-gradient(135deg,#261f1a,#171310) !important;
  color:#FFF7FA !important;box-shadow:0 8px 22px -12px rgba(38,31,26,.6) !important;
}
.btn-white:hover{background:linear-gradient(135deg,#F0287C,#9C033F) !important}
.login-brand,.login-sub{color:#171310 !important}


/* ---------- خلفية بيج موحّدة ---------- */
.hero,.vr-hero-luxe,.products-section,.cats-showcase,.faq-section,main,.page,.container{background:transparent !important}
.rf-strip div{background:#FBF5EA !important}