/* ═══════════════════════════════════════════════════
   SPARKY DOLL · PLUM & PETAL EDITORIAL · SITE STYLES
   Shared design tokens, header, footer & primitives.
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #f1f1f1;
  --surface: #ffffff;
  --surface-warm: #f9f2f2;
  --surface-container: #f3ecec;
  --surface-container-high: #ede7e7;
  --ink: #1d1b1b;
  --ink-soft: #4e4447;
  --ink-mute: #807477;
  --outline: rgba(40, 22, 29, 0.10);
  --outline-strong: rgba(40, 22, 29, 0.22);

  --plum: #28161d;
  --plum-deep: #14080c;
  --rose: #a5345c;
  --rose-deep: #760b39;
  --rose-soft: #ffb1c4;
  --rose-tint: #fbdae3;
  --pixie-gold: #c9973a;

  --font-ar: 'Noto Kufi Arabic', system-ui, sans-serif;
  --font-display: 'Newsreader', 'Noto Kufi Arabic', serif;
  --font-ui: 'Plus Jakarta Sans', 'Noto Kufi Arabic', sans-serif;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  --pad-page: clamp(20px, 5vw, 80px);
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ar);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

[lang="en"], [lang="en"] body, [lang="en"] .ar { font-family: var(--font-ui); line-height: 1.55; }
[lang="en"] .h-display, [lang="en"] .h-section, [lang="en"] .info__title, [lang="en"] .hero__title, [lang="en"] .success__title, [lang="en"] .logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
[lang="en"] .h-display .em, [lang="en"] .hero__title .em, [lang="en"] .info__title .em, [lang="en"] .success__title .em {
  font-style: italic; font-weight: 500;
}

[lang="ar"], .ar { font-family: var(--font-ar); line-height: 1.7; font-feature-settings: "ss01" on; }

/* ─── HEADER ─── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-page);
  background: rgba(241, 241, 241, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--outline);
  transition: box-shadow .3s;
}
.header__left, .header__right { display: flex; align-items: center; gap: 18px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 48px; width: 48px; object-fit: contain; }
.logo__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--plum);
}
.nav { display: flex; gap: 36px; }
.nav a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color .25s;
}
.nav a::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 1px; background: var(--rose);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s ease;
}
.nav a:hover { color: var(--plum); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--plum); }

.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--outline-strong);
  border-radius: var(--r-pill); padding: 4px;
  background: var(--surface);
}
.lang button {
  padding: 6px 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: all .25s;
  font-family: var(--font-ui);
}
.lang button.is-on { background: var(--plum); color: #fff; }
.lang button.ar-btn { font-family: var(--font-ar); letter-spacing: 0; }

.cart {
  position: relative;
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--outline-strong);
  background: var(--surface);
  transition: all .25s;
}
.cart:hover { border-color: var(--plum); }
.cart svg { width: 18px; height: 18px; stroke: var(--plum); }
.cart__badge {
  position: absolute; top: -4px; left: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px;
  background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

@media (max-width: 880px) {
  .nav { display: none; }
  .logo__word { display: none; }
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 38px;
  border-radius: var(--r-pill);
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 17px;
  transition: all .3s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--rose {
  background: var(--rose); color: #fff;
  box-shadow: 0 14px 40px -16px rgba(165,52,92,0.7);
}
.btn--rose:hover {
  background: var(--rose-deep);
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -16px rgba(165,52,92,0.85);
}
.btn--ghost {
  background: transparent; color: var(--plum);
  border-color: var(--plum);
}
.btn--ghost:hover { background: var(--plum); color: #fff; }
.btn--plum { background: var(--plum); color: #fff; }
.btn--plum:hover { background: var(--plum-deep); }
.btn .arr {
  width: 18px; height: 18px;
  transition: transform .3s;
}
.btn:hover .arr { transform: translateX(-4px); }

/* ─── TYPE & SECTION ─── */
.wrap { max-width: var(--container); margin: 0 auto; width: 100%; }
.section { padding: clamp(56px, 7.5vw, 104px) var(--pad-page); }
.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rose);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--rose);
}
.h-display {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--plum);
  margin: 0;
}
.h-display .em {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  color: var(--rose);
}
.h-section {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.3;
  color: var(--plum);
  margin: 0;
}
.lede {
  font-family: var(--font-ar);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 480px;
}

/* ─── PRODUCT CARD ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--outline-strong);
  box-shadow: 0 24px 48px -28px rgba(40, 22, 29, 0.28);
}
.card__link { display: contents; color: inherit; }
.card__img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: #1a0c11;
}
.card__img .photo {
  transition: transform .8s ease;
}
/* Any .photo placeholder fills its absolutely-positioned frame */
.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.card:hover .photo { transform: scale(1.04); }
.card__chip {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--surface); color: var(--rose);
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.card__chip--plum { background: var(--plum); color: #fff; }
.card__body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.card__name {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 18px;
  color: var(--plum);
  margin: 0; line-height: 1.4;
}
.card__sub {
  font-family: var(--font-ar);
  font-size: 13px; color: var(--ink-soft);
  margin: 0; line-height: 1.6;
}
.card__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--outline);
}
.price {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 17px; color: var(--plum);
  letter-spacing: -0.01em;
}
.price__cur {
  font-size: 11px; color: var(--ink-mute);
  margin-inline-start: 4px;
  letter-spacing: 0.1em; font-weight: 600;
}
.card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--plum); color: #fff;
  padding: 10px 18px;
  font-family: var(--font-ar);
  font-weight: 600; font-size: 13px;
  border-radius: var(--r-pill);
  transition: background .25s;
  border: 0;
}
.card__cta:hover { background: var(--rose); }
.card__cta svg { width: 14px; height: 14px; }

/* Photo treatment placeholders */
.photo--serum     { background: radial-gradient(120% 80% at 50% 35%, #c89464 0%, #4a1f12 38%, #1a0508 75%); }
.photo--lip       { background: radial-gradient(120% 80% at 60% 40%, #d9627a 0%, #4a0a22 38%, #160206 78%); }
.photo--palette   { background: radial-gradient(120% 80% at 50% 30%, #b67a8a 0%, #2c0e16 40%, #0d0407 78%); }
.photo--blush     { background: radial-gradient(120% 80% at 45% 40%, #e4a5b3 0%, #5b1e30 40%, #160a10 78%); }
.photo--mascara   { background: radial-gradient(120% 80% at 50% 35%, #6b5470 0%, #1a0e1f 40%, #050208 78%); }
.photo--liner     { background: radial-gradient(120% 80% at 50% 35%, #8c6a5a 0%, #2a1410 40%, #0a0406 78%); }
.photo--highlight { background: radial-gradient(120% 80% at 50% 30%, #f0d2a5 0%, #5a3a28 40%, #1a0c08 78%); }
.photo--foundation{ background: radial-gradient(120% 80% at 50% 35%, #d8a888 0%, #5a3018 40%, #1a0a05 78%); }
.photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── FOOTER ─── */
.footer {
  background: var(--plum);
  color: rgba(255,255,255,0.78);
  padding: clamp(56px, 7vw, 96px) var(--pad-page) 32px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: ""; position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(165,52,92,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  position: relative; z-index: 2;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .logo__word { color: #fff; font-size: 28px; }
.footer__brand img { height: 56px; width: 56px; }
.footer__tag {
  font-family: var(--font-ar);
  font-size: 15px; line-height: 1.85;
  color: rgba(255,255,255,0.72);
  max-width: 360px;
  margin: 20px 0 28px;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.16);
  display: grid; place-items: center;
  color: #fff;
  transition: all .3s;
}
.socials a:hover {
  background: var(--rose);
  border-color: var(--rose);
  transform: translateY(-2px);
}
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer__col h5 {
  font-family: var(--font-ar);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em;
  color: #fff; margin: 0 0 24px;
}
.footer__col h5 .latin {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
.footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.footer__col li a {
  font-family: var(--font-ar);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color .25s;
  display: inline-flex; align-items: center; gap: 10px;
}
.footer__col li a:hover { color: var(--rose-soft); }
.footer__col li a .dot {
  width: 4px; height: 4px;
  border-radius: 99px; background: var(--rose);
  opacity: 0; transition: opacity .25s;
}
.footer__col li a:hover .dot { opacity: 1; }
.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  position: relative; z-index: 2;
}
.footer__bottom .ar { font-family: var(--font-ar); letter-spacing: 0; }

/* ─── PAGE HEADER (shared on inner pages) ─── */
.page {
  padding: 120px var(--pad-page) 56px;
  max-width: var(--container);
  margin: 0 auto;
}
.page__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--outline-strong);
  margin-bottom: 64px;
}
.crumbs {
  display: flex; gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.crumbs a { color: var(--ink-mute); transition: color .25s; }
.crumbs a:hover { color: var(--rose); }
.crumbs span.sep { color: var(--outline-strong); }

/* ═══════════════════════════════════════════════════
   CMS HYDRATION — discount badge & stock warning
   ═══════════════════════════════════════════════════ */

/* Discount badge — sleek pill stacked over the image */
.sd-badge {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;   /* left in LTR / right in RTL — sits opposite the New chip */
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--rose) 0%, var(--rose-deep) 100%);
  color: #fff;
  line-height: 1;
  box-shadow:
    0 10px 20px -8px rgba(118, 11, 57, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  letter-spacing: 0;
  pointer-events: none;
  transform: rotate(-3deg);
  transition: transform .35s ease;
}
.sd-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 50%);
  pointer-events: none;
}
.card:hover .sd-badge { transform: rotate(-3deg) translateY(-1px); }

.sd-badge__pct {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sd-badge__lbl {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-top: 3px;
}

/* Larger badge variant for the product detail gallery */
.gallery__main .sd-badge {
  top: 18px;
  inset-inline-start: 18px;
  min-width: 72px;
  padding: 12px 14px;
  border-radius: var(--r-md);
}
.gallery__main .sd-badge .sd-badge__pct { font-size: 22px; }
.gallery__main .sd-badge .sd-badge__lbl { font-size: 9px; }

/* ─── Stock warning ─── */
.sd-stock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--surface);
  border: 1px solid var(--outline-strong);
  color: var(--ink-soft);
  transition: all .25s ease;
}
.sd-stock__icon {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--ink-mute);
  font-size: 12px;
  line-height: 1;
}
.sd-stock__icon--ok { color: #2a7a4a; background: rgba(42, 122, 74, 0.10); }

/* LOW STOCK — urgent rose */
.sd-stock.is-low {
  background: linear-gradient(180deg, #fff 0%, var(--rose-tint) 200%);
  border-color: var(--rose);
  color: var(--rose-deep);
  animation: sdStockPulse 2.6s ease-in-out infinite;
}
.sd-stock.is-low .sd-stock__icon {
  background: var(--rose);
  color: #fff;
  font-size: 13px;
}
@keyframes sdStockPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(165, 52, 92, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(165, 52, 92, 0.10); }
}

/* OUT OF STOCK — muted neutral */
.sd-stock.is-out {
  background: var(--surface-container);
  border-color: var(--outline-strong);
  color: var(--ink-mute);
}
.sd-stock.is-out .sd-stock__icon {
  background: var(--ink-mute);
  color: #fff;
}

}

/* ═══════════════════════════════════════════════════
   MOBILE UX HARDENING + FLOATING WHATSAPP (added 2026-05-30)
   ═══════════════════════════════════════════════════ */

/* Belt-and-braces: html is the scroller on many mobile browsers, so clip it
   too (body already clips). Media is never allowed to exceed its container. */
html { overflow-x: hidden; }
img, video, svg, iframe, .photo { max-width: 100%; }

/* Floating WhatsApp contact button — fixed bottom-right on every page. */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  width: 56px; height: 56px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6), 0 4px 12px rgba(0,0,0,.18);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 38px -8px rgba(37,211,102,.78); }
.wa-fab:active { transform: scale(.95); }
.wa-fab svg { width: 30px; height: 30px; display: block; }
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: waPulse 2.6s infinite;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 600px) { .wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; } }

/* ═══════════════════════════════════════════════════════════════
   POST-LAUNCH FIXES (2026-06)
   ═══════════════════════════════════════════════════════════════ */

/* Homepage card hover: keep the (single) image visible when there's no --hover sibling */
.photo__img--primary { transition: opacity .5s ease; }
.card:hover .photo:not(:has(.photo__img--hover)) .photo__img--primary { opacity: 1 !important; }

/* Footer: full-width, grid centred on every template (incl. block Cart/Checkout) */
.footer { width: 100%; clear: both; }
.footer .footer__grid,
.footer .footer__bottom { max-width: var(--container); margin-inline: auto; width: 100%; }

/* Floating WhatsApp button — STRICT sizing + fixed positioning, must win everywhere
   and break out of any container (it is appended to <body>). */
.wa-fab {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  width: 50px !important;
  height: 50px !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: #25D366 !important;
}
.wa-fab svg { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; }

/* ============================================================
   RTL MOBILE VIEWPORT LOCK  (v1.0.8)
   Fixes horizontal overflow / page shift on small screens.
   html+body already clip; this contains stray-wide children,
   neutralises the carousel edge-bleed, and pins the FAB.
   Section containment is scoped to body.home so it can NEVER
   break the cart/checkout sticky sidebar (sticky dies under
   an overflow:clip/hidden ancestor).
   ============================================================ */
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }

/* media can never exceed its box */
img, video, iframe, svg { max-width: 100% !important; height: auto; }
video { height: auto; }

/* contain every top-level homepage section (safe: no sticky here) */
body.home > header,
body.home > section,
body.home > footer,
body.home .hero,
body.home .marquee,
body.home .section,
body.home .products,
body.home .story,
body.home .faq {
  max-width: 100% !important;
  overflow-x: hidden;   /* hidden (not clip): old Android Chrome/WebView ignores clip */
}

@media (max-width: 768px) {
  /* the product carousel must scroll inside itself, never widen the page */
  .product-grid {
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
  /* WooCommerce default loop widths/floats must not fight the flex carousel */
  .product-grid > .card,
  .product-grid li.product {
    float: none !important;
    margin-inline: 0 !important;
  }
  /* never let section padding + child push past the edge */
  body.home .section,
  body.home .products,
  body.home .story,
  body.home .faq,
  body.home .hero__inner { box-sizing: border-box !important; }
}

/* WhatsApp FAB — pin to the viewport regardless of RTL / body shift */
.wa-fab,
.whatsapp-float {
  position: fixed !important;
  inset-inline-end: 16px !important;
  inset-inline-start: auto !important;
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  top: auto !important;
  z-index: 2147483000 !important;
}

/* ============================================================
   MARQUEE HARD CONTAINMENT  (v1.0.9)
   The .marquee__track is ~2659px wide (two item sets for the
   infinite scroll). It is the ONLY element able to blow out the
   mobile canvas. Lock its parent so it can NEVER escape, even if
   html/body overflow is ignored by mobile Blink/WebKit.
   ============================================================ */
section.marquee,
.marquee {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  contain: paint;            /* clip painting to the box on mobile */
}
.marquee__track {
  max-width: none;           /* must stay wide for the animation */
  will-change: transform;
}
/* belt-and-suspenders: no homepage section may exceed the viewport */
section.hero,
section.section,
section.products { max-width: 100% !important; }

/* ============================================================
   SD-SHELL WRAPPER STRAITJACKET  (v1.0.11)
   header.php opens <div class="sd-shell"> right after <body>,
   footer.php closes it. A real block wrapper clips horizontal
   overflow on mobile reliably (html/body clip is ignored by
   some mobile Blink/WebKit builds). overflow clip is applied
   ONLY <=768px so it never breaks the desktop cart sticky
   sidebar (an overflow:hidden ancestor kills position:sticky).
   ============================================================ */
.sd-shell { width: 100% !important; max-width: 100% !important; position: relative; }
@media (max-width: 768px) {
  .sd-shell { overflow-x: hidden !important; }
}