/* =====================================================================
   رأس الهرم — الإصدار الثالث · ثيم أبيض ناصع
   ===================================================================== */

/* ---------- ١. الـ tokens ---------- */
:root{
  --white:       #FFFFFF;
  --off:         #FBFAF6;
  --paper:       #F5F2EA;
  --line:        #EAE5D8;
  --line-soft:   #F0EBDD;

  --gold:        #B98C3C;
  --gold-bright: #D4A859;
  --gold-deep:   #8A6420;
  --gold-glow:   #E8C57A;

  --ink:         #14110C;
  --ink-soft:    #4A4236;
  --mute:        #8C8170;
  --whisper:     #B6A992;

  --rule:        rgba(185,140,60,.32);
  --rule-soft:   rgba(20,17,12,.10);
  --rule-faint:  rgba(20,17,12,.06);

  --display:  'Aref Ruqaa', 'Amiri', serif;
  --kufi:     'Reem Kufi', 'Tajawal', sans-serif;
  --body:     'Tajawal', 'Reem Kufi', sans-serif;

  --ease:      cubic-bezier(.2,.7,.1,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);

  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1640px;
}

/* ---------- ٢. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ background:var(--white); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis,html.lenis body{ height:auto }
html.lenis.lenis-smooth{ scroll-behavior:auto !important }
/* ⭐ يحجز مكان الـ scrollbar — يمنع الموقع من القفز لمّا الـ drawer يفتح */
html{ scrollbar-gutter:stable; overflow-x:hidden; }
html,body{ max-width:100%; }
/* على الموبايل: نلغي حجز الـ scrollbar-gutter (بيعمل فراغ على الشمال في RTL) */
@media (max-width:900px){ html{ scrollbar-gutter:auto; } }

body{
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  cursor:none;
  direction:rtl;
  background:var(--white);
  min-height:100vh;
  position:relative;
}
@media (hover:none){ body{ cursor:auto } }

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:none; font-family:inherit }
@media (hover:none){ button{ cursor:pointer } }

::selection{ background:var(--gold); color:var(--white) }

/* لمسة ورق ناعمة جدًا */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply; opacity:.6;
}

/* ---------- ٣. Scroll Progress ---------- */
.progress{ position:fixed; top:0; right:0; left:0; height:2px; z-index:200; pointer-events:none }
.progress__bar{
  height:100%; background:linear-gradient(90deg, var(--gold-deep), var(--gold-glow), var(--gold-deep));
  width:var(--p,0%); box-shadow:0 0 14px rgba(185,140,60,.5);
}

/* ---------- ٤. Cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:10000;
  border-radius:50%; transform:translate(-50%,-50%); will-change:transform;
}
.cursor-dot{ width:5px; height:5px; background:var(--ink); transition:width .25s var(--ease), height .25s var(--ease) }
.cursor-ring{
  width:38px; height:38px; border:1px solid var(--ink);
  transition:width .4s var(--ease), height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), opacity .25s var(--ease);
  opacity:.7;
}
.cursor-ring.--hover{ width:78px; height:78px; background:rgba(185,140,60,.10); border-color:var(--gold); opacity:1 }
.cursor-ring.--label{ width:96px; height:96px; background:var(--ink); border-color:var(--ink) }
.cursor-ring.--label::after{
  content:attr(data-cursor); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--kufi); font-size:11px; color:var(--white); font-weight:600;
}

/* ---------- ٥. Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:300; background:var(--white);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease) 1.4s, visibility 0s linear 2.4s;
}
.loader.--gone{ opacity:0; visibility:hidden }
.loader__inner{ position:relative; z-index:2; display:grid; place-items:center; gap:20px }
.loader .mark{ width:50px; height:60px; color:var(--gold); animation:markFloat 2.2s ease-in-out infinite }
@keyframes markFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.loader .word{
  font-family:var(--display); font-weight:400; font-size:24px; color:var(--ink);
  overflow:hidden;
}
.loader .word span{ display:inline-block; opacity:0; transform:translateY(110%); animation:wordIn .9s var(--ease-out) forwards }
.loader .word span:nth-child(1){ animation-delay:.2s }
.loader .word span:nth-child(2){ animation-delay:.32s }
.loader .word span:nth-child(3){ animation-delay:.44s }
@keyframes wordIn { to { opacity:1; transform:translateY(0) } }
.loader .bar{ width:120px; height:1px; background:var(--line); position:relative; overflow:hidden }
.loader .bar::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform-origin:right center; transform:scaleX(0);
  animation:barFill 1.7s var(--ease-out) .4s forwards;
}
@keyframes barFill { to { transform:scaleX(1) } }
.loader::before, .loader::after{
  content:""; position:absolute; left:0; right:0; height:50%; background:var(--white); z-index:1;
  transition:transform 1.05s var(--ease-in) 1.45s;
}
.loader::before{ top:0 } .loader::after{ bottom:0 }
.loader.--gone::before{ transform:translateY(-100%) }
.loader.--gone::after { transform:translateY(100%) }

/* ---------- ٦. الهيدر (جديد — بدون util bar فوقه) ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;
  padding:22px var(--gutter);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--rule-faint);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.hdr::after{
  content:""; position:absolute; right:0; left:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:0; transition:opacity .5s var(--ease);
}
.hdr.--shrunk{ padding:14px var(--gutter); background:rgba(255,255,255,.96); border-color:transparent }
.hdr.--shrunk::after{ opacity:1 }

/* ============ Hamburger Button (Mobile) ============ */
.hdr__burger{
  display:none; width:42px; height:42px; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:transparent; border:0; padding:0;
  position:relative; z-index:51;
}
.hdr__burger span{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
body.rah-drawer-open .hdr__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
body.rah-drawer-open .hdr__burger span:nth-child(2){ opacity:0 }
body.rah-drawer-open .hdr__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

.hdr__brand{ display:inline-flex; align-items:center; gap:14px; color:var(--ink) }
.hdr__brand .mark{ width:24px; height:28px; color:var(--gold); transition:transform .6s var(--ease) }
.hdr__brand:hover .mark{ transform:rotate(-8deg) scale(1.08) }
.hdr__brand .word{
  font-family:var(--kufi); font-weight:600; font-size:23px; letter-spacing:-.01em; line-height:1;
  position:relative;
}
.hdr__brand .word::after{
  content:""; position:absolute; right:-10px; top:50%; width:4px; height:4px; border-radius:50%; background:var(--gold);
  transform:translateY(-50%);
}

.hdr__nav{ display:flex; gap:48px; align-items:center; justify-content:center }
.hdr__nav a{
  font-family:var(--kufi); font-size:14px; font-weight:500;
  color:var(--ink-soft); position:relative; padding:8px 0;
  transition:color .35s var(--ease);
}
.hdr__nav a::before{
  content:""; position:absolute; right:0; top:50%; width:0; height:1px; background:var(--gold);
  transform:translateY(-50%); transition:width .45s var(--ease);
}
.hdr__nav a:hover, .hdr__nav a.--active{ color:var(--ink); padding-right:14px }
.hdr__nav a:hover::before, .hdr__nav a.--active::before{ width:8px }

/* ============ Categories Dropdown (Desktop hover) ============ */
.hdr__dropdown{ position:relative; outline:none }
.hdr__dropdown-trigger{
  font-family:var(--kufi); font-size:14px; font-weight:500;
  color:var(--ink-soft); padding:8px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .35s var(--ease);
}
.hdr__dropdown-trigger svg{ transition:transform .35s var(--ease) }
.hdr__dropdown:hover .hdr__dropdown-trigger,
.hdr__dropdown:focus-within .hdr__dropdown-trigger{ color:var(--ink) }
.hdr__dropdown:hover .hdr__dropdown-trigger svg,
.hdr__dropdown:focus-within .hdr__dropdown-trigger svg{ transform:rotate(180deg) }

.hdr__dropdown-panel{
  position:absolute; top:calc(100% + 12px); right:50%; transform:translateX(50%) translateY(-8px);
  background:var(--white); border:1px solid var(--rule-soft);
  box-shadow:0 24px 60px -20px rgba(20,17,12,.18);
  padding:24px; min-width:520px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.hdr__dropdown:hover .hdr__dropdown-panel,
.hdr__dropdown:focus-within .hdr__dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(50%) translateY(0);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}
.hdr__dropdown-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.hdr__dropdown-item{
  display:grid; gap:6px; justify-items:center; text-align:center;
  padding:14px 8px; border:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hdr__dropdown-item:hover{ border-color:var(--rule); background:var(--paper) }
.hdr__dropdown-img{
  width:56px; height:56px; border-radius:50%;
  background:var(--paper); display:grid; place-items:center;
  overflow:hidden; color:var(--gold);
}
.hdr__dropdown-img img{ width:100%; height:100%; object-fit:cover }
.hdr__dropdown-img svg{ width:55% }
.hdr__dropdown-item span{
  font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--ink);
}
.hdr__dropdown-item small{
  font-family:var(--kufi); font-size:10px; color:var(--mute);
}

.hdr__tools{ display:flex; align-items:center; gap:10px }
.hdr__icon{
  width:42px; height:42px; display:inline-grid; place-items:center;
  color:var(--ink); position:relative; border-radius:50%;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.hdr__icon:hover{ background:var(--paper); transform:translateY(-2px) }
.hdr__icon svg{ width:18px; height:18px }
.hdr__icon .badge{
  position:absolute; top:4px; left:4px;
  background:var(--gold); color:var(--white);
  font-family:var(--kufi); font-size:9px; font-weight:600;
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
}

/* ---------- ٧. Views ---------- */
.view{ display:none; position:relative; z-index:2 }
.view.--active{ display:block; animation:viewIn .9s var(--ease-out) }
@keyframes viewIn { from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } }

/* ===================================================================== */
/*                              ٨. الهيرو                                */
/* ===================================================================== */
.hero{
  position:relative;
  padding:clamp(40px,5vw,80px) var(--gutter) clamp(60px,7vw,120px);
  min-height:calc(100vh - 90px);
  display:grid; grid-template-columns:1fr 1.15fr;
  align-items:center; gap:clamp(32px,5vw,80px);
  overflow:hidden;
}

.hero__season{
  position:absolute; top:clamp(32px,4vw,60px); left:var(--gutter); z-index:4;
  font-family:var(--display); font-weight:400;
  font-size:clamp(4.5rem, 9vw, 9rem); line-height:.9;
  color:var(--ink); letter-spacing:-.04em; pointer-events:none;
}
.hero__season .sub{
  display:block; font-family:var(--kufi); font-size:11px; font-weight:500;
  color:var(--mute); margin-top:8px; line-height:1.5;
}

.hero__copy{ position:relative; z-index:3; padding-inline-start:clamp(0px, 3vw, 40px) }

.hero__tag{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--gold);
  margin-bottom:32px;
}
.hero__tag::before{ content:""; width:32px; height:1px; background:var(--gold) }
.hero__tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold) }

.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3rem, 7vw, 7rem); line-height:1.04;
  color:var(--ink); letter-spacing:-.012em;
  margin:0 0 36px;
}
.hero__title .row{
  display:block; overflow:hidden;
  line-height:1.08;
  padding:.18em 0;
  margin:-.18em 0;
}
.hero__title .row > .inner{
  display:inline-block;
  will-change:transform;
}
/* ⭐ Safety net: لو GSAP فشل لأيّ سبب، النصّ يظهر تلقائيًّا بعد ٤ ثواني */
.gsap-ready .hero__title .row > .inner{
  animation: rah-inner-fallback 0s linear 4s forwards;
}
@keyframes rah-inner-fallback { to { transform: translateY(0) !important; opacity: 1 !important } }
.hero__title em{ font-style:normal; color:var(--gold) }

.hero__sub{
  font-family:var(--body); font-weight:300; font-size:clamp(1.05rem, 1.25vw, 1.2rem);
  line-height:1.9; color:var(--ink-soft); max-width:42ch;
  margin:0 0 44px;
}

.hero__actions{ display:inline-flex; align-items:center; gap:28px }

.cta-round{
  display:inline-grid; place-items:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--ink); color:var(--white);
  font-family:var(--kufi); font-weight:500; font-size:12px;
  position:relative; text-align:center; z-index:1;
  transition:transform .6s var(--ease), background .6s var(--ease);
}
.cta-round::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--gold); transform:scale(0); transition:transform .6s var(--ease); z-index:-1;
}
.cta-round::after{
  content:""; position:absolute; inset:-10px; border:1px solid var(--gold); border-radius:50%;
  transform:scale(.85); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.cta-round:hover::before{ transform:scale(1) }
.cta-round:hover{ color:var(--ink) }
.cta-round:hover::after{ transform:scale(1); opacity:.6 }
.cta-round span{ display:grid; place-items:center; gap:6px; position:relative; z-index:1 }
.cta-round svg{ width:24px; height:8px; transition:transform .5s var(--ease) }
.cta-round:hover svg{ transform:translateX(-5px) }

.hero__inline-cta{
  font-family:var(--kufi); font-weight:500; font-size:13px; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:6px;
}
.hero__inline-cta:hover{ color:var(--gold); border-color:var(--gold) }

/* ----- منطقة المنتج (هتستقبل صورة حقيقية لاحقًا) ----- */
.hero__stage{ position:relative; height:min(82vh, 820px); min-height:560px; }

/* (أ) Light beam ينزل من فوق على المنتج — أنعم وأصغر */
.hero__light{
  position:absolute; left:50%; top:-5%; transform:translateX(-50%);
  width:min(50%, 360px); height:105%;
  z-index:1; pointer-events:none;
  mix-blend-mode:multiply;
}

/* (ب) 4 Corner brackets ذهبية - frame editorial */
.hero__corner{
  position:absolute; width:34px; height:34px;
  color:var(--gold); z-index:5; pointer-events:none;
  will-change:opacity, transform;
}
.hero__corner.--tr{ top:18px; left:18px }
.hero__corner.--tl{ top:18px; right:18px; transform:scaleX(-1) }
.hero__corner.--br{ bottom:18px; left:18px; transform:scaleY(-1) }
.hero__corner.--bl{ bottom:18px; right:18px; transform:scale(-1) }

/* (ج) نقاط ذهبية عائمة داخل الـ stage */
.hero__dots{ position:absolute; inset:0; z-index:2; pointer-events:none }
.hero__dots span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px var(--gold-glow);
  animation:dotFloat 7s ease-in-out infinite;
}
.hero__dots span:nth-child(1){ top:18%; right:14%; animation-delay:0s }
.hero__dots span:nth-child(2){ top:35%; right:28%; animation-delay:-1.5s; width:3px; height:3px }
.hero__dots span:nth-child(3){ top:62%; right:8%;  animation-delay:-3s }
.hero__dots span:nth-child(4){ top:28%; left:22%;  animation-delay:-1s; width:5px; height:5px }
.hero__dots span:nth-child(5){ top:72%; left:18%;  animation-delay:-2.5s }
.hero__dots span:nth-child(6){ top:50%; left:4%;   animation-delay:-4s; width:3px; height:3px }
.hero__dots span:nth-child(7){ top:12%; left:8%;   animation-delay:-5s }
@keyframes dotFloat{
  0%,100%{ transform:translateY(0)   scale(1);   opacity:.4 }
  50%   { transform:translateY(-14px) scale(1.2); opacity:.9 }
}

/* (د) Reflection — انعكاس تحت المنتج */
.hero__reflection{
  position:absolute; left:50%; bottom:18%;
  width:min(40vw, 380px); height:8%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(138,100,32,.35), transparent 70%);
  filter:blur(8px);
  z-index:1; pointer-events:none;
}

/* (هـ) Measurement guides — خطوط blueprint */
.hero__measure{
  position:absolute; inset:0; z-index:3; pointer-events:none;
}
.hero__measure svg{ width:100%; height:100% }

/* (و) Scroll cue تحت الهيرو */
.hero__scroll-cue{
  position:absolute; bottom:clamp(20px,3vw,40px); left:50%; transform:translateX(-50%);
  display:grid; gap:14px; justify-items:center; z-index:5;
  opacity:0; animation:fadeIn 1.2s var(--ease-out) 3.2s forwards;
}
.hero__scroll-cue .label{
  font-family:var(--kufi); font-size:10.5px; font-weight:500;
  color:var(--mute); letter-spacing:.08em;
}
.hero__scroll-cue .track{
  width:1px; height:54px; position:relative; background:var(--rule-soft);
}
.hero__scroll-cue .track::after{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1px; height:18px; background:var(--gold);
  animation:scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%   { top:-2px; opacity:0 }
  20%  { opacity:1 }
  80%  { opacity:1 }
  100% { top:36px; opacity:0 }
}

.hero__plate{
  position:absolute; left:50%; top:50%;
  width:min(96%, 780px); aspect-ratio:1/1;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, #FFFFFF 0%, var(--off) 35%, var(--paper) 75%, #EAE2CB 100%);
  box-shadow:
    0 70px 140px -50px rgba(138,100,32,.22),
    0 24px 60px -24px rgba(138,100,32,.15),
    inset 0 0 80px rgba(185,140,60,.06);
  transform:translate(-50%,-50%);
}
.hero__plate::after{ content:""; position:absolute; inset:24px; border-radius:50%; border:1px solid rgba(185,140,60,.18) }
.hero__plate::before{ content:""; position:absolute; inset:60px; border-radius:50%; border:1px dashed rgba(185,140,60,.12) }

/* صورة المنتج — تتمركز كامل بـ object-fit وdrop-shadow */
.hero__product{
  position:absolute; left:50%; top:50%;
  width:min(90%, 720px); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  z-index:2;
  display:grid; place-items:center;
  filter:drop-shadow(0 50px 60px rgba(20,17,12,.20));
}
/* ⭐ ضمان مركزة الصورة بغضّ النظر عن أبعادها — مع تكبير بصري للقطعة */
.hero__product > img{
  width:100% !important; height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block;
  transform:scale(1.06);
  transform-origin:center;
}
.hero__product img{
  max-width:100%; max-height:100%; object-fit:contain;
}
/* placeholder بسيط لمّا مفيش صورة */
.hero__product .placeholder{
  width:80%; height:80%;
  display:grid; place-items:center;
  color:var(--gold);
}
.hero__product .placeholder svg{ width:90%; height:auto }

/* labels حوالين المنتج */
.hero__orbit{ position:absolute; inset:0; pointer-events:none; z-index:3 }
.hero__orbit .label{
  position:absolute;
  font-family:var(--kufi); font-size:11px; font-weight:500;
  color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
  padding:7px 14px; border:1px solid var(--rule-faint); border-radius:999px;
}
.hero__orbit .label::before{ content:""; width:14px; height:1px; background:var(--gold) }
.hero__orbit .label.--tl{ top:6%; right:6% }
.hero__orbit .label.--bl{ bottom:18%; right:0% }
.hero__orbit .label.--tr{ top:18%; left:2% }
.hero__orbit .label.--br{ bottom:6%; left:14% }
.hero__orbit .label b{ color:var(--ink); font-weight:600 }

/* ---------- ٩. Giant marquee ---------- */
.giant-marquee{
  position:relative; z-index:2;
  padding:clamp(16px,1.8vw,32px) 0;
  border-top:1px solid var(--rule-faint);
  border-bottom:1px solid var(--rule-faint);
  overflow:hidden;
}
.giant-marquee__track{
  display:inline-flex; gap:44px; white-space:nowrap;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 3.8vw, 3.8rem); line-height:1; color:var(--ink);
  letter-spacing:-.014em;
}
.giant-marquee__track span{ display:inline-flex; align-items:center; gap:44px }
.giant-marquee__track span::after{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--gold); flex-shrink:0;
}
.giant-marquee__track .ghost{ color:transparent; -webkit-text-stroke:1.5px var(--gold) }

/* ---------- ١٠. مبادئ القسم ---------- */
.sec{ position:relative; padding:clamp(64px,7vw,120px) var(--gutter) }
.sec.--paper{ background:var(--paper) }
.sec.--off{ background:var(--off) }

.sec__head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px;
  margin-bottom:clamp(36px,4.5vw,72px);
}
.sec__label{
  font-family:var(--kufi); font-size:12px; font-weight:600; color:var(--gold);
  display:inline-flex; align-items:center; gap:14px;
}
.sec__label::before{ content:""; width:32px; height:1px; background:var(--gold) }
.sec__rule{ height:1px; background:var(--rule-soft) }
.sec__num{ font-family:var(--display); font-size:18px; color:var(--ink-soft) }
.sec__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem, 3.6vw, 3.4rem); line-height:1.12; color:var(--ink);
  letter-spacing:-.012em; max-width:22ch; margin:0;
}
.sec__title em{ font-style:normal; color:var(--gold) }

/* ---------- ١١. المنهج ---------- */
.manifesto{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(40px,6vw,120px); align-items:start }
.manifesto__intro{ position:sticky; top:120px }
.manifesto__intro p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem, 1.8vw, 1.85rem); line-height:1.5; color:var(--ink); max-width:24ch; margin:0;
  letter-spacing:-.008em;
}
.manifesto__intro p em{ font-style:normal; color:var(--gold) }
.manifesto__list{ display:grid; gap:36px; list-style:none; padding:0; margin:0 }
.manifesto__item{
  display:grid; grid-template-columns:1fr auto; gap:24px;
  padding-bottom:36px; border-bottom:1px solid var(--rule-soft); position:relative;
  align-items:baseline;
}
.manifesto__item:last-child{ border-bottom:0; padding-bottom:0 }
/* الترقيم أصغر، أهدأ، على اليسار (نهاية السطر في RTL) */
.manifesto__item .num{
  grid-column:2; grid-row:1;
  font-family:var(--display); font-size:18px; font-weight:400;
  color:var(--ink-soft); line-height:1; opacity:.7;
  padding-top:6px; align-self:start;
}
.manifesto__item > div{ grid-column:1; grid-row:1 }
.manifesto__item h3{
  margin:0 0 14px; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.1vw,2.05rem); color:var(--ink);
  letter-spacing:-.008em;
}
.manifesto__item p{ margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.85; max-width:54ch }

/* ---------- ١٢. القطع المميزة ---------- */
.featured{ display:grid; gap:clamp(48px,4.5vw,88px) }
.piece{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); align-items:center }
.piece:nth-child(even){ direction:ltr }
.piece:nth-child(even) > *{ direction:rtl }

.piece__art{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 75%, rgba(212,168,89,.08), transparent 65%),
    linear-gradient(180deg, #FFF 0%, var(--paper) 100%);
  border:1px solid var(--rule-faint);
  transition:transform 1s var(--ease);
  display:grid; place-items:center;
}
/* ⭐ Light beam من فوق */
.piece__art::before{
  content:""; position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:42%; height:65%;
  background:linear-gradient(180deg, rgba(232,197,122,.28), rgba(212,168,89,.06) 55%, transparent 90%);
  filter:blur(20px);
  pointer-events:none; z-index:0;
}
/* ⭐ Plate shadow تحت المنتج */
.piece__art::after{
  content:""; position:absolute;
  bottom:22%; left:50%; transform:translateX(-50%);
  width:55%; height:5%;
  background:radial-gradient(ellipse, rgba(138,100,32,.30), transparent 70%);
  filter:blur(10px);
  pointer-events:none; z-index:0;
}
.piece__art .frame{ position:absolute; inset:16px; border:1px solid var(--rule-faint); pointer-events:none }
.piece__art .nº{
  position:absolute; top:24px; right:24px; z-index:3;
  font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold);
}
.piece__art .silhouette{ position:absolute; inset:0; display:grid; place-items:center; z-index:2 }
.silhouette svg{ width:62%; height:auto; color:var(--gold); opacity:.88; transition:transform 1s var(--ease) }
.piece:hover .silhouette svg{ transform:scale(1.03) }
/* ⭐ صورة المنتج: تتوسّط بشكل perfect وبـ shadow drop */
.piece__art > img{
  position:relative !important;
  width:78% !important; height:auto !important;
  max-height:62% !important;
  object-fit:contain !important;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 22px 28px rgba(20,17,12,.18));
  inset:auto !important;
  margin-top:-8% !important;
  z-index:2;
  transition:transform 1s var(--ease);
}
.piece:hover .piece__art > img{ transform:scale(1.03) translateY(-2px) }
/* ⭐ name-ar overlay مخفي تمامًا (الاسم يظهر في h3 فقط) — rules قوية لمنع cache issues */
.piece__art .name-ar,
.piece .name-ar,
.preview-grid .name-ar,
.tile .name-ar,
span.name-ar,
.name-ar{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:absolute !important;
  width:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.piece__info{ display:grid; gap:24px; max-width:46ch }
.piece__info .eyebrow{
  font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--gold);
  display:inline-flex; align-items:center; gap:12px;
}
.piece__info .eyebrow::before{ content:""; width:24px; height:1px; background:var(--gold) }
.piece__info h3{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem, 2.6vw, 2.6rem); line-height:1.12; color:var(--ink);
  letter-spacing:-.01em;
}
.piece__info h3 em{ font-style:normal; color:var(--gold) }
.piece__info > p{ margin:0; color:var(--ink-soft); font-size:16px; line-height:1.85 }
.piece__specs{
  display:grid; grid-template-columns:auto 1fr; gap:12px 28px; padding:22px 0;
  border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
}
.piece__specs dt{ font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--mute) }
.piece__specs dd{ margin:0; color:var(--ink); font-size:15px; font-weight:400 }
.piece__cta{
  display:inline-flex; align-items:center; gap:14px; padding:14px 0;
  font-family:var(--kufi); font-size:13px; font-weight:500;
  color:var(--ink); position:relative; align-self:start;
}
.piece__cta::after{
  content:""; position:absolute; right:0; bottom:6px; height:1px; width:100%; background:var(--gold);
  transform-origin:right; transform:scaleX(.4); transition:transform .6s var(--ease);
}
.piece__cta:hover::after{ transform:scaleX(1) }
.piece__cta .arrow{ width:36px; height:8px; color:var(--gold); transform:rotate(180deg); transition:transform .5s var(--ease) }
.piece__cta:hover .arrow{ transform:rotate(180deg) translateX(4px) }

/* ---------- ١٣. الورشة ---------- */
.atelier{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(48px,6vw,120px); align-items:start }
.atelier__art{
  aspect-ratio:5/6; border:1px solid var(--rule-faint); position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--off) 0%, var(--paper) 100%);
  position:sticky; top:110px;
}
.atelier__art .stamp{
  position:absolute; top:24px; left:24px;
  font-family:var(--kufi); font-size:10px; font-weight:600; color:var(--gold-deep);
  border:1px solid var(--rule); border-radius:50%;
  width:92px; height:92px; display:grid; place-items:center; text-align:center; line-height:1.5;
  background:rgba(255,255,255,.5); backdrop-filter:blur(4px);
}
.atelier__art .hand{
  position:absolute; right:8%; top:50%; transform:translateY(-50%);
  width:80%; aspect-ratio:1.2/1; color:var(--gold); opacity:.7;
}
.atelier__copy h2{
  margin:0 0 28px; font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem,3.6vw,3.6rem); line-height:1.1; color:var(--ink);
}
.atelier__copy h2 em{ font-style:normal; color:var(--gold) }
.atelier__copy p{ font-size:16.5px; line-height:1.9; color:var(--ink-soft); max-width:48ch; margin:0 0 18px }
.atelier__quote{
  margin-top:36px; padding:24px 28px 0 0; border-right:2px solid var(--gold);
  font-family:var(--display); font-size:1.6rem; line-height:1.6; color:var(--ink);
}
.atelier__quote span{ display:block; margin-top:14px; font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold) }
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:64px; padding-top:48px; border-top:1px solid var(--rule-soft) }
.stat{ display:grid; gap:6px }
.stat__num{ font-family:var(--display); font-size:clamp(2.6rem, 4.4vw, 4rem); color:var(--ink); line-height:1; letter-spacing:-.02em }
.stat__lbl{ font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--mute) }

/* ---------- ١٤. معاينة المتجر في الرئيسية ---------- */
.preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,56px) }
.preview-grid .tile{ display:flex; flex-direction:column; gap:18px; cursor:none }
.preview-grid .tile__art{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(212,168,89,.08), transparent 60%),
    linear-gradient(180deg, #FFF 0%, var(--paper) 100%);
  border:1px solid var(--rule-faint);
  transition:transform .9s var(--ease), border-color .5s var(--ease);
  display:grid; place-items:center;
}
.preview-grid .tile__art::before{
  content:""; position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:38%; height:55%;
  background:linear-gradient(180deg, rgba(232,197,122,.25), transparent 80%);
  filter:blur(18px);
  pointer-events:none; z-index:0;
}
.preview-grid .tile__art::after{
  content:""; position:absolute;
  bottom:20%; left:50%; transform:translateX(-50%);
  width:50%; height:4%;
  background:radial-gradient(ellipse, rgba(138,100,32,.28), transparent 70%);
  filter:blur(8px);
  pointer-events:none; z-index:0;
}
.preview-grid .tile__art > img{
  position:relative !important;
  width:75% !important; height:auto !important;
  max-height:65% !important;
  object-fit:contain !important;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 18px 22px rgba(20,17,12,.15));
  inset:auto !important;
  z-index:2;
  transition:transform .9s var(--ease);
}
.preview-grid .tile:hover .tile__art > img{ transform:translateY(-4px) }
.preview-grid .tile:hover .tile__art{ transform:translateY(-8px); border-color:var(--gold) }
.preview-grid .tile__art .nº{ position:absolute; top:14px; right:14px; font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold) }
.preview-grid .tile__art .silhouette{ position:absolute; inset:0; display:grid; place-items:center }
.preview-grid .tile__art .silhouette svg{ width:60%; color:var(--gold); transition:transform .8s var(--ease) }
.preview-grid .tile:hover .silhouette svg{ transform:scale(1.05) }
.preview-grid .tile__art::after{
  content:"اعرض القطعة ←"; position:absolute; bottom:0; right:0; left:0; padding:16px 20px;
  font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--ink);
  background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
  transform:translateY(100%); transition:transform .55s var(--ease);
  border-top:1px solid var(--rule-faint);
}
.preview-grid .tile:hover .tile__art::after{ transform:translateY(0) }
.preview-grid .tile__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:16px }
.preview-grid .tile__meta h4{ margin:0; font-family:var(--display); font-weight:400; font-size:24px; color:var(--ink); line-height:1.2 }
.preview-grid .tile__meta .price{ font-family:var(--kufi); font-size:14px; font-weight:600; color:var(--gold-deep); white-space:nowrap }
.preview-grid .tile__sub{ font-family:var(--kufi); font-size:12px; color:var(--mute) }

.shop-foot{
  margin-top:80px; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--rule-soft); padding-top:36px; gap:32px; flex-wrap:wrap;
}
.shop-foot p{ margin:0; font-family:var(--display); color:var(--ink-soft); max-width:42ch; line-height:1.6; font-size:1.3rem }

/* ---------- ١٥. الأزرار ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:20px 36px; border:1px solid var(--ink);
  font-family:var(--kufi); font-size:13px; font-weight:500;
  color:var(--ink); position:relative; overflow:hidden;
  transition:color .6s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .65s var(--ease);
}
.btn:hover{ color:var(--white) }
.btn:hover::before{ transform:translateY(0) }
.btn > *{ position:relative; z-index:1 }
.btn .arrow{ width:32px; height:8px; transform:rotate(180deg) }

/* ---------- ١٦. الفوتر (compact — أصغر ٦٠٪) ---------- */
.foot{
  position:relative; z-index:3;
  border-top:1px solid var(--rule-soft);
  padding:48px var(--gutter) 24px;
  background:var(--off);
}
.foot__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:36px;
  padding-bottom:32px; border-bottom:1px solid var(--rule-soft);
  align-items:start;
}
.foot__brand{ display:grid; gap:14px }
.foot__brand .row{ display:inline-flex; align-items:center; gap:12px }
.foot__brand .mark{ width:22px; height:26px; color:var(--gold) }
.foot__brand .word{ font-family:var(--kufi); font-weight:600; font-size:20px; color:var(--ink) }
.foot__brand p{ margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.7; max-width:32ch }
.foot__col h5{ margin:0 0 12px; font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold) }
.foot__col a{ display:block; padding:4px 0; color:var(--ink-soft); font-size:13.5px; transition:color .35s var(--ease), padding-right .35s var(--ease) }
.foot__col a:hover{ color:var(--ink); padding-right:6px }
.foot__news{ display:grid; gap:10px; min-width:240px }
.foot__news h5{ margin:0; font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold) }
.foot__news p{ margin:0 0 4px; color:var(--ink-soft); font-size:12.5px }
.foot__news form{ display:flex; border:1px solid var(--rule-soft) }
.foot__news input{
  flex:1; border:0; background:transparent; padding:10px 12px;
  font-family:var(--body); font-size:13px; color:var(--ink);
}
.foot__news input:focus{ outline:none }
.foot__news input::placeholder{ color:var(--mute) }
.foot__news button{
  padding:10px 16px; background:var(--ink); color:var(--white);
  font-family:var(--kufi); font-size:11px; font-weight:500; cursor:none;
  transition:background .3s var(--ease);
}
.foot__news button:hover{ background:var(--gold) }

.foot__bot{
  display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:16px;
  font-family:var(--kufi); font-size:10.5px; color:var(--mute); flex-wrap:wrap;
}
.foot__bot .socials{ display:inline-flex; gap:14px }
.foot__bot .socials a{ width:28px; height:28px; display:inline-grid; place-items:center; color:var(--ink-soft); transition:color .3s }
.foot__bot .socials a:hover{ color:var(--gold) }
.foot__bot .socials svg{ width:14px; height:14px }

/* ===================================================================== */
/*                       ١٧. المتجر (تصميم جديد)                          */
/* ===================================================================== */
.shop-head{
  padding:clamp(60px,7vw,110px) var(--gutter) clamp(28px,3vw,48px);
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end;
  border-bottom:1px solid var(--rule-faint);
}
.shop-head h1{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(2.8rem,6.5vw,6rem); line-height:1; color:var(--ink); letter-spacing:-.018em;
}
.shop-head h1 em{ font-style:normal; color:var(--gold) }
.shop-head .crumbs{
  font-family:var(--kufi); font-size:12px; color:var(--mute);
}
.shop-head .crumbs b{ color:var(--ink); font-weight:600 }
.shop-head .crumbs span{ margin:0 8px }

/* ----- شريط التصنيفات (التابز فوق) ----- */
.cat-strip{
  padding:24px var(--gutter); position:relative;
  border-bottom:1px solid var(--rule-faint);
  background:var(--off);
}
.cat-strip__inner{
  display:flex; gap:clamp(16px,2vw,36px); align-items:flex-start;
  overflow-x:auto; padding:8px 0 4px; scroll-snap-type:x mandatory;
}
.cat-strip__inner::-webkit-scrollbar{ height:2px }
.cat-strip__inner::-webkit-scrollbar-thumb{ background:var(--rule) }
.cat-card{
  flex:0 0 auto; display:grid; gap:10px; justify-items:center;
  text-align:center; cursor:none; scroll-snap-align:center;
  padding:8px 12px 12px;
  border:1px solid transparent; border-radius:8px;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.cat-card:hover, .cat-card.--active{ border-color:var(--rule); background:var(--white) }
.cat-card__art{
  width:clamp(80px, 9vw, 120px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--white), var(--paper));
  display:grid; place-items:center; position:relative;
  border:1px solid var(--rule-faint); overflow:hidden;
  transition:transform .55s var(--ease);
}
.cat-card:hover .cat-card__art{ transform:translateY(-4px) }
.cat-card__art svg{ width:60%; color:var(--gold); opacity:.85 }
.cat-card.--active .cat-card__art{ border-color:var(--gold) }
.cat-card.--active .cat-card__art::after{
  content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:24px; height:2px; background:var(--ink);
}
.cat-card__label{
  font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--ink);
}
.cat-strip__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:1px solid var(--rule-soft);
  background:var(--white); display:grid; place-items:center; color:var(--ink); z-index:2;
  transition:all .35s var(--ease);
}
.cat-strip__arrow:hover{ border-color:var(--gold); background:var(--gold); color:var(--white) }
.cat-strip__arrow.--prev{ right:8px }
.cat-strip__arrow.--next{ left:8px }
.cat-strip__arrow svg{ width:14px; height:14px }

/* ----- الـ layout: filters + grid ----- */
.shop-main{
  display:grid; grid-template-columns:280px 1fr;
  gap:clamp(28px,3vw,56px);
  padding:clamp(32px,4vw,64px) var(--gutter);
  align-items:start;
}

/* ----- الفلاتر ----- */
.filters{
  position:sticky; top:120px;
  display:grid; gap:8px;
  padding-bottom:20px;
}
.filters__head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-bottom:14px; border-bottom:1px solid var(--rule-soft);
  margin-bottom:8px;
}
.filters__head h3{
  margin:0; font-family:var(--display); font-weight:400; font-size:1.6rem; color:var(--ink);
}
.filters__head button{
  padding:9px 14px; border:1px solid var(--rule-soft);
  font-family:var(--kufi); font-size:11px; font-weight:500; color:var(--ink-soft);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.filters__head button:hover{ border-color:var(--ink); color:var(--ink) }

.filter-group{ border-bottom:1px solid var(--rule-soft); padding:14px 0 }
.filter-group:last-child{ border-bottom:0 }
.filter-group__head{
  display:flex; justify-content:space-between; align-items:center; cursor:none;
  font-family:var(--kufi); font-size:13px; font-weight:600; color:var(--ink);
  padding:6px 0;
}
.filter-group__head .chev{
  width:14px; height:14px; color:var(--ink-soft); transition:transform .35s var(--ease);
}
.filter-group.--open .filter-group__head .chev{ transform:rotate(180deg) }
.filter-group__body{
  display:grid; gap:8px; padding-top:14px;
  max-height:0; overflow:hidden;
  transition:max-height .5s var(--ease), padding-top .35s var(--ease), opacity .35s var(--ease);
  opacity:0;
}
.filter-group.--open .filter-group__body{ max-height:520px; opacity:1 }

/* السعر */
.range{
  display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; margin-bottom:12px;
}
.range input{
  font-family:var(--kufi); font-size:12px; padding:10px;
  border:1px solid var(--rule-soft); background:var(--white); color:var(--ink); width:100%;
}
.range input:focus{ outline:none; border-color:var(--ink) }
.range .ok{
  padding:10px 14px; background:var(--ink); color:var(--white);
  font-family:var(--kufi); font-size:11px; font-weight:500;
}
.range-slider{
  position:relative; height:3px; background:var(--rule-soft);
  margin:14px 6px 4px;
}
.range-slider::before, .range-slider::after{
  content:""; position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  background:var(--white); border:1.5px solid var(--ink); transform:translateY(-50%);
}
.range-slider::before{ right:10% }
.range-slider::after{ right:75% }
.range-slider .track{
  position:absolute; top:0; bottom:0; right:10%; left:25%; background:var(--ink);
}

/* checkbox list */
.checks{ display:grid; gap:6px }
.check{
  display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:center;
  padding:6px 0; cursor:none;
  font-family:var(--kufi); font-size:13px; color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.check:hover{ color:var(--ink) }
.check__box{
  width:18px; height:18px; border:1px solid var(--rule);
  display:grid; place-items:center; background:var(--white);
  transition:all .3s var(--ease);
}
.check__box::after{
  content:""; width:8px; height:4px; border:1.5px solid var(--white); border-top:0; border-right:0;
  transform:rotate(-45deg) translateY(-1px); opacity:0;
}
.check.--on .check__box{ background:var(--ink); border-color:var(--ink) }
.check.--on .check__box::after{ opacity:1 }
.show-all{
  padding:10px 0; text-align:center; background:var(--paper);
  font-family:var(--kufi); font-size:11px; font-weight:500; color:var(--ink);
  margin-top:6px; transition:background .3s;
}
.show-all:hover{ background:var(--line) }

/* اللون swatches */
.swatches{ display:flex; flex-wrap:wrap; gap:10px }
.swatch{
  width:26px; height:26px; border-radius:50%; cursor:none;
  border:1.5px solid transparent; position:relative;
  transition:transform .3s var(--ease);
}
.swatch::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--ink); opacity:0; transition:opacity .3s var(--ease);
}
.swatch:hover{ transform:scale(1.1) }
.swatch.--on::after{ opacity:1 }

/* ----- المحتوى الرئيسي (الـ grid) ----- */
.shop-content{ display:grid; gap:24px; min-width:0 }
.shop-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--rule-soft);
  font-family:var(--kufi); font-size:12px;
}
.shop-toolbar .count{ color:var(--ink); font-weight:600; font-size:13px }
.shop-toolbar .count span{ color:var(--mute); font-weight:400; margin-right:6px }
.shop-toolbar .sort{
  display:inline-flex; align-items:center; gap:10px; color:var(--ink-soft);
  border:1px solid var(--rule-soft); padding:10px 16px; cursor:none;
}
.shop-toolbar .sort b{ color:var(--ink); font-weight:600 }
.shop-toolbar .sort svg{ width:10px; height:10px }

/* الـ grid */
.products{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px,2vw,32px) clamp(16px,1.5vw,24px);
}
.product{
  display:grid; gap:10px; cursor:none; position:relative;
}
.product__art{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(180deg, var(--off), var(--paper));
  border:1px solid var(--rule-faint);
  transition:border-color .5s var(--ease);
}
.product:hover .product__art{ border-color:var(--rule) }
.product__img{ position:absolute; inset:0; display:grid; place-items:center; transition:transform .8s var(--ease) }
.product__img svg{ width:55%; color:var(--gold); opacity:.85 }
.product:hover .product__img{ transform:scale(1.04) }
.product__badge{
  position:absolute; top:12px; right:12px; z-index:2;
  background:var(--ink); color:var(--white);
  font-family:var(--kufi); font-size:10px; font-weight:600;
  padding:6px 12px; letter-spacing:.02em;
}
.product__badge.--sale{ background:#A33D2D }
.product__heart{
  position:absolute; top:12px; left:12px; z-index:2;
  width:32px; height:32px; border-radius:50%; background:var(--white);
  display:grid; place-items:center; color:var(--ink); cursor:none;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.product__heart:hover{ background:var(--ink); color:var(--white) }
.product__heart.--on{ background:var(--gold); color:var(--white) }
.product__heart svg{ width:14px; height:14px }
.product__see{
  position:absolute; left:50%; bottom:14px; transform:translate(-50%, 16px);
  background:var(--ink); color:var(--white);
  font-family:var(--kufi); font-size:11px; font-weight:500;
  padding:10px 18px; display:inline-flex; align-items:center; gap:10px;
  opacity:0; transition:opacity .45s var(--ease), transform .55s var(--ease);
  white-space:nowrap;
}
.product:hover .product__see{ opacity:1; transform:translate(-50%, 0) }
.product__see svg{ width:14px; height:8px }
.product__price{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--kufi); font-size:14px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:2px; width:fit-content;
}
.product__price .old{ font-size:11.5px; color:var(--mute); text-decoration:line-through; border:0 }
.product__name{ font-family:var(--display); font-size:17px; color:var(--ink-soft); margin:0 }
.product__swatches{ display:flex; gap:6px; margin-top:4px }
.product__swatches span{ width:12px; height:12px; border-radius:50%; border:1px solid var(--rule-soft) }

/* Pagination */
.pagination{
  margin-top:48px;
  display:flex; flex-direction:column; gap:18px; align-items:center;
}
.pagination__nav{
  display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%;
  border:1px solid var(--rule-soft);
}
.pagination__nav button{
  padding:18px; font-family:var(--kufi); font-size:13px; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background .35s var(--ease); cursor:none;
}
.pagination__nav button:first-child{ border-left:1px solid var(--rule-soft) }
.pagination__nav button:hover{ background:var(--paper) }
.pagination__nav svg{ width:12px; height:10px }
.pagination__nums{ display:inline-flex; gap:4px; align-items:center }
.pagination__nums button{
  min-width:36px; height:36px; padding:0 10px; font-family:var(--kufi); font-size:13px; font-weight:500;
  color:var(--ink-soft); transition:all .35s var(--ease); cursor:none;
}
.pagination__nums button:hover{ color:var(--ink) }
.pagination__nums button.--on{ background:var(--ink); color:var(--white) }

/* ----- المقترحات ----- */
.recommend{
  padding:clamp(60px,6vw,100px) var(--gutter);
  background:var(--off); border-top:1px solid var(--rule-faint);
}
.recommend__head{
  display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px;
  flex-wrap:wrap;
}
.recommend__head h2{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 3.5vw, 3.2rem); line-height:1.05; color:var(--ink);
}
.recommend__head h2 em{ font-style:normal; color:var(--gold) }
.recommend__head .arrows{ display:inline-flex; gap:10px }
.recommend__head .arrows button{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--rule-soft);
  display:grid; place-items:center; color:var(--ink); cursor:none;
  transition:all .35s var(--ease);
}
.recommend__head .arrows button:hover{ border-color:var(--gold); background:var(--gold); color:var(--white) }
.recommend__head .arrows svg{ width:14px; height:14px }
.recommend__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px,2vw,32px) clamp(16px,1.5vw,24px) }

/* ===================================================================== */
/*           ١٨. صفحة تواصل (Linktree بريميوم — حركات فنّيّة)              */
/* ===================================================================== */
.contact{
  position:relative; min-height:calc(100vh - 90px);
  padding:0; overflow:hidden;
  background:var(--white);
}

/* ----- (أ) خلفية mesh متحرّكة ----- */
.contact__mesh{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.contact__mesh::before, .contact__mesh::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.55;
  animation:meshFloat 22s ease-in-out infinite;
}
.contact__mesh::before{
  width:640px; height:640px; top:-200px; right:-120px;
  background:radial-gradient(circle, rgba(212,168,89,.40), transparent 60%);
}
.contact__mesh::after{
  width:520px; height:520px; bottom:-120px; left:-160px;
  background:radial-gradient(circle, rgba(185,140,60,.28), transparent 60%);
  animation-delay:-11s;
}
@keyframes meshFloat{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%{    transform:translate(80px,-50px) scale(1.12) }
  66%{    transform:translate(-50px,80px) scale(.95) }
}

/* ----- (ب) جسيمات ذهبيّة عائمة ----- */
.particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden }
.particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--gold); opacity:0;
  box-shadow:0 0 8px rgba(212,168,89,.6);
  animation:particleRise var(--dur,14s) linear var(--delay,0s) infinite;
}
@keyframes particleRise{
  0%   { transform:translateY(110vh) translateX(0)   scale(0); opacity:0 }
  10%  { opacity:.7; transform:translateY(95vh) translateX(0) scale(1) }
  50%  { transform:translateY(50vh) translateX(40px) scale(1.1) }
  90%  { opacity:.7 }
  100% { transform:translateY(-10vh) translateX(-40px) scale(0); opacity:0 }
}

/* ----- (ج) Wordmark ضخم في الخلفيّة ----- */
.contact__bg-word{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%) rotate(-4deg);
  font-family:var(--display); font-weight:400;
  font-size:clamp(14rem, 28vw, 30rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(185,140,60,.10);
  letter-spacing:-.04em; user-select:none; z-index:0;
  white-space:nowrap; animation:wordDrift 30s ease-in-out infinite;
}
@keyframes wordDrift{
  0%,100%{ transform:translate(-50%,-50%) rotate(-4deg) }
  50%   { transform:translate(-50%,-50%) rotate(-3deg) translateX(20px) }
}

/* ----- (د) Floating share button ----- */
.contact__share{
  position:fixed; top:96px; left:24px; z-index:40;
  width:56px; height:56px; border-radius:50%;
  background:var(--ink); color:var(--white);
  display:grid; place-items:center;
  box-shadow:0 18px 40px -14px rgba(20,17,12,.45);
  transition:transform .6s var(--ease), background .55s var(--ease);
}
.contact__share::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--gold); opacity:.6;
  animation:sharePulse 2.6s ease-out infinite;
}
@keyframes sharePulse{
  0%   { transform:scale(1);   opacity:.7 }
  100% { transform:scale(1.8); opacity:0 }
}
.contact__share:hover{ background:var(--gold); transform:scale(1.1) rotate(10deg) }
.contact__share svg{ width:20px; height:20px; position:relative; z-index:1 }

/* ----- (هـ) البانر ----- */
.contact__banner{
  position:relative; z-index:3;
  padding:clamp(50px,6vw,90px) var(--gutter) clamp(30px,4vw,50px);
  text-align:center;
}

/* Live ribbon */
.live-ribbon{
  display:inline-flex; align-items:center; gap:12px;
  padding:9px 18px;
  background:var(--white); border:1px solid var(--rule-soft);
  font-family:var(--kufi); font-size:11.5px; font-weight:500; color:var(--ink-soft);
  margin-bottom:34px;
  opacity:0; transform:translateY(-10px);
  animation:fadeDown .9s var(--ease-out) .2s forwards;
}
.live-ribbon .dot{
  width:8px; height:8px; border-radius:50%; background:#3D8B3D;
  box-shadow:0 0 0 0 rgba(61,139,61,.5);
  animation:livePulse 2s ease-out infinite;
}
@keyframes livePulse{
  0%  { box-shadow:0 0 0 0 rgba(61,139,61,.6) }
  100%{ box-shadow:0 0 0 12px rgba(61,139,61,0) }
}
.live-ribbon b{ color:var(--ink); font-weight:600 }
.live-ribbon .count{
  color:var(--gold); font-weight:600; font-family:var(--display); font-size:14px;
  display:inline-flex; align-items:center; gap:4px;
}
@keyframes fadeDown { to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn   { to { opacity:1 } }
@keyframes fadeUp   { to { opacity:1; transform:translateY(0) } }

/* Avatar مع حلقات تدور */
.contact__avatar-wrap{
  position:relative; display:inline-grid; place-items:center;
  margin-bottom:28px;
  opacity:0; animation:fadeIn 1s var(--ease-out) .4s forwards;
}
.contact__avatar{
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 30% 28%, var(--white), var(--paper));
  display:grid; place-items:center;
  border:1px solid var(--rule); position:relative; z-index:3;
  box-shadow:
    0 30px 80px -30px rgba(138,100,32,.35),
    inset 0 0 30px rgba(255,255,255,.5);
}
.contact__avatar svg{ width:54%; color:var(--gold) }
.contact__avatar svg path[stroke]{
  stroke-dasharray:200; stroke-dashoffset:200;
  animation:drawStroke 2s ease-out 1.1s forwards;
}
@keyframes drawStroke{ to { stroke-dashoffset:0 } }
.contact__avatar-ring{
  position:absolute; border-radius:50%; pointer-events:none;
}
.contact__avatar-ring.r1{ inset:-14px; border:1px solid rgba(185,140,60,.30); animation:ringRot 28s linear infinite }
.contact__avatar-ring.r2{ inset:-30px; border:1px dashed rgba(185,140,60,.22); animation:ringRot 40s linear infinite reverse }
.contact__avatar-ring.r3{ inset:-48px; border:1px solid rgba(185,140,60,.12); animation:ringRot 55s linear infinite }
.contact__avatar-ring.r3::before{
  content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px var(--gold);
}
@keyframes ringRot{ to { transform:rotate(360deg) } }

/* الاسم - حروف stagger */
.contact__name{
  margin:0 0 10px; font-family:var(--display); font-weight:400;
  font-size:clamp(3rem, 6vw, 5rem); line-height:1; color:var(--ink); letter-spacing:-.02em;
}
.contact__name span{
  display:inline-block; opacity:0; transform:translateY(110%) rotateX(-30deg);
  animation:nameIn 1s var(--ease-out) forwards;
  transform-origin:bottom; will-change:transform;
}
@keyframes nameIn { to { opacity:1; transform:translateY(0) rotateX(0) } }

/* Handle */
.contact__handle{
  font-family:var(--kufi); font-size:13px; font-weight:500; color:var(--gold);
  display:inline-flex; align-items:center; gap:14px;
  margin-bottom:22px;
  opacity:0; animation:fadeIn 1s var(--ease-out) 1.7s forwards;
}
.contact__handle::before, .contact__handle::after{
  content:""; width:28px; height:1px; background:var(--gold);
}

/* Bio */
.contact__bio{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.15rem, 1.5vw, 1.45rem); line-height:1.65; color:var(--ink-soft);
  max-width:42ch; margin:0 auto 26px;
  opacity:0; animation:fadeIn 1s var(--ease-out) 1.9s forwards;
}

/* Quick mini icons */
.contact__quick{
  display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeIn 1s var(--ease-out) 2.1s forwards;
}
.contact__quick a{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:var(--white); border:1px solid var(--rule);
  transition:all .55s var(--ease); position:relative; overflow:hidden;
}
.contact__quick a::before{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.contact__quick a:hover{ color:var(--gold-glow); border-color:var(--ink); transform:translateY(-4px) rotate(-5deg) }
.contact__quick a:hover::before{ transform:translateY(0) }
.contact__quick a svg{ width:18px; height:18px; position:relative; z-index:1; transition:transform .4s var(--ease) }
.contact__quick a:hover svg{ transform:scale(1.15) }

/* Stats - cards منفصلة بـ hover effects */
.contact__stats{
  position:relative; z-index:3;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  max-width:680px; margin:42px auto 0;
  opacity:0; animation:fadeUp 1s var(--ease-out) 2.3s forwards;
  transform:translateY(20px);
}
.contact__stats > div{
  text-align:center; padding:20px 12px;
  background:var(--white); border:1px solid var(--rule-faint);
  transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
  position:relative; overflow:hidden;
}
.contact__stats > div::after{
  content:""; position:absolute; right:0; left:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transition:transform .6s var(--ease);
}
.contact__stats > div:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 16px 30px -16px rgba(138,100,32,.28) }
.contact__stats > div:hover::after{ transform:scaleX(1) }
.contact__stats .num{
  font-family:var(--display); font-size:2.2rem; color:var(--ink); line-height:1;
  display:block; margin-bottom:6px;
}
.contact__stats .lbl{ font-family:var(--kufi); font-size:11px; font-weight:500; color:var(--mute); letter-spacing:.02em }

/* ----- (و) قائمة الروابط البريميوم ----- */
.contact__links{
  position:relative; z-index:3;
  max-width:620px; margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--gutter);
  display:grid; gap:16px;
  perspective:1600px;
}

.lk{
  position:relative; display:grid; grid-template-columns:60px 1fr auto;
  align-items:center; gap:18px;
  padding:20px 24px;
  background:var(--white); border:1px solid var(--rule-soft);
  transition:transform .55s var(--ease-out), border-color .55s var(--ease), box-shadow .55s var(--ease);
  overflow:hidden; transform-style:preserve-3d; will-change:transform;
}
.lk__inner{ display:contents }

/* Sheen ذهبي diagonal */
.lk::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(212,168,89,.28) 50%, transparent 70%);
  transform:translateX(150%); transition:transform .9s var(--ease);
  pointer-events:none;
}
.lk:hover::before{ transform:translateX(-150%) }

/* Dot pattern subtle */
.lk::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(185,140,60,.18) 1px, transparent 0);
  background-size:14px 14px;
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.lk:hover::after{ opacity:1 }

.lk:hover{
  border-color:var(--gold);
  box-shadow:0 30px 50px -22px rgba(138,100,32,.32), 0 0 0 1px var(--gold) inset;
}

.lk__ico{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:var(--paper); color:var(--ink);
  transition:background .55s var(--ease), color .55s var(--ease), transform .55s var(--ease);
  z-index:2;
}
.lk__ico::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--gold); opacity:0; transform:scale(.8);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.lk:hover .lk__ico{ background:var(--ink); color:var(--gold-glow); transform:scale(1.06) rotate(-4deg) }
.lk:hover .lk__ico::after{ opacity:1; transform:scale(1) }
.lk__ico svg{ width:20px; height:20px; transition:transform .5s var(--ease) }

/* أيقونات micro-animations فردية */
.lk:hover .lk__ico.ico-wa svg{ animation:wiggle .6s ease-in-out }
.lk:hover .lk__ico.ico-ig svg{ animation:pulse .8s ease-in-out }
.lk:hover .lk__ico.ico-mail svg path:last-child{ animation:flap .9s ease-in-out }
.lk:hover .lk__ico.ico-pin svg{ animation:wobble .8s ease-in-out }
.lk:hover .lk__ico.ico-doc svg{ animation:scribble .8s ease-in-out }
@keyframes wiggle { 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-10deg) } 75%{ transform:rotate(10deg) } }
@keyframes pulse  { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.18) } }
@keyframes flap   { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes wobble { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) rotate(8deg) } }
@keyframes scribble { 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(6deg) translateY(-2px) } }

.lk__main{ display:grid; gap:4px; padding:0 16px 0 0; z-index:2 }
.lk__name{
  font-family:var(--kufi); font-size:15px; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .5s var(--ease);
}
.lk:hover .lk__name{ transform:translateX(-4px) }
.lk__verified{ color:var(--gold); width:14px; height:14px; flex-shrink:0; animation:badgePulse 3s ease-in-out infinite }
@keyframes badgePulse{ 0%,100%{ filter:drop-shadow(0 0 0 transparent) } 50%{ filter:drop-shadow(0 0 6px rgba(212,168,89,.7)) } }
.lk__desc{ font-family:var(--body); font-size:13px; color:var(--mute); font-weight:300; line-height:1.55 }

.lk__meta{ display:grid; justify-items:end; gap:8px; z-index:2; align-items:center }
.lk__pill{
  background:var(--paper); color:var(--ink-soft);
  padding:6px 14px; border-radius:999px; font-weight:500;
  font-family:var(--kufi); font-size:11px; white-space:nowrap;
  transition:background .55s var(--ease), color .55s var(--ease);
}
.lk:hover .lk__pill{ background:var(--gold); color:var(--white) }

.lk__arr{ color:var(--ink); width:20px; height:14px; transition:transform .55s var(--ease) }
.lk:hover .lk__arr{ transform:translateX(-10px) }

/* Stagger reveal للروابط */
.lk{ opacity:0; transform:translateY(60px) rotateX(-12deg) }
.lk.--in{ opacity:1; transform:translateY(0) rotateX(0); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out) }

/* Foot */
.contact__foot{
  position:relative; z-index:3;
  text-align:center; padding:28px var(--gutter) 36px;
  border-top:1px solid var(--rule-faint);
  font-family:var(--kufi); font-size:11.5px; color:var(--mute);
}
.contact__foot .accent{
  color:var(--gold); display:block; margin-top:6px;
  font-size:14px; font-family:var(--display); font-style:italic;
}

/* Toast (للـ share) */
.toast{
  position:fixed; top:calc(96px + 70px); left:24px; z-index:41;
  background:var(--ink); color:var(--white);
  padding:12px 18px;
  font-family:var(--kufi); font-size:12px; font-weight:500;
  box-shadow:0 16px 36px -16px rgba(20,17,12,.4);
  opacity:0; transform:translateY(-8px) scale(.95); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.--on{ opacity:1; transform:translateY(0) scale(1) }

/* ---------- ١٩. Responsive ---------- */
@media (max-width: 1200px){
  .recommend__grid{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width: 1080px){
  .hdr{ grid-template-columns:auto 1fr auto }
  .hdr__nav{ display:none }
  .hero{ grid-template-columns:1fr; min-height:auto; padding-top:clamp(40px,8vw,80px); padding-bottom:clamp(40px,8vw,80px) }
  .hero__stage{ height:min(60vh, 500px); order:-1 }
  .hero__season{ position:static; margin-bottom:16px; font-size:clamp(3.5rem, 16vw, 6rem) }
  .manifesto, .atelier{ grid-template-columns:1fr; gap:48px }
  .atelier__art{ position:static }
  .piece{ grid-template-columns:1fr; gap:32px }
  .piece:nth-child(even){ direction:rtl }
  .preview-grid{ grid-template-columns:1fr 1fr }
  .shop-main{ grid-template-columns:1fr }
  .filters{ position:static; padding-bottom:0; border-bottom:1px solid var(--rule-soft); margin-bottom:24px }
  .products{ grid-template-columns:repeat(2, 1fr) }
  .recommend__grid{ grid-template-columns:repeat(2, 1fr) }
  .foot__top{ grid-template-columns:1fr 1fr; gap:28px }
  .stats{ grid-template-columns:repeat(2,1fr) }
}
/* Responsive for new views */
@media (max-width: 1080px){
  .login-grid, .cart-grid, .checkout-grid{ grid-template-columns:1fr !important }
  .wishlist-grid{ grid-template-columns:repeat(2,1fr) !important }
  .account-cards{ grid-template-columns:repeat(2,1fr) !important }
}

@media (max-width: 640px){
  :root{ --gutter:18px }
  .hdr__brand .word{ font-size:18px }
  .hero__title{ font-size:clamp(2.8rem, 11vw, 4.4rem) }
  .preview-grid, .products, .recommend__grid{ grid-template-columns:1fr 1fr; gap:14px }
  .foot__top{ grid-template-columns:1fr }
  .foot__bot{ flex-direction:column; text-align:center; gap:10px }
  .sec__head{ grid-template-columns:1fr; gap:14px }
  .sec__rule{ display:none }
  .stats{ grid-template-columns:1fr 1fr }
  .giant-marquee__track{ font-size:clamp(3.5rem, 16vw, 6rem) }
  .contact__stats{ grid-template-columns:repeat(2,1fr) }
  .contact__share{ top:auto; bottom:24px; left:24px }
  .contact__avatar{ width:120px; height:120px }
  .contact__bg-word{ font-size:clamp(8rem,40vw,16rem) }
  .shop-head{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

/* =====================================================================
   ⭐ Reveal Animation System (IntersectionObserver-based)
   ===================================================================== */
[data-anim="fade-up"]{
  opacity:0;
  transform:translateY(40px);
  filter:blur(4px);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1.1s var(--ease-out);
  will-change:opacity, transform, filter;
}
[data-anim="fade-up"].--rah-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Stagger للعناصر الأخوات */
[data-anim="fade-up"].--rah-in{ transition-delay:0s }
[data-anim="fade-up"]:nth-child(2).--rah-in{ transition-delay:.1s }
[data-anim="fade-up"]:nth-child(3).--rah-in{ transition-delay:.2s }
[data-anim="fade-up"]:nth-child(4).--rah-in{ transition-delay:.3s }

/* =====================================================================
   ⭐ Trust Strip (قيم الدار — تحت الـ Hero)
   ===================================================================== */
.trust-strip{
  position:relative; z-index:2;
  padding:clamp(24px,2.6vw,40px) var(--gutter);
  background:var(--white);
  border-bottom:1px solid var(--rule-faint);
}
.trust-strip__inner{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px,2.2vw,32px);
  max-width:1320px; margin:0 auto;
}
.trust-item{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  align-items:center; padding:0;
}
.trust-item svg{
  width:24px; height:24px; color:var(--gold);
  flex-shrink:0;
}
.trust-item h4{
  margin:0 0 2px;
  font-family:var(--display); font-weight:400; font-size:.98rem;
  color:var(--ink); line-height:1.2;
}
.trust-item p{
  margin:0;
  font-family:var(--body); font-size:11.5px; color:var(--ink-soft);
  line-height:1.5;
}

/* =====================================================================
   ⭐ Process Steps (كيف نَعمل)
   ===================================================================== */
.process-sec{ background:var(--white) }
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(24px,3vw,56px);
  counter-reset:process;
  position:relative;
}
/* الخط الذهبي الـ subtle بين الـ steps */
.process-grid::before{
  content:""; position:absolute; top:30px; right:5%; left:5%;
  height:1px; background:linear-gradient(90deg, transparent, var(--rule), transparent);
  z-index:0;
}
.process-step{
  position:relative; z-index:1;
  display:grid; gap:14px;
  text-align:right;
}
.process-step__num{
  display:inline-grid; place-items:center;
  width:60px; height:60px; border-radius:50%;
  background:var(--white); border:1px solid var(--rule);
  font-family:var(--display); font-size:1.4rem; color:var(--gold);
  transition:all .55s var(--ease);
}
.process-step:hover .process-step__num{
  background:var(--ink); color:var(--gold-bright,#D4A859);
  transform:scale(1.06);
}
.process-step h3{
  margin:8px 0 0;
  font-family:var(--display); font-weight:400; font-size:1.4rem;
  color:var(--ink); line-height:1.2;
}
.process-step p{
  margin:0;
  font-family:var(--body); font-size:14.5px; line-height:1.75;
  color:var(--ink-soft); max-width:32ch;
}

/* =====================================================================
   ⭐ CTA Strip (Newsletter قبل الفوتر)
   ===================================================================== */
.cta-strip{
  position:relative;
  padding:clamp(56px,7vw,100px) var(--gutter);
  background:var(--ink); color:var(--white);
  overflow:hidden;
}
.cta-strip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 400px at 80% 30%, rgba(212,168,89,.18), transparent 60%),
    radial-gradient(600px 400px at 10% 80%, rgba(185,140,60,.12), transparent 60%);
}
.cta-strip__inner{
  position:relative;
  display:grid; grid-template-columns:1.2fr 1fr;
  align-items:center; gap:clamp(32px,5vw,72px);
  max-width:1400px; margin:0 auto;
}
.cta-strip h2{
  margin:0 0 12px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  line-height:1.15; color:var(--white);
}
.cta-strip h2 em{ font-style:normal; color:var(--gold-bright,#D4A859) }
.cta-strip p{
  margin:0;
  font-family:var(--body); font-weight:300; font-size:15.5px;
  color:rgba(255,255,255,.7); line-height:1.7; max-width:42ch;
}
.cta-strip__form{
  display:flex; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.cta-strip__form input{
  flex:1; min-width:0;
  padding:18px 22px; background:transparent; border:0;
  color:var(--white); font-family:var(--body); font-size:14.5px;
}
.cta-strip__form input:focus{ outline:none; background:rgba(255,255,255,.04) }
.cta-strip__form input::placeholder{ color:rgba(255,255,255,.45) }
.cta-strip__form button{
  padding:18px 32px;
  background:var(--gold); color:var(--ink);
  font-family:var(--kufi); font-size:13px; font-weight:600;
  border:0; cursor:pointer; white-space:nowrap;
  transition:background .35s var(--ease);
}
.cta-strip__form button:hover{ background:var(--gold-bright,#D4A859) }

/* =====================================================================
   ⭐ Hero Carousel
   ===================================================================== */
.hero-carousel{ position:relative; overflow:hidden }
.hero-slides{
  display:flex; width:100%;
  transition:transform .8s var(--ease-out);
}
.hero-slide{
  flex:0 0 100%; width:100%; min-width:0;
  display:grid; grid-template-columns:1fr 1.15fr;
  align-items:center; gap:clamp(32px,5vw,80px);
  padding:clamp(40px,5vw,80px) var(--gutter) clamp(60px,7vw,120px);
  min-height:calc(100vh - 90px);
  position:relative; overflow:hidden;
}

/* Navigation arrows */
.hero-arrows{
  position:absolute; bottom:clamp(20px, 3vw, 40px); left:var(--gutter);
  display:flex; gap:8px; z-index:10;
}
.hero-arrow{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--rule); background:var(--white);
  display:grid; place-items:center; color:var(--ink);
  cursor:pointer; transition:all .35s var(--ease);
}
.hero-arrow:hover{ background:var(--ink); color:var(--white); border-color:var(--ink) }
.hero-arrow svg{ width:14px; height:14px }
.hero-arrow:disabled{ opacity:.35; pointer-events:none }

/* Dots */
.hero-dots-nav{
  position:absolute; bottom:clamp(28px, 3.5vw, 48px); left:50%;
  transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--rule); border:0; padding:0; cursor:pointer;
  transition:all .35s var(--ease);
}
.hero-dot:hover{ background:var(--gold) }
.hero-dot.--on{ background:var(--ink); width:28px; border-radius:4px }

/* Counter */
.hero-counter{
  position:absolute; bottom:clamp(28px, 3.5vw, 48px); right:var(--gutter); z-index:10;
  display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--display); font-size:14px; color:var(--ink-soft);
}
.hero-counter__current{ color:var(--ink); font-size:18px }
.hero-counter__sep{ color:var(--mute); font-size:14px }
.hero-counter__total{ color:var(--mute); font-size:12px }

/* Mobile: arrows أصغر، counter مخفي */
@media (max-width:900px){
  .hero-slide{ grid-template-columns:1fr !important; min-height:auto !important }
  .hero-arrows{ bottom:auto; top:calc(45vh + 20px); left:50%; transform:translateX(-50%) }
  .hero-arrow{ width:40px; height:40px }
  .hero-dots-nav{ bottom:14px }
  .hero-counter{ display:none }
}

/* =====================================================================
   ⭐ Mobile Drawer (Hamburger menu)
   ===================================================================== */
.rah-drawer{
  position:fixed; inset:0; z-index:200;
  visibility:hidden; pointer-events:none;
  overflow:hidden; /* ⭐ يمنع البانل المتزحلق برّه الشاشة من عمل overflow أفقي */
}
.rah-drawer.--open{ visibility:visible; pointer-events:auto }

.rah-drawer__overlay{
  position:absolute; inset:0; background:rgba(20,17,12,.55);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .4s var(--ease);
}
.rah-drawer.--open .rah-drawer__overlay{ opacity:1 }

.rah-drawer__panel{
  position:absolute; top:0; bottom:0; right:0;
  width:min(86vw, 360px); background:var(--white);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  box-shadow:-20px 0 60px -20px rgba(20,17,12,.25);
}
.rah-drawer.--open .rah-drawer__panel{ transform:translateX(0) }

.rah-drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--rule-soft);
}
.rah-drawer__brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none;
}
.rah-drawer__brand .mark{ width:20px; height:24px; color:var(--gold) }
.rah-drawer__brand span{ font-family:var(--kufi); font-weight:600; font-size:18px; color:var(--ink) }
.rah-drawer__close{
  width:36px; height:36px; cursor:pointer;
  background:transparent; border:0; display:grid; place-items:center;
  color:var(--ink-soft); border-radius:50%;
  transition:background .3s var(--ease);
}
.rah-drawer__close:hover{ background:var(--paper) }
.rah-drawer__close svg{ width:16px; height:16px }

.rah-drawer__nav{ flex:1; overflow-y:auto; padding:8px 0 }
.rah-drawer__nav > a{
  display:block; padding:16px 24px;
  font-family:var(--display); font-size:1.4rem; color:var(--ink);
  border-bottom:1px solid var(--rule-faint);
  text-decoration:none;
  transition:background .3s var(--ease), padding-right .3s var(--ease);
}
.rah-drawer__nav > a:hover{ background:var(--paper); padding-right:32px }

.rah-drawer__details{
  border-bottom:1px solid var(--rule-faint);
}
.rah-drawer__details > summary{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; cursor:pointer;
  font-family:var(--display); font-size:1.4rem; color:var(--ink);
  list-style:none;
}
.rah-drawer__details > summary::-webkit-details-marker{ display:none }
.rah-drawer__details > summary svg{ color:var(--ink-soft); transition:transform .3s var(--ease) }
.rah-drawer__details[open] > summary svg{ transform:rotate(180deg) }
.rah-drawer__subs{
  background:var(--paper); padding:8px 0;
}
.rah-drawer__subs a{
  display:flex; justify-content:space-between;
  padding:12px 32px;
  font-family:var(--kufi); font-size:13.5px; color:var(--ink-soft);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.rah-drawer__subs a:hover{ color:var(--gold) }
.rah-drawer__subs a small{ color:var(--mute); font-size:11px }

.rah-drawer__foot{
  padding:20px 24px; border-top:1px solid var(--rule-soft);
  display:grid; gap:10px;
}
.rah-drawer__btn{
  display:block; padding:14px; text-align:center;
  background:var(--ink); color:var(--white);
  font-family:var(--kufi); font-size:13px; font-weight:500;
  text-decoration:none;
  transition:background .3s var(--ease);
}
.rah-drawer__btn:nth-child(2){ background:var(--gold) }
.rah-drawer__btn:hover{ background:var(--gold-bright,#D4A859) }

/* =====================================================================
   ⭐ Mobile fixes
   ===================================================================== */
@media (max-width: 900px){
  /* Hamburger يظهر، الـ desktop nav يختفي */
  .hdr__burger{ display:flex }
  .hdr__nav{ display:none }
  .hdr{ grid-template-columns:auto 1fr auto; gap:16px; padding:16px var(--gutter) }

  /* Loader centering — لازم يبقى دائمًا في النص */
  .loader{ place-items:center !important }
  .loader__inner{ margin:0 auto !important }

  /* Hero أصغر و أنظف على الموبايل */
  .hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:24px var(--gutter) 60px !important;
    gap:24px !important;
  }
  .hero__stage{ order:-1; height:min(50vh, 380px) !important }
  .hero__season{
    position:static !important; margin:0 0 12px !important;
    font-size:clamp(3rem, 14vw, 5rem) !important;
  }
  .hero__season .sub{ font-size:10px !important }
  .hero__title{
    font-size:clamp(2.2rem, 11vw, 4rem) !important;
    line-height:1.08 !important; margin:0 0 20px !important;
  }
  .hero__sub{
    font-size:14.5px !important; line-height:1.7 !important;
    margin:0 0 24px !important; max-width:100% !important;
  }
  .hero__tag{ font-size:10.5px !important; margin-bottom:18px !important }
  .cta-round{ width:80px !important; height:80px !important; font-size:11px !important }
  .hero__inline-cta{ font-size:11px !important }
  .hero__copy{ padding-inline-start:0 !important }

  /* النقاط والإطار: أصغر شوية */
  .hero__corner{ width:24px !important; height:24px !important }
  .hero__orbit .label{ font-size:9.5px !important; padding:5px 10px !important }
  .hero__plate{ width:min(85vw, 360px) !important }
  .hero__scroll-cue{ display:none }

  /* Giant marquee أصغر */
  .giant-marquee{ padding:24px 0 !important }
  .giant-marquee__track{ font-size:clamp(2.8rem, 14vw, 5rem) !important; gap:40px !important }
  .giant-marquee__track span{ gap:40px !important }

  /* Sections: padding أقل */
  .sec{ padding:48px var(--gutter) !important }
  .sec__head{ grid-template-columns:1fr !important; gap:12px !important; margin-bottom:32px !important }
  .sec__rule{ display:none }
  .sec__title{ font-size:clamp(1.8rem, 7vw, 2.8rem) !important; max-width:100% !important }

  /* Manifesto: column واحد */
  .manifesto{ grid-template-columns:1fr !important; gap:24px !important }
  .manifesto__intro{ position:static !important }
  .manifesto__intro p{ font-size:1.1rem !important; line-height:1.55 !important; max-width:100% !important }
  .manifesto__item{ grid-template-columns:1fr auto !important; gap:14px !important; padding-bottom:24px !important }
  .manifesto__item .num{ font-size:14px !important; padding-top:4px !important }
  .manifesto__item h3{ font-size:1.1rem !important; margin-bottom:8px !important }
  .manifesto__item p{ font-size:13px !important; line-height:1.65 !important }

  /* Featured: column واحد */
  .piece{ grid-template-columns:1fr !important; gap:20px !important }
  .piece__info h3{ font-size:1.35rem !important; line-height:1.15 !important }
  .piece__info > p{ font-size:13.5px !important; line-height:1.7 !important }
  .piece__info .eyebrow{ font-size:11px !important }
  .piece__specs dt{ font-size:11px !important }
  .piece__specs dd{ font-size:13.5px !important }
  .piece__cta{ font-size:12px !important }

  /* Atelier: column واحد */
  .atelier{ grid-template-columns:1fr !important; gap:32px !important }
  .atelier__art{ position:static !important; aspect-ratio:4/4 !important }
  .atelier__copy h2{ font-size:1.6rem !important }
  .atelier__copy p{ font-size:14.5px !important }
  .stats{ grid-template-columns:1fr 1fr !important; gap:16px !important; margin-top:32px !important; padding-top:24px !important }
  .stat__num{ font-size:1.8rem !important }
  .stat__lbl{ font-size:11px !important }

  /* Preview grid: column واحد */
  .preview-grid{ grid-template-columns:1fr !important; gap:18px !important }
  .preview-grid .tile__meta h4{ font-size:18px !important }

  /* Shop foot stacked */
  .shop-foot{ flex-direction:column !important; align-items:flex-start !important; gap:18px !important }
  .shop-foot p{ font-size:1.05rem !important }

  /* ⭐ Footer ultra-minimal على الموبايل (الـ nav موجود في الـ burger menu) */
  .foot{ padding:18px var(--gutter) 12px !important }
  .foot__top{
    display:flex !important; flex-direction:column !important;
    gap:12px !important; padding-bottom:12px !important;
    border-bottom:1px solid var(--rule-soft);
  }
  /* الـ brand: مركّز و compact */
  .foot__brand{ text-align:center; display:grid; gap:6px; margin:0 auto }
  .foot__brand .row{ justify-content:center; gap:8px }
  .foot__brand .mark{ width:16px !important; height:20px !important }
  .foot__brand .word{ font-size:14px !important }
  .foot__brand p{
    font-size:10.5px !important; line-height:1.4 !important;
    max-width:30ch; margin:0 auto !important; color:var(--mute);
  }
  /* ⭐ شيل الـ nav columns بالكامل (موجودين في الـ burger menu) */
  .foot__col{ display:none !important }
  /* النشرة: ultra compact */
  .foot__news{ margin:0 auto !important; max-width:280px; width:100%; display:grid; gap:6px }
  .foot__news h5, .foot__news p{ display:none !important }
  .foot__news form{ display:flex; border:1px solid var(--rule-soft) }
  .foot__news input{
    flex:1; min-width:0;
    padding:7px 10px !important; font-size:11px !important;
    border:0 !important; background:transparent;
  }
  .foot__news button{
    padding:7px 12px !important; font-size:10px !important;
    background:var(--ink); color:var(--white); border:0;
  }
  /* البوت row: ultra small */
  .foot__bot{
    flex-direction:column-reverse !important; gap:6px !important;
    text-align:center !important; margin-top:6px !important;
    font-size:9px !important; color:var(--mute);
  }
  .foot__bot .socials{ gap:10px }
  .foot__bot .socials a{ width:20px !important; height:20px !important }
  .foot__bot .socials svg{ width:10px !important; height:10px !important }
  .foot__bot span{ font-size:9px !important }

  /* ⭐ Trust strip على الموبايل */
  .trust-strip{ padding:28px var(--gutter) !important }
  .trust-strip__inner{ grid-template-columns:1fr 1fr !important; gap:18px 14px !important }
  .trust-item{ grid-template-columns:24px 1fr !important; gap:10px !important; padding:0 !important }
  .trust-item svg{ width:24px !important; height:24px !important }
  .trust-item h4{ font-size:13px !important; margin-bottom:2px !important }
  .trust-item p{ font-size:11px !important; line-height:1.45 !important }

  /* ⭐ Process steps على الموبايل */
  .process-grid{ grid-template-columns:1fr 1fr !important; gap:24px 16px !important }
  .process-grid::before{ display:none }
  .process-step__num{ width:44px !important; height:44px !important; font-size:1.05rem !important }
  .process-step h3{ font-size:1rem !important }
  .process-step p{ font-size:12.5px !important; line-height:1.6 !important }

  /* ⭐ CTA strip على الموبايل */
  .cta-strip{ padding:36px var(--gutter) !important }
  .cta-strip__inner{ grid-template-columns:1fr !important; gap:20px !important; text-align:center }
  .cta-strip h2{ font-size:1.4rem !important; margin-bottom:8px !important }
  .cta-strip p{ font-size:13px !important; max-width:100% !important }
  .cta-strip__form input{ padding:12px 14px !important; font-size:13px !important }
  .cta-strip__form button{ padding:12px 18px !important; font-size:11px !important }

  /* Contact: تعديلات للموبايل */
  .contact__avatar{ width:96px !important; height:96px !important }
  .contact__name{ font-size:clamp(2.2rem, 9vw, 3rem) !important }
  .contact__bio{ font-size:1rem !important }
  .contact__stats{ grid-template-columns:1fr 1fr !important; max-width:100% !important; gap:8px !important }
  .contact__stats .num{ font-size:1.5rem !important }
  .contact__share{ width:46px !important; height:46px !important }

  /* Linktree items: مدمجة */
  .lk{ grid-template-columns:44px 1fr auto !important; gap:12px !important; padding:14px 16px !important }
  .lk__ico{ width:44px !important; height:44px !important }
  .lk__name{ font-size:13.5px !important }
  .lk__desc{ font-size:11.5px !important }
  .lk__pill{ font-size:10px !important; padding:4px 10px !important }
  .lk__main{ padding:0 8px 0 0 !important }

  /* Cursor: hide on mobile */
  .cursor-dot, .cursor-ring{ display:none !important }
}

@media (max-width: 480px){
  :root{ --gutter:14px }
  .hdr__brand .word{ font-size:16px !important }
  .hero__title{ font-size:clamp(2rem, 12vw, 3rem) !important }
  .stats{ grid-template-columns:1fr 1fr !important }
}

/* =====================================================================
   ⭐ Rooms — ابدأ من الغُرفة (تصنيفات المتجر)
   ===================================================================== */
.rooms-sec{ background:var(--white) }
.rooms__title{ max-width:24ch; margin-bottom:clamp(36px,4.5vw,72px) }

.rooms-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.4vw,40px);
}
.room-card{
  display:grid; gap:14px; cursor:none;
  text-decoration:none; color:inherit;
}
.room-card__art{
  position:relative; aspect-ratio:5/6; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(212,168,89,.10), transparent 65%),
    linear-gradient(180deg, #FFF 0%, var(--paper) 100%);
  border:1px solid var(--rule-faint);
  transition:transform .8s var(--ease), border-color .5s var(--ease);
}
.room-card:hover .room-card__art{
  transform:translateY(-6px);
  border-color:var(--gold);
}
.room-card__art > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.15) contrast(.97);
  transition:transform 1.2s var(--ease), filter .8s var(--ease);
  z-index:1;
}
.room-card:hover .room-card__art > img{
  transform:scale(1.05);
  filter:grayscale(0) contrast(1);
}
.room-card__glyph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:var(--gold); opacity:.55;
  z-index:1;
}
.room-card__glyph svg{ width:38%; height:auto }
.room-card__idx{
  position:absolute; top:16px; right:16px; z-index:3;
  font-family:var(--kufi); font-size:11px; font-weight:600;
  color:var(--gold);
  background:rgba(255,255,255,.85); backdrop-filter:blur(4px);
  padding:5px 10px; border-radius:999px;
  border:1px solid var(--rule-faint);
}
.room-card__hover{
  position:absolute; bottom:0; right:0; left:0; z-index:3;
  padding:14px 18px;
  font-family:var(--kufi); font-size:12px; font-weight:500;
  color:var(--ink); text-align:right;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-top:1px solid var(--rule-faint);
  transform:translateY(100%); transition:transform .55s var(--ease);
}
.room-card:hover .room-card__hover{ transform:translateY(0) }
.room-card__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:2px;
}
.room-card__meta h4{
  margin:0;
  font-family:var(--display); font-weight:400; font-size:1.4rem;
  color:var(--ink); line-height:1.2; letter-spacing:-.008em;
}
.room-card__meta span{
  font-family:var(--kufi); font-size:11.5px; color:var(--mute);
  white-space:nowrap;
}

/* =====================================================================
   ⭐ Press Strip — اقتباس + مَنشورات
   ===================================================================== */
.press-strip{
  position:relative;
  padding:clamp(56px,7vw,110px) var(--gutter);
  background:var(--off);
  border-top:1px solid var(--rule-faint);
  border-bottom:1px solid var(--rule-faint);
  overflow:hidden;
}
.press-strip::before{
  content:""; position:absolute;
  top:-80px; left:-40px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,168,89,.06), transparent 70%);
  pointer-events:none;
}
.press-strip__inner{
  position:relative;
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(40px,6vw,100px); align-items:center;
  max-width:1400px; margin:0 auto;
}
.press-quote{ position:relative; margin:0; padding:0 }
.press-quote__mark{
  position:absolute; top:-24px; right:-12px;
  font-family:var(--display); font-size:8rem;
  color:var(--gold); opacity:.18; line-height:1;
  pointer-events:none;
}
.press-quote blockquote{
  margin:0; padding:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem, 2.2vw, 2.1rem); line-height:1.45;
  color:var(--ink); max-width:32ch; letter-spacing:-.008em;
}
.press-quote blockquote em{ font-style:normal; color:var(--gold) }
.press-quote figcaption{
  margin-top:28px; display:grid; gap:4px;
  padding-top:18px; border-top:1px solid var(--rule-soft);
  max-width:32ch;
}
.press-quote__author{
  font-family:var(--kufi); font-size:13px; font-weight:600; color:var(--ink);
}
.press-quote__role{
  font-family:var(--kufi); font-size:11px; color:var(--mute);
}

.press-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--rule-faint);
  border:1px solid var(--rule-faint);
}
.press-list li{
  background:var(--off);
  padding:24px 20px;
  display:flex; flex-direction:column; gap:6px;
  transition:background .35s var(--ease);
}
.press-list li:hover{ background:var(--white) }
.press-list__brand{
  font-family:var(--display); font-weight:400; font-size:1.3rem;
  color:var(--ink); line-height:1; letter-spacing:-.01em;
}
.press-list__yr{
  font-family:var(--kufi); font-size:10.5px; color:var(--gold);
  letter-spacing:.06em;
}

/* =====================================================================
   ⭐ Responsive — Rooms + Press
   ===================================================================== */
@media (max-width: 1080px){
  .rooms-grid{ grid-template-columns:repeat(2, 1fr); gap:24px }
  .press-strip__inner{ grid-template-columns:1fr; gap:40px }
  .press-list{ max-width:480px }
}
@media (max-width: 640px){
  .rooms-grid{ grid-template-columns:1fr 1fr !important; gap:14px !important }
  .room-card__meta h4{ font-size:1.05rem !important }
  .room-card__meta span{ font-size:10.5px !important }
  .room-card__idx{ font-size:10px !important; padding:4px 8px !important; top:10px !important; right:10px !important }
  .press-strip{ padding:36px var(--gutter) !important }
  .press-quote__mark{ font-size:5rem; top:-14px }
  .press-quote blockquote{ font-size:1.15rem !important; line-height:1.5 !important }
  .press-list{ grid-template-columns:1fr 1fr !important }
  .press-list li{ padding:16px 14px !important }
  .press-list__brand{ font-size:1.05rem !important }
}

/* =====================================================================
   ⭐⭐⭐ RAH HERO V2 — Figma-style card hero with rotating products
   ===================================================================== */
.rah-hero{
  position:relative;
  padding:clamp(14px,2vw,32px);
  min-height:calc(100vh - 90px);
  display:grid; place-items:center;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(232,197,122,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 80%, rgba(185,140,60,.06), transparent 60%),
    linear-gradient(180deg, #ECE6D8 0%, #F5F2EA 40%, #ECE6D8 100%);
  isolation:isolate;
  overflow:hidden;
  --blob:#B98C3C;
  --blob-accent:#E8C57A;
  --blob-shade:#8A6420;
}

.rah-hero__card{
  width:100%; max-width:1480px;
  aspect-ratio:16/9.4;
  min-height:620px; max-height:820px;
  border-radius:36px;
  background:var(--white);
  box-shadow:
    0 80px 140px -50px rgba(20,17,12,.22),
    0 30px 60px -20px rgba(20,17,12,.12),
    0 1px 0 rgba(255,255,255,.6) inset;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:1fr auto;
}

/* ── Top bar داخل البطاقة ── */
.rah-hero__top{
  position:absolute; top:0; inset-inline:0; z-index:12;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(20px,2.2vw,36px) clamp(22px,2.4vw,38px);
  pointer-events:none;
}
.rah-hero__top > *{ pointer-events:auto }
.rah-hero__logo{
  width:30px; height:30px; color:var(--ink);
  display:grid; place-items:center;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.rah-hero__logo:hover{ color:var(--gold); transform:scale(1.08) }
.rah-hero__logo svg{ width:100%; height:100% }

.rah-hero__avatar{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--gold-bright);
  transition:transform .5s var(--ease);
  filter:drop-shadow(0 4px 10px rgba(212,168,89,.4));
}
.rah-hero__avatar:hover{ transform:scale(1.06) rotate(-6deg) }
.rah-hero__avatar svg{ width:100%; height:100% }

/* ── Main split: stage + panel ── */
.rah-hero__main{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:0;
}

/* ───────── STAGE ───────── */
.rah-hero__stage{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  padding:clamp(60px,5vw,90px) clamp(30px,3vw,56px) clamp(90px,7vw,120px);
  isolation:isolate;
}

/* Blob: organic shape, color shifts per slide */
.rah-hero__blob{
  position:absolute;
  inset:-10% -20% -10% -8%;
  width:auto; height:120%;
  z-index:1;
  color:var(--blob);
  transition:color 1.4s cubic-bezier(.6,.05,.2,1);
  filter:saturate(1.05);
  animation:rahBlobFloat 14s ease-in-out infinite;
}
.rah-hero__blob-path{
  transition:fill 1.4s cubic-bezier(.6,.05,.2,1);
}
@keyframes rahBlobFloat{
  0%,100% { transform:translate(0,0) rotate(0) }
  33%     { transform:translate(-1.5%,1%) rotate(-2deg) }
  66%     { transform:translate(1.5%,-1%) rotate(1.5deg) }
}

/* Big display title — overlapped, only active visible */
.rah-hero__titles{
  position:absolute; z-index:3;
  top:clamp(60px,8vw,110px);
  inset-inline-start:clamp(28px,3vw,52px);
  inset-inline-end:auto;
  max-width:58%;
  pointer-events:none;
}
.rah-hero__title{
  position:absolute; top:0; inset-inline-start:0;
  margin:0; padding:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem, 6vw, 6rem);
  line-height:.94;
  letter-spacing:-.025em;
  color:#FFFFFF;
  text-shadow:0 4px 30px rgba(20,17,12,.18);
  opacity:0; visibility:hidden;
  transition:opacity .9s cubic-bezier(.6,.05,.2,1), visibility 0s .9s;
}
.rah-hero__title.--active{
  opacity:1; visibility:visible;
  transition:opacity .9s cubic-bezier(.6,.05,.2,1) .25s, visibility 0s 0s;
}
.rah-hero__title .row{
  display:block; overflow:hidden;
  padding:.04em 0; margin:-.04em 0;
}
.rah-hero__title .row > .inner{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s cubic-bezier(.6,.05,.2,1);
  will-change:transform;
}
.rah-hero__title.--active .row > .inner{
  transform:translateY(0);
}
.rah-hero__title.--active .row:nth-child(1) > .inner{ transition-delay:.3s }
.rah-hero__title.--active .row:nth-child(2) > .inner{ transition-delay:.45s }

/* Tags (small eyebrow above title) */
.rah-hero__tags{
  position:absolute; z-index:3;
  top:clamp(20px,3.5vw,56px);
  inset-inline-start:clamp(28px,3vw,52px);
}
.rah-hero__tag{
  position:absolute; top:0; inset-inline-start:0;
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px;
  font-family:var(--kufi); font-size:11px; font-weight:500;
  color:rgba(255,255,255,.95); white-space:nowrap;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  opacity:0; transform:translateY(-8px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.rah-hero__tag.--active{
  opacity:1; transform:translateY(0);
  transition-delay:.2s;
}

/* Products — stacked, rotate-in/out */
.rah-hero__products{
  position:relative; z-index:4;
  width:min(82%, 560px); aspect-ratio:1/1;
  display:grid; place-items:center;
  margin-top:6%; margin-inline-start:18%;
}
.rah-hero__product{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0;
  transform:rotate(-55deg) scale(.65) translateX(-10%);
  transition:
    opacity .85s cubic-bezier(.6,.05,.2,1),
    transform 1.15s cubic-bezier(.5,.05,.2,1);
  filter:drop-shadow(0 30px 50px rgba(20,17,12,.28));
  will-change:transform, opacity;
}
.rah-hero__product img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  width:auto; height:auto;
}
.rah-hero__product.--active{
  opacity:1;
  transform:rotate(0) scale(1) translateX(0);
}
.rah-hero__product.--exiting{
  opacity:0;
  transform:rotate(55deg) scale(.65) translateX(10%);
}
.rah-hero__product-ph{
  width:80%; color:var(--ink); opacity:.85;
}
.rah-hero__product-ph svg{ width:100%; height:auto }

/* Inline CTA (under stage) */
.rah-hero__cta-inline{
  position:absolute; z-index:5;
  bottom:clamp(28px,3vw,48px);
  inset-inline-start:clamp(28px,3vw,52px);
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 22px;
  font-family:var(--kufi); font-size:13px; font-weight:600;
  color:var(--ink);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid var(--rule-faint);
  border-radius:999px;
  transition:all .4s var(--ease);
}
.rah-hero__cta-inline:hover{
  background:var(--ink); color:var(--white); border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(20,17,12,.30);
}
.rah-hero__cta-inline svg{
  width:24px; height:8px;
  transition:transform .4s var(--ease);
}
.rah-hero__cta-inline:hover svg{ transform:translateX(-4px) }

/* Decorative floating elements */
.rah-hero__decor{
  position:absolute; z-index:2;
  pointer-events:none; will-change:transform;
}
.rah-hero__decor.--pill{
  width:clamp(40px,4vw,68px); aspect-ratio:1/1.4;
  top:8%; inset-inline-end:18%;
  background:var(--blob-accent);
  border-radius:50%;
  transform:rotate(28deg);
  filter:blur(1.5px);
  box-shadow:0 18px 30px rgba(212,168,89,.28);
  animation:rahFloatA 7s ease-in-out infinite;
}
.rah-hero__decor.--bean{
  width:clamp(40px,5vw,80px); aspect-ratio:1.6/1;
  bottom:34%; inset-inline-start:8%;
  background:#FFFFFF;
  border-radius:50%;
  transform:rotate(-12deg);
  box-shadow:0 14px 24px rgba(20,17,12,.10);
  animation:rahFloatB 9s ease-in-out infinite;
}
.rah-hero__decor.--dot{
  width:clamp(10px,1vw,16px); height:clamp(10px,1vw,16px);
  border-radius:50%;
}
.rah-hero__decor.--dot.--1{
  background:var(--blob-shade);
  top:20%; inset-inline-end:8%;
  animation:rahFloatA 5s ease-in-out infinite reverse;
  box-shadow:0 6px 14px rgba(138,100,32,.40);
}
.rah-hero__decor.--dot.--2{
  background:var(--blob-accent);
  top:46%; inset-inline-end:6%;
  width:clamp(14px,1.5vw,22px); height:clamp(14px,1.5vw,22px);
  animation:rahFloatB 6.5s ease-in-out infinite;
  box-shadow:0 8px 18px rgba(232,197,122,.45);
}
.rah-hero__decor.--dot.--3{
  background:#FFFFFF;
  bottom:30%; inset-inline-end:22%;
  width:clamp(8px,.9vw,14px); height:clamp(8px,.9vw,14px);
  animation:rahFloatA 8s ease-in-out infinite;
}
.rah-hero__decor.--diamond{
  width:clamp(36px,4vw,64px); height:clamp(36px,4vw,64px);
  bottom:22%; inset-inline-start:18%;
  background:var(--blob-shade);
  border-radius:16px;
  transform:rotate(18deg);
  filter:blur(2px);
  opacity:.85;
  animation:rahFloatB 10s ease-in-out infinite;
}
@keyframes rahFloatA{
  0%,100% { transform:translate(0,0) rotate(28deg) }
  50%     { transform:translate(-6px,-16px) rotate(22deg) }
}
@keyframes rahFloatB{
  0%,100% { transform:translate(0,0) rotate(-12deg) }
  50%     { transform:translate(8px,-12px) rotate(-4deg) }
}

/* ───────── PANEL (right side panel — left in RTL view) ───────── */
.rah-hero__panel{
  position:relative;
  padding:clamp(60px,5vw,96px) clamp(34px,3.4vw,60px) clamp(100px,7vw,130px);
  background:var(--white);
  display:grid; grid-template-rows:auto auto 1fr;
  gap:clamp(20px,2vw,32px);
  min-width:0;
}

.rah-hero__panel-head{ margin:0 }
.rah-hero__panel-title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem, 3.8vw, 3.6rem);
  line-height:.96;
  color:var(--ink);
  letter-spacing:-.018em;
  display:grid; gap:4px;
}
.rah-hero__panel-title span:last-child{ color:var(--gold) }

.rah-hero__panel-meta{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--kufi); font-size:10.5px; font-weight:600;
  letter-spacing:.16em;
  color:var(--mute);
  text-transform:uppercase;
}

/* List of products */
.rah-hero__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  align-content:start;
  overflow:hidden;
}
.rah-hero__list-item{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  align-items:center; gap:clamp(12px,1.4vw,22px);
  padding:clamp(14px,1.4vw,22px) 4px;
  border-bottom:1px solid var(--rule-faint);
  position:relative;
  transition:
    background .55s var(--ease),
    padding-inline .5s var(--ease);
}
.rah-hero__list-item::before{
  content:""; position:absolute;
  inset-inline-start:0; top:0; bottom:0;
  width:3px; background:var(--gold);
  transform:scaleY(0); transform-origin:center;
  transition:transform .5s var(--ease);
}
.rah-hero__list-item.--active::before{ transform:scaleY(.5) }
.rah-hero__list-item.--active{
  background:linear-gradient(90deg, rgba(232,197,122,.08), transparent 80%);
  padding-inline-start:14px;
}
.rah-hero__list-name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(.98rem, 1.15vw, 1.18rem);
  color:var(--ink);
  line-height:1.2; letter-spacing:-.006em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rah-hero__list-item.--active .rah-hero__list-name{
  color:var(--gold-deep);
}
.rah-hero__list-dim{
  font-family:var(--kufi); font-size:10.5px; font-weight:500;
  color:var(--mute);
  letter-spacing:.06em;
  white-space:nowrap;
}
.rah-hero__list-thumb{
  width:clamp(40px,3.4vw,52px); height:clamp(40px,3.4vw,52px);
  border-radius:10px;
  background:linear-gradient(160deg, var(--paper), var(--off));
  display:grid; place-items:center;
  overflow:hidden;
  border:1px solid var(--rule-faint);
  transition:transform .5s var(--ease), border-color .4s var(--ease);
}
.rah-hero__list-item.--active .rah-hero__list-thumb{
  transform:scale(1.08); border-color:var(--gold);
}
.rah-hero__list-thumb img{
  width:80%; height:80%; object-fit:contain;
  mix-blend-mode:multiply;
}
.rah-hero__list-thumb svg{ width:55%; color:var(--mute) }

.rah-hero__list-add{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--rule-soft);
  background:transparent;
  display:grid; place-items:center;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .3s var(--ease);
}
.rah-hero__list-add svg{ width:14px; height:14px }
.rah-hero__list-add:hover{
  background:var(--ink); border-color:var(--ink); color:var(--white);
  transform:scale(1.05);
}
.rah-hero__list-item.--active .rah-hero__list-add{
  background:var(--gold); border-color:var(--gold); color:var(--white);
}

/* ───────── Bottom controls ───────── */
.rah-hero__cluster{
  position:absolute; z-index:11;
  bottom:clamp(20px,2.2vw,32px);
  inset-inline-start:clamp(22px,2.4vw,38px);
  display:flex; align-items:center; gap:8px;
}
.rah-hero__cluster-btn{
  width:42px; height:42px;
  border-radius:13px;
  background:var(--paper);
  border:1px solid transparent;
  display:grid; place-items:center;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .3s var(--ease);
}
.rah-hero__cluster-btn svg{ width:20px; height:20px }
.rah-hero__cluster-btn.--filled{
  background:rgba(20,17,12,.06);
  color:var(--ink);
}
.rah-hero__cluster-btn:hover{
  background:var(--ink); color:var(--white); transform:translateY(-2px);
}
.rah-hero__cluster-dash{
  width:14px; height:1px; background:var(--rule-soft);
}

.rah-hero__view-toggle{
  position:absolute; z-index:11;
  bottom:clamp(20px,2.2vw,32px);
  inset-inline-end:clamp(22px,2.4vw,38px);
  width:42px; height:42px;
  border-radius:13px;
  background:var(--paper); border:1px solid transparent;
  display:grid; place-items:center;
  color:var(--ink-soft); cursor:pointer;
  transition:all .3s var(--ease);
}
.rah-hero__view-toggle svg{ width:18px; height:18px }
.rah-hero__view-toggle:hover{
  background:var(--ink); color:var(--white);
}

/* Control pill (center bottom) */
.rah-hero__control{
  position:absolute; z-index:12;
  bottom:clamp(20px,2.2vw,32px);
  left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:6px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  border:1px solid var(--rule-faint);
  border-radius:999px;
  box-shadow:
    0 28px 50px -16px rgba(20,17,12,.18),
    0 8px 18px -6px rgba(20,17,12,.08);
}
.rah-hero__ctrl-icon{
  width:38px; height:38px; border-radius:999px;
  background:transparent; border:0;
  display:inline-grid; place-items:center;
  color:var(--ink-soft); cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.rah-hero__ctrl-icon:hover{ background:var(--paper); color:var(--ink) }
.rah-hero__ctrl-icon svg{ width:18px; height:18px }
.rah-hero__ctrl-icon.--avatar{
  width:auto; padding:0 12px; gap:6px;
  display:inline-flex; align-items:center;
}
.rah-hero__ctrl-icon.--avatar .caret{ width:7px; height:5px; color:var(--mute) }

.rah-hero__ctrl-divider{
  width:1px; height:22px; background:var(--rule-soft);
  margin:0 4px;
}

.rah-hero__ctrl-dots{
  display:flex; gap:6px; align-items:center; padding:0 8px;
}
.rah-hero__ctrl-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--rule-soft); border:0; padding:0;
  cursor:pointer;
  transition:all .45s var(--ease);
}
.rah-hero__ctrl-dot.--on{
  width:22px; border-radius:4px; background:var(--ink);
}
.rah-hero__ctrl-dot:hover{ background:var(--gold) }

.rah-hero__ctrl-next{
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--white);
  border:0; cursor:pointer;
  display:grid; place-items:center;
  margin-inline-start:4px;
  transition:background .35s var(--ease), transform .35s var(--ease);
  box-shadow:0 8px 18px -6px rgba(20,17,12,.4);
}
.rah-hero__ctrl-next svg{
  width:18px; height:18px;
  transition:transform .4s var(--ease);
}
.rah-hero__ctrl-next:hover{
  background:var(--gold); transform:rotate(-8deg);
}
.rah-hero__ctrl-next:hover svg{ transform:translateX(-3px) }

/* ───────── Responsive: tablet ───────── */
@media (max-width: 1080px){
  .rah-hero{ padding:14px; min-height:auto }
  .rah-hero__card{
    aspect-ratio:auto; min-height:auto;
    grid-template-rows:auto;
  }
  .rah-hero__main{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }
  .rah-hero__stage{
    aspect-ratio:16/11;
    padding:clamp(40px,5vw,80px) clamp(24px,3vw,40px) clamp(70px,6vw,100px);
  }
  .rah-hero__panel{
    padding:clamp(28px,4vw,52px) clamp(22px,3vw,40px) clamp(90px,7vw,120px);
  }
  .rah-hero__titles{ max-width:64% }
  .rah-hero__products{
    width:min(72%, 460px);
    margin-inline-start:14%;
  }
}

/* ───────── Responsive: mobile ───────── */
@media (max-width: 720px){
  .rah-hero{ padding:8px }
  .rah-hero__card{ border-radius:24px }
  .rah-hero__top{ padding:14px 18px }
  .rah-hero__logo{ width:24px; height:24px }
  .rah-hero__avatar{ width:38px; height:38px }

  .rah-hero__stage{
    aspect-ratio:auto; min-height:380px;
    padding:60px 18px 80px;
  }
  .rah-hero__titles{
    top:50px; inset-inline-start:18px; max-width:75%;
  }
  .rah-hero__title{ font-size:clamp(2rem, 11vw, 3.4rem) }
  .rah-hero__tags{ top:24px; inset-inline-start:18px }
  .rah-hero__tag{ font-size:10px; padding:5px 11px }
  .rah-hero__products{
    width:min(70%, 320px); margin-inline-start:24%; margin-top:14%;
  }
  .rah-hero__cta-inline{
    bottom:18px; inset-inline-start:18px;
    padding:10px 16px; font-size:11.5px; gap:10px;
  }

  .rah-hero__panel{ padding:24px 18px 90px }
  .rah-hero__panel-title{ font-size:clamp(1.8rem, 7vw, 2.4rem) }
  .rah-hero__list-name{ font-size:.92rem }
  .rah-hero__list-thumb{ width:36px; height:36px }
  .rah-hero__list-add{ width:26px; height:26px }
  .rah-hero__list-add svg{ width:11px; height:11px }

  .rah-hero__cluster{ bottom:14px; inset-inline-start:14px; gap:6px }
  .rah-hero__cluster-btn{ width:34px; height:34px; border-radius:11px }
  .rah-hero__cluster-btn svg{ width:16px; height:16px }
  .rah-hero__cluster-dash{ width:8px }

  .rah-hero__view-toggle{
    bottom:14px; inset-inline-end:14px;
    width:34px; height:34px; border-radius:11px;
  }
  .rah-hero__view-toggle svg{ width:14px; height:14px }

  .rah-hero__control{
    bottom:14px; padding:4px; gap:2px;
    width:auto;
    /* اخفاء العناصر الإضافية على الموبايل، نسيب dots + next فقط */
  }
  .rah-hero__control .rah-hero__ctrl-icon:not(#rah-hero-prev),
  .rah-hero__control .rah-hero__ctrl-divider{ display:none }
  .rah-hero__ctrl-icon{ width:32px; height:32px }
  .rah-hero__ctrl-next{ width:38px; height:38px; margin-inline-start:2px }
  .rah-hero__ctrl-dot.--on{ width:18px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rah-hero__blob,
  .rah-hero__decor{ animation:none !important }
  .rah-hero__product,
  .rah-hero__title,
  .rah-hero__title .inner{ transition-duration:.3s !important }
}

/* =====================================================================
   ⭐ Home Categories Strip — أفقي يتزحلق (تحت الهيرو)
   ===================================================================== */
.home-cats{
  position:relative; z-index:2;
  padding:clamp(28px,3vw,48px) 0 clamp(24px,2.6vw,40px);
  background:var(--white);
  border-bottom:1px solid var(--rule-faint);
  overflow:hidden;
}
.home-cats__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 var(--gutter);
  margin-bottom:clamp(16px,1.8vw,26px);
}
.home-cats__label{
  font-family:var(--kufi); font-size:12px; font-weight:600; color:var(--gold);
  display:inline-flex; align-items:center; gap:14px;
}
.home-cats__label::before{ content:""; width:32px; height:1px; background:var(--gold) }
.home-cats__nav{ display:flex; gap:8px }
.home-cats__arrow{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule-soft); background:var(--white);
  display:grid; place-items:center; color:var(--ink);
  cursor:pointer; transition:all .3s var(--ease);
}
.home-cats__arrow svg{ width:18px; height:18px }
.home-cats__arrow:hover{ background:var(--ink); color:var(--white); border-color:var(--ink) }
.home-cats__arrow:disabled{ opacity:.3; pointer-events:none }

.home-cats__track{
  display:flex; gap:clamp(14px,1.6vw,26px);
  padding:6px var(--gutter) 10px;
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.home-cats__track::-webkit-scrollbar{ display:none }
.home-cats__track.--grabbing{ scroll-behavior:auto; cursor:grabbing }

.home-cat{
  flex:0 0 auto; scroll-snap-align:start;
  display:grid; justify-items:center; gap:10px;
  width:clamp(96px,9vw,128px);
  text-decoration:none; color:inherit;
  cursor:pointer; user-select:none;
}
.home-cat__art{
  width:clamp(78px,7.5vw,104px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 35% 30%, var(--white), var(--paper));
  border:1px solid var(--rule-faint);
  transition:transform .5s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.home-cat:hover .home-cat__art{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 16px 30px -14px rgba(138,100,32,.35);
}
.home-cat__art img{
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
.home-cat__art svg{ width:48%; color:var(--gold); opacity:.8 }
.home-cat__name{
  font-family:var(--display); font-weight:400; font-size:clamp(.95rem,1.1vw,1.12rem);
  color:var(--ink); text-align:center; line-height:1.2;
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.home-cat__count{
  font-family:var(--kufi); font-size:10.5px; color:var(--mute);
}

/* =====================================================================
   ⭐ Section Divider (خط فاصل)
   ===================================================================== */
.sec-divider{
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--gutter); margin:clamp(8px,1.2vw,20px) 0;
}
.sec-divider span{
  display:block; height:1px; width:min(100%, var(--maxw));
  background:linear-gradient(90deg, transparent, var(--rule-soft) 18%, var(--rule-soft) 82%, transparent);
}

/* =====================================================================
   ⭐ Featured Products Carousel (compact)
   ===================================================================== */
.feat-sec{ overflow:hidden }
.feat-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:clamp(28px,3vw,48px); flex-wrap:wrap;
}
.feat-head__title{ margin:0; max-width:none }
.feat-head__all{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--kufi); font-size:13px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:5px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.feat-head__all svg{ width:32px; height:8px; transform:rotate(180deg); color:var(--gold) }
.feat-head__all:hover{ color:var(--gold); border-color:var(--gold) }

/* ⭐ grid عادي — نفس آلية سكشن "الغُرف" الشغّال. مفيش scroll container = مستحيل يختفي */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px,2.4vw,40px);
}

/* الكارت */
.feat-card{
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}
.feat-card__art{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(212,168,89,.10), transparent 62%),
    linear-gradient(180deg, #FFF 0%, var(--paper) 100%);
  border:1px solid var(--rule-faint);
  display:grid; place-items:center;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.feat-card__art:hover{ border-color:var(--gold); box-shadow:0 18px 34px -16px rgba(20,17,12,.28) }
.feat-card__nº{
  position:absolute; top:16px; right:16px; z-index:3;
  font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold);
}
/* ⭐ صورة الكاروسيل: مفيش filter ولا blend-mode (زي صورة الكاتيجوري الشغّالة بالظبط).
   الاتنين بيعملوا composite layer بيفشل يترسم جوه scroll container داخل صفحة Lenis = اختفاء */
.feat-card__art img{
  width:78%; height:auto; max-height:66%;
  object-fit:contain;
  pointer-events:none;
}
.feat-card__ph{ display:grid; place-items:center; width:60%; color:var(--gold); opacity:.7 }
.feat-card__ph svg{ width:100%; height:auto }
/* ⭐ بدون transform ولا backdrop-filter (composite triggers) — fade بالـ opacity فقط */
.feat-card__hover{
  position:absolute; bottom:0; right:0; left:0; z-index:3;
  padding:14px 18px;
  font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--ink);
  background:#FFFFFF;
  border-top:1px solid var(--rule-faint);
  opacity:0; transition:opacity .4s var(--ease);
}
.feat-card__art:hover .feat-card__hover{ opacity:1 }
.feat-card__meta{ display:grid; gap:7px }
.feat-card__eyebrow{
  font-family:var(--kufi); font-size:11px; font-weight:500; color:var(--gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.feat-card__name{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem,1.5vw,1.5rem); color:var(--ink); line-height:1.2;
  letter-spacing:-.008em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.feat-card__price{
  font-family:var(--kufi); font-size:14px; font-weight:600; color:var(--gold-deep);
}
.feat-card__price del{ color:var(--mute); font-weight:400; margin-inline-start:8px; opacity:.7 }
.feat-card__price ins{ text-decoration:none }

/* Responsive: tablet = 3 then 2 أعمدة */
@media (max-width: 1200px){
  .feat-grid{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width: 900px){
  .feat-grid{ grid-template-columns:repeat(2, 1fr) }
}
/* Responsive: mobile = عمودين */
@media (max-width: 640px){
  .home-cats__head{ margin-bottom:14px }
  .home-cat{ width:96px }
  .feat-grid{ grid-template-columns:repeat(2, 1fr); gap:14px }
}

/* =====================================================================
   ⭐ لينك الجيمنج في الهيدر — لمسة نيون تميّزه عن باقي الهوية
   ===================================================================== */
.hdr__nav-gaming{
  position:relative;
  color:#8b5cf6 !important; font-weight:600 !important;
  transition:color .3s var(--ease), text-shadow .3s var(--ease);
}
.hdr__nav-gaming::after{ content:" ✦"; font-size:.78em; color:#06b6d4 }
.hdr__nav-gaming:hover{ color:#06b6d4 !important; text-shadow:0 0 14px rgba(6,182,212,.55) }
.rah-drawer__gaming{
  color:#8b5cf6 !important;
  background:linear-gradient(90deg, rgba(139,92,246,.10), transparent) !important;
}
.rah-drawer__gaming:hover{ color:#06b6d4 !important; padding-right:32px }

/* =====================================================================
   ⭐ صفحة "من نحن" — على هوية البراند
   ===================================================================== */
.about-hero{
  position:relative; overflow:hidden;
  padding:clamp(90px,12vw,180px) var(--gutter) clamp(60px,8vw,110px);
  text-align:center; display:grid; justify-items:center;
}
.about-hero__mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(70vw,520px); color:var(--gold); opacity:.06; z-index:0; pointer-events:none;
}
.about-hero__mark svg{ width:100%; height:auto }
.about-hero__eyebrow{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--kufi); font-size:12px; font-weight:600; color:var(--gold);
  margin-bottom:30px; letter-spacing:.04em;
}
.about-hero__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold) }
.about-hero__eyebrow::before,.about-hero__eyebrow::after{ content:""; width:34px; height:1px; background:var(--gold); opacity:.6 }
.about-hero__title{
  position:relative; z-index:1; margin:0 0 32px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,6vw,5.4rem); line-height:1.08; color:var(--ink);
  letter-spacing:-.012em; max-width:18ch;
}
.about-hero__title em{ font-style:normal; color:var(--gold) }
.about-hero__intro{
  position:relative; z-index:1; margin:0; max-width:60ch;
  font-family:var(--body); font-weight:300; font-size:clamp(1.05rem,1.3vw,1.25rem);
  line-height:1.9; color:var(--ink-soft);
}

/* Origin split */
.about-split{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(40px,6vw,110px); align-items:start }
.about-split__lead{ position:sticky; top:120px }
.about-split__lead p{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2vw,2rem); line-height:1.5; color:var(--ink); max-width:22ch;
}
.about-split__lead em{ font-style:normal; color:var(--gold) }
.about-split__body p{ margin:0 0 20px; font-size:16.5px; line-height:1.95; color:var(--ink-soft); max-width:60ch }
.about-split__body p:last-child{ margin-bottom:0 }

/* Values */
.about-values__title{ margin-bottom:clamp(40px,5vw,72px) }
.about-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px) }
.about-value{ position:relative; padding-top:30px; border-top:1px solid var(--rule) }
.about-value__num{ font-family:var(--display); font-size:1.4rem; color:var(--gold); display:block; margin-bottom:18px }
.about-value h3{ margin:0 0 14px; font-family:var(--display); font-weight:400; font-size:clamp(1.4rem,1.9vw,1.85rem); color:var(--ink) }
.about-value p{ margin:0; font-size:15.5px; line-height:1.85; color:var(--ink-soft) }

/* Craft */
.about-craft{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(48px,6vw,110px); align-items:start }
.about-craft__art{
  position:relative; aspect-ratio:5/6; border:1px solid var(--rule-faint); overflow:hidden;
  background:linear-gradient(135deg, var(--off), var(--paper)); position:sticky; top:110px;
}
.about-craft__art .hand{ position:absolute; right:8%; top:50%; transform:translateY(-50%); width:80%; color:var(--gold); opacity:.7 }
.about-craft__stamp{
  position:absolute; top:24px; left:24px; width:92px; height:92px;
  display:grid; place-items:center; text-align:center; line-height:1.5;
  font-family:var(--kufi); font-size:10px; font-weight:600; color:var(--gold-deep);
  border:1px solid var(--rule); border-radius:50%;
  background:rgba(255,255,255,.5); backdrop-filter:blur(4px);
}
.about-craft__copy h2{ margin:0 0 26px; font-family:var(--display); font-weight:400; font-size:clamp(2rem,3.4vw,3.4rem); line-height:1.12; color:var(--ink) }
.about-craft__copy h2 em{ font-style:normal; color:var(--gold) }
.about-craft__copy p{ margin:0 0 18px; font-size:16.5px; line-height:1.9; color:var(--ink-soft); max-width:50ch }
.about-craft__quote{
  margin-top:36px; padding:24px 28px 0 0; border-right:2px solid var(--gold);
  font-family:var(--display); font-size:1.6rem; line-height:1.6; color:var(--ink);
}
.about-craft__quote span{ display:block; margin-top:14px; font-family:var(--kufi); font-size:11px; font-weight:600; color:var(--gold) }

/* Stats band */
.about-stats-band{ background:var(--ink); padding:clamp(56px,7vw,100px) var(--gutter) }
.about-stats-band__inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px) }
.about-stat{ display:grid; gap:8px; text-align:center }
.about-stat__num{ font-family:var(--display); font-size:clamp(2.6rem,5vw,4.4rem); color:var(--white); line-height:1; letter-spacing:-.02em }
.about-stat__lbl{ font-family:var(--kufi); font-size:12px; font-weight:500; color:var(--gold-glow,#E8C57A) }

/* Timeline */
.about-timeline{ list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:880px }
.about-tl{ display:grid; grid-template-columns:120px 1fr; gap:clamp(24px,4vw,64px); padding:36px 0; border-top:1px solid var(--rule-soft); align-items:start }
.about-tl:last-child{ border-bottom:1px solid var(--rule-soft) }
.about-tl__year{ font-family:var(--display); font-size:clamp(1.6rem,2.4vw,2.4rem); color:var(--gold); line-height:1 }
.about-tl__body h3{ margin:0 0 10px; font-family:var(--display); font-weight:400; font-size:1.5rem; color:var(--ink) }
.about-tl__body p{ margin:0; font-size:15.5px; line-height:1.85; color:var(--ink-soft); max-width:54ch }

/* About CTA */
.about-cta{ padding:clamp(80px,10vw,150px) var(--gutter); text-align:center }
.about-cta__inner{ max-width:760px; margin:0 auto }
.about-cta h2{ margin:0 0 18px; font-family:var(--display); font-weight:400; font-size:clamp(2rem,4vw,3.6rem); line-height:1.12; color:var(--ink) }
.about-cta h2 em{ font-style:normal; color:var(--gold) }
.about-cta p{ margin:0 0 38px; font-family:var(--body); font-size:16.5px; color:var(--ink-soft); line-height:1.8 }
.about-cta__btns{ display:inline-flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center }
.about-cta__ghost{ font-family:var(--kufi); font-size:13px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:6px; transition:color .35s var(--ease), border-color .35s var(--ease) }
.about-cta__ghost:hover{ color:var(--gold); border-color:var(--gold) }

/* About responsive */
@media (max-width:900px){
  .about-split,.about-craft{ grid-template-columns:1fr !important; gap:36px !important }
  .about-split__lead,.about-craft__art{ position:static !important }
  .about-values{ grid-template-columns:1fr !important; gap:0 !important }
  .about-value{ padding:28px 0; border-top:1px solid var(--rule-soft) }
  .about-stats-band__inner{ grid-template-columns:1fr 1fr !important; gap:28px 16px !important }
  .about-tl{ grid-template-columns:80px 1fr !important; gap:18px !important; padding:26px 0 !important }
  .about-craft__art{ aspect-ratio:4/3 !important }
}
@media (max-width:480px){
  .about-stats-band__inner{ grid-template-columns:1fr 1fr !important }
  .about-tl{ grid-template-columns:1fr !important; gap:6px !important }
}