:root {
  --navy: #456598;
  --navy-dark: #31486d;
  --gold: #e7b75f;
  --gold-dark: #c99a3f;
  --cream: #faf6ef;
  --paper: #ffffff;
  --text: #2b2b2b;
  --muted: #7a7a7a;
  --border: #e7e1d6;
  --success: #2e7d4f;
  --error: #c0392b;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(27, 42, 74, 0.08);
  --shadow-hover: 0 16px 34px rgba(27, 42, 74, 0.14);
  --header-bg: rgba(255, 255, 255, 0.92);
  --flash-success-bg: #e5f6ec;
  --flash-error-bg: #fdecea;
  font-size: 16px;
}

/* الوضع الداكن: نفس المتغيرات فوق، بس بقيم غامقة — كل عناصر الموقع
   بتستخدم هالمتغيرات أصلاً، فمنغير الألوان بمكان واحد بس. */
:root[data-theme="dark"] {
  --navy: #8fb0e0;
  --cream: #12161f;
  --paper: #1b2130;
  --text: #e8e6e0;
  --muted: #9aa3b5;
  --border: #2b3247;
  --success: #4caf7d;
  --error: #e0645a;
  --header-bg: rgba(18, 22, 31, 0.9);
  --flash-success-bg: rgba(76, 175, 125, 0.15);
  --flash-error-bg: rgba(224, 100, 90, 0.15);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}
img, svg { max-width: 100%; }

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

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

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 10px 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--navy);
  flex-shrink: 0;
}
.logo-mark {
  /* --navy-dark ثابت بالوضعين (عكس --navy يلي بيصير فاتح بالوضع الداكن) —
     لو استخدمنا --navy هون كان صار لون فاتح فوق لون فاتح (الذهبي) بالوضع
     الداكن، شبه مو مقروء لعلامة الموقع بالهيدر. */
  background: var(--navy-dark);
  color: var(--gold);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 900;
}
.logo-img {
  height: 42px;
  width: auto;
  border-radius: 8px;
  display: block;
}
.footer-col .logo-img { height: 46px; }
.social-links { display: flex; gap: 14px; margin-top: 10px; }
.social-links a { text-decoration: underline; transition: color 0.15s ease; }
.social-links a:hover { color: var(--gold); }
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  position: relative;
  font-weight: 600;
  color: var(--navy);
  padding: 6px 2px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.2s ease;
}
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.search-toggle {
  background: none; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  color: var(--navy); display: flex; align-items: center; gap: 6px; padding: 7px 14px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.search-toggle:hover { color: var(--gold-dark); border-color: var(--gold); background: var(--cream); }
.theme-toggle { color: var(--navy); display: flex; transition: color 0.15s ease; }
.theme-toggle:hover { color: var(--gold-dark); }
.search-bar { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; background: var(--paper); border-bottom: 1px solid var(--border); }
.search-bar.open { max-height: 100px; }
.search-form { display: flex; gap: 10px; padding: 14px 0; }
.search-form .text-input { flex: 1; }
.lang-switch { display: flex; gap: 4px; font-size: 0.85rem; color: var(--muted); align-items: center; }
.lang-switch a { padding: 2px 4px; font-weight: 700; }
.lang-switch a.active { color: var(--gold-dark); }
.cart-link { position: relative; display: flex; color: var(--navy); transition: color 0.15s ease; }
.cart-link:hover { color: var(--gold-dark); }
.cart-count {
  position: absolute;
  top: -8px;
  inset-inline-end: -10px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--navy);
  cursor: pointer;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding: 10px 20px;
}
.mobile-nav a { padding: 10px 0; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--border); }
.mobile-nav.open { display: flex; }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .mobile-toggle { display: block; }
}

/* Hero
   ملاحظة وضع داكن: هون عمداً --navy-dark بالطرفين (مش var(--navy) بأي
   طرف) — لأنه --navy بالوضع الداكن بيصير لون فاتح (مصمم يستخدم كنص، مش
   كخلفية)، ولو استخدمناه هون كان صار نص أبيض فوق خلفية فاتحة بالزاوية
   العلوية بالظبط وين عنوان الصفحة الرئيسية - نص شبه مو مقروء. */
.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(231, 183, 95, 0.18), transparent 55%),
    linear-gradient(135deg, var(--navy-dark) 0%, #1c2b45 100%);
  color: #fff;
  overflow: hidden;
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 72px 20px;
  flex-wrap: wrap;
}
.hero-text { flex: 1 1 380px; }
.hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(231, 183, 95, 0.12);
  border: 1px solid rgba(231, 183, 95, 0.35);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.hero-text h1 { font-size: clamp(1.7rem, 4.5vw + 1rem, 2.5rem); margin: 0 0 16px; line-height: 1.3; }
.hero-text p { color: #d9deea; margin: 0 0 26px; max-width: 520px; }
.trust-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 0;
  margin: 26px 0 0;
}
.trust-row li { display: flex; align-items: center; gap: 7px; color: #d9deea; font-size: 0.88rem; font-weight: 600; }
.trust-row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }
.hero-visual { flex: 1 1 320px; display: flex; justify-content: center; }
/* صورة حقيقية بدل الأيقونة المرسومة القديمة (.hero-shape) — لسا محتفظين
   بنفس التوهج الذهبي كخلفية خفيفة وراء الصورة حتى الانتقال يبقى متناسق
   مع باقي هوية الموقع، بس الواجهة صارت صورة فرشة حقيقية مش رسمة. */
.hero-photo-wrap { position: relative; width: 100%; max-width: 380px; }
.hero-photo-glow {
  position: absolute; inset: -18px;
  background: radial-gradient(circle at 32% 30%, var(--gold), transparent 70%);
  opacity: 0.4; filter: blur(28px); z-index: 0;
}
.hero-photo {
  position: relative; z-index: 1; display: block;
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 20px;
  border: 3px solid rgba(231, 183, 95, 0.45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 0.95rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--gold); color: var(--navy-dark); box-shadow: 0 6px 16px rgba(231, 183, 95, 0.35); }
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(231, 183, 95, 0.4); }
/* --navy-dark مش --navy لأنه --navy بالوضع الداكن بيصير لون فاتح (مصمم
   يستخدم كنص)، فلو استخدمناه كخلفية هون كان صار نص أبيض شبه مو مقروء
   فوقه (--navy-dark ثابت بنفس القيمة بالوضعين، فآمن نعتمد عليه كخلفية). */
.btn-secondary { background: var(--navy-dark); color: #fff; }
.btn-secondary:hover { background: #26374f; transform: translateY(-2px); }
.btn-lg { padding: 14px 34px; font-size: 1rem; }
.full-width { width: 100%; }
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25d366; color: #fff; box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}
.btn-whatsapp:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 211, 102, 0.4); }
.product-inquiry-btn { margin-top: 14px; }

/* Sections */
.section { padding: 50px 0; }
.section-title { font-size: clamp(1.25rem, 2vw + 0.9rem, 1.5rem); margin-bottom: 20px; color: var(--navy); }
.page-title { font-size: clamp(1.4rem, 2.5vw + 1rem, 1.8rem); margin: 12px 0 20px; color: var(--navy); }
.narrow { max-width: 760px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 26px;
}
.breadcrumb a { color: var(--navy); font-weight: 600; }
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb-current { color: var(--muted); }

/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
.cat-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 16px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--gold); }
.cat-card-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border-radius: 50%;
  color: var(--gold-dark);
}
.cat-card-icon svg { width: 26px; height: 26px; }
/* لما يكون في صورة حقيقية للقسم (متل الفرشات) منعرضها جوا نفس الدائرة
   بدل الأيقونة المرسومة — الأقسام يلي لسا ما إلها صور حقيقية (متل
   البياضات) بتضل عالأيقونة القديمة لحد ما توفر صور فعلية إلها. */
.cat-card-icon.has-photo { background: none; overflow: hidden; }
.cat-card-icon.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cat-card-name { font-weight: 700; color: var(--navy); }

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.product-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--gold); }
.product-card-img { position: relative; aspect-ratio: 4/3; background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-badges { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.product-badge { padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.product-badge-bestseller { background: var(--gold); color: var(--navy-dark); }
/* --navy-dark ثابت بالوضعين، عكس --navy يلي بيصير فاتح بالوضع الداكن —
   نفس تعليل .btn-secondary فوق. */
.product-badge-recommended { background: var(--navy-dark); color: #fff; }
.card-gallery-track img,
.detail-gallery-track img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.product-card:hover .card-gallery-track img { transform: scale(1.05); }
.img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--cream) 0%, var(--border) 100%);
  color: var(--gold-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
.img-placeholder svg { width: 34%; max-width: 60px; opacity: 0.7; }
.img-placeholder span { font-size: 0.75rem; font-weight: 700; opacity: 0.75; }
.img-placeholder.large svg { max-width: 90px; }
.img-placeholder.large span { font-size: 0.9rem; }
.product-card-body { padding: 16px 18px; }
.product-card-name { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.product-card-desc { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 4px 0 8px; }
.product-card-cta { color: var(--gold-dark); font-weight: 700; font-size: 0.82rem; }
.product-card:hover .product-card-cta { text-decoration: underline; }

/* معرض صور قابل للنقر والتمرير (بطاقة المنتج وصفحة تفاصيل المنتج) —
   منستخدم تمرير أصلي بالمتصفح (overflow-x + scroll-snap) بدل ما نعيد بناء
   منطق السحب باللمس يدوياً بجافاسكربت: أخف، أسرع، وبيشتغل تلقائياً صح
   بكل المتصفحات والأجهزة. الشريط نفسه dir="ltr" بالقالب دايماً (بغض
   النظر عن لغة الصفحة) حتى قيمة scrollLeft تضل متوقعة بكل المتصفحات —
   بعض المتصفحات بتحسبها بشكل مختلف تماماً جوا حاوية RTL. */
.card-gallery-track,
.detail-gallery-track {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.card-gallery-track::-webkit-scrollbar,
.detail-gallery-track::-webkit-scrollbar { display: none; }
.card-gallery-track img,
.detail-gallery-track img { flex: 0 0 100%; scroll-snap-align: start; }

/* أزرار وأسهم التنقل بين صور المعرض — عمداً left/right فيزيائية (مش
   inset-inline-start/end) لأنه اتجاه تصفح الصور نفسه مقصود يبقى ثابت
   (زي إنستغرام/واتساب) بغض النظر عن اتجاه لغة الصفحة، متوافق مع
   dir="ltr" المفروض على الشريط فوق. */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15, 23, 42, 0.55); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 3; padding: 0;
}
.gallery-nav svg { width: 16px; height: 16px; }
.gallery-nav:hover { background: rgba(15, 23, 42, 0.8); }
.gallery-nav:disabled { opacity: 0 !important; pointer-events: none; }
.gallery-nav-prev { left: 8px; }
.gallery-nav-next { right: 8px; }
.product-card:hover .gallery-nav,
.product-detail-img:hover .gallery-nav { opacity: 0.85; }
/* أجهزة اللمس ما عندها hover — الأسهم لازم تبين افتراضياً حتى تنلمس. */
@media (hover: none) { .gallery-nav { opacity: 0.85; } }
.product-detail-img .gallery-nav { width: 40px; height: 40px; }
.product-detail-img .gallery-nav svg { width: 20px; height: 20px; }

.gallery-dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px; z-index: 3; pointer-events: none;
}
.gallery-dot {
  width: 6px; height: 6px; border-radius: 50%; padding: 0; border: none;
  background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.15s ease; pointer-events: auto; cursor: pointer;
}
.gallery-dot.active { background: #fff; transform: scale(1.3); }

/* شريط المصغّرات تحت الصورة الرئيسية بصفحة تفاصيل المنتج */
.product-gallery { display: flex; flex-direction: column; }
.detail-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.detail-thumbs::-webkit-scrollbar { display: none; }
.detail-thumb {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  cursor: pointer; border: 2px solid var(--border); background: var(--cream); padding: 0;
  transition: border-color 0.15s ease;
}
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-thumb.active { border-color: var(--gold); }

.related-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }

.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.faq-item {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 20px; box-shadow: var(--shadow);
}
.faq-item summary {
  padding: 16px 0; font-weight: 700; color: var(--navy-dark); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--gold-dark); flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 18px; color: var(--muted); line-height: 1.7; }
.muted { color: var(--muted); }

/* Product detail */
.product-detail-section { padding-top: 6px; }
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; } }
.product-detail-img {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-detail-info h1 { color: var(--navy); margin-top: 0; }
/* white-space: pre-line بيخلي أسطر الوصف (نقاط "- ..." يلي مكتوبة بلوحة
   التحكم بأسطر منفصلة) تنعرض كل سطر لحاله بدل ما تتلزّق كلها بفقرة وحدة —
   بدون أي حاجة لتغيير البيانات نفسها أو تحويلها لقائمة HTML. */
.product-desc { color: var(--muted); margin-bottom: 24px; white-space: pre-line; }
.field-label { display: block; font-weight: 700; margin: 14px 0 6px; color: var(--navy); }
.variant-options { display: flex; flex-direction: column; gap: 8px; }
.variant-option {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.variant-option:hover { border-color: var(--gold); background: var(--cream); }
.variant-option.disabled { opacity: 0.5; cursor: not-allowed; }
.variant-option.disabled:hover { border-color: var(--border); background: transparent; }
.variant-size { font-weight: 700; flex: 1; }
.variant-size-hint { font-weight: 400; color: var(--muted); font-size: 0.82rem; margin-inline-start: 4px; }
.variant-price { color: var(--gold-dark); font-weight: 700; }
.variant-stock { font-size: 0.8rem; color: var(--muted); }
/* مجموعة مقاس (عرض واحد ممكن يشمل طولين 190/200 بنفس السعر): الصف الرئيسي
   هو نفس .variant-option القديم (نفس الحدود والهوفر)، وتحته أزرار طول
   صغيرة اختيارية لمين حاب يحدد طول معيّن — شوف main.js لمنطق التبديل. */
.variant-group { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.variant-group .variant-option { border: none; border-radius: 0; }
.variant-length-toggle { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.length-btn {
  font-family: inherit; font-size: 0.82rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px;
  background: var(--paper); color: var(--muted);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.length-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--navy); }
.length-btn.active { border-color: var(--gold-dark); background: var(--gold); color: var(--navy-dark); font-weight: 700; }
.length-btn:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.qty-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty-input { width: 80px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; }
.qty-input.small { width: 60px; }

/* Cart */
.cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cart-table { width: 100%; min-width: 560px; border-collapse: collapse; margin-bottom: 24px; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cart-table th, .cart-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); }
.cart-product-cell { display: flex; align-items: center; gap: 10px; }
.cart-product-cell img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
.cart-summary { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; max-width: 380px; }
.cart-summary-row { display: flex; justify-content: space-between; padding: 8px 0; }
.cart-summary-row.total { font-weight: 800; font-size: 1.15rem; color: var(--navy); border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; }
.link-btn { background: none; border: none; color: var(--navy); text-decoration: underline; cursor: pointer; font-size: 0.9rem; padding: 6px 0; display: inline-block; }
.link-btn.danger { color: var(--error); }

/* Checkout */
.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
@media (max-width: 800px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-form, .checkout-summary { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.text-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.95rem;
  /* color: var(--text) هون مهم — قبل هيك كانت محددة بس background، فلون
     النص جوا الحقل كان يرجع للون الافتراضي من المتصفح (غامق) بدل ما يتبع
     الثيم، وهيك بالوضع الداكن كان صار نص غامق فوق خلفية غامقة (الخلفية
     كانت الوحيدة يلي بتتغير) — شبه مو مقروء بكل فورم بالموقع (الدفع،
     المنتجات، الإعدادات...). */
  background: var(--paper); color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* بدون هاي، المتصفح بيرسم قائمة خيارات <select> وبعض عناصر الفورم بألوان
   النظام الفاتحة الافتراضية حتى لو الموقع بالوضع الداكن — فبيصير نص غامق
   فوق خلفية غامقة (شبه مو مقروء). هاي بتخلي المتصفح نفسه يعرف إنه في
   وضعين (فاتح/داكن) ويختار ألوان قوائم/عناصر النظام المناسبة تلقائياً. */
:root[data-theme="dark"] { color-scheme: dark; }
:root:not([data-theme="dark"]) { color-scheme: light; }
.text-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(231, 183, 95, 0.25);
}
textarea.text-input { resize: vertical; }
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-option { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.payment-option.disabled { opacity: 0.55; }
.payment-option em { font-size: 0.78rem; color: var(--muted); font-style: normal; display: block; }
.checkout-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; }
.checkout-summary-row.total { font-weight: 800; font-size: 1.1rem; color: var(--navy); border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; }

/* Order success */
.success-section { text-align: center; padding: 80px 0; }
.success-icon {
  width: 80px; height: 80px; border-radius: 50%; background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px;
}

/* Contact */
.contact-list { list-style: none; padding: 0; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }

/* Flash */
.flash { padding: 12px 18px; border-radius: 10px; margin: 16px 0; font-weight: 600; }
.flash-success { background: var(--flash-success-bg); color: var(--success); }
.flash-error { background: var(--flash-error-bg); color: var(--error); }

/* Order tracking */
.track-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin: 20px 0 10px; }
.track-form > div { flex: 1 1 180px; }
.track-result { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-top: 20px; }
.track-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 24px; }
.track-step { padding: 8px 14px; border-radius: 999px; background: var(--cream); color: var(--muted); font-size: 0.82rem; font-weight: 700; border: 1px solid var(--border); }
.track-step.done { background: var(--gold); color: var(--navy-dark); border-color: var(--gold); }
.track-step-sep { color: var(--border); font-weight: 700; }

/* WhatsApp floating button */
.whatsapp-fab {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 40;
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55); }

/* Footer */
.site-footer { background: var(--navy-dark); color: #cdd3e0; margin-top: 60px; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 44px 20px; }
.footer-col h4 { color: #fff; margin-bottom: 10px; }
.footer-col a, .footer-col p { display: block; color: #cdd3e0; padding: 3px 0; font-size: 0.9rem; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 20px; font-size: 0.8rem; text-align: center; }

/* Small phones: roomier tap targets, full-width primary actions */
@media (max-width: 600px) {
  .hero-inner { padding: 48px 20px; gap: 28px; }
  .section { padding: 34px 0; }
  .cat-card { padding: 22px 14px; }
  .add-to-cart-form .btn-lg,
  .checkout-form .btn-lg,
  .cart-summary .btn-lg { width: 100%; }
  /* على شاشة ضيقة، الأزرار الرئيسية (إضافة للسلة/إتمام الطلب) بتصير
     بعرض كامل وممكن توصل لقرب أسفل الشاشة — بدون هالتعديل، فقاعة واتساب
     الطايفة (ثابتة بأسفل الشاشة دايماً) كانت ممكن تتراكب فوق زاوية الزر
     وتمنع الضغط عليه. منصغّرها شوي ومنرفعها لفوق أكتر حتى تضل بعيدة. */
  .whatsapp-fab { width: 46px; height: 46px; bottom: 78px; }
}