/* ==========================================================================
   LEXVON — Design Option 1 visual system
   Plain CSS port of the approved React/Vite redesign. No build step needed.
   ========================================================================== */

/* الخطوط تُحمَّل الآن من page head عبر preconnect + link
   (كان هنا @import يحجب العرض). العائلات والأوزان لم تتغيّر. */

:root {
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ivory: #f6f2ea;
  --ivory-dim: #efe9dd;
  --paper: #faf8f3;
  --charcoal: #17140f;
  --charcoal-soft: #2b2620;
  --stone: #948b7c;
  --stone-light: #beb4a3;
  --taupe: #d8cfbe;
  --taupe-line: #e2dacb;
  --accent: #6f2a2a;
  --accent-soft: #8a4a3a;

  --header-h: 5rem;
  --header-h-transparent: 6rem;
  --bar-h: 2rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 1600px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--charcoal); color: var(--ivory); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem;}
@media (min-width: 640px) { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 3rem; } }

/* Non-hero pages need top offset since the header is fixed over the hero only on Home */
body:not(.is-home) main { padding-top: var(--header-h); }

.eyebrow { font-size: 0.68rem; letter-spacing: 0.3em; color: var(--stone); margin-bottom: 0.75rem; text-transform: uppercase; }
.font-display { font-family: var(--font-display); }
.italic-stone { font-style: italic; color: var(--stone-light); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  border: 1px solid transparent;
}
.btn-dark { background: var(--charcoal); color: var(--ivory); }

.btn-light { background: var(--ivory); color: var(--charcoal); }
.btn-light:hover { background: var(--stone-light); }
.btn-outline { border-color: var(--charcoal);}

.btn-text { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.btn-text svg { transition: transform .3s var(--ease); }
.btn-text:hover svg { transform: translateX(3px); }

/* ---------- Announcement bar ---------- */
.announcement-bar {
  height: var(--bar-h);
  background: var(--charcoal);
  color: var(--ivory);
  overflow: hidden;
  position: relative;
  z-index: 60;
}
.announcement-bar__track {
  display: flex;
  align-items: center;
  gap: 4rem;
  height: 100%;
  width: max-content;
  padding-left: 4rem;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: marquee 32s linear infinite;
}
.announcement-bar__track span.sep { color: var(--stone); margin-left: 4rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
/* ==========================================================================
   HEADER — أُعيد بناؤه بالكامل (Grid ثلاثي المناطق)
   --------------------------------------------------------------------------
   ⚠️ سبب المشكلة السابقة:
      كان الهيدر Flex بثلاثة أعمدة `flex: 1`. نظريًا تتساوى، لكن العناصر
      المرنة تبدأ بـ `min-width: auto` فترفض النزول تحت عرض محتواها. على
      الشاشات الضيقة يتمدّد عمود الأيقونات، فينكمش الوسط ويخرج الشعار عن
      المنتصف ثم يتداخل مع الأيقونات أو يُقصّ.

   ⚠️ الحل: `grid-template-columns: 1fr auto 1fr` + `min-width: 0`.
      العمودان الجانبيان **متساويان دائمًا** مهما اختلف محتواهما، فيقع
      الشعار في منتصف الشاشة الحقيقي لا في منتصف المساحة المتبقية.
      لا absolute positioning إطلاقًا → لا تداخل ممكن.

   الألوان والخطوط والهوية: بلا أي تغيير.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: var(--bar-h);
  z-index: 50;
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  background: rgba(246, 242, 234, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 0 rgba(23, 20, 15, 0.08);
  color: var(--charcoal);
  /* أجهزة iPhone الحديثة: لا التصاق بالحواف ولا اختفاء تحت النتوء */
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .4s var(--ease), min-height .4s var(--ease),
              box-shadow .4s var(--ease), color .4s var(--ease);
}

.site-header.is-transparent {
  min-height: var(--header-h-transparent);
  background: transparent;
  box-shadow: none;
  color: var(--ivory);
}

/* ---------- الشبكة الثلاثية ---------- */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* ← الوسط في منتصف الشاشة حقًا */
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: calc(clamp(.875rem, 4vw, 3.5rem) + env(safe-area-inset-left, 0px));
  padding-inline-end: calc(clamp(.875rem, 4vw, 3.5rem) + env(safe-area-inset-right, 0px));
}

/* ⚠️ min-width:0 على كل عمود — بدونه ترفض الأعمدة الانكماش ويحدث التداخل */
.header-col {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.25rem);
  min-width: 0;
}
.header-col--left  { justify-self: start; }
.header-col--right { justify-self: end; gap: clamp(.4rem, 1.4vw, 1.1rem);}

/* ---------- الشعار ---------- */
.logo {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: clamp(.3rem, 1vw, .5rem);
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 2.6vw, 1.1rem);
  letter-spacing: clamp(.12em, .8vw, .3em);
  white-space: nowrap;          /* لا يلتف الشعار على سطرين */
  color: inherit;
}
.logo svg {
  height: clamp(1.05rem, 3.2vw, 1.4rem);
  width: auto;
  flex: 0 0 auto;               /* الأيقونة لا تنكمش أبدًا */
}
.logo__word { min-width: 0; }

/* ---------- التنقّل (كمبيوتر) ---------- */
.nav-main { display: none; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); min-width: 0; }
@media (min-width: 1024px) { .nav-main { display: flex; } }

.nav-link {
  position: relative;
  padding: .25rem 0;
  font-size: clamp(.66rem, .8vw, .72rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: currentColor; transition: width .3s var(--ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }

/* ---------- الأيقونات ----------
   ⚠️ flex: 0 0 auto يمنع انكماشها أو تشوّهها.
   ⚠️ مساحة لمس 44×44 (الحد الأدنى الموصى به) دون تكبير الأيقونة بصريًا. */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-inline: -6px;          /* يعوّض المساحة فتبقى المسافات البصرية كما هي */
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.icon-btn svg { stroke-width: 1.5;}
.icon-btn:focus-visible { outline: 1px solid currentColor; outline-offset: -8px; }

/* زر القائمة: يظهر تحت 1024px فقط */
.nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* عناصر الكمبيوتر فقط — المفضلة واللغة تنتقلان لقائمة الجوال */
.header-only-lg { display: none; }
@media (min-width: 1024px) { .header-only-lg { display: inline-flex; } }

/* ---------- عدّاد السلة ---------- */
.icon-count {
  position: absolute;
  top: 6px; right: 4px;
  display: flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px;
  background: var(--charcoal); color: var(--ivory);
  font-family: var(--font-sans); font-size: 9px; line-height: 1;
  pointer-events: none;
}
.icon-count.accent { background: var(--accent); }

/* على الهيدر الشفاف يُعكس اللون ليبقى مقروءًا فوق الصورة */
.site-header.is-transparent .icon-count { background: var(--ivory); color: var(--charcoal); }

/* ---------- مبدّل اللغة ---------- */
.lang-switch { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; font-size: .7rem; letter-spacing: .1em; }
.lang-switch a { padding: .25rem; color: inherit; opacity: .6; }
.lang-switch a.is-active { opacity: 1; font-weight: 600; }
.lang-switch .sep { opacity: .4; }

/* ==========================================================================
   HEADER — نقاط التوقف
   ========================================================================== */

/* لوحي: تقليص المسافات قبل إخفاء أي شيء */
@media (max-width: 1023px) {
  .header-col--right { gap: .25rem; }
}

/* جوال متوسط */
@media (max-width: 430px) {
  :root { --header-h: 3.5rem; --header-h-transparent: 4rem; }
  .site-header__inner { gap: .35rem; }
  .icon-btn { width: 40px; height: 40px; margin-inline: -5px; }
  .icon-btn svg { width: 17px; height: 17px; }
}

/* جوال صغير — 360/375/390 */
@media (max-width: 390px) {
  .site-header__inner { padding-inline: calc(.75rem + env(safe-area-inset-left, 0px)); }
  .icon-btn { width: 38px; height: 38px; margin-inline: -4px; }
  .logo { letter-spacing: .1em; }
}

/* 360–380px (Galaxy S / iPhone SE / iPhone 12 mini)
   ⚠️ محاكاة العرض أظهرت أن الشعار الكامل + 3 أيقونات + الهامبرغر لا تتسع
      هنا. نقلّص تباعد أحرف الشعار وحجمه بدل السماح بالتداخل أو القص. */
@media (max-width: 380px) {
  .logo { font-size: .8rem; letter-spacing: .06em; gap: .25rem; }
  .logo svg { height: 1rem; }
  .icon-btn { width: 36px; height: 36px; margin-inline: -4px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .site-header__inner { gap: .25rem; padding-inline: calc(.625rem + env(safe-area-inset-left, 0px)); }
}

/* أضيق جهاز شائع — 320px
   الرمز وحده بلا كلمة: أوضح من نص مقصوص، ولا يزال الشعار قابلًا للنقر. */
@media (max-width: 344px) {
  .logo__word { display: none; }
  .logo svg { height: 1.3rem; }
  .icon-btn { width: 34px; height: 34px; margin-inline: -3px; }
  .icon-btn svg { width: 15px; height: 15px; }
}
/* ⚠️ حُذفت هنا كتلة موروثة من الهيدر السابق كانت تحتوي:
     .hide-mobile / .hide-desktop-lg / .hide-tablet-up  ← لم تعد مستخدمة في
       أي ترميز بعد إعادة بناء الهيدر (استُبدلت بـ .nav-toggle و .header-only-lg)
     .lang-switch { display:none }                      ← **كانت تُلغي** التعريف
       الصحيح أعلاه (سطر 263) لأنها تأتي بعده في الملف
     .lang-switch button                                ← لا تطابق شيئًا:
       مبدّل اللغة صار روابط <a> لا أزرار
   هذا التكرار هو سبب ظهور بعض عناصر الهيدر بشكل غير متوقّع. */


/* ---------- Mobile menu ---------- */
.mobile-menu {
  /* ⚠️ 120 > الهيدر(50) والبحث(80) والسلة(95) — لا تختفي خلف أي طبقة */
  position: fixed; inset: 0; z-index: 120; background: var(--ivory);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; }
.mobile-menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: 0 2rem; }
.mobile-menu__nav a {
  display: block; border-bottom: 1px solid var(--taupe-line);
  font-family: var(--font-display); letter-spacing: -0.01em; color: var(--charcoal);}
.mobile-menu__bottom { display: flex; flex-direction: column; gap: 1.25rem; border-top: 1px solid var(--taupe-line); padding: 1.5rem 2rem; }
.mobile-menu__links { display: flex; align-items: center; font-size: .72rem; font-weight: 500; letter-spacing: .18em;}
.mobile-menu__links a { display: flex; align-items: center; gap: .5rem; }
.mobile-menu__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__social { display: flex; gap: 1rem; font-size: .68rem; letter-spacing: .18em; color: var(--stone); }

/* ---------- Search overlay ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(23, 20, 15, .5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__panel {
  margin: 0 auto; width: 100%; max-width: 42rem; background: var(--ivory);
  padding: 6rem 1.5rem 2rem; transform: translateY(-16px); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); opacity: 1; }
@media (min-width: 640px) { .search-overlay__panel { padding: 6rem 2.5rem 2rem; } }
.search-overlay__field { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(23,20,15,.2); padding-bottom: 1rem; }
.search-overlay__field input {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--charcoal);
}
.search-overlay__field input::placeholder { color: var(--stone-light); }
.search-results { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-height: 60vh; overflow-y: auto; }
.search-result { display: flex; align-items: center; gap: 1rem; }
.search-result img { height: 5rem; width: 4rem; object-fit: cover; background: rgba(216,207,190,.3); }
.search-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.search-tags button { border: 1px solid rgba(23,20,15,.15); padding: .35rem .75rem; font-size: .72rem; transition: background-color .2s, color .2s; }
.search-tags button:hover { background: var(--charcoal); color: var(--ivory); }

/* ---------- Cart drawer ---------- */
.cart-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(23,20,15,.45); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cart-backdrop.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 28rem; background: var(--ivory);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .45s var(--ease);}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--taupe-line); padding: 1.25rem 1.5rem; }
.cart-drawer__head h2 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .02em; margin: 0; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.cart-drawer__foot { border-top: 1px solid var(--taupe-line); padding: 1.25rem 1.5rem; }
.cart-line { display: flex; gap: 1rem; }
.cart-line + .cart-line { margin-top: 1.5rem; }
.cart-line img { height: 8rem; width: 6rem; flex-shrink: 0; object-fit: cover; background: rgba(216,207,190,.3); }
.cart-line__meta { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--taupe-line); }
.qty-stepper button { display: flex; align-items: center; justify-content: center; height: 1.75rem; width: 1.75rem; }
.qty-stepper span { width: 1.5rem; text-align: center; font-size: .8rem; }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 2rem; }
.cart-subtotal-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: .9rem; }
.cart-secure-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1rem; font-size: .68rem; color: var(--stone); }
.cart-secure-row span { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--charcoal);
  min-height: 560px; height: calc(100vh - 2rem);
}
@media (min-width: 1024px) { .hero { flex-direction: row; } }
.hero__text { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: 7rem 1.5rem 2.5rem; width: 100%;}
@media (min-width: 640px) { .hero__text { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .hero__text { width: 54%; padding: 2rem 4rem; } }
.hero__kicker { display: flex; align-items: center; gap: .75rem; font-weight: 500; margin-bottom: 1.25rem;}
.hero__kicker .line { height: 1px; width: 2rem; background: var(--stone-light); opacity: .6; }
.hero__title { font-family: var(--font-display); line-height: .92; font-size: 13vw; margin: 0;}
@media (min-width: 640px) { .hero__title { font-size: 8vw; } }
@media (min-width: 1024px) { .hero__title { font-size: 5vw; } }
@media (min-width: 1280px) { .hero__title { font-size: 4.6vw; } }
.hero__title span { display: block; overflow: hidden; }
/* ⚠️ opacity:0 آمن هنا لأن الإظهار حركة CSS لا JS — تعمل بلا JavaScript.
   لكن إن عُطّلت الحركات في المتصفح يبقى العنوان مخفيًا، لذا نُظهره فورًا
   لمن يفضّل تقليل الحركة. */
.hero__title span.line-reveal { transform: translateY(100%); opacity: 0; animation: line-up .9s var(--ease) forwards; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero__title span.line-reveal { transform: none; opacity: 1; animation: none; }
}
.hero__title .d1 { animation-delay: .15s; }
/* 🔴 كان: color: var(--stone-light) — رمادي داكن (#6d6862) على خلفية داكنة
   = تباين 2.0:1، أي السطر المائل (بصمة التصميم) شبه غير مرئي.
   المرجع يعرضه بنفس اللون الكريمي، والتمييز بالميل لا باللون. */
.hero__title .d2 { animation-delay: .28s; font-style: italic; }
.hero__title .d3 { animation-delay: .41s; } .hero__title .d4 { animation-delay: .54s; }
@keyframes line-up { to { transform: translateY(0); opacity: 1; } }
.hero__copy { margin-top: 1.75rem; color: rgba(246,242,234,.6); opacity: 0; animation: fade-up .7s var(--ease) .85s forwards;}
.hero__ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 1rem; opacity: 0; animation: fade-up .7s var(--ease) 1s forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* 🔴 كان: height: 42vh — النسبة تتراوح بين 0.61 و1.34 حسب الشاشة.
   نسبة صريحة توحّد الشكل عبر الأجهزة. */
/* 🔴 `.hero` عمود flex بـ min-height. عنصر flex لا يحترم aspect-ratio إن
   كان مضغوطًا: النص يأخذ حصته والصورة تُقلَّص لما تبقّى، فيثبت ارتفاعها
   عند ~280px مهما كان العرض (القياس: نسبة 1.14 عند 320px و2.93 عند 768px).

   `flex: 0 0 auto` يمنع الانكماش، فتعود النسبة هي المحدِّد الفعلي. */
.hero__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  flex: 0 0 auto;
  overflow: hidden;
}
@media (min-width: 768px)  { .hero__image { aspect-ratio: 3 / 2; } }
/* ⚠️ على الكمبيوتر الـ hero تركيبة مقسومة: الصورة عمود جانبي بارتفاع
   القسم كله، لا كتلة بنسبة. `height: 100%` يفوز على aspect-ratio، فنُلغي
   النسبة صراحةً هنا بدل تركها متعارضة (كانت تعطي 9 نسب مختلفة في القياس).
   الارتفاع هنا مشتق من ارتفاع .hero المضبوط بـ clamp() فلا يتضخّم. */
@media (min-width: 1024px) {
  .hero__image { aspect-ratio: auto; width: 46%; height: 100%; }
}
.hero__image img { height: 100%; width: 100%; object-fit: cover; transform: scale(1.18); animation: hero-zoom-out 1.6s var(--ease) forwards; }
@keyframes hero-zoom-out { to { transform: scale(1); } }
.hero__image .veil { position: absolute; inset: 0; background: var(--charcoal); animation: veil-out .9s var(--ease) .2s forwards; }
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }
.hero__image .gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,15,.4), transparent 60%); }
@media (min-width: 1024px) { .hero__image .gradient { background: linear-gradient(to left, rgba(23,20,15,.35), transparent 60%); } }
.hero__caption { position: absolute; bottom: 1.5rem; right: 1.5rem; text-align: right; font-size: .62rem; letter-spacing: .22em; color: rgba(246,242,234,.8); text-transform: uppercase; }
.hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .5rem; color: rgba(246,242,234,.7); z-index: 10; }
@media (min-width: 1024px) { .hero__scroll { display: flex; } }
.hero__scroll span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
.hero__scroll svg { animation: bounce 1.6s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Reveal on scroll ----------
   🔴 خلل حقيقي أُصلح: كانت القاعدة `[data-reveal]{opacity:0}` تُطبَّق فورًا،
      و JavaScript وحده يُضيف .is-visible. النتيجة: مع تعطّل JS أو فشل تحميله
      **21 عنصرًا يختفي تمامًا** — منها كل أقسام الصفحة الرئيسية (المنتجات،
      الفئات، قصة العلامة). صفحة سوداء عمليًا.

   الحل: الإخفاء لا يحدث إلا بعد أن يعلن JS عن نفسه بإضافة .js على <html>.
   بلا JS: المحتوى ظاهر بلا حركة — وهو السلوك الصحيح. */
[data-reveal] { opacity: 1; transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* من يفضّل تقليل الحركة يرى المحتوى فورًا */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section heading ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--taupe-line); padding-bottom: 2rem; margin-bottom: 3rem; }
.section-title { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: -0.01em; margin: 0; }
@media (min-width: 640px) { .section-title { font-size: 3rem; } }

/* ---------- Product grid / card ---------- */
.section-pad { padding: 6rem 1.25rem; }
@media (min-width: 640px) { .section-pad { padding: 6rem 2rem; } }
@media (min-width: 1024px) { .section-pad { padding: 6rem 3rem; } }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; row-gap: 2.5rem; }
@media (min-width: 640px) { .product-grid { column-gap: 1.5rem; } }
@media (min-width: 768px) { .product-grid.cols-md-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; } }

.product-card { display: flex; flex-direction: column; }
.product-card__frame { position: relative; display: block; overflow: hidden; background: rgba(216,207,190,.3); aspect-ratio: 3 / 4; }
.product-card__frame img {
  transition: opacity .9s var(--ease), transform .9s var(--ease);}
.product-card__frame img.img-alt { opacity: 0; transform: scale(1.04); }
.product-card__frame:hover img.img-main { opacity: 0; transform: scale(1.04); }
.product-card__frame:hover img.img-alt { opacity: 1; transform: scale(1); }
.product-card__badges { position: absolute; left: .75rem; top: .75rem; display: flex; flex-direction: column; gap: .35rem; z-index: 2; }
.badge { padding: .25rem .6rem; font-size: .62rem; font-weight: 500; letter-spacing: .18em; color: var(--ivory); text-transform: uppercase; }
/* 🔴 كان background: var(--charcoal) — وبعد الانعكاس صار كريميًا، بينما
   لون النص كريمي أيضًا = شارة فارغة بصريًا. الشارة تجلس فوق صورة المنتج،
   فالصحيح خلفية شفافة داكنة ونص كريمي. */
.badge-new { background: rgba(17, 17, 19, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.badge-sale { background: var(--accent); }
.wishlist-btn {
  position: absolute; right: .75rem; top: .75rem; z-index: 2; display: flex; align-items: center; justify-content: center;
  height: 2rem; width: 2rem; background: rgba(246,242,234,.85); backdrop-filter: blur(4px); color: var(--charcoal);
  opacity: 0; transition: opacity .3s;
}
.product-card__frame:hover .wishlist-btn { opacity: 1; }
.wishlist-btn.is-active svg { fill: var(--charcoal); }
@media (max-width: 639px) { .wishlist-btn { opacity: 1; } }

.product-card__info { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.product-card__name { font-size: .85rem; letter-spacing: .01em;}
.product-card__price { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.product-card__price .sale { color: var(--accent); }
.product-card__price .old { text-decoration: line-through;}
.color-dots { display: flex; align-items: center; gap: .35rem; padding-top: .1rem; }
.color-dot { height: .75rem; width: .75rem; border-radius: 999px; border: 1px solid rgba(23,20,15,.1); }

/* ---------- Editorial full-bleed section ---------- */
/* 🔴 كان: height: 85vh; min-height: 560px
   عند 320px يعطي 320×765 أي نسبة 0.42 — صورة عملاقة عموديًا تبتلع الشاشة،
   بينما على الكمبيوتر تبدو عريضة. القياس في Chromium أكّد اختلاف النسبة
   بين 0.42 و0.57 حسب الشاشة، أي **لا نظام صور موحّدًا**.

   الحل: نسبة صريحة تتدرّج مع المقاس بدل ارتفاع مربوط بارتفاع الشاشة.
   ⚠️ min-height بقي كحد أدنى للقراءة فقط، لا كمحدّد للنسبة. */
.editorial {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;          /* الجوال: عمودي معتدل */
  min-height: 26rem;
  overflow: hidden;             /* قصّ الصورة داخل الإطار — مقصود لا إخفاء لخلل */
}
@media (min-width: 768px)  { .editorial { aspect-ratio: 16 / 10; min-height: 30rem; } }
@media (min-width: 1280px) { .editorial { aspect-ratio: 21 / 9;  min-height: 34rem; } }
.editorial img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: top; }
.editorial::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,15,.85), rgba(23,20,15,.1) 60%, transparent); }
.editorial__content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1.5rem 4rem; }
@media (min-width: 640px) { .editorial__content { padding: 0 2.5rem 4rem; } }
@media (min-width: 1024px) { .editorial__content { padding: 0 4rem 5rem; } }
.editorial__title { font-family: var(--font-display); color: var(--ivory); font-size: 3rem; line-height: .95; max-width: 48rem; }
@media (min-width: 640px) { .editorial__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .editorial__title { font-size: 4.5rem; } }
.editorial__copy { margin-top: 1.5rem; max-width: 28rem; font-size: .875rem; line-height: 1.7; color: rgba(246,242,234,.7); }

/* ---------- Category grid ---------- */
.category-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
.category-card { position: relative; display: block; height: 420px; overflow: hidden; background: rgba(216,207,190,.3); }
@media (min-width: 640px) { .category-card { height: 480px; } }
.category-card img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.category-card:hover img { transform: scale(1.1); }
.category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,15,.7), transparent 60%); }
.category-card__label { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; z-index: 2; }
.category-card__label span { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); transition: transform .3s var(--ease); }
.category-card:hover .category-card__label span { transform: translateY(-4px); }
.category-card__label svg { color: var(--ivory); opacity: 0; transition: opacity .3s; }
.category-card:hover .category-card__label svg { opacity: 1; }

/* ---------- Brand story ---------- */
.brand-story { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .brand-story { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
/* 🔴 حُذف من هنا `grid-column: span 12`.
   السبب: الشبكة الأم تحت 1024px هي `grid-template-columns: 1fr` (عمود واحد)،
   وطلب span 12 داخلها يُجبر المتصفح على إنشاء 11 عمودًا **ضمنيًا** فيصير
   عرض الصف 12 ضعف الحاوية. قياس Chromium: فيضان +244px عند 320px،
   كان مخفيًا خلف `overflow-x: clip` على html/body.
   العنصر يشغل العمود الوحيد تلقائيًا بلا أي تصريح.
   `min-width: 0` يسمح للعنصر بالانكماش داخل الشبكة (القيمة الافتراضية
   `auto` تمنع الانكماش دون محتواه وتُبقي الفيضان). */
.brand-story__media { position: relative; min-width: 0; }
@media (min-width: 1024px) { .brand-story__media { grid-column: span 7; } }
.brand-story__media .main { aspect-ratio: 4/5; width: 100%; max-width: 34rem; overflow: hidden; background: rgba(216,207,190,.3); }
.brand-story__media .main img { height: 100%; width: 100%; object-fit: cover; }
.brand-story__media .detail { position: absolute; bottom: -2rem; right: -1rem; display: none; aspect-ratio: 4/5; width: 14rem; overflow: hidden; border: 8px solid var(--ivory); background: rgba(216,207,190,.3); }
@media (min-width: 640px) { .brand-story__media .detail { display: block; } }
@media (min-width: 1024px) { .brand-story__media .detail { right: -2.5rem; } }
.brand-story__media .detail img { height: 100%; width: 100%; object-fit: cover; }
.brand-story__text { min-width: 0; }
@media (min-width: 1024px) { .brand-story__text { grid-column: 9 / span 4; } }
.brand-story__text h2 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.05; margin: 0 0 1.5rem; }
@media (min-width: 640px) { .brand-story__text h2 { font-size: 3rem; } }
.brand-story__text p { font-size: .875rem; line-height: 1.7; color: var(--stone); }

/* ---------- Benefits ---------- */
.benefits { border-top: 1px solid var(--taupe-line); border-bottom: 1px solid var(--taupe-line); background: var(--paper); padding: 3.5rem 1.25rem; }
@media (min-width: 640px) { .benefits { padding: 3.5rem 2rem; } }
@media (min-width: 1024px) { .benefits { padding: 3.5rem 3rem; } }
.benefits__grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
@media (min-width: 640px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .benefits__grid { grid-template-columns: repeat(5, 1fr); } }
.benefit-item { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.benefit-item svg { height: 1.5rem; width: 1.5rem; stroke-width: 1; }
.benefit-item span { font-size: .68rem; font-weight: 500; letter-spacing: .16em; color: var(--charcoal-soft); text-transform: uppercase; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--charcoal); color: var(--ivory); padding: 6rem 1.25rem; }
@media (min-width: 640px) { .newsletter { padding: 6rem 2rem; } }
@media (min-width: 1024px) { .newsletter { padding: 6rem 3rem; } }
.newsletter__inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.newsletter__inner h2 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; margin: 0; }
@media (min-width: 640px) { .newsletter__inner h2 { font-size: 3rem; } }
@media (min-width: 768px) { .newsletter__inner h2 { font-size: 3.5rem; } }
.newsletter__inner p { margin: 1.5rem auto 0; max-width: 26rem; font-size: .875rem; line-height: 1.7; color: rgba(246,242,234,.6); }
.newsletter__form { margin-top: 2.5rem; width: 100%; max-width: 26rem; display: flex; border-bottom: 1px solid rgba(246,242,234,.3); }
.newsletter__form input { flex: 1; background: transparent; border: none; outline: none; padding: .75rem 0; color: var(--ivory); font-size: .875rem; }
.newsletter__form input::placeholder { color: rgba(246,242,234,.4); }
.newsletter__form button { display: flex; align-items: center; gap: .5rem; padding-left: 1rem; font-size: .72rem; letter-spacing: .2em; color: var(--ivory); }
.newsletter__success { border: 1px solid rgba(246,242,234,.2); padding: 1rem; font-size: .875rem; color: rgba(246,242,234,.8); width: 100%; max-width: 26rem; text-align: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ivory-dim); padding: 5rem 1.25rem 0; }
@media (min-width: 640px) { .site-footer { padding: 5rem 2rem 0; } }
@media (min-width: 1024px) { .site-footer { padding: 5rem 3rem 0; } }
.footer-top { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--taupe-line); padding-bottom: 4rem; }
@media (min-width: 1024px) { .footer-top { flex-direction: row; } }
.footer-logo { display: flex; align-items: center; gap: .75rem; color: var(--charcoal); }
.footer-logo svg { height: 3rem; width: 3rem; }
@media (min-width: 640px) { .footer-logo svg { height: 3.5rem; width: 3.5rem; } }
.footer-logo span { font-family: var(--font-display); font-size: 3rem; letter-spacing: .1em; }
@media (min-width: 640px) { .footer-logo span { font-size: 4.5rem; } }
.footer-blurb { max-width: 20rem; font-size: .875rem; line-height: 1.7; color: var(--stone); }
.footer-cols { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; padding: 4rem 0; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col h4 { font-weight: 500; text-transform: uppercase; margin: 0 0 1.25rem;}
.footer-col ul { display: flex; flex-direction: column; gap: .75rem; }
.footer-col a { font-size: .875rem; transition: color .2s;}

.footer-bottom { max-width: var(--max-w); margin: 0 auto; flex-direction: column; padding: 2rem 0; text-align: center;}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom p { font-size: .75rem; color: var(--stone); margin: 0; }
.footer-payments { font-size: .68rem; letter-spacing: .14em; color: var(--stone);}

/* ---------- Shop page ---------- */
.shop-head { border-bottom: 1px solid var(--taupe-line); padding: 4rem 1.25rem 2.5rem; }
@media (min-width: 640px) { .shop-head { padding: 4rem 2rem 2.5rem; } }
@media (min-width: 1024px) { .shop-head { padding: 4rem 3rem 2.5rem; } }
.shop-title { font-family: var(--font-display); font-size: 3rem; line-height: .95; margin: 0; }
@media (min-width: 640px) { .shop-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .shop-title { font-size: 4.5rem; } }
.shop-count { margin-top: 1rem; font-size: .875rem; color: var(--stone); }

.shop-layout { max-width: 1700px; margin: 0 auto; display: flex; gap: 2.5rem; padding: 2.5rem 1.25rem; }
@media (min-width: 640px) { .shop-layout { padding: 2.5rem 2rem; } }
@media (min-width: 1024px) { .shop-layout { padding: 2.5rem 3rem; } }

.filter-sidebar { display: none; width: 16rem; flex-shrink: 0; }
@media (min-width: 1024px) { .filter-sidebar { display: block; } }
.filter-sidebar__sticky { position: sticky; top: 8.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.filter-head { display: flex; align-items: center; justify-content: space-between; }
.filter-head span { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.filter-head button { font-size: .72rem; color: var(--stone); text-decoration: underline; text-underline-offset: 2px; }
.filter-group { display: flex; flex-direction: column; gap: .75rem; }
.filter-group > span.label { font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.filter-group .options { display: flex; flex-direction: column; gap: .6rem; }
.checkbox-row { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--stone); cursor: pointer; }
.checkbox-row .box { display: flex; height: 1rem; width: 1rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--taupe-line); }
.checkbox-row input { display: none; }
.checkbox-row input:checked + .box { border-color: var(--charcoal); background: var(--charcoal); }
.checkbox-row input:checked + .box::after { content: ""; height: .375rem; width: .375rem; background: var(--ivory); }
.checkbox-row input:checked ~ span.txt { color: var(--charcoal); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 1px solid var(--taupe-line); padding: .4rem .75rem; font-size: .72rem; transition: border-color .2s, background-color .2s, color .2s; }
.chip.is-active, .chip:hover { border-color: var(--charcoal); }
.chip.is-active { background: var(--charcoal); color: var(--ivory); }
.range-row { display: flex; justify-content: space-between; font-size: .72rem; color: var(--stone); }

.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 2rem; }
@media (min-width: 1024px) { .shop-toolbar { justify-content: flex-end; } }
.toolbar-btn { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--taupe-line); padding: .6rem 1rem; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sort-wrap { position: relative; }
.sort-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20; width: 13rem; background: var(--ivory); border: 1px solid var(--taupe-line); box-shadow: 0 12px 24px rgba(23,20,15,.08); display: none; }
.sort-menu.is-open { display: block; }
.sort-menu button { display: block; width: 100%; padding: .75rem 1rem; text-align: left; font-size: .72rem; }
.sort-menu button:hover { background: var(--ivory-dim); }
.sort-menu button.is-active { color: var(--accent); }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 6rem 1.5rem; text-align: center; }
.empty-state h3 { font-family: var(--font-display); font-size: 1.9rem; margin: 0; }
.empty-state p { max-width: 22rem; font-size: .875rem; color: var(--stone); }

/* Mobile filter drawer reuses cart-drawer look on the left */
.filter-drawer { position: fixed; top: 0; left: 0; z-index: 95; height: 100%; width: 100%; max-width: 24rem; background: var(--ivory); padding: 1.5rem; overflow-y: auto; transform: translateX(-100%); transition: transform .4s var(--ease); }
.filter-drawer.is-open { transform: translateX(0); }
.filter-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.filter-drawer__foot { margin-top: 2.5rem; width: 100%; background: var(--charcoal); color: var(--ivory); padding: 1rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-align: center; }

/* ---------- Product detail ---------- */
.pdp-crumbs { max-width: 1700px; margin: 0 auto; padding: 2rem 1.25rem 0; display: flex; gap: .5rem; font-size: .75rem; color: var(--stone); }
@media (min-width: 640px) { .pdp-crumbs { padding: 2rem 2rem 0; } }
@media (min-width: 1024px) { .pdp-crumbs { padding: 2rem 3rem 0; } }
.pdp-layout { max-width: 1700px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem 1.25rem; }
@media (min-width: 640px) { .pdp-layout { padding: 2rem 2rem; } }
@media (min-width: 1024px) { .pdp-layout { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; padding: 2rem 3rem; } }
.pdp-gallery { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .pdp-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pdp-gallery { grid-column: span 7; } }
.pdp-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: rgba(216,207,190,.3); }
.pdp-info { min-width: 0; }
@media (min-width: 1024px) { .pdp-info { grid-column: span 5; } }
.pdp-info__sticky { position: sticky; top: 8.5rem; }
.pdp-info h1 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; margin: 1rem 0 0; }
@media (min-width: 640px) { .pdp-info h1 { font-size: 3rem; } }
.pdp-sku { margin-top: .5rem; font-size: .72rem; letter-spacing: .14em; color: var(--stone); }
.pdp-price { margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; }
.pdp-price .old { font-size: 1rem; color: var(--stone); text-decoration: line-through; }
.pdp-desc { margin-top: 1.5rem; max-width: 28rem; font-size: .875rem; line-height: 1.7; color: var(--stone); }
.pdp-block { margin-top: 2rem; }
.pdp-block__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.pdp-block__label span.title { font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.pdp-block__label button.size-guide { font-size: .72rem; color: var(--stone); text-decoration: underline; text-underline-offset: 2px; }
.color-swatches { display: flex; gap: .6rem; }
.color-swatch { height: 2rem; width: 2rem; border-radius: 999px; border: 2px solid transparent; padding: 2px; }
.color-swatch.is-active { border-color: var(--charcoal); }
.color-swatch span { display: block; height: 100%; width: 100%; border-radius: 999px; border: 1px solid rgba(23,20,15,.1); }
.size-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.size-btn { display: flex; height: 2.75rem; min-width: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--taupe-line); padding: 0 .75rem; font-size: .85rem; transition: border-color .2s, background-color .2s, color .2s; }
.size-btn.is-active { border-color: var(--charcoal); background: var(--charcoal); color: var(--ivory); }
.size-hint { margin-top: .5rem; font-size: .72rem; color: var(--stone); }
.stock-note { margin-top: 1.5rem; font-size: .72rem; font-weight: 500; letter-spacing: .05em; color: #4ade80; }
.pdp-actions { margin-top: 1.5rem; display: flex; gap: .75rem; }
.pdp-actions .btn-dark { flex: 1; height: 3.5rem; }
.pdp-wishlist-btn { display: flex; height: 3.5rem; width: 3.5rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--taupe-line); }
.pdp-shipping { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid var(--taupe-line); padding-top: 1.5rem; font-size: .72rem; color: var(--stone); }
.pdp-shipping span { display: flex; align-items: center; gap: .5rem; }
.accordion { border-top: 1px solid var(--taupe-line); margin-top: 2rem; }
.accordion-item { border-bottom: 1px solid var(--taupe-line); }
.accordion-item__head { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1rem 0; font-size: .875rem; text-align: left; }
.accordion-item__head svg { transition: transform .2s; }
.accordion-item.is-open .accordion-item__head svg { transform: rotate(180deg); }
.accordion-item__body { display: none; padding-bottom: 1rem; font-size: .875rem; line-height: 1.7; color: var(--stone); }
.accordion-item.is-open .accordion-item__body { display: block; }

/* ---------- Cart page ---------- */
.cart-page-layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3.5rem; padding: 4rem 1.25rem; }
@media (min-width: 640px) { .cart-page-layout { padding: 4rem 2rem; } }
@media (min-width: 1024px) { .cart-page-layout { grid-template-columns: repeat(12, 1fr); padding: 4rem 3rem; } }
.cart-page-items { min-width: 0; }
@media (min-width: 1024px) { .cart-page-items { grid-column: span 8; } }
.cart-page-items ul { display: flex; flex-direction: column; }
.cart-page-items li { display: flex; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--taupe-line); }
.cart-page-items li:first-child { padding-top: 0; }
.cart-page-items img { height: 10rem; width: 8rem; flex-shrink: 0; object-fit: cover; background: rgba(216,207,190,.3); }
.cart-page-summary { min-width: 0; }
@media (min-width: 1024px) { .cart-page-summary { grid-column: span 4; } }
.summary-box { background: var(--ivory-dim); padding: 2rem; position: sticky; top: 8.5rem; }
.summary-box h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1.5rem; }
.summary-row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--stone); padding: .4rem 0; }
.summary-total { display: flex; justify-content: space-between; border-top: 1px solid var(--taupe-line); padding-top: 1rem; margin-top: .5rem; font-family: var(--font-display); font-size: 1.25rem; }

/* ---------- Checkout ---------- */
.checkout-head { border-bottom: 1px solid var(--taupe-line); padding: 4rem 1.25rem 2rem; }
@media (min-width: 640px) { .checkout-head { padding: 4rem 2rem 2rem; } }
@media (min-width: 1024px) { .checkout-head { padding: 4rem 3rem 2rem; } }
.checkout-head h1 { font-family: var(--font-display); font-size: 2.25rem; margin: 0; }
@media (min-width: 640px) { .checkout-head h1 { font-size: 3rem; } }
.checkout-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .72rem; }
.checkout-step { display: flex; align-items: center; gap: .5rem; }
.checkout-step .dot { display: flex; height: 1.5rem; width: 1.5rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--taupe-line); color: var(--stone); font-size: .68rem; }
.checkout-step.is-active .dot, .checkout-step.is-done .dot { border-color: var(--charcoal); color: var(--charcoal); }
.checkout-step.is-done .dot { background: var(--charcoal); color: var(--ivory); }
.checkout-step span.label { letter-spacing: .14em; color: var(--stone); text-transform: uppercase; }
.checkout-step.is-active span.label { color: var(--charcoal); }
.checkout-sep { height: 1px; width: 2rem; background: var(--taupe-line); margin: 0 .5rem; }
@media (min-width: 640px) { .checkout-sep { width: 3.5rem; } }

.checkout-layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3.5rem; padding: 4rem 1.25rem; }
@media (min-width: 640px) { .checkout-layout { padding: 4rem 2rem; } }
@media (min-width: 1024px) { .checkout-layout { grid-template-columns: repeat(12, 1fr); padding: 4rem 3rem; } }
.checkout-form-col { min-width: 0; }
@media (min-width: 1024px) { .checkout-form-col { grid-column: span 7; } }
.checkout-summary-col { min-width: 0; }
@media (min-width: 1024px) { .checkout-summary-col { grid-column: span 5; } }
.checkout-panel { display: none; flex-direction: column; gap: 1.25rem; }
.checkout-panel.is-active { display: flex; }
.checkout-panel h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.form-field { display: flex; flex-direction: column; gap: .5rem; font-size: .72rem; color: var(--stone); }
.form-field input { border: none; border-bottom: 1px solid var(--taupe-line); background: transparent; padding: .6rem 0; font-size: .875rem; color: var(--charcoal); outline: none; transition: border-color .2s; }
.form-field input:focus { border-color: var(--charcoal); }
/* 🔴 عمودان ثابتان: عند 320px يصبح كل حقل 181px داخل حاوية 280px
   فيفيض 86px. القياس في Chromium أكّده على 320/360/375/390.
   الحل: عمود واحد تحت 400px، وminmax(0,1fr) يسمح بالانكماش. */
.form-row-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 400px) { .form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-field { min-width: 0; }
.form-field input, .form-field select, .form-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.checkout-confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2.5rem 0; }
.checkout-confirm .check-circle { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--charcoal); color: var(--ivory); }

/* ---------- Auth pages ---------- */
.auth-wrap { max-width: 28rem; margin: 0 auto; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 1.5rem; }
.auth-wrap h1 { font-family: var(--font-display); font-size: 2.25rem; text-align: center; margin: 0 0 2.5rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-form .checkbox-row input { display: inline-block; margin-top: 2px; }
.auth-footnote { margin-top: 2rem; text-align: center; font-size: .875rem; color: var(--stone); }
.link-underline { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Account page ---------- */
.account-head { border-bottom: 1px solid var(--taupe-line); padding: 4rem 1.25rem 2.5rem; }
@media (min-width: 640px) { .account-head { padding: 4rem 2rem 2.5rem; } }
@media (min-width: 1024px) { .account-head { padding: 4rem 3rem 2.5rem; } }
.account-layout { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; padding: 4rem 1.25rem; }
@media (min-width: 640px) { .account-layout { padding: 4rem 2rem; } }
@media (min-width: 1024px) { .account-layout { flex-direction: row; padding: 4rem 3rem; } }
.account-tabs { display: flex; gap: .5rem; overflow-x: auto; flex-shrink: 0; }
@media (min-width: 1024px) { .account-tabs { width: 14rem; flex-direction: column; gap: .25rem; } }
.account-tab { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; white-space: nowrap; font-size: .875rem; color: var(--stone); }
.account-tab.is-active { background: var(--charcoal); color: var(--ivory); }
.account-tab:hover:not(.is-active) { background: var(--ivory-dim); }
.account-panel { display: none; flex: 1; }
.account-panel.is-active { display: block; }
.account-panel h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1.5rem; }
.order-list { display: flex; flex-direction: column; border-top: 1px solid var(--taupe-line); border-bottom: 1px solid var(--taupe-line); }
.order-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--taupe-line); }
.order-row:last-child { border-bottom: none; }
.address-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .address-grid { grid-template-columns: repeat(2, 1fr); } }
.address-card { border: 1px solid var(--taupe-line); padding: 1.5rem; }
.address-card-add { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--taupe-line); padding: 1.5rem; font-size: .875rem; color: var(--stone); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ==========================================================================
   iyzico Hosted Checkout Form — عزل كامل
   --------------------------------------------------------------------------
   🔴 قاعدة أمنية وسلوكية: نموذج الدفع يأتي من خوادم iyzico ويجب أن يُعرض
      **كما تُعيده حرفيًا**. أي تنسيق يتسرّب إلى داخله قد يخفي حقلًا أو يشوّه
      زر تأكيد أو يكسر تخطيطه، وهذه مخاطرة على عملية دفع حقيقية.

   المشكلة التي تعالجها هذه الكتلة:
      lexvon.css يضبط عالميًا:
          a { color: inherit; text-decoration: none; }
          button, input, select { font: inherit; color: inherit; }
          button { cursor: pointer; background: none; border: none; }
      هذه القواعد كانت ستُطبَّق داخل نموذج iyzico وتزيل خلفية أزراره وحدودها
      وتفرض خط Inter على حقوله.

   الحل: نُعيد ضبط الوراثة عند حدود .iyzico-frame، فيعود كل ما بداخله إلى
   قيم المتصفح الافتراضية التي يتوقعها iyzico.

   ⚠️ Option 1 ينسّق **الحاوية فقط** (المسافات والحدود والخلفية).
      لا يوجد أي محدّد يستهدف عناصر داخل النموذج.
   ========================================================================== */

/* الحاوية — هنا فقط يُسمح بتنسيق Option 1 */
.iyzico-frame {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--taupe-line);
  background: var(--paper);
  border-radius: 2px;
  min-height: 420px;
}

/* حدود العزل: كل ما بداخل الحاوية يعود لافتراضيات المتصفح */
.iyzico-frame * {
  font: revert;
  color: revert;
}

.iyzico-frame a {
  color: revert;
  text-decoration: revert;
}

.iyzico-frame button,
.iyzico-frame input,
.iyzico-frame select,
.iyzico-frame textarea {
  font: revert;
  color: revert;
  background: revert;
  border: revert;
  cursor: revert;
  padding: revert;
  margin: revert;
  -webkit-appearance: revert;
  appearance: revert;
}

/* iyzico قد تعرض النموذج داخل iframe */
.iyzico-frame iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

@media (max-width: 640px) {
  .iyzico-frame { padding: 0.75rem; }
}

/* ==========================================================================
   Mobile menu — تحصينات
   خلفية قابلة للنقر للإغلاق + عناصر القائمة الجديدة (البحث/السلة).
   ========================================================================== */
.mobile-menu__backdrop {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(23, 20, 15, .35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}


/* زر البحث داخل القائمة يطابق شكل الروابط تمامًا */
.mobile-menu__links .mm-link,
.mobile-menu__links button.mm-link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: none; padding: 0;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; color: var(--charcoal); cursor: pointer;
}
.mobile-menu__links { flex-wrap: wrap; gap: 1rem 1.5rem; }
.mobile-menu__social a { color: var(--stone); }
.mobile-menu .lang-switch a { color: var(--stone); padding: 0 .25rem; }
.mobile-menu .lang-switch a.is-active { color: var(--charcoal); font-weight: 600; }

/* شاشات قصيرة جدًا: القائمة تمرّر بدل أن تقتطع */
@media (max-height: 640px) {
  .mobile-menu__nav { justify-content: flex-start; padding-top: 1rem; overflow-y: auto; }
  .mobile-menu__nav a { font-size: 1.75rem; padding: .7rem 0; }
}
@media (max-width: 380px) {
  .mobile-menu__nav a { font-size: 1.9rem; }
  .mobile-menu__nav { padding: 0 1.25rem; }
  .mobile-menu__bottom { padding: 1.25rem; }
}

/* ==========================================================================
   LEXVON — طبقة التحسين (UI Fix Pass)
   --------------------------------------------------------------------------
   ⚠️ هذه الكتلة **لا تعيد تصميم أي شيء**. لا لون واحد يتغيّر، ولا عائلة خط،
      ولا هوية بصرية. كل ما هنا: مقاسات متجاوبة بـ clamp()، نِسَب صور موحّدة،
      ومنع الفيضان الأفقي. الهوية = Design Option 1 كما هي.
   ========================================================================== */

/* ---------- 1) منع الفيضان الأفقي (أصل معظم مشاكل الجوال) ---------- */
html { -webkit-text-size-adjust: 100%; }
/* ⚠️ `overflow-x: clip` كان هنا كشبكة أمان — لكنه **أخفى** خللًا حقيقيًا:
   grid-column: span 12 على شبكة بعمود واحد سبّب فيضانًا حتى +316px،
   وجعل scrollWidth == clientWidth دائمًا فبدا الفحص ناجحًا وهو ليس كذلك.

   بعد إصلاح السبب الجذري نُبقيه، لكن **لا نعتمد عليه**: أي فحص فيضان
   يجب أن يعطّله مؤقتًا ليقيس الحقيقة لا القص.
   `max-width: 100%` وحده لا يمنع فيضان الأبناء. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; }
/* الكلمات الطويلة (روابط، أكواد، أسماء منتجات) لا تكسر التخطيط */
p, h1, h2, h3, h4, li, td, a, span { overflow-wrap: anywhere; }

/* ---------- 2) الطباعة: هرمية واضحة بـ clamp() ----------
   Fraunces للعناوين و Inter للنصوص — بلا تغيير.
   المشكلة المعالَجة: العنوان الرئيسي كان ضخمًا على الشاشات المتوسطة. */
.hero__title {
  font-size: clamp(2.4rem, 7.2vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.section-title,
h2.font-display {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h3.font-display,
.pdp-title {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.2;
}
.hero__copy {
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  line-height: 1.75;
  max-width: 34rem;
}
.eyebrow, .hero__kicker {
  font-size: clamp(.62rem, .8vw, .72rem);
  letter-spacing: .28em;
}


html[lang="tr"] .btn,
html[lang="tr"] .eyebrow,
html[lang="tr"] .hero__kicker,
html[lang="tr"] .mobile-menu__nav a {
  /* النصوص التركية تُكتب كبيرة من PHP — نلغي التحويل الآلي لتفادي İ/ı */
  text-transform: none;
}

/* الأزرار: النص لا يتكسر على الجوال */
.btn, .btn-dark, .btn-light, .btn-text {
  white-space: nowrap;
  font-size: clamp(.66rem, .85vw, .75rem);
}
@media (max-width: 420px) {
  .btn, .btn-dark, .btn-light { white-space: normal; text-align: center; line-height: 1.4; }
}

/* ---------- 3) الصور: نِسَب موحّدة ومنع التشويه ---------- */

/* Hero: ارتفاع معقول بدل 100vh على كل الأجهزة */
.hero { min-height: clamp(30rem, 82vh, 46rem); }
.hero__media img,
.hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;   /* يحمي الوجوه من القص العلوي */
}
@media (max-width: 768px) {
  .hero { min-height: clamp(26rem, 74vh, 34rem); }
  .hero__media img, .hero img { object-position: center 25%; }
}

/* بطاقات المنتجات: 3:4 موحّدة لكل الصور */
.product-card__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ivory-dim);   /* لون تحميل بدل وميض أبيض */
}
.product-card__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* ⚠️ صورة الـ hover تظهر فقط إن كانت **مختلفة** عن الأولى.
   PHP يضع data-has-alt="1" فقط عند وجود صورة ثانية حقيقية. */
.product-card .img-alt { opacity: 0; transition: opacity .5s var(--ease); }
.product-card[data-has-alt="1"]:hover .img-alt { opacity: 1; }
.product-card:not([data-has-alt="1"]) .img-alt { display: none; }
@media (hover: none) {
  .product-card .img-alt { display: none; }   /* لا hover على اللمس */
}

/* بطاقات الفئات: نسبة موحّدة
   🔴 القاعدة الأصلية (سطر 520) تضبط `height: 420px` (و480px فوق 640px).
      وجود `height` صريح **مع** `aspect-ratio` يجعل المتصفح يشتق **العرض من
      الارتفاع**: 420 × 3/4 = 315px، فتتجاهل البطاقة مسار الشبكة (248px)
      وتفيض 67px. قياس Chromium أكّد ذلك عند 320px و1024px.

   الحل: `height: auto` + `width: 100%` — فتملأ البطاقة مسارها وتُشتق
   نسبتها من العرض لا العكس. `min-width: 0` يسمح لها بالانكماش داخل الشبكة. */
.category-card {
  position: relative;
  aspect-ratio: 4 / 5;
  height: auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: block;
}
.category-card img,
.category-card__ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.category-card__ph { background: var(--ivory-dim); }
@media (max-width: 640px) { .category-card { aspect-ratio: 3 / 4; } }

/* Editorial: ارتفاع مضبوط ومركز الصورة يحمي العنصر الأساسي */
.editorial img, .editorial__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}

/* Brand story: الصورة الثانوية تُخفى على الجوال بدل التداخل */
.story__detail, .story-detail-img {
  object-fit: cover;
}
@media (max-width: 900px) {
  .story__detail, .story-detail-img { display: none; }
}

/* ---------- 4) الهيدر: إفساح مكان للمحتوى ----------
   ⚠️ تنسيق الهيدر نفسه في كتلة HEADER أعلاه — لا نكرّره هنا. */

/* الهيدر ثابت: نفسح للمحتوى مقداره + شريط الإعلان */
body:not(.is-home) main { padding-top: calc(var(--header-h) + var(--bar-h)); }
@media (max-width: 1024px) {
  :root { --header-h: 4rem; }
}
@media (max-width: 420px) {
  :root { --header-h: 3.5rem; --bar-h: 1.75rem; }
}

/* ---------- 5) الأقسام والشبكات ---------- */
.section-pad { padding-block: clamp(3rem, 7vw, 7rem); }
.container   { padding-inline: clamp(1rem, 4vw, 3.5rem); }

/* شبكة المنتجات: تتكيّف تلقائيًا مع أي عرض */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* النماذج: لا تفيض ولا تُقرَّب تلقائيًا على iOS */
input, select, textarea { max-width: 100%; }
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }  /* يمنع تكبير iOS التلقائي */
}

/* ---------- 6) احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   HERO — المسافة تحت الهيدر
   ⚠️ لا يُغيَّر تصميم الـHero. الضبط في **بدء المحتوى** فقط حتى يتوازن مع
      الهيدر الثابت ولا يبدأ النص ملاصقًا له على الجوال.
   ========================================================================== */
.hero {
  /* الهيدر ثابت وشفاف فوق الـHero: نُزيح المحتوى لا الصورة */
  padding-top: calc(var(--header-h-transparent) + var(--bar-h) + env(safe-area-inset-top, 0px));
}
.hero__text { padding-block: clamp(1.5rem, 5vw, 3rem); }

@media (max-width: 768px) {
  .hero { padding-top: calc(var(--header-h) + var(--bar-h) + env(safe-area-inset-top, 0px) + .5rem); }
  .hero__text { padding-block: clamp(1rem, 4vw, 2rem); }
}

/* شريط الإعلان: لا يلتصق بحواف الشاشة على iPhone */
.announcement-bar {
  padding-inline: calc(.75rem + env(safe-area-inset-left, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

/* الفوتر والطبقات: احترام المنطقة الآمنة السفلية */
.site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.cart-drawer, .mobile-menu { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ==========================================================================
   HEADER — تحصينات ضد التداخل
   --------------------------------------------------------------------------
   ⚠️ محاكاة العرض عند 1024px أظهرت أن القائمة التركية
      (YENİ · MAĞAZA · KOLEKSİYONLAR · HAKKIMIZDA) أطول من الإنجليزية
      وتترك فائضًا 82px فقط. القواعد أدناه هامش أمان عند حافة الكمبيوتر.
   ========================================================================== */

/* أضيق حالة كمبيوتر: تقليص تباعد القائمة قليلًا */
@media (min-width: 1024px) and (max-width: 1180px) {
  .nav-main  { gap: .9rem; }
  .nav-link  { font-size: .64rem; letter-spacing: .14em; }
  .header-col--right { gap: .4rem; }
}

/* زر السلة: كان .icon-btn--cart مستخدمًا في الترميز وغير معرّف */
.icon-btn--cart { position: relative; }

/* ⚠️ شبكة صارمة: العمودان الجانبيان لا يتجاوزان حصتهما أبدًا،
   والشعار لا يُقص. هذا ما يمنع دخول الشعار فوق الأيقونات. */
.site-header__inner > * { min-width: 0; }
.header-col { overflow: hidden; }          /* العمود لا يتمدّد على حساب الوسط */
.header-col--right { flex-wrap: nowrap; }
.logo { overflow: hidden; text-overflow: clip;}

/* الشعار طبقة أعلى: لو حدث تلامس بصري يبقى مقروءًا فوق الخلفية */
.logo { position: relative; z-index: 1; }

/* الأيقونات لا تنكمش مطلقًا — التقليص يحدث في الشعار لا في مساحة اللمس */
.header-col--right > * { flex: 0 0 auto; }

/* ---------- المسافة بين الهيدر والـ Hero على الجوال ----------
   ⚠️ الهيدر ثابت (position: fixed) فوق شريط الإعلان. الصفحة الرئيسية
      تضع الـ hero خلفه عمدًا (هيدر شفاف)، أما الصفحات الداخلية فتحتاج
      إفساحًا مساويًا للارتفاع الفعلي + المنطقة الآمنة في أجهزة iPhone. */
body:not(.is-home) main {
  padding-top: calc(var(--header-h) + var(--bar-h) + env(safe-area-inset-top, 0px));
}
body.is-home main { padding-top: 0; }

/* الـ hero يبدأ من أعلى الشاشة تمامًا خلف الهيدر الشفاف */
.is-home .hero { margin-top: calc(-1 * (var(--bar-h) + env(safe-area-inset-top, 0px))); }

@media (max-width: 768px) {
  /* المحتوى داخل الـ hero يبدأ تحت الهيدر لا خلفه */
  .hero__text { padding-top: calc(var(--header-h) + 1rem); }
}

/* ---------- المنطقة الآمنة أفقيًا (iPhone بالوضع الأفقي) ---------- */
@supports (padding: max(0px)) {
  .site-header__inner {
    padding-inline-start: max(var(--h-pad, .875rem), env(safe-area-inset-left));
    padding-inline-end:   max(var(--h-pad, .875rem), env(safe-area-inset-right));
  }
}

/* ---------- تأكيد نهائي: لا تمرير أفقي بسبب الهيدر ---------- */
.site-header, .site-header__inner { max-width: 100%; }

/* ==========================================================================
   MOBILE MENU — طبقات وترتيب
   ⚠️ الترتيب الحاسم: القائمة (100) فوق الهيدر (50) وفوق الـ hero.
      كان z-index 70 كافيًا، لكن رفعه يمنع أي تعارض مستقبلي مع عنصر جديد.
   ========================================================================== */
.mobile-menu           { z-index: 100; }
.mobile-menu__backdrop { z-index: 99; }
.search-overlay        { z-index: 110; }   /* البحث يُفتح من داخل القائمة */
.cart-backdrop         { z-index: 120; }
.cart-drawer           { z-index: 125; }

/* القائمة تحترم المنطقة الآمنة ولا تلتصق بالحواف */
.mobile-menu {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

/* القائمة تُمرَّر إن طال محتواها — 10 روابط قد تتجاوز شاشة قصيرة */
.mobile-menu__nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* لا يتسرّب التمرير للصفحة خلفها */
}
.mobile-menu__nav a { font-size: clamp(1.4rem, 5.5vw, 2.2rem); padding: .65rem 0; }

@media (max-height: 700px) {
  .mobile-menu__nav a { font-size: clamp(1.15rem, 4.5vw, 1.6rem); padding: .5rem 0; }
  .mobile-menu__top { padding-block: .875rem; }
}

/* نموذج الخروج داخل القائمة يطابق شكل بقية الروابط تمامًا */
.mm-logout { margin: 0; display: inline-flex; }

/* ==========================================================================
   LEXVON REFERENCE DESIGN V3 — الطبقة الداكنة
   ==========================================================================
   المرجع: الصورة المعتمدة (Responsive Header Design · Clean · Modern · Mobile First)

   ⚠️ لماذا طبقة رموز بدل إعادة كتابة الملف؟
   التصميم كله مبني على متغيّرات CSS، فتحويل اللوحة من فاتح إلى داكن يتم
   بإعادة تعريف الرموز فقط. هذا يعني:
     • صفر خطر على 640+ قاعدة موجودة
     • أي مكوّن جديد يرث اللوحة تلقائيًا
     • العودة للفاتح = حذف هذه الكتلة

   دلالة الأسماء بعد التحويل (انعكاس مقصود):
     --ivory     كان "سطح فاتح"  →  صار الخلفية الداكنة
     --charcoal  كان "حبر داكن"  →  صار النص الفاتح
   الانعكاس يجعل القواعد القائمة صحيحة تلقائيًا:
     .btn-dark { background: charcoal; color: ivory }
       →  زر كريمي بنص داكن = زر "EXPLORE NEW COLLECTION" في المرجع بالضبط
   ========================================================================== */

:root {
  /* ---------- الأسطح ---------- */
  --ivory:        #101012;   /* خلفية الصفحة */
  --ivory-dim:    #17171a;   /* بطاقات ولوحات */
  --paper:        #0c0c0e;   /* أعمق: شريط الإعلان والفوتر */

  /* ---------- النص ---------- */
  --charcoal:     #f2ede4;   /* النص الأساسي (كريمي دافئ) */
  --charcoal-soft:#ded7ca;

  --stone:        #938d84;   /* نص ثانوي */
  --stone-light:  #6d6862;

  /* ---------- الحدود ---------- */
  --taupe:        #2a2a30;
  --taupe-line:   #26262b;

  /* ---------- التمييز ---------- */
  --accent:       #c9a227;   /* ذهبي خافت — يظهر على الداكن */
  --accent-soft:  #e0be55;

  /* ---------- سطوح V3 الدلالية (للمكوّنات الجديدة) ---------- */
  --v3-bg:        #101012;
  --v3-surface:   #17171a;
  --v3-surface-2: #1d1d21;
  --v3-line:      #26262b;
  --v3-text:      #f2ede4;
  --v3-text-dim:  #938d84;
  --v3-btn-bg:    #f5f0e6;   /* الزر الكريمي الأساسي */
  --v3-btn-fg:    #111113;

  /* الهيدر أنحف قليلًا من Option 1 مطابقةً للمرجع */
  --header-h: 4.5rem;
  --bar-h: 0rem;             /* المرجع بلا شريط إعلان فوق الهيدر */
}

/* أساسيات الوضع الداكن */
html { color-scheme: dark; }
body { background: var(--v3-bg); color: var(--v3-text); }

/* ⚠️ الهيدر في المرجع **غير شفاف**: خلفية داكنة صلبة مع خط فاصل رفيع.
   نُلغي حالة الشفافية الموروثة من Option 1 حتى لا يختفي فوق الـ hero. */
.site-header,
.site-header.is-transparent {
  background: rgba(16, 16, 18, .92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--v3-line);
  color: var(--v3-text);
}
.site-header.is-transparent .nav-link,
.site-header.is-transparent .icon-btn,
.site-header.is-transparent .logo { color: var(--v3-text); }

/* شارة السلة: دائرة كريمية برقم داكن — كما في المرجع */
.icon-count,
.site-header.is-transparent .icon-count {
  background: var(--v3-btn-bg);
  color: var(--v3-btn-fg);
  font-weight: 600;
}
.icon-count.is-empty { display: none; }

/* الشعار: سيريف واسع التباعد */
.logo,
.logo__word {
  font-family: var(--font-display);
  letter-spacing: .34em;
  font-weight: 400;
  color: var(--v3-text);
}

/* روابط التنقّل */
.nav-link {
  color: var(--v3-text);
  opacity: .82;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: none;   /* المرجع: Shop لا SHOP */
}
.nav-link:hover,
.nav-link[aria-current="page"] { opacity: 1; }

/* الأيقونات */
.icon-btn { color: var(--v3-text); }
.icon-btn:hover { opacity: .75; }

/* الأزرار */
.btn-dark {
  background: var(--v3-btn-bg);
  color: var(--v3-btn-fg);
  border: 1px solid var(--v3-btn-bg);
}
.btn-dark:hover { background: #fff; border-color: #fff; }

.btn-outline {
  border: 1px solid var(--v3-line);
  color: var(--v3-text);
  background: transparent;
}
.btn-outline:hover { background: var(--v3-surface-2); color: var(--v3-text); }

/* البطاقات والأسطح */
.product-card__frame,
.category-card__ph { background: var(--v3-surface); }
.product-card__name { color: var(--v3-text); }
.product-card__price .old { color: var(--v3-text-dim); }

/* الحقول */
input, select, textarea {
  background: var(--v3-surface);
  color: var(--v3-text);
  border: 1px solid var(--v3-line);
}
input::placeholder, textarea::placeholder { color: var(--v3-text-dim); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--v3-text-dim);
}

/* الفوتر وشريط الإعلان */
.site-footer { background: var(--paper); color: var(--v3-text); border-top: 1px solid var(--v3-line); }
.announcement-bar { display: none; }   /* غير موجود في المرجع */

/* ⚠️ إخفاء شريط الإعلان يعني أن --bar-h = 0، وقد ضُبط أعلاه.
   الصفحات الداخلية تفسح للهيدر وحده. */
body:not(.is-home) main { padding-top: var(--header-h); }
.is-home .hero { margin-top: 0; }

/* عزل نموذج iyzico يبقى كما هو — لا يرث اللوحة الداكنة
   (النموذج من خوادم iyzico ويجب أن يُعرض كما تُعيده) */
.iyzico-frame { background: #ffffff; border-color: var(--v3-line); }

/* ---------- V3: تخطيط الهيدر مطابقًا للمرجع ---------- */
.site-header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* الشعار في منتصف الشاشة الحقيقي */
  align-items: center;
}
.nav-main { display: none; gap: clamp(1.1rem, 1.9vw, 2.1rem); }
@media (min-width: 1024px) { .nav-main { display: flex; } }

.logo { font-size: clamp(1rem, 1.6vw, 1.35rem); white-space: nowrap; }

.header-col--right { display: flex; align-items: center; justify-content: flex-end; }
.icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 19px; height: 19px; }

/* شارة السلة فوق الأيقونة كما في المرجع */
.icon-btn--cart { position: relative; }
.icon-btn--cart .icon-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; line-height: 17px;
  text-align: center; pointer-events: none;
}

/* ---------- V3: الـ Hero ---------- */
.hero { background: var(--v3-bg); }
.hero__kicker {
  color: var(--v3-text-dim);
  letter-spacing: .3em;
  font-size: .68rem;
  text-transform: uppercase;
}
.hero__title { color: var(--v3-text); font-weight: 400; }
.hero__title .line-reveal:nth-child(2) { font-style: italic; }   /* السطر الثاني مائل كما في المرجع */
.hero__copy { color: var(--v3-text-dim); }

/* أزرار الـ hero: كريمي ممتلئ + رابط نصّي بسهم */
.hero__cta { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; }
.hero__cta .btn-dark { padding: 1rem 2.25rem; letter-spacing: .16em; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--v3-text); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; border-bottom: 1px solid currentColor;
  padding-bottom: .35rem;
}
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   V3 — Mobile Drawer
   لوح داكن ينزلق من اليمين، قائمة أيقونة + نص، فواصل بين الأقسام.
   ========================================================================== */
.mobile-menu--v3 {
  position: fixed;
  top: 0; bottom: 0;
  /* ⚠️ right/left صريحان بدل inset-inline-end: دعم الأخير غير كامل في
     محرّكات أقدم، وقد يسقط اللوح إلى الجهة الخاطئة. RTL يُعالَج أدناه. */
  right: 0; left: auto;
  width: min(21rem, 88vw);
  background: var(--v3-surface);
  border-inline-start: 1px solid var(--v3-line);
  color: var(--v3-text);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  opacity: 0;
  transition: transform .42s var(--ease), opacity .3s var(--ease), visibility .42s;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* RTL: اللوح يأتي من اليسار تلقائيًا عبر inset-inline-end */
[dir="rtl"] .mobile-menu--v3 { right: auto; left: 0; transform: translateX(-100%); border-inline-start: none; border-inline-end: 1px solid var(--v3-line); }

.mobile-menu--v3.is-open {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

.mm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--v3-line);
  flex: 0 0 auto;
}
.mm-head .logo { font-size: 1.05rem; letter-spacing: .3em; }

.mm-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* لا يتسرّب التمرير للصفحة خلفها */
  padding: .5rem 0 1.5rem;
}

.mm-list { list-style: none; margin: 0; padding: 0; }

.mm-list a,
.mm-btn {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: .85rem 1.25rem;
  font-family: var(--font-sans); font-size: .92rem; font-weight: 400;
  letter-spacing: .01em; color: var(--v3-text);
  background: none; border: none; text-align: start; cursor: pointer;
  transition: background .2s var(--ease);
}
.mm-list a:hover, .mm-btn:hover { background: var(--v3-surface-2); }

.mm-ico { width: 19px; height: 19px; flex: 0 0 auto; opacity: .85; }
.mm-list a span, .mm-btn span { flex: 1 1 auto; }
/* الشيفرون الأخير في السطر (Shop) */
.mm-list a .mm-ico:last-child { width: 15px; height: 15px; opacity: .45; flex: 0 0 auto; }

.mm-sep { border: none; border-top: 1px solid var(--v3-line); margin: .6rem 1.25rem; }

.mm-lang {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 1.25rem;
}
.mm-lang__label { display: flex; align-items: center; gap: .9rem; font-size: .92rem; }
.mm-lang__opts { display: flex; gap: .25rem; flex: 0 0 auto; }
.mm-lang__opts a {
  padding: .3rem .6rem; font-size: .72rem; letter-spacing: .1em;
  border: 1px solid var(--v3-line); border-radius: 2px; color: var(--v3-text-dim);
}
.mm-lang__opts a.is-active {
  background: var(--v3-btn-bg); color: var(--v3-btn-fg); border-color: var(--v3-btn-bg);
}

.mm-logout { margin: 0; }

/* الخلفية القابلة للنقر */
.mobile-menu__backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mobile-menu__backdrop[hidden] { display: none; }

.mobile-menu--v3 { z-index: 100; }

/* شاشات قصيرة: القائمة تُمرَّر بدل أن تقتطع */
@media (max-height: 640px) {
  .mm-list a, .mm-btn, .mm-lang { padding-block: .65rem; }
  .mm-sep { margin-block: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu--v3 { transition: none; }
}

/* السطر المائل في عنوان الـ hero — بصمة التصميم المرجعي */
.hero__title .is-italic { font-style: italic; }
.hero__kicker .dash { opacity: .55; margin: 0 .5rem; }

/* ---------- V3: الفوتر ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--v3-line); }
.footer-col h4 { color: var(--v3-text); letter-spacing: .2em; font-size: .68rem; }
.footer-col a { color: var(--v3-text-dim); }
.footer-col a:hover { color: var(--v3-text); }
.footer-bottom {
  border-top: 1px solid var(--v3-line);
  color: var(--v3-text-dim);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.footer-payments { display: flex; align-items: center; gap: 1.1rem; }
.footer-payments span {
  font-size: .68rem; letter-spacing: .12em; color: var(--v3-text-dim);
}
.footer-payments img { height: 20px; width: auto; opacity: .9; }
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}
/* ==========================================================================
   V3 — مكوّنات كانت بلا تنسيق
   ⚠️ .cart-alert و .newsletter__notice تحملان رسائل يجب أن يراها العميل
      (عنصر غير متاح في السلة · النشرة غير مفعّلة). بقاؤها بلا تنسيق يعني
      نصًا شبه غير مرئي على خلفية داكنة.
   ========================================================================== */

/* تنبيه السلة: عناصر غير متاحة تمنع المتابعة للدفع */
.cart-alert {
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--accent);
  border-inline-start: 3px solid var(--accent);
  background: rgba(201, 162, 39, .08);
  color: var(--v3-text);
  font-size: .85rem;
  line-height: 1.7;
}

/* إشعار النشرة — بصري فقط، ويقول صراحةً إن العنوان لم يُحفَظ */
.newsletter__notice {
  margin-top: .85rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--v3-text-dim);
}
.newsletter__notice[hidden] { display: none; }

/* الموافقات القانونية في الدفع — إلزامية، فيجب أن تكون واضحة */
.checkout-legal { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.legal-check {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .82rem; line-height: 1.65; color: var(--v3-text-dim); cursor: pointer;
}
.legal-check input { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--v3-btn-bg); }
.legal-check a { color: var(--v3-text); text-decoration: underline; text-underline-offset: 3px; }

/* عنصر معطّل (زر الدفع عند وجود مشكلة في السلة) */
.is-disabled,
[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* نموذج الكمية داخل صفحة السلة — مخفي، يُرسَل من JS */
.qty-form { display: none; }

/* صف الكوليكشن في صفحة Collections */
.collection-row { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .collection-row { grid-template-columns: 1.15fr 1fr; }
  .collection-row:nth-child(even) > *:first-child { order: 2; }
}

/* ==========================================================================
   V3 — تصحيحات تباين إجبارية
   --------------------------------------------------------------------------
   🔴 بعد انعكاس الرموز صار --ivory هو **الخلفية الداكنة**. كل قاعدة كانت
      تستخدمه كلون نص (نص فاتح فوق صورة/سطح داكن) صارت تعطي نصًا داكنًا على
      داكن = تباين 1.0:1 أي **غير مرئي إطلاقًا**.

   مسح آلي على كل ملف CSS وجد 9 مواضع. كلها مُصلَحة أدناه بـ --v3-text.
   ملاحظة: .badge و .category-card__label و .editorial__title تجلس فوق صور
   داكنة، فالنص الكريمي هو الصحيح فيها أصلًا.
   ========================================================================== */

.badge                      { color: var(--v3-text); }
.badge-new                  { color: var(--v3-text); }   /* الخلفية معرّفة أعلاه */
.badge-sale                 { background: var(--accent); color: #17140d; }

.editorial__title           { color: var(--v3-text); }
.category-card__label span,
.category-card__label svg   { color: var(--v3-text); }

.newsletter__form input,
.newsletter__form button    { color: var(--v3-text); }
.newsletter__form input::placeholder { color: var(--v3-text-dim); }

/* رمادي مقروء بدل #6d6862 (كان 3.45:1) */
.italic-stone               { color: var(--v3-text-dim); }
.search-overlay__field input::placeholder { color: var(--v3-text-dim); }


/* ---------- V3: آخر تصحيحين للتباين ---------- */

/* 🔴 .wishlist-btn ورث خلفية #f6f2ea (لوحة Option 1 الفاتحة) بينما لون
   أيقونته صار كريميًا = 1.04:1 أي أيقونة غير مرئية.
   الزر يجلس فوق صورة المنتج، فالصحيح: خلفية داكنة شبه شفافة. */
.wishlist-btn {
  background: rgba(17, 17, 19, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--v3-text);
  border: 1px solid rgba(242, 237, 228, .14);
}
.wishlist-btn:hover { background: rgba(17, 17, 19, .78); }
.wishlist-btn.is-active { color: var(--accent-soft); border-color: rgba(224, 190, 85, .4); }

/* 🔴 .cart-alert كان نصًا كريميًا على خلفية ذهبية = 2.07:1.
   هذا تحذير يمنع المتابعة للدفع — يجب أن يكون مقروءًا تمامًا.
   الحل: خلفية داكنة وحد ذهبي، فيبقى بارزًا ومقروءًا. */
.cart-alert {
  background: rgba(201, 162, 39, .10);
  border-color: rgba(201, 162, 39, .55);
  color: var(--v3-text);
}

/* ==========================================================================
   🔴 إصلاح انحدار أحدثته طبقة V3
   --------------------------------------------------------------------------
   `.header-only-lg { display: none }` (سطر 240) كان يُخفي مبدّل اللغة
   والمفضلة على الجوال. لكن طبقة V3 أضافت لاحقًا:
       .lang-switch { display: flex }      (سطر 260)
       .icon-btn    { display: inline-flex } (سطر 1343)
   وكلاهما بنفس الأولوية ويأتيان **بعده** → يفوزان، فظهر العنصران على
   الجوال. فحص المتصفح أثبت ذلك: عند 375px و320px كان العمود الأيمن
   يحتوي 5 عناصر بدل 3، ويتداخل مع الشعار المركزي.

   الحل: رفع أولوية قاعدة الإخفاء بمحدّد مركّب (لا !important) حتى تفوز
   على أي قاعدة عنصر لاحقة.
   ========================================================================== */
.site-header .header-only-lg,
.site-header .header-col--right .header-only-lg {
  display: none;
}

@media (min-width: 1024px) {
  .site-header .lang-switch.header-only-lg,
  .site-header .header-col--right .lang-switch.header-only-lg { display: flex; }

  .site-header .icon-btn.header-only-lg,
  .site-header .header-col--right .icon-btn.header-only-lg { display: inline-flex; }
}

/* ==========================================================================
   🔴 إصلاح انحدار ثانٍ من نفس الفئة (كشفه فحص المتصفح)
   --------------------------------------------------------------------------
   `.nav-toggle { display:none }` عند ≥1024px (سطر 237) كان يُخفي الهامبرغر
   على الكمبيوتر. لكن طبقة V3 أضافت لاحقًا `.icon-btn { display:inline-flex }`
   (سطر 1343) وبنفس الأولوية → فاز، فظهر الهامبرغر بجوار القائمة عند 1440px.

   الدرس: كل قاعدة `display` في طبقة V3 تحتاج محدّدًا أقوى من قواعد
   الإخفاء التي تسبقها. رفعنا الأولوية بمحدّد مركّب لا بـ !important.
   ========================================================================== */
@media (min-width: 1024px) {
  .site-header .nav-toggle,
  .site-header .header-col--left .nav-toggle { display: none; }
}

/* شارة السلة: كانت تُقصّ عند حافة الهيدر لأن top:4px/right:2px تخرجها
   عن حدود الزر. نُبقيها داخل مربع الأيقونة تمامًا. */
.icon-btn--cart { overflow: visible; }
.icon-btn--cart .icon-count {
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 9.5px;
  box-shadow: 0 0 0 2px var(--v3-bg);   /* فصل بصري عن الأيقونة */
}

/* ==========================================================================
   LEXVON PRODUCT CARD — تحريرية
   --------------------------------------------------------------------------
   المبدأ: الصورة تتكلّم، والنص يهمس. لا شارات ملوّنة ولا حدود ثقيلة
   ولا ظلال — العناصر مفصولة بالمسافة وحدها.
   ========================================================================== */

.pc { position: relative; min-width: 0; }

/* ---------- الصورة ---------- */
.pc__frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;          /* موحّدة لكل بطاقة مهما كانت أبعاد الأصل */
  overflow: hidden;
  background: var(--v3-surface);
}
.pc__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;             /* لا تمدد — قص متوازن */
  object-position: center top;   /* يحمي الوجه/أعلى القطعة من القص */
  transition: opacity .6s var(--ease), transform 1.1s var(--ease);
}
.pc__img--alt { opacity: 0; }

/* hover على الكمبيوتر فقط — ونتحقق أن الجهاز يدعمه فعلًا */
@media (hover: hover) and (pointer: fine) {
  .pc[data-has-alt="1"]:hover .pc__img--main { opacity: 0; }
  .pc[data-has-alt="1"]:hover .pc__img--alt  { opacity: 1; }
  .pc:hover .pc__img { transform: scale(1.03); }
}
/* أجهزة اللمس: الصورة الثانية لا تُحمَّل بصريًا ولا تُربك */
@media (hover: none) { .pc__img--alt { display: none; } }

/* ---------- حالة نفاد المخزون — الشارة الوحيدة الباقية ---------- */
.pc__status {
  position: absolute; inset-inline-start: 0; bottom: 0;
  padding: .45rem .8rem;
  background: rgba(16, 16, 18, .82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--v3-text);
  font-family: var(--font-sans);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- المفضلة ---------- */
.pc__wish {
  position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 2;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; cursor: pointer;
  background: rgba(16, 16, 18, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--v3-text);
  opacity: 0; transition: opacity .3s var(--ease), background .3s var(--ease);
}
.pc__wish svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .pc:hover .pc__wish { opacity: 1; } }
/* ⚠️ على اللمس تظهر دائمًا — لا تفاعل يعتمد على hover وحده */
@media (hover: none) { .pc__wish { opacity: 1; } }
.pc__wish:focus-visible { opacity: 1; outline: 1px solid var(--v3-text); outline-offset: 2px; }
.pc__wish.is-active { color: var(--accent-soft); background: rgba(16, 16, 18, .72); }
.pc__wish.is-active svg { fill: currentColor; }

/* ---------- النص ---------- */
.pc__body { padding-top: .9rem; }

.pc__eyebrow {
  margin: 0 0 .35rem;
  font-family: var(--font-sans);
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--v3-text-dim);
}

/* ⚠️ سطران بارتفاع **ثابت**: بدونه تختلف ارتفاعات البطاقات حسب طول الاسم
   فتتكسّر محاذاة الأسعار عبر الشبكة. */
.pc__name {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: .875rem; font-weight: 400; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(.875rem * 1.45 * 2);
  overflow-wrap: anywhere;       /* اسم بلا مسافات لا يكسر البطاقة */
}
.pc__name a { color: var(--v3-text); }
@media (hover: hover) { .pc__name a:hover { opacity: .7; } }

.pc__price {
  margin: 0;
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: .875rem;
  color: var(--v3-text);
}
.pc__price-now.is-reduced { color: var(--accent-soft); }
.pc__price-was { font-size: .78rem; color: var(--v3-text-dim); text-decoration: line-through; }
.pc__price-na  { font-size: .78rem; color: var(--v3-text-dim); }

.pc__colors { margin: .6rem 0 0; display: flex; align-items: center; gap: .35rem; }
.pc__dot {
  width: 9px; height: 9px; border-radius: 999px;
  border: 1px solid rgba(242, 237, 228, .22);
}
.pc__more { font-size: .62rem; color: var(--v3-text-dim); }

@media (max-width: 480px) {
  .pc__body { padding-top: .7rem; }
  .pc__name { font-size: .8rem; min-height: calc(.8rem * 1.45 * 2); }
  .pc__price { font-size: .8rem; }
  .pc__wish { width: 30px; height: 30px; top: .5rem; inset-inline-end: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc__img { transition: none; }
  .pc:hover .pc__img { transform: none; }
}


/* ==========================================================================
   PRODUCT GRID — أعمدة صريحة بمواصفات المالك
   1440→4 · 1280→4 · 1024→3 · 768→2 · ≤430→2
   ⚠️ نستبدل auto-fill بأعمدة صريحة: auto-fill يعطي عدد أعمدة يعتمد على
      minmax وقد يقفز من 4 إلى 5 عند عرض غير متوقّع. الصريح يضمن الثبات.
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* الجوال أولًا */
  gap: clamp(.85rem, 2vw, 1.75rem) clamp(.7rem, 1.4vw, 1.5rem);
  align-items: start;
}
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* عنصر واحد أو اثنان: لا تتمدّد البطاقة على نصف الشاشة */
.product-grid[data-count="1"] { grid-template-columns: minmax(0, 320px); }
@media (min-width: 768px) {
  .product-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .product-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 340px)); }
}

/* ==========================================================================
   ABOUT — بطاقات القيم
   🔴 كانت `grid-template-columns: 1fr` ثابتة سطريًا في القالب: عمود واحد
      حتى على 1440px، أي ثلاث صور عملاقة متتالية.
   ========================================================================== */
.value-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;                       /* الفاصل الرفيع الأصلي محفوظ */
}
@media (min-width: 640px)  { .value-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .value-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.value-card {
  position: relative;
  margin: 0;                      /* <figure> له margin افتراضي يكسر الفاصل */
  aspect-ratio: 3 / 4;            /* نفس crop لكل بطاقة */
  overflow: hidden;
  min-width: 0;
  background: var(--v3-surface);
}
.value-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;    /* يحمي العنصر الأساسي من القص العلوي */
}
.value-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,16,18,.78), transparent 62%);
}
.value-card__label {
  position: absolute; z-index: 2;
  inset-inline-start: 1.25rem; bottom: 1.25rem; inset-inline-end: 1.25rem;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: var(--v3-text);
  overflow-wrap: anywhere;        /* النص لا يخرج من البطاقة */
}

/* هيرو صفحة "من نحن": أقصر من هيرو الرئيسية */
.editorial.about-hero { aspect-ratio: 4 / 5; min-height: 22rem; }
@media (min-width: 768px)  { .editorial.about-hero { aspect-ratio: 16 / 9;  min-height: 26rem; } }
@media (min-width: 1280px) { .editorial.about-hero { aspect-ratio: 21 / 9;  min-height: 30rem; } }

/* ==========================================================================
   GOOGLE SIGN-IN
   يتبع هوية LEXVON: زر كريمي بحدود رفيعة على الخلفية الداكنة.
   ⚠️ أيقونة Google بألوانها الرسمية — لا تُعاد تلوينها (إرشادات علامتها).
   ========================================================================== */

.auth-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0 1.25rem;
  color: var(--v3-text-dim);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--v3-line);
}

.auth-google { margin: 0; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  width: 100%; max-width: 100%;
  padding: .95rem 1.25rem;
  box-sizing: border-box;
  background: var(--v3-btn-bg);
  color: var(--v3-btn-fg);
  border: 1px solid var(--v3-btn-bg);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 500; letter-spacing: .1em;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.btn-google:hover { background: #ffffff; border-color: #ffffff; }
.btn-google:focus-visible { outline: 2px solid var(--v3-text); outline-offset: 2px; }

.btn-google__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* النص الطويل لا يخرج ولا يتكسّر بشكل رديء */
.btn-google span { overflow-wrap: anywhere; text-align: center; }

/* ⚠️ RTL: الأيقونة تنتقل لليمين تلقائيًا عبر flex + dir، ونؤكّد التباعد */
[dir="rtl"] .btn-google { flex-direction: row; }
[dir="rtl"] .auth-divider { letter-spacing: .08em; }

@media (max-width: 400px) {
  .btn-google { padding: .85rem 1rem; font-size: .72rem; letter-spacing: .06em; gap: .5rem; }
  .btn-google__icon { width: 16px; height: 16px; }
}

/* ==========================================================================
   v3.5.0 — متطلبات iyzico: بيانات الشركة · شعارات الدفع · شارة SSL
   (إضافة فقط — صفر تعديل على قواعد سابقة)
   ========================================================================== */
.page-narrow h3 { font-size: 15px; margin-top: 20px; margin-bottom: 8px; font-weight: 600; }

.company-info { color: var(--v3-text-dim); }
.company-info__title {
  color: var(--v3-text); letter-spacing: .2em; font-size: .68rem; font-weight: 500;
  text-transform: uppercase; margin: 0 0 1.1rem;
}
.company-info__list { display: grid; grid-template-columns: 1fr; gap: .9rem 2rem; margin: 0; }
.company-info__row { min-width: 0; }
.company-info__row dt {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v3-text-dim); opacity: .75; margin-bottom: .2rem;
}
.company-info__row dd { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--v3-text); overflow-wrap: anywhere; }
.company-info__row dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--v3-line); }
.company-info__row dd a:hover { border-bottom-color: currentColor; }

/* في الفوتر: شريط بين الأعمدة والسطر السفلي */
.company-info--footer {
  max-width: var(--max-w); margin: 0 auto; padding: 2rem 0;
  border-top: 1px solid var(--v3-line);
}
@media (min-width: 640px)  { .company-info--footer .company-info__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .company-info--footer .company-info__list { grid-template-columns: repeat(3, 1fr); } }

/* داخل الصفحات (Hakkımızda · Teslimat ve İade · Gizlilik) */
.company-info--page {
  margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--v3-line); border-radius: 2px;
}
@media (min-width: 640px) { .company-info--page .company-info__list { grid-template-columns: repeat(2, 1fr); } }
.page-narrow .company-info__row dd a { text-decoration: none; }

/* شعارات الدفع + شارة SSL */
.footer-trust {
  max-width: var(--max-w); margin: 0 auto; padding: 1.5rem 0;
  border-top: 1px solid var(--v3-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-payments { flex-wrap: wrap; }
.footer-payments img { height: 24px; }
.footer-payments img.footer-payments__band { height: 28px; max-width: 100%; }
.footer-ssl {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .7rem; line-height: 1.5; color: var(--v3-text-dim);
}
.footer-ssl svg { flex: 0 0 auto; }
@media (max-width: 640px) {
  .footer-trust { flex-direction: column; align-items: flex-start; }
}