/**
 * One stylesheet, two directions.
 *
 * Every position, margin and padding below uses CSS logical properties
 * (inline-start / inline-end rather than left / right). That is what lets
 * the Arabic and English layouts be genuinely the same layout, mirrored by
 * the <html dir> attribute, instead of a second stylesheet that drifts.
 */

/* ------------------------------------------------------------- variables */

:root {
  color-scheme: light dark;

  --brand: #146356;
  --brand-ink: #0c3f36;
  --brand-soft: #e3f1ed;

  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f0f0ee;
  --border: #e3e3df;
  --border-strong: #d2d2cc;

  --text: #1b1d1c;
  --text-muted: #6a6f6d;
  --text-faint: #8e938f;

  --urgent: #b3261e;
  /* Text ON the brand colour and on --urgent: white in light mode, dark
     in dark mode, where both are pale (the Impeccable audit, 2026-09-30:
     white on #4fbfa5 was 2.25:1). */
  --on-brand: #ffffff;
  --on-urgent: #ffffff;
  --urgent-soft: #fdeceb;
  --warn: #9a5b00;
  --warn-soft: #fdf1de;
  --calm: #2c6b4f;
  --calm-soft: #e6f3ec;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(20, 25, 23, .06), 0 1px 3px rgba(20, 25, 23, .04);
  --shadow: 0 2px 6px rgba(20, 25, 23, .07), 0 8px 24px rgba(20, 25, 23, .06);
  --shadow-lg: 0 12px 40px rgba(20, 25, 23, .18);

  --header-h: 116px;
  --max-w: 1400px;

  /* Segoe UI carries Arabic well on Windows, which is where this is read
     first; the Noto and Geeza entries cover Android and iOS. */
  --font: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic',
          'Geeza Pro', Tahoma, Arial, sans-serif;

}

/* The two dark blocks are separate on purpose: the media query serves the
   default "follow the system" state, the attribute serves an explicit
   choice from the theme button, and the attribute must win both ways. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #4fbfa5;
    --brand-ink: #7fd8c2;
    --brand-soft: #12302a;

    --bg: #101312;
    --surface: #191d1c;
    --surface-2: #212625;
    --border: #2b3130;
    --border-strong: #3a4140;

    --text: #e8ebea;
    --text-muted: #a2aaa7;
    --text-faint: #7d8683;

    --urgent: #ff8a80;
    --on-brand: #0b2d27;
    --on-urgent: #3a0d09;
    --urgent-soft: #3a1f1d;
    --warn: #f0b356;
    --warn-soft: #38290f;
    --calm: #7ed4a6;
    --calm-soft: #16301f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);

  }
}

:root[data-theme='dark'] {
  --brand: #4fbfa5;
  --brand-ink: #7fd8c2;
  --brand-soft: #12302a;

  --bg: #101312;
  --surface: #191d1c;
  --surface-2: #212625;
  --border: #2b3130;
  --border-strong: #3a4140;

  --text: #e8ebea;
  --text-muted: #a2aaa7;
  --text-faint: #7d8683;

  --urgent: #ff8a80;
  --on-brand: #0b2d27;
  --on-urgent: #3a0d09;
  --urgent-soft: #3a1f1d;
  --warn: #f0b356;
  --warn-soft: #38290f;
  --calm: #7ed4a6;
  --calm-soft: #16301f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);

}

/* ----------------------------------------------------------------- reset */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p { margin: 0; }

/* The overlay and the toast both set display, which has the same
   specificity as the browser's own [hidden] rule and therefore beats it by
   source order — the gallery rendered over the page on first load until
   this was here. Anything toggled with .hidden needs this. */
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

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

.skip-link {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: 12px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: inset-block-start .15s;
}
.skip-link:focus { inset-block-start: 12px; }

/* ---------------------------------------------------------------- header */

.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}

.app-header__bar,
.app-header__tools {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 28px);
}

.app-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.brand__mark {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  flex: none;
}

.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.brand__meta { font-size: 12px; color: var(--text-faint); }

.app-header__actions { display: flex; align-items: center; gap: 6px; flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn--square { padding: 7px; }
.icon-btn--lang { min-inline-size: 42px; justify-content: center; }
.icon-btn--ghost { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.icon-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* One icon, two glyphs: show whichever the *opposite* of the current theme
   is, since the button switches to it. */
.icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-sun { display: none; }
  :root:not([data-theme='light']) .icon-moon { display: inline; }
}
:root[data-theme='dark'] .icon-sun { display: none; }
:root[data-theme='dark'] .icon-moon { display: inline; }
:root[data-theme='light'] .icon-sun { display: inline; }
:root[data-theme='light'] .icon-moon { display: none; }

/* ----------------------------------------------------------------- tools */

.app-header__tools { padding-block-end: 10px; display: grid; gap: 9px; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  transition: border-color .15s, background .15s;
}
.search:focus-within { border-color: var(--brand); background: var(--surface); }
.search input {
  flex: 1;
  min-inline-size: 0;
  padding-block: 9px;
  border: 0;
  background: none;
  outline: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}

.filters {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
  flex: 1;
  min-width: 0;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all .15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-active {
  color: var(--store-on, #fff);
  background: var(--store-color, var(--brand));
  border-color: transparent;
}
.chip__count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint);
}
.chip__star { color: var(--store-text, var(--store-color, var(--brand))); font-size: 12px; line-height: 1; }
.chip.is-active .chip__star { color: var(--store-on, #fff); }
.chip.is-active .chip__count { background: rgba(255, 255, 255, .25); color: var(--store-on, #fff); }

.filters__right { display: flex; align-items: center; gap: 8px; flex: none; }

/* Second chip row: the classes inside whatever is showing. Same chip, one
   step quieter, so it reads as a refinement of the store row above it. */
.chips--class { padding-block-start: 2px; }
.chips--class .chip { font-weight: 600; background: var(--surface-2); }
.chips--class .chip.is-active { background: var(--brand); color: var(--on-brand); }

.toggle-pill {
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.toggle-pill.is-active {
  color: var(--urgent);
  background: var(--urgent-soft);
  border-color: color-mix(in srgb, var(--urgent) 30%, transparent);
}

.select { display: inline-flex; align-items: center; gap: 6px; }
.select__label { font-size: 12px; color: var(--text-faint); }
.select select {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.segmented {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.segmented button {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
}
.segmented button.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ main */

main {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 18px clamp(12px, 3vw, 28px) 60px;
}

.summary {
  font-size: 13px;
  color: var(--text-faint);
  margin-block-end: 14px;
}

.store-section { margin-block-end: 34px; scroll-margin-block-start: var(--header-h); }

.store-section__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-block-end: 12px;
  padding-block-end: 10px;
  border-block-end: 2px solid var(--store-color, var(--brand));
}

.store-section__titles { flex: 1; min-width: 0; }
/* The logo and the name link to the shop's page - just those, sized to
   their content, so the rest of the row stays free. */
.to-store { color: inherit; text-decoration: none; }
a.to-store:hover, a.to-store:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.store-section__logo { flex: none; display: inline-flex; border-radius: 50%; }
.store-section__name { display: inline; }
.card__who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-inline-size: 100%; }
.viewer__title .to-store { color: inherit; }
.store-section__titles h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.store-section__meta { font-size: 12px; color: var(--text-faint); }
.store-section__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.store-section__link:hover { color: var(--text); border-color: var(--border-strong); }

/* The heart on a shop's header.

   Outline when off, filled in the shop's own colour when on - the fill
   is the whole signal, so it must survive a colourblind reader and a
   greyscale print. It also sits at 34px square, which is the smallest
   thing a thumb hits reliably on a phone. */
.fav-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.fav-btn:hover { color: var(--text); border-color: var(--border-strong); }
.fav-btn.is-on {
  color: var(--store-text, var(--store-color, #2f6f62));
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.fav-btn.is-on svg { fill: currentColor; }
/* "+12 more offers" under a shop whose cards were capped at two rows. */
.grid__more {
  justify-self: start;
  margin-block-start: 10px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.grid__more:hover { border-color: var(--store-color, #2f6f62); }
.grid__more span {
  /* The sign flips to the wrong end inside an RTL run - "12+". */
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  color: var(--store-text, var(--store-color, #2f6f62));
}

/* ----------------------------------------------------- an offer's pages

   The second column of an offer row. It scrolls sideways on its own and
   never grows the page: min-inline-size on the scroller is what keeps a
   sixty-page flyer from widening the whole layout. */
.page-strip {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px 12px 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Light grey. White lost the pages against the page, and a wash of
     each shop's own colour was tried and dropped: next to flyers that
     are already loud, a pink or orange band was one colour too many.
     Grey separates without competing. The shop's colour still carries
     the section header, the post's edge and the tie between them. */
  background: var(--surface-2);
}

.page-strip__scroll {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  gap: clamp(10px, 1.6vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  /* NOT touch-action: pan-x. That reads as "only horizontal panning is
     allowed for this touch", so a vertical swipe anywhere over the strip
     was thrown away instead of scrolling the page - on a phone the whole
     band became a dead zone you had to scroll around. Browsers already
     direction-lock a horizontal scroller inside a vertical page, so the
     default does the right thing and the pin only broke it. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  padding-block-end: 8px;
}

.page-strip__item {
  flex: 0 0 auto;
  /* Exactly the width of the post beside it. Same size, different object:
     the post carries the shop's name and dates, a page carries a number. */
  inline-size: var(--card-w, clamp(150px, 40vw, 210px));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  text-align: start;
  position: relative;
}
.page-strip__item:hover { border-color: var(--border-strong); }
.page-strip__item:focus-visible {
  outline: 2px solid var(--store-color, #2f6f62);
  outline-offset: 2px;
}
.page-strip__item img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  background: var(--surface-2, #f3f3f1);
}

.page-strip__num {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  min-inline-size: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.page-strip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 8px;
}
.page-strip__tag {
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--chip-bg, rgba(127, 127, 127, .12));
  color: var(--text-muted);
  white-space: nowrap;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-strip__tag--more { font-weight: 600; }

/* How many pages are still off the end. On a desktop there is no thumb,
   so this is the control rather than a label - pressing it moves the
   strip on by one screen. inset-inline-end puts it on whichever side
   "later" is, which flips with the language. */
.page-strip__more {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
  min-inline-size: 42px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.page-strip__more:hover { border-color: var(--store-color, #2f6f62); }
/* "+59" is a sign and a number, and in an RTL run the sign lands on the
   wrong end - it rendered as "59+". The pin goes on the TEXT, not the
   button: inset-inline-end resolves against the element's own direction,
   so pinning the button moved it to the leading edge instead. */
.page-strip__more span { direction: ltr; unicode-bidi: isolate; }


/* The card that opened it, so it is obvious which one you are looking at. */

@media (prefers-reduced-motion: reduce) {
  .page-strip__scroll { scroll-behavior: auto; }
}

.fav-btn:focus-visible {
  outline: 2px solid var(--store-color, #2f6f62);
  outline-offset: 2px;
}

/* A shop whose colour is light (SmartBuy's yellow, the owner 2026-11-04): black
   letters on its colour, and a darker shade of it for words on white. Colours
   in use today stay white-lettered: only lightness above 75 turns the letters
   black. Without relative colours a browser keeps the white letters. */
@supports (color: lch(from red l c h)) {
  [style*="--store-color"] {
    --store-on: lch(from var(--store-color) calc((75 - l) * 100) 0 0);
    --store-text: lch(from var(--store-color) min(l, 45) c h);
  }
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--store-color, var(--brand));
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.avatar--md { inline-size: 40px; block-size: 40px; font-size: 14px; }
.avatar--sm { inline-size: 22px; block-size: 22px; font-size: 9px; }

/* ----------------------------------------------------------------- cards */

/* One offer per line: the post, and its pages beside it.

   It used to be a grid of posts, with the pages hidden until you opened
   one. A flyer is a stack of pages and a post is its cover, so the two
   belong on the same line - and nothing has to be pressed to find out
   what a shop is actually selling. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}

.offer-row {
  position: relative;
  display: grid;
  /* The post, then everything else. The browser mirrors this for Arabic
     because the columns are laid out in reading order, not in pixels. */
  grid-template-columns: var(--card-w) minmax(0, 1fr);
  gap: var(--row-gap);
  align-items: start;
  --card-w: clamp(150px, 40vw, 210px);
  --row-gap: clamp(10px, 1.6vw, 18px);
  --row-pad: 0px;
}

/* A short line across the gutter: these pages came out of that post.
   Without it the two columns read as a card and an unrelated strip of
   pictures that happen to sit next to each other. */
.offer-row::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--row-pad) + var(--card-w));
  inset-block-start: 64px;
  inline-size: var(--row-gap);
  block-size: 2px;
  border-radius: 2px;
  background: var(--store-color, var(--brand));
  opacity: .5;
}
.offer-row--alone::after { content: none; }
/* An offer with a single page has nothing to sit beside it. */
.offer-row--alone { grid-template-columns: var(--card-w); }

/* ------------------------------------------------ the phone's offer row

   The post's cover IS page one. Side by side on a 375px screen that
   means the same picture twice, in the place with the least room to
   spare - so on a phone the post becomes the line of text it really is
   (shop, dates, how long is left) and the pages take the whole width.
   An announcement page is still the first thing you see, because it is
   still page one.

   Since v63 this is only a SEARCH's layout - the pages that matched are
   the answer there. Everywhere else a phone shows covers (below). */
@media (max-width: 640px) {
  .offer-row:not(.offer-row--cover) {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    /* Two pages and a hint of the third, instead of one and a half. */
    --card-w: 43vw;
  }
  /* Nothing to cross: the pages are under the line, not beside it. */
  .offer-row:not(.offer-row--cover)::after { content: none; }

  .offer-row:not(.offer-row--cover) > .card {
    border: 0;
    background: none;
    border-radius: 0;
  }
  .offer-row:not(.offer-row--cover) > .card:hover { transform: none; box-shadow: none; }
  .offer-row:not(.offer-row--cover) > .card .card__media,
  .offer-row:not(.offer-row--cover) > .card .card__caption { display: none; }
  .offer-row:not(.offer-row--cover) > .card .card__body {
    padding: 0 2px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
  }
  .offer-row:not(.offer-row--cover) > .card .card__flags { display: flex; }
  /* A lone page in a full-width strip looked like a thumbnail somebody
     had forgotten to finish. With nothing to scroll past, it can have
     the room. */
  .page-strip__item:only-child { inline-size: min(68vw, 260px); }
  /* A dimmed line of text is just hard to read; the pages beside it
     carry the emphasis on their own. */
  .offer-row:not(.offer-row--cover) > .card--context { opacity: 1; filter: none; }
}

/* The fifth offer on: behind "+N more offers" until it is pressed. */
.offer-row.is-capped { display: none; }
/* Its desktop job is done by the button; a shelf counts for itself. */
.shelf { position: relative; }
.shelf__more { display: none; }

/* ------------------------------------------------ the phone's covers

   Each offer as its cover: the post's picture with its badges, and its
   dates. Pressing it opens the viewer at page one. The page strip is still
   built - a window can widen - but not shown, and its images are lazy, so
   a hidden strip fetches nothing.

   Two shapes. A shop on the home page is a SHELF - one row that scrolls
   sideways, two covers and the edge of a third, so nine shops are four
   screens rather than twelve. A list that is not one shop's (every offer,
   or a shop's own page) is two columns. */
@media (max-width: 640px) {
  .offer-row--cover { display: block; }
  .offer-row--cover::after { content: none; }
  .offer-row--cover > .page-strip { display: none; }
  .offer-row--cover > .card { block-size: 100%; }
  .offer-row--cover > .card .card__caption { display: none; }
  .offer-row--cover > .card .card__body { padding: 7px 9px 9px; }

  .grid--covers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    align-items: stretch;
  }

  .grid--shelf {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* See .page-strip__scroll: no touch-action pin, or a vertical swipe
       over the shelf stops scrolling the page. */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block-end: 2px;
  }
  .grid--shelf::-webkit-scrollbar { display: none; }
  .grid--shelf > .offer-row {
    flex: 0 0 40vw;
    scroll-snap-align: start;
  }
  /* Every offer is on the shelf - sideways they cost no height. */
  .grid--shelf > .offer-row.is-capped { display: block; }
  .store-section--shelf > .grid__more { display: none; }
  /* The shelf's name is the section's header; saying it on every cover
     is a line each. */
  .grid--shelf .card__head { display: none; }
  .shelf__more { display: block; }
  .shelf__more[hidden] { display: none; }
}


.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}

.card__media {
  position: relative;
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Crop from the TOP, not the middle: a flyer's top is its store name
     and headline - the face page's whole announcement - and a centred
     crop of a tall page showed a strip of products instead. */
  object-position: 50% 0;
  transition: transform .3s ease;
}
.card:hover .card__media img { transform: scale(1.03); }
.card__placeholder {
  display: grid;
  place-items: center;
  block-size: 100%;
  color: var(--text-faint);
}

.card__count {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  min-inline-size: 24px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .62);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.badge {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.badge--urgent { color: var(--on-urgent); background: var(--urgent); }
.badge--warn { color: #fff; background: var(--warn); }
.badge--calm { color: var(--calm); background: var(--calm-soft); }
.badge--muted { color: var(--text-muted); background: var(--surface); }
.badge--new {
  inset-block-end: auto;
  inset-block-start: 8px;
  inset-inline-start: auto;
  inset-inline-end: 8px;
  color: var(--on-brand);
  background: var(--brand);
}

.card__body { padding: 10px 12px 13px; display: grid; gap: 4px; }
.card__head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.card__store {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__range { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* The phone's copy of the cover badges. Off by default: on a screen with
   room for the picture, the picture carries them. */
.card__flags { display: none; gap: 6px; flex-wrap: wrap; }
.card__flag {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.card__flag--urgent { color: var(--on-urgent); background: var(--urgent); }
.card__flag--warn { color: #fff; background: var(--warn); }
.card__flag--calm { color: var(--calm); background: var(--calm-soft); }
.card__flag--muted { color: var(--text-muted); background: var(--surface-2); }
.card__flag--new { color: var(--on-brand); background: var(--brand); }
.card__caption {
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.5;
  /* Two lines is enough to tell one weekly flyer from another; the full
     text lives in the gallery. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------- skeletons */

.card--skeleton { pointer-events: none; }
.card--skeleton .card__media,
.skeleton-line {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-line { block-size: 11px; border-radius: 4px; }
.skeleton-line--short { inline-size: 55%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .card--skeleton .card__media, .skeleton-line { animation: none; }
}

/* ---------------------------------------------------------------- states */

.state {
  max-inline-size: 460px;
  margin: 60px auto;
  padding: 30px 26px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.state__title { font-size: 17px; font-weight: 700; margin-block-end: 6px; }
.state__body { font-size: 14px; color: var(--text-muted); }
.state--error { border-color: color-mix(in srgb, var(--urgent) 35%, var(--border)); }

.btn {
  margin-block-start: 16px;
  padding: 9px 20px;
  font-weight: 600;
  color: var(--on-brand);
  background: var(--brand);
  border: 0;
  border-radius: 999px;
}

/* ---------------------------------------------------------------- viewer */

/* The basket rows are used in two places now: over the dark image viewer,
   and on the store page over the ordinary card surface. Mapping the same
   token names onto the page palette at :root means one set of row styles
   serves both - the viewer overrides them below for its own surface, and
   everywhere else they follow the site's normal theme. */
:root {
  --v-bg: var(--surface);
  --v-ink: var(--text);
  --v-ink-2: var(--text-muted);
  --v-ink-3: var(--text-faint);
  --v-line: var(--border);
  --v-line-strong: var(--border-strong);
  --v-fill: var(--surface-2);
  --v-fill-2: var(--border);
  --v-focus: var(--brand);
}

/* ------------------------------------------------------------ the viewer
   The image viewer follows the site's theme rather than being permanently
   dark. Every colour inside it comes from these tokens so the whole
   surface flips in one place.

   A flyer page is mostly WHITE, so on a white viewer it would bleed into
   the chrome and lose its edge - which is why lightboxes are usually dark.
   The frame carries a border and a shadow in light mode to give the page
   back its boundary. */
.viewer {
  --v-bg: #ffffff;
  --v-ink: #1b1d1c;
  --v-ink-2: rgba(27, 29, 28, .66);
  --v-ink-3: rgba(27, 29, 28, .48);
  --v-line: rgba(27, 29, 28, .14);
  --v-line-strong: rgba(27, 29, 28, .28);
  --v-fill: rgba(27, 29, 28, .05);
  --v-fill-2: rgba(27, 29, 28, .10);
  --v-focus: rgba(27, 29, 28, .55);
  --v-page-edge: 1px solid rgba(27, 29, 28, .12);
  --v-page-shadow: 0 2px 10px rgba(20, 25, 23, .10), 0 12px 32px rgba(20, 25, 23, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .viewer { 
    --v-bg: #0a0c0b;
    --v-ink: #ffffff;
    --v-ink-2: rgba(255, 255, 255, .66);
    --v-ink-3: rgba(255, 255, 255, .46);
    --v-line: rgba(255, 255, 255, .12);
    --v-line-strong: rgba(255, 255, 255, .24);
    --v-fill: rgba(255, 255, 255, .09);
    --v-fill-2: rgba(255, 255, 255, .14);
    --v-focus: rgba(255, 255, 255, .7);
    --v-page-edge: 0;
    --v-page-shadow: none;
   }
}
:root[data-theme='dark'] .viewer { 
    --v-bg: #0a0c0b;
    --v-ink: #ffffff;
    --v-ink-2: rgba(255, 255, 255, .66);
    --v-ink-3: rgba(255, 255, 255, .46);
    --v-line: rgba(255, 255, 255, .12);
    --v-line-strong: rgba(255, 255, 255, .24);
    --v-fill: rgba(255, 255, 255, .09);
    --v-fill-2: rgba(255, 255, 255, .14);
    --v-focus: rgba(255, 255, 255, .7);
    --v-page-edge: 0;
    --v-page-shadow: none;
   }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--v-bg);
  color: var(--v-ink);
  padding-block-end: env(safe-area-inset-bottom);
}

.viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(10px, 2vw, 20px);
  border-block-end: 1px solid var(--v-line);
}
.viewer__title { min-width: 0; }
.viewer__title strong { display: block; font-size: 15px; }
.viewer__dates { font-size: 12px; color: var(--v-ink-2); }
/* A single-product image's way to its whole flyer (gallery.js toFlyer). */
.viewer__toflyer { margin-inline-start: 10px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--store-color, var(--brand)); background: transparent;
  color: inherit; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.viewer__toflyer:hover { background: var(--store-color, var(--brand)); color: var(--store-on, #fff); }
.viewer__top-actions { display: flex; gap: 6px; flex: none; }

.viewer__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 0;
  /* Vertical panning stays with the browser so a tall flyer can be
     scrolled after pinch-zoom; horizontal is ours, for swiping. */
  touch-action: pan-y pinch-zoom;
}

.viewer__frame {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  /* minmax(0, 1fr) rather than the implicit auto track: an auto row sizes
     itself to the image, so the image's own max-block-size: 100% resolved
     against its own height and every tall flyer overflowed the screen
     instead of fitting it. Pinning the track to the frame is what makes
     "contain" actually contain. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: auto;
}
.viewer__frame img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  border: var(--v-page-edge);
  box-shadow: var(--v-page-shadow);
}

/* Fixed to the SCREEN, not centred on the stage: the stage's height
   changes with the product list under each page, and the arrows moved
   up and down from page to page. */
.viewer__nav {
  position: fixed;
  inset-block-start: 42vh;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  color: #fff;
  /* The site's green (the logo's), fixed rather than var(--brand): dark
     mode's brand is a light teal that white chevrons vanish on. Was
     rgba(0,0,0,.45) / .7 on hover - the owner is trying the green. */
  background: color-mix(in srgb, #146356 88%, transparent);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  backdrop-filter: blur(6px);
}
.viewer__nav:hover { background: #0e4a40; }
.viewer__nav--prev { inset-inline-start: 12px; }
.viewer__nav--next { inset-inline-end: 12px; }
/* The chevrons are NOT flipped under RTL, and that is deliberate.
   This rule used to mirror them, from a time when the buttons themselves
   mirrored too. They no longer do - the filmstrip runs left-to-right in
   both languages, so the buttons are pinned to physical sides further
   down. With the buttons fixed and the icons still flipping, both arrows
   ended up pointing INWARDS: the left one said "forward", the right one
   said "back", and neither matched where it took you. */
.viewer--single .viewer__nav,
.viewer--single .viewer__strip,
.viewer--single .viewer__counter { display: none; }

/* ---------------------------------------------- the phone way through

   The pages run down the overlay and you scroll, the way every other
   screen on the phone works. No arrows: there is nothing to press,
   which is the point. */
.viewer__scroll { display: none; }
/* The chrome that a scroll makes unnecessary. The filmstrip is a way of
   reaching page 40 without passing 39 - which is what scrolling is - and
   the counter is printed on every page anyway. Both were taking half the
   screen away from the flyer. */
.viewer--vertical .viewer__strip,
.viewer--vertical .viewer__counter { display: none; }
.viewer--vertical .viewer__frame,
.viewer--vertical .viewer__nav { display: none; }
.viewer--vertical .viewer__stage {
  /* Both directions belong to the browser here - this is a page of
     pictures, not a swipeable deck. */
  touch-action: pan-y pinch-zoom;
  align-items: stretch;
}
.viewer--vertical .viewer__scroll {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* Proximity, not mandatory: a flyer page is taller than a phone, so a
     page that has to be scrolled THROUGH must not be yanked back to its
     own top halfway down. */
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 14px;
  display: grid;
  gap: 14px;
}
.viewer__page {
  margin: 0;
  position: relative;
  scroll-snap-align: start;
  scroll-margin-block-start: 8px;
}
.viewer__page img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 10px;
  border: var(--v-page-edge);
  box-shadow: var(--v-page-shadow);
  /* What shows while a page is still arriving. A flyer is printed on
     white, so white is what it should fade in from. */
  background: var(--v-bg);
  transition: margin .18s ease, border-radius .18s ease;
}

/* Tapped: the page gives up the scroller's margins and the tally comes
   up for it. Not a zoom - the reader wants the page and its prices, not
   a bigger picture of the page. */
.viewer__page.is-open img {
  margin-inline: -8px;
  inline-size: calc(100% + 16px);
  max-inline-size: none;
  border-radius: 0;
}
/* A ring would be half off the screen on a page this wide, so the page
   number carries the shop's colour instead - it says which page the
   tally below belongs to while you scroll. */
.viewer__page.is-open .viewer__pagenum {
  background: var(--store-color, var(--brand));
}
/* The number rides on the page, because in a scroll there is no other
   way to know which one of eighty you are looking at. */
/* Top-left, physically (the owner, 2026-10-19: at the bottom it covered
   prices; the top is much less likely to). */
.viewer__pagenum {
  position: absolute;
  inset-block-start: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  direction: ltr;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
}

.viewer__bottom {
  padding: 8px clamp(10px, 2vw, 20px) 10px;
  border-block-start: 1px solid var(--v-line);
  display: grid;
  gap: 8px;
}
.viewer__counter {
  font-size: 12px;
  color: var(--v-ink-2);
  text-align: center;
  /* "1 / 4" is a fraction, not a sentence. Left to inherit RTL it renders
     as "4 / 1" — the browser is right about bidi and wrong about meaning. */
  direction: ltr;
}

.viewer__strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block-end: 2px;
}
.thumb {
  flex: none;
  inline-size: 52px;
  block-size: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  overflow: hidden;
  background: var(--v-fill);
  opacity: .55;
  transition: opacity .15s, border-color .15s;
}
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thumb.is-active { opacity: 1; border-color: var(--v-ink); }
.thumb:hover { opacity: 1; }

.viewer__caption {
  font-size: 13px;
  color: var(--v-ink-2);
  max-block-size: 34vh;
  overflow-y: auto;
}
.viewer__caption summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--v-ink-2);
  font-size: 12px;
}
.viewer__caption p { margin-block-start: 6px; line-height: 1.7; white-space: pre-wrap; }

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed;
  inset-block-end: max(18px, env(safe-area-inset-bottom));
  inset-inline: 0;
  z-index: 55;
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  font-size: 14px;
  color: #fff;
  background: #23282a;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.toast__action {
  font-weight: 700;
  color: #7fd8c2;
  background: none;
  border: 0;
  padding: 0;
}

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

.app-footer {
  padding: 22px clamp(12px, 3vw, 28px) 34px;
  border-block-start: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

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

@media (max-width: 820px) {
  :root { --header-h: 150px; }

  .filters { flex-direction: column; align-items: stretch; gap: 8px; }
  /* At 375px the three controls total slightly more than the viewport, so
     the segmented toggle was clipped off the edge. Scrolling the row is the
     same gesture the store chips directly above already use, which reads as
     intentional in a way a wrapped orphan control does not. */
  .filters__right {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px;
  }
  .filters__right::-webkit-scrollbar { display: none; }
  .filters__right > * { flex: none; }
  .select__label, .menu__label { display: none; }
  /* The view switch is the row's most-used control, so on a phone it
     comes first, where it is always fully on screen. */
  .filters__right > .segmented { order: -1; }
  .brand__mark { inline-size: 34px; block-size: 34px; }
  .icon-btn span:not(#langLabel):not(#acctLabel):not(.icon-btn__words) { display: none; }
  .acct-btn { padding: 6px 10px; font-size: 12px; }
  .icon-btn { padding: 7px; }
  .icon-btn--lang { padding: 7px 10px; }

  .card__caption { -webkit-line-clamp: 3; }
  .viewer__nav { inline-size: 38px; block-size: 38px; }
  .thumb { inline-size: 44px; block-size: 44px; }
}

@media (max-width: 420px) {
  /* Room for the words on the account button: the name keeps one line
     and gives way at the end, rather than stacking into three. */
  .brand { gap: 8px; }
  .brand__name, .brand__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__name { font-size: 15px; }
  .brand__meta { font-size: 11px; }
  .acct-btn { padding: 6px 9px; }
  /* The words say it; the head icon is the part that can go. */
  .acct-btn svg { display: none; }
  .brand__mark { inline-size: 30px; block-size: 30px; }
  .app-header__actions { gap: 4px; }
  .store-section__link { display: none; }
  .fav-btn { inline-size: 36px; block-size: 36px; }
}

@media print {
  .app-header, .app-footer, .viewer, .toast { display: none !important; }
  .card { break-inside: avoid; border-color: #ccc; }
}


/* ============================================================ search results
   Everything below is the product layer: the answer line, the browse panel,
   and the flyer pages that a search actually matched. */

.answer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: 14px 4px;
  padding: 11px 15px;
  background: var(--calm-soft);
  border: 1px solid color-mix(in srgb, var(--calm) 28%, transparent);
  border-radius: var(--radius);
}
.answer strong {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--calm);
}
.answer__what { font-size: 14px; font-weight: 700; }
.answer__store {
  font-size: 13px;
  font-weight: 700;
  color: var(--store-on, #fff);
  background: var(--store-color, var(--brand));
  border-radius: 999px;
  padding: 3px 11px;
}
.answer__price {
  margin-inline-start: auto;
  font-size: 16px;
  font-weight: 800;
  color: var(--calm);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- browse panel */

.chip--browse { font-weight: 700; color: var(--brand); border-color: var(--brand); }
.chip--browse, .toggle-pill--browse { display: inline-flex; align-items: center; gap: 6px; }
.chip__menu { flex: none; }
.toggle-pill--browse { font-weight: 700; color: var(--brand); border-color: var(--brand); }

/* Floats over the page instead of pushing it down: opening a category
   list should not move the results you were about to read. */
.browse-sheet {
  position: fixed;
  inset-block-start: var(--drop-top, 120px);
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  padding: 0 clamp(12px, 3vw, 28px);
  /* No dim and no blur: the offers behind stay readable, which is what
     keeps the page feeling minimal rather than modal. */
  pointer-events: none;
}
.browse-sheet > .browse { pointer-events: auto; }

.browse {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 16px clamp(14px, 2.4vw, 24px) 18px;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-block-size: min(58vh, 520px);
  overflow-y: auto;
}
.browse__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.browse__col h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: 5px;
  margin-block-end: 3px;
  border-block-end: 1px solid var(--border);
}
.browse__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  text-align: start;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.browse__ic { flex: none; inline-size: 24px; block-size: 24px; object-fit: contain; }
.browse__item:hover { background: var(--surface-2); color: var(--text); }
.browse__item.is-active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.browse__n {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- matching pages */

/* A search row: the same two columns, with the pages that matched in
   place of all of them. One rule runs down the whole row so the post and
   its matches read as a single object rather than a card with an
   unexplained grid beside it. */
.offer-row--match {
  padding-inline-start: 14px;
  --row-pad: 14px;
}
.offer-row--match::before {
  content: '';
  position: absolute;
  inset-block: 0 0;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--store-color, var(--brand));
  opacity: .45;
}
/* A short spur from the rule into the strip's header, where the label is. */
.offer-row--match .matches { position: relative; }
.offer-row--match .matches::before {
  content: '';
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: -8px;
  inline-size: 8px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--store-color, var(--brand));
  opacity: .45;
}

/* The post is no longer the answer, so it recedes - dimmed and slightly
   desaturated rather than blurred, because blurring a card that still has
   to be readable just looks broken. */
.card--context { opacity: .55; filter: saturate(.75); }
.card--context:hover { opacity: 1; filter: none; }

.matches__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}
.matches__arrow { color: var(--store-text, var(--store-color, var(--brand))); font-size: 13px; }
.matches__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.matches {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px;
}
.matches__grid {
  /* Flyer pages are a numbered sequence, so they run left-to-right in both
     languages - a slideshow, not a book. */
  direction: ltr;
  display: grid;
  /* The same width as the post beside them, so a page that MATCHED is the
     size of the card it belongs to. At 88px these were contact-sheet
     thumbnails: you could see that something matched but not what, which
     is the one thing the reader asked. */
  grid-template-columns: repeat(auto-fill,
                                minmax(var(--card-w, 210px), 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
.match {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.match:hover { border-color: var(--brand); transform: translateY(-1px); }
.match img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
/* A single-product image is its whole 2:3 page - cropped to 4:5 it lost
   the shop's name at the top and the dates at the bottom. */
.match--single img { aspect-ratio: 2 / 3; object-fit: contain; }
.match__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 5px 5px 6px;
  direction: initial;
}
.tag {
  /* Names run "شامبو ... Assorted Dishwashing Liquid 1.8 Ltr" - the Latin
     half is long and unbreakable, so it must be allowed to wrap and, past
     that, to be clipped rather than push the card open. */
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px; /* 10px was the smallest text on the site (the audit) */
  font-weight: 700;
  line-height: 1.35;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tag--hit { color: var(--on-brand); background: var(--brand); border-color: transparent; }

/* The gallery filmstrip is the same sequence, so it reads the same way. */
.viewer__strip, .viewer__frame { direction: ltr; }

@media (max-width: 640px) {
  /* 74px was left over from when matched pages were a contact sheet. It
     survived the change to card-sized pages and quietly undid it on
     phones: the post printed 337x549 while the pages that ANSWERED the
     search printed 100x226, three to a row. The answer should be the
     biggest thing on screen, not the smallest. */
  .matches__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .answer__price { margin-inline-start: 0; }

  /* And the post itself steps back. It only has to say which shop and
     when; the pages beside it are what was asked for. */
  .offer-row--match > .card .card__caption { display: none; }
}


/* Long bilingual product names: let them wrap, and never let one push its
   container wider than the column it sits in. */
.match, .match__tags, .browse__item { min-inline-size: 0; }
.browse__item span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}
.answer__what { min-inline-size: 0; overflow-wrap: anywhere; }
.card__caption, .store-section__titles h2 { overflow-wrap: anywhere; }


/* The filmstrip runs left-to-right in both languages, so the buttons that
   drive it are pinned to physical sides: left goes back, right goes on.
   Logical properties would mirror them under RTL and send the left arrow
   forwards, which is what made the click feel like it fought the page. */
.viewer__nav--prev { inset-inline: auto; left: 12px; right: auto; }
.viewer__nav--next { inset-inline: auto; right: 12px; left: auto; }


.tag--more { color: var(--text); background: var(--surface-2); }


/* ------------------------------------------------------- the picked list */

.browse-card {
  max-width: var(--max-w);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  pointer-events: auto;
}
/* The panel may never be taller than the sheet it lives in, and the
   footer may never be the part that overflows.

   `.browse` caps itself at min(58vh, 520px), which says nothing about how
   much room is actually left below the header. On a 620px-tall phone the
   sheet was 360px and the card 439px, so "Show offers" sat 78px below the
   fold - and since the sheet is position:fixed, no amount of scrolling the
   page brought it back. A shopper could tick Chicken at the top of the
   list and have no way to press the button.

   So the card becomes a flex column bounded by the sheet: the list takes
   what is left and scrolls, the footer keeps its own height and stays put.
   min-block-size:0 is what allows a flex child to shrink below its content
   and scroll at all. */
.browse-card {
  display: flex;
  flex-direction: column;
  /* Bounded by the sheet, but never taller than its own content: the panel
     is a dropdown over the offers, not a screen that replaces them. */
  max-block-size: 100%;
  min-block-size: 0;
}
/* The close button. The card itself does not scroll (its .browse does),
   so it stays in the corner however far the list is scrolled. Inline-END
   is the left in Arabic and the right in English - the empty corner in
   both, opposite the department heading. */
.browse-card { position: relative; }
.browse__x {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.browse__x:hover { color: var(--text); border-color: var(--border-strong); }
/* Keep the first department's heading and chips clear of the button. */
.browse-card > .browse > :first-child { padding-inline-end: 44px; }
.browse-card > .browse {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  /* Keep the ordinary cap. Only when even that will not fit does the flex
     rule below take over and shrink it. */
  max-block-size: min(58vh, 520px);
  /* `flex: 0 1 auto` - may shrink, must NOT grow. With `1 1 auto` the list
     stretched to fill the whole sheet and the panel swallowed the page. */
  flex: 0 1 auto;
  /* Without this a flex item refuses to shrink below its content, so the
     footer would be pushed out of the card again on a short screen. */
  min-block-size: 0;
  /* `.browse` centres itself with `margin-inline: auto`, and an auto margin
     on a flex item eats the free space in the cross axis instead of
     stretching: the list came out 310px wide inside a 1195px card, so the
     department grid collapsed to a single column. */
  margin-inline: 0;
}
.browse-card > .browse__foot { flex: 0 0 auto; }

.browse__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(14px, 2.4vw, 24px);
  background: var(--surface-2);
  border-block-start: 1px solid var(--border);
}
.browse__count { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.browse__clear {
  margin-inline-start: auto;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.browse__clear:hover { color: var(--text); border-color: var(--border-strong); }
.browse__go {
  padding: 7px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.browse__go:disabled { opacity: .45; cursor: default; }
.browse__clear:not([hidden]) ~ .browse__go { margin-inline-start: 0; }
.browse__clear[hidden] { display: none; }
.browse__foot .browse__go { margin-inline-start: auto; }
.browse__foot .browse__clear:not([hidden]) + .browse__go { margin-inline-start: 0; }

/* Coverage is a count of what a store carries from the list, never a
   ranking of the store itself. */
.coverage {
  flex: none;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.coverage--full {
  color: #fff;
  background: var(--store-color, var(--brand));
  border-color: transparent;
}


/* ------------------------------------------------------------ store page */

/* The header of one shop's own page. Built from the same tokens as every
   card on the site - the only thing that changes is that the store's own
   colour, already used for its avatar and its section rule, carries the
   whole block. */

.brand--link { text-decoration: none; color: inherit; }

.store-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 26px) clamp(12px, 3vw, 28px) 4px;
}
.store-head__top { display: flex; align-items: center; gap: 14px; }
.store-head__names { flex: 1; min-inline-size: 0; }
.store-share {
  flex: none; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--store-text, var(--store-color, var(--brand))); background: var(--surface);
  border: 1.5px solid var(--store-color, var(--brand)); border-radius: 99px; cursor: pointer;
}
.store-share:hover { background: var(--surface-2); }
.store-head__name {
  margin: 0;
  font-size: clamp(19px, 3.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.store-head__meta { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }
.store-head__hint {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.store-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 20px;
  margin-block-start: 16px;
  padding: 14px clamp(12px, 2vw, 18px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* A hairline in the store's colour, the same device the offer sections
     use, so the page reads as part of the site and not a separate thing. */
  border-inline-start: 3px solid var(--store-color, var(--brand));
}
.store-detail { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.store-detail__icon {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  flex: none;
  color: var(--store-text, var(--store-color, var(--brand)));
  background: var(--surface-2);
  border-radius: 9px;
}
.store-detail__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.store-detail__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.store-detail__value {
  font-size: 14px;
  color: var(--text);
  /* A long address must wrap rather than push the card wide. */
  overflow-wrap: anywhere;
}
a.store-detail__value { color: var(--brand-ink); text-decoration: none; }
a.store-detail__value:hover { text-decoration: underline; }

.store-links { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 3px; }
.store-link {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.store-link:hover { color: var(--brand-ink); border-color: var(--brand); }

/* The link from a store's section on the home page to its own page. */
.store-section__page {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
  white-space: nowrap;
}
.store-section__page:hover { text-decoration: underline; }

/* The store page leads with the shop, so its avatar is a size up from the
   `md` used in the home page's section headers. */
.avatar--lg {
  inline-size: 56px;
  block-size: 56px;
  font-size: 19px;
  border-radius: 16px;
}


/* The header's freshness line. It reports the last successful SCRAPE, not
   the last publish - publish runs whether or not anything was collected,
   so a header built on it reassures instead of informing. When the scrape
   is old the line says so in the warning colour: the failure it is there
   to catch is a silent one. */
.brand__meta--stale {
  color: var(--warn);
  font-weight: 600;
}
.brand__meta--stale::before {
  content: '';
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}


/* What the shop sells. Chips rather than a text row, because this is the
   line a reader scans first and a comma-separated sentence does not
   scan. Same shape as the class chips on the home page. */
.store-head__about {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  max-inline-size: 62ch;
}
.store-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-block-start: 12px;
}
.store-tags__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-inline-end: 2px;
}
.store-tag {
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}


/* Sample store details. Loud enough that nobody mistakes it for the real
   thing, quiet enough to live above real content without shouting. */
.store-head__sample {
  margin: 12px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------- the basket
   Quantity boxes under a flyer page, and the running total above them.

   The viewer is dark, so these are white-on-dark rather than reusing the
   card surface tokens. Everything is laid out with logical properties, so
   switching to English mirrors the row without a second rule. */

.basket-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--v-fill);
  border: 1px solid var(--v-line);
  color: var(--v-ink);
}
.basket-bar__text { display: flex; flex-direction: column; min-inline-size: 0; }
.basket-bar__store { font-size: 12px; font-weight: 600; }
.basket-bar__count { font-size: 12px; color: var(--v-ink-2); }
.basket-bar__total {
  margin-inline-start: auto;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.basket-bar__clear {
  background: none;
  border: 1px solid var(--v-line-strong);
  color: var(--v-ink-2);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.basket-bar__clear:hover { background: var(--v-fill-2); }

.viewer__basket { font-size: 15px; color: var(--v-ink); }
.viewer__basket summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--v-ink-2);
}
.viewer__basket-n {
  margin-inline-start: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--v-ink-3);
}

.basket-list {
  margin-block-start: 8px;
  max-block-size: 30vh;
  overflow-y: auto;
  display: grid;
  gap: 2px;
  /* Capped and centred. Left to span a 1400px viewer the name ends up at
     one edge and its own input at the other, and a label that far from
     its control is a label for nothing. */
  inline-size: min(100%, 760px);
  margin-inline: auto;
}

/* Name on top, "1 KG · 0.29 JD" beneath, the box and the line total
   alongside. One layout at every width: the two-column shuffle that used
   to happen on phones dropped the pack label, which is the one thing that
   makes the number in the box mean anything. */
.basket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(58px, auto);
  grid-template-areas:
    "name qty line"
    "meta qty line";
  align-items: center;
  column-gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.basket-row.is-picked { background: var(--v-fill); }
.basket-row__name {
  grid-area: name;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.basket-row__meta {
  grid-area: meta;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--v-ink-3);
}
.basket-row__price {
  color: var(--v-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.basket-row__stepper {
  grid-area: qty;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Plus on the right, minus on the left - in BOTH languages. Logical
   order would put the minus on the right in Arabic, and a plus that
   moves sides with the language is a plus you have to look for. */
[dir='rtl'] .basket-row__stepper { flex-direction: row-reverse; }

/* Explicit minus and plus, not the browser's native spinner. Those arrows
   are a few pixels tall, appear only on hover or focus, and do not exist
   at all on a phone - which is exactly where this gets used, one-handed,
   standing in an aisle. */
.basket-step {
  flex: none;
  inline-size: 34px;
  block-size: 38px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  color: var(--v-ink);
  background: var(--v-fill);
  border: 1px solid var(--v-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
.basket-step:hover:not(:disabled) { background: var(--v-fill-2); }
.basket-step:disabled { opacity: .35; cursor: default; }
.basket-step:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 1px; }

.basket-row__qty {
  grid-area: auto;
  inline-size: 52px;
  /* A quantity is a number, not a sentence. Left to inherit RTL, typing
     "0.5" put the decimal point on the wrong side - ".4" came out as "4."
     - because bidi reordered the separator against the digits. The same
     reason .viewer__counter is pinned LTR. */
  direction: ltr;
  /* 44px is the aisle target: this gets used standing in a shop. */
  min-block-size: 40px;
  padding: 6px 8px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--v-ink);
  background: var(--v-bg);
  border: 1px solid var(--v-line-strong);
  border-radius: var(--radius-sm);
}
.basket-row__qty:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 1px;
}
.basket-row__line {
  grid-area: line;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

/* The top-bar buttons are white-on-dark by default; inside the themed
   viewer they take its ink instead, or they vanish on a white ground. */
.viewer .icon-btn--ghost { background: var(--v-fill); color: var(--v-ink); }
.viewer .icon-btn--ghost:hover { background: var(--v-fill-2); color: var(--v-ink); }

/* The native spinner is redundant now, and on desktop it sat under the
   cursor stealing scroll wheel events over the number. */
.basket-row__qty::-webkit-outer-spin-button,
.basket-row__qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.basket-row__qty { appearance: textfield; -moz-appearance: textfield; }

/* An empty basket still shows its total as 0.00 - a zero is an invitation,
   an absence is a secret - but it sits back until something is in it. */
.basket-bar.is-empty { color: var(--v-ink-2); }
.basket-bar.is-empty .basket-bar__total { font-weight: 600; }
.basket-bar.is-empty .basket-bar__clear { visibility: hidden; }

/* Phones: the flyer is the thing being read, and the basket panel opening
   by default was taking a third of the screen off it. The list scrolls,
   so capping it costs a little scrolling and buys back the picture. */
@media (max-width: 560px) {
  .basket-list { max-block-size: 21vh; }
  .viewer__bottom { padding-block: 6px 8px; gap: 6px; }
  .thumb { inline-size: 44px; block-size: 44px; }
}

/* ------------------------------------------------- store page basket
   The whole shop's catalogue with a filter, on the page rather than over
   the image, so it uses the ordinary card surface. The row styles are
   shared with the viewer via the --v-* tokens mapped at :root. */
.store-basket {
  margin: 18px auto 0;
  max-inline-size: var(--max-w);
  padding: 14px clamp(12px, 2vw, 18px) 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.store-basket__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-block-end: 10px;
}
.store-basket__head h2 { margin: 0; font-size: 17px; }
.store-basket__n { font-size: 12px; color: var(--text-muted); }
.store-basket__search { margin-block: 10px; }
.store-basket__none {
  margin: 14px 4px 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Taller than the viewer's: this is the list you scroll deliberately,
   not a glance under a picture. */
.basket-list--page { max-block-size: min(58vh, 560px); }

/* On the page the bar is a solid strip rather than a translucent overlay. */
.store-basket .basket-bar {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Why a shop is near the top. Without a word saying so, the new ordering
   just looks like the old one shuffled. */
.store-section__near {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--calm);
  background: var(--calm-soft);
  border-radius: 999px;
  vertical-align: middle;
}
.select--area .select__label { white-space: nowrap; }

/* Quiet enough to ignore, present enough to answer "which build is this?" */
.app-footer__links { margin: 8px 0 0; }
.app-footer a { color: var(--text-muted); }
.app-footer a:hover { color: var(--brand); }

/* privacy.html and terms.html: one readable column. */
.legal { max-inline-size: 720px; margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 28px) 40px; line-height: 1.8; font-size: 15px; }
.legal h1 { margin: 0 0 4px; font-size: 24px; }
.legal h2 { margin: 22px 0 6px; font-size: 17px; }
.legal p, .legal ul { margin: 0 0 8px; }
.legal ul { padding-inline-start: 20px; }
.legal__date { color: var(--text-muted); font-size: 13px; }
.legal hr { margin: 32px 0; border: 0; border-block-start: 1px solid var(--border); }
.legal a { color: var(--brand); }

/* guide.html: the shops' "your ad in two minutes" */
.guide__lead { font-size: 16px; }
.guide__steps { list-style: none; padding: 0; margin: 18px 0 0; }
.guide__step { margin: 0 0 28px; }
.guide__step h2 { display: flex; align-items: center; gap: 10px; }
.guide__n { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px;
  border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 16px; flex: none; }
.guide__step img { display: block; inline-size: 100%; max-inline-size: 390px; block-size: auto;
  margin: 10px auto 12px; border: 1px solid var(--border); border-radius: 14px; }
.guide__go { margin-top: 24px; text-align: center; }
.guide__btn { display: inline-block; padding: 12px 26px; border-radius: 99px;
  background: var(--brand); color: var(--on-brand) !important; font-weight: 700; text-decoration: none; }

.app-footer__build {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- the area hint
   Shown once, until it is acted on. Deliberately quiet - it is a pointer
   to a control three centimetres away, not an announcement. */
.area-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 8px;
  padding: 6px 6px 6px 10px;
  padding-inline: 10px 6px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--radius);
}
.area-hint__go {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-inline-size: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  color: var(--brand-ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.area-hint__go svg { flex: none; }
.area-hint__close {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--brand-ink);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: .7;
}
.area-hint__close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

/* The pin sits beside the label, outside the translated span - i18n
   writes textContent and would delete any markup inside it. */
.select--area > svg { flex: none; opacity: .75; color: var(--brand); }

/* A field the shop has not published. Present so every page is the same
   shape and the gap is visible, faded so it never reads as content. */
.store-detail__value--empty { color: var(--text-faint); }
.store-detail--empty { opacity: .72; }

/* ------------------------------------------------------- the area tip
   Two words on the control itself. Positioned against the label, which
   is the anchor the reader's eye is already on. */
.area-tip {
  position: absolute;
  inset-block-end: calc(100% + 7px);
  inset-inline-start: 0;
  z-index: 5;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--on-brand);
  background: var(--brand);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  animation: area-tip-in .25s ease-out both;
}
/* The little tail, pointing down at the control it means. */
.area-tip::after {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 14px;
  border: 5px solid transparent;
  border-block-start-color: var(--brand);
}
@keyframes area-tip-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .area-tip { animation: none; } }

/* Each branch is its own link to the map. Wrapped as chips rather than a
   comma list: nine MCE branches on one line is not a list, it is a wall. */
.store-branches { display: flex; flex-wrap: wrap; gap: 5px; margin-block-start: 2px; }
.store-branch {
  padding: 2px 9px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
}
.store-branch:hover { border-color: var(--brand); color: var(--brand-ink); }

/* The offer to look a shop up, sitting under a field that may be empty. */
.store-detail__action {
  display: inline-block;
  margin-block-start: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

/* Room for the area bubble, only while it is showing. */
.filters--tipped { margin-block-start: 26px; }

/* ------------------------------------------------------- the ad builder
   The picking grid deliberately mirrors the printed card: photograph on
   top, facts underneath. What you choose should look like what you get. */
.ad-entry {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-block-start: 14px; padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
}
.ad-entry__note { font-size: 12.5px; color: var(--text-muted); }
.maker-btn {
  display: inline-block; padding: 9px 16px; font-size: 14px; font-weight: 700;
  color: var(--on-brand); background: var(--brand); border: 1px solid var(--brand);
  border-radius: var(--radius); text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.maker-btn:hover { background: var(--brand-ink); }
.maker-btn:disabled { opacity: .45; cursor: default; }
.maker-btn--ghost {
  color: var(--text); background: none; border-color: var(--border-strong);
}
.maker-btn--ghost:hover { background: var(--surface-2); }

.maker-main { max-width: var(--max-w); margin: 0 auto;
  padding: 16px clamp(12px, 3vw, 28px) 60px; }

.ad-sizes { display: flex; align-items: center; gap: 4px; }
.ad-sizes button {
  inline-size: 34px; block-size: 32px; font: inherit; font-weight: 700;
  color: var(--text); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ad-sizes button.is-active {
  color: var(--on-brand); background: var(--brand); border-color: var(--brand);
}
/* The layout buttons hold a single digit, so 34px fits. The design
   buttons hold a WORD - "Cards", "بطاقات" - and were clipped to the same
   34px, printing "Card" and "Poste". Width comes from the text here.

   This has to sit AFTER .ad-sizes button: both selectors are one class
   plus one element, so they carry identical specificity and order is what
   decides. Same trap as .grid--row earlier. */
.ad-sizes--themes button {
  inline-size: auto;
  padding-inline: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* A little air between the two groups, so "6" and "بطاقات" do not read
   as one row of controls. */
.ad-sizes--themes { margin-inline-start: 10px; }
/* The bright family's headline: one button showing the chosen sticker,
   opening a panel of all six (paintHeadlines in create-ad.js). */
.ad-sizes .ad-hl-pick {
  inline-size: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 10px; background: #fff;
}
.ad-hl-pick img { display: block; block-size: 24px; inline-size: auto; }
.ad-hl-pick__caret { font-size: 15px; line-height: 1; color: var(--brand); }
.ad-hl-card { max-inline-size: 560px; padding: 14px 16px 16px; }
.ad-hl-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; padding-inline-end: 44px; }
/* Three rows of two - six stickers - each on a tile of its design's own
   colour, so it looks as it will on the flyer. */
.ad-hl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ad-hl-opt {
  display: grid; place-items: center; block-size: 76px; padding: 8px 12px;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.ad-hl-opt--sunny { background: linear-gradient(160deg, #ffe45c, #ffc81f); }
.ad-hl-opt--sky { background: linear-gradient(160deg, #e3f0fd, #bcdcfa); }
.ad-hl-opt { overflow: hidden; }
.ad-hl-opt img { display: block; inline-size: auto; block-size: auto; max-block-size: 58px; max-inline-size: 100%; object-fit: contain; }
.ad-hl-opt:hover { border-color: var(--border-strong); }
.ad-hl-opt.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* ---- drafts, at the top of the builder's side panel */
.ad-drafts {
  display: grid; gap: 8px;
  padding: 12px; margin-block-end: 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.ad-drafts__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad-drafts__head h2 { margin: 0; font-size: 15px; }
.ad-drafts__new { padding: 5px 12px; font-size: 13px; }
.ad-drafts__state { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.ad-drafts__state.is-dirty { color: var(--warn); font-weight: 700; }
.ad-drafts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ad-drafts__row {
  display: flex; align-items: stretch; gap: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
/* إعلاناتي: one row per ad - dates, status, count - and its buttons. */
#adSubmit.is-sent:disabled { opacity: 1; color: #2e7d32; background: #e8f5e9;
  border-color: #a5d6a7; }
.rev__replaces { display: inline-block; margin: 6px 0 0; padding: 4px 12px;
  font-size: 13px; font-weight: 800; color: #7a3e00; background: #ffe0b2;
  border: 1.5px solid #f57c00; border-radius: 99px; }
.ad-mine__row { display: grid; gap: 6px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: var(--surface-2); }
.ad-mine__row.is-current { outline: 2px solid var(--brand); outline-offset: -2px; }
.ad-mine__info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.ad-mine__dates { font-weight: 700; }
.ad-mine__status { padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
  color: var(--text-muted); background: var(--surface); }
.ad-mine__status.is-live { color: #fff; background: #2e7d32; }
.ad-mine__status.is-ended { color: var(--text-muted); background: transparent;
  border: 1px solid var(--border); }
.maker-field-hint { flex-basis: 100%; margin: -2px 0 0; font-size: 12px; color: var(--text-muted); }
.ad-mine__meta { color: var(--text-muted); font-size: 12px; }
.ad-mine__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-mine__act { padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 99px; cursor: pointer; }
.ad-mine__act:hover { border-color: var(--brand); color: var(--brand); }
.ad-mine__act.is-main { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ad-mine__act.is-main:hover { color: #fff; filter: brightness(1.08); }
.ad-mine__act:disabled { opacity: .6; cursor: progress; }
.ad-mine__act.is-del { margin-inline-start: auto; padding: 5px 10px; color: var(--text-muted); }
.ad-mine__act.is-del:hover { color: var(--urgent); border-color: var(--urgent); }
.ad-mine__editing { margin: 0 0 8px; padding: 7px 10px; font-size: 12.5px; line-height: 1.5;
  color: var(--text); background: var(--brand-soft); border-radius: var(--radius-sm); }
.ad-drafts__get {
  flex: none; align-self: center; margin-inline-start: 4px; padding: 5px 10px;
  font: inherit; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--brand); border: 0; border-radius: 99px; cursor: pointer;
}
.ad-drafts__get:disabled { opacity: .6; cursor: progress; }
.ad-drafts__row.is-current { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The whole row opens the draft / copies the ad. */
.ad-drafts__open {
  flex: 1; min-inline-size: 0; display: grid; gap: 1px;
  padding: 8px 10px; font: inherit; text-align: start; color: var(--text);
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.ad-drafts__open:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.ad-drafts__open:disabled { cursor: default; }
.ad-drafts__del {
  flex: none; inline-size: 34px; font: inherit; font-size: 18px; line-height: 1;
  color: var(--text-muted); background: none; border: 0;
  border-radius: var(--radius-sm); cursor: pointer;
}
.ad-drafts__del:hover { background: var(--urgent-soft); color: var(--urgent); }
.ad-drafts__more {
  inline-size: 100%; padding: 6px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--brand); background: none; cursor: pointer;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
}
.ad-drafts__main {
  font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-drafts__meta { font-size: 11.5px; color: var(--text-muted); }
.ad-drafts__empty { font-size: 12.5px; color: var(--text-faint); padding: 2px; }
.ad-drafts__past summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.ad-drafts__past[open] summary { margin-block-end: 6px; }

/* The shop's logo, shown as it will be on the flyer: on a white tile. */
.ad-logo__thumb {
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #fff; overflow: hidden;
}
.ad-logo__thumb[hidden] { display: none; }
.ad-logo__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 3px; }
.ad-logo button[disabled] { opacity: .5; cursor: not-allowed; }

.maker-grid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.maker-card {
  display: flex; flex-direction: column; gap: 4px; padding: 9px;
  font: inherit; text-align: start; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.maker-card:hover { border-color: var(--border-strong); }
.maker-card.is-picked {
  border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft);
}
.maker-card__img {
  block-size: 104px; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.maker-card__img img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
/* The same hatch the printed card uses, so a missing photograph looks
   identical in the picker and on the page. */
.maker-card__img--stub {
  border: 2px dashed var(--border-strong);
  background: repeating-linear-gradient(45deg,
    var(--surface-2) 0 6px, var(--surface) 6px 12px);
}
.maker-card__name { font-size: 13px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere; }
.maker-card__en { font-size: 11.5px; color: var(--text-muted); direction: ltr; }
.maker-card__meta { display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-muted); }
.maker-card__price { font-weight: 800; color: var(--brand); }

.ad-picks {
  margin-block-end: 16px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ad-picks__head { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-block-end: 10px; }
.ad-picks__head h2 { margin: 0; font-size: 15px; }
.ad-picks__actions { margin-inline-start: auto; display: flex; gap: 8px; }
/* No scroll box of its own: a scroller inside a scroller was half of
   the jitter. The side panel scrolls instead. */
.ad-picks__list { display: grid; gap: 6px; }
.ad-pick { display: flex; align-items: center; gap: 10px;
  padding: 5px 6px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ad-pick__img { flex: none; inline-size: 42px; block-size: 42px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 7px; background: var(--surface); }
.ad-pick__img img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.ad-pick__name { flex: 1; min-inline-size: 0; font-size: 13px;
  overflow-wrap: anywhere; }
.ad-pick__price { inline-size: 86px; padding: 5px 7px; font: inherit;
  font-size: 13px; font-weight: 700; text-align: center; direction: ltr;
  color: var(--brand); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.ad-pick__drop { flex: none; inline-size: 28px; block-size: 28px;
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--text-muted); background: none; border: 0;
  border-radius: var(--radius-sm); }
.ad-pick__drop:hover { background: var(--urgent-soft); color: var(--urgent); }
.ad-empty { color: var(--text-muted); padding: 28px 4px; }

/* ------------------------------------------------- the ad studio
   Preview beside the controls, both sticky, so the page below can be
   scrolled for products without losing sight of what is being built. */
.ad-studio {
  display: grid; gap: 14px; margin-block-end: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
}
@media (max-width: 900px) { .ad-studio { grid-template-columns: 1fr; } }

.ad-preview {
  /* Below the sticky header, not behind it; and only on a wide screen.
     On a phone the page is one column, and a pinned preview slid under
     the header and over the buttons beneath it. */
  position: sticky; inset-block-start: calc(var(--ad-top, 0px) + 8px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ad-preview__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); border-block-end: 1px solid var(--border);
}
.ad-preview__stage {
  position: relative; display: grid;
  /* `safe`: if the page is ever taller than the stage, it overflows at
     the bottom, where it can be scrolled to - never off the top, where
     centring put the banner and nothing could reach it. */
  place-items: safe center;
  block-size: min(62vh, 620px); background: var(--surface-2); overflow: auto;
}
.ad-preview__hint { color: var(--text-faint); font-size: 13px; }
.ad-guide-btn { display: inline-grid; place-items: center; font-size: 17px; line-height: 1;
  font-weight: 800; color: var(--brand); text-decoration: none; }
/* The page is 210mm wide; scaled to fit rather than re-styled, so the
   preview and the print are the same document.

   --fit is measured from the stage by fitPreview(), not hardcoded. It was
   scale(.52), which puts a 794px page at 413px - fine on a desktop stage
   and 64px too wide for a phone's, so the flyer hung off the edge and had
   to be side-scrolled to be seen at all. The compensating margin follows
   the same number instead of being a matching guess. */
.ad-preview__frame {
  /* --page-h: 297mm for A4 designs, 315mm for the 2:3 bright family -
     set by fitPreview() along with --fit. */
  inline-size: 210mm; block-size: var(--page-h, 297mm); border: 0; background: #fff;
  transform: scale(var(--fit, .52)); transform-origin: top center;
  /* transform scales PAINTING, not layout: the box stays 210mm wide
     however small it looks, so the stage kept a 794px scroll width and
     showed the flyer's edge rather than the flyer. Trimming the unused
     half from each inline side collapses the layout box onto what is
     actually drawn - symmetric, so it is right in both directions,
     which `transform-origin: top left` would not have been in RTL. */
  margin-inline: calc(-210mm * (1 - var(--fit, .52)) / 2);
  margin-block-end: calc(-1 * var(--page-h, 297mm) * (1 - var(--fit, .52)));
}
/* A phone keeps a shorter stage, and the page is scaled to it by
   fitPreview like everywhere else. There used to be a fixed scale(.36)
   here that ignored the measurement: the page came out taller than the
   stage and the top of the banner was cut off. */
/* A phone: the stage is as tall as the page, and does not scroll. It
   was 52vh and fitted the page by height - a narrow page with empty
   sides, inside a box that could scroll a pixel or two on its own: the
   twitch the owner saw. Now the page is as wide as the screen and the
   ordinary page scroll moves it. */
@media (max-width: 900px) {
  .ad-preview__stage { block-size: auto; overflow: hidden; padding-block: 6px; }
}

/* Pinned below the sticky header - it used to pin at 8px, i.e. BEHIND
   the header - and never taller than the room left. When it was taller,
   its bottom could not be scrolled to and the product list inside it
   fought the page for the wheel: the "jitter" when adding products.
   Now it is the one thing that scrolls, and it keeps its scroll to
   itself. --ad-top is measured from the real header by create-ad.js. */
.maker-side { display: grid; gap: 12px; align-content: start;
  position: sticky; inset-block-start: calc(var(--ad-top, 0px) + 8px);
  max-block-size: calc(100dvh - var(--ad-top, 0px) - 16px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 900px) { .maker-side { position: static; max-block-size: none; overflow: visible; } }
.maker-fields {
  display: grid; gap: 9px; grid-template-columns: 1fr 1fr;
  padding: 12px 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.maker-field { display: grid; gap: 3px; font-size: 12px; color: var(--text-muted); }
.maker-field--wide, .ad-check { grid-column: 1 / -1; }
.maker-field input {
  font: inherit; font-size: 13px; padding: 6px 9px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ad-check { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ad-check input { inline-size: 17px; block-size: 17px; accent-color: var(--brand); }

.ad-picks {
  padding: 12px 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ad-picks__head { display: flex; align-items: center; gap: 10px;
  margin-block-end: 8px; }
.ad-picks__head h2 { margin: 0; font-size: 14px; }
.ad-picks__head .maker-btn { margin-inline-start: auto; padding: 5px 11px;
  font-size: 12.5px; }
/* NOT a scroll box of its own. It was one, inside the side column that
   also scrolls - two scrollers nested, and the wheel handing over from
   one to the other is the stutter the owner felt. The rows are short
   enough now that six fit, and the side column is the one thing that
   scrolls. */
.ad-picks__list { display: grid; gap: 7px; }
.maker-hint { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
.ad-over { margin: 0 0 8px; padding: 6px 9px; font-size: 12.5px;
  font-weight: 600; color: var(--urgent); background: var(--urgent-soft);
  border: 1px solid color-mix(in srgb, var(--urgent) 30%, transparent);
  border-radius: var(--radius-sm); }

.ad-pick { display: flex; align-items: flex-start; gap: 9px; padding: 7px;
  border-radius: var(--radius-sm); background: var(--surface-2); }
.ad-pick__body { flex: 1; min-inline-size: 0; display: grid; gap: 5px; }
/* The price box, with the optional extras stacked beside it as two
   quiet links - the same height as the box. An extra, once opened,
   takes a line of its own. */
.ad-pick__fields { display: grid; grid-template-columns: minmax(84px, 110px) auto;
  justify-content: start; align-items: center; gap: 2px 12px; }
.ad-pick__fields > .ad-pick__field:first-child { grid-row: span 2; }
.ad-pick__fields > .ad-pick__add-was { padding: 1px 2px; }
.ad-pick__fields > .ad-pick__field:not(:first-child),
.ad-pick__fields > .ad-pick__note { grid-column: 1 / -1; }
.ad-pick__field { display: grid; gap: 2px; font-size: 11px;
  color: var(--text-muted); }
.ad-pick__field input {
  font: inherit; font-size: 13px; font-weight: 700; text-align: center;
  direction: ltr; padding: 4px 6px; color: var(--brand);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); inline-size: 100%;
}
.ad-pick__field.is-missing input { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198, 40, 40, .15); }
.ad-pick__field.is-missing { color: #c62828; }
.ad-pick__field .ad-pick__was { color: var(--text-muted); font-weight: 600; }
/* "+ old price": a quiet link, not a box - optional, and better left out. */
.ad-pick__add-was {
  padding: 4px 2px;
  font: inherit; font-size: 11.5px; color: var(--text-muted);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ad-pick__add-was:hover { color: var(--brand); }
/* The pack under the name: quiet text until pressed, then a box. */
.ad-pick__pack { justify-self: start; padding: 0; font: inherit; font-size: 12px; color: var(--text-muted);
  background: none; border: 0; cursor: pointer; text-align: start; }
.ad-pick__pack:hover { color: var(--brand); }
.ad-pick__pack.is-own { color: #b45309; font-weight: 700; }
.ad-pick__pen { margin-inline-start: 5px; font-size: 14px; font-weight: 700; color: var(--brand); }
.ad-pick__pack.is-own .ad-pick__pen { color: inherit; }
.ad-pick__pack-in { font: inherit; font-size: 12.5px; padding: 3px 7px; inline-size: 100%;
  border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
/* The picture and, under it, "add photo" / "change photo". The picture is
   a button too - on a phone it is the obvious thing to tap. */
.ad-pick__media { flex: none; display: grid; justify-items: center; gap: 3px;
  inline-size: 58px; }
button.ad-pick__img { padding: 0; border: 1px solid var(--border); cursor: pointer;
  inline-size: 50px; block-size: 50px; }
.ad-pick__photo {
  padding: 2px 0; font: inherit; font-size: 10.5px; line-height: 1.2;
  color: var(--text-muted); background: none; border: 0; cursor: pointer;
  text-align: center; text-decoration: underline; text-underline-offset: 2px;
}
.ad-pick__photo:hover { color: var(--brand); }
/* No photo is an empty box on the flyer - so this one asks to be pressed. */
.ad-pick__photo--add { color: var(--brand); font-weight: 700; }
.ad-pick__note { font: inherit; font-size: 12px; padding: 4px 7px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ad-count { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.maker-btn--make { inline-size: 100%; padding: 11px; font-size: 15px; }
/* "Add another image", once every image is full: ready, in a LIGHT green,
   so the solid green below it stays the one main action - publish. */
#adAddPage.is-ready { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
#adAddPage.is-ready:hover { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
.browse__cancel {
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}

/* Sits in the grid where the next card would be, so "there is more" is
   where the eye already is rather than somewhere below the fold. */
.ad-more {
  display: grid; place-items: center; padding: 18px 12px; min-block-size: 120px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--brand); background: var(--brand-soft);
  border: 1px dashed color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: var(--radius);
}
.ad-more:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }

.ad-actions { display: grid; gap: 8px; }
.ad-submit-note { margin: 0; padding: 7px 10px; font-size: 12.5px;
  font-weight: 600; border-radius: var(--radius-sm);
  color: var(--text-muted); background: var(--surface-2); }
.ad-submit-note.is-ok { color: var(--calm); background: var(--calm-soft); }
.ad-submit-note.is-bad { color: var(--urgent); background: var(--urgent-soft); }

/* ------------------------------------------------------ ad review
   One card per submission: what it says, what it costs, and the flyer
   itself. Reviewing an ad without seeing it is not reviewing it. */
.rev {
  margin-block-end: 18px; padding: 14px clamp(12px, 2vw, 18px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.rev.is-done { opacity: .5; }
.rev__head { display: flex; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-block-end: 12px; }
.rev__store { margin: 0; font-size: 17px; }
.rev__dates { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.rev__actions { margin-inline-start: auto; display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; }
.rev__items { display: grid; gap: 5px; margin-block-end: 14px; }
.rev__item {
  display: grid; gap: 4px 12px; align-items: baseline; padding: 7px 9px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.rev__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.rev__pack { font-size: 12px; color: var(--text-muted); }
.rev__price { font-size: 14px; font-weight: 800; color: var(--brand);
  direction: ltr; display: flex; gap: 7px; align-items: baseline; }
.rev__was { font-weight: 600; color: var(--text-faint);
  text-decoration: line-through; }
.rev__note { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); }
.rev__frame {
  inline-size: 100%; block-size: min(64vh, 620px); border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff;
}
.rev-warn {
  padding: 10px 13px; margin-block-end: 16px; font-size: 13px; font-weight: 600;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--radius);
}

/* Flip through the pages you have built. Present even at one page, so
   "1 / 1" teaches that picking more products makes more pages. */
.ad-pager { display: flex; align-items: center; gap: 4px; }
.ad-pager button {
  inline-size: 26px; block-size: 26px; display: grid; place-items: center;
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ad-pager button:hover:not(:disabled) { background: var(--surface-2); }
.ad-pager button:disabled { opacity: .35; cursor: default; }
.ad-preview__pages { min-inline-size: 46px; text-align: center;
  font-variant-numeric: tabular-nums; }

/* A note that fades - a page filling up is not an error, but it does
   need saying at the moment it happens. */
/* A toast at the bottom of the screen: it was a line in the side panel,
   out of sight while the shop was down among the products. */
.ad-flash {
  position: fixed; z-index: 45; inset-block-end: calc(16px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); max-inline-size: calc(100vw - 32px);
  margin: 0; padding: 9px 16px; font-size: 14px; font-weight: 700; white-space: nowrap;
  color: #fff; background: #146356; border-radius: 99px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22); pointer-events: none;
}
.ad-flash[hidden] { display: none; }
/* Preview-for-print sits below publishing: useful, but not the thing a
   shop came to do. */
.maker-btn--quiet { font-weight: 600; opacity: .85; }

/* ------------------------------------------------------ set your location */

/* The account button reads as an invitation, not a settings icon. */
.acct-btn:not(.is-signed-in) {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  font-weight: 700;
}

/* The pill that opens it - and, once an area is chosen, names it. It is
   the only "where am I" control in the header now. */
.loc-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.loc-btn > svg { flex: none; color: var(--brand); }
.loc-btn__label { max-inline-size: 13ch; overflow: hidden; text-overflow: ellipsis; }
.loc-btn.is-set { color: var(--text); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
/* The row scrolls sideways on a phone, which clips anything poking out
   above it - and the line under the header already says the same thing
   there. The bubble is for wide screens. */
@media (max-width: 820px) { .loc-btn .area-tip { display: none; } }

/* ------------------------------------------------------------ menus
   A pill that opens a short list. Oval like every other control in the
   row, rather than a native select whose closed shape is the browser's
   and whose open list is the phone's. */
.menu { position: relative; }
.menu__btn { display: inline-flex; align-items: center; gap: 5px; }
.menu__label { color: var(--text-faint); font-weight: 500; }
.menu__value { color: var(--text); }
.menu__btn.is-active .menu__value { color: inherit; }
.menu__chev { flex: none; opacity: .7; transition: transform .15s; }
.menu__btn[aria-expanded='true'] .menu__chev { transform: rotate(180deg); }
/* Fixed, and placed by script under the pill: inside the sideways-
   scrolling filter row an absolute list would be clipped. */
.menu__pop {
  position: fixed;
  z-index: 60;
  min-inline-size: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.menu__pop[hidden] { display: none; }
.menu__pop button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 999px;
}
.menu__pop button:hover { background: var(--surface-2); }
/* A tick for the chosen order, a box for the switch. */
.menu__pop button::before {
  content: '';
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.menu__pop button[aria-checked='true']::before {
  border-color: var(--brand);
  background: radial-gradient(circle, var(--brand) 0 4px, transparent 4.5px);
}
.menu__pop button[role='menuitemcheckbox']::before { border-radius: 5px; }
.menu__pop button[role='menuitemcheckbox'][aria-checked='true'] {
  color: var(--urgent);
}
.menu__pop button[role='menuitemcheckbox'][aria-checked='true']::before {
  border-color: var(--urgent);
  background: var(--urgent);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.menu__rule { margin: 4px 8px; border: 0; border-block-start: 1px solid var(--border); }

/* The area list inside the location screen: the same choice the header
   dropdown used to offer, for anyone who would rather not use a map. */
.loc__areas {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.loc__areas[hidden] { display: none; }
.loc__area-row {
  padding: 11px 14px;
  font-size: 15px;
  text-align: start;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 12px;
}
.loc__area-row:hover { background: var(--surface-2); }
.loc__area-row.is-current {
  font-weight: 700;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.loc__mapwrap[hidden], .loc__where[hidden], .loc__confirm[hidden] { display: none; }

/* Full screen on a phone, as in the delivery apps this imitates; a
   centred panel on a wide screen, where a full-bleed map is just big. */
.loc {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  background: rgba(15, 20, 18, .45);
}
.loc[hidden] { display: none; }
html.loc-open { overflow: hidden; }

.loc__panel {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  background: var(--surface);
  color: var(--text);
}
@media (min-width: 720px) {
  .loc { align-items: center; justify-content: center; padding: 24px; }
  .loc__panel {
    inline-size: min(560px, 100%);
    block-size: min(760px, 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
}

.loc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-block-end: 1px solid var(--border);
}
.loc__title { margin: 0; font-size: 1.15rem; }
.loc__sub { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; }

.loc__mapwrap { position: relative; flex: 1; min-block-size: 240px; }
/* Leaflet lays out tiles and controls assuming left-to-right. On an RTL
   page it inherits `direction: rtl` and misplaces both, so the map alone
   is pinned LTR while everything around it stays Arabic. */
.loc__map { position: absolute; inset: 0; direction: ltr; background: var(--surface-2); }

/* The pin does not move; the map moves under it. Its TIP marks the
   point, so it is lifted by its own height. */
.loc__pin {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  z-index: 500;
  color: var(--brand);
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3));
}
[dir='rtl'] .loc__pin { transform: translate(50%, -100%); }

.loc__locate {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 50%;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  white-space: nowrap;
  cursor: pointer;
}
[dir='rtl'] .loc__locate { transform: translateX(50%); }
.loc__locate:disabled { opacity: .6; cursor: progress; }

.loc__msg {
  position: absolute;
  inset-block-start: 12px;
  inset-inline: 12px;
  z-index: 500;
  margin: 0;
  padding: 10px 12px;
  font-size: .9rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.loc__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--border);
}
.loc__where { margin: 0; color: var(--text-muted); }
.loc__area { color: var(--text); font-size: 1.05rem; margin-inline-start: 4px; }

.loc__confirm {
  padding: 13px 20px;
  font: inherit;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.loc__confirm:disabled { opacity: .45; cursor: not-allowed; }

/* A real button under "confirm", not a link: for anyone who would
   rather not use a map it is the main way in, and it should look it. */
.loc__list {
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  color: var(--brand);
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, var(--border));
  border-radius: 999px;
  cursor: pointer;
}
.loc__list:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.loc__forget {
  padding: 4px;
  font: inherit;
  color: var(--brand);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.loc__forget { color: var(--text-muted); font-size: .85rem; }
.loc__privacy { margin: 0; font-size: .8rem; color: var(--text-faint); text-align: center; }

/* ---------------------------------------------------------------- account */

.acct {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  background: rgba(15, 20, 18, .45);
}
.acct[hidden] { display: none; }
html.acct-open { overflow: hidden; }

.acct__panel {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
}
@media (min-width: 560px) {
  .acct { align-items: center; justify-content: center; padding: 24px; }
  .acct__panel {
    inline-size: min(420px, 100%);
    block-size: auto;
    max-block-size: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
}

.acct__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 8px;
}
.acct__title { margin: 0; font-size: 1.2rem; }

.acct__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 20px 20px;
}
.acct__form { display: flex; flex-direction: column; gap: 12px; }
.acct__field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.acct__field span { color: var(--text-muted); }
.acct__field input {
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.acct__field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.acct__google, .acct__primary, .acct__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}
.acct__google {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.acct__primary { color: var(--on-brand); background: var(--brand); border: 0; font-weight: 700; }
.acct__primary--danger { background: var(--urgent); }
.acct__secondary { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
.acct__body button:disabled { opacity: .55; cursor: progress; }

.acct__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: var(--text-faint);
  font-size: .85rem;
}
.acct__or::before, .acct__or::after { content: ''; flex: 1; border-block-start: 1px solid var(--border); }

.acct__link {
  align-self: center;
  padding: 4px;
  font: inherit;
  font-size: .9rem;
  color: var(--brand);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.acct__link--danger { color: var(--urgent); }

.acct__lead { margin: 0; color: var(--text-muted); }
.acct__hint, .acct__fine { margin: 0; font-size: .82rem; color: var(--text-faint); }
.acct__fine { text-align: center; }
.acct__who { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.acct__who span { color: var(--text-muted); font-size: .9rem; }
.acct__note {
  margin: 0;
  padding: 10px 12px;
  font-size: .9rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
}
.acct__note .acct__link { display: block; margin-block-start: 4px; }

/* Deleting sits apart from everything else, below a rule, so it is easy
   to find when wanted and hard to hit when not. */
.acct__danger {
  margin-block-start: 8px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
  text-align: center;
}
.acct__danger p { margin: 0 0 4px; font-size: .85rem; color: var(--text-muted); }

.acct__msg {
  margin: 0 20px 20px;
  padding: 10px 12px;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  color: var(--warn);
  background: var(--warn-soft);
}
.acct__msg[data-kind='ok'] { color: var(--calm); background: var(--calm-soft); }

/* ------------------------------------------------------------ profile
   The popup behind the account button. On a phone it is the full screen
   (as .acct__panel already is below 560px), so everything is one column
   of short sections that scroll; nothing sits side by side that would
   need a wide screen. */
.prof-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.prof-cta__title { margin: 0; font-weight: 800; font-size: 1.02rem; }
.prof-cta__lead { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.6; }
.prof-cta__btns { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 4px; }
.prof-cta__btns > * { flex: 1 1 140px; }

.prof-who { display: flex; align-items: center; gap: 12px; }
.prof-who__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  font-weight: 800;
  color: var(--on-brand);
  background: var(--brand);
}
.prof-who__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.prof-who__text span { font-size: .8rem; color: var(--text-muted); }
.prof-who__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-who .acct__link { flex: none; }

.prof-sections { display: flex; flex-direction: column; gap: 4px; }
.prof-sec {
  padding-block: 14px 4px;
  border-block-start: 1px solid var(--border);
}
.prof-sec__title { margin: 0 0 6px; font-size: .95rem; }
.prof-sec__hint { margin: 0 0 8px; font-size: .82rem; color: var(--text-faint); line-height: 1.55; }

.prof-shops { display: flex; flex-wrap: wrap; gap: 7px; }
.prof-shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.prof-shop__heart { color: var(--text-faint); font-size: 14px; line-height: 1; }
.prof-shop.is-on {
  color: var(--text);
  border-color: var(--store-color);
  background: color-mix(in srgb, var(--store-color) 10%, var(--surface));
}
.prof-shop.is-on .prof-shop__heart { color: var(--store-text, var(--store-color)); }

.prof-lists { display: flex; flex-direction: column; gap: 6px; }
.prof-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.prof-row__main { flex: 1; min-width: 0; font-weight: 600; }
.prof-row__meta { font-size: .8rem; color: var(--text-muted); }
.prof-row__total { direction: ltr; }
.prof-row--link { border-inline-start: 3px solid var(--store-color); }
.prof-row--link:hover { background: color-mix(in srgb, var(--store-color) 10%, var(--surface-2)); }
.prof-row__btn {
  flex: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: 999px;
}
.prof-row--soon { opacity: .75; }
.prof-row--soon .prof-row__main { font-weight: 500; font-size: .9rem; }
.prof-badge {
  flex: none;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 999px;
}
.acct__back { align-self: center; }
.acct__switch { margin-block-start: 2px; color: var(--brand); font-weight: 700;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, var(--border)); }
.acct__switch-lead { margin: 6px 0 0; text-align: center; font-size: .85rem; color: var(--text-muted); }

/* The header's "clear all" among the class chips, and the footer link. */
.chip--clear { color: var(--urgent); border-color: color-mix(in srgb, var(--urgent) 35%, var(--border)); }
.chip--clear:hover { color: var(--urgent); background: var(--urgent-soft); }
.app-footer__stores { margin: 0 0 8px; }
.app-footer__stores a { color: var(--text-muted); font-size: 12px; }

/* The store sign-in: who is signed in, beside the way out. */
.ad-who { font-size: 12px; color: var(--text-muted); max-inline-size: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .ad-who { display: none; } }

/* Admin only: which store the ad is for. */
.ad-store-pick {
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, var(--border));
  border-radius: 999px;
}

/* The store's profile: its tools, as buttons. */
.prof-store__make, .prof-store__page { display: block; text-align: center; text-decoration: none; }
.prof-who__icon--store { background: var(--calm, var(--brand)); }
.prof-ads { display: flex; flex-direction: column; gap: 6px; }
.prof-badge--wait { color: var(--warn, #b26b00); background: color-mix(in srgb, var(--warn, #b26b00) 14%, transparent); }

/* The builder's header on a phone. The site-wide rule hides button
   labels to leave icons, but "sign out" has no icon, so it became an
   empty circle (its span is .icon-btn__words now). The store page link -
   the store's name beside the logo already says whose ad this is - and
   the subtitle make the room, and an admin's store picker takes its own
   full-width line instead of squeezing the name to three letters. */
.ad-store-pick { margin-inline-start: auto; }
/* The builder's control row on a wide screen: "Browse categories" FIRST,
   so it sits above the products column it filters (the owner's call);
   the per-page numbers LAST, at the far end beside the preview they
   shape. Same markup, order only. */
@media (min-width: 821px) {
  .page-maker .filters__right { order: 0; }
  .page-maker #adThemes { order: 1; }
  .page-maker #adHeadlines { order: 2; }
  .page-maker #adLogo { order: 3; }
  .page-maker #adSizes { order: 4; margin-inline-start: auto; }
}
/* The builder's controls on a phone: as few rows as they fit in.

   The site-wide phone rule stacks .filters into a column, one control
   group per row - right for the home page's three wide controls, and on
   this page it spent six rows of a phone on buttons before the ad
   appeared. Here the groups flow and wrap instead: the layout numbers
   and the categories button on one line, the headline and the logo on
   the next. */
@media (max-width: 820px) {
  .page-maker .filters {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px 8px;
  }
  .page-maker .filters > * { flex: none; }
  /* Numbers and the categories button share the first line; the design
     and the logo the second; the headline stickers the third, full width
     and scrolling sideways. */
  .page-maker .filters__right { order: 1; }
  .page-maker #adSizes { order: 2; }
  .page-maker #adThemes { order: 3; }
  .page-maker #adLogo { order: 4; }
  .page-maker #adHeadlines { order: 5; }
  .page-maker .ad-sizes--themes { margin-inline-start: 0; }
  /* 30px squares, 3px apart: the five numbers and "Browse categories"
     then share one line even in English, the longer of the two. */
  .page-maker #adSizes { gap: 3px; }
  .page-maker .ad-sizes button { block-size: 30px; }
  .page-maker #adSizes button { inline-size: 30px; }
  .page-maker .ad-sizes--themes button { padding-inline: 10px; font-size: 13px; }
  .page-maker .filters__right { overflow: visible; }
  .page-maker .toggle-pill--browse { padding-block: 5px; font-size: 13px; }
}
@media (max-width: 820px) {
  .page-maker .app-header__bar { flex-wrap: wrap; row-gap: 8px; }
  .page-maker #adSignOut { padding: 6px 12px; font-size: 12.5px; }
  .page-maker #backToStore, .page-maker .brand__meta { display: none; }
  .page-maker .ad-store-pick { order: 10; flex: 1 1 100%; margin: 0; }
  .page-maker .brand { flex: 1 1 0; }
  .page-maker .brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* After .ad-preview's own rule, or that rule wins: on a phone the page
   is one column and a pinned preview slid under the header and over the
   buttons beneath it. */
@media (max-width: 900px) { .ad-preview { position: static; } }

/* ------------------------------------------------ the wide-screen studio

   The preview and the controls were each `position: sticky`, meant to
   stay in view while the page below was scrolled for products. They
   never did: a sticky element can only stay put inside its own parent,
   and .ad-studio ended exactly where they ended - the product grid was a
   separate block underneath. Scroll into the grid and the whole studio
   went with it, under the header.

   With the room for it, the products go BESIDE the studio instead. The
   studio's column then runs the full height of the product list, so it
   has somewhere to stick: pick products down one side, watch the ad
   build on the other. Narrower screens keep the studio above the grid,
   where there is no room for both. */
@media (min-width: 1440px) {
  .page-maker .maker-main {
    max-inline-size: 1760px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: start;
  }
  .page-maker .maker-grid, .page-maker .ad-empty { grid-column: 1; }
  .page-maker .ad-studio {
    grid-column: 2; grid-row: 1 / span 3;
    position: sticky; inset-block-start: calc(var(--ad-top, 0px) + 8px);
    margin: 0;
    /* The preview is exactly as wide as a page that fills its height. */
    --stage-h: calc(100dvh - var(--ad-top, 0px) - 64px);
    grid-template-columns: calc(var(--stage-h) * 0.7071 + 16px) 360px;
  }
  /* Their own stickiness is the studio's now. */
  .page-maker .ad-preview, .page-maker .maker-side { position: static; }
  .page-maker .ad-preview__stage { block-size: var(--stage-h); }
  .page-maker .maker-side { max-block-size: calc(100dvh - var(--ad-top, 0px) - 16px); }
}

/* The builder on a phone: "التصميم" and "العنوان" say what the two rows
   of buttons are (every other .select__label is hidden on a phone to
   save room - these two rows had the room). */
@media (max-width: 900px) {
  #adThemes > .select__label, #adHeadlines > .select__label {
    display: inline; align-self: center; margin-inline-end: 2px; white-space: nowrap; }
}

/* ---- the design picker (one button, a panel of pictures) */
.ad-sizes .ad-th-pick { gap: 7px; padding: 3px 8px 3px 4px; }
.ad-th-pick img { inline-size: 26px; block-size: 26px; object-fit: cover; border-radius: 6px; }
.ad-th-pick__name { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ad-th-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-th-opt { display: grid; gap: 6px; padding: 6px; background: var(--surface);
  border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; font: inherit; }
.ad-th-opt img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  border-radius: calc(var(--radius) - 4px); }
.ad-th-opt__name { font-size: 13px; font-weight: 700; color: var(--text); }
.ad-th-opt.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* ---- the preview: the frame takes no touch (the page scrolls through
   it); the stage opens the bigger view. */
.ad-preview__frame { pointer-events: none; }
.ad-preview__stage { cursor: zoom-in; }
.ad-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(20, 24, 22, .92); }
.ad-zoom[hidden] { display: none; }
.ad-zoom__scroll { position: absolute; inset: 0; overflow: auto; direction: ltr;
  -webkit-overflow-scrolling: touch; padding: 56px 12px 24px; }
.ad-zoom__page { position: relative; overflow: hidden; margin: 0 auto; background: #fff;
  border-radius: 6px; }
.ad-zoom__page iframe { position: absolute; top: 0; left: 0; border: 0;
  transform-origin: 0 0; pointer-events: none; }
.ad-zoom__x { position: fixed; z-index: 61; inset-block-start: 10px; inset-inline-end: 12px;
  inline-size: 40px; block-size: 40px; border-radius: 50%; border: 0; font-size: 26px;
  line-height: 1; color: #1d1d1d; background: #fff; cursor: pointer; }
.ad-zoom-open, .ad-zoom-open body { overflow: hidden; }

/* ---- a phone: the design controls in the page, and dropped down on
   demand (placeControls in create-ad.js). */
.ad-controls-btn[hidden] { display: none; }
.ad-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 0 12px; }
.ad-controls > * { flex: none; }
/* Two rows: the per-page numbers and the logo; then design and headline
   side by side (the owner's ask) - so they are kept compact here. */
.ad-controls .ad-th-pick img { inline-size: 22px; block-size: 22px; }
.ad-controls .ad-th-pick__name { font-size: 12.5px; }
.ad-controls .ad-hl-pick img { block-size: 22px; }
.ad-controls .ad-sizes { gap: 4px; }
.ad-controls .select__label { font-size: 11.5px; }
.ad-controls[hidden] { display: none; }
.ad-controls .ad-sizes--themes { margin-inline-start: 0; }
.ad-controls #adSizes > .select__label, .ad-controls #adLogo > .select__label { display: none; }
.ad-controls.is-floating { position: fixed; z-index: 35; inset-inline: 0;
  inset-block-start: var(--float-top, 120px); padding: 12px 16px 14px;
  background: var(--bg); border-block-end: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
/* In the page (a phone), not the header: numbers + logo, then design +
   headline. Beats the .page-maker #id order rules above. */
.page-maker .ad-controls #adSizes { order: 1; margin-inline-start: 0; }
.page-maker .ad-controls #adLogo { order: 2; }
.page-maker .ad-controls #adThemes { order: 3; }
.page-maker .ad-controls #adHeadlines { order: 4; }
.page-maker .ad-controls .ad-sizes--themes .ad-hl-pick { padding-inline: 4px 8px; }

/* ---- the drawn "simple" design in the pickers (no artwork to show) */
.ad-th-swatch { inline-size: 26px; block-size: 26px; border-radius: 6px; flex: none; }
.ad-controls .ad-th-swatch { inline-size: 22px; block-size: 22px; }
.ad-th-drawn { display: grid; place-items: start center; inline-size: 100%; aspect-ratio: 3 / 4;
  padding-block-start: 14%; border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(var(--c) 0 32%, #f2f4f3 32% 88%, var(--c) 88%); }
.ad-th-drawn b { color: var(--on); font-size: 13px; font-weight: 900; }
.ad-hl-pick__words { font-size: 13px; font-weight: 800; white-space: nowrap; }
.ad-hl-opt__words { font-size: 18px; font-weight: 900; }

/* ================================================= the revamp (2026-09-27)

   The home page's header, Amazon-style, in the site's green (the owner's
   call): the brand and its buttons, the search, three menus, the
   location bar and - while one is picked - the department row. Fixed,
   with a spacer (#hdrSpace) the height of all of it; scrolling down
   tucks the rows marked data-tuck, so the search stays on screen. Scoped
   to .hdr: the other pages keep their own header for now. */

:root {
  --hdr-top: #146356;
  --hdr-top-2: #17705f;
  --hdr-nav: #0f5247;
  --hdr-loc: #e4f1ec;
  --hdr-loc-ink: #0c3f36;
  --accent: #ffcf33;
  --accent-ink: #2a2200;
  --dept-bg: #edf5f1;
  --search-bg: #ffffff;
  --search-ink: #1b1d1c;
  --search-hint: #5d6563;
  --search-x: #e6eae8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --hdr-top: #0f3a33; --hdr-top-2: #124339; --hdr-nav: #0b2d27;
    --hdr-loc: #15302a; --hdr-loc-ink: #cfe9e1; --dept-bg: #1b2523;
    --search-bg: #22302c; --search-ink: #eef2f0; --search-hint: #a3b3ad; --search-x: #34443f;
  }
}
:root[data-theme='dark'] {
  --hdr-top: #0f3a33; --hdr-top-2: #124339; --hdr-nav: #0b2d27;
  --hdr-loc: #15302a; --hdr-loc-ink: #cfe9e1; --dept-bg: #1b2523;
  --search-bg: #22302c; --search-ink: #eef2f0; --search-hint: #a3b3ad; --search-x: #34443f;
}

/* Heavier type across the page: the owner found it too light to read at
   a glance. Each level still a step below the one above it. */
body { font-weight: 500; }

.hdr {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  color: #fff;
  background: linear-gradient(180deg, var(--hdr-top-2), var(--hdr-top));
  backdrop-filter: none;
  border: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.hdr-space { block-size: var(--header-full, 190px); }
.hdr__row { overflow: hidden; }
.hdr__row[data-tuck] { max-block-size: 70px; transition: max-block-size .22s ease, opacity .18s ease; }
.hdr.is-tucked .hdr__row[data-tuck] { max-block-size: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hdr__row[data-tuck] { transition: none; } }
.hdr__in { max-inline-size: var(--max-w); margin-inline: auto; padding-inline: 12px; }

/* Row one: the menu, the brand, and sign in / language / theme. */
.hdr__top { display: flex; align-items: center; gap: 6px; padding-block: 8px 4px; }
.hdr__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 40px; block-size: 40px; padding: 0;
  color: #fff; background: none; border: 0; border-radius: 10px;
}
.hdr__icon:hover { background: rgba(255, 255, 255, .12); }
.hdr .brand { flex: 1; min-width: 0; color: #fff; text-decoration: none; gap: 8px; }
.hdr .brand__mark { inline-size: 32px; block-size: 32px; border-radius: 9px; background: #fff; color: var(--hdr-top); }
.hdr .brand__name { font-size: 19px; font-weight: 800; line-height: 1.15; }
.hdr .brand__meta { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .75); line-height: 1.2; }
.hdr .brand__meta--stale { color: #ffd9a8; }
.hdr .brand__name, .hdr .brand__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .app-header__actions { gap: 5px; }
.hdr__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  block-size: 36px; padding: 0 11px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
}
.hdr__btn:hover { background: rgba(255, 255, 255, .22); }
.hdr__btn--sq { inline-size: 36px; padding: 0; }
.hdr__btn--lang { min-inline-size: 40px; padding: 0 8px; }
.hdr .acct-btn.is-signed-in { background: #fff; color: var(--hdr-top); }

/* Row two: the search - taller, bolder, a clear X, the button at its end. */
.hdr__row--search .hdr__in { padding-block: 4px 10px; }
.hdr .search {
  display: flex; align-items: center; gap: 0;
  block-size: 48px; padding: 0;
  color: var(--search-ink); background: var(--search-bg);
  border: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.hdr .search:focus-within { box-shadow: 0 0 0 3px var(--accent); background: var(--search-bg); }
.hdr .search input {
  flex: 1; min-inline-size: 0; block-size: 100%;
  padding: 0 14px;
  font-size: 17px; font-weight: 600; color: var(--search-ink);
}
.hdr .search input::placeholder { color: var(--search-hint); font-weight: 600; opacity: 1; }
.hdr .search__clear {
  display: grid; place-items: center; flex: none;
  inline-size: 32px; block-size: 32px; margin-inline-end: 8px; padding: 0;
  color: var(--search-ink); background: var(--search-x); border-radius: 50%;
}
.hdr .search__go {
  display: grid; place-items: center; flex: none;
  inline-size: 52px; block-size: 100%;
  color: var(--accent-ink); background: var(--accent);
  cursor: pointer;
}

/* Row three: categories, shops, sort - three equal buttons. */
.hdr__row--nav { background: var(--hdr-nav); }
.hdr__nav { display: flex; gap: 6px; padding-block: 7px; }
.hdr__nav > .nav-btn, .hdr__nav > .menu { flex: 1 1 0; min-width: 0; }
.hdr__nav > .menu { display: flex; }
.nav-btn {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  block-size: 38px; padding: 0 8px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  color: #fff; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px;
}
.nav-btn:hover { background: rgba(255, 255, 255, .18); }
.nav-btn > svg { flex: none; }
.nav-btn__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-btn.is-set { color: var(--hdr-top); background: #fff; border-color: #fff; }
.nav-btn[aria-expanded='true'] .menu__chev { transform: rotate(180deg); }

/* Row four: where you are. */
.hdr__row--loc { background: var(--hdr-loc); }
.locbar {
  display: flex; align-items: center; gap: 8px;
  inline-size: 100%; block-size: 42px;
  font-size: 14px; font-weight: 700; text-align: start;
  color: var(--hdr-loc-ink); background: none; border: 0;
}
.locbar > svg { flex: none; }
.locbar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr__row--loc[data-tuck] { max-block-size: 50px; }

/* Row five, only while a department is picked. */
.hdr__row--dept { color: var(--text); background: var(--surface); border-block-end: 1px solid var(--border); }
.deptbar { display: flex; align-items: center; gap: 8px; padding-block: 8px; }
.deptbar__x {
  display: grid; place-items: center; flex: none;
  inline-size: 34px; block-size: 34px; padding: 0;
  color: var(--text); background: var(--surface-2);
  border: 1.5px solid var(--border-strong); border-radius: 50%;
}
.deptbar__chips {
  display: flex; gap: 7px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; padding-block: 1px;
}
.deptbar__chips::-webkit-scrollbar { display: none; }
.deptbar .chip { padding: 7px 14px; font-size: 14px; font-weight: 700; }
.deptbar .chip.is-active { background: var(--brand); color: #fff; border-color: transparent; }
.chip__x { margin-inline-start: 2px; font-size: 11px; opacity: .85; }

/* The shops menu and the sort menu. */
.menu__head { margin: 6px 12px 2px; font-size: 12px; font-weight: 800; color: var(--text-faint); }
.menu__pop .segmented { display: flex; margin: 2px 2px 4px; }
.menu__pop .segmented button { flex: 1; justify-content: center; padding: 9px 12px; font-size: 14px; font-weight: 700; }
.menu__pop .segmented button::before { display: none; }
.menu__pop .segmented button.is-active { color: var(--on-brand); background: var(--brand); box-shadow: none; }
.store-pop { inline-size: min(330px, calc(100vw - 16px)); padding: 0; overflow: hidden; }
.store-pop__search { padding: 10px; border-block-end: 1px solid var(--border); }
.store-pop__search input {
  inline-size: 100%; block-size: 42px; padding: 0 12px;
  font-size: 16px; font-weight: 600;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; outline: none;
}
.store-pop__search input:focus { border-color: var(--brand); }
.store-pop__list { flex: 1; min-block-size: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu__pop .store-row { gap: 10px; padding: 10px 12px; font-size: 15px; font-weight: 700; border-radius: 10px; }
.menu__pop .store-row::before { display: none; }
.store-row__dot { flex: none; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--store-color, var(--brand)); }
.store-row--all .store-row__dot, .store-row--fav .store-row__dot { display: none; }
.store-row--fav { color: #d6336c; }
.store-row__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.store-row__note { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: normal; }
.store-row__n {
  flex: none; padding: 1px 8px; font-size: 12px; font-weight: 800;
  color: var(--text-muted); background: var(--surface-2); border-radius: 999px;
}
.menu__pop .store-row.is-active { color: var(--brand-ink); background: var(--brand-soft); }
.menu__pop .store-row:disabled { cursor: default; }
.menu__pop .store-row:disabled:hover { background: none; }
.store-pop__none { padding: 14px; font-size: 14px; color: var(--text-muted); text-align: center; }

/* The area list's search, in the location screen. */
.loc__arealist { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }
.loc__areasearch { padding: 10px 12px 4px; }
.loc__areasearch input {
  inline-size: 100%; block-size: 44px; padding: 0 14px;
  font-size: 16px; font-weight: 600;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; outline: none;
}
.loc__areasearch input:focus { border-color: var(--brand); }

/* ------------------------------------------------------ the drawer */
.drawer { position: fixed; inset: 0; z-index: 70; display: flex; background: rgba(0, 0, 0, .45); }
.drawer__panel {
  --drawer-from: 100%;
  inline-size: min(84vw, 340px); block-size: 100%;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--surface); box-shadow: var(--shadow-lg);
  animation: drawer-in .2s ease-out;
}
[dir='ltr'] .drawer__panel { --drawer-from: -100%; }
@keyframes drawer-in { from { transform: translateX(var(--drawer-from)); } }
@media (prefers-reduced-motion: reduce) { .drawer__panel { animation: none; } }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; color: #fff; background: var(--hdr-top);
}
.drawer__head .brand__name { font-size: 20px; font-weight: 800; }
.drawer__x {
  inline-size: 36px; block-size: 36px; padding: 0;
  font-size: 24px; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, .15); border: 0; border-radius: 50%;
}
.drawer__nav { display: flex; flex-direction: column; padding-block: 6px 20px; }
.drawer__nav a, .drawer__nav button {
  padding: 13px 18px; font-size: 16px; font-weight: 700; text-align: start;
  color: var(--text); background: none; border: 0; text-decoration: none;
}
.drawer__nav a:hover, .drawer__nav button:hover { background: var(--surface-2); }
.drawer__sep {
  margin-block-start: 8px; padding: 14px 18px 4px;
  font-size: 12px; font-weight: 800; color: var(--text-faint);
  border-block-start: 1px solid var(--border);
}

/* ------------------------------------------------ the department icons */
.depts {
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * clamp(12px, 3vw, 28px));
  padding: 2px clamp(12px, 3vw, 28px) 12px;
}
.depts::-webkit-scrollbar { display: none; }
.dept {
  flex: none; inline-size: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; color: var(--text); background: none; border: 0;
}
.dept__ic {
  display: grid; place-items: center;
  inline-size: 60px; block-size: 60px;
  background: var(--dept-bg); border-radius: 16px;
  transition: transform .15s;
}
.dept:hover .dept__ic { transform: translateY(-2px); }
.dept__label { max-inline-size: 74px; font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center; }
.dept.is-active .dept__ic { outline: 2.5px solid var(--brand); outline-offset: 2px; }
.dept.is-active .dept__label { color: var(--brand); }

/* ------------------------------------------------------- the statement */
.hero {
  position: relative; display: flex; align-items: center; gap: 12px;
  margin-block: 2px 16px; padding: 20px 18px;
  color: #fff; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .07) 0 22%, transparent 23%),
    linear-gradient(135deg, #0e5044 0%, #146356 50%, #1b7a66 100%);
  box-shadow: var(--shadow);
}
.hero__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hero__badge {
  padding: 4px 11px; font-size: 12px; font-weight: 800;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px;
}
.hero__title { font-size: clamp(21px, 5.8vw, 34px); font-weight: 800; line-height: 1.3; }
.hero__sub { font-size: 14px; font-weight: 500; line-height: 1.6; opacity: .92; }
.hero__art { position: relative; flex: none; inline-size: 92px; block-size: 92px; }
.hero__bag {
  position: absolute; inset: 12px;
  display: grid; place-items: center;
  color: #146356; background: #fdf6e3; border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.hero__dot { position: absolute; border-radius: 50%; background: var(--accent); }
.hero__dot--a { inline-size: 9px; block-size: 9px; inset-block-start: 2px; inset-inline-end: 12px; }
.hero__dot--b { inline-size: 6px; block-size: 6px; inset-block-end: 6px; inset-inline-start: 2px; background: #fff; opacity: .7; }
.hero__dot--c { inline-size: 7px; block-size: 7px; inset-block-start: 40px; inset-inline-start: -4px; }
/* ?hero=short - the compact one, to compare. */
.hero--short { padding: 12px 14px; border-radius: 14px; }
.hero--short .hero__badge { display: none; }
.hero--short .hero__text { gap: 2px; }
.hero--short .hero__title { font-size: 17px; }
.hero--short .hero__sub { font-size: 13px; }
.hero--short .hero__art { inline-size: 50px; block-size: 50px; }
.hero--short .hero__bag { inset: 3px; }
.hero--short .hero__bag svg { inline-size: 24px; block-size: 24px; }
.hero--short .hero__dot { display: none; }

/* ------------------------------------------ the summary and its switch */
.summary {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  scroll-margin-block-start: calc(var(--header-h) + 10px);
}
.segmented--view button { padding: 6px 13px; font-size: 13px; font-weight: 700; }
.segmented--view button.is-active { color: var(--on-brand); background: var(--brand); }

/* ------------------------------------------------- a shop, as a panel */
.store-section--tiles {
  padding-block: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 4px solid var(--store-color, var(--brand));
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-block-end: 14px;
  scroll-margin-block-start: calc(var(--header-h) + 10px);
}
.store-section--tiles .store-section__head {
  padding: 0 14px; margin-block-end: 6px; border-block-end: 0;
}
.store-section__titles h2 { font-size: 18px; font-weight: 800; }
.store-section__meta { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.tiles__hint { padding: 0 14px 8px; font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.tiles {
  display: flex; gap: 12px;
  overflow-x: auto; scrollbar-width: thin;
  scroll-snap-type: x mandatory; scroll-padding-inline: 14px;
  padding: 2px 14px 6px;
}
.tile {
  flex: none; inline-size: min(72vw, 300px);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
@media (hover: hover) { .tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); } }
.mosaic {
  position: relative; display: grid; gap: 3px;
  aspect-ratio: 1 / 1.08; background: var(--surface-2);
}
.mosaic--1 { grid-template-columns: 1fr; }
.mosaic--2 { grid-template-columns: 1fr 1fr; }
.mosaic--3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic--3 .mosaic__cell:first-child { grid-row: span 2; }
.mosaic__cell { position: relative; min-block-size: 0; padding: 0; overflow: hidden; background: var(--surface-2); border: 0; }
.mosaic__cell img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.mosaic__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: var(--store-on, #fff); background: rgba(0, 0, 0, .5);
}
.tile__over {
  position: absolute; inset: 8px 8px auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
  pointer-events: none;
}
.tile__count {
  padding: 3px 10px; font-size: 12px; font-weight: 800;
  color: var(--store-on, #fff); background: rgba(0, 0, 0, .66); border-radius: 999px;
}
.tile__flags { display: flex; gap: 4px; }
.tile__flags .badge { position: static; font-size: 12px; font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.tile__body { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; }
.tile__who { font-weight: 800; }
.tile__range { font-size: 14px; font-weight: 800; color: var(--text); }
.tile__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tile__tags .tag { font-weight: 700; }
.tile--all {
  inline-size: 150px; justify-content: center; align-items: center; gap: 10px;
  padding: 18px 12px; text-align: center; text-decoration: none;
  color: var(--text); background: var(--surface-2); border-style: dashed;
}
.tile--all__text { font-size: 14px; font-weight: 800; }
.tile--all__arrow { font-size: 24px; font-weight: 800; color: var(--store-text, var(--store-color, var(--brand))); }
[dir='ltr'] .tile--all__arrow { transform: scaleX(-1); }
.tiles-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tiles-grid .tile { inline-size: auto; }
@media (min-width: 700px) { .tiles-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }

@media (max-width: 420px) {
  .hdr .acct-btn svg { display: none; }
  .hdr .brand__mark { display: none; }
  .hdr .acct-btn { padding: 0 10px; }
}

/* Arabic joins its letters; tracking pulls them apart. */
.store-section__titles h2 { letter-spacing: 0; }
@media (max-width: 640px) {
  /* The name and the tile at the end of the row both go to the shop's
     page; the pill beside the name only squeezed it onto three lines. */
  .store-section--tiles .store-section__page { display: none; }
  /* The sort button's own words say what it is. */
  #sortBtn > svg:first-child { display: none; }
  .hdr__nav > .menu:last-child { flex-grow: 1.25; }
}
@media (max-width: 640px) {
  .nav-btn { gap: 4px; padding: 0 6px; font-size: 13.5px; }
  /* English has room for the sort icon beside its short word. */
  [dir='ltr'] #sortBtn > svg:first-child { display: block; }
}

/* Desktop: the header lines up with the page under it, and the three
   menus are buttons sized to their words rather than thirds of 1400px. */
.hdr__in { padding-inline: clamp(12px, 3vw, 28px); }
@media (min-width: 900px) {
  .hdr__nav { justify-content: flex-start; }
  .hdr__nav > .nav-btn, .hdr__nav > .menu { flex: 0 0 auto; }
  .nav-btn { min-inline-size: 170px; padding: 0 16px; }
  .depts { justify-content: safe center; }
  .hero { padding: 26px 32px; }
  .hero__art { inline-size: 110px; block-size: 110px; }
}

/* ----------------------------------------------- tiles: the owner's notes
   (2026-09-27) - how long is left sits at the bottom corner, where a
   flyer rarely prints a product, and one or two days left is a plain,
   bright orange warning. More air between the shops on the home page. */
.tile__flags {
  position: absolute; inset-block-end: 8px; inset-inline-start: 8px;
  display: flex; gap: 4px; pointer-events: none;
}
/* Dark words on the bright orange: white on it was 2.7:1 (the audit,
   2026-09-30); the orange itself stays - it is the warning. */
.badge--warn, .card__flag--warn { color: #2a1600; background: #f57c00; }
.store-section--tiles { margin-block-end: 24px; }

/* ------------------------------------------------------ the store page */
.hdr .nav-btn { text-decoration: none; }
.nav-btn__n {
  min-inline-size: 20px; padding: 0 6px;
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px;
}
.menu__pop a.store-row {
  display: flex; align-items: center;
  color: var(--text); text-decoration: none;
}
.menu__pop a.store-row:hover { background: var(--surface-2); }

#storeHead .store-head {
  max-width: none;
  margin-block: 4px 18px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 4px solid var(--store-color, var(--brand));
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.store-head__top { gap: 10px; }
.store-head__name { letter-spacing: 0; line-height: 1.3; }
.store-head__meta { font-weight: 600; }
.store-share { padding: 0 12px; block-size: 34px; font-size: 13px; }
.store-head__about {
  margin-block-start: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.store-tags {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin-block-start: 10px; padding-block-end: 2px;
}
.store-tags::-webkit-scrollbar { display: none; }
.store-tag, .store-tags__label { flex: none; }
.store-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.store-quick__btn {
  display: inline-flex; align-items: center; gap: 6px;
  block-size: 38px; padding: 0 12px;
  font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.store-quick__btn:hover { border-color: var(--store-color, var(--brand)); }
.store-quick__ic { display: grid; color: var(--store-text, var(--store-color, var(--brand))); }
.store-quick__chev { font-size: 11px; transition: transform .15s; }
.store-quick__more.is-open .store-quick__chev { transform: rotate(180deg); }
.store-quick__more.is-open { background: var(--brand-soft); }
#storeHead .store-details { margin-block-start: 12px; }
.store-section__title { font-size: 19px; font-weight: 800; margin-block-end: 4px; }
#content > .tiles__hint { padding: 0 0 10px; }
.store-basket { scroll-margin-block-start: calc(var(--header-h) + 10px); }
button.search__go { border: 0; padding: 0; }

/* ------------------------------------------------ the viewer (2026-09-27)
   Scrolling is free - no snapping to a page's top. A page tapped opens
   full screen (.viewer__zoom) with "share picture" above it; "share
   offer" shares the whole flyer. The basket and the post's words are
   off in the viewer for now. */
.viewer--vertical .viewer__scroll { scroll-snap-type: none; }
.viewer__page { scroll-snap-align: none; cursor: zoom-in; }
.viewer__share {
  display: inline-flex; align-items: center; gap: 6px;
  block-size: 36px; padding: 0 12px;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--v-ink); background: var(--v-fill);
  border: 1px solid var(--v-line); border-radius: 999px; cursor: pointer;
}
.viewer__share:hover { background: var(--v-fill-2); }
.viewer--vertical .viewer__share--pic { display: none; }
@media (max-width: 420px) { .viewer__top .viewer__share span { display: none; } .viewer__top .viewer__share { inline-size: 36px; padding: 0; justify-content: center; } }
.viewer__zoom {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--v-bg);
}
.viewer__zoombar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-block-end: 1px solid var(--v-line);
}
.viewer__zoomback {
  display: inline-flex; align-items: center; gap: 6px;
  block-size: 36px; padding: 0 12px;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--v-ink); background: none; border: 0; cursor: pointer;
}
[dir='ltr'] .viewer__zoomback svg { transform: scaleX(-1); }
.viewer__zoomnum { font-size: 13px; font-weight: 700; color: var(--v-ink-2); direction: ltr; }
.viewer__zoombody { flex: 1; min-block-size: 0; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.viewer__zoombody img { inline-size: 100%; block-size: auto; display: block; }

/* ------------------------------------------ home page notes (2026-09-27)
   The shop's page as a pill beside the heart, on a phone too (as Codex
   drew it); the counts line as a pill; the shop's name on top of an
   all-offers tile; what a search or department found as one sliding row
   per shop. */
.store-section__page {
  flex: none; padding: 6px 12px;
  font-size: 13px; font-weight: 700; color: var(--brand-ink);
  background: var(--brand-soft); border-radius: 999px;
}
.store-section__page:hover { text-decoration: none; filter: brightness(.97); }
@media (max-width: 640px) {
  .store-section--tiles .store-section__page { display: inline-block; }
}
.summary__text {
  padding: 5px 12px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.tile__head { padding: 10px 12px 8px; }
.tile__head .card__store { font-size: 16px; font-weight: 800; }
.tiles--matches .match {
  flex: none; inline-size: min(44vw, 210px);
  scroll-snap-align: start;
}
.tiles--matches .match--single { inline-size: min(40vw, 190px); }
.tiles__hint--found { color: var(--text-muted); font-weight: 700; }
.found-list { display: grid; }

/* The store page's details, always shown (the owner, 2026-09-27): three
   across on a phone - label over value, tight - with branches closing the
   last row across two columns. Four across on a wide screen. */
#storeHead .store-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  padding: 12px;
  border-inline-start-width: 1px;
  background: var(--surface-2);
}
#storeHead .store-detail { flex-direction: column; gap: 4px; }
#storeHead .store-detail__icon { inline-size: 26px; block-size: 26px; background: var(--surface); }
#storeHead .store-detail__label { font-size: 11px; letter-spacing: 0; }
#storeHead .store-detail__value {
  font-size: 13px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#storeHead .store-detail__action { font-size: 12px; font-weight: 700; }
#storeHead .store-detail--wide { grid-column: span 2; }
#storeHead .store-branch { font-size: 12px; }
@media (min-width: 900px) {
  #storeHead .store-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #storeHead .store-detail { flex-direction: row; }
}
.demo-badge {
  display: inline-block; margin-inline-start: 8px; padding: 1px 8px;
  font-size: 11px; font-weight: 800; vertical-align: middle;
  color: #7a4b00; background: #ffe7a3; border-radius: 999px;
}
/* Compact cells: icon and label on one line, the value under both. */
#storeHead .store-detail {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 6px; row-gap: 2px;
}
#storeHead .store-detail__body { display: contents; }
#storeHead .store-detail__icon { inline-size: 22px; block-size: 22px; border-radius: 7px; }
#storeHead .store-detail__icon svg { inline-size: 14px; block-size: 14px; }
#storeHead .store-detail__label { line-height: 1.2; }
#storeHead .store-detail__value,
#storeHead .store-detail__action,
#storeHead .store-branches,
#storeHead .store-links { grid-column: 1 / -1; }
#storeHead .store-details { gap: 10px 8px; padding: 10px; }
@media (min-width: 900px) { #storeHead .store-detail { display: grid; } }
@media (max-width: 640px) {
  .store-section__titles h2 { font-size: 17px; }
  .store-section__page { padding: 5px 10px; font-size: 12px; }
}

/* ------------------------------------ the store page's basket (2026-09-27)
   A picture beside each product - as big as the row allows - the name and
   price, and the - 0 + at the far end. Colour: the shop's own on the
   panel's edge, the site's green on the running total and the plus. */
.store-basket { border-block-start: 4px solid var(--store-color, var(--brand)); }
.store-basket__head h2 { font-size: 19px; font-weight: 800; }
.store-basket .basket-list { inline-size: 100%; gap: 6px; }
.store-basket .basket-row {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas:
    "img name qty"
    "img meta line";
  column-gap: 12px; row-gap: 2px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.store-basket .basket-row.is-picked {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}
.basket-row__img {
  grid-area: img;
  display: grid; place-items: center;
  inline-size: 76px; block-size: 76px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.basket-row__img img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.basket-row__img--icon { background: var(--dept-bg); }
.store-basket .basket-row__name { font-size: 14.5px; font-weight: 700; color: var(--text); align-self: end; }
.store-basket .basket-row__meta { align-self: start; color: var(--text-muted); }
.store-basket .basket-row__price {
  padding: 1px 8px;
  font-size: 13px; font-weight: 800;
  color: #b3261e; background: #fff1c2; border-radius: 6px;
}
.store-basket .basket-row__stepper { align-self: end; }
.store-basket .basket-row__line { align-self: start; color: var(--brand-ink); font-size: 13px; font-weight: 800; }
.store-basket .basket-step { border-radius: 10px; }
.store-basket .basket-step--plus { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.store-basket .basket-step--plus:hover:not(:disabled) { background: var(--brand-ink); }
.store-basket .basket-row__qty { inline-size: 44px; font-weight: 800; }
.store-basket .basket-bar {
  color: #fff;
  background: linear-gradient(135deg, var(--hdr-top-2), var(--hdr-top));
  border: 0;
}
.store-basket .basket-bar.is-empty { color: rgba(255, 255, 255, .85); }
.store-basket .basket-bar__total {
  padding: 2px 12px; color: var(--accent-ink); background: var(--accent); border-radius: 999px;
}
.store-basket .basket-bar__clear { color: #fff; }
@media (max-width: 420px) {
  .store-basket .basket-row { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 10px; }
  .basket-row__img { inline-size: 64px; block-size: 64px; }
  .store-basket .basket-step { inline-size: 32px; }
}
.tiles-wrap { position: relative; }
.tiles__more { inset-inline-end: 10px; }

/* All offers: each offer its own card, clearly apart (the owner: they ran
   together) - a shadow, the shop's colour along the top, more air. */
.tiles-grid { gap: 20px; }
.tiles-grid > .tile {
  border: 1px solid var(--border-strong);
  border-block-start: 4px solid var(--store-color, var(--brand));
  box-shadow: 0 2px 10px rgba(20, 25, 23, .10);
}

/* A page tapped full screen FILLS the screen: as tall as the space under
   its bar, wider than a phone if need be - slide to see its sides. */
.viewer__zoombody { display: flex; justify-content: center; }
.viewer__zoombody img { inline-size: auto; block-size: 100%; max-inline-size: none; flex: none; }
.viewer__zoom.is-fit .viewer__zoombody img { inline-size: 100%; block-size: auto; }
.viewer__zoombody { display: block; }
.viewer__zoombody img { margin-inline: auto; cursor: zoom-out; }
.viewer__zoom.is-fit .viewer__zoombody img { cursor: zoom-in; }

/* The full-screen page: the whole of it, as big as fits - no scrolling
   (replaces the fill-the-height try above). */
.viewer__zoombody {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 4px;
}
.viewer__zoombody img {
  inline-size: 100%; block-size: 100%; max-inline-size: 100%;
  object-fit: contain; margin: 0; cursor: default;
}

/* Tappable products on our own flyers (gallery.js productHits): invisible
   buttons over each product; a computer shows a ring on hover. */
.viewer__frame, .viewer__zoombody { position: relative; }
.prod-hits { position: absolute; z-index: 1; pointer-events: none; }
.prod-hits[hidden] { display: none; }
.prod-hit {
  position: absolute; padding: 0; margin: 0; cursor: pointer; pointer-events: auto;
  background: transparent; border: 0; border-radius: 12px; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.prod-hit:active { background: color-mix(in srgb, var(--store-color, var(--brand)) 14%, transparent); }
.prod-hit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--store-color, var(--brand)); }
@media (hover: hover) and (pointer: fine) {
  .prod-hit:hover { box-shadow: 0 0 0 3px var(--store-color, var(--brand)); }
}
/* The product alone (ui.productCard). */
.prod-card { padding-block-start: 12px; }
.prod-card__shop { color: var(--store-text, var(--store-color, var(--brand))); }
.prod-card__pic {
  display: block; inline-size: 100%; block-size: min(42vh, 260px); margin: 10px 0 12px; padding: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: zoom-in;
}
/* The whole product, never its top only: the picture fills the box and is
   contained in it (a percentage max-height had nothing to resolve against). */
.prod-card__pic img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.prod-card__pic .basket-row__img { margin: auto; }
/* Full screen: the picture, its name and price, nothing else. */
.prod-card.is-full {
  position: fixed; inset: 0; inline-size: 100%; max-block-size: none; border-radius: 0;
  display: flex; flex-direction: column; background: #fff; animation: none;
}
.prod-card.is-full .prod-card__pic { flex: 1; block-size: auto; min-block-size: 0; border: 0; cursor: zoom-out; }
.prod-card.is-full .prod-card__name { font-size: 21px; }
.prod-card.is-full .prod-card__price { font-size: 28px; }
.prod-card.is-full .prod-card__buy, .prod-card.is-full .ask-pop__acts { display: none; }
.prod-card__pic .basket-row__img { inline-size: 96px; block-size: 96px; }
.prod-card__name { font-size: 18px; font-weight: 800; line-height: 1.35; }
.prod-card__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-block-start: 6px; }
.prod-card__pack { font-size: 14px; color: var(--text-muted); }
.prod-card__price { margin-inline-start: auto; font-size: 22px; font-weight: 900; color: var(--store-text, var(--store-color, var(--brand))); white-space: nowrap; }
.prod-card__was { margin-inline-end: 8px; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.prod-card__buy {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 12px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.prod-card__add { font-size: 15px; font-weight: 800; color: var(--text); }
.prod-card__add.is-added { color: var(--calm, #15803d); }
.prod-card__row, .prod-card__row.is-picked { display: flex; padding: 0; background: none; }
.prod-card__row .basket-step {
  inline-size: 46px; block-size: 46px; font-size: 24px; font-weight: 800;
  color: var(--on-brand, #fff); background: var(--store-color, var(--brand)); border: 0; border-radius: 12px;
}
.prod-card__row .basket-step--minus { color: var(--text); background: var(--bg); border: 1.5px solid var(--border); }
/* + stays the shop's colour after a tap: a phone keeps the hover state,
   and the basket rows' grey hover turned it grey (the owner, 2026-10-19). */
.prod-card__row .basket-step--plus:hover:not(:disabled) { background: color-mix(in srgb, var(--store-color, var(--brand)) 88%, #000); }
.prod-card__row .basket-step--minus:hover:not(:disabled) { background: var(--surface); }
.prod-card__row .basket-row__qty {
  inline-size: 58px; min-block-size: 46px; font-size: 18px; font-weight: 800;
  color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
}
.prod-card__row .basket-row__line { display: none; }
.prod-card__row > .basket-row__img, .prod-card__row > .basket-row__name, .prod-card__row > .basket-row__meta { display: none; }
.prod-card .ask-pop__acts a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* "+N" on every sideways row (ui.withMore). */
.more-wrap { position: relative; min-inline-size: 0; }
.deptbar .more-wrap { flex: 1; }
.deptbar .more-bubble, #storeHead .more-bubble, .depts + .more-bubble {
  min-inline-size: 36px; padding: 4px 9px; font-size: 12px;
}
.depts + .more-bubble { inset-block-start: 34px; }
.store-section--tiles .more-wrap > .more-bubble { inset-inline-end: 10px; }
.tile--all { display: none; }

/* The chosen option in the header's menus: the whole row in the search
   button's yellow, dark text (the owner picked this over yellow text,
   2026-09-27). */
.menu__pop button[role='menuitemradio'][aria-checked='true'],
.menu__pop .store-row.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 800;
}
.menu__pop button[aria-checked='true']::before {
  border-color: var(--accent-ink);
  background: radial-gradient(circle, var(--accent-ink) 0 4px, transparent 4.5px);
}

/* ------------------------------------------- the viewer's calculator
   A round button in the corner (the running total once something is in
   it) and a sheet from the bottom - the store page's basket, over the
   flyer (the owner, 2026-09-28). */
.viewer__calc {
  position: absolute; z-index: 8;
  inset-block-end: calc(18px + env(safe-area-inset-bottom));
  inset-inline-end: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  block-size: 48px; padding: 0 18px;
  font: inherit; font-size: 15px; font-weight: 800;
  color: #fff; background: var(--hdr-top);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.viewer__calc.has-items { color: var(--accent-ink); background: var(--accent); }
.viewer__calc.is-open { visibility: hidden; }
.viewer__calc-label { direction: ltr; unicode-bidi: isolate; }
.calc-sheet.store-basket {
  position: absolute; z-index: 9;
  inset-inline: 0; inset-block-end: 0;
  margin: 0 auto; max-inline-size: 640px; max-block-size: 72%;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  color: var(--text); background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
  animation: sheet-up .2s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .calc-sheet.store-basket { animation: none; } }
.calc-sheet__head { display: flex; align-items: center; justify-content: space-between; }
.calc-sheet__head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.calc-sheet__x {
  inline-size: 36px; block-size: 36px; padding: 0;
  font-size: 16px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
}
.calc-sheet__scope { display: flex; align-self: stretch; }
.calc-sheet__scope button { flex: 1; font-size: 14px; font-weight: 700; padding: 8px 12px; }
.calc-sheet__scope button.is-active { color: var(--on-brand); background: var(--brand); }
.calc-sheet .calc-sheet__list { flex: 1; min-block-size: 0; max-block-size: none; margin: 0; overflow-y: auto; }
.calc-sheet .store-basket__none { margin: 8px 4px; }

/* Calculator notes (the owner, 2026-09-28): the button on the RIGHT in
   both languages - where a right thumb is - and inside the picture's area;
   the count in the bar readable, in the site's yellow. */
.viewer__calc { inset-inline-end: auto; right: 16px; left: auto; }
.viewer:not(.viewer--vertical) .viewer__calc { inset-block-end: 16px; }
.store-basket .basket-bar__count { color: var(--accent); font-weight: 700; }
.store-basket .basket-bar.is-empty .basket-bar__count { color: var(--accent); }

/* How long is left: back to the TOP of the card, opposite the picture
   count - where it is seen first (the owner, 2026-09-28). */
.tile__flags { inset-block-end: auto; inset-block-start: 8px; inset-inline-start: auto; inset-inline-end: 8px; }
.tile__over { justify-content: flex-start; }

/* Desktop: the calculator as a side panel on the right, the page moved
   over to sit beside it (the owner, 2026-09-28). */
.viewer--calc .calc-sheet.store-basket {
  inset-block-end: 0; inset-inline: auto; right: 0; left: auto;
  inline-size: 483px; max-inline-size: none; max-block-size: none;
  border-radius: 0; box-shadow: -10px 0 40px rgba(0, 0, 0, .18);
  animation: panel-in .2s ease-out;
}
@keyframes panel-in { from { transform: translateX(30%); opacity: .4; } }
.viewer--calc .viewer__stage,
.viewer--calc .viewer__bottom { margin-right: 483px; }
.viewer--calc .viewer__nav--next { right: 495px; }

/* ------------------------------------------- the ad builder (2026-09-28)
   create-ad.html in the revamp: the site's header with its own third row
   (categories, the design menu, the shop's page), the per-page numbers on
   the flyer's own bar, product cards like the tiles, panels like the
   store page's basket. Scoped to .page-maker. */

/* The design menu: one row each - what it is, then the choice. */
.ad-design-pop { inline-size: min(340px, calc(100vw - 16px)); padding: 8px; gap: 6px; }
.page-maker .ad-design-pop .ad-sizes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 8px 10px; min-block-size: 56px;
  background: var(--surface-2); border-radius: 12px;
}
.page-maker .ad-design-pop .ad-sizes[hidden] { display: none; }
.page-maker .ad-design-pop #adThemes { order: 1; }
.page-maker .ad-design-pop #adHeadlines { order: 2; }
.page-maker .ad-design-pop #adLogo { order: 3; }
.page-maker .ad-design-pop .select__label {
  display: inline; flex: 1 1 auto; margin: 0;
  font-size: 15px; font-weight: 800; color: var(--text);
}
.page-maker .ad-design-pop .ad-sizes button {
  block-size: 40px; padding-inline: 12px; font-size: 14px; font-weight: 700;
  border-radius: 10px; border-color: var(--border-strong); background: var(--surface);
}
.page-maker .ad-design-pop .ad-hl-pick { gap: 8px; padding: 4px 10px 4px 6px; }
.page-maker .ad-design-pop .ad-th-pick img { inline-size: 30px; block-size: 30px; }
.page-maker .ad-design-pop .ad-hl-pick img { block-size: 30px; }
.page-maker .ad-design-pop .ad-th-pick__name { font-size: 14px; }
.page-maker .ad-design-pop .ad-logo__thumb { inline-size: 40px; block-size: 40px; }

/* The flyer's own bar: products per page, then the page arrows. */
.page-maker .ad-preview {
  border-radius: 16px; box-shadow: 0 1px 4px rgba(20, 25, 23, .06);
}
.page-maker .ad-preview__head {
  align-items: center; gap: 8px; padding: 8px 10px;
  color: var(--text); background: var(--surface);
}
.page-maker .ad-preview__head #adSizes { order: 0; margin-inline-start: 0; gap: 4px; }
.page-maker .ad-preview__head .select__label {
  display: inline; margin-inline-end: 4px; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: var(--text-muted);
}
.page-maker .ad-preview__head #adSizes button {
  inline-size: 36px; block-size: 36px; font-size: 15px; font-weight: 800; border-radius: 10px;
}
.page-maker .ad-pager button { inline-size: 36px; block-size: 36px; font-size: 20px; border-radius: 10px; }
.page-maker .ad-preview__pages { min-inline-size: 40px; font-size: 13px; font-weight: 800; }
@media (max-width: 420px) {
  .page-maker .ad-preview__head #adSizes { gap: 3px; }
  .page-maker .ad-preview__head #adSizes button { inline-size: 33px; }
  /* Several pages: the arrows need the room; the numbers explain
     themselves by then. */
  .page-maker .ad-preview__head:has(.ad-pager:not([hidden])) .select__label { display: none; }
}

/* The count, over the products it counts. */
.page-maker .ad-count { margin: 4px 2px 10px; font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* Product cards, like the tiles: white, rounded, a big picture, a "+" in
   the corner that turns into the yellow tick once picked (the chosen
   thing is yellow everywhere on the site now). */
.page-maker .maker-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.page-maker .maker-card {
  position: relative; gap: 3px; padding: 8px 8px 10px;
  border-radius: 14px; box-shadow: 0 1px 4px rgba(20, 25, 23, .06);
}
.page-maker .maker-card__img { block-size: 128px; margin-block-end: 4px; background: #fff; border-radius: 10px; }
.page-maker .maker-card__img--stub {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 6px, var(--surface) 6px 12px);
}
.page-maker .maker-card__name { font-size: 14px; font-weight: 700; }
.page-maker .maker-card__en { font-size: 12px; }
.page-maker .maker-card__meta { font-size: 12.5px; font-weight: 700; }
.page-maker .maker-card::after {
  content: '+';
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  display: grid; place-items: center; inline-size: 30px; block-size: 30px;
  font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--on-brand); background: var(--brand); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.page-maker .maker-card.is-picked {
  padding: 7px 7px 9px; background: var(--brand-soft);
  border: 2px solid var(--brand); box-shadow: none;
}
.page-maker .maker-card.is-picked::after { content: '\2713'; font-size: 17px; color: var(--accent-ink); background: var(--accent); }
.page-maker .ad-more { border-radius: 14px; font-size: 14px; font-weight: 800; }

/* The side: panels like the store page's basket. */
.page-maker .ad-picks, .page-maker .maker-fields, .page-maker .ad-drafts {
  border-radius: 16px; box-shadow: 0 1px 4px rgba(20, 25, 23, .06);
}
.page-maker .ad-picks { border-block-start: 4px solid var(--store-color, var(--brand)); }
.page-maker .ad-picks__head h2, .page-maker .ad-drafts__head h2 { font-size: 16px; font-weight: 800; }
.page-maker .ad-pick {
  gap: 10px; padding: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
}
.page-maker .ad-pick__media { inline-size: 68px; }
.page-maker button.ad-pick__img { inline-size: 64px; block-size: 64px; border-radius: 12px; background: #fff; }
.page-maker .ad-pick__name { font-size: 14px; font-weight: 700; }
.page-maker .ad-pick__field input {
  padding: 7px 8px; font-size: 16px; font-weight: 800;
  border-width: 1.5px; border-radius: 10px;
}
/* The price box looks like the price tag it becomes. */
.page-maker .ad-pick__field .ad-pick__price { color: #b3261e; background: #fff1c2; }
.page-maker .ad-pick__drop { inline-size: 34px; block-size: 34px; font-size: 20px; border-radius: 10px; }
.page-maker .ad-pick__note { padding: 7px 9px; font-size: 16px; border-radius: 10px; }
.page-maker .maker-field { font-size: 13px; font-weight: 700; }
/* 16px: a phone zooms the page into any smaller box it types in. */
.page-maker .maker-field input {
  block-size: 42px; padding: 0 10px; font-size: 16px; font-weight: 600;
  background: var(--surface-2); border-radius: 10px;
}
.page-maker .ad-check { font-size: 14px; font-weight: 700; }
.page-maker .maker-btn { border-radius: 12px; font-weight: 800; }
.page-maker .maker-btn--make { min-block-size: 50px; padding: 0 14px; font-size: 16px; }
.page-maker #adSubmit:not(:disabled):not(.is-sent) {
  background: linear-gradient(180deg, var(--hdr-top-2), var(--hdr-top));
  box-shadow: 0 2px 8px rgba(20, 99, 86, .3);
}
.page-maker .maker-btn--quiet { min-block-size: 44px; font-size: 14px; }

/* An admin's store picker: at the top of the side panel. */
.ad-store-bar {
  display: grid; gap: 4px; padding: 10px 12px;
  font-size: 13px; font-weight: 800; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.page-maker .ad-store-bar .ad-store-pick {
  margin: 0; block-size: 42px; padding: 0 10px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
}

/* Who is signed in, at the foot of the drawer, and the way out. */
.drawer__who { padding: 0 18px 4px; font-size: 14px; font-weight: 700; color: var(--text-muted); overflow-wrap: anywhere; }
.drawer__nav #adSignOut { color: var(--urgent); }

@media (min-width: 1440px) {
  .page-maker .ad-count { grid-column: 1; }
}
/* The arrows only once there is a second page (create-ad.js sets
   [hidden]; .ad-pager's display used to override it). */
.page-maker .ad-pager[hidden] { display: none; }
.page-maker .ad-preview__head { flex-wrap: wrap; }
@media (max-width: 900px) { .page-maker .ad-studio { grid-template-columns: minmax(0, 1fr); } }
/* An older phone rule hid the shop's-page link from the old header. */
.page-maker .hdr #backToStore { display: inline-flex; }
.page-maker .maker-side { grid-template-columns: minmax(0, 1fr); }
.page-maker .maker-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-maker .maker-field input { inline-size: 100%; min-inline-size: 0; }
/* The design menu's buttons are choices of their own, not radio rows. */
.ad-design-pop button::before { display: none; }
.page-maker .ad-design-pop .ad-sizes button { display: inline-flex; align-items: center; }
.page-maker .ad-design-pop .ad-sizes button[hidden] { display: none; }
.page-maker .ad-design-pop .ad-sizes button:hover { background: var(--surface); border-color: var(--brand); }
.page-maker .drawer__nav #adSignOut { padding: 13px 18px; font-size: 16px; }

/* ---------------------------------------- the owner's notes (2026-09-28)

   The viewer's share: words on it everywhere; a phone has room for the
   short word, the full-screen picture keeps "share picture". */
.viewer__share-short { display: none; }
@media (max-width: 420px) {
  .viewer__top .viewer__share .viewer__share-long { display: none; }
  .viewer__top .viewer__share span.viewer__share-short { display: inline; }
  .viewer__top .viewer__share { inline-size: auto; padding: 0 12px; gap: 6px; }
}

/* The calculator pinned open on a wide desktop: no x, no button. */
.viewer--calc-pinned .calc-sheet__x,
.viewer--calc-pinned .viewer__calc { display: none; }
.viewer--calc-pinned .calc-sheet.store-basket { animation: none; }

/* The basket's bar: the shop's name bigger, and how many beside what
   they cost (the owner: "I'd like to see the result"). */
.store-basket .basket-bar { gap: 8px; }
.store-basket .basket-bar__text { display: contents; }
.store-basket .basket-bar__store {
  flex: 1 1 auto; min-inline-size: 0;
  font-size: 18px; font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store-basket .basket-bar__count { flex: none; font-size: 14px; font-weight: 800; white-space: nowrap; }
.store-basket .basket-bar__total { margin-inline-start: 0; flex: none; }

/* Where you are: the site's yellow - the feature every shopper should
   find first (the owner). Dark text, as on the search button. */
.hdr__row--loc { background: var(--accent); }
.hdr__row--loc .locbar { color: var(--accent-ink); }

.store-share { display: inline-flex; align-items: center; gap: 6px; }
.store-share svg { flex: none; }
/* The wide builder: the flyer's column is sized from the WHOLE header,
   not the part showing - tucking the header on scroll made the column
   wider and the flyer slid sideways (the owner, 2026-09-28). */
@media (min-width: 1440px) {
  .page-maker .ad-studio { --stage-h: calc(100dvh - var(--header-full, 170px) - 64px); }
}
.ad-zoom__page { cursor: zoom-out; }
.ad-zoom__page.is-fit { cursor: zoom-in; }
/* Leaving the builder with an unsaved ad. */
.ad-leave { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 16px; background: rgba(0, 0, 0, .5); }
.ad-leave__card { display: grid; gap: 10px; inline-size: min(400px, 100%); padding: 20px;
  color: var(--text); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); }
.ad-leave__card h2 { margin: 0; font-size: 19px; font-weight: 800; }
.ad-leave__card p { margin: 0 0 6px; font-size: 15px; color: var(--text-muted); }
.ad-leave__btn { min-block-size: 48px; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 800;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 12px; cursor: pointer; }
.ad-leave__btn.is-main { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ad-leave__btn.is-quiet { color: var(--urgent); background: none; }
.ad-leave__btn:disabled { opacity: .6; cursor: progress; }
/* A long shop name takes two lines rather than losing its end. */
.store-basket .basket-bar__store {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* All offers + a department on a phone: the found shops' grid column
   stretched to its widest sliding row (1080px) and the whole page could
   be dragged sideways (the owner, 2026-09-28). One column, no wider than
   the screen - the row slides inside it and says "+N". */
.found-list { grid-template-columns: minmax(0, 1fr); }
.found-list > * { min-inline-size: 0; }

/* Experiment (the owner): the "+N" bubble points the way the row goes -
   left in Arabic, right in English. */
.more-bubble { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.more-bubble[hidden] { display: none; }
.more-bubble::after {
  content: ''; flex: none; inline-size: 7px; block-size: 7px;
  border: solid currentColor; border-width: 0 0 2.5px 2.5px;
  transform: rotate(45deg); margin-inline-start: 3px;
}
[dir='ltr'] .more-bubble::after { transform: rotate(-135deg); margin-inline-start: 1px; margin-inline-end: 2px; }

/* The calculator's heading carries its count, like the store page's. */
.calc-sheet__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-inline-size: 0; }
.calc-sheet .store-basket__n { font-size: 13px; font-weight: 700; }

/* Kept from the ?yellow=1 try-out (the owner, 2026-09-28): the way to a
   shop's page is a yellow button - on the home page's shops, shown on a
   phone too, and in the builder's header. The by-store / all-offers
   switch keeps its green. */
.store-section__page,
.store-section--tiles .store-section__page {
  display: inline-flex; align-items: center; flex: none;
  padding: 6px 14px; font-size: 13px; font-weight: 800;
  color: var(--accent-ink); background: var(--accent);
  border-radius: 999px; text-decoration: none;
}
.store-section__page:hover { text-decoration: none; filter: brightness(1.05); }
.page-maker .hdr #backToStore { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* "Make an ad": the site's yellow, like the way to a shop's page - on the
   shop's own page a full-width button with its line under it, and the
   same yellow in the shop's profile (the owner, 2026-09-28). */
.ad-entry { flex-direction: column; align-items: stretch; gap: 6px; }
.ad-entry .maker-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 50px; padding: 0 18px;
  font-size: 17px; font-weight: 800; text-align: center;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.ad-entry .maker-btn::before { content: '+'; font-size: 22px; line-height: 1; }
.ad-entry .maker-btn:hover { background: var(--accent); filter: brightness(1.05); }
.ad-entry__note { text-align: center; }
@media (min-width: 700px) {
  .ad-entry { align-items: center; }
  .ad-entry .maker-btn { min-inline-size: 320px; }
}
.acct .prof-store__make { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 800; }

/* Tiles (the owner, 2026-09-28): the Facebook pattern kept - the face
   page tall on one side, two small beside it - and the tiles themselves
   BIGGER. One shape for all of them: a one-picture offer used to set its
   own height and tower over the "+3" ones (the pictures no longer size
   the box; the box sizes them). A stacked layout was tried and dropped. */
.tile { inline-size: min(84vw, 380px); }
.mosaic { aspect-ratio: 1 / 1.2; }
.mosaic__cell img { position: absolute; inset: 0; }
.tiles-grid .tile { inline-size: auto; }
@media (min-width: 700px) {
  .tiles-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* ------------------------------------------------ للمتاجر (shops.html)
   The page a business card and a sales visit point to (2026-09-29). */
.page-shops { background: var(--bg); }
.shops-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; color: #fff;
  background: linear-gradient(180deg, var(--hdr-top-2), var(--hdr-top));
}
.shops-top__brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.shops-top__brand b { font-size: 20px; font-weight: 900; }
.shops-top__mark { display: grid; place-items: center; inline-size: 32px; block-size: 32px;
  border-radius: 9px; background: #fff; color: var(--hdr-top); }
.shops-top__link { padding: 7px 14px; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .14); border-radius: 999px; }
.shops { max-inline-size: 760px; margin: 0 auto; padding: 0 16px 32px; }
.shops-hero { padding: 28px 0 22px; text-align: center; }
.shops-hero__tag { display: inline-block; margin: 0 0 10px; padding: 4px 12px; font-size: 13px; font-weight: 800;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; }
.shops-hero h1 { margin: 0 0 12px; font-size: clamp(26px, 6.4vw, 38px); font-weight: 900; line-height: 1.25; }
.shops-hero__lead { margin: 0 auto 18px; max-inline-size: 36em; font-size: 17px; line-height: 1.7; color: var(--text-muted); }
.shops-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.shops-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 52px; padding: 0 20px; font-size: 16px; font-weight: 800; text-decoration: none;
  color: var(--text); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 14px;
}
.shops-btn--main { color: #fff; background: #1faa53; border-color: #1faa53; }
.shops-why { display: grid; gap: 12px; grid-template-columns: 1fr; margin-block: 8px 24px; }
@media (min-width: 640px) { .shops-why { grid-template-columns: 1fr 1fr; } }
.shops-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 4px rgba(20, 25, 23, .06); }
.shops-card__ic { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 8px;
  font-size: 22px; background: var(--dept-bg); border-radius: 12px; }
.shops-card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.shops-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.shops-how { padding: 18px; background: var(--surface); border: 1px solid var(--border);
  border-block-start: 4px solid var(--brand); border-radius: 16px; }
.shops-how h2, .shops-end h2 { margin: 0 0 10px; font-size: 20px; font-weight: 900; }
.shops-how ol { margin: 0 0 12px; padding-inline-start: 22px; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; }
.shops-how__guide { font-weight: 800; color: var(--brand); }
.shops-end { padding: 26px 0 8px; text-align: center; }
.shops-end p { margin: 0 0 14px; font-size: 16px; color: var(--text-muted); }
.shops-foot { padding: 18px 16px 28px; text-align: center; font-size: 13px; color: var(--text-muted); }
.shops-foot a { color: inherit; }
/* The store page's two buttons over its details (2026-09-29). */
#storeHead .store-quick { margin-block-start: 12px; }
#storeHead .store-quick__btn { block-size: 42px; padding: 0 16px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; }
#storeHead .store-details[hidden] { display: none; }

/* The location bar: the words open the location screen; the bordered
   slot drops the list of areas (the owner, 2026-09-29). */
.hdr__row--loc .locbar { gap: 6px; }
.locbar__go {
  display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0;
  block-size: 100%; padding: 0; font: inherit; font-weight: 700; color: inherit;
  background: none; border: 0; cursor: pointer;
}
.locbar__go > svg { flex: none; }
.locbar .menu { flex: 0 1 auto; min-inline-size: 0; display: flex; }
.locbar__slot {
  display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0;
  block-size: 32px; padding: 0 10px 0 8px;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--accent-ink);
  background: rgba(255, 255, 255, .55); border: 1.5px solid rgba(42, 34, 0, .35); border-radius: 9px;
  cursor: pointer;
}
.locbar__slot:hover { background: rgba(255, 255, 255, .8); }
.locbar__val { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locbar__slot[aria-expanded='true'] .menu__chev { transform: rotate(180deg); }
.area-row--map { color: var(--brand-ink); }

/* A shop's branches: light green buttons - they open the map (the owner,
   2026-09-29: plain chips did not look tappable). */
#storeHead .store-branch {
  padding: 4px 10px; font-weight: 800; color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 999px; text-decoration: none;
}
#storeHead .store-branch:hover { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }

/* A favourite's heart in red (the owner, 2026-09-29: clearer than green). */
.fav-btn.is-on { color: #e0245e; border-color: color-mix(in srgb, #e0245e 40%, var(--border)); background: #fdecf1; }
.fav-btn.is-on:hover { color: #c81d52; }

/* The basket's "clear" on its green bar: a white button, green words. */
.store-basket .basket-bar__clear {
  color: var(--brand-ink); background: #fff; border: 0; border-radius: 999px;
  padding: 5px 14px; font-size: 13px; font-weight: 800;
}
.store-basket .basket-bar__clear:hover { background: #f1f6f4; }

/* v108 (the owner, 2026-09-29). Tucked, the header stays tucked until the
   top of the page, and the three lines move in beside the search - the
   top row is gone then, and the menu with it (header.js bindDrawer). */
.hdr__row--search .hdr__in { display: flex; align-items: center; }
.hdr__row--search .search { flex: 1; min-inline-size: 0; }
.hdr__menu2 {
  inline-size: 0; margin-inline-end: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: inline-size .22s ease, margin .22s ease, opacity .18s ease, visibility 0s .22s;
}
.hdr.is-tucked .hdr__menu2 {
  inline-size: 40px; margin-inline-end: 6px; opacity: 1; visibility: visible;
  transition: inline-size .22s ease, margin .22s ease, opacity .18s ease;
}
@media (prefers-reduced-motion: reduce) { .hdr__menu2, .hdr.is-tucked .hdr__menu2 { transition: none; } }

/* The "Offers with Cream + Butter + ..." line over a shop's matches: the
   chips on each picture already say what is on it, and the line took the
   room the offers need (the owner, 2026-09-29). Hidden, not deleted. */
.matches__head, .tiles__hint--found { display: none; }

/* A count is a fraction, not a sentence: "1 / 8" in Arabic too, never
   "8 / 1" (the owner, 2026-09-29) - as .viewer__counter already was. */
.coverage, .viewer__zoomnum, .viewer__pagenum, .page-strip__num {
  direction: ltr; unicode-bidi: isolate;
}

/* v110: logo B (the owner, 2026-09-30) - a yellow price tag with the
   cart inside, and "offer" + "pix" in the site's yellow. On a white
   ground the yellow cannot be read, so "pix" turns a deeper gold there. */
.brand__mark, .hdr .brand__mark, .shops-top__mark {
  background: none; border-radius: 0; box-shadow: none;
  inline-size: 34px; block-size: 34px;
}
.brand__mark svg, .shops-top__mark svg { inline-size: 100%; block-size: 100%; }
.brand__pix { color: #e0a100; }
.hdr .brand__pix, .shops-top .brand__pix { color: var(--accent); }
@media (max-width: 420px) {
  .hdr .brand__mark { display: grid; inline-size: 28px; block-size: 28px; }
}
.hero__bag { background: #fff; }
.hero__bag svg { inline-size: 58px; block-size: 58px; }
.hero--short .hero__bag svg { inline-size: 34px; block-size: 34px; }
/* The name is the logo: it never shortens to "off..." - the buttons
   beside it give way first. */
.hdr .brand__text { flex: none; }
.hdr .brand__name { overflow: visible; text-overflow: clip; }

/* v113: every small control answers to a 44 x 44 px touch, the size a
   thumb needs (the Impeccable audit, 2026-09-30: the heart, the header
   buttons, "store page", the view switch, the area slot and the "+N"
   bubbles were 29-38 px). The LOOK does not change: an invisible layer
   grows the tap area around each one. `inset` in % is of the control
   itself, so min(0, (100% - 44px) / 2) grows only what is under 44. */
.hdr__icon, .hdr__btn, .nav-btn, .locbar__go, .locbar__slot, .fav-btn,
.store-section__page, .store-section__logo, .store-section__name,
.segmented--view button { position: relative; }
.hdr__icon::before, .hdr__btn::before, .nav-btn::before, .locbar__go::before,
.locbar__slot::before, .fav-btn::before, .store-section__page::before,
.store-section__logo::before, .store-section__name::before,
.segmented--view button::before, .more-bubble::before {
  content: ''; position: absolute;
  inset-block: min(0px, calc((100% - 44px) / 2));
  inset-inline: min(0px, calc((100% - 44px) / 2));
}

/* No blue square on a tap (the owner, 2026-09-30): Android's own tap
   highlight covered the whole 44px touch area. A pressed control dims
   a little instead, so a tap still answers. */
html { -webkit-tap-highlight-color: transparent; }
:where(button, a[href], [role='button']):active { opacity: .72; }

/* The shop's row (the critique, 2026-09-30): the name keeps room for a
   word and breaks only between words; the "2 / 3" count sits in the line
   under it, small. */
.store-section__titles { min-inline-size: 7.5em; }
.store-section__titles h2 { overflow-wrap: break-word; }
.store-section__meta .coverage {
  display: inline-block; vertical-align: 1px; margin-inline-start: 4px;
  padding: 1px 8px; font-size: 11.5px;
}

/* The home page's first screen (the owner, 2026-09-30): the green box
   about 20% shorter - it stays, for announcements and future adverts -
   and the department icons a little closer to the header, so a phone
   shows the first shop's offers sooner. */
main { padding-block-start: 8px; }
.hero { padding-block: 11px; padding-inline: 16px; gap: 10px; }
.hero__text { gap: 5px; }
.hero__title { font-size: clamp(19px, 5.2vw, 30px); line-height: 1.25; }
.hero__sub { line-height: 1.45; }
.hero__art { inline-size: 76px; block-size: 76px; }
.hero__bag { inset: 9px; }
.hero__bag svg { inline-size: 48px; block-size: 48px; }

/* The status badges in the date line under a tile, not on the picture. */
.tile__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tile__line .badge { position: static; inset: auto; font-size: 12px; font-weight: 800; box-shadow: none; }
.tile__line .badge--muted { color: var(--text-muted); background: var(--surface-2); }
/* "+66", like every other "+N" - in Arabic the plus had drifted to the
   far side ("66+") (the critique, 2026-09-30). */
.tag--more, .mosaic__more, .more-bubble > span { direction: ltr; unicode-bidi: isolate; }


/* A shop's row: each card's badges in the "tap an offer to open it" line,
   at the card's top-left corner (the owner, 2026-09-30). The row slides
   up under the line by the line's height, and the card lets its badges
   show above it - the picture keeps its own rounded top. */
.tiles__hint--band { display: flex; align-items: center; min-block-size: 30px; padding-block: 0; }
.tiles--banded { margin-block-start: -30px; padding-block-start: 32px; }
.tiles--banded .tile { position: relative; overflow: visible; }
.tiles--banded .mosaic { border-radius: 13px 13px 0 0; overflow: hidden; }
.tiles--banded .tile__strip {
  position: absolute; inset-block-start: -29px; inset-inline-end: 0;
  display: flex; gap: 5px; pointer-events: none;
}
.tile__strip { display: none; }
.tiles--banded .tile__strip .badge {
  position: static; inset: auto; font-size: 11.5px; font-weight: 800;
  padding: 3px 8px; box-shadow: none;
}
.tiles--banded .tile__strip .badge--muted { color: var(--text-muted); background: var(--surface-2); }

/* The counts and the view switch on ONE line in every language (the
   owner, 2026-09-30: English wrapped on a phone). The counts give way. */
.summary { flex-wrap: nowrap; }
.summary__text { min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary .segmented { flex: none; }
@media (max-width: 420px) {
  .summary__imgs { display: none; }
  .summary { gap: 6px; }
  .summary__text { padding: 5px 9px; font-size: 12px; }
  .segmented--view button { padding: 6px 10px; font-size: 12.5px; }
}

/* Faint text made readable (the audit and critique, 2026-09-30 round 2).
   Grey stays grey - a step darker, to at least 4.5:1. */
.tiles__hint, .tiles__hint--band { color: var(--text-muted); }
.app-footer, .app-footer__build { color: var(--text-muted); }
.store-detail__label, .store-tags__label, .store-detail__value--empty { color: var(--text-muted); }
.store-link { color: var(--text); }
.badge--muted, .tile__line .badge--muted, .tiles--banded .tile__strip .badge--muted {
  color: var(--text); background: var(--surface-2);
}
.tiles--banded .tile__strip .badge, .tile__line .badge { font-size: 12px; }
/* "Empty" stays a white button with green words - in dark mode too, where
   the light teal on white was 1.7:1. */
.store-basket .basket-bar__clear, .calc-sheet .basket-bar__clear { color: #146356; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .store-share { color: var(--text); }
}
:root[data-theme='dark'] .store-share { color: var(--text); }

/* The shop's name never wraps (the critique, 2026-09-30): the name and
   its counts keep their full width; when they need the room, "store page"
   and the heart drop to a second line, at the far side. */
.store-section__head { flex-wrap: wrap; row-gap: 8px; }
.store-section__titles { flex: 1 0 auto; min-inline-size: 0; max-inline-size: 100%; }
.store-section__titles h2 { white-space: nowrap; }
.store-section__meta { white-space: nowrap; }
.store-section__actions { display: flex; align-items: center; gap: 11px; flex: none; margin-inline-start: auto; }

/* The few seconds to take back "empty" - above the viewer and its sheet. */
.undo-bar {
  position: fixed; z-index: 1000; inset-inline: 16px; inset-block-end: calc(18px + env(safe-area-inset-bottom));
  max-inline-size: 420px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 14px;
  font-size: 14px; font-weight: 700; color: #fff; background: #1b1d1c;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.undo-bar__btn {
  min-block-size: 40px; padding: 0 16px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 800; color: #2a2200; background: var(--accent);
}
/* The last 4.48:1 greys, on the light-grey fills. */
.segmented--view button:not(.is-active) { color: var(--text); }
#storeHead .store-detail__label, #storeHead .store-detail__value--empty { color: var(--text); opacity: .78; }


/* v122 (the owner, 2026-09-30) ------------------------------------------ */
/* Store info: six fields, bolder values, the shop's colour. */
#storeHead .store-detail__value { font-size: 14px; font-weight: 800; }
#storeHead .store-detail__label { font-size: 11.5px; font-weight: 600; }
#storeHead .store-detail--full { grid-column: 1 / -1; }
@media (min-width: 900px) { #storeHead .store-detail--full { grid-column: span 2; } }
#storeHead .store-branch {
  color: var(--store-ink, var(--brand-ink)); background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--store-ink, var(--brand)) 55%, transparent);
}
#storeHead .store-branch:hover { background: color-mix(in srgb, var(--store-ink, var(--brand)) 10%, var(--surface)); }
#storeHead .store-quick__more.is-open {
  color: #fff; background: var(--store-ink, var(--brand)); border-color: var(--store-ink, var(--brand));
}
#storeHead .store-quick__more.is-open .store-quick__ic { color: var(--store-on, #fff); }
.store-social {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px;
  padding-block-start: 10px; border-block-start: 1px solid var(--border);
}
.store-social__a { position: relative; display: grid; inline-size: 34px; block-size: 34px; border-radius: 10px; }
.store-social__a svg { inline-size: 100%; block-size: 100%; display: block; }
.store-social__a::before { content: ''; position: absolute; inset: -5px; }
.store-social__a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #storeHead .store-branch { color: var(--text); }
}
:root[data-theme='dark'] #storeHead .store-branch { color: var(--text); }

/* The "+N" bubble: a little smaller, nearer the screen's edge, in the
   site's yellow with dark green, like the search button. */
.more-bubble {
  color: #146356; background: var(--accent);
  border-color: color-mix(in srgb, #146356 35%, var(--accent));
}
.more-bubble:hover { border-color: #146356; }
.store-section--tiles .more-wrap > .more-bubble {
  inset-inline-end: -8px; min-inline-size: 30px; padding: 3px 7px; font-size: 12px; font-weight: 800;
}
/* A phone number reads left to right in both languages, on one line. */
#storeHead .store-detail__value[dir='ltr'] { font-size: 13px; text-align: end; }
/* Whole pages in one-size cards (the owner, 2026-09-30): a picture of
   another shape shows whole over a blurred copy of itself. */
.mosaic__cell.is-whole img { object-fit: contain; object-position: center; z-index: 1; }
.mosaic__cell.is-whole img.mosaic__bg {
  z-index: 0; object-fit: cover; filter: blur(14px) brightness(.9); transform: scale(1.25);
}
.mosaic__more { z-index: 2; }

/* The store's details: the same three columns on every screen, each field
   its own small card, so the rows read as meant - three contacts; hours
   and the wider delivery; then where the shop is, full width. */
@media (min-width: 900px) {
  #storeHead .store-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #storeHead .store-detail--full { grid-column: 1 / -1; }
}
#storeHead .store-detail {
  padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
#storeHead .store-detail--empty { opacity: 1; }
#storeHead .store-detail--empty .store-detail__value { opacity: .6; }
/* On a wide screen: the five short fields in one full row (delivery two
   columns), where the shop is in the next. */
@media (min-width: 900px) {
  #storeHead .store-details { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* The "+3" on a shop's "يبيع" line: small, out at the screen's edge,
   clear of the chips (the owner, 2026-09-30). */
#storeHead .store-tags + .more-bubble, #storeHead .more-wrap > .more-bubble {
  inset-inline-end: -22px; min-inline-size: 0; padding: 1px 5px; gap: 0;
  font-size: 10.5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}
#storeHead .more-wrap > .more-bubble::after { inline-size: 5px; block-size: 5px; border-width: 0 0 2px 2px; margin-inline-start: 2px; }

/* Badges everywhere as on the home page (the owner, 2026-09-30): over each
   card's top-left corner. A grid gives every card the line's height
   above it; on the store page the first sits in "tap an offer" line. A
   results row makes room inside itself (it scrolls, so it would clip). */
.tiles-grid--banded .tile { position: relative; overflow: visible; margin-block-start: 30px; }
.tiles-grid--banded .mosaic { border-radius: 13px 13px 0 0; overflow: hidden; }
.tiles-grid--banded .tile__head + .mosaic { border-radius: 0; }
.tiles-grid--first { margin-block-start: -30px; }
.tiles--matches:has(.tile__strip) { padding-block-start: 30px; }
.tiles--matches .match:has(.tile__strip) { overflow: visible; }
.tiles--matches .match:has(.tile__strip) > img { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.tiles-grid--banded .tile__strip, .tiles--matches .tile__strip {
  position: absolute; inset-block-start: -29px; inset-inline-end: 0;
  display: flex; gap: 5px; pointer-events: none;
}
.tiles-grid--banded .tile__strip .badge, .tiles--matches .tile__strip .badge {
  position: static; inset: auto; font-size: 12px; font-weight: 800;
  padding: 3px 8px; box-shadow: none;
}
.tiles-grid--banded .tile__strip .badge--muted, .tiles--matches .tile__strip .badge--muted {
  color: var(--text); background: var(--surface-2);
}
.tiles__hint--band:has(+ .tiles-grid--first) { margin-block-end: 0; }

/* v125 (the owner, 2026-09-30) ------------------------------------------ */
/* Sliding rows: two small arrows at the ends, only where there is more. */
.row-arrow {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; inline-size: 28px; block-size: 28px; padding: 0;
  color: #146356; background: var(--accent);
  border: 1px solid color-mix(in srgb, #146356 30%, var(--accent)); border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18); cursor: pointer;
}
.row-arrow[hidden] { display: none; }
.row-arrow::before { content: ''; position: absolute; inset: -8px; }
.row-arrow::after {
  content: ''; inline-size: 7px; block-size: 7px;
  border: solid currentColor; border-width: 0 0 2.5px 2.5px;
}
.row-arrow--fwd { inset-inline-end: 2px; }
.row-arrow--back { inset-inline-start: 2px; }
[dir='rtl'] .row-arrow--fwd::after, [dir='ltr'] .row-arrow--back::after { transform: rotate(45deg); margin-inline-start: 3px; }
[dir='rtl'] .row-arrow--back::after, [dir='ltr'] .row-arrow--fwd::after { transform: rotate(-135deg); margin-inline-end: 3px; }
[dir='rtl'] .row-arrow--fwd::after { margin: 0 0 0 -3px; }
[dir='rtl'] .row-arrow--back::after { margin: 0 -3px 0 0; }
[dir='ltr'] .row-arrow--fwd::after { margin: 0 3px 0 0; }
[dir='ltr'] .row-arrow--back::after { margin: 0 0 0 3px; }
.store-section--tiles .more-wrap > .row-arrow--fwd { inset-inline-end: -8px; }
.store-section--tiles .more-wrap > .row-arrow--back { inset-inline-start: -8px; }
#storeHead .more-wrap > .row-arrow { inline-size: 22px; block-size: 22px; }
#storeHead .more-wrap > .row-arrow::after { inline-size: 5px; block-size: 5px; border-width: 0 0 2px 2px; }
#storeHead .more-wrap > .row-arrow--fwd { inset-inline-end: -20px; }
#storeHead .more-wrap > .row-arrow--back { inset-inline-start: -20px; }
.depts ~ .row-arrow { inset-block-start: 34px; }
.tag--dots { letter-spacing: 1px; font-weight: 800; }

/* A shop with no logo: the cart, white on the shop's colour. */
.avatar--cart { display: grid; place-items: center; }
.avatar--cart svg { inline-size: 58%; block-size: 58%; color: #fff; }

/* "Store info": closed to start, with an arrow big enough to say so. */
#storeHead .store-quick__chev { font-size: 18px; line-height: 1; }

/* Audit fixes: the label as written, not in capitals; branch buttons
   44px to a finger; the product list's "show all". */
#storeHead .store-detail__label { text-transform: none; letter-spacing: 0; }
#storeHead .store-branch { position: relative; }
#storeHead .store-branch::before { content: ''; position: absolute; inset: -8px -2px; }
.basket-all {
  display: block; inline-size: 100%; margin-block-start: 10px; padding: 12px;
  font: inherit; font-weight: 800; color: #146356; background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 12px; cursor: pointer;
}

/* Search and department results: each offer's pictures as one group - its
   badges and dates over a line in the shop's colour. */
.tiles--matches { gap: 20px; }
.match-group { flex: none; display: flex; flex-direction: column; gap: 8px; }
.match-group__head {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  /* Stays in view while its pictures slide under it. */
  position: sticky; inset-inline-start: 0; align-self: flex-start;
}
.match-group__head .badge { position: static; inset: auto; font-size: 12px; font-weight: 800; padding: 3px 8px; box-shadow: none; }
.match-group__range { font-size: 13px; font-weight: 700; color: var(--text); }
.match-group__items {
  display: flex; gap: 10px; padding-block-start: 8px;
  border-block-start: 3px solid var(--store-color, var(--brand));
}

/* v126 (the owner, 2026-09-30) ------------------------------------------ */
/* The arrows: bigger, the chevron drawn and centred. */
.row-arrow { inline-size: 36px; block-size: 36px; }
.row-arrow::after { content: none; }
.row-arrow::before { inset: -4px; }
.row-arrow svg { display: block; }
[dir='rtl'] .row-arrow--fwd svg, [dir='ltr'] .row-arrow--back svg { transform: scaleX(-1); }
.store-section--tiles .more-wrap > .row-arrow--fwd { inset-inline-end: -10px; }
.store-section--tiles .more-wrap > .row-arrow--back { inset-inline-start: -10px; }
/* None on a shop's "يبيع" line: it spoiled the look, and the tags are a
   nice-to-have. The line still slides. */
#storeHead .more-wrap > .row-arrow { display: none; }
/* The store info arrow, a bit bigger again. */
#storeHead .store-quick__chev { font-size: 24px; }

/* Cards: square, with a big cell the shape of a flyer page (2:3), so our
   own designs (exactly 2:3) and Safeway's A4 pages show whole; pictures
   of other shapes stay cropped from the top - the zoomed look. */
.mosaic { aspect-ratio: 1 / 1; }
.mosaic--3 { grid-template-columns: 2fr 1fr; }

/* The product list's "show all" in dark mode: light text on the dark tint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .basket-all { color: var(--brand-ink); }
}
:root[data-theme='dark'] .basket-all { color: var(--brand-ink); }

/* Critique fixes (2026-09-30): the info panel's border the same on every
   side (one thick side looked accidental); a pack size never wraps its
   unit onto a line of its own. */
#storeHead .store-details { border: 1px solid var(--border); }
.basket-row__meta { white-space: nowrap; }

/* v128 (the owner, 2026-10-01) ------------------------------------------ */
/* Arrows: 40px circles, a 44px finger target. */
.row-arrow { inline-size: 40px; block-size: 40px; }
.row-arrow svg { width: 20px; height: 20px; }
.row-arrow::before { inset: -2px; }

/* Dark mode's location bar: a dark band, the pin and "منطقتك" in yellow -
   the yellow bar shouted on a dark page. Light mode keeps the yellow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hdr__row--loc { background: #16211e; border-block-end: 1px solid rgba(255, 207, 51, .25); }
  :root:not([data-theme='light']) .hdr__row--loc .locbar { color: #e8efe9; }
  :root:not([data-theme='light']) .hdr__row--loc .locbar svg { color: #ffcf33; }
  :root:not([data-theme='light']) .locbar__slot { color: #ffcf33; background: transparent; border-color: #ffcf33; }
}
:root[data-theme='dark'] .hdr__row--loc { background: #16211e; border-block-end: 1px solid rgba(255, 207, 51, .25); }
:root[data-theme='dark'] .hdr__row--loc .locbar { color: #e8efe9; }
:root[data-theme='dark'] .hdr__row--loc .locbar svg { color: #ffcf33; }
:root[data-theme='dark'] .locbar__slot { color: #ffcf33; background: transparent; border-color: #ffcf33; }

/* No "-" until something is in: the space stays, so rows line up. */
.basket-step--minus[hidden] { display: inline-flex; visibility: hidden; }

/* Cards: the date on one line, the tags on one line under it ending in
   "…" - every card the same height, the room goes to the pictures. */
.tile__range { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags--line { flex-wrap: nowrap; overflow: hidden; }
.tags--line .tag { flex: none; }
.tags--line .tag[hidden] { display: none; }

/* The calculator on a phone: half the screen, a handle to make it taller
   or put it away; a tap on the picture closes it. */
.calc-sheet.store-basket { block-size: 57.5%; max-block-size: 57.5%; padding-block-start: 4px; transition: block-size .2s ease, max-block-size .2s ease; }
.calc-sheet.store-basket.is-full { block-size: 88%; max-block-size: 88%; }
.calc-sheet__handle {
  position: relative; align-self: center; flex: none; inline-size: 64px; block-size: 22px;
  padding: 0; background: none; border: 0; cursor: grab; touch-action: none;
}
.calc-sheet__handle::after {
  content: ''; position: absolute; inset-block-start: 8px; inset-inline-start: 12px;
  inline-size: 40px; block-size: 5px; border-radius: 3px; background: var(--border-strong);
}
.viewer--calc .calc-sheet__handle, .viewer--calc-pinned .calc-sheet__handle { display: none; }
.viewer--calc .calc-sheet.store-basket, .viewer--calc-pinned .calc-sheet.store-basket { block-size: auto; max-block-size: none; }
@media (prefers-reduced-motion: reduce) { .calc-sheet.store-basket { transition: none; } }
/* The date line keeps its height when an offer has no dates, and the tags
   sit on the card's bottom line - so every card in a row lines up. */
.tile { display: flex; flex-direction: column; }
.tile__body { flex: 1; display: flex; flex-direction: column; }
.tile__line { min-block-size: 24px; }
.tile__body > .tile__tags { margin-block-start: auto; }

/* v129 (the owner, 2026-10-01) ------------------------------------------ */
/* The calculator's head: one thin line - count, handle in the middle, X. */
.calc-sheet__head { position: relative; min-block-size: 36px; }
.calc-sheet__head .calc-sheet__handle { position: absolute; inset-block-start: -4px; inset-inline-start: 50%; transform: translateX(-50%); }
[dir='rtl'] .calc-sheet__head .calc-sheet__handle { transform: translateX(50%); }
.calc-sheet__x { inline-size: 34px; block-size: 34px; }
.calc-sheet .calc-sheet__title .store-basket__n { font-size: 14px; }
.calc-sheet__scope { display: none; }
/* The list split by picture. */
.calc-sheet .calc-sheet__list { position: relative; }
.calc-sheet__page {
  position: sticky; inset-block-start: 0; z-index: 1;
  padding: 4px 6px; font-size: 13px; font-weight: 800; color: var(--text-muted);
  background: var(--bg);
}
/* "More below": a fade and a green arrow. */
.calc-sheet__more {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  block-size: 56px; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to bottom, transparent, var(--bg) 70%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-block-end: calc(6px + env(safe-area-inset-bottom));
}
.calc-sheet__more[hidden] { display: none; }
.calc-sheet__more::after {
  content: ''; inline-size: 30px; block-size: 30px; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
/* Where a scrollbar shows (a desktop), it is green and always there. */
.calc-sheet .calc-sheet__list, #storeBasketList { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
.calc-sheet .calc-sheet__list::-webkit-scrollbar, #storeBasketList::-webkit-scrollbar { inline-size: 6px; }
.calc-sheet .calc-sheet__list::-webkit-scrollbar-thumb, #storeBasketList::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 3px; }

/* v131: the weights panel (the owner, 2026-10-01). */
.basket-row__qty--weight {
  min-inline-size: 64px; padding: 0 6px; font: inherit; font-size: 14px; font-weight: 800;
  color: var(--text); background: var(--surface); cursor: pointer; white-space: nowrap;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 55%, transparent);
}
.basket-row__qty--weight.is-empty { color: var(--text-muted); }
.weight-shade {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.weight-pop {
  inline-size: min(100%, 440px); max-block-size: 85vh; overflow-y: auto;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  color: var(--text); background: var(--bg); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: sheet-up .18s ease-out;
}
@media (min-width: 700px) { .weight-shade { align-items: center; } .weight-pop { border-radius: 20px; } }
.weight-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.weight-pop__title { font-size: 16px; font-weight: 800; min-inline-size: 0; }
.weight-pop__x { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.weight-pop__ask { margin: 10px 2px 8px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.weight-pop__ask--small { margin-block-start: 14px; }
.weight-pop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.weight-pop__opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
}
.weight-pop__opt strong { font-size: 16px; }
.weight-pop__opt span { font-size: 12px; color: var(--text-muted); }
.weight-pop__opt.is-on { border-color: var(--brand); background: var(--brand-soft); }
.weight-pop__other { display: flex; gap: 8px; }
.weight-pop__other input {
  flex: 1; min-inline-size: 0; block-size: 46px; padding: 0 12px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
}
.weight-pop__ok {
  flex: none; padding: 0 20px; font: inherit; font-weight: 800; color: var(--on-brand);
  background: var(--brand); border: 0; border-radius: 12px; cursor: pointer;
}
.weight-pop__rm {
  display: block; inline-size: 100%; margin-block-start: 12px; padding: 10px; font: inherit; font-weight: 700;
  color: var(--urgent, #c0392b); background: none; border: 0; cursor: pointer;
}
.weight-pop:focus { outline: none; }
/* The one-line tags must never widen their card: in a grid a card was as
   wide as all its tags put together (the store page scrolled sideways on
   a phone, 2026-10-01). */
.tiles-grid > .tile, .tile__body, .tile__line, .tags--line { min-inline-size: 0; }
.tags--line { inline-size: 100%; }
/* "750 غ" reads as Arabic, the unit on the left like "د.أ" (the owner,
   2026-10-01); the box is otherwise pinned LTR for typed numbers. */
[dir='rtl'] .basket-row__qty--weight { direction: rtl; }

/* v134: the glossy department pictures (the owner, 2026-10-01). */
.dept__ic img { display: block; inline-size: 46px; block-size: 46px; }
.basket-row__img--icon img { inline-size: 72%; block-size: 72%; }
/* The pictures a touch quieter than ChatGPT drew them - the owner chose
   level 3 of 4 tried (2026-10-01); all levels in docs/DEPT-ICONS.md. */
:is(.dept__ic, .basket-row__img--icon) img { filter: saturate(.88) contrast(.97); }

/* v134: the department row's arrows smaller and out at the screen edge,
   so they stop covering a picture (the owner, 2026-10-01). The tap area
   stays 44px. */
.depts ~ .row-arrow { inline-size: 30px; block-size: 30px; inset-block-start: 32px; }
.depts ~ .row-arrow svg { width: 16px; height: 16px; }
.depts ~ .row-arrow::before { inset: -7px; }
.depts ~ .row-arrow--fwd { inset-inline-end: calc(8px - clamp(12px, 3vw, 28px)); }
.depts ~ .row-arrow--back { inset-inline-start: calc(8px - clamp(12px, 3vw, 28px)); }

/* v135: the contact page (the owner, 2026-10-01) - "Contact us" was a bare
   mailto:, which does nothing without a mail app. */
.contact__ways { display: grid; gap: 14px; max-inline-size: 440px; margin: 0 auto; }
.contact__btn { inline-size: 100%; font-size: 18px; }
.contact__mail { padding: 16px; text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; }
.contact__label { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.contact__addr { margin: 0 0 12px; font-size: 19px; font-weight: 800; user-select: all; overflow-wrap: anywhere; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact__row .shops-btn { min-block-size: 48px; padding: 0 10px; font-family: inherit; cursor: pointer; }
.contact__done { min-block-size: 1.4em; margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--calm); }
.contact__shops { display: block; padding: 12px; text-align: center; font-weight: 800; color: var(--brand); }
.contact__en { max-inline-size: 440px; margin: 28px auto 0; padding-block-start: 16px;
  border-block-start: 1px solid var(--border); text-align: center; color: var(--text-muted); }
.contact__en h2 { margin: 0 0 6px; font-size: 17px; color: var(--text); }
.contact__en p { margin: 0; }

/* v136 (the audit and critique, 2026-10-01) ----------------------------- */
/* The newer small controls get the same invisible 44px touch as v113's:
   the viewer's X, the calculator's X and handle, the weights X. The - and
   + only grow up and down - beside them is the quantity box. */
#viewerClose, .calc-sheet__x, .weight-pop__x, .basket-step { position: relative; }
#viewerClose::before, .calc-sheet__x::before, .weight-pop__x::before, .calc-sheet__handle::before {
  content: ''; position: absolute;
  inset-block: min(0px, calc((100% - 44px) / 2));
  inset-inline: min(0px, calc((100% - 44px) / 2));
}
.basket-step::before {
  content: ''; position: absolute; inset-inline: 0;
  inset-block: min(0px, calc((100% - 44px) / 2));
}
@media (prefers-reduced-motion: reduce) { .weight-pop { animation: none; } }
/* Readable: the basket count's yellow on the green bar (4.0 -> 4.7:1), and
   white on the WhatsApp green (3.0 -> 5.0:1). */
.store-basket .basket-bar__count,
.store-basket .basket-bar.is-empty .basket-bar__count { color: #ffe27a; }
.shops-btn--main { background: #15803d; border-color: #15803d; }

/* v137: arriving from a shop's QR (scan.js, the owner 2026-10-03). */
.locbar__from {
  flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; opacity: .85;
}
.locbar__from[hidden] { display: none; }
.fav-ask {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-block-start: 12px; padding: 10px 12px;
  background: color-mix(in srgb, var(--store-color, var(--brand)) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--store-color, var(--brand)) 30%, var(--border));
  border-radius: 14px;
}
.fav-ask__text { flex: 1 1 200px; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.6; }
.fav-ask__text--done { color: var(--calm); }
.fav-ask__btn {
  flex: none; min-block-size: 44px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 800;
  color: #fff; background: var(--store-ink, var(--brand)); border: 0; border-radius: 12px; cursor: pointer;
}

/* v138 - "send my list on WhatsApp": a round green button beside the
   total, in the store page's basket bar and the calculator's. 36px drawn,
   44px to tap (the ::before). Hidden while the basket is empty. */
.basket-bar__wa {
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  inline-size: 36px; block-size: 36px; padding: 0;
  border: 0; border-radius: 50%;
  /* White with the green mark: green on the green bar disappeared
     (the owner, 2026-10-11). */
  background: #fff; color: #15803d; cursor: pointer;
}
.basket-bar__wa::before { content: ""; position: absolute; inset: -4px; }
.basket-bar__wa:hover { background: #ecfdf3; }
.basket-bar__wa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.basket-bar.is-empty .basket-bar__wa { display: none; }
/* With the WhatsApp button the row is tighter: the count goes under the
   shop's name (still beside the total), so the name keeps room for
   itself instead of shrinking to "سي..." */
.store-basket .basket-bar__text {
  display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0;
}
.store-basket .basket-bar__store { flex: none; font-size: 17px; }
.store-basket .basket-bar__count { font-size: 13px; }

/* v138 - the total opens "my list" (the owner, 2026-10-11): a button
   that keeps the yellow pill, with a ring to say it can be pressed. */
button.basket-bar__total {
  font: inherit; font-size: 16px; font-weight: 800; border: 0; cursor: pointer;
  min-block-size: 36px; color: inherit; background: none;
}
.store-basket button.basket-bar__total {
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}
.basket-bar.is-empty button.basket-bar__total { box-shadow: none; cursor: default; }
button.basket-bar__total:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.list-pop__items { list-style: none; margin: 12px 0 0; padding: 0; max-block-size: 50vh; overflow-y: auto; }
.list-pop__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline;
  padding: 10px 2px; border-block-end: 1px solid var(--border); font-size: 15px;
}
.list-pop__name { font-weight: 700; }
.list-pop__qty { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.list-pop__cost { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-pop__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 12px 2px 14px; font-size: 15px; font-weight: 700;
}
.list-pop__total strong {
  padding: 2px 12px; font-size: 18px; color: var(--accent-ink); background: var(--accent); border-radius: 999px;
}
.list-pop__wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  inline-size: 100%; min-block-size: 48px; font: inherit; font-size: 16px; font-weight: 800;
  color: #fff; background: #15803d; border: 0; border-radius: 12px; cursor: pointer;
}
.list-pop__wa:hover { background: #166534; }
.list-pop__more {
  display: block; inline-size: 100%; min-block-size: 44px; margin-block-start: 8px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--brand-ink, var(--text));
  background: none; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
}

/* The one-time bubbles over the total and the WhatsApp button. */
.hint-bubble {
  position: fixed; z-index: 1100; max-inline-size: 220px; padding: 8px 12px;
  font-size: 14px; font-weight: 800; line-height: 1.3; text-align: center;
  color: var(--accent-ink); background: var(--accent); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none;
  animation: hint-in .2s ease-out;
}
.hint-bubble::after {
  content: ""; position: absolute; inset-block-start: 100%; left: calc(var(--tip, 50%) - 7px);
  border: 7px solid transparent; border-block-start-color: var(--accent);
}
@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hint-bubble { animation: none; } }

/* v138 - "my list" (list.html) and the way to it: a basket button with a
   yellow count in the top row of every shopper's page, and the first
   entry in the menu (the owner, 2026-10-11). */
.list-btn { position: relative; display: inline-grid; place-items: center; text-decoration: none; }
.list-btn__n {
  position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
  min-inline-size: 18px; block-size: 18px; padding: 0 4px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 2px var(--hdr-top, #146356);
}
.list-btn[aria-current="page"] { background: rgba(255, 255, 255, .22); }
.drawer__list { font-weight: 800; }

.list-page { max-inline-size: var(--max-w); margin: 0 auto; padding: 14px 12px 28px; }
.list-page__head h1 { margin: 4px 2px 2px; font-size: 24px; font-weight: 800; }
.list-page__sub { margin: 0 2px 6px; font-size: 13px; color: var(--text-muted); }
.list-card { scroll-margin-block-start: calc(var(--header-h, 120px) + 10px); }
.list-card__acts { display: grid; gap: 8px; margin-block-start: 12px; }
.list-card__acts .list-pop__more { display: grid; place-items: center; margin: 0; text-decoration: none; }
a.list-pop__more { display: grid; place-items: center; text-decoration: none; }
.list-pop__all { color: var(--brand-ink, var(--text)); border-color: var(--brand); }

/* The top row on a phone: the account button's label never pushes the
   logo (a shop's name can be long). */
@media (max-width: 430px) {
  .hdr .acct-btn #acctLabel { max-inline-size: 76px; overflow: hidden; text-overflow: ellipsis; }
}

/* "Send to myself": outlined in the same green, under the green button. */
.list-pop__me {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  inline-size: 100%; min-block-size: 46px; margin-block-start: 8px;
  font: inherit; font-size: 15px; font-weight: 800; color: #15803d;
  background: var(--surface); border: 2px solid #15803d; border-radius: 12px; cursor: pointer;
}
.list-card__acts .list-pop__me { margin: 0; }
.list-pop__me:hover { background: #ecfdf3; }
:root[data-theme="dark"] .list-pop__me { color: #4ade80; border-color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .list-pop__me { color: #4ade80; border-color: #4ade80; } }
.list-pop__all { margin-block-start: 8px; }
.mine-pop__form input { direction: ltr; text-align: start; }
.mine-pop__err { margin: 6px 2px 0; font-size: 13px; font-weight: 700; color: var(--urgent, #c0392b); }
.mine-pop__note { margin: 10px 2px 0; font-size: 13px; color: var(--text-muted); }
.list-page__change {
  font: inherit; font-weight: 800; color: var(--brand-ink, var(--brand)); background: none;
  border: 0; padding: 4px; cursor: pointer; text-decoration: underline;
}

/* v139 - pictures that enlarge (ui.zoomable): hover on a computer, a tap
   on a phone; no magnifier icon (the owner). */
/* The ordinary hand where a picture is also a button (the builder's
   cards); no magnifier cursor anywhere (the owner). */
.zoomable { position: relative; }
.zoom-float {
  position: fixed; z-index: 1200; inline-size: 280px; block-size: 280px; padding: 10px;
  background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  pointer-events: none; animation: hint-in .12s ease-out;
}
.zoom-float img, .zoom-card img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.zoom-shade {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); cursor: zoom-out;
}
.zoom-card {
  inline-size: min(64vw, 320px); aspect-ratio: 1; padding: 10px;
  background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  animation: hint-in .15s ease-out;
}
@media (prefers-reduced-motion: reduce) { .zoom-float, .zoom-card { animation: none; } }

/* v139 - the hint that stays under the total until it is tapped (the
   owner). Inside the bar, so it moves with it; under it, so the top of
   the calculator cannot cut it off. Tapping it opens the list too. */
.basket-bar__totalwrap { position: relative; flex: none; display: inline-flex; }
.hint-tip {
  display: none; position: absolute; z-index: 5; inset-block-start: calc(100% + 10px);
  left: 50%; transform: translateX(-50%);
  padding: 7px 12px; white-space: nowrap; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: pointer;
  animation: hint-bob 1.6s ease-in-out infinite;
}
.hint-tip::after {
  content: ""; position: absolute; inset-block-end: 100%; left: calc(50% - 7px);
  border: 7px solid transparent; border-block-end-color: var(--accent);
}
.basket-bar.has-hint .hint-tip { display: block; }
.basket-bar.is-empty .hint-tip { display: none; }
@keyframes hint-bob { 50% { margin-block-start: 3px; } }
@media (prefers-reduced-motion: reduce) { .hint-tip { animation: none; } }

/* The list page (the owner): each list in full - the rows were in the
   phone's 21vh box meant for under a flyer - and no search row. */
.list-card .basket-list { max-block-size: none; overflow: visible; }
.list-page .list-card { margin-block-start: 14px; }
.list-page .list-card .basket-bar__store { font-size: 19px; }

/* v140 - the list page: grouped by department in aisle order, and "في
   المحل" - a checklist for the shop (the owner, 2026-10-11). */
.list-modes { display: flex; margin-block-start: 10px; }
.list-modes button { flex: 1; justify-content: center; min-block-size: 40px; font-size: 14px; font-weight: 800; }
.list-modes button.is-active { color: var(--on-brand); background: var(--brand); }
.list-dept {
  margin: 12px 4px 4px; font-size: 13px; font-weight: 800; letter-spacing: .01em;
  color: var(--brand-ink, var(--brand));
}
.list-dept--done { color: var(--text-muted); margin-block-start: 16px; }
.list-progress {
  margin: 4px 2px 0; padding: 8px 12px; border-radius: 12px; font-size: 14px; font-weight: 800;
  color: var(--text); background: var(--surface-2, var(--surface)); border: 1px solid var(--border);
}
.list-progress.is-complete { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.tick-row {
  display: grid; grid-template-columns: 30px 52px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-block-size: 64px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); cursor: pointer; user-select: none;
}
.tick-row .basket-row__img { grid-area: auto; inline-size: 52px; block-size: 52px; }
.tick-row__box {
  display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%;
  border: 2.5px solid var(--brand); color: transparent;
}
.tick-row__name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.tick-row__qty { font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--brand-ink, var(--text)); }
.tick-row.is-done { opacity: .55; }
.tick-row.is-done .tick-row__box { color: #fff; background: var(--brand); }
.tick-row.is-done .tick-row__name { text-decoration: line-through; }
.tick-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.list-again {
  justify-self: center; margin-block-start: 6px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-muted); background: none; border: 0; text-decoration: underline; cursor: pointer;
}

/* v142 - the end of a shop, and lists that can come back (the owner). */
.list-done { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-start: 8px; }
.list-done button {
  min-block-size: 44px; font: inherit; font-size: 14px; font-weight: 800; border-radius: 12px; cursor: pointer;
}
.list-done__clear { color: var(--on-brand); background: var(--brand); border: 0; }
.list-done__keep { color: var(--text); background: var(--surface); border: 1.5px solid var(--border); }
.list-recent { margin-block-start: 22px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius-lg, 16px); }
.list-recent__title { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--text-muted); }
.list-recent__row { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.list-recent__row + .list-recent__row { border-block-start: 1px solid var(--border); }
.list-recent__text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; font-size: 14px; }
.list-recent__text span { font-size: 13px; color: var(--text-muted); }
.list-recent__btn, .list-restore {
  flex: none; min-block-size: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 800;
  color: var(--brand-ink, var(--brand)); background: none; border: 1.5px solid var(--brand); border-radius: 12px; cursor: pointer;
}
.list-restore { display: block; inline-size: 100%; margin-block-start: 8px; }
.list-restore[hidden] { display: none; }

/* v142 - "list done?" asked the moment the last line is ticked. */
.ask-pop__acts { display: grid; gap: 8px; margin-block-start: 6px; }
.ask-pop__btn {
  min-block-size: 48px; font: inherit; font-size: 16px; font-weight: 800; border-radius: 12px; cursor: pointer;
}
.ask-pop__btn--main { color: var(--on-brand); background: var(--brand); border: 0; }
.ask-pop__btn--plain { color: var(--text); background: var(--surface); border: 1.5px solid var(--border); }

/* The tick on the RIGHT in English too - where the thumb is (the owner):
   picture, name, how many, then the tick. */
[dir="ltr"] .tick-row { grid-template-columns: 52px minmax(0, 1fr) auto 30px; }
[dir="ltr"] .tick-row__box { order: 4; }

/* v143 - "جديد" and "ينتهي قريبًا" (new.html) and the strip on the home
   page that leads there (the owner, 2026-10-12). Green for new, the
   existing urgent/warn tones for the endings. */
:root { --fresh: #1a7f37; --on-fresh: #ffffff; --fresh-soft: #e3f4e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --fresh: #5cd17f; --on-fresh: #0d1f13; --fresh-soft: #16301f; }
}
:root[data-theme='dark'] { --fresh: #5cd17f; --on-fresh: #0d1f13; --fresh-soft: #16301f; }

/* The strip: two buttons that go somewhere - an arrow, a border, a count -
   so they don't read as more of the icons under them, which filter. */
.fresh-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block: 2px 12px; }
.fresh-strip[hidden] { display: none; }
.fresh-strip__btn {
  display: flex; align-items: center; gap: 7px; min-block-size: 46px; padding: 0 12px;
  font-size: 15px; font-weight: 800; color: var(--text); text-decoration: none;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
}
.fresh-strip__btn:hover { border-color: var(--border-strong); }
.fresh-strip__btn--new { border-color: color-mix(in srgb, var(--fresh) 45%, var(--border)); }
.fresh-strip__btn--ending { border-color: color-mix(in srgb, var(--urgent) 35%, var(--border)); }
.fresh-strip__n {
  min-inline-size: 22px; padding: 1px 7px; font-size: 12.5px; font-weight: 800; text-align: center;
  border-radius: 999px; color: var(--on-fresh); background: var(--fresh);
}
.fresh-strip__btn--ending .fresh-strip__n { color: var(--on-urgent); background: var(--urgent); }
.fresh-strip__n[hidden] { display: none; }

/* The page. */
.fresh-page { max-inline-size: var(--max-w); margin: 0 auto; padding: 14px 12px 28px; }
.fresh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px;
  background: var(--surface-2); border-radius: 14px; }
.fresh-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 46px;
  font: inherit; font-size: 16px; font-weight: 800; color: var(--text-muted);
  background: none; border: 0; border-radius: 11px; cursor: pointer;
}
.fresh-tab.is-active { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.fresh-tab__n:empty { display: none; }
.fresh-tab__n { min-inline-size: 22px; padding: 1px 7px; font-size: 12.5px; border-radius: 999px;
  color: var(--on-fresh); background: var(--fresh); }
#tabEnding .fresh-tab__n { color: var(--on-urgent); background: var(--urgent); }
.fresh-tab { display: inline-flex; align-items: center; justify-content: center; }
.fresh-tab__ico { flex: none; inline-size: 22px; block-size: 22px; object-fit: contain; }
/* On a phone the icon sits over the name and the count rides its corner, so three tabs fit. */
@media (max-width: 520px) {
  .fresh-tab { flex-direction: column; gap: 1px; position: relative; padding-block: 6px 5px; line-height: 1.15; }
  .fresh-tab__ico { inline-size: 24px; block-size: 24px; }
  .fresh-tab .fresh-tab__n { position: absolute; inset-block-start: 3px; inset-inline-end: 4px; }
}
.fresh-page__sub { margin: 10px 2px 2px; font-size: 13px; color: var(--text-muted); }

.fresh-day { margin-block-start: 16px; }
.fresh-day__head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 18px; font-weight: 800; }
.fresh-day__n { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* Small cards: 2 a row on a phone, more as the screen allows. */
.fresh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (min-width: 700px) { .fresh-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } }
.fcard {
  display: flex; flex-direction: column; padding: 0; min-inline-size: 0; overflow: hidden;
  font: inherit; color: var(--text); text-align: start; cursor: pointer;
  background: var(--surface); border: var(--card-outline, 2px) solid var(--store-color, var(--brand)); border-radius: 14px;
}
/* The shop's colour on top and the open line at the bottom, as on the home
   page's boxes (the owner, 2026-11-03). */
.fcard:hover .fcard__go { filter: brightness(1.08); }
.fcard__who { display: flex; align-items: center; gap: 6px; min-inline-size: 0; padding: 6px 8px;
  background: var(--store-color, var(--brand)); color: var(--store-on, #fff); }
.fcard__go { display: block; margin-block-start: auto; padding: 9px 6px; font-size: 13px; font-weight: 800; line-height: 1.25;
  text-align: center; color: var(--store-on, #fff); background: var(--store-color, var(--brand)); }
.fcard__name { flex: 1; min-inline-size: 0; font-size: 13.5px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard__fav { color: var(--store-on, #fff); font-size: 13px; }
.fcard__pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface-2); }
/* Cropped from the top, where a flyer prints its headline. */
.fcard__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; display: block; }
.fcard__n { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; padding: 1px 8px;
  font-size: 12px; font-weight: 800; color: #fff; background: rgb(0 0 0 / .62); border-radius: 999px; }
.fcard__tags { display: flex; flex-wrap: wrap; gap: 5px; min-block-size: 22px; box-sizing: content-box; padding: 7px 8px; }
.ftag { padding: 2px 9px; font-size: 12px; font-weight: 800; border-radius: 999px; white-space: nowrap; }
.ftag--new { color: var(--on-fresh); background: var(--fresh); }
.ftag--today { color: var(--on-urgent); background: var(--urgent); }
.ftag--soon { color: var(--warn); background: var(--warn-soft); }
/* Once, the first time this phone shows the offer: two pulses, then still. */
.ftag--new.is-flash { animation: fresh-pulse .7s ease-in-out .35s 2; }
@keyframes fresh-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--fresh) 55%, transparent); }
  50% { transform: scale(1.14); box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .ftag--new.is-flash { animation: none; } }
.fresh-strip__btn { white-space: nowrap; }
@media (max-width: 420px) {
  .fresh-strip__btn { gap: 6px; padding: 0 10px; font-size: 14px; }
}

/* v143b - the strip drawn, not plain (the owner): an icon tile each - a
   green seal for new, a red hourglass for ending - over a soft wash of
   its colour. No arrow: it read as a dropdown. */
.fresh-strip__btn { gap: 9px; min-block-size: 56px; padding: 0 8px; padding-inline-end: 12px;
  border: 1.5px solid transparent; }
.fresh-strip__btn--new { background: linear-gradient(to left, var(--fresh-soft), var(--surface) 85%);
  border-color: color-mix(in srgb, var(--fresh) 30%, transparent); }
.fresh-strip__btn--ending { background: linear-gradient(to left, var(--urgent-soft), var(--surface) 85%);
  border-color: color-mix(in srgb, var(--urgent) 25%, transparent); }
[dir="ltr"] .fresh-strip__btn--new { background: linear-gradient(to right, var(--fresh-soft), var(--surface) 85%); }
[dir="ltr"] .fresh-strip__btn--ending { background: linear-gradient(to right, var(--urgent-soft), var(--surface) 85%); }
.fresh-strip__btn:hover { border-color: currentColor; }
.fresh-strip__tile { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px;
  border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.fresh-strip__btn--new .fresh-strip__tile { color: var(--fresh); }
.fresh-strip__btn--ending .fresh-strip__tile { color: var(--urgent); }
.fresh-strip__label { font-size: 15px; font-weight: 800; color: var(--text); }
.fresh-strip__n { margin-inline-start: auto; }
@media (max-width: 420px) {
  .fresh-strip__btn { gap: 7px; padding: 0 6px; padding-inline-end: 9px; }
  .fresh-strip__tile { inline-size: 36px; block-size: 36px; }
  .fresh-strip__label { font-size: 14px; }
}

/* The page count on the small cards: top corner, where the home page's
   cards carry it - not under the picture's bottom edge. */
.fcard__n { inset-block-end: auto; inset-block-start: 6px; inset-inline-end: auto; inset-inline-start: 6px; }

/* The menu's "pix": the header's bright yellow on the green head, not the
   darker one kept for white backgrounds (the owner). */
.drawer__head .brand__pix { color: var(--accent); }

/* v143c - the owner's ChatGPT pictures in the strip (glossy, like the
   department icons under it): no white tile behind them any more. */
.fresh-strip__tile { inline-size: 44px; block-size: 44px; background: none; box-shadow: none; }
.fresh-strip__tile img { inline-size: 44px; block-size: 44px; display: block; }
@media (max-width: 420px) {
  .fresh-strip__tile, .fresh-strip__tile img { inline-size: 40px; block-size: 40px; }
}

/* v143d - the strip in Baloo Bhaijaan 2 (the owner's pick of six fonts),
   kept on our own host (assets/fonts, OFL licence beside it): "عروض"
   small over the bold word. Design A of the six he compared. (His
   ChatGPT backgrounds were tried behind the buttons and taken off - too
   much colour under the yellow location bar; kept in art/.) */
@font-face {
  font-family: 'Baloo Bhaijaan 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
.fresh-strip__btn { min-block-size: 60px; padding-block: 4px; }
.fresh-strip__label { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.02;
  font-family: 'Baloo Bhaijaan 2', var(--font); white-space: normal; }
.fresh-strip__label small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fresh-strip__label > span { font-size: clamp(16px, 4.8vw, 21px); font-weight: 800; }
.fresh-strip__btn--new .fresh-strip__label > span { color: var(--fresh); }
.fresh-strip__btn--ending .fresh-strip__label > span { color: var(--urgent); }
.fresh-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fresh-strip__btn { min-inline-size: 0; white-space: normal; }
.fresh-strip__tile, .fresh-strip__tile img { inline-size: 38px; block-size: 38px; }
@media (max-width: 420px) { .fresh-strip__tile, .fresh-strip__tile img { inline-size: 36px; block-size: 36px; } }
/* The page's tabs in the same font. */
.fresh-tab { font-family: 'Baloo Bhaijaan 2', var(--font); font-size: 17px; }

/* v143f - an arrow in each button, green / red (the owner's dad: make it
   plain that it can be pressed). It points the way you read - left in
   Arabic - and sits in a filled circle, so it reads "go", not the small
   chevron of a dropdown that was taken out earlier. The count moved onto
   the picture's corner, like a notification badge, to make the room. */
.fresh-strip__tile { position: relative; }
.fresh-strip__tile .fresh-strip__n {
  position: absolute; inset-block-start: -6px; inset-inline-end: -8px; margin: 0;
  min-inline-size: 20px; padding: 0 5px; font-size: 11.5px; line-height: 18px;
  font-family: var(--font); border: 2px solid var(--surface);
}
.fresh-strip__go {
  display: grid; place-items: center; flex: none; margin-inline-start: auto;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
}
[dir="rtl"] .fresh-strip__go svg { transform: scaleX(-1); }
.fresh-strip__btn--new .fresh-strip__go { color: var(--on-fresh); background: var(--fresh); }
.fresh-strip__btn--ending .fresh-strip__go { color: var(--on-urgent); background: var(--urgent); }
.fresh-strip__btn:hover .fresh-strip__go { transform: translateX(-2px); }
[dir="ltr"] .fresh-strip__btn:hover .fresh-strip__go { transform: translateX(2px); }
@media (max-width: 420px) { .fresh-strip__go { inline-size: 26px; block-size: 26px; } }

/* v144 - new arrivals in the review console (review.html). */
.rev-arr { margin-block-start: 28px; }
.rev-arr__title { font-size: 19px; margin: 0 0 10px; }
.rev-arr__title span { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.rev--arr { display: flex; gap: 14px; align-items: flex-start; }
.rev-arr__pic { inline-size: 132px; block-size: 132px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.rev-arr__body { flex: 1; min-inline-size: 0; }
.rev-arr__pic--zoom { cursor: zoom-in; }
.rev-zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 14, 12, .9); cursor: zoom-out; }
.rev-zoom__pic { inline-size: 100%; block-size: 100%; object-fit: contain; }
.rev-zoom__x { position: fixed; inset-block-start: 12px; inset-inline-end: 14px; inline-size: 42px; block-size: 42px;
  font-size: 26px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .16); border: 0; border-radius: 50%; cursor: pointer; }
.rev-arr__name { margin: 4px 0; font-size: 16px; font-weight: 800; }
.rev-arr__cap { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); white-space: pre-line; max-block-size: 7.5em; overflow: auto; }
.rev-arr__acts { margin-block-start: 10px; flex-wrap: wrap; align-items: center; }
.rev-arr__days { min-block-size: 40px; padding: 0 10px; font: inherit; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* v144 - "وصل حديثًا", the third tab: blue, so it is neither the green of
   new offers nor the red of ending ones. Its cards show one PRODUCT -
   whole, on white - not a flyer page cropped from the top. */
:root { --arrive: #1f5fae; --on-arrive: #ffffff; --arrive-soft: #e6effa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --arrive: #7fb0ec; --on-arrive: #0d1a2b; --arrive-soft: #172536; }
}
:root[data-theme='dark'] { --arrive: #7fb0ec; --on-arrive: #0d1a2b; --arrive-soft: #172536; }
.fresh-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fresh-tab { gap: 6px; padding-inline: 4px; }
#tabArrivals .fresh-tab__n { color: var(--on-arrive); background: var(--arrive); }
@media (max-width: 420px) {
  .fresh-tab { font-size: 15px; gap: 4px; }
  .fresh-tab__n { min-inline-size: 18px; padding: 0 5px; font-size: 11.5px; }
}
a.fcard { text-decoration: none; }
.fcard__pic--product { aspect-ratio: 1; background: #fff; }
.fcard__pic--product img { object-fit: contain; object-position: center; padding: 8px; box-sizing: border-box; }
.fcard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 700; line-height: 1.35; min-block-size: 2.7em; margin: 7px 8px 0; }
.ftag--arr { color: var(--on-arrive); background: var(--arrive); }
.fcard__price { margin-inline-start: auto; font-size: 14px; font-weight: 800; color: var(--brand-ink, var(--brand)); }
/* Three tabs on one line each, down to a 320px phone. */
.fresh-tab { white-space: nowrap; font-size: clamp(12.5px, 3.9vw, 17px); }
@media (max-width: 420px) { .fresh-tab { font-size: clamp(12.5px, 3.9vw, 15px); } .fresh-tabs { gap: 4px; padding: 3px; } }
/* Two cards a row on a 320px phone as well. */
@media (max-width: 699px) { .fresh-grid { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 8px; } }

/* v144 - the builder makes a flyer OR a new arrival (وصل حديثًا): a
   two-way switch on top, and for an arrival a simple card - its picture,
   name, price (optional), how long it stays new, send. */
.ad-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-inline-size: 520px;
  margin: 4px auto 14px; padding: 4px; background: var(--surface-2); border-radius: 14px; }
.ad-mode button { min-block-size: 44px; font: inherit; font-size: 15.5px; font-weight: 800;
  color: var(--text-muted); background: none; border: 0; border-radius: 11px; cursor: pointer; }
.ad-mode button.is-active { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.ad-mode button[data-mode="arrival"].is-active { color: var(--arrive); }
.arr-studio { max-inline-size: 880px; margin: 0 auto 18px; }
.arr-studio[hidden] { display: none; }
.arr-studio__card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  border-block-start: 4px solid var(--arrive); }
@media (max-width: 640px) { .arr-studio__card { grid-template-columns: 1fr; } }
.arr-studio__pic { position: relative; display: grid; place-items: center; aspect-ratio: 1;
  background: #fff; border: 1.5px dashed var(--border-strong); border-radius: 12px; overflow: hidden; }
@media (max-width: 640px) { .arr-studio__pic { max-inline-size: 240px; inline-size: 100%; margin-inline: auto; } }
.arr-studio__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.arr-studio__pic-hint { margin: 0; padding: 14px; font-size: 13.5px; text-align: center; color: var(--text-muted); }
.arr-studio__tag { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 2px 8px;
  font-size: 11.5px; font-weight: 800; color: var(--on-arrive); background: var(--arrive); border-radius: 999px; }
.arr-studio__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.arr-studio__form .maker-field--wide, .arr-studio__btns, #arrSend, #arrNote { grid-column: 1 / -1; }
.arr-studio__form select { min-block-size: 44px; font: inherit; border-radius: 10px; padding: 0 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.arr-studio__btns { display: flex; flex-wrap: wrap; gap: 8px; }
#arrSend { background: var(--arrive); color: var(--on-arrive); }
.arr-studio .ad-store-bar { margin-block-end: 10px; }
.arr-mine { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.arr-mine + .arr-mine { border-block-start: 1px solid var(--border); }
.arr-mine__name { flex: 1; min-inline-size: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr-mine__st { flex: none; padding: 2px 9px; font-size: 12px; font-weight: 800; border-radius: 999px;
  color: var(--text-muted); background: var(--surface-2); }
.arr-mine__st--approved { color: var(--on-arrive); background: var(--arrive); }
.arr-mine__st--rejected { color: var(--urgent); background: var(--urgent-soft); }
.ad-studio[hidden] { display: none; }

/* v144 - a new arrival opened: the product bigger, before the shop's page. */
.arr-pop { display: grid; gap: 6px; margin-block: 4px 8px; }
.arr-pop__pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-block-size: 52vh;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.arr-pop__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; }
.arr-pop__tag { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; }
.arr-pop__name { margin: 4px 0 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.arr-pop__line { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 13.5px; color: var(--text-muted); }
.arr-pop__price { font-size: 18px; color: var(--brand-ink, var(--brand)); }
button.fcard { -webkit-tap-highlight-color: transparent; }

/* v144 - a shop's new arrivals on its own page: their posters in a row. */
.store-arr__title { color: var(--arrive); }
.store-arr { display: flex; gap: 10px; overflow-x: auto; padding-block-end: 6px; margin-block-end: 18px;
  scrollbar-width: thin; }
.store-arr__item { flex: none; inline-size: clamp(130px, 38vw, 200px); padding: 0; border: 0; border-radius: 12px;
  overflow: hidden; background: none; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .15); }
.store-arr__item img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* v146 - a new arrival inside its shop's row: its badge in the arrivals blue. */
.badge--arrive { background: var(--arrive); color: #fff; }

/* v146 - review: a new arrival's name and price can be corrected before
   publishing (a Facebook suggestion's are Gemma's reading of the post). */
.rev-arr__edit { display: block; inline-size: 100%; max-inline-size: 360px; min-block-size: 40px; margin: 4px 0;
  padding: 0 10px; font: inherit; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); }
.rev-arr__name.rev-arr__edit { font-size: 16px; font-weight: 800; }
.rev-arr__price { max-inline-size: 160px; }
.rev-arr__post { display: inline-block; margin-block-start: 4px; font-size: 13px; font-weight: 700; color: var(--arrive); }

/* v147 - a new arrival has no "share offer" (one picture: "share picture"). */
.viewer__share[hidden] { display: none !important; }

/* v148 - a new arrival in the viewer (the owner, 2026-10-13): "share
   picture" in the top bar where an offer has "share offer" (on a phone
   the bar otherwise has none for it), and the poster across the whole
   width, in the middle of the screen. Offers are untouched. */
.viewer--arrival.viewer--vertical .viewer__share--pic { display: inline-flex; }
.viewer--arrival .viewer__top .viewer__share--pic { inline-size: auto; padding: 0 12px; gap: 6px; }
.viewer--arrival .viewer__top .viewer__share--pic span { display: inline; }
.viewer--arrival .viewer__scroll { padding: 0; align-content: center; }
.viewer--arrival .viewer__page img { border-radius: 0; border: 0; box-shadow: none; }
.viewer--arrival .viewer__pagenum { display: none; }

/* v152 - the menu's top (notify.js, the owner's idea 11): who is signed in,
   "الإشعارات", and a yellow dot on ☰ while something in it is unseen. */
#menuBtn, .hdr__menu2 { position: relative; }
.menu-dot { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; inline-size: 10px; block-size: 10px;
  border-radius: 50%; background: var(--accent, #ffd400); box-shadow: 0 0 0 2px var(--hdr-top, #0f5a47); pointer-events: none; }
.menu-dot[hidden] { display: none; }
.drawer__top { border-block-end: 1px solid var(--border); }
.drawer__who { display: flex; align-items: center; gap: 12px; inline-size: 100%; padding: 14px 18px;
  font: inherit; text-align: start; color: var(--text); background: none; border: 0; text-decoration: none; cursor: pointer; }
.drawer__who:hover { background: var(--surface-2); }
.drawer__who-pic { flex: none; display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 50%;
  font-size: 19px; font-weight: 800; color: var(--hdr-top, #0f5a47); background: var(--accent, #ffd400); }
.drawer__who-text { display: flex; flex-direction: column; min-inline-size: 0; }
.drawer__who-name { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__who-sub { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__sep--notif { margin-block-start: 0; }
.notif { display: flex; flex-direction: column; padding-block-end: 8px; }
.notif__row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px; font-size: 14px; line-height: 1.45;
  color: var(--text); text-decoration: none; }
a.notif__row:hover { background: var(--surface-2); }
.notif__row.is-new { font-weight: 800; }
.notif__row.is-new::after { content: ''; flex: none; margin-inline-start: auto; inline-size: 8px; block-size: 8px;
  border-radius: 50%; background: var(--accent, #ffd400); }
.notif__text { flex: 1; min-inline-size: 0; }
.notif__row--welcome { margin: 4px 12px 6px; padding: 10px 12px; border-radius: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--accent, #ffd400) 22%, var(--surface)); }
.notif__row--tip { color: var(--text-muted); font-size: 13.5px; }
.notif__row--none { color: var(--text-muted); font-size: 13.5px; }
.notif__tip-mark { flex: none; }
.notif__x { flex: none; inline-size: 30px; block-size: 30px; padding: 0; font-size: 20px; line-height: 1; color: var(--text-muted);
  background: none; border: 0; border-radius: 50%; cursor: pointer; }
.notif__x:hover { background: var(--surface-2); }
.notif__more { align-self: flex-start; margin: 2px 18px 6px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 800;
  color: var(--brand-ink, var(--brand)); background: var(--surface-2); border: 0; border-radius: 999px; cursor: pointer; }

/* v154 - notifications.html: every notification, one line per shop, by day. */
.notif-page { max-inline-size: 720px; margin: 0 auto; padding: 14px 12px 28px; }
.notif-page__title { margin: 4px 0 2px; font-size: 22px; font-weight: 800; }
.notif-page__none { margin: 18px 0; color: var(--text-muted); }
.notif--page { margin-block-start: 6px; padding: 4px 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; }
.notif--page .notif__row { padding-block: 12px; }
.notif--page .notif__row + .notif__row { border-block-start: 1px solid var(--border); }
a.notif__more { text-decoration: none; }

/* v156 - "ترتيب صفحتي" in the builder: a shop's cards, one shown first. */
.ad-order__hint { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); }
.ad-order__row { display: flex; align-items: center; gap: 10px; }
.ad-order__pic { flex: none; inline-size: 48px; block-size: 60px; object-fit: cover; object-position: top;
  border-radius: 8px; background: var(--surface-2); }
.ad-order__row .ad-mine__info { flex: 1; min-inline-size: 0; }
.ad-pin-check { margin-block: 4px 8px; }

/* v157 - the store's own list in its account window: a picture, the real
   state, a tap to open, a tick for "show first". And Google first. */
.prof-cta__btns .acct__google--cta { flex-basis: 100%; }
.prof-mine { display: grid; grid-template-columns: auto 44px minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; cursor: pointer; }
.prof-mine:hover { background: var(--surface-2); }
.prof-mine__tick { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.prof-mine__pic { inline-size: 44px; block-size: 56px; object-fit: cover; object-position: top; border-radius: 6px;
  background: var(--surface-2); }
.prof-mine__words { display: flex; flex-direction: column; min-inline-size: 0; }
.prof-mine__words .prof-row__main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-mine__first { grid-column: 2 / -1; font-size: 12px; font-weight: 800; color: var(--brand); }
.acct-prev { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--bg, #fff); }
.acct-prev__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  border-block-end: 1px solid var(--border); }
.acct-prev__title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-prev__body { flex: 1; min-block-size: 0; overflow: auto; display: grid; place-items: start center; padding: 10px; }
.acct-prev__frame { inline-size: min(100%, 900px); block-size: 100%; min-block-size: 70vh; border: 0; background: #fff; }
.acct-prev__img { max-inline-size: min(100%, 520px); max-block-size: 70vh; object-fit: contain; border-radius: 12px; background: #fff; }
.acct-prev__cap { margin: 10px 0 0; font-weight: 800; text-align: center; }
.prof-who__logo { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; }
.prof-who__logo.has-logo { border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.prof-who__logo img { inline-size: 88%; block-size: 88%; object-fit: contain; }
/* The store-first menu (notify.js): the shop's tools under its name. */
.drawer__who--shop .avatar { flex: none; }
.drawer__nav--shop { padding-block: 0 6px; }
.drawer__nav--shop a { padding-block: 11px; }
.drawer__shop[hidden] { display: none; }
.drawer__nav [hidden] { display: none; }
/* v159 - the my-list icon: a clipboard (index.html etc.), the same both ways. */

/* v160 - "add to home screen" (install.js, the owner's pick 2026-10-15): a
   row under the menu's head, one card at the bottom of the home page, and
   the picture guide (iPhone, or a browser with no install window). */
.drawer__inst { display: flex; align-items: center; gap: 12px; inline-size: calc(100% - 24px); margin: 0 12px 10px;
  padding: 10px 12px; font: inherit; text-align: start; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--accent, #ffd400) 22%, var(--surface)); border: 0; border-radius: 12px; }
.drawer__inst:hover { background: color-mix(in srgb, var(--accent, #ffd400) 34%, var(--surface)); }
.drawer__inst[hidden] { display: none; }
.drawer__inst-pic { flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%;
  color: #fff; background: var(--brand); }
.drawer__inst-name { font-size: 15px; font-weight: 800; }

.inst-card { position: fixed; z-index: 50; inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; align-items: center;
  max-inline-size: 460px; margin-inline: auto; padding: 12px 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  animation: sheet-up .22s ease-out; }
.inst-card__app { inline-size: 48px; block-size: 48px; border-radius: 12px; }
.inst-card__text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.4; }
.inst-card__text strong { font-size: 15px; font-weight: 800; }
.inst-card__text span { font-size: 13px; color: var(--text-muted); }
.inst-card__btns { grid-column: 1 / -1; display: flex; gap: 8px; margin-block-start: 8px; }
.inst-card__add, .inst-card__later, .inst-sheet__ok { flex: 1; min-block-size: 44px; font: inherit; font-size: 15px;
  font-weight: 800; border-radius: 999px; cursor: pointer; }
.inst-card__add, .inst-sheet__ok { color: #fff; background: var(--brand); border: 0; }
.inst-card__later { color: var(--text); background: var(--surface-2); border: 0; }

.inst-shade { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .4); }
.inst-sheet { inline-size: min(100%, 440px); max-block-size: 88vh; overflow-y: auto;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); color: var(--text); background: var(--bg);
  border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: sheet-up .18s ease-out; }
@media (min-width: 700px) { .inst-shade { align-items: center; } .inst-sheet { border-radius: 20px; } }
.inst-sheet__head { display: flex; align-items: center; gap: 12px; }
.inst-sheet__app { flex: none; inline-size: 44px; block-size: 44px; border-radius: 11px; }
.inst-sheet__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.inst-steps { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.inst-step { display: grid; grid-template-columns: 22px 50px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.inst-step__n { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 800; color: var(--hdr-top, #0f5a47); background: var(--accent, #ffd400); }
.inst-step__pic { display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 12px;
  color: #0a7aff; background: var(--surface-2); }
.inst-step:last-child .inst-step__pic { color: var(--brand); }
.inst-step__text { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.45; }
.inst-step__sub { font-size: 12.5px; color: var(--text-muted); }
.inst-sheet__ok { inline-size: 100%; }

/* v161 - light/dark moved into the menu (header.js bindThemeRow); its
   header slot is the install button (install.js) on phones until installed. */
#themeBtn { display: none; }
.inst-btn[hidden] { display: none; }
.drawer__theme { display: flex; align-items: center; gap: 10px; inline-size: 100%; font: inherit; text-align: start;
  color: inherit; background: none; border: 0; cursor: pointer; }

/* v163 - the account button (the owner, 2026-10-15): signed out it keeps
   its words as before; signed in it is a round generic person picture, its
   words kept for screen readers and the tooltip. */
.acct-btn svg.acct-btn__anon { display: none; }
.hdr .acct-btn.is-signed-in { position: relative; inline-size: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; overflow: hidden; }
.hdr .acct-btn.is-signed-in #acctLabel { position: absolute; inline-size: 1px; block-size: 1px; max-inline-size: none;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hdr .acct-btn.is-signed-in svg.acct-btn__icon { display: none; }
.hdr .acct-btn.is-signed-in svg.acct-btn__anon { display: block; inline-size: 36px; block-size: 36px; }
.hdr .acct-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* v166 - signed in: exactly the menu's top-row picture (notify.js
   .drawer__who-pic) - the outline head and shoulders in dark green on the
   theme yellow (the owner, 2026-10-15). */
.hdr .acct-btn.is-signed-in { background: var(--accent, #ffcf33); color: var(--hdr-top, #0f5a47); }
.hdr .acct-btn.is-signed-in svg.acct-btn__anon { display: none; }
.hdr .acct-btn.is-signed-in svg.acct-btn__icon { display: block; inline-size: 20px; block-size: 20px; }

/* v165 - the row of four above the departments (index.html #quickRow; the
   owner, 2026-10-15): the same tiles as the department icons, a little
   bigger, four across a phone. */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px auto 14px;
  max-inline-size: 460px; }
.quick[hidden] { display: none; }
.quick__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-inline-size: 0; padding: 0;
  font: inherit; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; }
.quick__ic { position: relative; display: grid; place-items: center; inline-size: 64px; block-size: 64px;
  background: var(--dept-bg); border-radius: 18px; transition: transform .15s; }
.quick__btn:hover .quick__ic { transform: translateY(-2px); }
.quick__ic img { display: block; inline-size: 52px; block-size: 52px; }
.quick__label { font-size: 12.5px; font-weight: 800; line-height: 1.25; text-align: center; }
.quick__n { position: absolute; inset-block-start: -5px; inset-inline-end: -6px; min-inline-size: 22px; padding: 1px 6px;
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; border-radius: 999px;
  color: var(--on-fresh); background: var(--fresh); box-shadow: 0 0 0 2px var(--bg); }
.quick__n[hidden] { display: none; }
.quick__btn--ending .quick__n { color: var(--on-urgent); background: var(--urgent); }
.quick__btn--arrivals .quick__n { color: #fff; background: #2f7fe0; }
.quick__n--soon { font-size: 10.5px; color: var(--hdr-top, #0f5a47); background: var(--accent, #ffd400); }

.depts[hidden] { display: none; }

/* v169 - the design menu stays open while choosing; a small "تم" in its
   bottom corner closes it (the owner, 2026-10-15). */
.ad-design-pop__foot { display: flex; justify-content: flex-end; padding-block-start: 6px; }
.ad-design-pop__done { min-inline-size: 64px; min-block-size: 34px; padding: 0 16px; font: inherit; font-size: 14px;
  font-weight: 800; color: #fff; background: var(--brand); border: 0; border-radius: 999px; cursor: pointer; }

/* v170 - the store page (the owner, 2026-10-16): the map and store-info
   buttons as two equal cards - the icon in a soft circle of the shop's
   colour, the name, a small line under it - room for "videos" later; and
   "+N" after the first offers so the shopping list is not buried. */
#storeHead .store-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#storeHead .store-quick__btn { justify-content: flex-start; gap: 10px; block-size: auto; min-block-size: 60px;
  padding: 10px 12px; text-align: start; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
#storeHead .store-quick__btn:hover { border-color: var(--store-color, var(--brand)); }
#storeHead .store-quick__ic { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  border-radius: 50%; color: var(--store-text, var(--store-color, var(--brand)));
  background: color-mix(in srgb, var(--store-color, var(--brand)) 13%, var(--surface)); }
#storeHead .store-quick__ic svg { inline-size: 21px; block-size: 21px; }
.store-quick__words { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.3; }
.store-quick__name { font-size: 15px; font-weight: 800; }
.store-quick__sub { font-size: 12px; font-weight: 600; color: var(--text-muted); }
#storeHead .store-quick__more.is-open { color: var(--text); background: var(--surface);
  border-color: var(--store-color, var(--brand)); }
#storeHead .store-quick__more.is-open .store-quick__ic { color: var(--store-on, #fff); background: var(--store-color, var(--brand)); }
#storeHead .store-quick__chev { flex: none; font-size: 18px; color: var(--text-muted); }
.tiles-grid > [hidden] { display: none; }
/* As on the home page: the full width, in the shop's colour. */
.store-more-offers { display: block; inline-size: 100%; margin-block: 12px 6px; padding: 14px 16px;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--store-on, #fff); text-align: center; cursor: pointer;
  background: var(--store-color, var(--brand)); border: 0; border-radius: 12px; }
.store-more-offers:hover { filter: brightness(1.08); }
a.acct-btn { text-decoration: none; }
.store-quick__name, .store-quick__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v171 - the shops' videos (reels.js; the owner, 2026-10-16): portrait
   cards like Facebook's Reels on a phone - about two-thirds of the screen,
   the next peeking in, swiped sideways, played in place. */
.reels { margin-block: 14px 18px; }
.reels__title { margin: 0 2px 8px; font-size: 19px; font-weight: 800; }
.reels__row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * clamp(12px, 3vw, 28px)); padding: 2px clamp(12px, 3vw, 28px) 6px;
  overscroll-behavior-x: contain; }
.reels__row::-webkit-scrollbar { display: none; }
.reel { flex: none; inline-size: min(64vw, 270px); scroll-snap-align: start; }
.reel__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #111; }
.reel__pic, .reel__video, .reel__player { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.reel__pic, .reel__video { object-fit: cover; }
.reel__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; color: #fff; cursor: pointer;
  background: linear-gradient(to top, rgb(0 0 0 / .35), transparent 45%); border: 0; }
.reel__play[hidden] { display: none; }
.reel__play-dot { display: grid; place-items: center; inline-size: 62px; block-size: 62px; border-radius: 50%;
  background: rgb(0 0 0 / .45); box-shadow: 0 0 0 2px rgb(255 255 255 / .85); }
.reel__play-dot svg { margin-inline-start: 4px; }
[dir='rtl'] .reel__play-dot svg { margin-inline-start: 0; margin-inline-end: 4px; transform: scaleX(1); }
.reel__wait { position: absolute; inset: 0; display: grid; place-items: center; background: #1b2523; }
.reel__who { display: flex; align-items: center; gap: 7px; margin-block-start: 7px; min-inline-size: 0;
  color: var(--text); text-decoration: none; }
.reel__name { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a shop's page: the row is one more item of the offers grid, all its width. */
.tiles-grid > .reels { grid-column: 1 / -1; margin-block: 4px; }

/* The feed of one shop's videos (its "فيديوهات" button). */
.reels-feed { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--bg); }
.reels-feed__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  padding-block-start: calc(10px + env(safe-area-inset-top)); border-block-end: 1px solid var(--border); }
.reels-feed__title { flex: 1; min-inline-size: 0; margin: 0; font-size: 17px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reels-feed__x { flex: none; inline-size: 40px; block-size: 40px; font-size: 26px; line-height: 1; color: var(--text);
  background: var(--surface-2); border: 0; border-radius: 50%; cursor: pointer; }
.reels-feed__list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
.reel--wide { inline-size: min(100%, 420px); }
.rev-vid-add { display: grid; gap: 8px; }
.rev-vid-add select, .rev-vid-add textarea { font: inherit; font-size: 14px; padding: 8px 10px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
/* Inside the offers grid the row must not widen the grid to its cards. */
.tiles-grid > .reels { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
.tiles-grid > .reels .reels__row { margin-inline: 0; padding-inline: 0; }
/* On a phone the store's buttons sit in one row, the icon above the words. */
@media (max-width: 560px) {
  #storeHead .store-quick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  #storeHead .store-quick__btn { position: relative; flex-direction: column; justify-content: center; gap: 6px;
    min-block-size: 92px; padding: 10px 6px; text-align: center; }
  #storeHead .store-quick__words { align-items: center; }
  .store-quick__name { font-size: 14px; }
  .store-quick__sub { font-size: 11px; }
  #storeHead .store-quick__chev { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; font-size: 14px; }
}
/* v172 - a shop's videos under its own offers on the home page. */
.reels--in-store { margin-block: 12px 2px; }
.reels--in-store .reels__title { font-size: 16px; margin-block-end: 6px; }
/* A shop's page, cards side by side: the videos under all its cards. */
.reels--after { margin-block: 20px 4px; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
.reels--after .reels__row { margin-inline: 0; padding-inline: 0; }
.store-section .reels--in-store .reels__row { margin-inline: 0; padding-inline: 0; }
.reels--in-store .reel { inline-size: clamp(224px, 58vw, 240px); }  /* Facebook's player stays black under ~220px */
.reel__wait { gap: 10px; align-content: center; }
.reel__src { font-size: 12px; font-weight: 700; color: rgb(255 255 255 / .7); }
/* A stopped Facebook reel: the shop at the top (as Facebook's player has
   it), our ▶ alone in the middle. */
.reel--facebook .reel__wait:has(.reel__src) { display: flex; align-items: center; align-content: normal; justify-content: flex-start;
  gap: 8px; padding: 12px; place-items: initial; background: linear-gradient(#24302d, #111); }
.reel--facebook .reel__wait:has(.reel__src) { align-items: flex-start; }
.reel__src { color: #fff; font-size: 13px; margin-block-start: 8px; }
/* v175 - Facebook's kit draws its player inside .reel__fb: fill the card. */
.reel__fb { position: absolute; inset: 0; }
.reel__fb:not(.reel__fb--own-size) > span, .reel__fb:not(.reel__fb--own-size) iframe { inline-size: 100% !important; block-size: 100% !important; }
.reel__spin { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .2);
  border-top-color: rgb(255 255 255 / .85); animation: reel-spin .9s linear infinite; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reel__spin { animation-duration: 2.4s; } }
/* v178 - our layer over Facebook's player: every touch is the page's (a
   swipe scrolls), a tap plays/pauses through Facebook's kit. */
.reel__touch { position: absolute; inset: 0; z-index: 2; touch-action: pan-x pan-y; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.reel__touch .reel__play { pointer-events: none; }
.reel__sound { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; padding: 0; color: #fff; background: rgb(0 0 0 / .5); border: 0;
  border-radius: 50%; cursor: pointer; }
.reel__sound[hidden] { display: none; }
/* The sound bottom RIGHT in both languages - most people are right-handed
   (the owner, 2026-10-19); full screen top right. */
.reel__sound { inset-inline-start: auto; right: 12px; left: auto; }
.reel__full { position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; padding: 0; color: #fff; background: rgb(0 0 0 / .5); border: 0;
  border-radius: 10px; cursor: pointer; }
.reel__full[hidden] { display: none; }
.reel__full::before, .reel__sound::before { content: ''; position: absolute; inset: -4px; }
/* Full screen (the owner, 2026-10-19): the reel keeps its 9:16 shape, sits in
   the MIDDLE of the screen (not under the camera, not on the bottom bar), as
   wide as the screen allows. Facebook's own style sheet makes its widget
   position:relative; the rule below keeps it pinned in the frame. */
.reel .reel__fb { position: absolute; }
.reel { --reel-top: 0px; }
@media (pointer: coarse) { .reel { --reel-top: max(env(safe-area-inset-top), 40px); } }
.reel:fullscreen, .reel.reel--full {
  display: flex; align-items: center; justify-content: center; inline-size: 100vw; block-size: 100vh;
  max-inline-size: none; margin: 0; padding: 0; background: #000;
}
.reel.reel--full { position: fixed; inset: 0; z-index: 3000; block-size: 100dvh; }
.reel:fullscreen .reel__frame, .reel.reel--full .reel__frame {
  flex: none; aspect-ratio: 9 / 16; block-size: auto; border-radius: 0; max-inline-size: none;
  inline-size: min(100vw, calc((100dvh - var(--reel-top) * 2) * 9 / 16));
}
.reel:fullscreen .reel__who, .reel.reel--full .reel__who { display: none; }
body.is-reel-full { overflow: hidden; }
/* No arrows on the reels; on a computer a thin scrollbar to slide the row. */
@media (hover: hover) and (pointer: fine) {
  .reels__row { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 30%, transparent) transparent;
    padding-block-end: 8px; }
  .reels__row::-webkit-scrollbar { display: block; height: 6px; }
  .reels__row::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 30%, transparent); border-radius: 3px; }
}
.reel__touch[hidden] { display: none; }
/* v182 - on a computer Facebook's kit keeps the player at the size it sets itself. */

/* v185 (the owner, 2026-10-18) --------------------------------------------- */
/* Viewer: "My list" beside the share buttons, with the yellow count. */
.viewer__list { text-decoration: none; color: #fff; background: var(--hdr-top, #146356); border-color: transparent; }
.viewer__list:hover { background: var(--hdr-top-2, #1a7a69); }
.viewer__list-n { min-inline-size: 18px; block-size: 18px; padding: 0 5px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 800; border-radius: 999px; color: var(--accent-ink, #2a2200); background: var(--accent, #ffcf33); }
.viewer__list-n[hidden] { display: none; }
@media (max-width: 420px) { .viewer__top .viewer__list { inline-size: auto; padding: 0 10px; gap: 5px; }
  .viewer__top .viewer__share span.viewer__list-n:not([hidden]) { display: inline-grid; } }
/* "More videos": the last tile of a shop's reels row. */
.reels__more { flex: none; align-self: center; inline-size: 150px; min-block-size: 56px; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; color: var(--brand-ink, var(--text)); background: var(--surface, #fff); border: 1.5px solid var(--border); border-radius: 14px; }
.reels__more--feed { inline-size: 100%; align-self: stretch; margin-block: 8px; }
/* The pen: a button of its own on a hand-written item (the rest of the row ticks it). */
.basket-row__img.is-edit { cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--brand); }
.basket-row__img.is-edit:hover, .basket-row__img.is-edit:focus-visible { background: var(--accent, #ffcf33); color: var(--accent-ink, #2a2200); outline: none; }
.own-form--edit { margin: 0 0 10px; border-style: solid; }
/* My list: suggestions, amount and unit for an item of your own. */
/* The chips row scrolls INSIDE the card: without min-width 0 the grid/flex parents grew to hold all 50. */
.list-card, .list-card .basket-list, .own-form, .own-form__row { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
.own-form__chips { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
.own-form__row--2 { flex-wrap: wrap; margin-block-start: 8px; }
.own-form__amount { flex: 0 0 64px; min-inline-size: 0; block-size: 44px; padding: 0 8px; text-align: center; font: inherit; font-size: 15px;
  color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; }
.own-form__unit { flex: 0 0 auto; block-size: 44px; padding: 0 8px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; }
.own-form__row--2 .own-form__price { flex: 1 1 70px; padding: 0 8px; }
.own-form__row--2 .own-form__add { padding: 0 14px; }
.own-form__chips { display: flex; gap: 6px; margin-block-start: 8px; padding-block-end: 4px; overflow-x: auto; scrollbar-width: thin; }
.own-form__chips[hidden] { display: none; }
.own-chip { flex: none; min-block-size: 34px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--brand-ink, var(--text)); background: var(--surface-2, #eef3f1); border: 1px solid var(--border); border-radius: 999px; }
.own-chip:hover { border-color: var(--brand); }
/* My list: delete the list, in red (the owner, 2026-10-19). */
.list-del { display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 46px;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: #c62828; background: var(--surface, #fff);
  border: 1.5px solid #c62828; border-radius: 12px; }
.list-del:hover { background: #fdecea; }
:root[data-theme='dark'] .list-del { color: #ff8a80; border-color: #ff8a80; }
:root[data-theme='dark'] .list-del:hover { background: #3a1d1b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .list-del { color: #ff8a80; border-color: #ff8a80; } }
.own-form--inline { margin: 12px 0 0; background: transparent; border-style: dashed; }
.list-card--own-empty { padding: 14px; }
/* My list: the form for the shopper's own items (2026-10-19). */
.own-form { margin: 0 0 14px; padding: 12px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; }
.own-form__head { display: flex; flex-direction: column; gap: 2px; margin-block-end: 8px; }
.own-form__head span { font-size: 12.5px; color: var(--text-muted); }
.own-form__row { display: flex; gap: 8px; }
.own-form__name, .own-form__price { min-inline-size: 0; block-size: 44px; padding: 0 12px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; }
.own-form__name { flex: 1 1 auto; }
.own-form__price { flex: 0 0 30%; }
.own-form__name:focus, .own-form__price:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.own-form__add { flex: none; block-size: 44px; padding: 0 18px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  color: var(--accent-ink, #2a2200); background: var(--accent, #ffcf33); border: 0; border-radius: 12px; }
/* "2 days left": v185's amber with white text, between the orange of tomorrow and the green
   of 3 days (the owner, 2026-10-19). */
.badge--warn, .card__flag--warn { color: #fff; background: #b96a00; }
/* "Ends tomorrow": the original warn orange (#f57c00), a touch less orange (hue 30 -> 36),
   with WHITE text (the original had dark text). "2 days left" / "3 days left" are exactly as
   they were before 2026-10-18. */
.badge--warn.warn--tomorrow, .card__flag--warn.warn--tomorrow { color: #fff; background: #ee8c00; }
/* The store-info arrow takes the shop's colour. */
#storeHead .store-quick__chev { color: var(--store-text, var(--store-color, var(--brand))); }
/* A shop's logo in the avatar circle. */
.avatar--logo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); }
.avatar--logo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* The page count on New / Ends soon / New arrivals: Sah Seh's teal for every shop (a shop's
   own colour can match its flyer and vanish - owner, 2026-10-18), white ring.
   To go back to each shop's colour: --count-badge: var(--store-color). */
.fcard { --count-badge: #00838f; }
.fcard__n { background: var(--count-badge); color: #fff; border: 2px solid #fff;
  padding: 0 8px; box-shadow: 0 1px 4px rgb(0 0 0 / .4); }
/* The "tap an offer to open it" line stays above the row; the badges have their own band. */
.tiles--banded { margin-block-start: 0; }
/* "pix" is the ONE yellow (--accent = the search button's) on every page. On the
   pages with a white head (privacy, terms, guide, contact) the wordmark sits on a
   green chip, as in the header, so the yellow can be read. Was #e0a100 there. */
.brand__pix { color: var(--accent, #ffcf33); }
.brand__name:has(> .brand__pix), b:has(> .brand__pix) {
  background: var(--hdr-top, #0f5a47); color: #fff; padding: 2px 10px 3px; border-radius: 9px; }
.hdr .brand__name, .shops-top .brand__name, .shops-top b, .drawer__head .brand__name {
  background: none; padding: 0; border-radius: 0; }

/* v198 (the owner, 2026-10-19) ---------------------------------------------- */
/* The calculator button is now a long "add items to my list" button along the
   bottom; the pictures leave room for it, and the full-screen page moves up. */
.viewer .viewer__stage .viewer__calc {
  left: 0; right: 0; margin-inline: auto;
  inset-block-end: calc(12px + env(safe-area-inset-bottom));
  inline-size: min(calc(100% - 24px), 560px);
  block-size: 52px; padding: 0 16px; justify-content: center; gap: 10px;
  border-radius: 14px; font-size: 16px;
}
.viewer .viewer__calc-label { direction: inherit; unicode-bidi: normal; }
.viewer__calc-n {
  direction: ltr; unicode-bidi: isolate; padding: 3px 10px; font-size: 14px; font-weight: 900;
  border-radius: 999px; background: rgb(255 255 255 / .22);
}
.viewer__calc-n[hidden] { display: none; }
.viewer__calc.has-items .viewer__calc-n { background: rgb(0 0 0 / .12); }
.viewer--calc-btn.viewer--vertical .viewer__scroll { padding-block-end: calc(82px + env(safe-area-inset-bottom)); }
.viewer--calc-btn:not(.viewer--vertical):not(.viewer--calc-pinned) .viewer__frame { padding-block-end: 70px; }
.viewer--calc-btn .viewer__zoombody { padding-block-end: calc(78px + env(safe-area-inset-bottom)); }

/* The product card: the shop's name with its share button, a grab bar to swipe down. */
.prod-card__shop { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.prod-card__shopname { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-card__share {
  flex: none; display: inline-grid; place-items: center; min-inline-size: 34px; block-size: 34px; padding: 0 9px;
  font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer;
  color: var(--store-text, var(--store-color, var(--brand))); background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.prod-card__grab { inline-size: 40px; block-size: 4px; margin: -4px auto 8px; border-radius: 2px; background: var(--border-strong, #c9cfcc); }
.prod-card.is-full .prod-card__grab, .prod-card.is-full .prod-card__share { display: none; }
.prod-card { overscroll-behavior-y: contain; transition: transform .18s ease-out; }
.prod-card .ask-pop__acts { margin-block-start: 4px; }

/* Rows with no arrows slide by finger; a computer gets a thin scrollbar. */
@media (hover: hover) and (pointer: fine) {
  .more-wrap > .row--scrollbar { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 30%, transparent) transparent; }
  .more-wrap > .row--scrollbar::-webkit-scrollbar { display: block; height: 6px; }
  .more-wrap > .row--scrollbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 30%, transparent); border-radius: 3px; }
}

/* v199 (the owner, 2026-10-19) ---------------------------------------------- */
/* The long "add items to my list" button as low as it can go (just above the
   phone's own bar, which is outside the page). */
.viewer .viewer__stage .viewer__calc { inset-block-end: calc(2px + env(safe-area-inset-bottom)); }
.viewer--calc-btn.viewer--vertical .viewer__scroll { padding-block-end: calc(64px + env(safe-area-inset-bottom)); }
.viewer--calc-btn .viewer__zoombody { padding-block-end: calc(60px + env(safe-area-inset-bottom)); }
/* Shops further down the home page are built as they come near (app.js). */
.store-section-pending { min-block-size: 780px; margin-block-end: 18px; }

/* v201: the page arrows above the picture - the frame became positioned for the
   tappable products (v196) and, being later in the page, covered the left arrow. */
.viewer__nav { z-index: 4; }

/* v204: a chain flyer's product in its card - its own part of the flyer page. */
.prod-card__pic canvas.prod-card__crop { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }

/* A whole flyer page in the card from below (phones, v205): its products. */
.prod-card__page { display: grid; gap: 6px; padding-block: 4px 8px; }
.prod-card__pagehead { font-weight: 800; font-size: .95rem; color: var(--ink, inherit); padding-block-end: 2px; }
.prod-card__page .basket-row {
  margin: 0; padding: 8px;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "img name qty" "img meta line";
  column-gap: 10px; row-gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.prod-card__page .basket-row__img { inline-size: 56px; block-size: 56px; }
.prod-card__page .basket-row__name { font-size: 14px; font-weight: 700; align-self: end; }
.prod-card__page .basket-row__meta { align-self: start; }
.prod-card__page .basket-row__stepper { align-self: end; }
.prod-card__page .basket-row__line { align-self: start; font-size: 13px; font-weight: 800; }

/* A chain product's own part of the flyer in a list row (v205). */
/* A fixed track: without it "100%" of an auto-height grid row is the canvas's
   own height, and a tall crop was cut off at the bottom (the owner, 2026-11-01). */
.basket-row__img--crop { background: #fff; grid-template: 100% / 100%; }
.basket-row__img--crop canvas { inline-size: 100%; block-size: 100%; min-inline-size: 0; min-block-size: 0; object-fit: contain; display: block; }

/* The home page, browsing (the owner, 2026-10-26): a shop's offers one
   under another, the most pictures first, and its videos folded into a
   dropdown that builds nothing until it is opened. */
.tiles--stack {
  display: grid; overflow: visible; scroll-snap-type: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.tiles--stack .tile { inline-size: auto; scroll-snap-align: none; }
/* A shop's page has no panel round its boxes. Its eight boxes fill their rows:
   four across on a computer, two on a tablet. On a phone its videos sit among them. */
.store-offers { padding-inline: 0; }
@media (min-width: 700px) { .store-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .store-offers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.store-offers > .reels { grid-column: 1 / -1; margin-block: 4px; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
.store-offers > .reels .reels__row { margin-inline: 0; padding-inline: 0; }
.tiles--stack .tile.is-capped { display: none; }
.store-section--stack > .grid__more { margin-inline: 14px; }
.reels--drop { margin-block: 12px 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.reels--drop > .reels__row { margin-inline: 0; padding: 4px 12px 12px; }
.reels__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 12px 14px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 800; min-block-size: 48px;
}
.reels__sum::-webkit-details-marker { display: none; }
.reels__chev {
  flex: none; inline-size: 9px; block-size: 9px; margin-inline-end: 4px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.reels--drop[open] > .reels__sum .reels__chev { transform: rotate(-135deg) translate(-2px, -2px); }

/* Telling shops apart while scrolling down (the owner, 2026-10-26/29): the
   shop's head is the shop's own colour all through, pinned under the search
   while you are inside its panel, and the next shop's head pushes it away;
   its offer boxes are outlined in the same colour and a wider gap
   separates shops than boxes. The numbers are CSS variables the local
   tuner tab (tune-home.js) moves. */
.store-section--stack {
  margin-block-end: var(--shop-gap, 32px);
  border-color: var(--store-color, var(--brand));
  border-block-start-width: var(--top-w, 4px);
}
.store-section--stack > .store-section__head {
  position: var(--stk-pos, static); inset-block-start: var(--header-h, 0px); z-index: 5;
  flex-wrap: nowrap; row-gap: 0;
  margin-block: -14px 10px; padding: 8px 14px;
  background: var(--store-color, var(--brand)); color: var(--store-on, #fff);
  border-block-end: 0;
  border-start-start-radius: 12px; border-start-end-radius: 12px;
}
.store-section--stack > .store-section__head .store-section__titles { flex: 1 1 0; }
.store-section--stack > .store-section__head .store-section__titles h2 {
  overflow: hidden; text-overflow: ellipsis; color: var(--store-on, #fff);
}
.store-section--stack > .store-section__head .store-section__name { color: var(--store-on, #fff); }
.store-section--stack > .store-section__head .store-section__meta { color: var(--store-on, rgb(255 255 255 / .88)); opacity: .88; }
.store-section--stack > .store-section__head .store-section__actions { flex: none; }
/* The heart and "store page" on white, so they read on any shop's colour. */
.store-section--stack > .store-section__head .store-section__page {
  background: #fff; color: var(--store-text, var(--store-color, var(--brand))); border-color: #fff; font-weight: 800;
}
.store-section--stack > .store-section__head .fav-btn,
.store-section--stack > .store-section__head .fav-btn.is-on {
  background: #fff; border-color: #fff;
}
.store-section--stack > .store-section__head .fav-btn:not(.is-on) { color: var(--text-muted); }
/* An offer box: outlined in the shop's colour, and its top row says how long
   is left and the dates on one side, the shop's small logo and name on the other. */
.tiles--stack .tile { border: var(--card-outline, 2px) solid var(--store-color, var(--brand)); }
.tile__top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; min-inline-size: 0;
  background: var(--store-color, #2f6f62); color: var(--store-on, #fff);
}
html:not([dir='rtl']) .tile__top { flex-direction: row-reverse; }
.tile__mini { display: flex; align-items: center; gap: 6px; min-inline-size: 0; color: var(--store-on, #fff); text-decoration: none; }
.tile__mini .avatar { flex: none; }
.tile__mini-name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__mini { flex: 0 1 auto; max-inline-size: 60%; }
.tile__when { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html:not([dir='rtl']) .tile__when { align-items: flex-start; }
.tile__when .badge { position: static; inset: auto; font-size: 12px; font-weight: 800; }
.tile__whenflags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
/* Boxes in a row stretch to the tallest; the button stays at the bottom of its own box. */
.tiles--stack .tile { display: flex; flex-direction: column; }
.tiles--stack .tile .tile__go { margin-block-start: auto; }
.tile__when .tile__range { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--store-on, #fff); }
/* The badges keep the colours they have everywhere else on the site; a white
   ring keeps a red "ends today" apart from a red shop's bar. */
.tile__top .badge { box-shadow: 0 0 0 2px #fff; }
/* The pictures fill the box: a card with a shorter top bar (no "new", no days
   left) beside a taller one showed a white gap above its button. */
.tiles--stack .tile .mosaic { border-radius: 0; flex: 1 1 auto; }
.store-section--stack > .store-section__head .store-section__titles h2 {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.store-section--stack > .store-section__head .store-section__actions { gap: 7px; }
.store-section--stack > .store-section__head .store-section__page { padding: 5px 10px; font-size: 12.5px; }
.tile__go {
  display: block; inline-size: 100%; padding: 13px 14px; border: 0; cursor: pointer;
  background: var(--store-color, var(--brand)); color: var(--store-on, #fff); font: inherit; font-size: 15px; font-weight: 800;
}
.tile__go:hover { filter: brightness(1.08); }
/* "+6 more offers": the full width of the shop's panel, in the shop's colour. */
.store-section--stack > .grid__more {
  display: block; inline-size: calc(100% - 28px); margin: 12px 14px 0; padding: 14px 16px;
  border: 0; border-radius: 12px; background: var(--store-color, var(--brand)); color: var(--store-on, #fff);
  font-size: 15px; font-weight: 800; text-align: center;
}
.store-section--stack > .grid__more span { color: var(--store-on, #fff); }
.store-section--stack > .grid__more:hover { filter: brightness(1.08); }

/* ------------------------------------------- a department's page (dept.html)
   The owner, 2026-10-30: every shop's products in one department, two to a
   row on a phone, the department's groups as chips on top. The numbers are
   CSS variables the local tuner tab (tune-home.js, "dept") moves. */
.dept-page { max-inline-size: 1200px; margin-inline: auto; padding: 12px clamp(12px, 3vw, 28px) 40px; }
.dept-page__title { margin: 4px 0 2px; font-size: 24px; font-weight: 800; }
.dept-page__sub { margin: 0 0 10px; color: var(--text-muted); font-size: 13.5px; font-weight: 600; }
.dept-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px 12px; }
.dept-chips::-webkit-scrollbar { display: none; }
/* A computer has no finger to slide the chips: they wrap onto more rows
   instead (the owner, 2026-10-30 - Food Cupboard's chips ran off the edge). */
@media (hover: hover) and (pointer: fine), (min-width: 700px) {
  .dept-chips { flex-wrap: wrap; overflow-x: visible; }
}
.dchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 7px 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.dchip.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
.dchip__n { font-size: 12px; font-weight: 700; opacity: .7; }
.dshop {
  margin-block-end: var(--shop-gap, 28px); border: 2px solid var(--store-color, var(--brand));
  border-radius: 16px; overflow: hidden; background: var(--surface);
}
.dshop__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--store-color, var(--brand)); color: var(--store-on, #fff);
}
.dshop__who { display: flex; align-items: center; gap: 8px; min-inline-size: 0; color: var(--store-on, #fff); text-decoration: none; }
.dshop__name { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dshop__n { flex: none; font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .9); }
.pgrid {
  display: grid; gap: var(--pc-gap, 10px); padding: 12px;
  grid-template-columns: repeat(var(--pc-cols, 2), minmax(0, 1fr));
}
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pcard {
  display: flex; flex-direction: column; min-inline-size: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface);
}
.pcard[hidden] { display: none; }
.pcard__open { display: block; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.pcard__pic { display: grid; place-items: center; block-size: var(--pc-pic, 130px); overflow: hidden; }
.pcard__pic img, .pcard__pic canvas { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.pcard__pic--crop { grid-template: 100% / 100%; }
.pcard__pic--crop canvas { min-inline-size: 0; min-block-size: 0; }
.pcard__pic--class img { max-inline-size: 70%; max-block-size: 70%; }
.pcard__icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; color: var(--text-muted); }
.pcard__icon svg { inline-size: 100%; block-size: 100%; }
.pcard__body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 6px; }
.pcard__name {
  margin: 0; font-size: var(--pc-name, 13.5px); font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__pack { margin: 0; font-size: 12px; color: var(--text-muted); }
.pcard__price { margin: auto 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pcard__price strong { font-size: 16px; font-weight: 800; color: var(--store-text, var(--store-color, var(--text))); }
.pcard__price s { font-size: 12px; color: var(--text-muted); }
.pcard__add { display: flex; align-items: center; gap: 6px; padding: 0 10px 10px; }
.pcard__addbtn {
  flex: 1; min-block-size: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--store-color, var(--brand)); color: var(--store-on, #fff); font: inherit; font-size: 14.5px; font-weight: 800;
}
.pcard__addbtn[hidden], .pcard__step[hidden], .pcard__n[hidden] { display: none; }
.pcard__step {
  flex: none; inline-size: 40px; block-size: 40px; border: 2px solid var(--store-color, var(--brand));
  border-radius: 10px; background: var(--surface); color: var(--store-text, var(--store-color, var(--text)));
  font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; line-height: 1;
}
.pcard__n { flex: 1; text-align: center; font-size: 15px; font-weight: 800; }
.dshop__more {
  display: block; inline-size: calc(100% - 24px); margin: 0 12px 12px; padding: 13px 16px;
  border: 0; border-radius: 12px; cursor: pointer; background: var(--store-color, var(--brand)); color: var(--store-on, #fff);
  font: inherit; font-size: 15px; font-weight: 800;
}
/* The browse panel's small pictures on the chips (the owner, 2026-10-30). */
.chip--ic { display: inline-flex; align-items: center; gap: 6px; }
.chip__ic, .dchip__ic {
  flex: none; inline-size: 22px; block-size: 22px; object-fit: contain;
  border-radius: 6px; background: #fff; padding: 1px;
}
.dchip { padding-inline-start: 8px; }
.dchip:not(:has(.dchip__ic)) { padding-inline-start: 14px; }

/* ------------------------------------------------ search (the owner, 2026-10-30)
   The suggestions under the search box, and the search page's rows: picture
   at the start, name / shop / price in the middle, "add" at the end. */
.suggest {
  position: fixed; z-index: 1500; max-block-size: min(60vh, 440px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .18); padding: 4px;
  overscroll-behavior: contain; touch-action: pan-y;
}
.suggest[hidden] { display: none; }
.suggest__row {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 50px;
  padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--text);
  font: inherit; text-align: start; cursor: pointer;
}
.suggest__row:hover, .suggest__row.is-at { background: var(--surface-2); }
.suggest__ic { flex: none; inline-size: 30px; block-size: 30px; object-fit: contain; }
.suggest__words { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.suggest__text { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__sub { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.suggest__n { flex: none; font-size: 12px; font-weight: 700; color: var(--text-muted);
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.sgroup { margin-block-end: 22px; }
.sgroup__head { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 18px; font-weight: 800; }
.sgroup__ic { inline-size: 28px; block-size: 28px; object-fit: contain; }
.sgroup__n { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.srows { display: grid; gap: var(--pr-gap, 8px); }
@media (min-width: 900px) { .srows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prow {
  display: flex; align-items: center; gap: 10px; padding: 8px; min-inline-size: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  border-inline-start: 4px solid var(--store-color, var(--brand));
}
.prow[hidden] { display: none; }
.prow__open { flex: none; border-radius: 8px; overflow: hidden; }
.prow .pcard__pic { inline-size: var(--pr-pic, 84px); block-size: var(--pr-pic, 84px); }
.prow__mid { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.prow__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.prow__shop { display: inline-flex; align-items: center; gap: 5px; min-inline-size: 0; color: var(--text-muted); text-decoration: none; }
.prow__shopname { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pcard__price { margin: 0; }
.prow .pcard__add { flex: none; flex-direction: column; padding: 0; gap: 4px; inline-size: 76px; }
.prow .pcard__add.is-on { flex-direction: row; inline-size: auto; }
.prow .pcard__addbtn { inline-size: 100%; }
.sgroup__more { inline-size: 100%; margin: 10px 0 0; }

/* A press before Facebook's player has come (reels.js): a ring says it was heard. */
.reel__touch--early.is-on::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 44px; block-size: 44px; margin: -22px; border: 4px solid rgba(255, 255, 255, .35); border-block-start-color: #fff;
  border-radius: 50%; animation: reel-early .8s linear infinite; }
@keyframes reel-early { to { transform: rotate(360deg); } }
/* Settled, on a computer: a press goes to Facebook's own player, our buttons stay on top. */
.reel__touch--through { pointer-events: none; }
.reel__touch--through :is(.reel__sound, .reel__full) { pointer-events: auto; }
.reel__wait--over { z-index: 1; }