/* الخطوط مستضافة محلياً (رخصة OFL) بدل Google Fonts: طلبان أقل وبلا انتظار نطاق خارجي. */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/amiri-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/amiri-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/amiri-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/amiri-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tajawal-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tajawal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tajawal-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tajawal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tajawal-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tajawal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Lougain Jewellery Jordan - warm ivory & antique gold

   الألوان كلها رموز (tokens) في :root، والوضع الليلي يبدّل قيمها فقط.
   الذهب هنا عتيق (#B98A2E) لا برتقالي، لأنه لون المجوهرات لا لون اللافتات.
   ========================================================================== */

:root {
  /* أسطح ونصوص */
  --bg: #FBF8F3;
  --bg-2: #F4ECE0;
  --surface: #FFFFFF;
  --surface-2: #F8F2E8;
  --panel: #14110D;
  --ink: #1A140D;
  --ink-2: #3D3428;
  --ink-3: #6C6152;
  --on-photo: #FBF8F3;

  /* ذهب عتيق: أساس، لامع، وعميق صالح للنص على الفاتح */
  --gold: #B98A2E;
  --gold-bright: #E3B75E;
  --gold-hi: #F3D391;
  --gold-deep: #8A6414;
  --gold-metal: linear-gradient(135deg, #F3D391, #D2A044 46%, #A9782A);
  --gold-wash: radial-gradient(120% 150% at 88% 6%, rgba(185, 138, 46, 0.16), transparent 60%);

  --line: rgba(26, 20, 13, 0.10);
  --line-strong: rgba(26, 20, 13, 0.18);
  --scrim: rgba(12, 9, 6, 0.72);

  --shadow: 0 1px 2px rgba(26, 20, 13, 0.05), 0 12px 30px rgba(26, 20, 13, 0.08);
  --shadow-lift: 0 2px 6px rgba(26, 20, 13, 0.08), 0 26px 60px rgba(26, 20, 13, 0.16);

  --font-display: "Amiri", "Times New Roman", serif;
  --font-body: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-latin: "Cormorant Garamond", Georgia, serif;

  --bar: 68px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[data-theme="dark"] {
  --bg: #0A0806;
  --bg-2: #100D0A;
  --surface: #16120E;
  --surface-2: #1D1813;
  --panel: #14110D;
  --ink: #F6F0E6;
  --ink-2: #D6CBB9;
  --ink-3: #A99A82;

  --gold: #DDAF5C;
  --gold-bright: #EFC97F;
  --gold-hi: #F7E0AE;
  --gold-deep: #E8C77F;
  --gold-metal: linear-gradient(135deg, #F7E0AE, #DDAF5C 46%, #B98A2E);
  --gold-wash: radial-gradient(120% 150% at 88% 6%, rgba(221, 175, 92, 0.16), transparent 62%);

  --line: rgba(240, 215, 160, 0.14);
  --line-strong: rgba(240, 215, 160, 0.26);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 36px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, 0.55), 0 28px 64px rgba(0, 0, 0, 0.66);
}

* { box-sizing: border-box; }

/* لا يجوز لأي عنصر أن يوسّع الصفحة أفقياً: على الجوال يسمح ذلك بتصغير الصفحة كلها
   فتظهر نافذة الطلب خارج ما يراه الزبون. clip لا ينشئ منطقة تمرير فلا يكسر sticky. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;   /* المتصفحات القديمة */
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

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

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

button { font: inherit; color: inherit; }

/* Components below set display:flex/inline-flex, which beats the browser's
   default [hidden] rule and leaves hidden buttons visible. Restore it. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  margin: 0;
  letter-spacing: 0;
}

/* رابط التخطي مخفيّ فوق الصفحة لا إلى جانبها: إزاحته جانبياً (-9999px) كانت في
   العربية تدفعه 9999px إلى اليمين، فتصير الصفحة أعرض من الشاشة على الجوال. */
.skip {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  transform: translateY(-120%);
}
.skip:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.latin {
  font-family: var(--font-latin);
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--bar);
  padding: 8px var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}

/* خيط ذهبي رقيق يفصل الشريط عن الصفحة */
.topbar::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  /* The brand must be allowed to shrink on narrow phones, otherwise the
     topbar's min-content width (logo + name + the three action buttons)
     pushes the whole document past the viewport and Android zooms the
     page out, pushing the order box off screen. */
  min-width: 0;
}

.brand-logo {
  height: 44px;
  width: auto;
  flex: none;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  min-width: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-inline-start: auto;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.icon-btn svg { width: 19px; height: 19px; }

/* language toggle: carries a word, so it may grow past the icon width */
#lang {
  width: auto;
  min-width: 44px;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* توهّج ذهبي ناعم + تدرّج دافئ، بلا صور ثقيلة */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--gold-wash),
    radial-gradient(70% 60% at 8% 96%, rgba(185, 138, 46, 0.12), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 78%);
  pointer-events: none;
}

/* شبكة زخرفية خفيفة جداً تعطي إحساس الورق المطلي */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 84px) var(--gutter) clamp(34px, 6vw, 76px);
}

.hero-copy { min-width: 0; }

.eyebrow {
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
}

.hero h1 {
  font-size: clamp(42px, 6.4vw, 82px);
  letter-spacing: 0;
}

.hero h1 .sub {
  display: block;
  font-family: var(--font-latin);
  font-style: italic;
  font-size: clamp(13px, 1.6vw, 18px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 14px;
}

.lede {
  max-width: 54ch;
  margin: 22px 0 0;
  color: var(--ink-3);
  font-size: clamp(15px, 1.5vw, 17.5px);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-3);
}

.stats b {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  margin-inline-end: 6px;
}

/* صور حقيقية من الكتالوج في لوحة مرتّبة: تُظهر الصنعة قبل أي كلام */
.hero-art {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  align-items: end;
  min-width: 0;
}

.hero-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.hero-shot:nth-child(1) { transform: translateY(20px) rotate(-1.4deg); }
.hero-shot:nth-child(2) { transform: translateY(-12px); z-index: 2; }
.hero-shot:nth-child(3) { transform: translateY(26px) rotate(1.4deg); }
.hero-shot:hover { transform: translateY(6px); box-shadow: var(--shadow-lift); }
.hero-link { position: absolute; inset: 0; z-index: 3; }

.hero-tag { display: none; }

/* سطر الطمأنة: الكفالة والتوصيل ومدّته والعربون. */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}
.trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  color: var(--ink-2);
}
.trust-chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  transform: rotate(45deg);
  background: var(--gold);
}
.section > .trust-chips { margin: 0 0 18px; }

.hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* تكبير خفيف يبدأ مع ظهور الصورة: حركة «نَفَس» هادئة لا تُشتّت */
  transform: scale(1.08);
  transition: opacity 1s var(--ease), transform 3.6s linear;
}

/* الصورة الظاهرة الآن في اللوحة */
.hero-shot img.is-on {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.hero-shot figcaption {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  color: var(--on-photo);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
}

/* قاعدة ذهبية بماسة: الفاصل الكلاسيكي بين الأقسام */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 26px auto;
  max-width: 260px;
}
.hero-copy .rule { justify-content: flex-start; margin-inline: 0; }
.rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.rule span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.rule i {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* --------------------------------------------------------------- chooser */

/* شبكة الأقسام: صور حقيقية مع الاسم والعدد. أزرار كبيرة لأن أغلب
   الزبائن أكبر سناً، وكل الخيارات ظاهرة مرة واحدة بلا تمرير. */
.chooser {
  padding: clamp(30px, 5vw, 58px) var(--gutter) 0;
}

.chooser-title {
  font-size: clamp(24px, 3.4vw, 36px);
  margin: 0 0 18px;
  text-align: center;
}

.catbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-bottom: clamp(16px, 3vw, 30px);
}

/* "All sections" takes a full row of its own: a wide entry tile, then the
   type tiles below it at a comfortable size for their photos. */
.chip[data-slug="all"] { grid-column: 1 / -1; }

.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 118px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(16px, 4.3vw, 18.5px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
.chip[data-slug="all"] { min-height: 152px; }

.chip-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--ease);
}

/* الشريحة بلا صورة (صفحة القطعة) تحمل غسلة ذهبية خفيفة فقط. */
.chip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gold-wash);
}

/* حجاب داكن أسفل الصورة، فيبقى النص مقروءاً في الوضعين. الكلاس يضيفه
   السكربت للشرائح التي لها صورة، بدل انتظار دعم :has في المتصفح. */
.chip--photo::after {
  background: linear-gradient(to top,
    rgba(10, 8, 6, 0.86) 12%, rgba(10, 8, 6, 0.38) 52%, rgba(10, 8, 6, 0.12));
}

.chip-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: auto;
  width: 100%;
}

.chip-name {
  display: block;
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.chip b {
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.chip--photo { color: var(--on-photo); }
.chip--photo b { color: var(--gold-hi); opacity: 1; }

.chip:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.chip--photo:hover .chip-photo { transform: scale(1.05); }
.chip:active { transform: scale(0.99); }

.chip[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold) inset, var(--shadow);
}
.chip[aria-pressed="true"] .chip-photo { filter: saturate(115%) brightness(1.04); }

/* Product pages show just the back link and the current type. */
.catbar--pair { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.catbar--pair .chip { min-height: 64px; }

/* --------------------------------------------------------------- toolbar */

.toolbar {
  position: sticky;
  top: var(--bar);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.toolbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 12px var(--gutter);
}

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  background: var(--surface);
  flex: 1 1 220px;
  max-width: 360px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.search svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.search input {
  border: 0;
  background: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  font-family: inherit;
  color: inherit;
}

.toolbar .spacer { flex: 1; }

.select-wrap {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.select-wrap select {
  appearance: none;
  border: 0;
  background: none;
  /* مكان السهم في نهاية السطر (يسار العربية)، كموضعه في ::after، فلا يغطي آخر حرف. */
  padding-block: 9px;
  padding-inline: 16px 34px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.4px solid var(--gold-deep);
  border-bottom: 1.4px solid var(--gold-deep);
  transform: rotate(45deg);
  pointer-events: none;
}

.count-note {
  font-size: 13.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* -------------------------------------------------------------- sections */

.catalog {
  /* أقل فراغ أسفل الكتالوج لأن شريط الثقة والفوتر يليانه مباشرة. */
  padding: clamp(28px, 5vw, 58px) var(--gutter) clamp(32px, 4vw, 56px);
}

.catalog > .section,
.catalog > .notice {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.section { margin-bottom: clamp(48px, 7vw, 86px); scroll-margin-top: calc(var(--bar) + 72px); }

/* بانر القسم: خلفية كريمية بعلامة ذهبية، أو صورة المالك إن رُفعت */
.sec-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.8vw, 30px) clamp(16px, 3vw, 34px) 0;
  margin-bottom: 24px;
  background:
    var(--gold-wash),
    linear-gradient(120deg, var(--surface-2), var(--surface) 54%, var(--bg-2));
}

.sec-top::after {
  content: "";
  position: absolute;
  inset-inline-end: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(96px, 16vw, 168px);
  height: clamp(74px, 12vw, 128px);
  background: url(logo.png) center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 2;
}

.sec-top .section-head { position: relative; z-index: 3; margin-bottom: 0; }

.sec-top.has-bg { background: var(--panel); border-color: transparent; }

.sec-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.sec-top.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.88), rgba(10, 8, 6, 0.4));
  pointer-events: none;
  z-index: 2;
}

.sec-top.has-bg::after { opacity: 0; }

/* نص البانر فوق الصورة يبقى كريمياً حتى في الوضع الليلي */
.sec-top.has-bg h2 { color: #FBF8F3; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.sec-top.has-bg .section-en { color: var(--gold-bright); }
.sec-top.has-bg .section-count,
.sec-top.has-bg .section-desc { color: rgba(251, 248, 243, 0.88); }
.sec-top.has-bg .section-head { border-bottom-color: rgba(251, 248, 243, 0.32); }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 6px 20px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  font-size: clamp(26px, 3.6vw, 40px);
}

.section-en {
  grid-column: 1;
  font-family: var(--font-latin);
  font-style: italic;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold-deep);
}

.section-count {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
}

.section-desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-3);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

/* ------------------------------------------------------------------ card */

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.28s var(--ease), box-shadow 0.28s var(--ease),
              transform 0.28s var(--ease);
}

.card-hit { display: block; }

.card:hover,
.card:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.card .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-2), var(--bg-2));
}

.card .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s var(--ease);
}

.card:hover .frame img { transform: scale(1.05); }

.card .code {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-photo);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  border: 1px solid rgba(251, 248, 243, 0.22);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

.card .pick {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251, 248, 243, 0.28);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  color: var(--on-photo);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.pick svg { width: 19px; height: 19px; }
.pick:hover { border-color: var(--gold-bright); color: var(--gold-hi); }
.pick:active { transform: scale(0.94); }
.pick[aria-pressed="true"] {
  background: var(--gold-metal);
  border-color: transparent;
  color: #2A1D06;
}

.card .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px 14px;
}

.card .price {
  font-family: var(--font-display);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
  white-space: nowrap;
}
.card .price.on-request { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3); }

/* سعر العرض: السعر الأساسي مشطوباً إلى جانبه، ورقاقة النسبة على الصورة. */
.card .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.card .price-old {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* رقاقة نسبة الخصم: على البطاقة وعلى صفحة القطعة. */
.off {
  display: inline-flex;
  align-items: center;
  /* تبقى «-20%» بترتيب لاتيني صحيح داخل الصفحة العربية. */
  direction: ltr;
  unicode-bidi: isolate;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2A1D06;
  background: var(--gold-metal);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
}

.card .off {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  z-index: 2;
}

.card .name {
  align-self: stretch;
  max-width: 100%;
  font-size: 13.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- trust */

.trust {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(28px, 5vw, 52px) var(--gutter);
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 3vw, 34px);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-3);
}

.trust-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--gold-deep);
}
.trust-ico svg { width: 20px; height: 20px; }

.trust-item b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

/* ---------------------------------------------------------------- notice */

.notice {
  text-align: center;
  color: var(--ink-3);
  padding: 40px 16px;
}

/* --------------------------------------------------------- basket button */

/* زر سلة عائم واضح: أيقونة سلة داخل دائرة ذهبية، وفوقها شارة عدد القطع.
   ظاهر دائماً حتى يجد الزائر «قائمة الطلب» بلا بحث. */
.tray {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 18px;
  z-index: 70;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
/* وهو فوق أزرار الطلب أو ذيل الصفحة يبتعد ولا يلتقط اللمس، فلا يغطيها. */
.tray.is-away {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

.basket-btn {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-metal);
  color: #2A1F0B;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.basket-btn svg { width: 27px; height: 27px; stroke-width: 1.8; }
.basket-btn:hover { transform: translateY(-2px); }
.basket-btn:active { transform: scale(0.96); }
.basket-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* شارة العدد فوق أيقونة السلة. حلقة بلون الصفحة تفصلها عن الذهب. */
.basket-count {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -7px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--panel);
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg), 0 3px 8px rgba(26, 20, 13, 0.35);
}
.basket-count[hidden] { display: none; }
.basket-count.is-wide { padding: 0 5px; font-size: 12px; }

/* نبضة قصيرة عند زيادة العدد، فيلاحظ الزائر أن القطعة أُضيفت. */
@keyframes basket-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.15); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.tray.bump .basket-btn { animation: basket-bump 0.5s var(--ease); }

/* نموذج الطلب والعارض فوق الزر (z-index 70)، فيُخفى وهما مفتوحان حتى لا
   يغطي زر «إرسال الطلب» على الهاتف. */
body.no-scroll .tray { display: none; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: var(--gold-metal);
  color: #2A1D06;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 24px rgba(169, 120, 42, 0.22);
}
.btn-gold:hover {
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 30px rgba(169, 120, 42, 0.3);
}

.btn-line {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold-deep); }

.btn-wa {
  background: #25D366;
  color: #062d16;
  font-weight: 700;
}
.btn-wa:hover { filter: brightness(1.05); }

/* واتساب ثانوي: إطار وأيقونة خضراء بلا تعبئة، فلا يكون أعلى من «اطلب الآن». */
.btn-wa-line {
  border-color: rgba(37, 211, 102, 0.55);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.btn-wa-line svg { color: #25D366; }
.btn-wa-line:hover { border-color: #25D366; }

/* زر هادئ بلا إطار ثقيل (المشاركة). */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
  font-weight: 500;
}
.btn-ghost:hover { color: var(--gold-deep); }

/* ---------------------------------------------------------------- drawer */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 90;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-inline-start: 1px solid var(--line);
  transform: translateX(-102%);
  transition: transform 0.38s var(--ease);
  visibility: hidden;
}
html[dir="ltr"] .drawer { transform: translateX(102%); }
.drawer.open { transform: none; visibility: visible; }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: 22px; }
.drawer-head .spacer { flex: 1; }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}

.drawer-foot {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.field input,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  font-size: 14.5px;
  color: inherit;
  outline: none;
}
.field input:focus,
.field textarea:focus { border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 62px; }

.drawer-foot .btn { width: 100%; }

.drawer-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

.line-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px dashed var(--line);
}
.line-item img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  flex: none;
}
.line-item .li-main { flex: 1; min-width: 0; }
.line-item .li-code {
  font-family: var(--font-display);
  font-size: 15px;
}
.line-item .li-sub { font-size: 12.5px; color: var(--ink-3); }
.line-item .li-price {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
  white-space: nowrap;
}

/* عدّاد الكمية داخل سطر السلة */
.line-item .li-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

/* أهداف لمس 44px للأزرار الصغيرة في السلة (الكمية والحذف)، مع بقاء الشكل. */
.qty-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
}
.qty-btn:hover:not(:disabled) {
  color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.qty-btn:disabled { opacity: 0.35; cursor: default; }

.qty-n {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.icon-x {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  color: var(--ink-3);
  flex: none;
}
.icon-x:hover { color: #b3261e; border-color: var(--line-strong); }
.icon-x svg { width: 16px; height: 16px; }

.empty-note {
  text-align: center;
  color: var(--ink-3);
  padding: 54px 20px;
  font-size: 14.5px;
}

/* -------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 7, 6, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lb-stage {
  margin: 0;
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage img {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid rgba(221, 175, 92, 0.3);
  border-radius: var(--r);
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(251, 248, 243, 0.22);
  border-radius: var(--r-pill);
  background: rgba(10, 8, 6, 0.6);
  color: #FBF8F3;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.lb-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.lb-btn svg { width: 20px; height: 20px; }

.lb-close { inset-block-start: 16px; inset-inline-end: 16px; }

/* ------------------------------------------------------- product page */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 20px var(--gutter) 0;
  font-size: 13.5px;
  color: var(--ink-3);
}
.crumbs a:hover { color: var(--gold-deep); }
.crumbs .sep { color: var(--line-strong); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(26px, 4vw, 60px);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 38px) var(--gutter) clamp(48px, 6vw, 72px);
  align-items: start;
}

.product-media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(10px, 2vw, 18px);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}
.product-media img { width: 100%; height: auto; border-radius: var(--r); }

.product-info { padding-top: 6px; }

.product-info .kicker {
  font-family: var(--font-latin);
  font-style: italic;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--gold-deep);
  margin: 0 0 10px;
}

.product-info h1 { font-size: clamp(34px, 5.4vw, 54px); }

.product-info h1 .hash { color: var(--gold); }
/* سطر وصف القطعة تحت رقمها: ما هي القطعة بكلمات قليلة. */
.product-line { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }

.product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.product-price .amount {
  font-family: var(--font-display);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.product-price .cur { font-size: 14px; color: var(--ink-3); }
.product-price .on-request { font-size: 17px; color: var(--ink-3); }

/* سعر العرض في صفحة القطعة: الأساسي مشطوباً ثم السعر ثم النسبة. */
.product-price .price-sale {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.product-price .price-old {
  font-size: 17px;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* تحت السعر مباشرة: رسوم التوصيل والإجمالي معها، ثم طريقة الدفع، فيعرف
   الزبون المبلغ النهائي قبل أن يضغط «اطلب الآن». */
.price-note {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.price-note b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.price-note .sep { margin: 0 4px; color: var(--gold); }
.price-note + .price-note { margin-top: 4px; font-size: 13.5px; }

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}
.product-actions .order-open {
  flex: 1 1 100%;
  min-height: 56px;
  font-size: 17px;
}
.product-actions .btn-add,
.product-actions .btn-wa-line { flex: 1 1 calc(50% - 5px); min-width: 0; }
.product-actions .btn-add { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold-deep); }
.product-actions .btn-share { flex: 1 1 100%; min-height: 44px; }

/* شريط الطلب الثابت أسفل الجوال (يظهر بعد تجاوز أزرار الطلب). */
.buybar { display: none; }

.specs {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}
.specs li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.specs .k { color: var(--ink-3); min-width: 96px; flex: none; }

.product-desc {
  margin: 24px 0 0;
  color: var(--ink-3);
  font-size: 15px;
}

/* كفالة ووصول الطلب: لوحة ذهبية هادئة تُغلق صفحة القطعة بالطمأنة */
.assure {
  margin: 26px 0 0;
  padding: 18px 20px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: var(--r);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 7%, transparent),
      transparent);
}

.assure li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.assure li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--gold) 26%, transparent);
}

/* ماسة ذهبية صغيرة: نفس عنصر الفاصل في الموقع */
.assure-mark {
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}

.assure-body {
  display: block;
  font-size: 14.5px;
  color: var(--ink-3);
}
.assure-body b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.related {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(60px, 8vw, 100px);
}
.related h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------- الأكثر طلباً وآراء الزبائن */

/* لقطات آراء الزبائن: صف أفقي يُسحب كبقية الشرائط، واللقطة تُفتح في العارض. */
.feedback-grid {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  cursor: grab;
}

.feedback-grid.is-dragging { cursor: grabbing; user-select: none; }

.feedback-grid::-webkit-scrollbar { height: 8px; }
.feedback-grid::-webkit-scrollbar-track { background: transparent; }
.feedback-grid::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
.feedback-grid::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.fb-item {
  flex: 0 0 clamp(168px, 42vw, 236px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.fb-item:hover,
.fb-item:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.fb-item img { display: block; width: 100%; height: auto; }

.feedback-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(36px, 6vw, 68px) var(--gutter) 34px;
  text-align: center;
}

.footer-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; }

.footer .rule { margin-top: 0; }

.footer h2 { font-size: clamp(26px, 3.6vw, 36px); }

.footer .latin { color: var(--gold-deep); font-size: 12px; margin: 10px 0 0; }
/* الاسم القانوني للشركة المالكة للعلامة (تطلبه مِتا لاعتماد اسم واتساب). */
.footer .foot-legal { margin: 14px auto 0; max-width: 62ch; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-3); }
.footer .foot-legal.latin { margin-top: 4px; font-size: 11.5px; letter-spacing: 0; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}

/* زرّ تواصل: أيقونة ذهبية + التسمية، وإطار رقيق يلمع عند المرور. */
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.foot-link:hover,
.foot-link:focus-visible {
  color: var(--gold-deep);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.foot-ico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex: none;
}

.foot-ico svg { width: 100%; height: 100%; }

/* رقم الواتساب: خط رقيق يفصله عن التسمية في الاتجاهين. */
.foot-link bdi {
  padding-inline-start: 9px;
  border-inline-start: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 0.92em;
}

/* شريط الدول: عنوان بماس صغير على الطرفين، ثم دول برقاقات ذهبية. */
.foot-where { margin: 34px auto 0; }
.foot-deliv { margin: 14px auto 0; font-size: 14px; color: var(--ink-2); text-align: center; }

.foot-where-t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink-3);
}

.foot-where-t::before,
.foot-where-t::after {
  content: "";
  width: clamp(26px, 9vw, 74px);
  height: 1px;
  flex: none;
}

.foot-where-t::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.foot-where-t::after { background: linear-gradient(90deg, var(--gold), transparent); }

.foot-places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.foot-places li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--ink-2);
  font-weight: 500;
}

.foot-places li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--gold-metal);
  transform: rotate(45deg);
}

.foot-note {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* روابط صفحات المتجر القانونية (الإمارات) آخر الذيل: سطر نصّي هادئ، وكل رابط بمساحة لمس. */
.foot-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.foot-pages a {
  display: inline-block;
  padding: 10px 8px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.foot-pages a:hover,
.foot-pages a:focus-visible { color: var(--gold-deep); }

/* ------------------------------------------------ legal pages (legal.php) */

.legal { width: 100%; max-width: 860px; margin-inline: auto; padding-bottom: clamp(40px, 6vw, 72px); }

.legal-doc { padding: clamp(18px, 3vw, 30px) var(--gutter) 0; }

.legal-doc h1 { font-size: clamp(30px, 4.6vw, 42px); }

.legal-body { margin-top: 14px; color: var(--ink-2); }
.legal-body h2 { margin: 30px 0 8px; font-size: clamp(21px, 2.8vw, 25px); color: var(--ink); }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-inline-start: 1.3em; }
.legal-body li { margin: 4px 0; }
.legal-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere; }
.legal-body a[href^="tel:"] { white-space: nowrap; }

/* النص بلغتين في الصفحة، وتظهر لغة الواجهة وحدها (app.js يبدّل html[lang]). */
html[lang="en"] .legal-body[data-legal="ar"],
html:not([lang="en"]) .legal-body[data-legal="en"] { display: none; }

/* ما ينتظر تأكيد المالك: ظاهر بخط هادئ مسطّر بنقاط، لا كتحذير. */
.legal-body .tbc {
  background: none;
  color: var(--ink-3);
  font-size: 0.86em;
  border-bottom: 1px dashed var(--line-strong);
}

.legal-back { margin: 34px 0 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  /* Let the brand bar scroll away; the chooser is a grid, not a sticky strip. */
  .topbar { position: static; }
  .toolbar { top: 0; }
  .product { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }

  /* عمود واحد (الجوال والتابلت): الصورة بارتفاع محدود فيظهر السعر قريباً، وشريط «اطلب الآن» ثابت أسفل الشاشة
     ما دام زر الطلب خارجها (app.js has-buybar). على التابلت (768×1024) كانت الصورة 843px والسعر تحت الشاشة. */
  .product-media img { max-height: 50svh; object-fit: contain; }
  .buybar:not([hidden]) {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 80;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
  }
  .buybar-btn { flex: 1 1 auto; min-height: 50px; font-size: 16.5px; }
  .buybar-wa {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(37, 211, 102, 0.55);
    border-radius: 999px;
    color: #25D366;
  }
  .buybar-wa svg { width: 24px; height: 24px; }
  body.has-buybar .tray { inset-block-end: 84px; }
  body.no-scroll .buybar { display: none; }
  body.has-buybar .footer { padding-bottom: 90px; }
}

@media (max-width: 860px) {
  .catbar { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  /* Older customers: keep type large and tap targets tall on phones. */
  body { font-size: 17px; }
  .brand-logo { height: 38px; }
  .brand-name { font-size: 20px; }

  .hero-inner { padding: 24px 16px 8px; }
  .hero-copy { text-align: center; }
  /* The header already carries the logo and brand name, so the repeated
     masthead is dropped here to lift the product photos up the screen. The
     h1 stays in the DOM for screen readers and search engines. */
  .hero-copy .rule,
  .hero .lede,
  .hero .eyebrow { display: none; }
  .hero h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero-cta { justify-content: center; margin-top: 4px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .stats { justify-content: center; gap: 4px 18px; margin-top: 16px; font-size: 12.5px; }
  .stats b { font-size: 16px; margin-inline-end: 4px; }

  /* شريط صور أفقي قابل للسحب: صور حقيقية قبل أي شيء آخر */
  .hero-art {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .hero-art::-webkit-scrollbar { display: none; }
  .hero-shot,
  .hero-shot:nth-child(1),
  .hero-shot:nth-child(2),
  .hero-shot:nth-child(3) {
    /* صور أصغر من مقاس اللابتوب (٤٦٪ ≈ ١٦٥ بكسل): أنعم حضوراً وأجمل،
       وتُظهر بداية الصورة التالية فتدعو الزائر للسحب. */
    flex: 0 0 46%;
    transform: none;
    /* المحاذاة إلى بداية الشريط (اليمين في RTL) حتى تظهر الصورة الأولى
       كاملة بلا قص، بخلاف center التي تقفز إلى الصورة الثانية. */
    scroll-snap-align: start;
  }

  .chooser { padding-top: 22px; }
  .chooser-title { font-size: 23px; margin-bottom: 12px; }
  /* Two big options per row so the type names never wrap awkwardly. */
  .catbar { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .chip { min-height: 96px; font-size: 17px; }
  .chip[data-slug="all"] { min-height: 104px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .toolbar { position: static; }
  .toolbar-inner { flex-wrap: wrap; }
  .search { max-width: none; flex-basis: 100%; }
  .search input { font-size: 16px; }
  /* حقول «قائمة الطلب» بخط 16px على الجوال، وإلا كبّر الآيفون الصفحة عند
     لمسها داخل متصفح فيسبوك وإنستغرام. */
  .field input, .field textarea { font-size: 16px; }
  .count-note { display: none; }
  .tray { inset-block-end: 16px; inset-inline-start: 14px; }
  .section-head { grid-template-columns: 1fr; }
  .section-count { grid-row: auto; grid-column: 1; }
  .section { margin-bottom: 34px; scroll-margin-top: 24px; }
  .section-head { padding-bottom: 10px; margin-bottom: 16px; }
  .catalog { padding-top: 18px; }
  .sec-top { border-radius: var(--r); }
  .sec-top::after { opacity: 0.06; }

  /* الموقع أسود وذهبي للجميع، وزر الوضع يزاحم رأس الصفحة (بالإنجليزية يتجاوز
     عرض الشاشة)، فيبقى على الشاشات الكبيرة وحدها. */
  #theme { display: none; }

  /* الواجهة: سطر يقول ماذا نصنع، وسطر الطمأنة في الوسط. */
  .hero-tag {
    display: block;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink);
  }
  .hero .trust-chips { justify-content: center; font-size: 13px; margin-top: 14px; }

  /* صفحة القطعة: السعر و«اطلب الآن» أقرب إلى أول الشاشة. مسار التنقل يغني
     عن شريطي الأقسام، والصورة بلا إطار داخل إطار، وبارتفاع محدود. */
  .catbar--pair { display: none; }
  .crumbs { padding-top: 12px; padding-bottom: 0; }
  .product { gap: 16px; padding-top: 10px; }
  .product-media {
    padding: 0;
    border: 0;
    border-radius: var(--r);
    box-shadow: none;
    background: transparent;
  }
  .product-info .kicker,
  .product-info .rule { display: none; }
  .product-info h1 { font-size: 30px; }
  .product-price { margin-top: 10px; padding: 12px 0; }
  .product-actions .btn-add,
  .product-actions .btn-wa-line { padding: 10px 12px; font-size: 14.5px; gap: 7px; white-space: nowrap; }

  /* On phones the pills wrap, so trim them a little to keep the block tidy. */
  .foot-links { gap: 8px; font-size: 13.5px; }
  .foot-link { padding: 7px 13px; }
  .foot-places { gap: 8px; font-size: 13px; }
  .foot-places li { padding: 5px 13px; gap: 8px; }
}

/* Very narrow phones (320-380px): the logo, the brand name and the three
   action buttons cannot all fit on one line, so tighten them and let the
   name truncate instead of widening the document. */
@media (max-width: 380px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand { gap: 8px; }
  .brand-logo { height: 32px; }
  .brand-name {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .icon-btn { width: 38px; height: 38px; }
  #lang { min-width: 38px; padding: 0 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .chip:hover, .hero-shot:hover { transform: none; }
}

/* ------------------------------------------------------- all-items index */

/* فهرس مطويّ بكل القطع في ذيل الصفحة: روابط ثابتة لمحرّكات البحث ولمن عطّل
   السكربت، ولا يزاحم التصميم إلا حين يفتحه الزائر. */
.all-items {
  margin: 22px auto 0;
  max-width: 900px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: start;
}
.all-items summary {
  cursor: pointer;
  text-align: center;
  color: var(--ink-2);
  padding: 8px 0;
}
.all-items-cat { margin: 12px 0 4px; font-weight: 700; }
.all-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.all-items a { color: inherit; text-decoration: none; }
.all-items a:hover { color: var(--gold-deep); text-decoration: underline; }