/* ==========================================================================
   Arabshop — الهيدر والتنقّل والفوتر
   الهيدر ثلاث طبقات: شريط علوي، شريط رئيسي (شعار/بحث/إجراءات)، شريط الفئات.
   ========================================================================== */

/* ══ الشريط العلوي ═════════════════════════════════════════════════════ */

.topbar {
  background: var(--topbar-bg);
  color: color-mix(in srgb, var(--topbar-text) 86%, transparent);
  font-size: var(--text-xs);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-top);
}

.topbar__items { display: flex; align-items: center; gap: var(--space-4); min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.topbar__items::-webkit-scrollbar { display: none; }
/* phones: one compact line that scrolls sideways; the email (long) from 768px */
.topbar__item { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; color: inherit; }
.topbar__item .icon { color: var(--brand-300); }
a.topbar__item:hover { text-decoration: underline; }
/* phones: the two first facts only (delivery, payment), so nothing is cut at the edge */
@media (max-width: 639.98px) { .topbar__items > :nth-child(n+3) { display: none; } .topbar__items { justify-content: center; flex: 1; } }
.topbar__item--wide { display: none; }
@media (min-width: 1024px) { .topbar__item--wide { display: inline-flex; } }
/* tablets: three facts beside the links */
@media (min-width: 640px) and (max-width: 1023.98px) { .topbar__items > :nth-child(n+4) { display: none; } }
.topbar__item.is-fit-hidden { display: none; } /* theme.js: an item that would be cut */

.topbar__links { display: none; align-items: center; gap: 0.25rem; }

.topbar__link {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-xs);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.topbar__link:hover { background: color-mix(in srgb, var(--topbar-text) 12%, transparent); color: var(--topbar-text); }

.topbar__sep { width: 1px; height: 0.875rem; background: color-mix(in srgb, var(--topbar-text) 22%, transparent); margin-inline: 0.25rem; }

@media (min-width: 768px) { .topbar__links { display: flex; } }
/* a top bar with links but no note has nothing to show on phones */
.topbar--links-only { display: none; }
@media (min-width: 768px) { .topbar--links-only { display: block; } }

/* ══ الشريط الرئيسي ════════════════════════════════════════════════════ */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: 0 1px 0 var(--border);
}

.header.is-stuck { box-shadow: var(--shadow-md); }

.header__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-main);
}

.header__brand { display: flex; align-items: center; flex-shrink: 0; }

.header__burger { display: inline-flex; }
@media (min-width: 1024px) { .header__burger { display: none; } }

/* البحث */
.search { position: relative; flex: 1; min-width: 0; max-width: 44rem; display: none; } /* shrinks: never pushes the cart off a tablet */
@media (min-width: 768px) { .search { display: block; } }

.search__form {
  display: flex;
  align-items: center;
  height: 2.875rem;
  border-radius: var(--r-md);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.search__form:focus-within { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand-500), 0 0 0 4px var(--brand-50); }

.search__input { flex: 1; min-width: 0; height: 100%; padding-inline: 0.875rem; font-size: var(--text-base); background: none; }
.search__input::placeholder { color: var(--ink-400); }
/* the form's own ring (focus-within) is the focus indicator: no second outline on the field inside it */
.search__input:focus, .search__input:focus-visible { outline: none; box-shadow: none; }
.search__input::-webkit-search-decoration, .search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.search__submit {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.25rem;
  margin-inline-end: 0.3125rem;
  border-radius: var(--r-sm);
  background: var(--brand-600);
  color: var(--on-primary);
  transition: background-color var(--t-fast) var(--ease);
}
.search__submit:hover { background: var(--brand-700); }

/* لوحة اقتراحات البحث */
.search__panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.5rem);
  z-index: var(--z-sticky);
  max-height: 26rem;
  overflow-y: auto;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border);
  padding: 0.375rem;
}

.search__group-label {
  padding: 0.625rem 0.75rem 0.375rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ink-400);
}

.search__result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  text-align: start;
  transition: background-color var(--t-fast) var(--ease);
}
.search__result:hover, .search__result:focus-visible { background: var(--surface-muted); }
.search__result img { width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.search__result-title { font-size: var(--text-sm); font-weight: 600; }
.search__result-meta { font-size: var(--text-2xs); color: var(--ink-400); }
.search__result-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.search__result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__result[aria-selected="true"] { background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--brand-500); }
.search__result mark { background: var(--brand-50); color: inherit; border-radius: 2px; }
.search__result-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; font-size: var(--text-xs); font-weight: 700; color: var(--ink-700); }
.search__result-price s { font-weight: 400; color: var(--ink-400); }
.search__result-badge { font-weight: 600; color: var(--ink-400); }
.search__result--all { justify-content: space-between; margin-block-start: 0.25rem; border-block-start: 1px solid var(--border); border-radius: 0; color: var(--brand-600); }
.search__empty { padding: 0.75rem; font-size: var(--text-sm); color: var(--ink-400); }
.search__panel[aria-busy="true"] { opacity: 0.7; }
.search-drawer { position: relative; }
.search__panel--inline { position: static; max-height: none; margin-block-end: 1rem; box-shadow: inset 0 0 0 1px var(--border); }

.header__actions { display: flex; align-items: center; gap: 0.125rem; margin-inline-start: auto; }

.header__action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-width: 3.25rem;
  height: 3.25rem;
  padding-inline: 0.375rem;
  border-radius: var(--r-md);
  color: var(--ink-700);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.header__action:hover { background: var(--surface-muted); color: var(--brand-600); }
.header__action-label { display: none; font-size: var(--text-2xs); font-weight: 600; }

@media (min-width: 1024px) { .header__action-label { display: block; } }
/* Phones: slimmer buttons, and the wishlist lives in the bottom tab bar. The logo gives way to the buttons: an image
   logo shrinks, a long store name ends in «…», so the header never scrolls the page sideways. */
@media (max-width: 639px) {
  .header__actions { gap: 0; }
  .header__action { min-width: 2.5rem; padding-inline: 0.25rem; }
  .header__action--wishlist { display: none; }
  .header__brand { flex-shrink: 1; min-width: 0; }
  .header__brand .logo { min-width: 0; max-width: 100%; }
  .header__brand .logo__img { max-width: 100%; }
  .header__brand .logo__word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Narrow phones (320–399px): the account lives in the tab bar (when it shows) and the row is tighter */
@media (max-width: 399px) {
  .page:not(.page--no-tabbar) .header__action--account { display: none; }
  .header__main { gap: var(--space-2); }
}

/* ══ شريط الفئات ═══════════════════════════════════════════════════════ */

.catbar { display: none; overflow-x: clip; background: var(--header-bg); box-shadow: 0 1px 0 var(--border); } /* a drop-down never widens the page */
@media (min-width: 1024px) { .catbar { display: block; } }

.catbar__inner { display: flex; align-items: center; gap: 0.125rem; min-height: var(--header-nav); }

.catbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.catbar__link:hover { background: var(--brand-50); color: var(--brand-700); }
.catbar__link.is-active { color: var(--brand-700); background: var(--brand-50); }

/* أيقونة رابط القائمة أو صورته الصغيرة (UI/menu-icon) */
.menu-icon { flex: none; }
.menu-icon--img, .mobile-nav__link img.menu-icon--img { display: block; width: var(--mi, 18px); height: var(--mi, 18px); border-radius: var(--r-xs); object-fit: cover; }
.footer__link .menu-icon { margin-block-start: 0.1875rem; }

.catbar__link--offers { color: var(--gold-700); font-weight: 700; }
.catbar__link--offers:hover { background: var(--gold-50); color: var(--gold-700); }

.catbar__item { position: relative; }

/* قائمة ضخمة (Mega menu) */
.megamenu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 12.5rem minmax(15rem, auto);
  gap: 0;
  width: max-content;
  max-width: min(40rem, calc(100vw - 2rem)); /* room for link icons (UI/menu-icon) */
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.375rem;
  transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease), visibility var(--t-fast);
}

.megamenu--links-only { grid-template-columns: minmax(15rem, auto); } /* header setting: panel hidden, or no picture */
.megamenu--flip { inset-inline-start: auto; inset-inline-end: 0; } /* near the far end: open from the other edge (theme.js) */

.catbar__item:hover .megamenu,
.catbar__item:focus-within .megamenu { opacity: 1; visibility: visible; translate: 0 0; }

/* لوحة الصورة */
.megamenu__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.megamenu__visual-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--brand-900) 92%, transparent) 0%, color-mix(in srgb, var(--brand-900) 55%, transparent) 55%, color-mix(in srgb, var(--brand-900) 8%, transparent) 100%);
  z-index: 0;
}
.megamenu__visual-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-4);
  color: var(--on-media);
}
.megamenu__visual-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; }
.megamenu__visual-blurb {
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: color-mix(in srgb, var(--on-media) 82%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.megamenu__visual-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 0.375rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--gold-300);
  transition: gap var(--t-fast) var(--ease);
}
.megamenu__visual:hover .megamenu__visual-cta { gap: 0.5rem; }

/* عمود الروابط */
.megamenu__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(8rem, 1fr));
  gap: 0.125rem 0.75rem;
  align-content: start;
  padding: var(--space-3);
}

.megamenu__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--ink-600);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.megamenu__link:hover { background: var(--surface-muted); color: var(--brand-700); }
/* السهم بالـ CSS لا بـ SVG لكل رابط: القائمة الكبيرة تبقى خفيفة (عشرات الروابط) */
.megamenu__link::before {
  content: ""; flex: none; width: 0.4em; height: 0.4em;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; /* زاوية فيزيائية تُدار بالدوران: ‹ في العربية و› في الإنجليزية */
  rotate: 45deg; opacity: 0; translate: 0.25rem 0;
  transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease);
}
.megamenu__link:hover::before { opacity: 1; translate: 0 0; }
[dir="ltr"] .megamenu__link::before { rotate: -135deg; translate: -0.25rem 0; }
[dir="ltr"] .megamenu__link:hover::before { translate: 0 0; }

/* ══ شريط الخدمات ══════════════════════════════════════════════════════ */

.services {
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
/* the trust-badges section between page sections: a line on both sides and a little air */
.services--section { border-block-start: 1px solid var(--border); margin-block: var(--space-2); }

/* two per row under 1024px (no badge cut at the screen edge), four per row above */
.services__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  padding-block: 0.875rem;
}

@media (min-width: 1024px) {
  .services__inner { grid-template-columns: repeat(4, 1fr); }
}

.service {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 0.625rem;
  font-size: var(--text-sm);
}
.service .icon { color: var(--brand-500); }
.service__title { font-weight: 700; color: var(--ink-800); }
.service__note { display: block; font-size: var(--text-2xs); color: var(--ink-400); font-weight: 500; }

/* ══ قائمة الجوال ══════════════════════════════════════════════════════ */

.mobile-nav__group + .mobile-nav__group { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.mobile-nav__label { padding: 0 0.25rem 0.5rem; font-size: var(--text-2xs); font-weight: 700; color: var(--ink-400); }

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-800);
  transition: background-color var(--t-fast) var(--ease);
}
.mobile-nav__link:hover { background: var(--surface-muted); }
.mobile-nav__link .icon { color: var(--ink-400); }
.mobile-nav__link img { width: 2rem; height: 2rem; border-radius: var(--r-xs); object-fit: cover; }
.mobile-nav__link .chev { margin-inline-start: auto; color: var(--ink-300); }

.mobile-nav__trigger { width: 100%; text-align: start; background: none; border: none; cursor: pointer; }
.mobile-nav__caret { transition: rotate var(--t-base) var(--ease); }
.mobile-nav__trigger[aria-expanded="true"] { color: var(--brand-700); }
.mobile-nav__trigger[aria-expanded="true"] .mobile-nav__caret { rotate: 180deg; color: var(--brand-600); }

.mobile-nav__panel { display: flex; flex-direction: column; padding: 0.125rem 0 0.5rem 0; }
.mobile-nav__sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.625rem;
  padding-inline: 3.25rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-600);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mobile-nav__sublink:hover { background: var(--surface-muted); color: var(--brand-700); }
.mobile-nav__sublink--all {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-inline-start: 3.25rem;
  font-weight: 700;
  color: var(--brand-600);
}

/* ══ شريط الجوال السفلي ════════════════════════════════════════════════ */

.tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--border), 0 -8px 24px color-mix(in srgb, var(--shadow-color) 6%, transparent);
  padding-block-end: env(safe-area-inset-bottom);
}

@media (min-width: 1024px) { .tabbar { display: none; } }

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding-block: 0.5rem;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--ink-400);
  transition: color var(--t-fast) var(--ease);
}
.tabbar__item.is-active { color: var(--brand-600); }
/* Narrow phones: each tab as wide as its label, so «تسجيل الدخول» stays on one line */
@media (max-width: 399px) {
  .tabbar { grid-auto-columns: auto; }
  .tabbar__item { white-space: nowrap; }
}
.tabbar__item .count-dot { inset-block-start: 0.125rem; inset-inline-end: 1.1rem; }

/* مساحة للشريط السفلي على الجوال */
@media (max-width: 1023px) { .page__main { padding-block-end: 4.5rem; } .page--no-tabbar .page__main { padding-block-end: 0; } }

/* ══ الفوتر ════════════════════════════════════════════════════════════ */

/* الفوتر يأخذ نمط ألوانه من إعداداته (الداكن افتراضياً): خلفيته ونصوصه من النمط، فيبقى مقروءاً في الوضع الداكن */
.footer { background: var(--bg); color: var(--ink-600); }

.footer__top { display: grid; padding-block: var(--space-12); }

/* Phones: the brand on its own row, link columns two by two (contact and newsletter columns full width: long emails);
   tablets: three columns; desktop: the brand plus one track per rendered column (--footer-cols from the section).
   (The old repeat(auto-fit) beside an fr track was invalid CSS, so desktop fell back to two long columns.) */
.footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-8); }
.footer__brand { grid-column: 1 / -1; }
.footer__col--wide { grid-column: 1 / -1; }
@media (min-width: 768px)  { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__col--wide { grid-column: auto; } }
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: minmax(0, 1.6fr) repeat(var(--footer-cols, 4), minmax(auto, 1fr)); gap: var(--space-6); }
  .footer__brand { grid-column: auto; }
  /* The contact column is as wide as its email / phone (never split mid-word); the other columns share the rest. */
  .footer__col--wide { min-width: auto; }
  .footer__col--wide .footer__link { overflow-wrap: normal; }
}
.footer__col { min-width: 0; }

.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__brand-link { align-self: flex-start; }
.footer__about { font-size: var(--text-sm); line-height: var(--leading-normal); max-width: 26rem; }

.footer__socials { display: flex; gap: 0.5rem; }
.footer__social {
  display: flex; align-items: center; justify-content: center;
  width: 2.375rem; height: 2.375rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-700);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__social:hover { background: var(--brand-600); color: var(--on-primary); }

.footer__col-title {
  margin-block-end: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--ink-900);
}

.footer__links { display: flex; flex-direction: column; gap: 0.75rem; }
/* long titles wrap cleanly (no overflow at 360px); icons stay beside the first line */
.footer__link { display: inline-flex; align-items: flex-start; gap: 0.5rem; font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease); }
.footer__link .icon { flex: none; margin-block-start: 0.2em; }
.footer__link:hover { color: var(--ink-900); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--text-xs);
}

@media (min-width: 768px) { .footer__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } }
.footer__bottom > p { text-align: center; }

.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; }
.footer__legal a:hover { color: var(--ink-900); }

.pay-methods { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.pay-methods__item {
  display: inline-block; /* a block box, so a long name ends in … */
  max-width: 11rem; height: 1.75rem; line-height: 1.75rem; padding-inline: 0.5rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink-900);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pay-methods__item--logo { display: inline-flex; align-items: center; padding-inline: 0.375rem; }
.pay-methods__item--logo img { display: block; width: auto; height: 1.25rem; max-width: 4.5rem; object-fit: contain; }

/* زر العودة للأعلى */
.to-top {
  position: fixed;
  inset-block-end: 5.5rem;
  inset-inline-start: var(--space-5);
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-full);
  background: var(--brand-600);
  color: var(--on-primary);
  box-shadow: var(--shadow-brand);
  opacity: 0;
  visibility: hidden;
  translate: 0 0.75rem;
  transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease), visibility var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
@media (min-width: 1024px) { .to-top { inset-block-end: var(--space-6); } }

/* ── الشعار ───────────────────────────────────────────────────────────── */

.logo { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--brand-600); }
.logo__mark { flex-shrink: 0; }
/* The store's logo (snippets/UI/store-logo): the theme's logo height, width from its own shape, capped for very wide
   logos; the menu drawer uses the phone height. The dark-mode picture (logo for dark backgrounds) swaps in. */
.logo__img { display: block; flex-shrink: 0; width: auto; height: var(--logo-h-mobile); max-width: min(10rem, 42vw); object-fit: contain; }
@media (min-width: 1024px) { .logo__img { height: var(--logo-h); max-width: 14rem; } }
.drawer .logo__img { height: var(--logo-h-mobile); max-width: 10rem; }
.logo__img--dark { display: none; }
:root[data-mode="dark"] .logo__img--has-dark { display: none; }
:root[data-mode="dark"] .logo__img--dark { display: block; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ink-900);
}
.logo--light { color: color-mix(in srgb, var(--on-media) 20%, transparent); }
.logo--light .logo__word { color: var(--on-media); }

/* عناصر تظهر على الجوال فقط (زر البحث في الهيدر) */
[data-mobile-only] { display: flex; }
@media (min-width: 768px) { [data-mobile-only] { display: none !important; } }

/* ── مبدّل اللغة: العربية أولاً ───────────────────────────────────────── */
.lang-switch { display: inline-flex; align-items: center; gap: 0.25rem; }
.lang-switch__item { padding: 0.125rem 0.5rem; border-radius: var(--r-full); color: inherit; font-size: var(--text-xs); }
.lang-switch__item:hover { background: var(--surface-muted); }
.lang-switch__item[aria-current="true"] { background: var(--brand-50, var(--surface-muted)); color: var(--brand-700); font-weight: 700; }
.mobile-nav__lang { padding: 0.75rem 1rem; gap: 0.5rem; }
.mobile-nav__lang .lang-switch__item { font-size: var(--text-sm); padding: 0.375rem 0.875rem; box-shadow: inset 0 0 0 1px var(--border); }

/* ── شريط الإعلان: نص قصير بلون النمط المختار ──────────────────────────── */
.announce { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.5rem 2.5rem; font-size: var(--text-sm); font-weight: 600; text-align: center; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.announce .x { position: absolute; inset-inline-end: var(--space-3); inset-block: 0; margin-block: auto; height: 1.75rem; width: 1.75rem; border-radius: var(--r-full); color: inherit; opacity: 0.8; }
.announce .x:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.logo__bars { fill: var(--on-primary); }

/* ── القسم الحالي في القوائم ── */
.megamenu__link.is-active { color: var(--brand-700); background: var(--brand-50); font-weight: 700; }
.mobile-nav__link.is-active, .mobile-nav__sublink.is-active { color: var(--brand-700); font-weight: 700; }
.header--static { position: relative; }
.footer__text { font-size: var(--text-sm); line-height: var(--leading-normal); }
.footer__newsletter { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Header row: language and dark mode (always reachable, phones included) ── */
.header__lang-short { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; font-weight: 800; font-size: var(--text-sm); }
@media (min-width: 1024px) { .header__lang .header__lang-short { font-size: var(--text-xs); } }
.theme-toggle__light { display: none; }
:root[data-mode="dark"] .theme-toggle__light { display: inline-flex; }
:root[data-mode="dark"] .theme-toggle__dark { display: none; }

/* ══ Sticky order bar (page setting sticky_cta; phones only) ═════════════════════════════════════════════════════ */
.sticky-cta { display: none; }
@media (max-width: 899px) {
  .sticky-cta {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
    background: var(--surface); box-shadow: 0 -1px 0 var(--border), 0 -8px 24px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  }
  .page:not(.page--no-tabbar) .sticky-cta { inset-block-end: 4.5rem; padding-block-end: 0.625rem; }
  .sticky-cta.is-away { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .sticky-cta__info { min-width: 0; }
  .sticky-cta__price { display: flex; align-items: baseline; gap: 0.375rem; font-size: var(--text-lg); }
  .sticky-cta__info .pdp__vat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line: the bar never outgrows the page's bottom padding */
  .sticky-cta__btn { flex: none; }
  .page--sticky-cta .page__main { padding-block-end: 5rem; }
  .page--sticky-cta:not(.page--no-tabbar) .page__main { padding-block-end: 9.5rem; }
}
#buy { scroll-margin-top: var(--space-4); }
.offer-countdown__btn { margin-block-start: var(--space-2); }

/* ══ Page settings: back to the store, floating WhatsApp, reveal on scroll ══════════════════════════════════════ */
.back-to-store { padding: var(--space-6) var(--gutter); text-align: center; font-size: var(--text-sm); }
.back-to-store a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); }
.back-to-store a:hover { color: var(--ink); }
.wa-float {
  position: fixed; z-index: var(--z-sticky); inset-inline-start: 1rem; inset-block-end: calc(1rem + env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--success); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-color) 25%, transparent);
}
@media (max-width: 899px) {
  .page--sticky-cta .wa-float, .page:not(.page--no-tabbar) .wa-float { inset-block-end: calc(5.5rem + env(safe-area-inset-bottom)); }
  .page--sticky-cta:not(.page--no-tabbar) .wa-float { inset-block-end: calc(10rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .page--reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .page--reveal .reveal.is-in { opacity: 1; transform: none; }
}

/* the WhatsApp bubble steps aside while the shopper types (a field has focus), so it never covers the keyboard area */
.page.is-typing .wa-float { opacity: 0; pointer-events: none; }