/* SnapFlyer public site — premium design system v2.
   Palette: deep emerald (fresh/grocery) + burnt-amber (discount signal only).
   Fonts: Cairo (display) + Tajawal (body).
   Dark mode auto via prefers-color-scheme. */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Tajawal:wght@400;500;700&display=swap');

:root {
  --ink: #12231f;
  --ink-soft: #3a5049;
  --muted: #6b8079;
  --bg: #f4f6f2;
  --surface: #ffffff;
  --surface-2: #ecefe9;
  --surface-3: #e3e8de;
  --line: #dce2d8;
  --line-strong: #c3cdbc;
  --accent: #0f6b5c;
  --accent-2: #0a8c76;
  --accent-ink: #ffffff;
  --accent-soft: #e1f0eb;
  --accent-glow: rgba(15, 107, 92, 0.12);
  --deal: #d9480f;
  --deal-2: #c23d0c;
  --deal-soft: #fdece2;
  --deal-glow: rgba(217, 72, 15, 0.10);
  --shadow-sm: 0 1px 3px rgba(18, 35, 31, 0.06);
  --shadow: 0 2px 8px rgba(18, 35, 31, 0.06), 0 8px 24px -12px rgba(18, 35, 31, 0.18);
  --shadow-lg: 0 4px 12px rgba(18, 35, 31, 0.08), 0 16px 40px -16px rgba(18, 35, 31, 0.25);
  --radius: 16px;
  --radius-sm: 10px;
  --sans: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --display: "Cairo", "Tajawal", system-ui, sans-serif;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9f0ed;
    --ink-soft: #b9c9c3;
    --muted: #85978f;
    --bg: #0b1210;
    --surface: #141e1a;
    --surface-2: #1a2824;
    --surface-3: #22332d;
    --line: #243830;
    --line-strong: #2f493f;
    --accent: #3ecbb0;
    --accent-2: #50dfc3;
    --accent-ink: #0c211c;
    --accent-soft: #15302a;
    --accent-glow: rgba(62, 203, 176, 0.10);
    --deal: #f0855a;
    --deal-2: #ff9b70;
    --deal-soft: #3a2115;
    --deal-glow: rgba(240, 133, 90, 0.10);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"],
html[data-theme="dark"] {
  --ink: #e9f0ed;
  --ink-soft: #b9c9c3;
  --muted: #85978f;
  --bg: #0b1210;
  --surface: #141e1a;
  --surface-2: #1a2824;
  --surface-3: #22332d;
  --line: #243830;
  --line-strong: #2f493f;
  --accent: #3ecbb0;
  --accent-2: #50dfc3;
  --accent-ink: #0c211c;
  --accent-soft: #15302a;
  --accent-glow: rgba(62, 203, 176, 0.10);
  --deal: #f0855a;
  --deal-2: #ff9b70;
  --deal-soft: #3a2115;
  --deal-glow: rgba(240, 133, 90, 0.10);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"],
html[data-theme="light"] {
  --ink: #12231f;
  --ink-soft: #3a5049;
  --muted: #6b8079;
  --bg: #f4f6f2;
  --surface: #ffffff;
  --surface-2: #ecefe9;
  --surface-3: #e3e8de;
  --line: #dce2d8;
  --line-strong: #c3cdbc;
  --accent: #0f6b5c;
  --accent-2: #0a8c76;
  --accent-ink: #ffffff;
  --accent-soft: #e1f0eb;
  --accent-glow: rgba(15, 107, 92, 0.12);
  --deal: #d9480f;
  --deal-2: #c23d0c;
  --deal-soft: #fdece2;
  --deal-glow: rgba(217, 72, 15, 0.10);
  --shadow-sm: 0 1px 3px rgba(18, 35, 31, 0.06);
  --shadow: 0 2px 8px rgba(18, 35, 31, 0.06), 0 8px 24px -12px rgba(18, 35, 31, 0.18);
  --shadow-lg: 0 4px 12px rgba(18, 35, 31, 0.08), 0 16px 40px -16px rgba(18, 35, 31, 0.25);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}
html:not([data-theme="dark"]) .theme-toggle-btn .theme-icon-light {
  display: none;
}
html:not([data-theme="dark"]) .theme-toggle-btn .theme-icon-dark {
  display: inline-block;
}
html[data-theme="dark"] .theme-toggle-btn .theme-icon-light {
  display: inline-block;
}
html[data-theme="dark"] .theme-toggle-btn .theme-icon-dark {
  display: none;
}

/* ---- reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A short page — a store with two flyers, a search with no results — used
     to leave the footer floating in the middle of the screen with a black
     void beneath it. This pins it to the bottom without pinning it over the
     content on long pages. dvh, not vh, so mobile browser chrome collapsing
     does not shift the page. */
  min-height: 100dvh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; text-wrap: balance; }
button { font-family: var(--sans); }

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---- animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: fadeInUp 0.5s var(--transition) both; }
.animate-fade { animation: fadeIn 0.4s ease both; }

/* ---- skeleton / shimmer loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

/* ================ HEADER ================ */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.site-header .bar {
  display: flex; align-items: center; gap: 1rem;
  /* padding-block, not the `padding` shorthand: this element also carries
     .wrap (`padding: 0 1.25rem`), and a bare `padding: .75rem 0` here has
     higher specificity (two classes vs one) so it was replacing .wrap's
     side padding wholesale, not just adding top/bottom - the logo and
     hamburger sat flush against the screen edge with zero margin. */
  padding-block: .75rem;
}
.logo {
  font-family: var(--display); font-weight: 900; font-size: 1.4rem;
  color: var(--accent); flex: none; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: .4rem;
  /* The page is dir="rtl" (Arabic), so a `display:flex` container's main
     axis runs right-to-left by default and mirrors its children's ORDER -
     "🛍️ Snap Flyer" in the markup rendered as "Flyer Snap 🛍️" on screen.
     The brand name is Latin script and must never flip regardless of page
     direction, so the container itself is pinned LTR. */
  direction: ltr;
}
.logo-icon {
  width: 28px; height: 28px; background: var(--accent); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); font-size: .9rem; font-weight: 900;
}
.logo span { color: var(--deal); font-weight: 900; }

/* ---- search bar in header ---- */
.header-search {
  flex: 1; max-width: 28rem; position: relative;
}
.header-search input {
  width: 100%; padding: .55rem 1rem .55rem 2.4rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--sans); font-size: .88rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.header-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.header-search input::placeholder { color: var(--muted); }
.header-search-icon {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .9rem; pointer-events: none;
}

/* ---- navigation ---- */
.site-nav { display: flex; gap: .25rem; margin-inline-end: auto; }
.site-nav a {
  padding: .5rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: var(--ink-soft); transition: all var(--transition);
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a.active { background: var(--accent); color: var(--accent-ink); }

/* ---- location switcher ---- */
.loc-switch { position: relative; flex: none; }
.loc-switch summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: var(--surface-2);
  transition: all var(--transition);
}
.loc-switch summary::-webkit-details-marker { display: none; }
.loc-switch summary:hover { border-color: var(--accent); color: var(--accent); }
.loc-switch[open] summary { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.loc-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + .6rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .6rem; min-width: 15rem; max-height: 22rem; overflow-y: auto;
  animation: slideDown 0.2s ease;
  scrollbar-width: thin;
}
.loc-panel a {
  display: block; padding: .5rem .75rem; border-radius: 8px;
  font-size: .88rem; color: var(--ink-soft); transition: all var(--transition);
}
.loc-panel a:hover, .loc-panel a.active { background: var(--accent-soft); color: var(--accent); }
.loc-panel .region-label {
  font-size: .7rem; letter-spacing: .06em; color: var(--muted); text-transform: uppercase;
  padding: .6rem .75rem .15rem; font-weight: 700;
}
.loc-panel-change {
  display: block; margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--line);
  color: var(--accent) !important; font-weight: 700;
}

/* ---- mobile hamburger ---- */
.mobile-toggle {
  display: none; background: none; border: none; padding: .4rem;
  cursor: pointer; color: var(--ink); font-size: 1.4rem;
}

/* ---- mobile search (the real .header-search is display:none below 768px -
   without this there was no way at all to reach /products?q= on a phone,
   which is what "الموقع مفهوش بحث" turned out to mean in practice) ---- */
.mobile-search-toggle {
  display: none; background: none; border: none; padding: .4rem;
  cursor: pointer; color: var(--ink); font-size: 1.2rem; margin-inline-start: auto;
}
.mobile-search-bar {
  display: none; padding: 0 0 .75rem;
}
.mobile-search-bar.open { display: block; animation: fadeIn 0.15s ease; }
.mobile-search-bar form { position: relative; }
.mobile-search-bar input {
  width: 100%; padding: .6rem 1rem .6rem 2.4rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--sans); font-size: .9rem; outline: none;
}
.mobile-search-bar input:focus { border-color: var(--accent); }
.mobile-search-bar .header-search-icon {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .9rem; pointer-events: none;
}
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
}
.mobile-nav.open { display: flex; animation: fadeIn 0.2s ease; }
.mobile-nav a {
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  padding: .6rem 2rem; border-radius: 999px; color: var(--ink);
  transition: all var(--transition);
}
.mobile-nav a:hover { background: var(--accent-soft); color: var(--accent); }
.mobile-nav .close-btn {
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: none; border: none; font-size: 1.6rem;
  cursor: pointer; color: var(--ink); padding: .5rem;
}

/* ================ HERO / PAGE HEAD ================ */
/* 2.5rem of top padding sat directly under a breadcrumb that already carries
   1rem of bottom margin — 56px of nothing between the two, on every page. On
   the flyer viewer it was part of 393px of chrome before a 720px-tall window
   showed any of the flyer: 55% of the first screen spent on getting to it. */
.page-head { padding: 1.25rem 0 1rem; }
.page-head h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-head p { color: var(--ink-soft); margin: .35rem 0 0; font-size: .95rem; }
.page-head .stats {
  display: flex; gap: 1rem; margin-top: .8rem;
}
/* Not scoped to .page-head — the store page's header shows the same chips. */
.stat-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--surface-2); font-size: .8rem; font-weight: 600; color: var(--muted);
}
.stat-chip b { color: var(--accent); }
.stat-chip.urgent { background: color-mix(in srgb, var(--deal) 14%, transparent); color: var(--deal); }

/* ---- auto-detected location banner ---- */
.geo-detect {
  background: linear-gradient(135deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 60%, var(--surface)) 100%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius); padding: 1.2rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
  animation: fadeInUp 0.5s ease;
}
.geo-detect-icon { font-size: 2rem; flex: none; }
.geo-detect-text { flex: 1; }
.geo-detect-text strong { color: var(--accent); }
.geo-detect-text p { margin: .2rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.geo-detect-actions { display: flex; gap: .5rem; flex: none; }
.btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem 1.2rem; border-radius: 999px; font-weight: 700;
  font-size: .85rem; cursor: pointer; border: none;
  transition: all var(--transition);
}
/* The modifiers carry the base geometry too. They are meant to be written as
   `.btn .btn-primary`, but two links on the product page had only the
   modifier, and a modifier that silently yields a padding-less, square green
   strip instead of a button is a trap worth closing rather than documenting —
   that strip was the page's main call to action, "افتح في النشرة". */
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem 1.2rem; border-radius: 999px; font-weight: 700;
  font-size: .85rem; cursor: pointer; border: none;
  transition: all var(--transition);
}
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-outline {
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-soft); }

/* ================ CATEGORY GRID ================ */
.cat-grid {
  display: flex; gap: .6rem; overflow-x: auto; padding: .3rem 0 1.5rem;
  scrollbar-width: none; -ms-overflow-style: none;
  /* A horizontally-scrollable strip with no visual cue that it scrolls reads
     as content "flying" off the edge rather than "more to see" - a soft
     fade at both ends signals scrollability without an extra element. */
  mask-image: linear-gradient(to left, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}
.cat-grid::-webkit-scrollbar { display: none; }
.cat-item {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: var(--surface); font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; cursor: pointer; min-width: 5rem; text-align: center;
  transition: all var(--transition);
}
.cat-item:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.cat-item.active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 2px 8px var(--accent-glow);
}
.cat-icon { font-size: 1.3rem; line-height: 1; }
.cat-item.active .cat-icon { filter: grayscale(0); }

/* legacy pill compat */
.pills { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 1.3rem; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; transition: all var(--transition);
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- horizontal rows: arrows and drag ------------------------------------
   Every row here is overflow-x with the scrollbar hidden, which is right on a
   phone and useless on a desktop mouse — a wheel scrolls vertically, and there
   was no bar to drag. The arrows appear only when a row actually overflows,
   and only on pointers that cannot swipe. */
/* min-width:0 lets this shrink below its content so the strip inside it can
   actually scroll. Without it the wrapper reports its full max-content width
   to whatever lays it out — which is how it stretched the viewer's grid track
   to 6289px above. Belt and braces: the track is pinned now too, but a
   scroller that cannot be narrower than its contents is a scroller in name
   only, wherever it is reused. */
.hscroll-wrap { position: relative; min-width: 0; }
.hscroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; z-index: 3;
  background: var(--surface); border: 1.5px solid var(--line);
  color: var(--ink-soft); font-size: 1.15rem; line-height: 1;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: all var(--transition);
}
.hscroll-btn:hover { border-color: var(--accent); color: var(--accent); }
/* The page is RTL and the bidi algorithm mirrors angle-quote ornaments inside
   it, so the button on the left drew a right-pointing chevron and vice versa.
   Pinning the button's own direction stops the mirroring; the arrow then points
   the way it moves you. */
.hscroll-btn { direction: ltr; unicode-bidi: isolate; }
.hscroll-left  { left: -6px; }
.hscroll-right { right: -6px; }
.hscroll-btn[hidden] { display: none; }

/* A row being dragged must not select its own text or drag its own images.
   `pointer-events: none` used to sit on the links here as well, and it is the
   other half of why tapping a store stopped working: the class only has to
   linger for one frame past the gesture and the whole row goes dead. The click
   itself is suppressed in JS by time instead, which cannot outlive the drag. */
.is-dragging { cursor: grabbing; user-select: none; }
.is-dragging img { -webkit-user-drag: none; user-drag: none; }

/* Coarse pointers swipe; the arrows would only cover content. */
@media (hover: none) and (pointer: coarse) {
  .hscroll-btn { display: none !important; }
}

/* ================ STORE BAR ================ */
.store-bar {
  display: flex; gap: .6rem; overflow-x: auto; padding: .3rem 0 1.2rem;
  scrollbar-width: none;
  /* The edge fade used to run the full height and the arrows sat on top of
     half-faded chips, which read as a rendering fault rather than a control.
     It is dropped: with arrows present, the fade was standing in for the
     affordance they now provide. */
}
.store-bar::-webkit-scrollbar { display: none; }
.store-chip {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  height: 40px; padding: 0 .9rem 0 .35rem; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  transition: all var(--transition); white-space: nowrap;
  text-decoration: none; overflow: hidden;
}
.store-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* Retailer logos are mostly WIDE wordmarks (Othaim is 153x60, Danube
   200x40). Forcing those into a 28px circle with object-fit:contain left a
   ~28x11 sliver inside a round crop, which read as an empty white dot -
   Othaim looked like it had no logo at all. A rounded rectangle with real
   width lets a wordmark stay legible while square-ish marks (Panda,
   Al-Aqeel) still sit comfortably. */
.store-chip-n {
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px;
  display: inline-grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent);
  font-size: .65rem; font-weight: 800;
}
.store-chip-img {
  width: 40px; height: 28px; border-radius: 7px; object-fit: contain;
  flex: none; border: 1px solid var(--line); background: #fff; padding: 2px;
}

/* ================ FLYER CARD GRID ================ */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.2rem; padding-bottom: 3rem;
}

.flyer-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: all var(--transition);
  animation: fadeInUp 0.4s ease both;
}
.flyer-card:nth-child(2) { animation-delay: .05s; }
.flyer-card:nth-child(3) { animation-delay: .1s; }
.flyer-card:nth-child(4) { animation-delay: .15s; }
.flyer-card:nth-child(5) { animation-delay: .2s; }
.flyer-card:nth-child(6) { animation-delay: .25s; }

.flyer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.flyer-card .thumb {
  aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 1.4rem;
  color: var(--line-strong); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
}
.flyer-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.flyer-card .thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45) 100%);
}
/* The text block under the cover was competing with the cover itself: the
   card is a picture of a flyer, and the caption should read as a caption.
   Owner reported the title and the days-left pill as oversized, so the whole
   block steps down one notch and tightens - the artwork is what the eye is
   meant to land on. */
.flyer-card .body {
  padding: .7rem .8rem .8rem; display: flex; flex-direction: column;
  gap: .3rem; flex: 1;
}
.flyer-card .store-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700; color: var(--accent);
}
/* Not scoped to .flyer-card: the flyer page's own header uses the same badge,
   and scoping it left that one unsized. Same wide-wordmark problem as
   .store-chip-img, at badge scale. */
.store-badge-img {
  width: 24px; height: 16px; border-radius: 4px; object-fit: contain;
  flex: none; border: 1px solid var(--line); background: #fff; padding: 1px;
}
.flyer-card .ftitle {
  font-weight: 700; font-size: .82rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.flyer-card .meta {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; font-size: .7rem; color: var(--muted); padding-top: .35rem;
}
.flyer-card .meta-pages {
  display: flex; align-items: center; gap: .25rem; white-space: nowrap;
}
.badge-days {
  padding: .15rem .5rem; border-radius: 999px;
  background: var(--deal-soft); color: var(--deal);
  font-weight: 700; font-size: .68rem; white-space: nowrap;
}
.badge-days.urgent {
  background: var(--deal); color: #fff;
  animation: pulse 1.5s ease infinite;
}

/* ================ PRODUCT CARDS ================ */
.product-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
  box-shadow: var(--shadow-sm); transition: all var(--transition);
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--accent); }
.product-card .pimg {
  aspect-ratio: 1/1; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden;
}
.product-card .pimg img { width: 100%; height: 100%; object-fit: contain; }

/* A third of live deals have no cropped snippet — their source gave text only.
   That used to leave a blank grey square at the top of the card. It now says
   which store and how deep the cut, which is what the picture was standing in
   for. */
.product-card .pimg.is-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
}
.pimg-mark {
  width: 44px; height: 30px; object-fit: contain; border-radius: 6px;
  background: #fff; border: 1px solid var(--line); padding: 3px; flex: none;
  opacity: .9;
}
.pimg-mark.is-initial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.1rem;
}
.pimg-pct {
  font-size: .68rem; font-weight: 800; color: var(--deal);
  background: color-mix(in srgb, var(--deal) 12%, transparent);
  padding: .1rem .5rem; border-radius: 999px;
}

/* On a product's page every neighbour is there to be compared with the price
   above it. Saying "same product elsewhere" without saying which is cheaper
   left the reader to do the arithmetic on every card. */
.price-delta {
  font-size: .72rem; font-weight: 800; margin-top: .1rem;
}
.price-delta.is-cheaper { color: #10B981; }
.price-delta.is-dearer  { color: var(--muted); }
.product-card .pstore { font-size: .74rem; font-weight: 700; color: var(--accent); }
.product-card .ptitle { font-size: .88rem; font-weight: 700; line-height: 1.45; min-height: 2.5em; }
.price-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price-now { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.price-was { font-size: .8rem; color: var(--muted); text-decoration: line-through; }
.pct-badge {
  margin-inline-start: auto; background: var(--deal); color: #fff; font-weight: 800; font-size: .75rem;
  padding: .15rem .55rem; border-radius: 6px;
}

/* ================ TRENDING CHIPS ================ */
.trend-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.trend-chip {
  font-size: .82rem; padding: .4rem .85rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  transition: all var(--transition);
}
.trend-chip:hover { border-color: var(--accent); color: var(--accent); }
.trend-chip b { color: var(--accent); }

/* ================ FLYER VIEWER ================ */
/* minmax(0, 1fr) — not the implicit `auto` this used to get.
 *
 * A grid track sized `auto` takes its width from its widest item's MAX-content,
 * and `overflow-x: auto` on a child does not change that: the thumbnail strip
 * below still handed this track the full width of all its thumbnails laid end
 * to end. On بنده مصر flyer 184 — 96 pages — that measured:
 *
 *     viewport 1265px · .viewer column 6289px · document scrollWidth 6350px
 *     .viewer-main 6289px at x = -5084       the <img> 418x590, always correct
 *
 * So the strip that exists to scroll was widening the page instead, the two
 * siblings stretched to match, and the correctly-sized page image was pushed
 * off-screen. The owner saw a narrow strip beside a wall of black and reported
 * it as an image problem; the image was the one thing that was right.
 *
 * 32 of the 49 live flyers have more than eight pages. A one-page flyer looks
 * fine, which is why this survived being looked at. */
.viewer { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .5rem 0 2rem; }
.viewer-main {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
  display: flex; justify-content: center;
}
.viewer-main[hidden] { display: none; }
.viewer-main img { max-height: 82vh; width: auto; transition: opacity 0.3s ease; }
/* display:inline-block makes this wrapper shrink to the IMG's own rendered
   box (the image is height-constrained, not width:100%) - hotspots below are
   positioned as percentages of exactly that box, not the wider flex parent. */
.sf-page-wrap { position: relative; display: inline-block; line-height: 0; }
/* The tappable layer over a flyer page.
   
   Two things were wrong with it. It was revealed on :hover, which no phone
   has - so on the device most people use, the layer was invisible and the
   page looked like a plain picture. And the fill was the brand green at 12%,
   which tinted the product photo underneath it; the owner asked for something
   that marks the area without colouring the goods.
   
   So: always visible, a light blue OUTLINE doing the work, and a fill so
   faint it reads as a highlight rather than a wash. Blue on purpose - green
   is the brand and amber means discount, and a third meaning needs a colour
   of its own that cannot be mistaken for either. */
/* Border only, fully transparent middle - the owner asked explicitly not to
   tint the product photo itself. A border alone still reads clearly as "this
   is tappable" without putting a colour wash over merchandise someone is
   trying to actually look at. */
/* مناطق اللمس فوق صورة النشرة.
   بلا أي إطار افتراضياً: الإطارات الدائمة كانت تشوّش على صور المنتجات نفسها.
   تظهر مرّة واحدة فقط عبر .sf-reveal-taps عند أول زيارة للتعريف بها، وعلى
   :focus-visible حتى يبقى التصفّح بلوحة المفاتيح مرئياً. */
.sf-hotspot {
  position: absolute; border: none; border-radius: 8px; cursor: pointer; padding: 0;
  background: transparent; box-shadow: none;
  transition: box-shadow var(--transition), background var(--transition);
}
.sf-page-wrap.sf-reveal-taps .sf-hotspot {
  background: rgba(0, 229, 255, .10);
  box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, .85);
}
.sf-hotspot:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(59, 138, 204, .95);
}

/* تلميح أول زيارة */
.sf-taps-hint {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 30rem);
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid rgba(0, 229, 255, .6); border-radius: 999px;
  padding: .7rem 1.1rem; box-shadow: var(--shadow-md);
  font-size: .9rem; font-weight: 600;
  animation: sf-hint-in .35s ease both;
}
.sf-taps-hint button {
  flex: none; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700;
  font-family: inherit; font-size: .82rem; padding: .35rem .9rem;
}
@keyframes sf-hint-in { from { opacity: 0; transform: translate(-50%, .6rem); } }
@media (prefers-reduced-motion: reduce) { .sf-taps-hint { animation: none; } }
.viewer-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.viewer-nav button {
  font-family: var(--sans); font-weight: 700; font-size: .88rem; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .55rem 1.2rem; color: var(--ink); transition: all var(--transition);
}
.viewer-nav button:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.viewer-nav button:disabled { opacity: .3; cursor: default; }
.viewer-count { font-size: .85rem; color: var(--muted); font-weight: 600; }
.thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0; scrollbar-width: none; }
.thumbs[hidden] { display: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs img {
  width: 3.6rem; height: 4.8rem; object-fit: cover; border-radius: 8px;
  border: 2px solid transparent; opacity: .5; cursor: pointer; flex: none;
  transition: all var(--transition);
}
.thumbs img:hover { opacity: .8; }
.thumbs img.active { border-color: var(--accent); opacity: 1; }

.sf-view-toggle { display: flex; gap: .3rem; margin-inline-start: auto; }
.sf-view-toggle .sf-view-btn { padding: .45rem .6rem; font-size: 1rem; line-height: 0; }
/* Stroke-only icons, sized from the button's own font so they track the rest of
   the bar. `fill: none` on the shapes is what stops the 2x2 grid reading as the
   solid block its old character (U+25A6) drew. */
.sf-view-toggle .sf-view-btn svg {
  width: 1.15rem; height: 1.15rem; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sf-view-toggle .sf-view-btn.active {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
/* Wide screens: the page list stands beside the page, not under it.
 *
 * A flyer page is portrait and a desktop window is landscape, so a single page
 * centred in a full-width box leaves the sides empty by construction — measured
 * at 726px of the 1144px box, 63% of it, with the thumbnail strip pushed below
 * the fold underneath. Standing the strip up in that space costs nothing that
 * was being used and buys back the vertical room the strip was taking.
 *
 * Only from 1024px up. Below that the window is portrait-ish too, the sides are
 * not free, and the strip stays where it is. */
@media (min-width: 1024px) {
  .viewer {
    grid-template-columns: minmax(0, 1fr) 5.75rem;
    grid-template-areas: "nav   nav"
                         "main  rail"
                         "grid  grid";
    align-items: start;
  }
  .viewer-nav   { grid-area: nav; }
  /* The card hugs the page instead of stretching to the column.
     A portrait page capped at 82vh can never fill a landscape column, so the
     stretched card drew 622px of empty black beside a 418px image — the void
     the owner was looking at. Sized to its content, there is nothing left to
     be empty, and the page sits centred in the space the rail does not use. */
  .viewer-main  { grid-area: main; width: fit-content; max-width: 100%; justify-self: center; }
  .sf-grid-pages{ grid-area: grid; }
  .viewer .hscroll-wrap { grid-area: rail; }

  /* The rail scrolls vertically now, so the horizontal arrows hscroll.js draws
     would point the wrong way. It only manages rows that overflow horizontally
     (`scrollWidth - clientWidth > 8`), and a column does not — so it leaves
     this alone on its own, and the arrows are hidden for the case where a
     resize crosses the breakpoint after it has already run. */
  .viewer .thumbs {
    flex-direction: column; overflow-x: hidden; overflow-y: auto;
    max-height: 82vh; padding: 0; gap: .4rem;
  }
  .viewer .thumbs img { width: 100%; height: auto; aspect-ratio: 3/4; }
  .viewer .hscroll-wrap .hscroll-btn { display: none; }
}

.sf-grid-pages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1rem;
}
.sf-grid-pages[hidden] { display: none; }
.sf-grid-page {
  padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; overflow: hidden; position: relative;
  transition: all var(--transition); aspect-ratio: 3/4;
}
.sf-grid-page:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.sf-grid-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-grid-page-num {
  position: absolute; bottom: .4rem; inset-inline-end: .4rem;
  background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--ink);
  font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
}

.page-products { padding: .5rem 0 3rem; }
.page-products h2 { font-size: 1.1rem; margin-bottom: 1rem; }

/* A <button> wearing .product-card needs the browser's own button chrome
   stripped - text-align/width/font are what actually differ from the <div>
   this class was originally written for. */
button.product-card.sf-card-open {
  width: 100%; font: inherit; color: inherit; text-align: right; cursor: pointer;
}

/* ================ FLOATING DEAL MODAL (tap a hotspot or a card) ================ */
.sf-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.sf-modal[hidden] { display: none; }
.sf-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s ease;
}
.sf-modal.open .sf-modal-backdrop { opacity: 1; }
.sf-modal-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 30rem;
  max-height: 88vh; overflow-y: auto; padding: 1.5rem;
  opacity: 0; transform: translateY(12px) scale(.98); transition: all .22s ease;
}
.sf-modal.open .sf-modal-card { opacity: 1; transform: translateY(0) scale(1); }
.sf-modal-close {
  position: absolute; top: .8rem; left: .8rem; width: 2rem; height: 2rem; border-radius: 999px;
  border: none; background: var(--surface-2); color: var(--ink); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--transition);
}
.sf-modal-close:hover { background: var(--accent-soft); color: var(--accent); }
/* Image on top, full width - it was a 7.5rem thumbnail beside the text
   (.sf-modal-body was a side-by-side flex row), reported as "very small".
   aspect-ratio rather than a fixed height so it reads the same regardless of
   how tall the crop came out. */
/* The box used to be a fixed 4:3 whatever went into it. About 7% of live
   deals have a bounding box that is a flat strip rather than a product tile —
   the extractor boxed the caption line and left the artwork out — and a
   208x64 strip inside a 4:3 box is 70% dead space with a sliver of image
   floating in the middle of it. The box now takes the picture's own shape,
   capped so a tall snippet cannot push the price below the fold. min-height
   keeps it from collapsing to nothing before the image arrives. */
.sf-modal-img {
  width: 100%; border-radius: var(--radius-sm);
  background: var(--surface-2); overflow: hidden; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center; min-height: 4rem;
}
.sf-modal-img img { width: 100%; height: auto; max-height: 52vh; object-fit: contain; }
.sf-modal-info { min-width: 0; }
.sf-modal-store { font-size: .78rem; font-weight: 700; color: var(--accent); margin-bottom: .2rem; }
.sf-modal-info h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 .3rem; }
.sf-modal-unit { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.sf-modal-actions { padding: 0; margin: .3rem 0 .2rem; }
.sf-modal-similar { margin-top: 1.3rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.sf-modal-similar h4 { font-size: .92rem; margin: 0 0 .7rem; color: var(--ink-soft); }
.sf-slider {
  display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin;
}
.sf-slide {
  /* Now an <a>, not a plain div - it was not clickable at all before, so
     tapping "the same product elsewhere" led nowhere. Link chrome reset so
     it still reads as a card, not a link. */
  flex: none; width: 9.5rem; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: .6rem; display: flex; flex-direction: column; gap: .35rem;
  text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition);
}
.sf-slide:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sf-slide .pimg { aspect-ratio: 1/1; background: var(--surface); border-radius: 8px; overflow: hidden; }
.sf-slide .pimg img { width: 100%; height: 100%; object-fit: contain; }
.sf-slide-store { display: flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--ink-soft); }
.sf-slide-store img { width: 1rem; height: 1rem; border-radius: 4px; object-fit: contain; flex: none; }
.sf-slide .ptitle { font-size: .76rem; font-weight: 700; line-height: 1.35; min-height: 2em; }
.sf-slide .price-now { font-size: .88rem; }
.sf-slider-loading { font-size: .82rem; color: var(--muted); padding: .5rem 0; }

/* ================ STORE PAGE ================ */
.store-head { display: flex; align-items: center; gap: 1.2rem; padding: 2rem 0 1.2rem; }
.store-head-text { min-width: 0; }
.store-head-text h1 { font-size: 1.5rem; line-height: 1.3; }
.store-head-text p { color: var(--ink-soft); margin: .2rem 0 0; }
.store-head-text .stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.empty .btn { margin-top: 1.2rem; }
.store-logo {
  width: 4.5rem; height: 4.5rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 1.4rem;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.store-head-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* The initial a store falls back to — used both when it has no logo and when
   the file fails to load, since to a reader those are the same thing. It takes
   the exact box of the image it replaces, so nothing on the row shifts. */
.store-chip-img.is-initial,
.store-badge-img.is-initial,
.pdetail-store-img.is-initial,
.store-head-img.is-initial {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--display); font-weight: 900;
  border: 0; padding: 0; line-height: 1;
}
.store-chip-img.is-initial    { font-size: .82rem; }
.store-badge-img.is-initial   { font-size: .6rem; border-radius: 4px; }
.pdetail-store-img.is-initial { font-size: .62rem; }
.store-head-img.is-initial    { font-size: 1.4rem; border-radius: inherit; }
.branch-list { display: flex; flex-direction: column; gap: .6rem; padding-bottom: 2rem; }
.branch {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; font-size: .88rem; transition: all var(--transition);
}
.branch:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.branch .bname { font-weight: 700; }
.branch .baddr { color: var(--muted); margin-top: .15rem; }

/* ================ FOOTER ================ */
.site-footer {
  border-top: 1px solid var(--line); padding: 2.5rem 0;
  color: var(--muted); font-size: .85rem;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand { font-family: var(--display); font-weight: 800; color: var(--accent); }

/* ================ EMPTY STATE ================ */
.empty { text-align: center; padding: 5rem 1.5rem; color: var(--muted); }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .6; }
.empty h2 { color: var(--ink-soft); margin-bottom: .5rem; font-size: 1.2rem; }
.empty p { max-width: 24rem; margin: 0 auto; }

/* ================ LOCATION CHOOSER ================ */
.chooser { padding: 2.5rem 0 4rem; max-width: 48rem; }
.chooser-top-nav {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;
}
.chooser-back {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--accent); font-size: .88rem; font-weight: 700;
  transition: all var(--transition);
}
.chooser-back:hover { gap: .5rem; }
.geo-gps-btn {
  font-size: .82rem; padding: .45rem 1rem; font-weight: 700;
}
.chooser-title { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.3; }
.chooser-sub { color: var(--ink-soft); margin: .4rem 0 1rem; font-size: .95rem; }

.chooser-search-box {
  margin: 1.2rem 0 1.8rem; position: relative;
}
.chooser-search-input {
  width: 100%; padding: .85rem 1.4rem; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface);
  font-size: .95rem; color: var(--ink); box-shadow: var(--shadow-sm);
  outline: none; transition: all var(--transition);
}
.chooser-search-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow);
}

.chooser-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem;
}
.chooser-card {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.8rem 1rem; border-radius: var(--radius); border: 1.5px solid var(--line);
  background: var(--surface); font-weight: 700; color: var(--ink); text-align: center;
  transition: all var(--bounce); position: relative; overflow: hidden;
}
.chooser-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--transition);
}
.chooser-card:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: var(--shadow); transform: translateY(-3px) scale(1.02);
}
.chooser-card:hover::before { opacity: 1; }
.chooser-flag { font-size: 2.8rem; position: relative; z-index: 1; }
.chooser-name { position: relative; z-index: 1; font-size: 1.1rem; }

.chooser-region {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem; box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.chooser-region:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.chooser-region-name {
  font-size: .95rem; color: var(--accent); font-weight: 800;
  margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem;
}
.chooser-grid-cities {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.chooser-card-city {
  display: inline-flex; align-items: center;
  padding: .45rem 1rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  transition: all var(--transition); text-decoration: none;
}
.chooser-card-city:hover {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); transform: translateY(-1px);
}
.chooser-card-city.suggested {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 700;
}
.chooser-card-city.suggested::after {
  content: '📍'; margin-inline-start: .3rem; font-size: .75rem;
}

/* ---- all cities ----------------------------------------------------------
   Deliberately not styled as one more city chip. The city chips are a list to
   scan; this is the answer for everyone whose town is not on that list, and a
   pill the same size and shape as ninety others is a pill nobody reads. */
.chooser-card-all {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.2rem; margin-bottom: 1.2rem;
  border-radius: 16px; text-decoration: none;
  background: var(--accent-soft); border: 1.5px solid var(--accent);
  transition: all var(--transition);
}
.chooser-card-all:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,107,92,.18); }
.chooser-card-all-icon { font-size: 1.7rem; line-height: 1; }
.chooser-card-all-text { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.chooser-card-all-text strong { color: var(--accent); font-size: 1rem; font-weight: 800; }
.chooser-card-all-text small { color: var(--ink-soft); font-size: .8rem; }
.chooser-card-all-go { color: var(--accent); font-size: 1.2rem; font-weight: 700; }

.chooser-or {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1rem; color: var(--muted); font-size: .8rem;
}
.chooser-or::before, .chooser-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.loc-panel a.loc-panel-all {
  font-weight: 700; color: var(--accent);
  border-bottom: 1px solid var(--line); margin-bottom: .25rem; padding-bottom: .5rem;
}

/* ================ RESPONSIVE ================ */
@media (max-width: 768px) {
  .header-search { display: none; }
  .site-nav { display: none; }
  .mobile-toggle { display: block; }
  .mobile-search-toggle { display: block; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; }
  .flyer-card .body { padding: .6rem .7rem .7rem; }
  .flyer-card .ftitle { font-size: .78rem; }
  .page-head h1 { font-size: 1.4rem; }
  .page-head { padding: 1.5rem 0 1rem; }
  .chooser-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .geo-detect { flex-direction: column; text-align: center; }
  .geo-detect-actions { width: 100%; justify-content: center; }
  .store-bar { padding-bottom: 1.2rem; }
}

@media (max-width: 480px) {
  /* ---------------------------------------------------------------
     THE FIX FOR THE CLIPPED PAGE ON A REAL PHONE.

     The header bar is five nowrap children - logo 123px, account button
     72, city switcher 75, search toggle 36, menu 32 = 338 - plus four
     16px gaps and two 20px page paddings. 442px minimum, on a 384px
     phone.

     Chrome does not clip an over-wide header and leave the rest alone.
     It WIDENS THE LAYOUT VIEWPORT to fit it - measured live on the
     owner's device: innerWidth 446 while visualViewport.width was 384,
     at scale 1. So the whole page laid itself out 62px wider than the
     screen and every section below lost its right-hand edge. In RTL
     that is the START of every line, which is why headings read
     "الرياض" with "عروض" gone.

     One un-shrinkable row took the entire site with it. Hence both a
     fix and a guarantee:
       - gap and page padding come down, which alone buys back 60px;
       - flex-wrap:wrap caps the bar's min-content at its widest single
         child (123px), so NOTHING added to this header later can ever
         do this again. It drops to a second line instead.
     -------------------------------------------------------------- */
  .wrap { padding: 0 .8rem; }

  /* wrap is the GUARANTEE, not the plan. With the trims below the row needs
     ~378px and stays on one line on a 384px phone; if anything is ever added
     to this header it drops to a second line instead of dragging the whole
     page off-screen. A lone hamburger on row two looks wrong, so the trims
     are sized to keep that from happening in the normal case. */
  .site-header .bar { gap: .4rem; flex-wrap: wrap; row-gap: .4rem; }

  /* 414px of children on a 384px screen. Trimmed from three controls rather
     than removing any of them - a header that fits by dropping the sign-in
     button or the city switcher has not been fixed, it has been amputated. */
  .logo { font-size: 1.05rem; gap: .3rem; }
  .logo-badge { width: 24px; height: 24px; }
  .loc-switch summary {
    padding: .45rem .6rem; gap: .25rem; font-size: .8rem;
    max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* .site-header prefix on purpose: the generic `.acct-btn` override in the
     max-width:768px block further down this file matches a 384px screen too,
     and being LATER in source order it wins a specificity tie. Qualifying by
     the header makes this rule independent of where either block sits. */
  .site-header .acct-btn { padding: .4rem .5rem; font-size: .74rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .flyer-card .thumb { aspect-ratio: 4/5; }
  /* Two columns on a phone leaves the caption about 9rem wide, and the meta
     row has to fit "📄 49 صفحة" and "باقي 2 يوم" side by side inside it -
     both now nowrap, so they need to be small enough not to collide. */
  .flyer-card .ftitle { font-size: .74rem; }
  .flyer-card .store-badge { font-size: .66rem; }
  .flyer-card .meta { font-size: .64rem; }
  .badge-days { font-size: .62rem; padding: .12rem .4rem; }
  .chooser { padding: 2rem 0 3rem; }
  .chooser-title { font-size: 1.5rem; }
  .cat-item { padding: .5rem .7rem; font-size: .72rem; min-width: 4rem; }
  .cat-icon { font-size: 1.1rem; }
}

/* ================ PRODUCT DETAIL ================
   The page behind every product card. Cards used to be plain <div>s, so
   clicking a search result did nothing - this is the destination that was
   missing, on the site and (as a screen) in the app at the same time. */
.product-card { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }

.crumbs {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted); margin: .9rem 0 .5rem;
}
.crumbs a { color: var(--accent); font-weight: 700; text-decoration: none; }
/* The back link is the only control on some of these pages, so it is sized to
   be hit rather than squinted at — and it reads as a control, not as a
   breadcrumb someone might mistake for a label. */
.crumbs-back {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: all var(--transition);
}
.crumbs-back:hover {
  background: var(--accent-soft); border-color: var(--accent);
  text-decoration: none !important;
}
.crumbs-here { color: var(--muted); }
.crumbs a:hover { text-decoration: underline; }

.pdetail {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.6rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-sm);
}
/* Same reasoning as .sf-modal-img: the picture's own shape, not a forced
   square. A snippet with no image at all still needs a box, so the fallback
   below keeps its own padding. */
.pdetail-media {
  background: var(--surface-2); border-radius: calc(var(--radius) - 4px);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 5rem;
}
.pdetail-media img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.pdetail-noimg {
  font-size: .78rem; color: var(--muted); text-align: center; padding: 1.5rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}

.pdetail-store {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700; color: var(--accent); text-decoration: none;
}
.pdetail-store-img {
  width: 26px; height: 18px; object-fit: contain; border-radius: 4px;
  border: 1px solid var(--line); background: #fff; padding: 1px;
}
.pdetail-body h1 { font-size: 1.25rem; line-height: 1.45; margin: .5rem 0 .2rem; }
.pdetail-unit { font-size: .8rem; color: var(--muted); }
.pdetail-prices { display: flex; align-items: baseline; gap: .6rem; margin: .8rem 0 .4rem; flex-wrap: wrap; }
.pdetail-prices .price-now { font-size: 1.6rem; font-weight: 800; color: var(--deal); }
.pdetail-prices .price-was { text-decoration: line-through; color: var(--muted); font-size: .95rem; }
.badge-off {
  background: var(--deal); color: #fff; font-weight: 800; font-size: .72rem;
  padding: .15rem .5rem; border-radius: 999px;
}
.pdetail-meta { font-size: .78rem; color: var(--muted); margin-bottom: 1rem; }
.pdetail-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem 1.1rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1.5px solid var(--line); color: var(--ink); text-decoration: none;
  transition: all var(--transition);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.sect-title { font-size: 1.05rem; font-weight: 800; margin: 2rem 0 .9rem; }
.empty-note {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: .85rem; color: var(--muted);
}
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }

@media (max-width: 768px) {
  .pdetail { grid-template-columns: 1fr; gap: 1rem; }
  .pdetail-media { max-width: 260px; margin-inline: auto; }
  .pdetail-body h1 { font-size: 1.05rem; }
  .pdetail-prices .price-now { font-size: 1.35rem; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}

/* Category chips on the compare page - the site half of the control the app's
   قارن tab gained in the same change. Horizontally scrollable with the same
   mask-fade the store bar uses, so a long taxonomy does not wrap into a wall. */
.cat-chips {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .6rem; margin-bottom: 1rem;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to left, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--surface);
  white-space: nowrap; transition: all var(--transition);
}
.cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cat-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* "New" flag on a flyer card.
   Without it the grid is a wall of identical cards and a shopper who checked
   yesterday cannot see what changed - which is the one thing they came back
   for. Sits top-start over the cover, above the gradient overlay. */
.flyer-card { position: relative; }
.new-flag {
  position: absolute; inset-block-start: .55rem; inset-inline-start: .55rem;
  z-index: 2;
  background: var(--accent); color: var(--accent-ink);
  font-size: .66rem; font-weight: 800; letter-spacing: .01em;
  padding: .2rem .5rem; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ================ ACCOUNT ================
   Sign-in, favourites, alerts and notifications. The session is a token
   shared with the Android app rather than a PHP cookie, so this is rendered
   client-side by account.js - one account serves both platforms. */
.acct-slot { flex: none; }
.acct-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface-2);
  color: var(--ink-soft); font-family: var(--sans); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.acct-btn:hover { border-color: var(--accent); color: var(--accent); }
.acct-menu { position: relative; }
.acct-menu summary { list-style: none; }
.acct-menu summary::-webkit-details-marker { display: none; }
.acct-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .5rem; min-width: 13rem;
  animation: slideDown .18s ease;
}
.acct-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .75rem; border-radius: 9px; font-size: .86rem; color: var(--ink-soft);
  transition: all var(--transition);
}
.acct-panel a:hover { background: var(--accent-soft); color: var(--accent); }
/* Set apart from sign-out above it: the two get confused, and only one of
   them is reversible. */
.acct-panel a.acct-danger { color: var(--deal); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.acct-panel a.acct-danger:hover { background: var(--deal-soft); color: var(--deal); }
.acct-badge {
  background: var(--deal); color: #fff; font-size: .68rem; font-weight: 800;
  padding: .05rem .4rem; border-radius: 999px;
}

.acct-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(0,0,0,.55); padding: 1rem; animation: fadeIn .18s ease;
  backdrop-filter: blur(2px);
}
.acct-modal {
  position: relative; width: min(26rem, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.5rem;
  max-height: 85vh; overflow-y: auto;
}
.acct-modal h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.acct-close {
  position: absolute; inset-block-start: .6rem; inset-inline-end: .8rem;
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.acct-close:hover { color: var(--ink); }
.acct-modal input {
  width: 100%; margin-bottom: .7rem; padding: .7rem 1rem;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--sans); font-size: .9rem; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.acct-modal input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.acct-submit { width: 100%; justify-content: center; margin-top: .2rem; }
/* The success twin of .acct-error. A form that only ever speaks up when
   something is wrong leaves you guessing whether the save happened. */
.acct-ok {
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: .6rem .8rem; font-size: .82rem; margin-bottom: .8rem;
}
.acct-error {
  background: var(--deal-soft); color: var(--deal); border: 1px solid var(--deal);
  border-radius: 10px; padding: .6rem .8rem; font-size: .82rem; margin-bottom: .8rem;
}
.acct-switch { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 1rem; }
.acct-switch a { color: var(--accent); font-weight: 700; }
#acct-google { display: flex; justify-content: center; margin-top: .9rem; }

.acct-list { display: flex; flex-direction: column; gap: .1rem; }
.acct-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem .2rem; border-bottom: 1px solid var(--line); font-size: .86rem;
}
.acct-row:last-child { border-bottom: none; }
.acct-notif { align-items: flex-start; }
.acct-muted { color: var(--muted); font-size: .78rem; }
.acct-empty { color: var(--muted); font-size: .86rem; text-align: center; padding: 1.5rem 0; }

@media (max-width: 768px) {
  .acct-btn { padding: .45rem .7rem; font-size: .78rem; }
}


/* The header mark. Was an emoji in a coloured square, which is not a brand -
   it looked like every other app that reached for a shopping bag. Now the real
   SnapFlyer mark, sized to the wordmark's cap height so the lockup reads as
   one object rather than an icon sitting next to some text. */
img.logo-badge {
  width: 28px; height: 28px; flex: none; display: block;
  border-radius: 0; background: none; padding: 0;
}


/* ---- quick actions on a product card ----
   Inside the card's own <a>, so every handler stops the click from
   navigating - saving a favourite must not also open the product, which
   would defeat the shortcut entirely. Hidden until a session exists. */
.pcard-actions {
  display: flex; gap: .3rem; justify-content: flex-start;
  padding: .35rem .55rem .5rem;
}
.pcard-act {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; width: 30px; height: 30px; line-height: 1;
  font-size: .85rem; cursor: pointer; padding: 0;
  transition: border-color var(--transition), transform var(--transition);
}
.pcard-act:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.pcard-act:disabled { cursor: default; opacity: 1; }

/* السعر الموحَّد للمقارنة — تحت السعر مباشرة، هادئ لأنه سطر مساعِد لا عنوان. */
.price-unit{
  margin-top:.15rem;
  font-size:.72rem;
  color:var(--muted,#6b7280);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* السعر الموحَّد على صفحة المنتج — أوضح من سطر البطاقة لأنه صفحة القرار. */
.pdetail-unitprice{
  margin-top:.45rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .6rem;
  border-radius:999px;
  background:var(--accent-soft,#e8f5f1);
  color:var(--accent,#0f766e);
  font-size:.82rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   المتاجر حسب النوع.
   شبكة التصنيفات في الرئيسية صارت تعرض أنواع التجار، وكل نوع يحمل عدد متاجره
   التي لديها عروض سارية — رقم بلا سياق أسوأ من لا رقم، ورقاقة تَعِد بصيدليات
   ثم تفتح على لا شيء أسوأ من الاثنين. */
.cat-n {
  display: inline-block;
  min-width: 1.4em;
  margin-inline-start: .35rem;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--surface-2, #ecefe9);
  color: var(--muted, #6b7a72);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cat-item.active .cat-n { background: rgba(255, 255, 255, .22); color: inherit; }

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .75rem;
}
.store-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 1rem .6rem;
  border: 1px solid var(--line, #dce2d8);
  border-radius: .9rem;
  background: var(--surface, #fff);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.store-card:hover { border-color: var(--accent, #0f6b5c); transform: translateY(-2px); }
.store-card-img { width: 52px; height: 52px; object-fit: contain; border-radius: .5rem; }
.store-card-name { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.store-card-meta { font-size: .75rem; color: var(--muted, #6b7a72); font-variant-numeric: tabular-nums; }

/* ---- Cross-store Price History Modal & Button ---- */
.sf-price-history-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .35rem .75rem; font-size: .78rem; font-weight: 700;
  border-radius: 9999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  cursor: pointer; transition: all .15s ease;
}
.sf-price-history-btn:hover {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.sf-history-card {
  max-width: 38rem; padding: 1rem;
}
.sf-history-header {
  margin-bottom: .6rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem;
}
.sf-history-top-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .25rem;
}
.sf-history-badge {
  font-size: .75rem; font-weight: 800; color: var(--accent);
}
.sf-history-title {
  font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin: 0;
}
.sf-history-unit {
  font-size: .75rem; color: var(--muted); font-weight: 600;
}
.sf-history-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
  margin-bottom: .6rem;
}
.sf-hstat {
  padding: .35rem .3rem; border-radius: .6rem; text-align: center;
  border: 1px solid var(--line); background: var(--surface-2);
}
.sf-hstat-val { font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; }
.sf-hstat-lbl { font-size: .65rem; color: var(--muted); margin-bottom: .1rem; }
.sf-hstat.is-low { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.sf-hstat.is-high { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.sf-hstat.is-avg { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

.sf-history-stores {
  display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .35rem;
  margin-bottom: .6rem; -webkit-overflow-scrolling: touch;
}
.sf-store-chip {
  flex-shrink: 0; padding: .25rem .6rem; font-size: .72rem; font-weight: 700;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: all .15s ease; display: inline-flex; align-items: center; gap: .25rem;
}
.sf-store-chip.active, .sf-store-chip:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.sf-chip-logo {
  width: 14px; height: 14px; object-fit: contain; border-radius: 2px;
}
.sf-chip-cnt { opacity: .75; font-size: .65rem; }

/* SVG Line Chart Box */
.sf-chart-box {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem .6rem; margin-bottom: .6rem;
}
.sf-chart-stage {
  position: relative; width: 100%; height: 175px; overflow: visible;
}
.sf-chart-svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}
.sf-chart-axis-txt {
  font-size: 10px; fill: var(--muted); font-family: inherit; font-weight: 600;
}
.sf-chart-nodes {
  position: absolute; inset: 0; pointer-events: none;
}
.sf-chart-node {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; z-index: 2; cursor: pointer;
}
.sf-node-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.sf-chart-node:hover .sf-node-dot,
.sf-chart-node.is-live .sf-node-dot {
  transform: scale(1.35); background: #16a34a;
}
.sf-node-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--surface); border: 1.2px solid var(--line);
  border-radius: 999px; padding: .12rem .4rem;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
  font-size: .72rem; font-weight: 800; white-space: nowrap;
  color: var(--ink); position: absolute; transition: all .15s ease;
}
.sf-chart-node.pos-top .sf-node-pill { bottom: 10px; }
.sf-chart-node.pos-bottom .sf-node-pill { top: 10px; }
.sf-chart-node:hover .sf-node-pill {
  border-color: var(--accent); z-index: 10; transform: scale(1.08);
}
.sf-chart-node.is-live .sf-node-pill {
  border-color: #16a34a; background: #f0fdf4; color: #166534;
}
.sf-node-logo {
  width: 15px; height: 15px; object-fit: contain; border-radius: 2px;
}
.sf-node-price { font-variant-numeric: tabular-nums; }
.sf-node-pack, .sf-pack-tag {
  font-size: .62rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); padding: .04rem .2rem; border-radius: 3px;
}

/* Modal Actions Bar (تاريخ السعر + تنبيه + المفضلة) */
.sf-modal-action-bar {
  display: flex; align-items: center; gap: .4rem; margin-top: .5rem; flex-wrap: wrap;
}
.sf-modal-action-bar .pcard-act {
  width: auto !important; height: auto !important;
}
.sf-act-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .15s ease; line-height: 1; white-space: nowrap;
}
.sf-act-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
  color: var(--accent);
}
.sf-act-btn.is-active, .sf-act-btn:active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.sf-act-icon { font-size: .88rem; }
.sf-act-label { font-size: .75rem; font-weight: 700; }

/* Card Inline Action Bar (تاريخ السعر + تنبيه + المفضلة على بطاقات المنتجات) */
.sf-card-actions-row {
  display: flex; align-items: center; gap: .3rem; margin-top: .45rem; flex-wrap: wrap;
}
.sf-card-pcard-acts {
  display: inline-flex; align-items: center; gap: .3rem;
}
.sf-card-act-btn {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .22rem .48rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-soft); font-size: .72rem; font-weight: 700;
  cursor: pointer; transition: all .15s ease; line-height: 1; white-space: nowrap;
}
.sf-card-act-btn:hover {
  border-color: var(--accent); color: var(--accent); background: var(--surface);
}
.sf-card-act-btn .sf-act-icon { font-size: .8rem; }
.sf-card-act-btn .sf-act-label { font-size: .68rem; font-weight: 700; }

.sf-history-list {
  display: flex; flex-direction: column; gap: .45rem;
  max-height: 40vh; overflow-y: auto; padding-left: .2rem;
}
.sf-history-item {
  padding: .55rem .7rem; border-radius: .6rem;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .15s ease;
}
.sf-history-item.is-active-deal {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface));
}
.sf-hitem-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.sf-hitem-store {
  display: flex; align-items: center; gap: .4rem; font-size: .82rem;
}
.sf-hitem-logo {
  width: 20px; height: 20px; object-fit: contain; border-radius: 3px;
}
.sf-hitem-price {
  display: flex; align-items: baseline; gap: .35rem;
}
.sf-hprice-now { font-weight: 800; font-size: .92rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.sf-hprice-was { font-size: .75rem; color: var(--muted); text-decoration: line-through; }
.sf-hprice-pct {
  font-size: .65rem; font-weight: 700; background: var(--deal); color: #fff;
  padding: .08rem .3rem; border-radius: 3px;
}
.sf-hitem-sub {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-size: .7rem; color: var(--muted); margin-top: .25rem; flex-wrap: wrap;
}
.sf-hitem-flyer { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-hitem-badge-live { color: #16a34a; font-weight: 700; }
.sf-hitem-badge-arch { color: var(--muted); }
.sf-hitem-unit {
  font-size: .7rem; color: var(--ink-soft); margin-top: .2rem; font-weight: 600;
}

/* =====================================================================
   MODERN ENTERPRISE EXTENSIONS: Hero, Ribbon, AdSense, App Promo & Footer
   ===================================================================== */

/* Hero Banner */
.sf-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0F6B5C 0%, #084339 60%, #04251F 100%);
  color: #fff;
  padding: 2.2rem 2rem;
  margin: 1.25rem auto 1.75rem;
  box-shadow: 0 10px 30px rgba(15, 107, 92, 0.22);
}
.sf-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(62, 203, 176, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.sf-hero-content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}
.sf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .85rem;
  color: #c4f1e5;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.sf-hero-title {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 .6rem;
  color: #ffffff;
}
.sf-hero-desc {
  font-size: .95rem;
  color: #d1ece3;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.sf-hero-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.sf-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .88rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sf-hero-btn-primary {
  background: #ffffff;
  color: #0F6B5C;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.sf-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  color: #0F6B5C;
}
.sf-hero-btn-app {
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
}
.sf-hero-btn-app:hover {
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

/* Category Ribbon (شريط التصنيفات الدائري الملون) */
.sf-ribbon-wrap {
  margin: 1.2rem 0 1.5rem;
  position: relative;
}
.sf-ribbon-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.sf-ribbon-title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.sf-ribbon-list {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sf-ribbon-list::-webkit-scrollbar { display: none; }
.sf-ribbon-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .6rem .75rem;
  min-width: 4.8rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: all .18s ease;
  text-align: center;
}
.sf-ribbon-pill:hover,
.sf-ribbon-pill.active {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 4px 12px var(--accent-glow);
  transform: translateY(-2px);
}
.sf-ribbon-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--surface-2);
  transition: transform .15s ease;
}
.sf-ribbon-pill:hover .sf-ribbon-icon-circle,
.sf-ribbon-pill.active .sf-ribbon-icon-circle {
  background: var(--accent-soft);
  transform: scale(1.08);
}
.sf-ribbon-label {
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Google AdSense Responsive Slot */
.sf-ad-slot {
  margin: 1.5rem auto;
  text-align: center;
  overflow: hidden;
  max-width: 100%;
}
.sf-ad-leaderboard {
  min-height: 90px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: .5rem;
}
.sf-ad-label {
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: .25rem;
}

/* Desktop Side Gutter Ads (Skyscrapers) */
.sf-ad-side-gutter {
  display: none;
  position: fixed;
  top: 130px;
  width: 160px;
  z-index: 40;
  pointer-events: auto;
}
@media (min-width: 1560px) {
  .sf-ad-side-gutter { display: block; }
  .sf-ad-gutter-left { left: max(12px, calc((100vw - 1200px) / 2 - 180px)); }
  .sf-ad-gutter-right { right: max(12px, calc((100vw - 1200px) / 2 - 180px)); }
}
.sf-ad-skyscraper {
  min-height: 600px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  overflow: hidden;
}

/* Mobile Touch Optimization */
.store-chip, .sf-store-chip, .cat-chip, .sf-hotspot, .product-card, .sf-card-open, .sf-thumb, .sf-carousel-btn, .hscroll-btn, .btn, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(15, 107, 92, 0.12);
}

/* App Download Promo Card */
.sf-app-banner {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.sf-app-info {
  flex: 1;
  min-width: 16rem;
}
.sf-app-info h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.sf-app-info p {
  font-size: .88rem;
  color: var(--muted);
  margin: 0 0 .85rem;
  line-height: 1.45;
}
.sf-app-bullets {
  display: flex;
  gap: 1rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  flex-wrap: wrap;
}
.sf-app-badge-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #000;
  color: #fff;
  border-radius: 10px;
  padding: .55rem 1rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform .15s ease;
}
.sf-app-badge-link:hover {
  transform: translateY(-2px);
  color: #fff;
}
.sf-app-badge-logo {
  width: 22px;
  height: 22px;
}
.sf-app-badge-txt {
  text-align: right;
  line-height: 1.2;
}
.sf-app-badge-txt-sm {
  font-size: .62rem;
  color: #ccc;
  display: block;
}
.sf-app-badge-txt-lg {
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
}

/* Enterprise Footer */
.sf-footer-enterprise {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 3rem 0 1.5rem;
  margin-top: 3.5rem;
}
.sf-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.sf-footer-col h4 {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .9rem;
}
.sf-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sf-footer-links a {
  color: var(--muted);
  font-size: .82rem;
  text-decoration: none;
  transition: color .15s ease;
}
.sf-footer-links a:hover {
  color: var(--accent);
}
.sf-footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--muted);
}

/* ==========================================================================
   CAROUSEL / PROMOTIONAL BANNERS SLIDER
   ========================================================================== */
.sf-carousel-wrap {
  margin: 1rem auto 1.25rem;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.sf-carousel {
  position: relative;
  width: 100%;
  min-height: 155px;
  background: linear-gradient(135deg, var(--accent) 0%, #0a463c 60%, #12231f 100%);
  border-radius: 16px;
  overflow: hidden;
}
.sf-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.sf-carousel-slide {
  flex: 0 0 100%;
  min-height: 155px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  box-sizing: border-box;
  color: #ffffff;
  position: relative;
  background-size: cover;
  background-position: center;
}
.sf-carousel-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 40, 35, 0.92) 0%, rgba(15, 107, 92, 0.75) 50%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}
.sf-carousel-content {
  position: relative;
  z-index: 2;
  max-width: 68%;
}
.sf-carousel-decor {
  position: relative;
  z-index: 2;
  font-size: 3.5rem;
  line-height: 1;
  padding-inline-end: 1.5rem;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  pointer-events: none;
  animation: sf-float 4s ease-in-out infinite;
}
@keyframes sf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.sf-carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: .2rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: .4rem;
}
.sf-carousel-title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 .3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.sf-carousel-desc {
  font-size: .88rem;
  line-height: 1.45;
  margin: 0 0 .8rem;
  opacity: 0.92;
}
.sf-carousel-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1.15rem;
  background: var(--deal);
  color: #ffffff;
  font-weight: 800;
  font-size: .82rem;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(217, 72, 15, 0.4);
  transition: all var(--transition);
}
.sf-carousel-btn:hover {
  background: #f05a1e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(217, 72, 15, 0.5);
  color: #fff;
}
.sf-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all var(--transition);
}
.sf-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.08);
}
.sf-carousel-arrow.prev { right: .85rem; }
.sf-carousel-arrow.next { left: .85rem; }
.sf-carousel-dots {
  position: absolute;
  bottom: .6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  z-index: 3;
}
.sf-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s ease;
}
.sf-carousel-dot.active {
  width: 18px;
  background: #ffffff;
}

/* Hero fallback */
.sf-hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 2.2rem 2.5rem;
  margin: 1.25rem 0;
  box-shadow: var(--shadow-sm);
}
.sf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.sf-hero-title {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 .6rem;
}
.sf-hero-desc {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  max-width: 48rem;
}
.sf-hero-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}
.sf-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  transition: all var(--transition);
}
.sf-hero-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.sf-hero-btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.sf-hero-btn-app {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.sf-hero-btn-app:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ==========================================================================
   CATEGORY RIBBON BAR
   ========================================================================== */
.sf-ribbon-wrap {
  margin: 1.5rem auto;
}
.sf-ribbon-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.sf-ribbon-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.sf-ribbon-list {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding: .3rem .2rem .8rem;
  scrollbar-width: thin;
}
.sf-ribbon-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem .5rem .6rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 700;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.sf-ribbon-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.sf-ribbon-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 12px var(--accent-glow);
}
.sf-ribbon-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.sf-ribbon-pill.active .sf-ribbon-icon-circle {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   STORE BAR & CHIPS
   ========================================================================== */
.store-bar {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding: .3rem 0 .8rem;
  scrollbar-width: thin;
}
.store-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: .85rem;
  transition: all var(--transition);
  white-space: nowrap;
}
.store-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.store-chip-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
}
.store-chip-n {
  background: var(--surface-2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
}

/* ==========================================================================
   APP DOWNLOAD PROMO BANNER
   ========================================================================== */
.sf-app-banner {
  margin: 2.5rem 0 2rem;
  padding: 2.2rem 2.8rem;
  background: linear-gradient(135deg, #0d3830 0%, #0f6b5c 50%, #174b41 100%);
  border-radius: 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.sf-app-banner::after {
  content: '📱';
  position: absolute;
  left: 2%;
  bottom: -15px;
  font-size: 8rem;
  opacity: 0.08;
  pointer-events: none;
}
.sf-app-info h3 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 900;
  margin: 0 0 .5rem;
  color: #fff;
}
.sf-app-info p {
  font-size: .92rem;
  opacity: 0.9;
  line-height: 1.6;
  margin: 0 0 .9rem;
  max-width: 38rem;
}
.sf-app-bullets {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  font-weight: 700;
  opacity: 0.95;
}
.sf-app-badge-link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: #000000;
  color: #ffffff;
  padding: .75rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.sf-app-badge-link:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #fff;
}
.sf-app-badge-logo {
  width: 28px;
  height: 28px;
}
.sf-app-badge-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sf-app-badge-txt-sm {
  font-size: .68rem;
  opacity: 0.8;
  letter-spacing: .04em;
}
.sf-app-badge-txt-lg {
  font-size: 1.1rem;
  font-weight: 900;
}

/* ==========================================================================
   MODERN LOCATION & LANGUAGE MODAL (CLICFLYER STYLE)
   ========================================================================== */
.loc-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.loc-switch-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.loc-flag { font-size: 1.15rem; line-height: 1; }
.loc-sep { color: var(--line-strong); margin: 0 .15rem; }
.loc-lang { color: var(--muted); font-size: .8rem; }
.loc-arrow { font-size: .75rem; color: var(--muted); }

/* The Modal Container */
.sf-modal-overlay, .sf-modal, #sf-loc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sf-modal-overlay.open, .sf-modal.open, #sf-loc-modal.open {
  opacity: 1;
  visibility: visible;
}
.sf-modal-card {
  background: var(--surface);
  border-radius: 22px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.sf-modal-overlay.open .sf-modal-card,
.sf-modal.open .sf-modal-card,
#sf-loc-modal.open .sf-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.sf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.sf-modal-header h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.sf-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.sf-modal-close:hover {
  background: var(--deal-soft);
  color: var(--deal);
  border-color: var(--deal);
}
.sf-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sf-modal-section-title {
  font-size: .85rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .75rem;
}
.sf-country-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: 1.5rem;
}
.sf-country-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--transition);
}
.sf-country-card:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.sf-country-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.sf-country-card-flag { font-size: 2rem; }
.sf-country-card-name { font-weight: 800; font-size: 1rem; color: var(--ink); }
.sf-city-search-box {
  position: relative;
  margin-bottom: .85rem;
}
.sf-city-search-box input {
  width: 100%;
  padding: .65rem 1rem .65rem 2.4rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: .9rem;
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
}
.sf-city-search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.sf-city-search-icon {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.sf-gps-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem;
  border-radius: 12px;
  border: 1.5px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: .88rem;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all var(--transition);
}
.sf-gps-btn:hover {
  background: var(--accent);
  color: #fff;
}
.sf-city-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-height: 180px;
  overflow-y: auto;
  padding-right: .2rem;
  scrollbar-width: thin;
  margin-bottom: 1.5rem;
}
.sf-city-chip {
  padding: .45rem .85rem;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.sf-city-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}
.sf-city-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sf-lang-row {
  display: flex;
  gap: .65rem;
  margin-bottom: 1.5rem;
}
.sf-lang-btn {
  flex: 1;
  padding: .65rem;
  text-align: center;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
}
.sf-lang-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sf-modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface-2);
}
.sf-modal-apply-btn {
  flex: 1;
  padding: .8rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.sf-modal-apply-btn:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .sf-carousel-slide { padding: 1.1rem 1.25rem; min-height: 135px; }
  .sf-carousel-decor { font-size: 2.5rem; opacity: 0.7; padding-inline-end: .5rem; }
  .sf-carousel-content { max-width: 100%; }
  .sf-carousel-title { font-size: 1.15rem; margin-bottom: .25rem; }
  .sf-carousel-desc { font-size: .82rem; margin-bottom: .65rem; }
  .sf-app-banner { flex-direction: column; text-align: center; padding: 1.75rem 1.25rem; }
  .sf-country-grid { grid-template-columns: 1fr; }
}