/* ===========================================================
   Wood Echome — الهوية البصرية
   لوحة الألوان: أبيض #FFFFFF | بيج ذهبي #C39F72 | بني داكن #261F1A
   =========================================================== */

:root{
  --we-white:#ffffff;
  --we-milk:#fbf9f6;      /* حليبي ناعم */
  --we-milk2:#f6f1ea;
  --we-tan:#c39f72;
  --we-tan-soft:#e2cdb0;
  --we-ink:#261f1a;
  --we-ink-deep:#171310;
  --we-plum:#261f1a;
  --we-plum-deep:#171310;
  --we-mid:#c39f72;
  --we-lilac:#e8dcc8;
  --we-pearl:#fbf9f6;
  --we-gold:#c39f72;
  --we-shadow:0 22px 50px -24px rgba(38,31,26,.42);
  --we-grad:linear-gradient(120deg,#171310 0%,#261f1a 45%,#c39f72 100%);
}
[data-theme="dark"]{
  --we-white:#1b1613;
  --we-milk:#141110;
  --we-milk2:#221b16;
  --we-shadow:0 22px 50px -24px rgba(0,0,0,.7);
}

/* ---------- الخطوط ---------- */
*,*::before,*::after,[style*="font-family"]{
  font-family:"IBM Plex Sans Arabic","Inter","Segoe UI",system-ui,sans-serif !important;
}
i,.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,svg,svg *{font-family:inherit}
.material-icons,.material-symbols-outlined{font-family:"Material Icons","Material Symbols Outlined" !important}
h1,h2,h3,.sec-title,.section-title,.cats-showcase-title,.nav-logo-txt,.vr-hero-title{font-weight:700 !important;letter-spacing:0 !important}

.nav-logo-txt{
  background:var(--we-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent !important;font-size:1.25rem !important;
}
.nav-logo img{width:40px !important;height:40px !important;border-radius:0 !important}

/* ---------- الخلفية: أبيض حليبي فقط (نهاري) / بني داكن (ليلي) ---------- */
body{
  background:linear-gradient(180deg,#ffffff 0%,#fbf9f6 45%,#f6f1ea 100%) !important;
  color:var(--we-ink) !important;
}
[data-theme="dark"] body{
  background:linear-gradient(180deg,#171310 0%,#1b1613 50%,#241d18 100%) !important;
  color:#f6f1ea !important;
}

.navbar{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(195,159,114,.4) !important;
  box-shadow:0 8px 30px -22px rgba(38,31,26,.55) !important;
}
[data-theme="dark"] .navbar{
  background:rgba(23,19,16,.86) !important;
  border-bottom-color:rgba(195,159,114,.24) !important;
}
.announce-bar{background:var(--we-grad) !important;letter-spacing:3px !important}

/* ---------- حركات ---------- */
@keyframes weRise{0%{opacity:0;transform:translateY(26px) scale(.965);filter:blur(6px)}60%{filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes weShine{0%{transform:translateX(-120%) rotate(18deg)}100%{transform:translateX(220%) rotate(18deg)}}
@keyframes weFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes weGrain{0%{background-position:0 0}100%{background-position:120px 120px}}
@keyframes weSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.products-grid > *,.cats-row > .cat-card,.cat-grid > .cat-card,.cats-grid > .cat-card{
  animation:weRise .7s cubic-bezier(.22,1,.36,1) both;
}
.products-grid > *:nth-child(1){animation-delay:.02s}
.products-grid > *:nth-child(2){animation-delay:.07s}
.products-grid > *:nth-child(3){animation-delay:.12s}
.products-grid > *:nth-child(4){animation-delay:.17s}
.products-grid > *:nth-child(5){animation-delay:.22s}
.products-grid > *:nth-child(6){animation-delay:.27s}
.products-grid > *:nth-child(7){animation-delay:.32s}
.products-grid > *:nth-child(8){animation-delay:.37s}
.products-grid > *:nth-child(n+9){animation-delay:.42s}

/* ---------- بطاقات المنتجات ---------- */
.product-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(195,159,114,.35) !important;
  border-radius:20px !important;
  background:var(--we-white) !important;
  box-shadow:0 14px 34px -28px rgba(23,19,16,.6) !important;
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,border-color .4s ease !important;
}
.product-card:hover{transform:translateY(-10px);border-color:var(--we-tan) !important;box-shadow:var(--we-shadow) !important}
.product-card::after{
  content:'';position:absolute;top:0;inset-inline-start:0;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  opacity:0;pointer-events:none;
}
.product-card:hover::after{opacity:1;animation:weShine .9s ease forwards}
.product-card img{transition:transform .8s cubic-bezier(.22,1,.36,1) !important;aspect-ratio:1/1;object-fit:cover !important;width:100% !important}
.product-card:hover img{transform:scale(1.07)}
.product-card .p-img,.product-card .pc-img,.product-card figure{
  background:linear-gradient(160deg,var(--we-milk),var(--we-milk2)) !important;
  border-radius:16px !important;overflow:hidden !important;
}
.product-card .p-price,.product-card .pc-price,.product-card .price{font-weight:800 !important;color:var(--we-ink) !important}
[data-theme="dark"] .product-card .p-price,[data-theme="dark"] .product-card .price{color:var(--we-tan) !important}
.product-card .old-price,.product-card .p-old,.product-card del{color:#9a8a76 !important;font-weight:500 !important}
.product-card .badge,.product-card .p-badge,.product-card .tag{
  background:var(--we-grad) !important;color:#fff !important;border:none !important;
  border-radius:999px !important;font-weight:700 !important;
}

/* ---------- البطل ---------- */
.vr-hero-title em{font-style:normal;background:var(--we-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vr-hero-eyebrow{color:var(--we-tan) !important}
.vr-orb{animation:weFloat 7s ease-in-out infinite !important}
.vr-hero-luxe{position:relative}
.vr-hero-luxe::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:90px;pointer-events:none;
  background:linear-gradient(to top,var(--we-milk2),transparent);z-index:1;
}
.vr-hero-title{line-height:1.5 !important;letter-spacing:.5px}
.rf-strip{
  border-radius:20px !important;
  background:linear-gradient(135deg,var(--we-white),var(--we-milk2)) !important;
  box-shadow:0 14px 40px -24px rgba(23,19,16,.5) !important;
  border:1px solid rgba(195,159,114,.5) !important;
}
.vr-hero-stage{position:relative;z-index:2}
.vr-hero-stage .vr-hero-carousel{
  height:480px;border-radius:28px;
  border:1px solid rgba(195,159,114,.5) !important;
  box-shadow:0 30px 70px -22px rgba(23,19,16,.4) !important;
}
.vr-hero-stage::after{
  content:'';position:absolute;inset:auto -18px -18px auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(195,159,114,.3),transparent 70%);filter:blur(6px);pointer-events:none;z-index:0;
}
.vr-hero-mark{
  position:absolute;bottom:-16px;inset-inline-start:-10px;z-index:6;width:min(240px,58%);height:auto;padding:12px 18px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(195,159,114,.7);border-radius:20px;
  box-shadow:0 18px 40px -14px rgba(23,19,16,.4);animation:weFloat 6s ease-in-out infinite;
}
[data-theme="dark"] .vr-hero-mark{background:rgba(27,22,19,.9)}
@media(max-width:768px){
  .vr-hero-stage .vr-hero-carousel{height:300px;max-width:520px;margin:0 auto}
  .vr-hero-mark{width:170px;bottom:-12px;inset-inline-start:6px}
}

/* ---------- الأزرار ---------- */
.btn-primary,.vr-btn-primary,.add-cart-btn,.buy-btn,.p-cart-btn{
  position:relative;overflow:hidden;
  background:var(--we-grad) !important;border:none !important;color:#fff !important;
  border-radius:999px !important;transition:transform .3s ease,box-shadow .3s ease !important;
}
.btn-primary::before,.vr-btn-primary::before,.p-cart-btn::before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);
}
.btn-primary:hover::before,.vr-btn-primary:hover::before,.p-cart-btn:hover::before{animation:weSweep .8s ease}
.btn-primary:hover,.vr-btn-primary:hover,.add-cart-btn:hover,.buy-btn:hover,.p-cart-btn:hover{
  transform:translateY(-2px);box-shadow:var(--we-shadow) !important;
}

/* ---------- روابط التواصل ---------- */
.we-social{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.we-social a{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(195,159,114,.55);color:var(--we-ink);text-decoration:none;
  font-size:.78rem;font-weight:800;background:rgba(255,255,255,.65);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.we-social a:hover{transform:translateY(-2px);background:var(--we-white);box-shadow:0 10px 24px -12px rgba(23,19,16,.55)}
[data-theme="dark"] .we-social a{background:rgba(255,255,255,.06);color:#f6f1ea}

/* ===========================================================
   تسوّق الآن — عرض الفئات بشكل أسطوري
   =========================================================== */
.cats-showcase-wrap{
  max-width:1200px;margin:28px auto 12px;padding:26px 20px 30px !important;
  background:linear-gradient(180deg,var(--we-white),var(--we-milk2)) !important;
  border:1px solid rgba(195,159,114,.45) !important;border-radius:28px !important;
  box-shadow:0 26px 60px -40px rgba(23,19,16,.55);position:relative;overflow:hidden;
}
.cats-showcase-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 60% at 50% -20%,rgba(195,159,114,.22),transparent 60%);
}
[data-theme="dark"] .cats-showcase-wrap{
  background:linear-gradient(180deg,#1f1915,#171310) !important;border-color:rgba(195,159,114,.22) !important;
}
.cats-showcase-title{
  position:relative;display:block !important;text-align:center;letter-spacing:1px;
  color:var(--we-ink) !important;font-size:1.75rem !important;
}
[data-theme="dark"] .cats-showcase-title{color:#f6f1ea !important}
.cats-showcase-title.fancy-under::after{
  content:'' !important;display:block;width:110px;height:3px;margin:12px auto 0;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--we-tan),transparent) !important;
  background-image:none !important;
}

.cats-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;
  gap:16px !important;
}
.cat-card{
  position:relative;border:1px solid rgba(195,159,114,.4) !important;
  background:var(--we-white) !important;border-radius:22px !important;overflow:hidden !important;
  box-shadow:0 12px 32px -26px rgba(23,19,16,.6) !important;text-align:center !important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .4s ease !important;
}
.cat-card:hover{transform:translateY(-8px);border-color:var(--we-tan) !important;box-shadow:var(--we-shadow) !important}
.cat-card-img{aspect-ratio:4/5 !important;background:var(--we-milk2) !important}
.cat-card-img::after{
  background:linear-gradient(180deg,transparent 40%,rgba(23,19,16,.55)) !important;
}
.cat-card-img img,.cat-card img{width:100% !important;height:100% !important;object-fit:cover !important;transition:transform .8s cubic-bezier(.22,1,.36,1) !important}
.cat-card:hover .cat-card-img img{transform:scale(1.09)}
.cat-card-name,.cat-card .cat-name{
  position:absolute;inset-inline:8px;bottom:8px;z-index:2;
  display:block;padding:10px 8px !important;border-radius:16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  color:var(--we-ink) !important;font-weight:800 !important;font-size:.86rem !important;
  transition:background .35s ease,color .35s ease;
}
.cat-card:hover .cat-card-name{background:var(--we-ink);color:#fff !important}
[data-theme="dark"] .cat-card{background:#1f1915 !important}
[data-theme="dark"] .cat-card-name{background:rgba(23,19,16,.85);color:#f6f1ea !important}
[data-theme="dark"] .cat-card:hover .cat-card-name{background:var(--we-tan);color:#171310 !important}
@media(max-width:768px){
  .cats-showcase-wrap{margin:16px 0 6px !important;padding:15px 10px 17px !important;border-radius:16px !important}
  .cats-grid{display:flex !important;direction:ltr;grid-template-columns:none !important;gap:8px !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:none !important;padding:2px 2px 8px !important;margin:0 !important;scrollbar-width:none}
  .cats-grid::-webkit-scrollbar{display:none}
  .cats-grid > .cat-card{direction:rtl;flex:0 0 82px !important;width:82px !important;min-width:82px !important;border-radius:11px !important}
  .cat-card-img{aspect-ratio:1/1 !important}
  .cat-card-name{inset-inline:4px !important;bottom:4px !important;font-size:.62rem !important;line-height:1.35 !important;padding:5px 3px !important;border-radius:8px !important;white-space:normal !important}
  .cats-showcase-title{font-size:1.05rem !important;margin-bottom:13px !important}
  .cats-showcase-title.fancy-under::after{width:72px !important;height:2px !important;margin-top:7px !important}
}

/* ---------- عناوين الأقسام ---------- */
.sec-title,.section-title{position:relative;display:inline-block;padding-bottom:10px;letter-spacing:1px}
.sec-title::after,.section-title::after{
  content:'';position:absolute;bottom:0;inset-inline-start:0;width:58px;height:3px;border-radius:3px;background:var(--we-grad);
}

@media (prefers-reduced-motion: reduce){*{animation:none !important}}

/* ---------- تحسينات الوضع الليلي ---------- */
[data-theme="dark"] .nav-logo-txt{
  background:linear-gradient(120deg,#f6f1ea 0%,#e2cdb0 45%,#c39f72 100%) !important;
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
[data-theme="dark"] .vr-hero-title em{background:linear-gradient(180deg,#e2cdb0,#c39f72);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .product-card{border-color:rgba(195,159,114,.22) !important}
[data-theme="dark"] .we-social a:hover{background:rgba(195,159,114,.18)}
.nav-logo-txt,[data-theme="dark"] .nav-logo-txt{-webkit-text-fill-color:transparent}
.rf-strip > div{background:transparent !important;color:inherit !important}
[data-theme="dark"] .rf-strip,[data-theme="dark"] .rf-strip > div{
  background:linear-gradient(135deg,#1f1915,#171310) !important;color:#f6f1ea !important;
  border-color:rgba(195,159,114,.22) !important;
}
[data-theme="dark"] .rf-strip b{color:#e2cdb0 !important}
.nav-logo-txt,[data-theme="dark"] .nav-logo-txt{
  -webkit-background-clip:text !important;background-clip:text !important;
}

/* ---------- تبدّل صور المنتج + لمسات تصميم ---------- */
.p-slider-img{transition:opacity .9s ease, transform 6s ease !important}
.p-slider-img.active{transform:scale(1.04)}
.p-imgcount{
  position:absolute;bottom:10px;inset-inline-start:10px;z-index:4;
  padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.5px;
  background:rgba(38,31,26,.62);color:#fdfbf7;backdrop-filter:blur(6px);
}
.product-card:hover .p-imgcount{background:rgba(195,159,114,.95);color:#171310}
.product-card{position:relative}
.p-name{transition:color .3s ease}
.product-card:hover .p-name{color:#8a6a3c !important}
[data-theme="dark"] .product-card:hover .p-name{color:#e2cdb0 !important}