/* =============================================================
   STYLES  —  التصميم
   -------------------------------------------------------------
   لتغيير لون الـ Accent: غيّر --accent في :root فقط.
   To change the accent colour: edit --accent in :root only.
   الملف يعمل في الاتجاهين RTL و LTR بدون نسخة ثانية.
   This file works in both RTL and LTR without a second copy.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* الألوان المحايدة / neutral palette */
  --ink: #0b0b0c;
  --ink-2: #1c1c1f;
  --muted: #6e6e73;
  --muted-2: #93939a;
  --bg: #ffffff;
  --bg-2: #f6f5f3;
  --bg-3: #ece9e4;
  --line: #e4e1dc;
  --line-2: #d6d2cb;

  /* لون العلامة — الوردي ديال OPTION 3 / the OPTION 3 brand pink */
  --accent: #ea0583;
  --accent-deep: #b80366;   /* نسخة داكنة للنصوص الصغيرة / darker, for small text */
  --accent-soft: #fde7f2;

  /* واتساب / WhatsApp */
  --wa: #1fa855;
  --wa-dark: #178a45;

  /* نفس لون خلفية صورة الواجهة، باش ما يبانش الفرق
     Matches the hero photo's own backdrop so there is no visible seam */
  --hero-bg: #f2f0f1;

  /* الخطوط / fonts */
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font: var(--font-en);

  /* المقاسات / sizing */
  --header-h: 68px;
  --container: 1280px;
  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 0.32s var(--ease);
}

html.is-ar { --font: var(--font-ar); }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}

html.is-ar h1,
html.is-ar h2,
html.is-ar h3,
html.is-ar h4 {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.display {
  font-size: clamp(2.6rem, 9vw, 6.2rem);
  text-transform: uppercase;
  letter-spacing: -0.035em;
}

html.is-ar .display {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(2.4rem, 8vw, 5.4rem);
}

.h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

html.is-ar .eyebrow { letter-spacing: 0.06em; text-transform: none; font-size: 0.82rem; }

.lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--muted); max-width: 58ch; }

.muted { color: var(--muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: clamp(56px, 9vw, 120px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--alt { background: var(--bg-2); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.section-head__text { max-width: 62ch; }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head .lead { margin-top: 14px; }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  min-height: 50px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t), transform 0.18s var(--ease);
  will-change: transform;
}

html.is-ar .btn { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
}
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--wa { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: var(--wa-dark); border-color: var(--wa-dark); }

.btn--block { width: 100%; }
.btn--lg { min-height: 58px; padding-inline: 34px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
  transition: border-color var(--t), gap var(--t);
}
html.is-ar .link-arrow { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.link-arrow:hover { border-color: var(--ink); gap: 14px; }
.link-arrow svg { width: 18px; height: 18px; }
html[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t);
}
.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 14px;
  bottom: 4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--t);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.lang-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.lang-btn__globe { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.header-wa { display: none; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  position: relative;
}
.burger span, .burger::before, .burger::after {
  content: '';
  position: absolute;
  inset-inline: 11px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--t), opacity var(--t);
}
.burger::before { top: 14px; }
.burger span { top: 20px; }
.burger::after { top: 26px; }

body.nav-open .burger::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span { opacity: 0; }
body.nav-open .burger::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--hero-bg);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: min(86vh, 760px);
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding-block: clamp(48px, 7vw, 96px);
  padding-inline-end: clamp(24px, 4vw, 64px);
}

.hero__title { max-width: 16ch; }
.hero__title em {
  font-style: normal;
  display: block;
  color: var(--accent-deep);
}

.hero__text .lead { max-width: 46ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hero__media {
  position: relative;
  margin-inline-end: calc(-50vw + 50%);
  background: var(--hero-bg);
}
.hero__media img, .hero__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* القص من فوق باش يبقى الوجه والطباعة ظاهرين
     Anchor the crop near the top so the face and the print stay in frame */
  object-position: 50% 14%;
}

.hero__tag {
  position: absolute;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html.is-ar .hero__tag { letter-spacing: 0; text-transform: none; font-size: 0.86rem; }

/* ---------- 8. Trust strip ---------- */
.strip {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.strip__track {
  display: flex;
  align-items: center;
  gap: 0;
  padding-block: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.strip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline: clamp(14px, 3vw, 34px);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
html.is-ar .strip__item { letter-spacing: 0; text-transform: none; font-size: 0.88rem; }
.strip__item::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- 9. Product grid ---------- */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity var(--t);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__media--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.card:hover .card__media--alt { opacity: 1; }

.card__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.is-ar .card__badge { letter-spacing: 0; text-transform: none; font-size: 0.76rem; }

.card__view {
  position: absolute;
  inset-block-end: 12px;
  inset-inline: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  text-align: center;
  padding: 11px;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t);
}
html.is-ar .card__view { letter-spacing: 0; text-transform: none; font-size: 0.88rem; }
.card:hover .card__view, .card:focus-within .card__view { opacity: 1; transform: translateY(0); }

.card__body { padding-block: 16px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }

.card__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.card__name a:hover { color: var(--accent-deep); }

.price { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-weight: 700; }
.price__old { font-size: 0.85rem; font-weight: 500; color: var(--muted-2); text-decoration: line-through; }

.card__short { font-size: 0.9rem; color: var(--muted); }

.card__foot { margin-top: auto; padding-top: 6px; display: grid; gap: 12px; }

/* ---------- 10. Size selector ---------- */
.sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.sizes__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-end: 4px;
}
html.is-ar .sizes__label { letter-spacing: 0; text-transform: none; font-size: 0.84rem; }

.size-chip {
  min-width: 46px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.size-chip:hover { border-color: var(--ink); }
.size-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.sizes.is-missing .size-chip { border-color: var(--accent-deep); }

/* ---------- 11. Shop toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 16px;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.toolbar__count { font-size: 0.88rem; color: var(--muted); }
.toolbar__sort { display: inline-flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.toolbar__sort select {
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.88rem;
}

/* ---------- 12. About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.about__text { display: grid; gap: 18px; }
.about__quote {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
html.is-ar .about__quote { letter-spacing: 0; line-height: 1.5; }

.about__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-3); aspect-ratio: 4/3; }
.about__media img, .about__media svg { width: 100%; height: 100%; object-fit: cover; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
  margin-top: clamp(34px, 5vw, 64px);
}
.feature { padding-top: 20px; border-top: 2px solid var(--ink); display: grid; gap: 8px; }
.feature__n {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--accent-deep);
}
.feature h3 { font-size: 1.05rem; }
.feature p { font-size: 0.92rem; color: var(--muted); }

/* ---------- 13. Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t), transform 0.25s var(--ease), box-shadow var(--t);
}
.contact-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px rgba(11, 11, 12, 0.45);
}
.contact-card[aria-disabled="true"] { opacity: 0.62; }
.contact-card__icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-2);
  border-radius: 50%;
}
.contact-card__icon svg { width: 22px; height: 22px; fill: var(--ink); }
.contact-card__t { font-weight: 700; font-size: 0.98rem; }
.contact-card__s { font-size: 0.85rem; color: var(--muted); }

/* ---------- 14. Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding-block: clamp(48px, 6vw, 80px) 28px; }
.site-footer a { color: rgba(255, 255, 255, 0.72); transition: color var(--t); }
.site-footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(120px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand .brand { color: #fff; font-size: 1.1rem; }
.footer__brand p { font-size: 0.92rem; max-width: 34ch; }

.footer__col h4 {
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
html.is-ar .footer__col h4 { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 0.92rem; }

.footer__socials { display: flex; gap: 10px; margin-top: 4px; }
.footer__socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background var(--t), border-color var(--t);
}
.footer__socials a:hover { background: #fff; border-color: #fff; }
.footer__socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer__socials a:hover svg { fill: var(--ink); }

.footer__bottom {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ---------- 15. Floating WhatsApp ---------- */
.fab {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 70;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--wa);
  border-radius: 50%;
  box-shadow: 0 12px 30px -10px rgba(31, 168, 85, 0.7);
  transition: transform 0.25s var(--ease), background var(--t);
}
.fab:hover { transform: scale(1.06); background: var(--wa-dark); }
.fab svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- 16. Toast ---------- */
.toast {
  position: fixed;
  inset-block-end: 88px;
  inset-inline: 20px;
  z-index: 90;
  margin-inline: auto;
  max-width: 420px;
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-size: 0.92rem;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.toast.is-on { opacity: 1; transform: translateY(0); }

/* ---------- 17. Product page ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 20px;
  font-size: 0.84rem;
  color: var(--muted);
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span[aria-hidden] { color: var(--line-2); }

.pdp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.gallery { display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 16px); }
.gallery__main {
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery__thumb {
  width: 74px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  transition: border-color var(--t);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-pressed="true"] { border-color: var(--ink); }

.pdp__info { display: grid; gap: 22px; padding-top: 4px; }
.pdp__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.pdp__price { font-size: 1.5rem; font-weight: 700; }
.pdp__stock {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.84rem; color: var(--muted);
}
.pdp__stock::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--wa);
}
.pdp__desc { color: var(--muted); }

.field { display: grid; gap: 10px; }
.field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
html.is-ar .field__label { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.field__hint { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); width: max-content; }
.qty button {
  width: 46px; height: 46px;
  font-size: 1.2rem; font-weight: 600;
  display: grid; place-items: center;
  transition: background var(--t);
}
.qty button:hover { background: var(--bg-2); }
.qty output { min-width: 48px; text-align: center; font-weight: 700; border-inline: 1px solid var(--line-2); align-self: stretch; display: grid; place-items: center; }

.pdp__buy { display: grid; gap: 12px; padding-block: 4px; }
.pdp__total { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.95rem; }
.pdp__total strong { font-size: 1.25rem; }

.info-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.info-list div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.info-list dt { color: var(--muted); }
.info-list dd { font-weight: 600; text-align: end; }

.bullets { display: grid; gap: 10px; }
.bullets li { display: flex; gap: 10px; font-size: 0.94rem; color: var(--muted); }
.bullets li::before {
  content: ''; flex: none; margin-top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.block-title {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 14px;
}
html.is-ar .block-title { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }

.pdp__block { padding-top: 6px; }

.empty { text-align: center; padding-block: clamp(60px, 12vw, 140px); display: grid; gap: 16px; justify-items: center; }

/* ---------- 18. Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.07s; }
[data-reveal][data-delay="2"] { transition-delay: 0.14s; }
[data-reveal][data-delay="3"] { transition-delay: 0.21s; }
[data-reveal][data-delay="4"] { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 19. Responsive ---------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { padding-inline-end: 0; order: 2; padding-block: 40px 52px; }
  .hero__media {
    order: 1;
    margin-inline-end: calc(-50vw + 50%);
    margin-inline-start: calc(-50vw + 50%);
    aspect-ratio: auto;
    height: min(62vh, 520px);
  }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; max-width: 540px; margin-inline: auto; width: 100%; }
}

@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 22px;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
    box-shadow: 0 24px 40px -28px rgba(11, 11, 12, 0.5);
  }
  body.nav-open .nav { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 15px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .burger { display: block; }
  .header-actions { gap: 8px; }
}

@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .grid-products { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px 12px; }
  .card__short { display: none; }
  .card__view { display: none; }
  .card__name { font-size: 0.92rem; }
  .card__row { flex-direction: column; gap: 2px; }
  .sizes__label { display: none; }
  .size-chip { min-width: 40px; min-height: 36px; padding: 4px 9px; font-size: 0.8rem; }
  .btn { padding: 13px 18px; font-size: 0.78rem; }
  html.is-ar .btn { font-size: 0.88rem; }
  .strip__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding-block: 12px;
  }
  .strip__item { font-size: 0.68rem; padding-inline: 0; line-height: 1.45; align-items: flex-start; }
  .strip__item::before { margin-top: 7px; }
  html.is-ar .strip__item { font-size: 0.8rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .fab { width: 52px; height: 52px; inset-block-end: 16px; inset-inline-end: 16px; }
  .gallery__thumb { width: 62px; }
}

@media (min-width: 861px) {
  .header-wa { display: inline-flex; }
}

/* ---------- 20. Tables and two-column info ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.94rem; max-width: 640px; }
.table th, .table td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.table thead th {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
html.is-ar .table thead th { letter-spacing: 0; text-transform: none; font-size: 0.88rem; }
.table tbody th { font-weight: 700; color: var(--ink); font-size: 0.98rem; letter-spacing: 0; text-transform: none; }
.table tbody tr:hover { background: var(--bg-2); }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.page-head { padding-block: clamp(28px, 4vw, 52px) 0; }

/* ---------- 21. Colour swatches ---------- */
.swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 0 2px #fff;
  transition: box-shadow var(--t), border-color var(--t), transform 0.2s var(--ease);
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ink);
}

.pdp .swatch { width: 32px; height: 32px; }

@media (max-width: 640px) {
  .swatch { width: 22px; height: 22px; }
}

/* =============================================================
   22. LANDING SECTIONS
   ============================================================= */

/* --- رقائق الهيرو / hero chips --- */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 6px;
}
.hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
}
.hero__chips svg {
  width: 20px; height: 20px; flex: none;
  stroke: var(--accent-deep); fill: none;
}

/* --- الخطوات / steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: step;
  padding: 0;
  margin: 0;
}
.step {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}
.step__n {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-start: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}
.section--alt .step__n { background: var(--bg-2); }
.step p { color: var(--muted); font-size: 0.95rem; }

/* --- بطاقات القيمة / value cards --- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.value {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 26px 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t), transform 0.25s var(--ease);
}
.value:hover { border-color: var(--ink); transform: translateY(-3px); }
.value__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg);
  border-radius: 50%;
}
.value__icon svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; }
.value p { color: var(--muted); font-size: 0.93rem; }

/* --- آراء الزبناء / reviews --- */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.review {
  margin: 0;
  padding: 26px 24px;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 16px;
}
.review blockquote { margin: 0; font-size: 1rem; line-height: 1.7; }
.review blockquote::before { content: '“'; color: var(--accent); font-size: 1.6rem; line-height: 0; }
.review figcaption { font-size: 0.86rem; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.review__city { font-weight: 500; color: var(--muted); }

/* --- الأسئلة الشائعة / FAQ --- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.faq { display: grid; }
.faq__item {
  border-top: 1px solid var(--line-2);
  padding-block: 4px;
}
.faq__item:last-child { border-bottom: 1px solid var(--line-2); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 18px;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.8px solid var(--ink);
  border-bottom: 1.8px solid var(--ink);
  transform: rotate(45deg);
  margin-block-start: -4px;
  transition: transform var(--t);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-block-start: 3px; }
.faq__item summary:hover { color: var(--accent-deep); }
.faq__item p { padding-block: 0 20px; color: var(--muted); max-width: 62ch; }

/* --- شريط الدعوة الأخيرة / final CTA band --- */
.cta-band {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(44px, 6vw, 80px);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.cta-band h2 { max-width: 18ch; }
.cta-band p { color: rgba(255, 255, 255, 0.72); margin-top: 12px; max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* --- الشريط السفلي في الهاتف / mobile sticky bar --- */
.mobile-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; min-height: 48px; }
.mobile-bar .btn--wa { flex: 1.6; }

@media (max-width: 860px) {
  /* الشريط السفلي كيبان غير فالصفحات اللي فيها body.has-bar
     The sticky bar only appears on pages whose body has .has-bar */
  .has-bar .mobile-bar { display: flex; }
  .has-bar .fab { display: none; }
  .has-bar { padding-bottom: 72px; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .value { padding: 22px 20px; }
  .hero__chips { gap: 8px 16px; }
  .hero__chips li { font-size: 0.8rem; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1; }
}

/* الروابط اللي ما زال ما تضبطاتش (إنستغرام/تيك توك) / links not configured yet */
a[aria-disabled="true"] { cursor: not-allowed; }

/* ---------- 23. شعار العلامة / brand logo ---------- */
.brand__logo {
  display: block;
  height: 26px;
  width: auto;
}
.footer__brand .brand__logo { height: 62px; }
.brand--lockup { display: inline-block; }

@media (max-width: 640px) {
  .brand__logo { height: 22px; }
  .footer__brand .brand__logo { height: 52px; }
}

/* =============================================================
   24. OPTION 3 — الهوية الداكنة / the dark brand theme
   -------------------------------------------------------------
   هاد البلوك كيقلب الموقع كامل للأسود ديال العلامة.
   This block flips the whole site to the brand's black.
   كيجي فالآخر باش يتفوق على القواعد اللي فوق.
   It comes last so it overrides the rules above.
   ============================================================= */

:root {
  /* الأسطح / surfaces */
  --bg:    #0b0b0c;
  --bg-2:  #131315;
  --bg-3:  #1b1b1e;
  --line:   rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.26);

  /* النص — --ink ولّا فاتح / --ink is now the light text colour */
  --ink:    #f6f6f7;
  --ink-2:  #e6e6e8;
  --muted:  #a3a3aa;
  --muted-2:#83838b;

  /* الوردي / the pink */
  --accent:      #ea0583;
  --accent-deep: #ff3d9f;   /* أفتح للنصوص فوق الأسود / lighter, for text on black */
  --accent-soft: rgba(234, 5, 131, 0.14);

  --hero-bg: #0b0b0c;
  --radius-lg: 12px;
}

html { color-scheme: dark; }

body {
  background-color: var(--bg);
  background-image: url('../img/brand/texture.webp');
  background-repeat: repeat;
  background-size: 460px auto;
  background-blend-mode: screen;
}

/* ---------- الأزرار / buttons ---------- */
.btn { --btn-bg: var(--ink); --btn-fg: #0b0b0c; }
.btn--light { --btn-bg: #ffffff; --btn-fg: #0b0b0c; }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #0b0b0c; }

/* زر الطلب = وردي العلامة / the order button is the brand pink */
.btn--wa { --btn-bg: var(--accent); --btn-fg: #ffffff; border-color: var(--accent); }
.btn--wa:hover { --btn-bg: #ff1f93; border-color: #ff1f93; }

.lang-btn:hover { background: var(--ink); color: #0b0b0c; }

/* ---------- الهيدر / header ---------- */
.site-header { background: rgba(11, 11, 12, 0.82); }
.site-header.is-stuck { border-bottom-color: var(--line); }

@media (max-width: 860px) {
  .nav { background: #0b0b0c; box-shadow: 0 24px 40px -22px #000; }
}

/* ---------- الواجهة / hero ---------- */
.hero { background: var(--bg); border-bottom-color: var(--line); }
.hero__media { background: var(--bg-2); }
/* الصورة فاتحة والصفحة كحلة — كندمجوها بتدرّج
   the photo is light and the page is black, so we fade it in */
.hero__media::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 26%;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.hero__tag { background: rgba(255, 255, 255, 0.94); color: #0b0b0c; }

/* ---------- شريط الثقة / trust strip ---------- */
.strip {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  color: var(--ink);
}
.strip__item { color: var(--muted); }

/* ---------- بطاقات المنتجات / product cards ---------- */
.card__media { background: var(--bg-2); border: 1px solid var(--line); }
.card__badge { background: #ffffff; color: #0b0b0c; }
.card__view { background: rgba(255, 255, 255, 0.95); color: #0b0b0c; }
.card__name a:hover { color: var(--accent-deep); }
.price__old { color: var(--muted-2); }

/* ---------- المقاسات والألوان / sizes and swatches ---------- */
.size-chip { border-color: var(--line-2); }
.size-chip:hover { border-color: var(--ink); }
.size-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #0b0b0c; }
.sizes.is-missing .size-chip { border-color: var(--accent-deep); }
.swatch { box-shadow: inset 0 0 0 2px #0b0b0c; border-color: var(--line-2); }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px #0b0b0c, 0 0 0 1px var(--ink); }

/* ---------- عناصر متفرقة / assorted ---------- */
.toolbar__sort select { background: var(--bg-2); color: var(--ink); border-color: var(--line-2); }
.contact-card { background: var(--bg-2); }
.contact-card:hover { border-color: var(--ink); box-shadow: none; }
.contact-card__icon { background: var(--bg-3); }
.contact-card__icon svg { fill: var(--ink); }
.value { background: var(--bg-2); }
.value__icon { background: var(--bg-3); }
.value__icon svg { stroke: var(--ink); }
.review { background: var(--bg-2); }
.gallery__main, .gallery__thumb { background: var(--bg-2); border-color: var(--line); }
.gallery__thumb[aria-pressed="true"] { border-color: var(--ink); }
.qty { border-color: var(--line-2); }
.qty button:hover { background: var(--bg-2); }
.qty output { border-color: var(--line-2); }
.table tbody tr:hover { background: var(--bg-2); }
.section--alt { background: var(--bg-2); }
.step__n { background: var(--bg); border-color: var(--ink); }
.section--alt .step__n { background: var(--bg-2); }
.toast { background: #ffffff; color: #0b0b0c; }
:focus-visible { outline-color: var(--accent-deep); }

/* ---------- الدعوة الأخيرة = اللحظة البيضا / the CTA band is the bright moment ---------- */
.cta-band { background: #ffffff; color: #0b0b0c; }
.cta-band h2 { color: #0b0b0c; }
.cta-band p { color: #4a4a50; }
.cta-band .btn--light { --btn-bg: #0b0b0c; --btn-fg: #ffffff; border-color: #0b0b0c; }
.cta-band .btn--light:hover { background: var(--accent); border-color: var(--accent); }
.btn--outline-light { --btn-fg: #0b0b0c; border-color: rgba(11, 11, 12, 0.3); }
.btn--outline-light:hover { background: #0b0b0c; border-color: #0b0b0c; color: #fff; }

/* ---------- الفوتر / footer ---------- */
.site-footer { background: #08080a; border-top: 1px solid var(--line); }
.footer__socials a:hover svg { fill: #0b0b0c; }

/* ---------- واتساب العائم والشريط السفلي / floating + sticky bar ---------- */
.fab { background: var(--accent); box-shadow: 0 12px 30px -10px rgba(234, 5, 131, 0.65); }
.fab:hover { background: #ff1f93; }
.mobile-bar { background: rgba(11, 11, 12, 0.92); border-top-color: var(--line); }

/* ---------- تفاصيل العلامة / brand details ---------- */
.eyebrow { color: var(--accent-deep); }
.feature__n { color: var(--accent-deep); }
.strip__item::before, .bullets li::before { background: var(--accent); }
.brand__dot { background: var(--accent); }

/* الخطوط المائلة ديال البوستر / the slashes from the poster */
.slashes {
  display: inline-flex;
  gap: 4px;
  transform: skewX(-18deg);
}
.slashes i { width: 4px; height: 15px; background: var(--accent); display: block; }

/* بطاقة صغيرة بحال اللي فأركان البوستر / the corner labels from the poster */
.tag-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag-line::before { content: ''; width: 26px; height: 2px; background: var(--accent); }
html.is-ar .tag-line { letter-spacing: 0.08em; font-size: 0.78rem; }

/* ---------- الوردي ديال الأزرار / pink for button surfaces ----------
   الوردي ديال العلامة #ea0583 كيعطي 4.34:1 مع الأبيض — ناقص شوية على
   المعيار 4.5:1 ديال نص الأزرار. هاد النسخة الأعمق كتعطي 5.3:1
   وكتبقى نفس اللون فالعين. الوردي الأصلي كيبقى فالتفاصيل.
   The brand pink gives 4.34:1 against white, just under the 4.5:1
   needed for button text. This deeper shade gives 5.3:1 and still
   reads as the same colour. The original pink stays in the details. */
:root { --accent-btn: #d10475; }

.btn--wa { --btn-bg: var(--accent-btn); border-color: var(--accent-btn); }
.btn--wa:hover { --btn-bg: #b3045f; border-color: #b3045f; }
.fab { background: var(--accent-btn); box-shadow: 0 12px 30px -10px rgba(209, 4, 117, 0.6); }
.fab:hover { background: #b3045f; }

/* =============================================================
   25. مساحات اللمس والأزرار / touch targets and buttons
   -------------------------------------------------------------
   كل شي كيتنقر عليه خاصو يكون 44×44 بكسل على الأقل، حتى إلا
   كان الشكل ديالو صغير. هادشي كيحيّد النقرات الغالطة فالهاتف.
   Everything tappable gets at least a 44x44 px hit area, even
   when it looks smaller. This is what stops mis-taps on phones.
   ============================================================= */

/* --- المقاسات / size chips --- */
.size-chip {
  min-width: 46px;
  min-height: 44px;
  padding: 8px 12px;
  touch-action: manipulation;
}
.size-chip:active { transform: scale(0.96); }

/* --- الألوان: الدائرة صغيرة ولكن مساحة النقر كاملة --- */
/* --- swatches: small dot, full-size hit area --- */
.swatch { position: relative; touch-action: manipulation; }
.swatch::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.swatches { gap: 14px; }

/* --- أزرار الهيدر / header controls --- */
.lang-btn { min-height: 44px; padding-inline: 16px; touch-action: manipulation; }
.burger { width: 46px; height: 46px; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- الأزرار: ردّ فعل واضح عند الضغط / clear press feedback --- */
.btn, .size-chip, .swatch, .lang-btn, .burger, .qty button, .gallery__thumb {
  -webkit-tap-highlight-color: transparent;
}
.btn { touch-action: manipulation; }
.btn:active { transform: scale(0.985) translateY(0); }
.gallery__thumb { min-width: 62px; min-height: 44px; }
.qty button { width: 48px; height: 48px; touch-action: manipulation; }
.faq__item summary { min-height: 56px; }

/* --- حلقة التركيز واضحة على الأسود / visible focus ring on black --- */
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .size-chip { min-width: 44px; min-height: 44px; padding: 8px 10px; font-size: 0.84rem; }
  .swatch { width: 24px; height: 24px; }
  .swatch::after { inset: -10px; }
  .swatches { gap: 16px; }
  .btn { min-height: 48px; }
  .mobile-bar .btn { min-height: 50px; }
}

/* =============================================================
   26. السرعة / speed
   الأقسام اللي تحت الشاشة ما كيرسمهاش المتصفح حتى توصل ليهم.
   The browser skips rendering off-screen sections until you
   scroll to them. contain-intrinsic-size reserves their height
   so nothing jumps.
   ============================================================= */
#steps, #faq, #reviews, .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* الصور كتحجز بلاصتها قبل ما تتحمّل / images reserve their space */
.card__media img, .gallery__main img { background: var(--bg-2); }

/* الهيدر ثابت فوق، فخاص الأقسام تحجز مساحة باش العنوان ما يتخباش تحتو
   The header is sticky, so anchor targets reserve room for it */
section[id], div[id], main[id] { scroll-margin-top: calc(var(--header-h) + 14px); }