:root {
  /* ---------- Palette: elegant editorial fashion (warm ivory + deep charcoal + berry/gold accent) ---------- */
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-sunk: #f3ece2;
  --ink: #191410;
  --ink-soft: #8b7f70;

  --noir: #191410;
  --noir-dark: #0a0705;
  --noir-mid: #2a221c;

  /* اسم المتغيرات ضل نفسه (gold/wine) لسهولة التوافق، بس القيم صارت هوية أرجوانية-وردية غنية بلمسة ذهبية */
  --gold: #c8264f;
  --gold-light: #e35c86;
  --gold-lighter: #f4b6cc;
  --gold-pale: #fcebf1;

  --wine: #7a1230;
  --wine-light: #b23a5c;

  /* لمسة معدنية ذهبية للتفاصيل الفاخرة (خطوط، حدود، أيقونات) */
  --metal: #b6903f;
  --metal-light: #e8cf9a;

  --line: #e9e0d2;
  --line-soft: #f1eadd;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 26px;
  --radius-pill: 999px;

  --shadow: 0 34px 74px -32px rgba(25, 20, 16, 0.4);
  --shadow-soft: 0 20px 44px -24px rgba(25, 20, 16, 0.24);
  --shadow-gold: 0 20px 44px -16px rgba(200, 38, 79, 0.4);

  /* ألوان حالات الطلب بلوحة الأدمن فقط (مستقلة عن ألوان هوية المتجر) */
  --status-new-text: #5b6472; --status-new-bg: #eef0f3;
  --status-processing-text: #a86a1d; --status-processing-bg: #fdf1de;
  --status-shipped-text: #2557b3; --status-shipped-bg: #e8f0fc;
  --status-delivered-text: #1f7a44; --status-delivered-bg: #e6f6ec;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Tajawal', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand {
  font-family: 'El Messiri', 'Tajawal', sans-serif;
  font-weight: 700;
  color: var(--noir);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, textarea, select { font-family: inherit; }

.container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}

.brand {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--noir);
}


/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; right: -9999px; top: 0; z-index: 999;
  background: var(--noir); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius-s) var(--radius-s);
}
.skip-link:focus { right: 20px; }

/* ---------- Top announcement bar ---------- */
.topbar {
  background: linear-gradient(90deg, var(--noir-dark), var(--noir-mid) 50%, var(--noir-dark));
  color: var(--metal-light);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.topbar-inner {
  max-width: 1220px; margin: 0 auto; padding: 9px 32px;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.topbar-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-light); opacity: 0.8; }

/* ---------- Header + brand lockup ---------- */
.site-header {
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.site-header.is-stuck {
  background: rgba(250, 247, 242, 0.96);
  box-shadow: 0 14px 34px -26px rgba(25, 20, 16, 0.55);
}

.header-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand-lockup { display: flex; align-items: center; flex-shrink: 0; transition: opacity 0.2s ease; }
.brand-lockup:hover { opacity: 0.78; }
.brand-lockup-img {
  height: 52px; width: auto; display: block;
  transition: height 0.25s ease;
}
.site-header.is-stuck .brand-lockup-img { height: 42px; }

.main-nav {
  display: flex; align-items: center; gap: 22px;
  flex: 1; justify-content: center;
}

.main-nav a {
  position: relative;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.2s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--metal));
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.main-nav a:hover { color: var(--gold); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border: 1.5px solid var(--metal-light);
  border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight: 800;
  background: linear-gradient(180deg, #ffffff, var(--gold-pale));
  color: var(--noir);
  box-shadow: 0 8px 18px -13px rgba(25,20,16,0.4);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cart-btn svg { color: var(--metal); transition: color 0.25s ease; }
.cart-btn:hover {
  background: linear-gradient(120deg, var(--noir), var(--noir-mid));
  border-color: var(--noir);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(25,20,16,0.55);
}
.cart-btn:hover svg { color: var(--gold); }
.cart-count-badge {
  position: absolute; top: -8px; left: -8px;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: linear-gradient(120deg, var(--gold), var(--wine));
  color: #fff; font-size: 0.7rem; font-weight: 800;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(200,38,79,0.8);
  border: 2px solid var(--bg);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--radius-s); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 19px; height: 2px; background: var(--noir); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
  .header-inner { padding: 12px 18px; justify-content: space-between; gap: 12px; }
  .brand-lockup-img, .site-header.is-stuck .brand-lockup-img { height: 40px; }
  .nav-toggle { display: flex; }
  .cart-btn { padding: 9px 14px; }
  .cart-btn-text { display: none; }
  .main-nav {
    position: absolute; top: 100%; right: 0; left: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 18px 16px;
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
  .main-nav a::after { display: none; }
}

/* ---------- Flash messages ---------- */
.flash-wrap { max-width: 1220px; margin: 18px auto 0; padding: 0 32px; }

.flash {
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: 10px;
  font-size: 0.95rem;
  box-shadow: var(--shadow-soft);
}

.flash-success { background: #eaf7ee; color: #1e7a3d; border-color: #bfe6c9; }
.flash-error { background: var(--gold-pale); color: var(--wine); border-color: var(--gold-lighter); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(60% 90% at 88% 8%, rgba(200, 38, 79, 0.35), transparent 60%),
    radial-gradient(50% 70% at 8% 100%, rgba(182, 144, 63, 0.28), transparent 60%),
    linear-gradient(160deg, var(--noir) 0%, var(--noir-dark) 100%);
  color: #fafafa;
  overflow: hidden;
  position: relative;
  min-height: 560px;
}

/* صورة بانر الصفحة الرئيسية (تُختار من لوحة التحكم → الصفحة الرئيسية): تغطي كامل
   عرض القسم، مع تعتيم تدريجي أفقي خلف منطقة النص بس — النص عندنا على اليمين (RTL)،
   فالتعتيم أقوى قرب اليمين وبيخفّ تدريجياً للشمال حيث تظهر الصورة بوضوح كامل بدون تعتيم. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(10, 7, 5, 0.94) 0%,
    rgba(10, 7, 5, 0.86) 30%,
    rgba(10, 7, 5, 0.55) 52%,
    rgba(10, 7, 5, 0.12) 72%,
    transparent 88%
  );
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

.hero::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: 0;
  height: 3px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--metal-light), var(--gold));
  opacity: 0.9;
}

.hero-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 84px 32px 96px;
}

.hero-text .kicker {
  color: var(--metal-light);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding: 8px 18px 8px 34px;
  display: inline-flex;
  align-items: center;
  position: relative;
  border: 1px solid rgba(232, 207, 154, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
}

.hero-text .kicker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 2px;
  background: var(--gold-light);
}

.hero-text h1 {
  color: #fdfaf6;
  font-family: 'El Messiri', 'Tajawal', sans-serif;
  font-size: 3.35rem;
  font-weight: 700;
  margin-bottom: 24px;
  max-width: 15ch;
  letter-spacing: -1px;
  background: linear-gradient(95deg, #ffffff 40%, var(--metal-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-text p {
  color: #b8b8b8;
  font-size: 1.06rem;
  max-width: 46ch;
  margin-bottom: 40px;
}

.btn {
  display: inline-block;
  position: relative;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.3s;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.btn:hover::before { transform: translateX(120%); }

.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-brass {
  background: linear-gradient(120deg, var(--gold), var(--wine));
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}
.btn-brass:hover { box-shadow: 0 22px 46px -16px rgba(200, 30, 74, 0.55); }

.btn-outline {
  background: transparent;
  border-color: rgba(250, 250, 250, 0.4);
  color: #fafafa;
}
.btn-outline:hover { border-color: var(--metal-light); color: var(--metal-light); background: rgba(255,255,255,0.04); }

/* نسخة من الزر المفرّغ لكن مصممة للخلفيات الفاتحة (لوحة التحكم، الفاتورة) — .btn-outline
   نصّه أبيض تقريباً ومصمم للخلفيات الداكنة زي الهيرو، فعلى خلفية بيضاء بيصير شبه مخفي */
.btn-outline-light {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-outline-light:hover {
  border-color: var(--noir);
  background: var(--noir);
  color: #ffffff;
}

.btn-forest {
  background: var(--noir);
  color: #ffffff;
  border-color: var(--noir);
}
.btn-forest:hover { background: var(--gold); border-color: var(--gold); }

/* ---------- Hero brand elements ---------- */
.hero-watermark {
  position: absolute;
  top: 50%; left: -70px;
  transform: translateY(-50%);
  height: 128%;
  width: auto;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(1) brightness(2.4);
}

.hero-inner { position: relative; z-index: 1; }

.hero-wordmark {
  height: 74px;
  width: auto;
  margin: 0 0 24px;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.45));
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 38px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(232, 207, 154, 0.22);
  flex-wrap: wrap;
}
.hero-stats strong {
  display: block;
  font-family: 'El Messiri', 'Tajawal', sans-serif;
  font-size: 1.55rem;
  color: var(--metal-light);
  line-height: 1.2;
}
.hero-stats span { font-size: 0.8rem; color: #9b948c; letter-spacing: 0.3px; }

/* ---------- Brand marquee ---------- */
.brand-marquee {
  background: var(--noir-dark);
  border-top: 1px solid rgba(232,207,154,0.16);
  border-bottom: 1px solid rgba(232,207,154,0.16);
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.brand-marquee-track {
  display: flex; align-items: center; gap: 26px;
  width: max-content;
  animation: vyra-marquee 42s linear infinite;
}
.brand-marquee-track span {
  font-family: 'Cormorant Garamond', 'El Messiri', serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 5px;
  color: rgba(250, 247, 242, 0.55);
  white-space: nowrap;
}
.brand-marquee-track .dot { color: var(--metal); letter-spacing: 0; font-size: 0.7rem; }
@keyframes vyra-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* ---------- Brand story ---------- */
.brand-story {
  background:
    radial-gradient(70% 100% at 85% 0%, rgba(200,38,79,0.20), transparent 62%),
    radial-gradient(60% 90% at 5% 100%, rgba(182,144,63,0.18), transparent 62%),
    linear-gradient(160deg, var(--noir) 0%, var(--noir-dark) 100%);
  color: #cfc8bf;
  position: relative;
  overflow: hidden;
}
.brand-story::before,
.brand-story::after {
  content: "";
  position: absolute; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--metal-light), var(--gold));
}
.brand-story::before { top: 0; }
.brand-story::after { bottom: 0; }

.brand-story-inner {
  max-width: 1220px; margin: 0 auto;
  padding: 80px 32px 88px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.brand-story-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  border: 1px solid rgba(232,207,154,0.24);
  border-radius: var(--radius-l);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 70px rgba(182,144,63,0.09);
}
.brand-story-logo img { max-height: 280px; width: auto; }

.brand-story-text .kicker {
  color: var(--metal-light);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block; margin-bottom: 14px;
}
.brand-story-text h2 {
  color: #fdfaf6;
  font-size: 2.3rem;
  margin-bottom: 18px;
}
.brand-story-text > p { color: #ada69d; font-size: 1.02rem; max-width: 54ch; margin: 0 0 30px; }

.brand-pillars { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 16px; }
.brand-pillars li {
  padding-right: 20px;
  position: relative;
}
.brand-pillars li::before {
  content: "";
  position: absolute; right: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(120deg, var(--gold), var(--metal-light));
}
.brand-pillars strong {
  display: block;
  font-family: 'El Messiri', 'Tajawal', sans-serif;
  color: #fdfaf6; font-size: 1rem;
}
.brand-pillars span { color: #948d85; font-size: 0.88rem; }

@media (max-width: 980px) {
  .brand-story-inner { grid-template-columns: 1fr; gap: 34px; padding: 56px 20px 62px; }
  .brand-story-logo { padding: 26px; }
  .brand-story-logo img { max-height: 190px; }
  .brand-story-text h2 { font-size: 1.8rem; }
  .hero-wordmark { height: 50px; margin-bottom: 18px; }
  .hero-watermark { height: 70%; left: -40px; opacity: 0.045; }
  .hero-stats { gap: 24px; margin-top: 32px; }
  .hero-stats strong { font-size: 1.25rem; }
}

/* ---------- Section headings ---------- */
.section { padding: 76px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: 2rem;
  position: relative;
  padding-bottom: 18px;
}
.section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--metal));
}
.section-head p { color: var(--ink-soft); margin: 6px 0 0; font-size: 0.95rem; }

/* ---------- Perks strip ---------- */
.perks {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.perks-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 30px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.perk { display: flex; align-items: center; gap: 16px; padding: 6px; transition: transform 0.2s ease; }
.perk:hover { transform: translateY(-2px); }
.perk .icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--noir), var(--noir-mid));
  box-shadow: 0 10px 22px -10px rgba(25,20,16,0.5), inset 0 0 0 1px rgba(182,144,63,0.4);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.perk strong { display: block; font-size: 0.94rem; color: var(--ink); font-family: 'El Messiri', 'Tajawal', sans-serif; }
.perk span { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Categories ---------- */
.category-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.category-chip {
  flex-shrink: 0;
  padding: 11px 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.category-chip:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.category-chip.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--noir), var(--noir-mid));
  box-shadow: 0 12px 26px -14px rgba(25,20,16,0.5);
}

/* شريط فلترة الماركات: لو الماركة عندها شعار مرفوع، منعرض الشعار بدل الاسم النصي —
   لمسة أفخم بشريط التصنيفات، مع صندوق ثابت الأبعاد (نسبة 1:2) حتى الشعارات المختلفة
   الأحجام تظهر منسّقة وبنفس المقاس جنب بعضها. */
.category-chip.brand-chip-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 22px; height: 44px;
}
.brand-chip-img { height: 26px; width: 52px; object-fit: contain; }
.category-chip.brand-chip-logo.active .brand-chip-img { filter: brightness(0) invert(1); }

/* ---------- Product grid & cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 28px;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.3s, transform 0.3s;
}

.product-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
  transform: translateY(-5px);
}

.card-media {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--surface-sunk);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .card-media img { transform: scale(1.07); }

/* ---------- علامة فيرا المائية: تظهر تلقائياً بالزاوية السفلية اليسرى لصور المنتجات ---------- */
/* الصندوق نفسه = قطر الشعار (نصف الحجم القديم). الوهج ellipse أوسع من الشعار، طالع من الزاوية،
   وقمته بمنتصف ارتفاع الشعار بالضبط (bottom:-50% + height:100% => القمة عند 50%). */
.brand-watermark {
  position: absolute;
  left: 3%;
  bottom: 3%;
  width: clamp(38px, 11.5%, 90px);
  aspect-ratio: 1 / 1;
  z-index: 3;
  pointer-events: none;
}
.gallery-main .brand-watermark { width: clamp(70px, 20%, 150px); }
.brand-watermark::before {
  content: "";
  position: absolute;
  left: -70%;
  bottom: -70%;
  width: 240%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 60%,
    rgba(232, 178, 77, 0.95) 0%,
    rgba(230, 168, 66, 0.75) 40%,
    rgba(228, 158, 60, 0) 72%);
}
.card-media .brand-watermark img,
.gallery-main .brand-watermark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  transition: none;
  filter: drop-shadow(0 2px 5px rgba(10, 7, 5, 0.3));
}
.product-card:hover .card-media .brand-watermark img { transform: none; }

/* ---------- منتج نفدت كميته: صورة باهتة + غير قابلة للضغط + شعار "نفدت الكمية" بالنص ---------- */
.card-media.is-soldout { cursor: not-allowed; }
.card-media.is-soldout > img:not(.soldout-badge) { opacity: 0.4; filter: grayscale(0.5); }
.product-card:hover .card-media.is-soldout > img:not(.soldout-badge) { transform: none; }
.card-media.is-soldout .soldout-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 55%; height: auto; max-width: 220px; object-fit: contain; pointer-events: none; z-index: 4;
}

.badge-discount {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(120deg, var(--gold), var(--wine));
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(200,38,79,0.6);
}

.badge-stock {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(13, 13, 13, 0.88);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-s);
}

.badge-stock.low { background: var(--wine); }

/* منتج بينطلب من المورد — badge بلون ذهبي فاتح ثابت أعلى يسار كرت المنتج، بعيد عن
   badge-discount (أعلى يمين) حتى ما يتصادما لو المنتج فيه خصم وبنفس الوقت بينطلب من المورد. */
.badge-preorder {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #f4e3b8;
  color: #6b4f1d;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 14px -8px rgba(107,79,29,0.55);
}

.card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }

.card-body .cat-label { font-size: 0.7rem; color: var(--metal); letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; }

.card-body h3 { font-size: 1.04rem; font-weight: 700; color: var(--ink); font-family: 'El Messiri', 'Tajawal', sans-serif; }

.price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.price-now { font-size: 1.15rem; font-weight: 800; color: var(--noir); }
.price-old { font-size: 0.88rem; color: #a3a3a3; text-decoration: line-through; }

.bulk-note { font-size: 0.78rem; color: var(--gold); font-weight: 600; }

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.qty-control button {
  background: var(--surface-sunk);
  border: none;
  width: 30px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--noir);
}
.qty-control button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.disabled-link {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.qty-control input {
  width: 36px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 0.92rem;
}

.card-cta {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-pill);
  background: var(--noir);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 4px;
  border: 1.5px solid var(--noir);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.card-cta:hover {
  background: linear-gradient(120deg, var(--gold), var(--wine));
  border-color: transparent;
  box-shadow: 0 12px 26px -12px rgba(200,38,79,0.55);
}

/* ---------- Offers section ---------- */
/* ---------- قسم العروض: نفس الخلفية الكريمية لباقي الموقع، مع توهج ذهبي خفيف جداً
   بزاوية الصفحة بدل خلفية وردية كاملة — حتى يحس القسم إنه جزء طبيعي من تصميم
   الموقع، والمنتجات والشارات الملوّنة هي يلي بتلفت النظر مش الخلفية نفسها. ---------- */
.offers-section {
  background:
    radial-gradient(55% 90% at 90% 0%, rgba(182,144,63,0.16), transparent 60%),
    linear-gradient(160deg, #fbf5e8 0%, #f6ead0 55%, #f2e3c3 100%);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.offers-section::before {
  content: "";
  position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--metal-light), var(--gold));
}
.offers-section .section-head h2 { color: var(--wine); }
.offers-section .section-head p { color: var(--ink-soft); }
.offers-section .product-card { background: #ffffff; border-color: var(--line); }
.offers-section .product-card:hover { transform: translateY(-6px) scale(1.01); }
.offers-section .cat-label { color: var(--gold); }
.offers-section .price-now { color: var(--wine); }
.offers-section .card-media { background: #ffffff; }

/* ---------- Product detail page ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 56px 0 90px;
}

.gallery-main {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--surface-sunk);
  margin-bottom: 14px;
  border: 1px solid var(--line);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-thumbs { display: flex; gap: 10px; }
.gallery-thumbs img {
  width: 72px; height: 90px;
  object-fit: cover;
  border-radius: var(--radius-s);
  cursor: pointer;
  border: 1.5px solid var(--line);
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
}
.gallery-thumbs img.active,
.gallery-thumbs img:hover { border-color: var(--noir); opacity: 1; }

.pd-cat { color: var(--gold); font-size: 0.8rem; margin-bottom: 8px; display: block; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; }
.pd-title { font-size: 2.15rem; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.5px; }

.pd-price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.pd-price-now { font-size: 1.65rem; font-weight: 900; color: var(--noir); }
.pd-price-old { font-size: 1.05rem; text-decoration: line-through; color: #a3a3a3; }
.pd-discount-badge { background: var(--gold); color: #ffffff; font-size: 0.76rem; font-weight: 800; padding: 4px 12px; border-radius: var(--radius-s); text-transform: uppercase; }

.pd-stock { font-size: 0.88rem; color: var(--wine); margin-bottom: 28px; font-weight: 600; }
.pd-stock.ok { color: var(--ink-soft); font-weight: 400; }

/* ملاحظة "بينطلب من المورد" بصفحة تفاصيل المنتج — صندوق ذهبي فاتح بارز حتى الزبون
   ينتبه فوراً إنه في مدة شحن إضافية على هالمنتج بالذات. */
.preorder-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f9f0da;
  border: 1px solid #e8cf94;
  border-radius: var(--radius-s);
  padding: 14px 16px;
  margin: -8px 0 26px;
}
.preorder-notice-icon { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.preorder-notice strong { display: block; color: #6b4f1d; font-size: 0.94rem; margin-bottom: 3px; }
.preorder-notice span { display: block; color: #7a5f2c; font-size: 0.84rem; line-height: 1.6; }

.pd-block { margin-bottom: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.pd-block:first-of-type { padding-top: 0; border-top: none; }
.pd-block h4 { font-size: 0.82rem; color: var(--ink); margin-bottom: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }

.color-options { display: flex; gap: 14px; flex-wrap: wrap; }
.color-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  outline: 1.5px solid var(--line);
  cursor: pointer;
  position: relative;
}
.color-swatch.selected { outline: 2px solid var(--noir); outline-offset: 1px; }
.pd-selected-color-label { font-weight: 400; font-size: 0.82rem; color: var(--ink-soft); margin-inline-start: 8px; }

.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn {
  min-width: 44px;
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.size-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.size-btn.selected { background: var(--noir); color: #ffffff; border-color: var(--noir); }
.size-btn:disabled { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }

.bulk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 8px;
}
.bulk-table td { padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
.bulk-table tr:last-child td { border-bottom: none; }

.pd-qty-order {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0;
  flex-wrap: wrap;
}

.pd-details table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pd-details td { padding: 10px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.pd-details td:first-child { color: var(--gold); width: 34%; font-weight: 700; }

.pd-description { color: var(--ink-soft); font-size: 0.96rem; }
.pd-description p { margin: 0 0 6px; line-height: 1.55; }
.pd-description p:last-child { margin-bottom: 0; }
.pd-description strong { color: var(--ink); font-weight: 800; }
.pd-description .pd-desc-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-description .pd-desc-list li {
  padding-right: 4px;
  line-height: 1.55;
}

.related-strip { padding: 20px 0 90px; }

/* ---------- Footer ---------- */
.site-footer {
  background: radial-gradient(120% 160% at 15% -10%, rgba(200,38,79,0.14), transparent 55%), var(--noir-dark);
  color: #b0a89c;
  margin-top: 40px;
  border-top: none;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--metal-light), var(--gold));
}
.footer-brand .brand { font-family: 'El Messiri', 'Tajawal', sans-serif; color: #ffffff; }
.footer-logo { height: 54px; width: auto; margin-bottom: 4px; }
.footer-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 60px 32px 32px;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 0.9fr;
  gap: 44px;
}
.footer-brand p { color: #9a9086; font-size: 0.9rem; margin-top: 14px; max-width: 34ch; }
.footer-col h4 { color: #ffffff; font-size: 0.82rem; margin-bottom: 16px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.footer-col a, .footer-col span { display: block; margin-bottom: 9px; color: #8f8f8f; font-size: 0.88rem; transition: color 0.15s; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid #262626;
  text-align: center;
  padding: 20px;
  font-size: 0.8rem;
  color: #6b6b6b;
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  left: 26px;
  width: 58px; height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(37, 211, 102, 0.15);
  z-index: 60;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: floatPulse 2.8s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 18px 38px -10px rgba(0,0,0,0.5), 0 0 0 8px rgba(37, 211, 102, 0.2); }

@keyframes floatPulse {
  0%, 100% { box-shadow: 0 16px 34px -10px rgba(0,0,0,0.45), 0 0 0 6px rgba(37,211,102,0.15); }
  50% { box-shadow: 0 16px 34px -10px rgba(0,0,0,0.45), 0 0 0 10px rgba(37,211,102,0.05); }
}

/* ---------- Product SKU label ---------- */
.pd-sku {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-sunk);
  padding: 4px 12px;
  border-radius: var(--radius-s);
  margin: 4px 0 18px;
}

/* ---------- Checkout page ---------- */
.checkout-page { padding: 56px 0 100px; }
.checkout-kicker {
  color: var(--metal);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.checkout-kicker::before { content: "✦"; color: var(--gold); font-size: 0.9rem; }
.checkout-title {
  margin-bottom: 34px; font-size: 1.9rem; position: relative; padding-bottom: 18px;
  font-family: 'El Messiri', 'Tajawal', sans-serif;
}
.checkout-title::after {
  content: ""; position: absolute; bottom: 0; right: 0; width: 56px; height: 4px;
  border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), var(--metal));
}
.checkout-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
/* بدون هالسطر، أي محتوى صعب ينكسر جوا صف الجدول (سعر، رقم، زر) بيفرض الجدول يوسّع
   عمود الـ grid كامل وبيطلّع كل الصفحة أعرض من الشاشة وبيضطر المستخدم يعمل سكرول
   يمين وشمال — حتى لو الجدول نفسه بعده مش ظاهر بعد. min-width:0 بيسمح لعناصر الـ
   grid إنها تصغر لعرض الشاشة الفعلي، وأي عنصر أعرض من هيك (متل الجدول) بيصير مسؤول
   عن التعامل مع فيضانه بنفسه (راجع .cart-table-wrap تحت). */
.checkout-grid > * { min-width: 0; }

/* لمسة فاخرة موحّدة لصندوقي "ملخص الطلب" و"بيانات التوصيل": خط علوي متدرّج
   ذهبي/عنّابي رفيع، بدل الحدود المسطّحة العادية — نفس لغة التصميم المستخدمة بالهيرو. */
.checkout-summary, .checkout-form {
  position: relative;
  overflow: hidden;
}
.checkout-summary::before, .checkout-form::before {
  content: "";
  position: absolute; top: 0; right: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--metal) 50%, var(--gold));
}

.checkout-summary {
  display: flex;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-soft);
}
.checkout-summary-media {
  width: 110px;
  flex-shrink: 0;
  aspect-ratio: 3/4;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--surface-sunk);
}
.checkout-summary-media img { width: 100%; height: 100%; object-fit: cover; }
.checkout-summary-info h3 { font-size: 1.08rem; margin-bottom: 6px; font-weight: 800; }
.checkout-summary-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 12px; }
.checkout-summary-table td { padding: 7px 2px; border-bottom: 1px solid var(--line-soft); }
.checkout-total-row td {
  font-weight: 800; color: var(--gold); border-bottom: none;
  padding-top: 16px; font-size: 1.12rem;
  border-top: 1px dashed var(--metal-light);
  margin-top: 6px;
}
.checkout-total-row td:first-child { color: var(--ink); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.3px; }

.checkout-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-soft);
}
.checkout-form h4 {
  font-size: 0.8rem; margin-bottom: 4px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--metal);
}
.checkout-form label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.checkout-form input, .checkout-form textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; font-size: 0.94rem; background: var(--bg); color: var(--ink); box-sizing: border-box;
}
.checkout-form input:focus, .checkout-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.checkout-submit { margin-top: 4px; width: 100%; text-align: center; }
.checkout-note { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }

/* ---------- سلة المشتريات ---------- */
.cart-empty {
  text-align: center; padding: 70px 30px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft); max-width: 460px; margin: 0 auto;
}
.cart-empty-icon {
  width: 76px; height: 76px; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--gold-pale), var(--surface-sunk));
  border: 1px solid var(--metal-light);
}
.cart-empty-icon svg { width: 34px; height: 34px; }
.cart-empty p { margin-bottom: 22px; font-size: 1.02rem; color: var(--ink); }
.cart-items-box { flex-direction: column; align-items: stretch; }
.cart-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cart-table th { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 0.72rem; color: var(--metal); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.cart-table td { padding: 16px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cart-product-cell { display: flex; align-items: center; gap: 14px; }
.cart-thumb {
  width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-s); flex-shrink: 0;
  border: 1px solid var(--line); box-shadow: 0 6px 14px -8px rgba(25,20,16,0.25);
}
.cart-product-name { font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.cart-variant { font-size: 0.78rem; color: var(--ink-soft); }
.cart-line-total { font-weight: 800; color: var(--gold); white-space: nowrap; }
.cart-qty-form .qty-control { display: inline-flex; }
.cart-remove-btn {
  background: none; border: none; color: var(--wine); font-size: 0.82rem;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.cart-remove-btn:hover { color: var(--gold); }
.cart-totals { margin-top: 18px; }
.cart-shipping-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 14px; }
.cart-shipping-free { color: var(--noir); font-weight: 700; }
.pd-cart-link { display: block; text-align: center; margin-top: 12px; font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline; }
.pd-cart-link:hover { color: var(--noir); }

/* شبكة أمان: لو لأي سبب صار الجدول أعرض من صندوقه (شاشة ضيقة جداً)، بيصير عنده
   سكرول أفقي داخلي هو بس، بدل ما يفيض ع الصفحة كلها. */
.cart-table-wrap { overflow-x: auto; }

@media (max-width: 720px) {
  /* بدل ما نضغط الجدول بعمود صفحة واحدة (اللي بيخلي كل خانة صغيرة والنص يلزق تحت
     بعضه)، منحوّل كل صف منتج لكرت مستقل: الصورة والاسم فوق، وتحتها الكمية والسعر
     والإجمالي وزر الحذف مرتبين بشكل واضح — بدون أي سكرول يمين وشمال. */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
    display: block; width: 100%;
  }
  .cart-table-wrap { overflow-x: visible; }
  .cart-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 14px;
    margin-bottom: 14px;
    background: var(--surface);
  }
  .cart-table tr:last-child { margin-bottom: 0; }
  .cart-table td {
    border-bottom: none;
    padding: 6px 0;
  }
  .cart-table td[data-label]:not([data-label=""]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px dashed var(--line-soft);
    padding-top: 10px;
    margin-top: 4px;
  }
  .cart-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-weight: 700;
    flex-shrink: 0;
  }
  .cart-table td[data-label=""] { text-align: left; padding-top: 10px; }
  .cart-product-cell { align-items: flex-start; }
}

/* ---------- Invoice page ---------- */
.invoice-page { padding: 56px 0 100px; display: flex; justify-content: center; }
.invoice-card {
  max-width: 560px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 32px;
  box-shadow: var(--shadow-soft);
}
.invoice-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.invoice-number { font-size: 0.84rem; color: var(--ink-soft); }
.invoice-badge {
  background: var(--noir); color: #ffffff;
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-s);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.invoice-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 22px; }
.invoice-table td { padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.invoice-total-row td { font-weight: 800; color: var(--noir); font-size: 1.05rem; border-bottom: none; }
.invoice-customer { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-bottom: 22px; }
.invoice-customer h4 { margin-bottom: 10px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.invoice-customer p { margin: 4px 0; font-size: 0.9rem; color: var(--ink-soft); }
.invoice-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.invoice-actions .btn { flex: 1; text-align: center; }
.invoice-note { margin-top: 18px; font-size: 0.78rem; color: var(--ink-soft); text-align: center; }
.invoice-track-link { display: block; text-align: center; margin-top: 10px; font-size: 0.85rem; text-decoration: underline; color: var(--ink-soft); }
.invoice-track-link:hover { color: var(--noir); }

/* ---------- تتبع الطلب ---------- */
.track-page { max-width: 720px; margin: 0 auto; padding: 60px 20px 100px; }
.track-lookup-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 44px 32px; text-align: center; box-shadow: var(--shadow-soft); }
.track-lookup-box h2 { margin-bottom: 8px; }
.track-lookup-box p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 24px; }
.track-lookup-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.track-lookup-form input {
  flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; font-size: 0.92rem;
}
.track-lookup-form button { white-space: nowrap; }
.track-not-found { color: var(--wine); font-size: 0.85rem; margin-top: 14px; }

.track-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 36px 32px; box-shadow: var(--shadow-soft); }
.track-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.track-head h2 { margin: 0 0 4px; }
.track-order-number { color: var(--ink-soft); font-size: 0.85rem; }

.track-timeline { display: flex; justify-content: space-between; margin: 0 0 34px; position: relative; }
.track-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.track-step .dot {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--line);
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: var(--ink-soft);
}
.track-step.done .dot { background: var(--noir); border-color: var(--noir); color: #fff; }
.track-step.current .dot { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 0 0 4px rgba(200, 38, 79, 0.2); }
.track-step .label { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; }
.track-step.done .label, .track-step.current .label { color: var(--noir); font-weight: 700; }
.track-timeline-line {
  position: absolute; top: 15px; right: 8%; left: 8%; height: 2px; background: var(--line); z-index: 0;
}
.track-timeline-line-fill { position: absolute; top: 0; right: 0; height: 100%; background: var(--noir); }

.track-updated-note { text-align: center; font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 30px; }

.track-items { border-top: 1px solid var(--line-soft); padding-top: 20px; margin-bottom: 20px; }
.track-item-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.track-item-row .name { font-weight: 700; }
.track-item-row .meta { color: var(--ink-soft); font-size: 0.78rem; }

.track-summary-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.track-summary-table td { padding: 6px 0; font-size: 0.9rem; }
.track-summary-table tr:last-child td { font-weight: 800; font-size: 1rem; border-top: 1px solid var(--line); padding-top: 12px; }

.track-customer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 0.88rem; color: var(--ink-soft); }
.track-customer strong { color: var(--noir); }

@media (max-width: 560px) {
  .track-timeline { flex-direction: column; gap: 18px; align-items: flex-start; }
  .track-timeline-line { display: none; }
  .track-step { display: flex; align-items: center; gap: 12px; text-align: right; }
  .track-step .dot { margin: 0; flex-shrink: 0; }
  .track-lookup-form { flex-direction: column; }
}

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  /* هاي القاعدة أصلاً لتصميم صفحة تانية (checkout.html) وين .checkout-summary لحالها
     بتعرض صورة المنتج جنب معلوماته بصف واحد. صفحة السلة الفعلية (cart.html) بتستخدم
     .cart-items-box على نفس الصندوق عشان يضل عمود واحد (:not بتحميها من هالقاعدة)
     — بدونها كان صندوق ملخص الطلب ينكسر لصف أفقي ضيق على الموبايل وينزل النص تحت بعضه. */
  .checkout-summary:not(.cart-items-box) { flex-direction: row; }
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-inner { padding: 52px 20px 60px; }
  .hero-text h1 { font-size: 2.2rem; max-width: none; }
  /* على الشاشات الصغيرة النص بياخد كل العرض تقريباً، فما في مجال كافي لتلاشي جانبي —
     منستخدم تعتيم أقوى بالأعلى (وين النص) وبيخف تدريجياً للأسفل، بس بشكل أخف من
     التلاشي الأفقي حتى تضل الصورة نفسها ظاهرة ومو مختفية بالكامل. */
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(10,7,5,0.82) 0%, rgba(10,7,5,0.62) 55%, rgba(10,7,5,0.4) 100%);
  }
  .perks-inner { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 64px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .container { padding: 0 18px; }
  .section { padding: 52px 0; }
}

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

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

/* ============ لوحة الأدمن: صفحة الطلبات ============ */
.ao-page { padding: 44px 28px 100px; }

.ao-header {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 18px; margin-bottom: 28px;
}
.ao-header h2 { margin: 0 0 4px; font-size: 1.6rem; }
.ao-header .ao-subtitle { color: var(--ink-soft); font-size: 0.88rem; }
.ao-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ao-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.ao-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ao-tab {
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  padding: 8px 16px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s ease;
}
.ao-tab:hover { border-color: var(--noir); color: var(--noir); }
.ao-tab.active { background: var(--noir); border-color: var(--noir); color: #fff; }
.ao-tab .count {
  background: rgba(0,0,0,0.08); border-radius: var(--radius-pill); padding: 1px 7px; font-size: 0.72rem;
}
.ao-tab.active .count { background: rgba(255,255,255,0.22); }

.ao-search {
  position: relative; min-width: 240px;
}
.ao-search input {
  width: 100%; padding: 9px 14px 9px 34px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.85rem;
}
.ao-search::before {
  content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 1rem;
}

.ao-empty { text-align: center; padding: 80px 20px; color: var(--ink-soft); }

.ao-grid { display: flex; flex-direction: column; gap: 16px; }

.ao-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 22px 24px; transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ao-card:hover { box-shadow: var(--shadow-soft); border-color: #e2e2e2; }

.ao-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.ao-order-number { font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; }
.ao-order-date { color: var(--ink-soft); font-size: 0.78rem; margin-top: 3px; }

.ao-status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 800; white-space: nowrap;
}
.ao-status-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ao-status-badge.status-new { background: var(--status-new-bg); color: var(--status-new-text); }
.ao-status-badge.status-processing { background: var(--status-processing-bg); color: var(--status-processing-text); }
.ao-status-badge.status-shipped { background: var(--status-shipped-bg); color: var(--status-shipped-text); }
.ao-status-badge.status-delivered { background: var(--status-delivered-bg); color: var(--status-delivered-text); }
/* حالات "طلبات المورد" — بنفس تدرّج ألوان حالة الطلب العامة، بس بمعنى مختلف
   (بانتظار الطلب = رمادي محايد، تم الطلب = كهرماني، وصلت = أزرق، جاهزة للشحن = أخضر) */
.ao-status-badge.status-pending { background: var(--status-new-bg); color: var(--status-new-text); }
.ao-status-badge.status-ordered { background: var(--status-processing-bg); color: var(--status-processing-text); }
.ao-status-badge.status-arrived { background: var(--status-shipped-bg); color: var(--status-shipped-text); }
.ao-status-badge.status-ready { background: var(--status-delivered-bg); color: var(--status-delivered-text); }

/* شارة تأكيد الطلب: مؤكد (وانخصمت كميته) أو بانتظار التأكيد */
.ao-confirm-badge {
  font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ao-confirm-badge.is-confirmed { background: #e7f6ec; color: #1e7a41; }
.ao-confirm-badge.is-pending { background: #fdf1de; color: #a86a1d; }

.ao-card-body { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }

.ao-block-label {
  font-size: 0.7rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 10px;
}

.ao-items-list { display: flex; flex-direction: column; gap: 10px; }
.ao-item-line { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.ao-item-line .name { font-weight: 700; }
.ao-item-line .meta { color: var(--ink-soft); font-size: 0.76rem; margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ao-item-line .price { white-space: nowrap; font-weight: 700; }
.ao-item-line.is-returned { opacity: 0.6; }
.ao-item-line.is-returned .name,
.ao-item-line.is-returned .price { text-decoration: line-through; }

/* دائرة صغيرة تعرض اللون الفعلي جنب اسم اللون بعناصر الطلب */
.ao-color-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; vertical-align: middle;
}

.ao-returned-tag {
  background: var(--wine); color: #fff; font-size: 0.68rem; font-weight: 800;
  padding: 2px 8px; border-radius: var(--radius-pill); text-decoration: none !important; display: inline-block;
}

.ao-return-form { margin-top: 6px; }
.ao-return-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 4px 10px; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ao-return-btn:hover { border-color: var(--wine); color: var(--wine); }
.ao-return-btn.active { background: var(--wine); border-color: var(--wine); color: #fff; }

.ao-customer p { margin: 0 0 6px; font-size: 0.86rem; }
.ao-customer .cust-name { font-weight: 800; }
.ao-customer .cust-city { color: #8a6d2f; font-size: 0.8rem; font-weight: 700; }
.ao-customer a { color: var(--ink); text-decoration: none; }
.ao-customer a:hover { color: var(--gold); text-decoration: underline; }
.ao-customer .cust-address { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.5; }

.ao-totals { font-size: 0.86rem; }
.ao-totals .row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink-soft); }
.ao-totals .row.grand { color: var(--ink); font-weight: 800; font-size: 0.98rem; border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 10px; }
.ao-totals .free-tag { color: var(--status-delivered-text); font-weight: 800; }

.ao-card-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.ao-status-form { display: flex; align-items: center; gap: 8px; }
.ao-status-form select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; font-size: 0.83rem; background: #fff; cursor: pointer;
}
.ao-save-btn {
  background: var(--noir); color: #fff; border: 1px solid var(--noir); border-radius: var(--radius-s);
  padding: 8px 18px; font-size: 0.83rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease;
}
.ao-save-btn:hover { background: var(--gold); border-color: var(--gold); }
.ao-save-btn:disabled { opacity: 0.6; cursor: default; }

.ao-confirm-btn {
  background: #1e7a41; color: #fff; border: 1px solid #1e7a41; border-radius: var(--radius-s);
  padding: 9px 18px; font-size: 0.85rem; font-weight: 800; cursor: pointer; transition: background 0.15s ease;
}
.ao-confirm-btn:hover { background: #16632f; }
.ao-whatsapp-btn {
  background: #25d366; color: #fff; border: 1px solid #25d366; border-radius: var(--radius-s);
  padding: 9px 16px; font-size: 0.83rem; font-weight: 800; text-decoration: none; display: inline-block;
  transition: background 0.15s ease;
}
.ao-whatsapp-btn:hover { background: #1eb857; }

.ao-track-link { font-size: 0.82rem; color: var(--ink-soft); text-decoration: underline; }
.ao-track-link:hover { color: var(--noir); }
.ao-save-feedback { font-size: 0.78rem; font-weight: 700; opacity: 0; transition: opacity 0.2s ease; }
.ao-save-feedback.show { opacity: 1; }
.ao-save-feedback.ok { color: var(--status-delivered-text); }
.ao-save-feedback.err { color: var(--wine); }

.ao-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--noir); color: #fff; padding: 12px 22px; border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 700; box-shadow: var(--shadow); z-index: 999;
  opacity: 0; pointer-events: none; transition: all 0.25s ease;
}
.ao-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .ao-card-body { grid-template-columns: 1fr; gap: 16px; }
  .ao-toolbar { flex-direction: column; align-items: stretch; }
  .ao-search { min-width: 0; }
}


/* ---------- تحسينات إضافية ---------- */

/* ظهور تدريجي للأقسام عند التمرير */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* هيكل تحميل للصور */
.card-media { background: var(--surface-sunk); }

/* تمرير أنعم لصف التصنيفات على الموبايل */
.category-row { scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }

/* تحديد النص بلون الهوية */
::selection { background: var(--gold); color: #fff; }

/* شريط تمرير أنيق */
@media (min-width: 980px) {
  html { scrollbar-color: var(--metal) var(--surface-sunk); scrollbar-width: thin; }
}

@media (max-width: 860px) {
  .topbar-inner { padding: 8px 14px; gap: 10px; font-size: 0.68rem; }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- عروض الجملة بالسلة ---------- */
.cart-old-unit {
  display: block;
  color: #9a9086;
  font-size: 0.82rem;
  text-decoration: line-through;
}
.cart-bulk-unit {
  display: block;
  color: var(--wine);
  font-weight: 800;
}
.cart-bulk-tag {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--gold), var(--wine));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.cart-bulk-hint {
  margin-top: 8px;
  padding: 7px 11px;
  border-radius: var(--radius-s);
  background: var(--gold-pale);
  border: 1px dashed var(--metal);
  color: #8a6d2f;
  font-size: 0.76rem;
  line-height: 1.6;
  max-width: 30ch;
}
.cart-savings-row td {
  color: var(--wine);
  font-weight: 800;
}

/* جدول عروض الجملة بصفحة المنتج */
.bulk-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-soft, #6d665e);
  line-height: 1.7;
}
.bulk-table tr.is-active td {
  background: var(--gold-pale);
  font-weight: 800;
  color: var(--wine);
}

/* ---------- صفحة سياسة التوصيل ---------- */
.delivery-info-page .section-head p { max-width: 62ch; margin: 10px auto 0; }

.delivery-table-wrap {
  overflow-x: auto;
  margin: 34px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.delivery-info-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.delivery-info-table th {
  background: var(--noir);
  color: #fff;
  padding: 14px 18px;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}
.delivery-info-table th:first-child { text-align: right; }
.delivery-info-table td {
  padding: 16px 18px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.delivery-info-table .zone-name {
  text-align: right;
  font-weight: 800;
  color: var(--ink);
}
.delivery-info-table .fee { display: block; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.delivery-info-table .free-note { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 3px; }
.delivery-info-table .vip-cell { background: var(--gold-pale); }
.delivery-info-table .vip-cell .fee { color: var(--wine); }

.vip-explainer {
  margin-top: 40px;
  padding: 28px 30px;
  border-radius: var(--radius-m);
  background: linear-gradient(160deg, var(--noir) 0%, var(--noir-dark) 100%);
  color: #cfc8bf;
  text-align: center;
}
.vip-explainer h3 { color: #fdfaf6; margin: 0 0 12px; font-size: 1.25rem; }
.vip-explainer p { max-width: 56ch; margin: 0 auto 10px; line-height: 1.8; }
.vip-explainer .btn { margin-top: 14px; }

@media (max-width: 640px) {
  .delivery-info-table th, .delivery-info-table td { padding: 11px 10px; font-size: 0.82rem; }
  .delivery-info-table .fee { font-size: 0.94rem; }
}

/* ---------- عضوية ڤيرا الذهبية بصفحة السلة ---------- */
.vip-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--gold), var(--metal-light));
  color: #241a08;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}
.vip-badge[hidden] { display: none; }

.checkout-form .field-note {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.checkout-form .field-note a { color: var(--gold); text-decoration: underline; }

.checkout-form select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}

.cart-shipping-note:empty { display: none; }

/* ---------- صفحة السياسات ---------- */
.policies-page .section-head p { max-width: 60ch; margin: 10px auto 0; }

.policy-jump-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 44px;
}
.policy-jump-nav a {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.policy-jump-nav a:hover {
  background: var(--noir);
  color: #fff;
  border-color: var(--noir);
}

.policy-block {
  padding: 30px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.policy-block:first-of-type { border-top: none; }
.policy-block h3 {
  font-size: 1.3rem;
  margin: 0 0 18px;
  color: var(--noir);
}
.policy-block h4 {
  font-size: 0.98rem;
  margin: 22px 0 6px;
  color: var(--wine);
}
.policy-block p { color: var(--ink-soft); line-height: 1.85; margin: 0 0 4px; }
.policy-intro { margin-bottom: 18px !important; }

.policy-list {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: policy-counter;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.policy-list li {
  position: relative;
  padding-right: 38px;
  color: var(--ink-soft);
  line-height: 1.85;
  font-size: 0.94rem;
}
.policy-list li::before {
  counter-increment: policy-counter;
  content: counter(policy-counter);
  position: absolute;
  right: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--wine);
  font-weight: 800;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.policy-list a { color: var(--gold); text-decoration: underline; font-weight: 700; }
.policy-list strong { color: var(--ink); }

.policy-contact {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--radius-s);
  background: var(--gold-pale);
  color: var(--ink) !important;
  font-weight: 700;
}
.policy-contact a { color: var(--wine); text-decoration: underline; }

@media (max-width: 640px) {
  .policy-jump-nav a { padding: 7px 14px; font-size: 0.78rem; }
  .policy-block h3 { font-size: 1.15rem; }
}

/* ---------- شريط تنقّل لوحة التحكم ---------- */
.admin-toolbar {
  background: var(--noir);
  border-bottom: 1px solid rgba(232,207,154,0.16);
}
.admin-toolbar-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-toolbar-link {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 700;
  color: #cfc8bf;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.admin-toolbar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-toolbar-link.is-active {
  background: linear-gradient(120deg, var(--gold), var(--metal-light));
  color: #241a08;
}
.admin-toolbar-spacer { flex: 1; }
.admin-toolbar-logout {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(200,38,79,0.5);
  color: #ff9fb4;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.admin-toolbar-logout:hover { background: var(--wine); color: #fff; border-color: var(--wine); }

@media (max-width: 720px) {
  .admin-toolbar-inner { padding: 10px 18px; }
  .admin-toolbar-link, .admin-toolbar-logout { font-size: 0.78rem; padding: 7px 12px; }
}

/* ---------- أزرار الشريط العلوي + النوافذ المنبثقة ---------- */
.topbar-link {
  font: inherit; letter-spacing: inherit; color: var(--metal-light);
  background: rgba(232, 207, 154, 0.12);
  border: 1px solid rgba(232, 207, 154, 0.45);
  border-radius: 999px; padding: 3px 12px; cursor: pointer;
  transition: background .2s, color .2s;
}
.topbar-link:hover, .topbar-link:focus-visible { background: var(--metal-light); color: var(--noir); outline: none; }

body.modal-open { overflow: hidden; }
.vmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vmodal[hidden] { display: none; }
.vmodal-backdrop { position: absolute; inset: 0; background: rgba(10, 7, 5, 0.6); backdrop-filter: blur(3px); }
.vmodal-panel {
  position: relative; background: var(--surface); color: var(--ink);
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  border-radius: var(--radius-m); padding: 30px 26px 26px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
  animation: vmodalIn .22s ease;
}
@keyframes vmodalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.vmodal-close {
  position: absolute; top: 10px; left: 12px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--surface-sunk); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.vmodal-close:hover { background: var(--gold-pale); color: var(--gold); }
.vmodal-kicker { display: block; color: var(--gold); font-weight: 800; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 6px; }
.vmodal-panel h3 { margin: 0 0 12px; font-size: 1.35rem; }
.vmodal-panel p { line-height: 1.9; color: var(--ink-soft); margin: 0 0 12px; }
.vmodal-panel .btn { margin-top: 6px; }
.vmodal-more { display: inline-block; margin-top: 14px; color: var(--gold); font-weight: 800; font-size: 0.9rem; }

.free-zones { display: grid; gap: 12px; margin-top: 8px; }
.free-zone { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.free-zone-name { background: var(--noir); color: var(--metal-light); font-weight: 800; padding: 9px 14px; }
.free-zone-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.free-zone-row:first-child { border-top: 0; }
.free-zone-row.is-vip { background: var(--gold-pale); }
.fz-label { font-weight: 800; font-size: 0.85rem; white-space: nowrap; }
.fz-val { text-align: left; font-size: 0.88rem; }
.fz-val strong { color: var(--wine); font-size: 1rem; }
.fz-val small { display: block; color: var(--ink-soft); font-size: 0.74rem; margin-top: 2px; }
@media (max-width: 860px) {
  .topbar-link { padding: 2px 9px; }
  .free-zone-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fz-val { text-align: right; }
}

/* نافذة العضوية: البطاقة الداكنة نفسها بدون إطار أبيض */
.vmodal-panel.is-plain { background: transparent; padding: 0; box-shadow: none; overflow: visible; max-width: 640px; }
.vmodal-panel.is-plain .vip-explainer { margin-top: 0; position: relative; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6); }
.vmodal-close.is-dark { background: rgba(255, 255, 255, 0.12); color: #fdfaf6; }
.vmodal-close.is-dark:hover { background: var(--gold); color: #fff; }

/* ---------- العروض: صف أفقي قابل للتمرير ---------- */
.offers-section .section-head { align-items: flex-end; margin-bottom: 22px; }
.offers-controls { display: flex; align-items: center; gap: 8px; }
.offers-all-link { color: var(--wine); font-weight: 800; font-size: 0.9rem; margin-inline-end: 6px; white-space: nowrap; }
.offers-all-link:hover { color: var(--gold); }
.offers-arrow {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gold-lighter); background: #fff; color: var(--wine);
  font-size: 1.15rem; line-height: 1; transition: background .2s, color .2s, opacity .2s;
}
.offers-arrow:hover:not(:disabled) { background: var(--gold); color: #fff; border-color: var(--gold); }
.offers-arrow:disabled { opacity: 0.35; cursor: default; }

.offers-track {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* مساحة للظل وحركة الـ hover حتى ما ينقصّوا */
  padding: 10px 4px 22px; margin: -10px -4px -12px;
}
.offers-track::-webkit-scrollbar { display: none; }
.offers-track .product-card { flex: 0 0 272px; scroll-snap-align: start; }
.offers-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-s); }
@media (max-width: 860px) {
  .offers-track { gap: 14px; }
  .offers-track .product-card { flex-basis: 70%; max-width: 280px; }
  .offers-arrow { display: none; }
}

/* ---------- التصنيفات: دوائر (Stories) بصف واحد ---------- */
.cat-stories { padding: 26px 0 6px; }
.cat-stories-row {
  display: flex; gap: 22px; overflow-x: auto;
  justify-content: safe center;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 8px 6px 12px;
}
.cat-stories-row::-webkit-scrollbar { display: none; }
.cat-story {
  flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; color: var(--ink); transition: transform .25s ease;
}
.cat-story:hover { transform: translateY(-3px); }
.cat-story-ring {
  width: 84px; height: 84px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--gold), var(--metal), var(--gold-light));
  box-shadow: 0 10px 22px -12px rgba(200, 30, 74, 0.55);
  transition: box-shadow .25s ease, transform .25s ease;
}
.cat-story:hover .cat-story-ring { box-shadow: 0 16px 28px -12px rgba(200, 30, 74, 0.7); }
.cat-story-img {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--bg); background: var(--surface-sunk);
  display: flex; align-items: center; justify-content: center;
}
.cat-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-story-all { background: var(--noir); }
.cat-story-all img { width: 58%; height: 58%; object-fit: contain; }
.cat-story-letter { font-family: 'El Messiri', 'Tajawal', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--gold); }
.cat-story-name {
  font-size: 0.84rem; font-weight: 800; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-story.active .cat-story-name { color: var(--gold); }
.cat-story.active .cat-story-name::after {
  content: ""; display: block; width: 18px; height: 3px; margin: 5px auto 0;
  border-radius: 999px; background: var(--gold);
}
.cat-story.active .cat-story-ring { transform: scale(1.06); box-shadow: 0 14px 28px -10px rgba(200, 30, 74, 0.75); }
@media (max-width: 640px) {
  .cat-stories { padding-top: 16px; }
  .cat-stories-row { gap: 16px; justify-content: flex-start; }
  .cat-story { width: 80px; }
  .cat-story-ring { width: 70px; height: 70px; }
  .cat-story-name { font-size: 0.78rem; }
}

/* ---------- لوحة التحكم: صور التصنيفات ---------- */
.cat-admin-list { display: grid; gap: 12px; }
.cat-admin-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
}
.cat-admin-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 1 1 auto; }
.cat-admin-thumb {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--surface-sunk); border: 2px solid var(--gold-lighter);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.5rem; color: var(--gold);
}
.cat-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-admin-body { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cat-admin-name-input {
  font-weight: 700; font-size: 0.98rem; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--ink);
  max-width: 260px;
}
.cat-admin-name-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.cat-admin-state { font-size: 0.8rem; color: var(--ink-soft); }
.cat-admin-remove { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.cat-admin-delete-form { flex: 0 0 auto; }
.cat-admin-delete-btn {
  background: none; border: 1px solid var(--line); color: var(--wine);
  padding: 9px 14px; border-radius: var(--radius-s); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.cat-admin-delete-btn:hover { background: var(--wine); border-color: var(--wine); color: #fff; }
.cat-admin-new { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cat-admin-new input[type="text"] { flex: 1 1 200px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }

/* ---------- عروض الجملة: "3 قطع بـ 100" بلون مميز وخط كبير ---------- */
.bulk-offers { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.bulk-offer {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--gold), var(--wine)); color: #fff;
  font-weight: 800; font-size: 1.05rem; line-height: 1.3;
  padding: 6px 15px; border-radius: 999px;
  box-shadow: 0 8px 18px -10px rgba(200, 30, 74, 0.8);
}
.bulk-offer::before { content: "🔥"; font-size: 0.95em; }
.bulk-offers--lg .bulk-offer { font-size: 1.35rem; padding: 10px 22px; }
@media (max-width: 640px) {
  .bulk-offer { font-size: 0.98rem; padding: 5px 13px; }
  .bulk-offers--lg .bulk-offer { font-size: 1.2rem; padding: 9px 18px; }
}


/* ---------- طلباتي السابقة ---------- */
.my-orders-list { display: grid; gap: 10px; margin-top: 26px; text-align: right; }
.my-order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink); transition: border-color .2s, transform .2s;
}
.my-order-row:hover { border-color: var(--gold); transform: translateY(-1px); }
.my-order-main { display: flex; flex-direction: column; gap: 3px; }
.my-order-number { font-weight: 800; }
.my-order-date { font-size: 0.78rem; color: var(--ink-soft); }
.my-order-meta { display: flex; align-items: center; gap: 14px; }
.my-order-total { font-weight: 800; color: var(--wine); }
.my-orders-alt-link { margin-top: 22px; font-size: 0.85rem; color: var(--ink-soft); }
.my-orders-alt-link a { color: var(--gold); font-weight: 700; }
@media (max-width: 640px) {
  .my-order-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- شريط فلترة الماركات داخل التصنيف ---------- */
.brand-row { margin-bottom: 22px; }