/* mommy noa · the public storefront (v2).
   The dashboard's visual language (app/static/style.css) carried over: the
   same tokens, the same fonts, the same card/chip/button/drawer shapes.
   Phone first; the desktop layout is ADDED at min-width:900px at the END of
   this file and never by changing a shared rule. RTL by default;
   [dir="ltr"] on <html> flips it. */

:root{
  --bg:#FFF5F4;
  --card:#FFFFFF;
  --ink:#33202E;
  /* A display face for every heading (2026-10-20). The background and the
     card shadows stay as they were -- the owner's call the same day. */
  --display:'Suez One','Assistant',Georgia,serif;
  --muted:#7A5E70;          /* 5.35:1 on --bg (was #8A6E80, 4.24:1) */
  --primary:#E84D74;        /* pictures, borders, large titles only */
  --primary-ink:#C8335B;    /* white text on it: 5.1:1 (the buttons) */
  --primary-deep:#B02A50;   /* pink text on --primary-soft: 5.25:1 */
  --primary-soft:#FCE3EA;
  --mint:#1FA487;
  --mint-ink:#117A63;       /* white on it 5.26:1, on --mint-soft 4.62:1 */
  --mint-soft:#DFF5EF;
  --sun:#FFB63D;
  --sun-ink:#8A5300;
  --sun-soft:#FFF1D6;
  --line:#F3DCE2;
  --danger:#D64545;
  --radius:18px;
  --shadow:0 6px 18px rgba(232,77,116,.10);
  --shadow-lift:0 12px 28px rgba(232,77,116,.18);
  --bar-h:58px;
  --tabs-h:44px;             /* her tabs under the bar: a 44px tab */
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + var(--tabs-h) + 8px)}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:calc(16px*var(--fs,1));line-height:1.5;min-height:100dvh;
  padding-bottom:calc(var(--safe-b) + 24px);
}
/* The floating cart bar must never sit on top of the last row. */
body.has-cartbar{padding-bottom:calc(var(--safe-b) + 92px)}
button,a,label,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* A button does not inherit the page's font: a badge inside one was drawn in
   Arial. */
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Focus the PAGE moved -- a drawer's heading, the grid a tap landed in -- is
   not a control, and on an iPhone it drew a ring anyway: WebKit matches
   :focus-visible on script focus, and a tap on a button (which Safari never
   focuses) focuses the nearest [tabindex=-1] ancestor. Seen on the live site
   2026-09-25: every product drawer opened with a pink box round the product's
   name that read as a text field, and a tap on a cart button drew one round
   the whole grid. The ring stays for someone steering by keyboard (html.kbd,
   set on Tab and cleared on the next pointer). */
[tabindex="-1"]:focus-visible{outline:none}
.kbd [tabindex="-1"]:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.wrap{max-width:640px;margin:0 auto;padding:0 14px}
[hidden]{display:none !important}
/* Pinned to its containing block's corner: at its STATIC position, a label
   inside a sideways-scrolling row (the coupon strip, the circles) escaped the
   row and widened the whole page to 1,182px on a 390px phone -- which a phone
   answers by zooming the site out (2026-09-25, caught on the preview). */
/* The crawler text (index.html #crawl): removed by store.js on boot; until
   then, quiet and at the bottom, never a flash of a second page. */
.crawl{max-width:720px;margin:24px auto;padding:0 16px;color:var(--muted,#7A5E70);font-size:calc(13px*var(--fs,1));line-height:1.6}
.crawl h1,.crawl h2{font-size:calc(15px*var(--fs,1));margin:0 0 6px}
.crawl a{color:inherit}
html.mn-js .crawl{display:none}
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
.circle,.net-btn,.cp-go{position:relative}
/* For a keyboard: straight to the products, past the bar and the filters. */
.skip{
  position:absolute;top:-100px;inset-inline-start:8px;z-index:100;background:var(--ink);color:var(--card);
  padding:12px 16px;border-radius:12px;font-weight:700;text-decoration:none;
}
.skip:focus{top:calc(var(--safe-t) + 8px)}
/* An English visitor's words wait (early.js) for store.js to write them. */
/* early.js: a cross-origin frame of the shop never paints (clickjacking). */
html.mn-framed{display:none!important}
html.i18n-wait [data-i18n]{visibility:hidden}
html.i18n-wait input::placeholder{color:transparent}
svg{display:block}

/* ══════════ the bar (sticky) ══════════ */
.bar{
  position:sticky;top:0;z-index:30;
  padding-top:var(--safe-t);
  /* Solid, not a blur of what scrolls under it: the blur is redrawn on every
     frame of a scroll -- with a video playing under it, too -- and was the
     likeliest cause of "lags by scrolling" on an iPhone (2026-09-27). */
  background:rgba(255,236,240,.97);
  border-bottom:1px solid transparent;
}
.bar.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 14px rgba(232,77,116,.08)}
.bar-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--bar-h)}
.bar-brand{display:flex;align-items:center;gap:6px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--display);font-weight:400;
  font-size:calc(20px*var(--fs,1));letter-spacing:.1px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand em{font-style:normal;color:var(--primary-ink)}
/* Her face beside the name: the fastest proof whose place this is. */
.brand-face{width:32px;height:32px;border-radius:999px;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--primary)}
/* A full bar on a phone (store.js fitBar): her name steps aside and her face
   stays -- still the link's name for a screen reader; with no face, the
   search icon steps aside instead. */
.bar.snug .bar-actions{gap:3px}
.bar.snug .bar-brand{gap:2px}
.bar.snug .brand{font-size:calc(16px*var(--fs,1));gap:6px}
.bar.tight .brand > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar.tight-search #searchBtn{display:none}
.menubtn{box-shadow:none;background:transparent;padding:0}
.menubtn svg{width:26px;height:26px}
/* ══════════ her tabs: under the bar, on every page, at every width ══════════
   A phone scrolls them sideways, and the tab cut at the edge says there are
   more. The page she is on is the filled one. */
.tabs-row{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;padding-block:0}
.tabs-row::-webkit-scrollbar{display:none}
.tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 12px;color:var(--muted);text-decoration:none;font-weight:600;font-size:calc(15px*var(--fs,1));line-height:1;white-space:nowrap}
.tab.latin{font-size:calc(14.5px*var(--fs,1));letter-spacing:0}
.tab::before{content:'';position:absolute;inset-inline:12px;bottom:3px;height:2.5px;border-radius:2px;
  background:var(--primary);transform:scaleX(0)}
.tab[aria-current="page"]{color:var(--ink);font-weight:700}
.tab[aria-current="page"]::before{transform:scaleX(1)}
/* Inside AliExpress: one switch, three equal segments, at the top of each of
   its pages -- the overview, what people buy most, her videos. */
.ali-sub{margin:6px 0 12px;max-width:460px}
.ali-sub-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:3px;
  background:var(--card);border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.ali-seg{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:calc(14.5px*var(--fs,1));line-height:1;text-align:center}
.ali-seg[aria-current="page"]{background:var(--primary-soft);color:var(--primary-deep);box-shadow:0 0 0 1.5px var(--primary)}
.ali-sub[hidden]{display:none}
/* The other language, as a quiet word beside the name -- not a fourth box
   among the icons. Still a 44px target. */
.langbtn{
  border:0;background:none;color:var(--muted);font-family:inherit;font-size:calc(13px*var(--fs,1));font-weight:600;
  min-height:44px;min-width:44px;padding:0 8px;cursor:pointer;border-radius:10px;
}
.bar-actions{display:flex;gap:6px}
.iconbtn{
  position:relative;border:0;background:var(--card);border-radius:12px;
  min-width:44px;min-height:44px;cursor:pointer;font-family:inherit;font-size:calc(14px*var(--fs,1));
  font-weight:700;color:var(--ink);box-shadow:var(--shadow);
  display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;
}
.iconbtn svg{width:22px;height:22px}
.cartbtn{color:var(--primary)}
.cartbtn b{
  position:absolute;top:-5px;inset-inline-end:-5px;
  background:var(--primary);color:var(--on-fill,#fff);border-radius:999px;font-size:calc(11.5px*var(--fs,1));
  min-width:20px;height:20px;line-height:20px;padding:0 5px;text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}

/* ══════════ the top of a page: her greeting, a page's title, the search ══════════ */
.top{background:linear-gradient(180deg,#FFE3EA 0%,#FFF5F4 100%);padding:10px 0 0}
.top-search{margin:0 0 10px}
.bar-search{display:none}
.hello{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.hello-face{width:54px;height:54px;border-radius:999px;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.hello-text{margin:0;font-size:calc(14.5px*var(--fs,1));line-height:1.35;color:var(--muted)}
/* Her greeting is a HEADING, in the display face: the page says whose it is
   before it says anything else. */
.hello-text b{display:block;font-family:var(--display);font-weight:400;color:var(--ink);font-size:calc(22px*var(--fs,1));line-height:1.15;margin:0 0 2px}
/* Nothing in her greeting may move once drawn (2026-11-01, PageSpeed: the
   greeting grew a line when her bio and face arrived, 0.06 of the CLS). Her
   face keeps its place from the first paint -- a soft circle until the photo
   is known -- and on a phone the text holds her name and two lines of bio. */
.brand-face:not([src]),.hello-face:not([src]){background:var(--primary-soft)}
@media (max-width:899px){
  .hello-text{min-height:calc((22px*1.15 + 2px + 14.5px*1.35*2)*var(--fs,1))}
}
.grid-head{margin:0 0 6px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:calc(13px*var(--fs,1));color:var(--muted);margin:0 0 2px}
.crumbs a{color:var(--muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.6}
.page-title,.page-h{
  font-family:var(--display);font-weight:400;
  font-size:calc(28px*var(--fs,1));line-height:1.15;color:var(--ink);margin:0;
}
.page-sub{margin:0 0 12px;color:var(--muted);font-size:calc(14.5px*var(--fs,1))}
/* A grid's title and the order it is sorted in, on ONE row. */
.grid-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grid-title-row .page-title{min-width:0}
/* The search: big, round and white -- the one field on the page. */
.search{display:flex;align-items:center;position:relative;flex:1 1 auto;min-width:0}
.search svg{position:absolute;inset-inline-start:16px;width:20px;height:20px;color:var(--ink);opacity:.55;pointer-events:none}
.search input{
  width:100%;border:1.5px solid var(--line);border-radius:999px;min-height:48px;
  padding:10px 18px;padding-inline-start:46px;font-family:inherit;font-size:calc(16px*var(--fs,1));background:var(--card);color:var(--ink);
  box-shadow:0 4px 14px rgba(232,77,116,.08);
}
.search input::placeholder{color:#9A8592}
.search input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* ══════════ what this site gives (2026-10-20) ══════════
   Four cards before any product -- her codes, her ready lists, her videos,
   her price alerts: the page opens on what only she offers, not on a feed. */
/* Until store.js has drawn the rows between the value cards and the
   categories (index.html, "wait"), nothing under the cards shows and the
   home holds a screen of room: a placeholder there was shoved off the
   screen by those rows (CLS 0.41 of 0.48, 2026-11-01). */
.home.wait{min-height:100vh}
.home.wait > :not(.value):not(.app-hello):not(h1){display:none}
.value{margin:14px 0 0}
.value-title{margin:0 2px 8px;font-family:var(--display);font-weight:400;font-size:calc(19px*var(--fs,1));line-height:1.2}
.value-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vcard{display:flex;align-items:center;gap:9px;min-height:72px;padding:10px 11px;border-radius:16px;
  background:var(--card);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;min-width:0}
.vcard.skel{box-shadow:none;background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
.vc-ico{flex:none;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary-deep)}
.vc-ico svg{width:21px;height:21px}
.vcard.v-reels .vc-ico{background:#EFE3F0;color:#5A2A4B}
.vcard.v-alerts .vc-ico{background:var(--mint-soft);color:var(--mint-ink)}
.vcard.v-lists .vc-ico{background:var(--sun-soft);color:var(--sun-ink)}
.vcard.v-comm .vc-ico{background:#E3EEFB;color:#2A5A8E}
.vc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vc-txt b{font-size:calc(14.5px*var(--fs,1));line-height:1.25}
.vc-txt small{font-size:calc(12.5px*var(--fs,1));line-height:1.3;color:var(--muted)}
.vcard:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* A row's heading may carry one line of why under it (her picks). */
.rail-sub{margin:2px 0 0;font-size:calc(13.5px*var(--fs,1));line-height:1.35;color:var(--muted)}
.cats-sec .circles{padding-top:2px}
/* Her picks are the page's main shelf: bigger cards than the other rows. */
.picks-rail .mini{flex-basis:168px}
.rail-head .band-h{min-width:0}

/* ══════════ banner (her message, from the board) ══════════ */
.banner{
  display:flex;align-items:center;gap:6px;margin:8px 0 0;
  background:var(--card);color:var(--ink);border-radius:14px;
  padding:0 4px 0 12px;font-weight:500;font-size:calc(13.5px*var(--fs,1));line-height:1.45;
  border:1px solid var(--line);border-inline-start:3px solid var(--sun);min-height:44px;
}
/* Two lines until a tap: her message can run to four with an emoji in each. */
.banner span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  cursor:pointer;margin-block:8px}
.banner.open span{display:block;-webkit-line-clamp:unset}
[dir="rtl"] .banner{padding:0 12px 0 4px}
.banner span{flex:1;min-width:0}
.banner-x{
  flex:none;border:0;background:transparent;color:inherit;font-size:calc(15px*var(--fs,1));
  width:44px;height:44px;border-radius:10px;cursor:pointer;
}

/* ══════════ categories and quick filters ══════════ */
/* Chips scroll sideways rather than wrap on a phone: with ~12 categories a
   wrapped row is three lines of chrome above the first product. Her quick
   filters ride the SAME row, ahead of the categories -- they had a row of
   their own, and so did the sort. */
.chiprow{
  display:flex;align-items:center;gap:6px;margin:10px 0 0;padding:4px 3px;min-height:52px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.chiprow::-webkit-scrollbar{display:none}
.cats{
  display:flex;gap:6px;margin:10px 0 0;padding:4px 3px;min-height:52px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.cats::-webkit-scrollbar{display:none}
.cats button{
  flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;min-height:44px;padding:6px 14px;font-family:inherit;
  font-size:calc(14px*var(--fs,1));font-weight:600;cursor:pointer;white-space:nowrap;scroll-snap-align:start;
}
.cats button b{font-weight:600;opacity:.8;font-size:calc(11.5px*var(--fs,1));margin-inline-start:4px;unicode-bidi:isolate}
.cats button[aria-pressed="true"]{background:var(--primary-ink);border-color:var(--primary-ink);color:var(--on-fill,#fff)}
.cats button[aria-pressed="true"] b{opacity:.9}
.chiprow > .cats{margin:0;padding:0;min-height:0;overflow:visible;flex:none}
.cats.subs{margin-top:2px;min-height:0}
.cats button img{width:24px;height:24px;border-radius:999px;object-fit:cover;margin-inline-end:6px;
  vertical-align:middle;background:var(--bg)}
.cats button{display:inline-flex;align-items:center}
/* Her Terminal X items by size (2026-10-16): the category chips' own look. */
.store-sizes{margin:0 0 8px}
.store-sizes .cats{margin-top:0}
.size-row-label{flex:none;align-self:center;font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--muted);
  padding-inline-end:2px}
.size-count{margin:4px 2px 0;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--ink)}
.empty-line{color:var(--muted);font-size:calc(14px*var(--fs,1));margin:10px 0}
.dr-sizes{margin:8px 0 0;font-size:calc(14px*var(--fs,1));line-height:1.6}
.dr-sizes b{font-weight:700}
.dr-sizes .sz{display:inline-block;min-width:28px;padding:1px 8px;margin:2px 0 2px 4px;border:1px solid var(--line);
  border-radius:999px;text-align:center;unicode-bidi:isolate}
.cats.subs button{font-size:calc(13px*var(--fs,1));background:var(--bg)}
.cats.subs button[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary-deep);border-color:var(--primary-soft)}
/* A search that names a category: the category itself, as a way in -- ONE
   row that scrolls sideways, led by a word saying what its chips are. */
.cat-hits{display:flex;align-items:center;gap:6px;margin:10px 0 0;padding:4px 3px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.cat-hits::-webkit-scrollbar{display:none}
.hits-label{flex:none;font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--muted);scroll-snap-align:start}
.cat-hits a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary-deep);font-weight:700;font-size:calc(14px*var(--fs,1));text-decoration:none;
  white-space:nowrap;scroll-snap-align:start}
.cat-hits a img{width:24px;height:24px;border-radius:999px;object-fit:cover;background:var(--bg)}
.quick{display:flex;gap:6px;align-items:center;flex:none;padding-inline-end:8px;border-inline-end:1px solid var(--line)}
.qf{
  flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  min-height:44px;padding:6px 14px;font-family:inherit;font-size:calc(14px*var(--fs,1));font-weight:600;cursor:pointer;
  white-space:nowrap;scroll-snap-align:start;
}
.qf[aria-pressed="true"]{background:var(--mint-soft);border-color:var(--mint-ink);color:var(--mint-ink)}
.sortsel{
  flex:none;border:1px solid var(--line);border-radius:999px;min-height:44px;max-width:42%;
  padding:6px 14px;font-family:inherit;font-size:calc(16px*var(--fs,1));font-weight:600;background:var(--card);color:var(--ink);
}
/* A search hides the category chips: the price-drop chip alone keeps no
   divider after it. */
.chiprow:not(:has(> .cats:not([hidden]))) .quick{border-inline-end:0;padding-inline-end:0}
/* Said for a search or a filter ("12 מוצרים"); empty -- and gone -- on the
   plain shop, whose chips already carry the counts. */
.count{margin:10px 2px 0;font-size:calc(13px*var(--fs,1));color:var(--muted)}
.count:empty{display:none}

/* ══════════ rows (a category, the most bought, more like this) ══════════ */
.sec-title{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:calc(21px*var(--fs,1));line-height:1.2}
.rail-sec{margin:18px 0 0}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 6px}
.rail-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:calc(21px*var(--fs,1));line-height:1.2;min-width:0}
.rail-head h2 a{color:inherit;text-decoration:none}
.rail-all{flex:none;font-size:calc(14px*var(--fs,1));font-weight:700;color:var(--primary-deep);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
/* ONE glyph for both languages: "›" is mirrored in right-to-left text, so it
   already points LEFT on a Hebrew page. Swapping it for "‹" there flipped it
   twice -- every "see all" pointed right (owner, 2026-10-19). */
.rail-all::after{content:"›";margin-inline-start:4px}
/* A laptop's arrows on a row that has more than it shows (store.js draws them
   only with a fine pointer on a wide screen). */
.rail-arrows{display:inline-flex;gap:6px;margin-inline-start:auto}
.rail-arrow{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.rail-arrow svg{width:18px;height:18px}
[dir="rtl"] .rail-arrow svg{transform:scaleX(-1)}
.rail-head .rail-arrows + .rail-all{margin-inline-start:4px}
.mini .badges{top:6px;inset-inline-start:6px;max-width:calc(100% - 56px)}
.mini .badge{font-size:calc(10.5px*var(--fs,1));padding:2px 7px}
.mini.skel{height:196px;box-shadow:none;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
/* The home page ends in the whole shop, never in nothing. */
/* The page's one call to action: filled, with three of her best sellers and
   an arrow -- the one loud thing at the foot of a calm page. */
.home-all{display:flex;align-items:center;gap:12px;margin:24px 0 6px;padding:14px 16px;min-height:76px;
  border-radius:18px;background:linear-gradient(135deg,var(--primary-ink),var(--primary-deep));color:var(--on-fill,#fff);
  text-decoration:none;box-shadow:0 10px 24px rgba(160,30,75,.28)}
.ha-pics{display:flex;flex:none}
.ha-pics:empty{display:none}
.ha-pics img{width:44px;height:44px;border-radius:999px;object-fit:cover;border:2px solid #fff;background:#fff;display:block}
.ha-pics img+img{margin-inline-start:-14px}
.ha-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ha-txt b{font-size:calc(17px*var(--fs,1));line-height:1.25}
.ha-txt small{font-size:calc(13px*var(--fs,1));color:rgba(255,255,255,.88)}
.ha-go{flex:none;width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.ha-go svg{width:20px;height:20px}
[dir="rtl"] .ha-go svg{transform:scaleX(-1)}
.home-all:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
/* Her videos as a row: the 9:16 covers, a fixed width each. */
.reel-rail .reel-tile{flex:0 0 118px;scroll-snap-align:start}
.reel-rail .reel-label{font-size:calc(12px*var(--fs,1));padding:20px 8px 8px}
/* Her videos on the home page: a band of their own, so the page reads as
   sections rather than one column of identical rows, with covers big enough
   to see what is in them (the 118px row was a strip of thumbnails). */
.reel-band{margin:22px -14px 0;padding:16px 14px 10px;color:#fff;
  background:linear-gradient(160deg,#3B2236 0%,#5A2A4B 100%)}
.reel-band .rail-head{align-items:flex-end}
.reel-band .band-h{min-width:0}
.reel-band .rail-head h2{color:#fff}
.band-sub{margin:2px 0 0;font-size:calc(13.5px*var(--fs,1));line-height:1.35;color:rgba(255,255,255,.86)}
.reel-band .rail-all{color:#FFD3DF}
.reel-band .rail{margin:0 -14px;padding:4px 14px 12px;scroll-padding-inline:14px}
.reel-band .reel-tile{flex:0 0 clamp(148px,41vw,200px);box-shadow:0 10px 24px rgba(0,0,0,.32)}
.reel-band .reel-tile.skel{background:linear-gradient(100deg,#51314A 30%,#6A3D5E 50%,#51314A 70%) 0 0/200% 100%}
/* Her ▶ / ⏸ for the videos that play by themselves: beside the band's title
   and the page's. A 44px target, quiet until wanted. */
.vid-auto{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.vid-auto svg{width:16px;height:16px}
.reel-band .vid-auto{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff}
.reel-band .rail-head .vid-auto{margin-inline-start:auto}
.reel-band .rail-head .vid-auto ~ .rail-arrows{margin-inline-start:0}
.page-h-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-h-row .page-h{min-width:0}
/* The rest of her categories, as an index of photo cards under the rows. */

/* ══════════ the category circles (Instagram highlights) ══════════ */
.circles{
  display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 6px;margin:0 -2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.circles::-webkit-scrollbar{display:none}
.circle{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;
  color:var(--ink);scroll-snap-align:start;min-width:0}
.circle .ring{position:relative;width:68px;height:68px;border-radius:999px;padding:3px;display:grid;place-items:center;
  background:var(--card);box-shadow:0 0 0 1.5px var(--line);overflow:hidden}
.circle .ring img{width:100%;height:100%;border-radius:999px;object-fit:cover;display:block;background:var(--bg)}
.circle .ring .ph{font-size:calc(26px*var(--fs,1))}
/* Something new since her last visit: the ring Instagram uses for a story. */
.circle.fresh .ring{box-shadow:0 0 0 2.5px var(--primary)}
.circle.all .ring{background:var(--primary-soft)}
.circle b{font-size:calc(12.5px*var(--fs,1));font-weight:600;line-height:1.2;text-align:center;max-width:76px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.circle.skel{height:96px;flex:0 0 68px;border-radius:999px;background:none}
.circle.skel::before{content:"";display:block;width:68px;height:68px;border-radius:999px;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
.more-cats{margin:22px 0 0}

.rail{
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.mini{
  position:relative;flex:0 0 136px;scroll-snap-align:start;background:var(--card);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;
}
.mini-img{display:block;width:100%;aspect-ratio:1/1;border:0;padding:0;background:var(--bg);cursor:pointer}
.mini-img img{width:100%;height:100%;object-fit:cover;display:block}
.mini-img .ph{display:grid;place-items:center;height:100%;font-size:calc(32px*var(--fs,1))}
.mini-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  border:0;background:none;padding:6px 8px 8px;margin:0;font-family:inherit;font-size:calc(13px*var(--fs,1));
  font-weight:700;line-height:1.3;color:var(--ink);text-align:start;cursor:pointer;width:100%;
}

/* ══════════ the grid ══════════ */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
/* position:relative is load-bearing: the cart toggle is absolutely positioned
   and sits OUTSIDE .tile-img in the markup. */
.tile{
  position:relative;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
}
.tile-img{
  position:relative;aspect-ratio:1/1;cursor:pointer;
  border:0;padding:0;width:100%;display:block;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%;
}
.tile-img img{width:100%;height:100%;object-fit:cover;display:block;position:relative}
/* Inside a card with overflow:hidden an outside ring shows one edge. */
.tile-img:focus-visible,.mini-img:focus-visible{outline-offset:-3px}
.tile-img .ph{display:grid;place-items:center;width:100%;height:100%;font-size:calc(40px*var(--fs,1))}
/* The badges never run under the cart button beside them (an English
   "Popular with followers" did, by 32px at 360px). */
.badges{
  position:absolute;top:8px;inset-inline-start:8px;display:flex;flex-direction:column;gap:4px;
  align-items:flex-start;max-width:calc(100% - 66px);
}
.badge{
  font-size:calc(11.5px*var(--fs,1));font-weight:700;border-radius:999px;padding:3px 8px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--mint-ink);color:var(--on-fill,#fff);box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.badge.pop{background:var(--sun);color:#6B4000}
.badge.top{background:var(--ink);color:var(--card)}
.badge.drop{background:var(--mint-ink)}
.badge.new{background:var(--primary-ink)}
.badge.pick{background:#fff;color:var(--primary-deep);box-shadow:0 2px 6px rgba(51,32,46,.16)}
.cart-toggle{
  position:absolute;top:6px;inset-inline-end:6px;z-index:2;border:0;border-radius:999px;
  width:44px;height:44px;background:var(--primary-soft);color:var(--primary-deep);
  cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(51,32,46,.14);
}
.cart-toggle svg{width:21px;height:21px}
.cart-toggle[aria-pressed="true"]{background:var(--primary);color:var(--on-fill,#fff)}
/* Her heart (store.js LIKED block) and the bag are told apart at a glance
   (owner, 2026-10-20: two like white circles down one edge "is wrong"):
   the heart is a small WHITE circle in the photo's TOP corner, where every
   shop puts it; the bag a SOFT-PINK circle in its BOTTOM corner. The heart's
   target is still 44px, around a 34px circle. Empty, an outline; liked, it
   fills in Instagram's red, the video heart's own. */
.tile-pic{position:relative}
.heart-toggle{
  position:relative;border:0;padding:0;cursor:pointer;border-radius:999px;background:none;
  width:44px;height:44px;display:grid;place-items:center;color:var(--ink);
}
.heart-toggle::before{
  content:"";position:absolute;inset:5px;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(51,32,46,.14);
}
.heart-toggle svg{position:relative;width:19px;height:19px;fill:none}
.heart-toggle[aria-pressed="true"]{color:#E0245E}
.heart-toggle[aria-pressed="true"] svg{fill:currentColor}
/* The ring follows the circle, inside it: a tile's edge cut the outside one. */
.heart-toggle:focus-visible{outline-offset:-4px}
.tile-pic .heart-toggle{position:absolute;top:1px;inset-inline-end:1px;z-index:2}
.tile-pic .cart-toggle{top:auto;bottom:6px}
/* The product sheet: the heart beside the product's name -- the photo's top
   corner holds the sheet's ✕, and its action bar has no room for a third. */
.dr-title{display:flex;align-items:flex-start;gap:6px;margin:12px 0 2px}
.dr-title .dr-name{margin:0;flex:1;min-width:0;padding-top:8px}
.heart-toggle.name-heart{flex:none}
/* A heart emptied on /likes keeps its tile, faded: no longer liked, and one
   tap brings it back (the heart stays at full strength). */
#likesGrid .tile.unliked .tile-img,#likesGrid .tile.unliked .tile-body,#likesGrid .tile.unliked .cart-toggle,
.reel-wrap.unliked .reel-tile{opacity:.45}
.reel-wrap{position:relative}
.reel-wrap .heart-toggle{position:absolute;bottom:1px;inset-inline-end:1px;z-index:3}
.reel-wrap .reel-label{padding-inline-end:56px}
.tile-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;flex:1}
/* dir="auto": with no Hebrew name the seller's English line shows, and laid
   out RTL its ellipsis lands at the START of the second line. */
.tile-name{
  margin:0;font-size:calc(14px*var(--fs,1));font-weight:700;line-height:1.3;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  border:0;background:none;padding:0;font-family:inherit;color:var(--ink);text-align:start;
}
.tile-meta{margin:0;font-size:calc(12px*var(--fs,1));color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;min-height:18px}
.tile-meta span{white-space:nowrap}

/* loading placeholders -- and, while the first page loads, a grid tall
   enough that the footer does not flash up and get pushed away */
.grid[aria-busy="true"]{min-height:80vh;align-content:start}
.tile.skel{box-shadow:none;background:var(--card)}
.skel-img,.skel-line{background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
.skel-img{aspect-ratio:1/1}
.skel-line{height:12px;border-radius:6px;margin:10px 10px 0}
.skel-line.short{width:55%;margin-bottom:12px}
/* The home's category rows while their answer is on its way (loadHome). */
.rail-sec.skel .rail-head .skel-line{width:38%;height:18px;margin:4px 0}

/* ══════════ buttons ══════════ */
.btn{
  border:0;border-radius:12px;min-height:44px;padding:10px 15px;
  font-family:inherit;font-size:calc(15px*var(--fs,1));font-weight:700;cursor:pointer;
  background:var(--primary-ink);color:var(--on-fill,#fff);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn svg{width:19px;height:19px}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.wide{width:100%}
.btn.big{min-height:54px;font-size:calc(16px*var(--fs,1))}
.btn.small{min-height:44px;padding:6px 12px;font-size:calc(14px*var(--fs,1))}
/* On a tile the buy button is soft: forty solid pink bars were a wall the
   pictures had to compete with. Solid again under the pointer. */
.btn.buy{margin-top:auto;background:var(--primary-soft);color:var(--primary-deep);min-height:44px}
.linkbtn{
  border:0;background:none;color:var(--muted);font-family:inherit;font-size:calc(14px*var(--fs,1));
  text-decoration:underline;cursor:pointer;padding:12px;min-height:44px;display:block;margin:6px auto 0;
}
.xbtn{
  flex:none;border:0;border-radius:10px;width:44px;height:44px;background:var(--bg);
  color:var(--muted);font-size:calc(14px*var(--fs,1));cursor:pointer;
}
.more{margin:16px auto 0;display:flex}
.sentinel{height:1px}
.empty,.setup,.err{
  background:var(--card);border-radius:14px;padding:22px;text-align:center;
  color:var(--muted);box-shadow:var(--shadow);margin:14px 0;
}
.err{color:var(--danger)}
.err p{margin:0 0 10px}
.empty p{margin:0}
.empty .btn{margin-top:12px}
.foot{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:calc(12.5px*var(--fs,1));color:var(--muted);text-align:center}
/* The page ends on her name, like a shop's own footer. */
.foot-brand{display:inline-block;margin:0 0 14px;font-family:var(--display);font-size:calc(26px*var(--fs,1));line-height:1.1;
  color:var(--ink);text-decoration:none}
.foot-brand em{font-style:normal;color:var(--primary-ink)}

/* ══════════ the floating cart bar (phones) ══════════ */
.cartbar{
  position:fixed;z-index:40;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 14px);
  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:var(--ink);color:var(--card);border-radius:999px;min-height:54px;padding:0 20px 0 18px;
  font-family:inherit;font-size:calc(16px*var(--fs,1));font-weight:700;box-shadow:0 10px 26px rgba(51,32,46,.32);
}
.cartbar svg{width:22px;height:22px}
.cartbar b{
  background:var(--primary);border-radius:999px;min-width:26px;height:26px;line-height:26px;
  padding:0 7px;font-size:calc(14px*var(--fs,1));text-align:center;
}

/* ══════════ the statistics choice (PLAN_cookie_consent.md) ══════════ */
/* A fixed strip at the foot, above the cart bar's place (z 45: over the bar's
   40, under the toast's 60). Two EQUAL buttons: a louder "accept" is the dark
   pattern the regulator's draft names. Nothing animates. */
.statsbar{
  position:fixed;z-index:45;inset-inline:0;bottom:0;
  padding:12px 16px calc(var(--safe-b) + 12px);
  background:var(--card);color:var(--ink);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(51,32,46,.14);
}
.statsbar-title{display:block;font-size:calc(15px*var(--fs,1));margin-bottom:2px}
.statsbar p{margin:0 0 10px;font-size:calc(13.5px*var(--fs,1));line-height:1.4;color:var(--ink)}
.statsbar-row{display:flex;align-items:center;gap:10px}
.statsbar-row .btn{flex:1 1 0}
.statsbar-links{margin:6px 0 0;text-align:center;font-size:calc(13px*var(--fs,1));color:var(--muted)}
.statsbar-links a{color:inherit;text-decoration:underline;display:inline-block;padding:8px 4px}
/* While the strip is up the page keeps clear of it; the cart bar is hidden by
   paintCartBar (the top bar's cart button is on every page). */
/* The standard sentence plus a title, two buttons and two links: ~240px at
   360 with the links wrapped. The page keeps clear of all of it. */
body.has-statsbar{padding-bottom:calc(var(--safe-b) + 200px)}
/* the privacy sheet */
.priv-title{font-size:calc(20px*var(--fs,1));margin:0 0 12px}
.priv-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--line)}
.priv-row{border-bottom:1px solid var(--line)}
label.priv-row{cursor:pointer}
.priv-row span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.priv-row b{font-size:calc(15px*var(--fs,1))}
.priv-state{font-size:calc(13px*var(--fs,1));color:var(--primary-deep);font-weight:600}
.priv-intro{margin:0 0 12px}
.priv-foot{text-align:center}
.priv-row input{width:26px;height:26px;flex:none;accent-color:var(--primary-ink);margin:0;cursor:pointer}
.priv-note{font-size:calc(14px*var(--fs,1));color:var(--muted);line-height:1.5;margin:12px 0 0}
.priv-gpc{color:var(--ink);background:var(--sun-soft);border-radius:12px;padding:10px 12px}

/* ══════════ drawers ══════════ */
dialog.drawer{
  border:0;padding:0;max-width:none;width:100%;max-height:100dvh;height:100dvh;
  margin:0 0 0 auto;background:var(--bg);color:var(--ink);
}
dialog.drawer::backdrop{background:rgba(51,32,46,.45)}
dialog.drawer[open]{display:flex;flex-direction:column}
.drawer-body{
  flex:1 1 auto;min-height:0;
  padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 18px);overflow-y:auto;
  overscroll-behavior:contain;
}
/* A drawer with an action bar: the bar carries the bottom safe area. */
.drawer-body:has(+ .drawer-bar:not([hidden])){padding-bottom:18px}
/* Close is a ✕ at the top, where every sheet keeps it -- it was a
   full-width bar at the bottom, right under "buy". */
.drawer-x{
  position:absolute;z-index:6;top:calc(var(--safe-t) + 10px);inset-inline-end:10px;
  width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 2px 10px rgba(51,32,46,.18);
}
.drawer-x svg{width:20px;height:20px}
/* The drawer's ONE action, where the thumb is. */
.drawer-bar{
  flex:none;display:flex;gap:8px;padding:10px 16px calc(var(--safe-b) + 10px);
  background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(51,32,46,.06);
}
.drawer-bar .btn{flex:1 1 0;min-width:0}
.drawer-bar a.btn{flex-grow:1.8}
.drawer-bar .btn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-deep)}
/* Signed out, the account asks one short question (store.js renderAcct): on
   a phone or a tablet it is a sheet from the bottom -- the ways in under
   the thumb, the shop still showing above, a tap on the shop closing it. A
   full-height page of pink was 40% empty once its three lines went
   (2026-09-25). `fit-content`, never `auto`: a modal dialog is pinned to the
   top AND the bottom, and `auto` stretches it back to full height. The page
   behind does not scroll under a thumb dragging on the dimmed part. A laptop
   keeps the side drawer. */
@media (max-width:899.98px){
  dialog.drawer.sheet{height:fit-content;max-height:calc(100dvh - var(--safe-t) - 24px);
    width:min(100%,560px);margin:auto auto 0;border-start-start-radius:22px;border-start-end-radius:22px;
    box-shadow:0 -12px 40px rgba(51,32,46,.22)}
  dialog.drawer.sheet .drawer-body{padding-top:20px}
  dialog.drawer.sheet .drawer-x{top:10px}
  /* The gutter kept: a scrollbar that takes room (a desktop browser in a
     narrow window) must not shift the page sideways as it locks. */
  html:has(dialog.drawer.sheet[open]){overflow:hidden;scrollbar-gutter:stable}
}

/* the product */
/* The whole picture, never cropped, and never so tall that the name and
   the proof fall below the first screen. The box holds its size before any
   picture arrives (nothing below it jumps), the small photo she tapped is
   drawn at once from the cache, and the sharp one fades in over it. */
.dr-pic{position:relative;width:100%;aspect-ratio:1/1;max-height:46vh;border-radius:16px;overflow:hidden;background:#fff}
/* Waiting for its photo, the box SAYS it is loading -- a plain white box read
   as a product with no picture (2026-10-20). */
.dr-pic:not(.ok){background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
.dr-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.dr-pic .dr-img{opacity:0}
.dr-pic.ok .dr-img{opacity:1}
.dr-pic .ph{display:grid;place-items:center;height:100%;font-size:calc(48px*var(--fs,1))}
.dr-name{margin:12px 0 2px;font-size:calc(20px*var(--fs,1));line-height:1.3}
.dr-proof{margin:0 0 10px;color:var(--muted);font-size:calc(14px*var(--fs,1));font-variant-numeric:tabular-nums}
/* A price drop, explained where she decides (2026-10-14): against what, and when it was read. */
.dr-drop{margin:0 0 12px;padding:8px 12px;border-radius:12px;background:var(--mint-soft);color:var(--mint-ink);font-size:calc(14px*var(--fs,1));line-height:1.45;font-variant-numeric:tabular-nums}
.dr-badges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.dr-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px}
.dr-cat{margin:0;color:var(--muted);font-size:calc(13px*var(--fs,1));min-width:0}
.dr-meta .btn{flex:none}
.dr-msg{
  background:var(--card);border-radius:14px;padding:12px 14px;margin:0 0 12px;
  box-shadow:var(--shadow);white-space:pre-wrap;font-size:calc(15px*var(--fs,1));line-height:1.55;
  border-inline-start:3px solid var(--sun);
}
.dr-why{margin:4px 0 0}
.dr-why-title{margin:0 0 6px;font-size:calc(14px*var(--fs,1));font-weight:700;color:var(--primary-deep);
  display:flex;align-items:center;gap:8px}
/* Her face signs her words -- small, beside the heading, not the 52px face. */
.dr-why-title .face{width:30px;height:30px;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--primary)}
.dr-why-title .face.ph{font-size:calc(15px*var(--fs,1))}
.dr-reel{margin:0 0 12px}
.dr-reel-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);
  font-family:inherit;text-align:start;cursor:pointer}
.dr-reel-thumb{position:relative;flex:none;width:36px;height:64px;border-radius:8px;overflow:hidden;background:#2b1f28}
.dr-reel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dr-reel-thumb svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.dr-reel-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dr-reel-txt b{font-size:calc(15px*var(--fs,1));font-weight:700}
.dr-reel-txt small{font-size:calc(13px*var(--fs,1));color:var(--muted)}
@media (hover:hover) and (pointer:fine){.dr-reel-btn:hover{border-color:var(--primary-soft)}}
a.dr-cat{color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:44px;
  display:inline-flex;align-items:center}
/* Back from AliExpress: what fits the product she just bought, in view. */
.dr-related.nudge{border-radius:14px;box-shadow:0 0 0 3px var(--primary-soft)}
.dr-actions{display:flex;flex-direction:column;gap:8px}
.dr-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dr-row .btn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-deep)}
.dr-related{margin:16px 0 0}
.dr-related:empty{display:none}

/* the cart */
.cart-title{margin:0 0 8px;padding-inline-end:52px;font-family:var(--display);font-weight:400;font-size:calc(28px*var(--fs,1));color:var(--ink);line-height:1.15}
.cart-title small{font-family:'Assistant',sans-serif;font-size:calc(14px*var(--fs,1));color:var(--muted);font-weight:600}
.cart-how{
  margin:6px 0 12px;font-size:calc(13.5px*var(--fs,1));color:var(--ink);background:var(--card);
  border-radius:12px;padding:10px 12px;border-inline-start:3px solid var(--mint);
}
.cart-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 12px 6px}
.cart-empty-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-deep);margin-bottom:12px}
.cart-empty-ico svg{width:30px;height:30px}
.cart-empty-h{margin:0;font-size:calc(18px*var(--fs,1));font-weight:800;color:var(--ink)}
.cart-empty-how{margin:4px 0 14px;max-width:30ch;color:var(--muted);font-size:calc(14.5px*var(--fs,1));line-height:1.45}
.btn.soft{background:var(--primary-soft);color:var(--primary-deep);padding-inline:22px}
/* שאהבתי: the products, then the videos, each under its own heading. */
.likes-sec{margin:14px 0 0}
.likes-sec .sec-title{display:flex;align-items:baseline;gap:8px}
.likes-acct{margin:18px 0 0}
/* One line under the title says what each of the two buttons does, drawn as
   the buttons themselves look on the tiles. */
.likes-how{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 2px;font-size:calc(14px*var(--fs,1));color:var(--muted)}
.likes-how .lh{display:inline-flex;align-items:center;gap:6px}
.lh-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;flex:none}
.lh-ico svg{width:15px;height:15px}
.lh-ico.heart{background:#fff;color:#E0245E;box-shadow:0 1px 4px rgba(51,32,46,.14)}
.lh-ico.heart svg{fill:currentColor}
.lh-ico.bag{background:var(--primary-soft);color:var(--primary-deep)}
.likes-n{font-family:inherit;font-size:calc(15px*var(--fs,1));color:var(--muted)}
/* Her likes, one tap from her list (the bag): the bar keeps one personal button. */
.cart-likes{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:10px 12px;min-height:44px;
  border-radius:12px;background:var(--card);box-shadow:var(--shadow);color:var(--ink);font-weight:700;
  font-size:calc(14.5px*var(--fs,1));text-decoration:none}
.cart-likes[hidden]{display:none}
.cart-likes svg{width:18px;height:18px;color:#E0245E;fill:currentColor;flex:none}
.cart-likes::after{content:"›";margin-inline-start:auto;color:var(--muted);font-size:calc(18px*var(--fs,1))}
/* "Add all to my list": quiet, under the products it is about. */
.likes-cartall{margin:12px 0 0}
.likes-cartall:empty{display:none}
.likes-cartall .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.likes-cartall .btn svg{width:20px;height:20px;flex:none}
.likes-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 12px 6px}
.likes-empty-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--primary-soft);color:#E0245E;margin-bottom:12px}
.likes-empty-ico svg{width:30px;height:30px;fill:none}
.likes-empty-h{margin:0;font-size:calc(18px*var(--fs,1));font-weight:800;color:var(--ink)}
.likes-empty-how{margin:4px 0 14px;max-width:30ch;color:var(--muted);font-size:calc(14.5px*var(--fs,1));line-height:1.45}
.likes-empty-go{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 10px}
.cart-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cart-row{
  display:flex;gap:10px;align-items:center;background:var(--card);border-radius:14px;
  padding:8px;box-shadow:var(--shadow);
}
.cart-row img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg)}
.cart-row .ph{width:60px;height:60px;display:grid;place-items:center;font-size:calc(26px*var(--fs,1));flex:none}
.cart-name{flex:1;min-width:0;font-size:calc(14px*var(--fs,1));font-weight:700;line-height:1.3}
.cart-pic{flex:none;border:0;padding:0;background:none;cursor:pointer;border-radius:10px}
.cart-name-btn{display:block;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.cart-info{display:inline-flex;align-items:center;min-height:32px;padding:0;font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--primary-deep)}
.cart-state{display:block;font-style:normal;font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--mint)}
.cart-state.bad{color:var(--danger)}
.cart-row.is-opened img{opacity:.6}
.cart-row.is-gone{opacity:.7}
.drawer-bar.cart-go{flex-direction:column;align-items:stretch}
.cart-done{
  margin:0;background:var(--mint-soft);color:#11705B;border-radius:12px;
  padding:12px;text-align:center;font-weight:700;
}
.cart-step{
  margin:0;font-size:calc(15px*var(--fs,1));font-weight:700;text-align:center;line-height:1.35;
  overflow-wrap:anywhere;
}
.wa-send{margin-top:12px}
#cartDlg .drawer-body:has(+ .drawer-bar:not([hidden])){padding-bottom:calc(var(--cart-bar, 0px) + 18px)}
.cart-skip{display:block;margin:4px auto 0;min-height:44px}
.cart-rm-gone{margin-inline-start:auto;min-height:44px}
.cart-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.cart-tools .linkbtn{margin:0}

/* ══════════ the account button (bar) ══════════ */
.acctbtn{color:var(--ink)}
/* Signed in: her initial in a pink circle replaces the outline. */
.acctbtn b{
  position:absolute;inset:6px;border-radius:999px;background:var(--primary);color:var(--on-fill,#fff);
  display:grid;place-items:center;font-size:calc(15px*var(--fs,1));line-height:1;
}
.acctbtn.is-in svg{visibility:hidden}

/* ══════════ the account sheet ══════════ */
.acct-hero{text-align:center;padding:6px 6px 2px}
.acct-cloud{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;
  background:var(--primary-soft);color:var(--primary)}
.acct-cloud svg{width:34px;height:34px}
.acct-avatar{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:999px;
  background:var(--primary);color:var(--on-fill,#fff);font-size:calc(28px*var(--fs,1));font-weight:700}
.acct-title{margin:10px 0 4px;font-family:var(--display);font-weight:400;font-size:calc(28px*var(--fs,1));
  line-height:1.05;color:var(--primary)}
[dir="ltr"] .acct-title{font-family:'Assistant',sans-serif;font-size:calc(24px*var(--fs,1))}
.acct-pitch{margin:0 auto 14px;max-width:360px;color:var(--muted);font-size:calc(15px*var(--fs,1))}
/* "הסל שלך, בכל מכשיר" broke as "הסל שלך, בכל / מכשיר" at 390px. */
.acct-login .acct-title{text-wrap:balance}
.acct-email{margin:0 0 12px;color:var(--muted);font-size:calc(14px*var(--fs,1))}
.acct-btns{display:flex;flex-direction:column;gap:10px;margin:8px 0 10px}
/* The iPhone app's email sign-in (store.js "sign-in by email"): Wix's own
   accounts, the only way in inside the app. */
.em-form{display:flex;flex-direction:column;gap:10px;margin:8px 0 10px}
.em-field{display:flex;flex-direction:column;gap:4px;font-size:calc(14px*var(--fs,1));color:var(--muted)}
.em-field input{font-size:calc(16px*var(--fs,1));min-height:48px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink)}
.em-line{margin:0;font-size:calc(15px*var(--fs,1));line-height:1.45}
.em-err{margin:0;color:var(--danger);font-size:calc(14px*var(--fs,1))}
.em-err:empty{display:none}
.em-links{display:flex;flex-direction:column;align-items:center;gap:2px}
.em-links .linkbtn{min-height:44px}
.acct-del{text-align:center;margin:14px 0 0}
.acct-del .linkbtn{min-height:44px;color:var(--danger)}
.btn.idp{min-height:52px;font-size:calc(16px*var(--fs,1));gap:10px;box-shadow:0 2px 8px rgba(51,32,46,.08)}
.btn.idp svg{width:22px;height:22px;flex:none}
.btn.idp.google{background:#fff;color:#1f1f1f;border:1.5px solid #dadce0}
.btn.idp.facebook{background:#0866FF;color:#fff}
.acct-hint{background:var(--sun-soft);color:var(--sun-ink);border-radius:12px;padding:10px 12px;
  font-size:calc(13.5px*var(--fs,1));line-height:1.45;margin:0 0 10px}
.acct-card{display:flex;gap:12px;align-items:flex-start;background:var(--mint-soft);color:#11705B;
  border-radius:14px;padding:12px 14px;margin:0 0 10px}
.acct-card svg{width:26px;height:26px;flex:none;margin-top:2px}
.acct-card.warn{background:var(--sun-soft);color:var(--sun-ink)}
.acct-card b{display:block;font-size:calc(15px*var(--fs,1))}
.acct-card p{margin:2px 0 0;font-size:calc(13.5px*var(--fs,1));color:#1a5c4c}
.acct-nl{margin:18px 0 4px}
/* Her profile photo over her initial (the letter shows if it fails). */
.acct-avatar{position:relative;overflow:hidden}
.acct-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--primary)}
.acctbtn > .acct-photo{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:999px}
/* Signed in (2026-10-16): a compact header, then two rows that say where
   the cart and the alerts stand. */
.acct-me{display:flex;align-items:center;gap:14px;padding:4px 0 16px;padding-inline-end:52px}
.acct-me .acct-avatar{flex:none;width:56px;height:56px;font-size:calc(24px*var(--fs,1))}
.acct-me-txt{min-width:0}
.acct-me .acct-title{margin:0;font-size:calc(32px*var(--fs,1))}
[dir="ltr"] .acct-me .acct-title{font-size:calc(22px*var(--fs,1))}
.acct-me .acct-email{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.acct-rows{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.acct-row{position:relative;display:flex;align-items:center;gap:12px;padding:14px 14px;min-height:72px}
.acct-row + .acct-row{border-top:1px solid var(--line)}
.acct-row-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-deep)}
.acct-row-ico svg{width:22px;height:22px}
.acct-row-txt{flex:1;min-width:0}
.acct-row-go{display:block;margin:0;padding:0;border:0;background:none;font:inherit;font-size:calc(16.5px*var(--fs,1));font-weight:800;
  color:var(--ink);text-align:start;cursor:pointer}
/* The whole row is the tap target; a retry inside it sits above. */
.acct-row-go::after{content:"";position:absolute;inset:0}
.acct-row-go:focus-visible{outline:none}
.acct-row:has(.acct-row-go:focus-visible){box-shadow:inset 0 0 0 2px var(--primary-ink)}
.acct-sub,.acct-card.acct-sub{display:block;margin:2px 0 0;padding:0;background:none;color:var(--muted);font-size:calc(13.5px*var(--fs,1));line-height:1.35}
.acct-card.acct-sub.ok{color:var(--mint-ink)}
.acct-card.acct-sub.warn{color:var(--sun-ink);background:none}
.acct-sub .linkbtn{position:relative;z-index:1}
.acct-fired{color:var(--mint-ink)}
.acct-thumbs{flex:none;display:flex;flex-direction:row-reverse}
.acct-thumbs > *{width:34px;height:34px;border-radius:9px;overflow:hidden;border:2px solid var(--card);
  margin-inline-start:-10px;background:var(--bg)}
.acct-thumbs img{width:100%;height:100%;object-fit:cover}
.acct-chev{flex:none;color:var(--muted);display:grid}
.acct-chev svg{width:20px;height:20px}
[dir="ltr"] .acct-chev svg{transform:scaleX(-1)}
.acct-devices{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;color:var(--muted);font-size:calc(13px*var(--fs,1));text-align:center}
.acct-devices svg{flex:none;width:18px;height:18px}
.acct-hold{margin-top:14px}
.acct-hold-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
/* Sharing with Meta (store.js mmBlock / mmOpen, PLAN_meta_signals.md §0.4.4).
   In the account sheet ONE quiet line, last before the way out, that says
   where it stands and opens the question (owner, 2026-10-25: the big card
   with the full text sat there on every opening). The question itself is a
   short sheet of its own, asked once at sign-in: the approved words, the
   details link, a line that says where it stands, and two EQUAL answers side
   by side -- neither pushed (the statistics strip's rule). */
.acct-mm{margin:16px 0 0;text-align:center}
.acct-mm .linkbtn.acct-mm-line{display:inline-flex;align-items:center;gap:4px;margin:0 auto;padding:0 12px;
  font-size:calc(13.5px*var(--fs,1));color:var(--muted);text-underline-offset:3px}
.mm-title{margin:4px 0 6px;padding-inline-end:48px;font-size:calc(19px*var(--fs,1));font-weight:800;color:var(--ink)}
.mm-text{margin:0;color:var(--ink);font-size:calc(14.5px*var(--fs,1));line-height:1.55}
.mm-more{display:inline-flex;align-items:center;min-height:44px;color:var(--primary-deep);font-size:calc(14px*var(--fs,1));
  font-weight:700;text-underline-offset:3px}
.mm-status{margin:0;min-height:1.4em;font-size:calc(14px*var(--fs,1));line-height:1.4;color:var(--muted)}
/* Empty, it takes no room -- but stays in the page, so a live region it is
   when the words arrive. */
.mm-status:empty{min-height:0}
.mm-status.ok{color:var(--mint-ink)}
.mm-status.warn{color:var(--sun-ink)}
.mm-btns{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px}
/* Stacked on a phone, full width and the same: the yes is the approved
   "אני מאשרת את השיתוף", which side by side broke onto two lines at every
   phone width (measured at 360, 390 and 430). */
.mm-btns .btn{width:100%;min-height:48px;font-size:calc(16px*var(--fs,1))}
.mm-btns .btn:disabled{opacity:.55;cursor:progress}
/* "Turn sharing off in my account": a small button, the size of the words. */
.linkbtn.mm-all{margin:4px auto 0;font-size:calc(14px*var(--fs,1))}
/* On a laptop the question is a card in the middle, not a full-height
   drawer two thirds empty (the feedback form's shape). */
@media (min-width:900px){
  dialog.drawer.mm-dlg{width:480px;height:fit-content;max-height:min(92dvh,880px);margin:auto;border-radius:22px;
    box-shadow:0 18px 60px rgba(51,32,46,.28)}
  dialog.drawer.mm-dlg .drawer-x{top:10px}
  dialog.drawer.mm-dlg .drawer-body{padding-top:20px}
  /* Room for both on one row in the card: side by side, the same width. */
  .mm-btns{flex-direction:row}
  .mm-btns .btn{flex:1 1 0;min-width:0;width:auto}
}

/* A button waiting on the network says so, and cannot be pressed twice. */
.btn.busy{opacity:.75;pointer-events:none}
.btn.busy::after{
  content:"";width:15px;height:15px;border-radius:999px;flex:none;
  border:2px solid currentColor;border-inline-end-color:transparent;
}
/* A way in waiting on its page (store.js loginGoing): the spinner takes the
   icon's place, so the label does not move, and the button keeps its colour
   -- faded read as "that did not work". The ways she did not tap step back.
   After the base rules: source order decides at equal specificity. */
.btn.idp.busy{opacity:1}
.btn.idp.busy svg{display:none}
.btn.idp.busy::after{order:-1;width:18px;height:18px;margin:2px}
.acct-login.going [data-login]:not(.busy){opacity:.4;box-shadow:none}

/* ══════════ the newsletter ══════════ */
.nl{
  position:relative;overflow:hidden;border-radius:18px;padding:14px;box-shadow:var(--shadow);
  background:linear-gradient(135deg,#FFEAF1 0%,#FFFFFF 72%);border:1.5px solid var(--primary-soft);
}
.nl-head{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.nl-inline .nl-head{padding-inline-end:34px}
.nl-ico{font-size:calc(26px*var(--fs,1));line-height:1.1}
.nl-head b{display:block;font-size:calc(16px*var(--fs,1));line-height:1.3}
.nl-head p{margin:2px 0 0;color:var(--muted);font-size:calc(13.5px*var(--fs,1))}
.nl-fields{display:flex;flex-direction:column;gap:8px}
.nl input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;min-height:48px;padding:10px 14px;
  font-family:inherit;font-size:calc(16px*var(--fs,1));background:#fff;color:var(--ink);
}
/* An address reads left to right; the Hebrew hint in an empty box does not. */
.nl input[type="email"]{direction:ltr}
[dir="rtl"] .nl input[type="email"]:placeholder-shown{direction:rtl}
.nl input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.nl.is-bad input[type="email"]{border-color:var(--danger)}
.nl .btn{min-height:48px}
.nl-note{margin:8px 2px 0;font-size:calc(12px*var(--fs,1));color:var(--muted)}
.nl-note a{color:inherit}
.nl-msg{margin:0 2px 8px;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--danger)}
.nl-msg:empty{display:none}
.nl-x{
  position:absolute;top:8px;inset-inline-end:8px;border:0;background:transparent;color:var(--muted);
  width:44px;height:44px;border-radius:10px;cursor:pointer;font-size:calc(14px*var(--fs,1));
}
.nl.is-done{text-align:center;background:var(--mint-soft);border-color:var(--mint-soft)}
.nl-done{margin:0;font-weight:700;color:#11705B}
/* The field only a bot fills: off screen, out of the tab order, unannounced. */
.hp{position:absolute !important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.grid-note{grid-column:1/-1}
.nl-foot{margin-top:28px}
.foot-links{display:block;margin-top:2px}
.foot-links a{color:var(--muted);display:inline-block;padding:12px 6px;min-height:44px}

/* the cart's line about the account */
.cart-sync{margin:12px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--muted);text-align:center}
.cart-sync.ok{color:#11705B;font-weight:600}
.cart-sync.bad{color:var(--sun-ink);background:var(--sun-soft);border-radius:12px;padding:8px 10px}
.linkbtn.inline{
  display:inline-flex;align-items:center;margin:0;padding:0 8px;min-height:44px;
  font-size:inherit;font-weight:700;color:var(--primary-ink);
}

/* ══════════ the privacy page ══════════ */
.legal{padding-top:14px;padding-bottom:26px}
.legal-back{font-size:calc(14px*var(--fs,1));font-weight:700;color:var(--primary-deep);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;margin-inline-end:auto}
.legal ul{padding-inline-start:20px;margin:8px 0 12px}
.legal li{margin:6px 0;line-height:1.55}
.legal h1{font-family:var(--display);font-weight:400;font-size:calc(34px*var(--fs,1));color:var(--ink);margin:6px 0 0;line-height:1.15}
.legal h2{font-size:calc(17px*var(--fs,1));margin:22px 0 4px}
.legal p{margin:4px 0 8px;line-height:1.65}
.legal a{color:var(--primary-ink)}
/* An address inside a Hebrew sentence is one unit: it neither breaks across
   lines nor turns the sentence around it. */
.legal a[dir="ltr"]{white-space:nowrap;unicode-bidi:isolate}
.legal-sub{color:var(--muted);font-size:calc(13px*var(--fs,1))}
.legal-en{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);text-align:left}
.legal-en .legal-entitle{font-size:calc(26px*var(--fs,1));color:var(--primary);margin-top:0}

/* ══════════ her videos ══════════ */
.feed{padding-top:14px}
.reel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.reel-grid[aria-busy="true"]{min-height:70vh;align-content:start}
/* A reel is tall; its tile keeps the 9:16 of the video, so the cover she
   chose for Instagram is seen whole. */
.reel-tile{
  position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;cursor:pointer;
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);color:#fff;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%;
}
.reel-tile img{width:100%;height:100%;object-fit:cover;display:block}
.reel-tile .ph{display:grid;place-items:center;width:100%;height:100%;font-size:calc(40px*var(--fs,1))}
.reel-tile.skel{box-shadow:none;cursor:default}
/* A small ▶ in the corner says "video" -- the playing tile's mute mark sits in
   the same corner. A 52px disc in the middle of every cover hid the very
   thing the video shows (2026-10-02). */
.reel-play{
  position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;
  border-radius:999px;background:rgba(0,0,0,.45);display:grid;place-items:center;font-size:calc(11px*var(--fs,1));
}
/* Her pinned video wears the SAME badge as her pick on a product (.badge.pick,
   "⭐ נועה"): one star on the site, and it always means Noa chose it. */
.reel-pin{position:absolute;top:8px;inset-inline-start:8px;z-index:1;max-width:calc(100% - 16px)}
.reel-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
/* A player waiting for its tile's turn (store.js planStandby): loaded and
   paused under the cover, never seen until it is adopted as the preview. */
.reel-standby{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.reel-tile.previewing .reel-preview:not(.gone){opacity:1}
.reel-tile.previewing .reel-play{opacity:0}
/* Playing muted: the universal mark, not a sentence on a moving picture. */
.reel-mute{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;border-radius:999px;
  display:none;place-items:center;background:rgba(0,0,0,.45);color:#fff}
.reel-mute svg{width:16px;height:16px}
.reel-tile.previewing .reel-mute{display:grid}
/* The tile's turn in the stream, along its foot. */
.reel-prog{position:absolute;bottom:0;inset-inline-start:0;width:100%;height:3px;display:none;border:0;
  -webkit-appearance:none;appearance:none;background:rgba(255,255,255,.3);color:#fff}
.reel-prog::-webkit-progress-bar{background:rgba(255,255,255,.3)}
.reel-prog::-webkit-progress-value{background:#fff}
.reel-prog::-moz-progress-bar{background:#fff}
.reel-tile.previewing .reel-prog{display:block}
.reel-label{
  position:absolute;inset-inline:0;bottom:0;padding:26px 10px 10px;text-align:start;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%);
  font-size:calc(13.5px*var(--fs,1));font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* The viewer: the video on top, her words and the way to buy underneath. */
dialog.viewer{
  border:0;padding:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;
  background:#000;color:var(--ink);
}
dialog.viewer::backdrop{background:rgba(0,0,0,.85)}
dialog.viewer[open]{display:flex;flex-direction:column}
/* Both axes are the viewer's own gestures (up/down, and sideways the way the
   rows scroll), so the browser takes neither. */
.viewer-stage{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;
  overflow:hidden;touch-action:none}
/* Absolute, so the video is exactly the stage: as a grid or flex child its
   100% height resolved against its own intrinsic size, and a portrait reel
   was cropped instead of shown whole. */
/* The picture and its neighbour are two panes the size of the stage; a swipe
   moves them together (the Web Animations API, so no inline style). */
.vpane{position:absolute;inset:0;isolation:isolate}
/* The player waiting with the next reel sits UNDER the one playing, never
   display:none -- an iPhone will not load or start a video that is not
   rendered -- and never above it. */
.viewer-stage video{z-index:1}
.viewer-stage video.vstandby{z-index:0;opacity:0;pointer-events:none}
.vpane .viewer-cover{z-index:2}
.vpeek{background:#000}
.vpeek img,.vpeek canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.viewer-stage video,.viewer-cover{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;background:#000}
.viewer-top{position:absolute;top:calc(var(--safe-t) + 10px);inset-inline:10px;display:flex;
  justify-content:space-between;pointer-events:none}
.vbtn{
  pointer-events:auto;border:0;width:44px;height:44px;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;font-size:calc(18px*var(--fs,1));display:grid;place-items:center;font-family:inherit;
}
.vbtn:disabled{opacity:.3;cursor:default}
.vnav{position:absolute;inset-inline-end:10px}
.vnav svg{width:24px;height:24px}
.vprev{top:calc(50% - 50px)}
.vnext{top:calc(50% + 6px)}
.vplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;
  border-radius:999px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:calc(28px*var(--fs,1));cursor:pointer;
}
/* Loading, said out loud: a stalled picture with nothing on it read as a
   broken video. Still (not spinning) under reduced motion, still a ring. */
.vspin{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:999px;
  border:3px solid rgba(255,255,255,.3);border-top-color:#fff;pointer-events:none}
/* How far into the video: a thin line along the picture's foot. */
.vprog{position:absolute;bottom:6px;inset-inline:14px;width:calc(100% - 28px);height:3px;border:0;border-radius:3px;
  -webkit-appearance:none;appearance:none;background:rgba(255,255,255,.28);color:#fff;pointer-events:none}
.vprog::-webkit-progress-bar{background:rgba(255,255,255,.28);border-radius:3px}
.vprog::-webkit-progress-value{background:#fff;border-radius:3px}
.vprog::-moz-progress-bar{background:#fff;border-radius:3px}
.viewer-sheet{
  flex:none;max-height:46dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);
  border-radius:18px 18px 0 0;padding:14px 16px calc(var(--safe-b) + 14px);
}
.reel-prod{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:calc(13.5px*var(--fs,1));font-weight:700}
.reel-prod img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:#fff}
.reel-title{margin:0 0 6px;font-size:calc(18px*var(--fs,1));line-height:1.3}
.reel-title:focus{outline:none}
.reel-body{
  white-space:pre-wrap;font-size:calc(14.5px*var(--fs,1));line-height:1.55;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.reel-body.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.reel-more{border:0;background:none;padding:6px 0;min-height:36px;font-family:inherit;font-size:calc(14px*var(--fs,1));
  font-weight:700;color:var(--primary-ink);cursor:pointer}
.reel-kw{margin:8px 0;background:var(--sun-soft);color:var(--sun-ink);border-radius:12px;
  padding:10px 12px;font-size:calc(14px*var(--fs,1));font-weight:600;line-height:1.45}
.viewer-sheet .dr-actions{margin-top:8px}
.viewer-sheet .dr-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.viewer-sheet .dr-row .btn{padding:8px 6px;font-size:calc(14px*var(--fs,1))}
.viewer-sheet .vico svg{width:18px;height:18px;flex:none}
.viewer-sheet .cap{display:none}
/* The heart in the video's actions: filled when she likes it. */
.vheart svg{fill:none}
.vheart[aria-pressed="true"]{color:#E0245E}
.vheart[aria-pressed="true"] svg{fill:currentColor}
/* How to reach the next video, said once on a touch screen. */
.vhint{position:absolute;left:50%;top:38%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:calc(15px*var(--fs,1));font-weight:800;
  white-space:nowrap;pointer-events:none;z-index:2}
.vhint svg{width:20px;height:20px}
.vhint.go svg{animation:mn-hint 1.1s ease-in-out infinite}
@keyframes mn-hint{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.vhint.go svg{animation:none}}
/* The arrows are a pointer's way; a phone's is the swipe. On a touch screen
   they leave the picture but stay for a screen reader and a keyboard. */
@media (hover:none) and (pointer:coarse){
  .vnav{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
}
/* A double-tap's answer: a heart over the picture. */
.vburst{position:absolute;top:50%;left:50%;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;z-index:2}
.vburst svg{width:100%;height:100%;fill:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.vburst.go{animation:mn-burst .75s ease-out forwards}
@keyframes mn-burst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.12)}45%{transform:scale(.96)}
  70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.vburst.go{animation:mn-burst-still .75s linear forwards}}
@keyframes mn-burst-still{0%,70%{opacity:1}100%{opacity:0}}
/* A product video leads with the product: its photo, its name, and the way
   to its whole page. */
.reel-pcard{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.reel-pcard img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:#fff}
.reel-pinfo{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.reel-pinfo .reel-title{margin:0}
.reel-pname{font-size:calc(13px*var(--fs,1));font-weight:700}
.reel-also{margin:4px 0 10px}
.reel-also-t{display:block;font-size:calc(12.5px*var(--fs,1));font-weight:800;color:var(--muted);margin-bottom:4px}
.reel-also-row{display:flex;gap:8px;overflow-x:auto}
.reel-also-p{display:flex;align-items:center;gap:6px;flex:none;max-width:220px;min-height:44px;padding:4px 10px 4px 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:calc(13px*var(--fs,1));
  font-weight:700;text-decoration:none;cursor:pointer}
.reel-also-p img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none}
.reel-also-p span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The subtitle she wrote (or the link filled in) under a video's or a
   deal's title, and where it is filed in the shop (2026-10-02). */
.reel-sub,.dr-sub{margin:2px 0 8px;font-size:calc(14px*var(--fs,1));color:var(--muted);line-height:1.45}
.deal-sub{margin:2px 0 4px;font-size:calc(13px*var(--fs,1));color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.post-cat{display:inline-flex;align-items:center;margin:4px 0 8px}
.reel-pcard{cursor:pointer}
.reel-details{min-height:36px;margin-top:4px;padding:6px 14px;border-radius:999px;background:var(--primary-soft);
  color:var(--primary-ink);font-weight:800}
/* A phone watches the way a reel app does (owner, 2026-09-26: "complete the
   viewer"): the video fills the screen and her words, the way to buy and the
   small actions lie over its foot on a dark fade -- an info panel UNDER the
   video left a 259px-wide picture between two 65px black bars on a 390px
   phone, with the panel itself taking 204 of 664px. Top-aligned, so what a
   crop or a short picture gives up is at the foot, under the panel; the
   progress line moves to the top, where the panel cannot cover it. */
@media (max-width:899px){
  .viewer-stage video,.viewer-cover,.vpeek img,.vpeek canvas{object-position:50% 0}
  .vprog{top:calc(var(--safe-t) + 4px);bottom:auto}
  .viewer-sheet{position:absolute;inset-inline:0;bottom:0;z-index:3;max-height:62dvh;border-radius:0;
    color:#fff;padding:40px 12px calc(var(--safe-b) + 10px);
    background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.5) 36px,rgba(0,0,0,.8) 100%)}
  /* Read in full, the words get a solid ground: over a moving picture they
     would not be legible. */
  .viewer-sheet:has(.reel-body.open){background:rgba(0,0,0,.86);pointer-events:auto}
  /* The fade is the video's: a swipe that starts on it moves the reels. */
  .viewer-sheet{pointer-events:none}
  .viewer-sheet>*{pointer-events:auto}
  .viewer-sheet .reel-title{color:#fff;font-size:calc(15.5px*var(--fs,1));margin:0 0 4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* "From my Instagram" was 68 of 69 titles, and a line a phone cannot spare;
     it stays the dialog's name for a screen reader. */
  .viewer-sheet .reel-title.generic{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
  .viewer-sheet .reel-prod{margin:0 0 6px;font-size:calc(13px*var(--fs,1))}
  .viewer-sheet .reel-prod img{width:36px;height:36px}
  .viewer-sheet .reel-body{color:#fff;font-size:calc(14px*var(--fs,1));-webkit-line-clamp:2}
  .viewer-sheet .reel-more{color:#fff;min-height:32px;padding:2px 0}
  .viewer-sheet .reel-kw{background:none;border-radius:0;padding:0;margin:0 0 8px;color:#FFE3A3;
    font-size:calc(13.5px*var(--fs,1));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Instagram's layout (2026-09-27, "still bad as UX/UI"): the text and ONE
     way on at the foot, full width; every other action in one column on the
     video's side -- the heart with its count, the cart, search, Instagram,
     share -- each an icon with its word under it. The column sits just above
     the text (bottom:100% of the strip), so the strip must not clip it: it
     scrolls only while her whole text is open, and the column steps aside
     then, the way Instagram's does when a caption is opened. */
  .viewer-sheet{overflow:visible;max-height:none}
  .viewer-sheet:has(.reel-body.open){overflow-y:auto;max-height:62dvh}
  .viewer-sheet:has(.reel-body.open) .dr-row{display:none}
  .viewer-sheet .dr-actions{margin-top:6px}
  .viewer-sheet .dr-actions>.btn.wide{min-height:48px;padding:11px 14px}
  .viewer-sheet .dr-row{position:absolute;inset-inline-end:6px;bottom:100%;margin-bottom:6px;
    display:flex;flex-direction:column;align-items:center;gap:10px}
  .viewer-sheet .dr-row .btn{position:relative;flex-direction:column;gap:3px;width:62px;min-height:44px;height:auto;
    padding:0;border:0;border-radius:0;background:none;color:#fff;box-shadow:none}
  .viewer-sheet .dr-row .btn svg{box-sizing:content-box;width:24px;height:24px;padding:11px;border-radius:999px;
    background:rgba(0,0,0,.4)}
  .viewer-sheet .dr-row .lbl{max-width:62px;font-size:calc(11.5px*var(--fs,1));font-weight:800;line-height:1.15;text-align:center;
    color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .viewer-sheet .dr-row .btn[aria-pressed="true"] svg{background:#fff;color:var(--primary-ink)}
  /* Where the words are a sentence ("חיפוש באתר: חוף"), the column shows a
     word and a screen reader still gets the sentence. */
  .viewer-sheet .dr-row .btn:has(.cap) .lbl{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
  .viewer-sheet .dr-row .cap{display:block;max-width:62px;font-size:calc(11.5px*var(--fs,1));font-weight:800;line-height:1.15;
    text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
  .viewer-sheet .dr-row .vheart svg{fill:none}
  .viewer-sheet .dr-row .vheart[aria-pressed="true"] svg{background:rgba(0,0,0,.38);color:#FF3B5C;fill:currentColor}
  .viewer-sheet .reel-pcard img{width:40px;height:40px}
  /* The other products in the video: one sideways row of small cards. */
  .viewer-sheet .reel-also{margin:2px 0 8px}
  .viewer-sheet .reel-also-t{display:block;font-size:calc(12px*var(--fs,1));font-weight:800;color:rgba(255,255,255,.85);margin-bottom:4px}
  .viewer-sheet .reel-also-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .viewer-sheet .reel-also-p{display:flex;align-items:center;gap:6px;flex:none;max-width:200px;min-height:44px;
    padding:4px 10px 4px 4px;border:0;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;
    font:inherit;font-size:calc(13px*var(--fs,1));font-weight:700;text-decoration:none;cursor:pointer}
  .viewer-sheet .reel-also-p img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none;background:#fff}
  .viewer-sheet .reel-also-p span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Over the video: white, one line -- the page's muted grey is for paper. */
  .viewer-sheet .reel-sub{color:rgba(255,255,255,.9);font-size:calc(13.5px*var(--fs,1));margin:0 0 6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .viewer-sheet .reel-details{background:rgba(255,255,255,.22);color:#fff}
}
/* On a phone held upright the picture FILLS the screen, the way Instagram
   plays a reel: at 390x664 that gives up 4% of its foot, and on a tall one
   (390x844, the home-screen app) about 9% of each side. Keeping the whole
   picture there left a black band between the video and her text -- seen on
   her own iPhone, 2026-09-27. A wider screen still keeps the whole picture. */
@media (max-width:899px) and (max-aspect-ratio:5/8){
  .viewer-stage video,.viewer-cover,.vpeek img,.vpeek canvas{object-fit:cover}
}

/* ══════════ her deals ══════════ */
.cats.stores{margin:0 0 10px}
.deal-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.deal-grid[aria-busy="true"]{min-height:60vh;align-content:start}
/* A row a thumb can scan (2026-09-25, owner: KSP / iHerb / Terminal X deals
   "looks bad and not clear"): the photo BESIDE the words, which store and how
   long on one line, the name, the offer in her words, one line of why, one
   soft button. One KSP deal used to be a whole phone screen (599px at 390);
   the rest of her post lives in the sheet (#dealDlg). */
.deal{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:12px;
  display:flex;flex-direction:column;gap:10px;min-width:0}
.deal.skel{min-height:176px;box-shadow:none;padding:0;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
.deal-top{position:relative;display:flex;align-items:flex-start;gap:12px;min-width:0}
/* A store's product photo is shot on white: shown whole, never cropped. */
/* No frame line: a store's product shot is on white, and a hairline round a
   landscape one drew an empty box above and below it. The card is the frame. */
.deal-pic{position:relative;flex:none;width:104px;height:104px;border-radius:14px;overflow:hidden;background:#fff;
  display:grid;place-items:center}
/* Laid OVER the frame (see .deal-big below): as a grid item the picture took
   its own height, and a PORTRAIT photo was cut to its middle. */
.deal-pic img,.deal-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.deal-ph{font-size:calc(38px*var(--fs,1));line-height:1;font-weight:800;color:var(--primary-deep)}
.deal-pic.noimg,.deal-big.noimg{background:linear-gradient(135deg,#FCE3EA 0%,#FFF5F4 100%)}
.deal-pic.noimg.s-ksp,.deal-big.noimg.s-ksp{background:linear-gradient(135deg,#E3EBF8 0%,#F5F8FD 100%)}
.deal-pic.noimg.s-iherb,.deal-big.noimg.s-iherb{background:linear-gradient(135deg,#EAF6DD 0%,#F7FBF2 100%)}
.deal-pic.noimg.s-aliexpress,.deal-big.noimg.s-aliexpress{background:linear-gradient(135deg,#FFE9E0 0%,#FFF5F2 100%)}
.deal-pic img.deal-logo,.deal-big img.deal-logo{inset:22%;width:56%;height:56%;border-radius:14px;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.deal-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.deal-tags{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
/* Which store, before anything else is read: a coloured name, never a logo. */
.store-badge,.deal-pick,.deal-off,.deal-when,.deal-tags .badge{
  border-radius:999px;padding:2px 9px;font-size:calc(12px*var(--fs,1));font-weight:800;line-height:1.5;white-space:nowrap}
.store-badge{color:#fff;background:var(--ink)}
.store-badge.s-ksp{background:#1B4B9B}
.store-badge.s-iherb{background:#3D7A00}
.store-badge.s-aliexpress{background:#C42A06}
.store-badge.s-terminalx{background:#111}
.store-badge.s-mommycare{background:#8E3B6B}
.store-badge.s-drk{background:#2F6F73}
.deal-pick{background:var(--sun);color:#6B4000}
/* A store's own sale on one of her picks (Terminal X measures it). */
.deal-off{background:var(--primary-ink);color:var(--on-fill,#fff)}
.deal-when{font-weight:700;background:var(--bg);color:var(--muted)}
/* Ending within two days, and only from a real end date: said, not shouted. */
.deal-when.hot{background:#FFE7E3;color:#A8321C}
.deal-tags .badge{box-shadow:none;font-size:calc(12px*var(--fs,1))}
.badge.new{background:var(--mint-ink)}
.deal-brand{margin:0;font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--muted);letter-spacing:.2px}
.deal-h{margin:0;font-size:calc(16px*var(--fs,1));line-height:1.3;width:100%}
.deal-title{border:0;background:none;padding:0;margin:0;font:inherit;color:var(--ink);text-align:start;
  cursor:pointer;display:block;width:100%}
.deal-title span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:800}
/* ONE tap target for the whole top of the card: the photo and the words open
   the sheet with the title, and are not a second and third tab stop. */
.deal-title::after{content:'';position:absolute;inset:-6px;border-radius:16px}
.deal-title:focus-visible{outline:none}
.deal-title:focus-visible::after{outline:2px solid var(--primary)}
/* The one number she wrote, in her own words -- it was the third point. */
.deal-offer{margin:0;max-width:100%;border-radius:10px;padding:3px 9px;font-size:calc(13.5px*var(--fs,1));font-weight:800;
  line-height:1.4;color:var(--primary-deep);background:var(--primary-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deal-lead{margin:0;font-size:calc(14px*var(--fs,1));line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deal-more{font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--primary-ink)}
.deal-go{display:flex;flex-direction:column;gap:8px;margin-top:auto}
/* Soft on the card, like a tile's buy: a column of solid pink bars is a wall
   the photos compete with. The sheet's button is the solid one. */
.deal-go .deal-go-btn{background:var(--primary-soft);color:var(--primary-deep)}
.deal-go-btn{position:relative}
/* the sheet: the photo, the tags, the name, her offer, her post laid out */
/* The picture is laid over its frame, never IN a grid row: sized by
   aspect-ratio alone the row had no definite height, so a PORTRAIT photo
   (every Terminal X product) grew past the frame and was cut to its middle
   -- seen on the live site 2026-09-25. The product drawer's .dr-pic shape. */
.deal-big{position:relative;display:block;width:100%;aspect-ratio:4/3;max-height:40vh;border-radius:16px;
  overflow:hidden;background:#fff;margin:0 0 12px}
.deal-big .deal-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(64px*var(--fs,1))}
#dealBody .deal-tags{margin:0 0 2px}
#dealBody .dr-name{margin:6px 0 8px}
.deal-offer.big{display:block;font-size:calc(15px*var(--fs,1));padding:7px 12px;margin:0 0 12px;-webkit-line-clamp:unset}
.deal-post{white-space:normal}
.deal-post p{margin:0 0 8px}
.deal-post > :last-child{margin-bottom:0}
.deal-points{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:7px}
.deal-points li{position:relative;padding-inline-start:28px;min-height:20px}
/* Her ✔️ points as a list with a drawn check: the emoji came out a heavy
   black tick on an iPhone. Physical borders on purpose -- a tick does not
   mirror in right-to-left. */
.deal-points li::before{content:'';position:absolute;inset-inline-start:0;top:.15em;width:20px;height:20px;
  border-radius:999px;background:var(--mint-soft)}
.deal-points li::after{content:'';position:absolute;inset-inline-start:7px;top:calc(.15em + 4px);width:5px;height:9px;
  border-right:2.5px solid var(--mint-ink);border-bottom:2.5px solid var(--mint-ink);transform:rotate(45deg)}
.deal-until{margin:12px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--muted)}
/* The deal ended while its sheet was open: said where the button was. */
.deal-ended{margin:0;padding:12px;text-align:center;font-weight:700;color:var(--muted)}
#dealBody .cp-code{margin:12px 0 0}
#dealBody .dr-meta{margin:12px 0 0}
@media (prefers-reduced-motion:no-preference){
  .deal.flash{animation:flash 2.2s ease}
  .reel-tile,.deal.skel{animation:none}
  .reel-grid[aria-busy="true"] .reel-tile,.deal.skel{animation:shimmer 1.4s linear infinite}
}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px var(--primary),var(--shadow)}100%{box-shadow:var(--shadow)}}

/* ══════════ her coupons ══════════ */
.cp-sec{margin:6px 0 18px}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.coupon{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px;display:flex;
  flex-direction:column;gap:10px;min-width:0;border:1.5px solid var(--primary-soft)}
.cp-top{display:flex;align-items:center;gap:12px}
.cp-logo{width:44px;height:44px;border-radius:12px;object-fit:contain;background:#fff;flex:none;
  box-shadow:0 0 0 1px var(--line)}
.cp-logo.mono{display:grid;place-items:center;font-size:calc(20px*var(--fs,1));font-weight:800;color:var(--primary-deep);
  background:var(--primary-soft);box-shadow:none}
.cp-name{display:flex;flex-direction:column;min-width:0}
.cp-name b{font-size:calc(17px*var(--fs,1));line-height:1.25}
.cp-name span{color:var(--primary-deep);font-weight:700;font-size:calc(14.5px*var(--fs,1))}
.cp-blurb{margin:0;font-size:calc(14px*var(--fs,1));line-height:1.5;color:var(--ink)}
/* The code: dashed like a real coupon, and itself the button that copies it
   (store.js codeChip). A quiet outline -- the card's one loud thing is its
   name. */
.cp-code{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;border:1.5px dashed #D9B3C1;
  border-radius:12px;padding:8px 14px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;
  text-align:start}
.cp-code span{font-size:calc(13px*var(--fs,1));color:var(--muted);flex:none}
.cp-code code{flex:1;font-size:calc(18px*var(--fs,1));font-weight:800;letter-spacing:1px;color:var(--ink);
  font-family:ui-monospace,Menlo,Consolas,monospace;text-align:start;overflow-wrap:anywhere}
.cp-code .cp-copy{width:18px;height:18px;flex:none;color:var(--primary-deep)}
.cp-code:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cp-code.compact{min-height:44px;padding:6px 12px}
.cp-code.compact code{font-size:calc(16px*var(--fs,1))}
/* One action per card, soft like the deals' -- five solid pink bars down
   the page were the loudest thing on it. At the card's foot whatever is
   above it, so cards side by side end level. */
.cp-go{gap:8px;margin-top:auto}
.cp-share{align-self:center}
/* Every share is a WhatsApp button, in WhatsApp's own green -- its darker
   web shade, which white text can be read on (2026-10-15). */
.btn.wa-btn{background:#008069;color:#fff;border-color:#008069;gap:8px;font-weight:800}
.btn.wa-btn svg{width:19px;height:19px;flex:none}
.wa-vico svg{color:#008069}
@media (hover:hover) and (pointer:fine){.btn.wa-btn:hover{background:#006E5A;border-color:#006E5A}}
/* Inside the iPhone app a share is the iPhone's own sheet (store.js
   appShare), not WhatsApp: her pink, not WhatsApp's green. The list's "send
   me on WhatsApp" stays green -- it really is WhatsApp. */
html.in-ios-app .btn.wa-btn:not(.wa-send){background:var(--primary-ink);border-color:var(--primary-ink);color:var(--on-fill,#fff)}
.coupon .cp-go{background:var(--primary-soft);color:var(--primary-deep)}
.cp-links{margin-top:12px}
/* Cards end where their content does: stretched to a taller neighbour, a
   card with less in it showed a blank hole above its button. */
.cp-grid{align-items:start}
.coupon.bare .cp-offer{margin:0 0 10px;font-weight:700;color:var(--primary-ink);font-size:calc(16px*var(--fs,1))}
.btn .ext,.net-btn .ext{width:17px;height:17px;flex:none}
[dir="rtl"] .btn .ext,[dir="rtl"] .net-btn .ext{transform:scaleX(-1)}
.cp-page{font-size:calc(14px*var(--fs,1));font-weight:700;color:var(--primary-ink);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
/* Her other deals at the same store: one row each -- the words, the code,
   one small link -- under a hairline, so the card still reads as one store. */
.cp-more{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--primary-soft);padding-top:10px}
.cp-more-h{font-size:calc(14px*var(--fs,1));color:var(--muted)}
.cp-more ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cp-deal{display:flex;flex-direction:column;gap:6px}
.cp-deal-offer{margin:0;font-weight:700;color:var(--primary-deep);font-size:calc(15px*var(--fs,1));line-height:1.35}
.cp-deal .cp-go{align-self:flex-start;margin-top:0}
/* The card's foot: the share and "the code didn't work?" side by side on one
   quiet line -- stacked under the button they were a second and a third
   action, in two more styles (2026-10-22, "the web in the pc looks bad"). */
.cp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px}
.cp-foot .fb-entry{margin:0}
.store-hero .cp-foot{justify-content:flex-start}
/* On the home page: a row of small coupons. */
.cp-rail{align-items:stretch}
.coupon.compact{flex:0 0 250px;padding:12px;gap:8px;scroll-snap-align:start}
.coupon.compact .cp-name b{font-size:calc(15px*var(--fs,1))}
.coupon.compact .cp-code code{font-size:calc(16px*var(--fs,1))}
.coupon.compact .btn{margin-top:auto}
/* One store's page. */
.store-head{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.store-head .cp-logo{width:56px;height:56px;border-radius:14px}
.store-head .cp-logo.mono{font-size:calc(26px*var(--fs,1))}
.store-hero .coupon{margin:0 0 18px}
#storeDealsTitle{margin-top:6px}

/* ══════════ her community ══════════ */
.comm-hero{text-align:center;padding:10px 0 4px}
.comm-face{width:96px;height:96px;border-radius:999px;object-fit:cover;display:inline-block;
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--primary)}
.comm-face.ph{display:inline-grid;place-items:center;font-size:calc(40px*var(--fs,1));background:var(--primary-soft)}
.comm-hero .page-h{margin:12px 0 4px}
.comm-bio{margin:0 auto 4px;max-width:420px;font-size:calc(15px*var(--fs,1))}
.comm-invite{margin:0 auto 14px;max-width:420px;color:var(--primary-deep);font-weight:700;font-size:calc(14.5px*var(--fs,1))}
.comm-list{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.net-btn{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:16px;
  background:var(--card);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);border:1.5px solid var(--line)}
.net-ico{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:calc(20px*var(--fs,1));flex:none;
  background:var(--bg)}
.net-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.net-txt b{font-size:calc(15.5px*var(--fs,1));line-height:1.3}
.net-txt small{color:var(--muted);font-size:calc(13px*var(--fs,1))}
.net-btn.small{min-height:48px;padding:6px 10px;border-radius:14px;box-shadow:none}
.net-btn.small .net-ico{width:34px;height:34px;font-size:calc(17px*var(--fs,1))}
/* Each network in its own mark and colour (store.js NET): white on the
   network's colour, in the community list, the menu and the footer alike. */
.net-ico,.soc{color:#fff;background:var(--primary-ink)}
.net-ico svg,.soc svg{width:22px;height:22px}
.net-btn.small .net-ico svg{width:19px;height:19px}
.net-wa .net-ico,.soc.net-wa{background:#128C7E}
.net-tg .net-ico,.soc.net-tg{background:#229ED9}
.net-ig .net-ico,.soc.net-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.net-tt .net-ico,.soc.net-tt{background:#111}
.net-fb .net-ico,.soc.net-fb{background:#1877F2}
.net-yt .net-ico,.soc.net-yt{background:#E00}
.comm-nl{margin:0 0 16px}
/* ══════════ saved on the home screen (2026-10-26) ══════════
   One sheet, the way for HER browser: a home screen with her icon on it
   (what she gets), one question, then each tap with the browser's own
   button drawn into the words. /app carries the same way as a page.
   The drawn buttons copy the phone's look (system font, its grey and blue)
   on purpose -- they are what her eye has to find on the real screen. */
.pwa-box{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:4px 2px 2px;text-align:center}
.pwa-box .wel-title{font-size:calc(22px*var(--fs,1))}
.pwa-box .wel-line{margin:0;font-size:calc(15.5px*var(--fs,1))}
.pwa-home{display:flex;justify-content:center;align-items:flex-start;gap:16px;padding:16px 12px 12px;border-radius:22px;
  background:linear-gradient(155deg,#FBCFE0 0%,#E6D6FF 55%,#CBE2FF 100%)}
.pwa-app{width:52px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pwa-app::before{content:"";width:52px;height:52px;border-radius:13px;background:rgba(255,255,255,.5)}
.pwa-app::after{content:"";width:30px;height:6px;border-radius:3px;background:rgba(255,255,255,.55)}
.pwa-app.me{width:64px}
.pwa-app.me::before,.pwa-app.me::after{content:none}
.pwa-app.me img,.pwa-app.me i{display:block;width:60px;height:60px;border-radius:15px;margin-top:-4px;background:var(--primary);
  box-shadow:0 6px 16px rgba(176,38,84,.32),0 0 0 3px rgba(255,255,255,.9)}
.pwa-app.me small{font:600 calc(11.5px*var(--fs,1))/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:#2B1622;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .pwa-app.me img,.pwa-app.me i{animation:pwa-pop .6s cubic-bezier(.2,1.5,.4,1) .2s both}
}
@keyframes pwa-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.pwa-way{display:flex;flex-direction:column;gap:10px}
.pwa-lead{margin:2px 0 0;font-size:calc(15px*var(--fs,1));line-height:1.5;color:var(--ink);text-align:start}
.pwa-or{margin:4px 0 -2px;font-size:calc(13.5px*var(--fs,1));font-weight:800;color:var(--muted);text-align:start}
.pwa-note{margin:-2px 0 0;font-size:calc(13.5px*var(--fs,1));line-height:1.5;color:var(--muted)}
.pwa-note.pwa-fail{color:var(--primary-deep);font-weight:700}
.pwa-hint{margin:0;font-size:calc(13.5px*var(--fs,1));line-height:1.55;color:var(--muted);text-align:start}
.pwa-steps{list-style:none;margin:0;padding:0;counter-reset:pwa;display:flex;flex-direction:column;gap:8px;text-align:start}
.pwa-steps li{counter-increment:pwa;display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 12px;border-radius:14px;
  background:var(--card);box-shadow:0 0 0 1px var(--line)}
.pwa-n{flex:none;width:calc(24px*var(--fs,1));height:calc(24px*var(--fs,1));border-radius:999px;background:var(--primary-ink);color:var(--on-fill,#fff);
  display:grid;place-items:center;font-weight:800;font-size:calc(13px*var(--fs,1))}
.pwa-n::before{content:counter(pwa)}
.pwa-t{flex:1;min-width:0;font-size:calc(15.5px*var(--fs,1));line-height:1.75;color:var(--ink)}
.pwa-k{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin:0 3px;padding:2px 9px;min-height:30px;
  border-radius:9px;background:#F2F2F7;color:#1C1C1E;border:1px solid #C7C7CC;white-space:nowrap;line-height:1.2;
  font:600 calc(14px*var(--fs,1)) -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.pwa-k.icon{padding:2px 6px}
.pwa-k{max-width:100%}
.pwa-k > span{white-space:normal}   /* larger text: a long label wraps inside its key, never past the screen */
/* The rarer troubles: one fold, under the steps. */
.pwa-help{text-align:start;font-size:calc(13.5px*var(--fs,1));color:var(--muted)}
.pwa-help summary{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;cursor:pointer;font-weight:800;color:var(--primary-deep)}
.pwa-help ul{margin:0 0 4px;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px;line-height:1.55}
/* An iPhone's saved icon opens with an empty list: how hers comes along. */
.pwa-list{margin:0;padding:9px 12px;border-radius:12px;background:var(--mint-soft);color:var(--ink);text-align:start;
  font-size:calc(13.5px*var(--fs,1));line-height:1.55}
.pwa-list .linkbtn{font-weight:800;color:var(--mint-ink);text-decoration:underline;min-height:0;padding:0}
.pwa-k svg{width:calc(19px*var(--fs,1));height:calc(19px*var(--fs,1));flex:none}
.pwa-k.ok{background:#fff;color:#0A60D0}
.pwa-sub{display:block;margin-top:2px;font-size:calc(13.5px*var(--fs,1));color:var(--muted);line-height:1.7}
.pwa-hint .pwa-k{min-height:26px}
.pwa-box .btn svg{width:20px;height:20px;flex:none}
.pwa-box .btn.wide,.app-guide .btn.wide{gap:8px}
.pwa-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 10px;margin-top:-2px}
.pwa-here p{margin:0 0 10px;font-size:calc(14.5px*var(--fs,1));line-height:1.5;color:var(--ink)}
.pwa-done-line{margin:0 0 4px;font-size:calc(18px*var(--fs,1));font-weight:800;color:var(--mint-ink);text-align:center}
.app-guide .pwa-note{text-align:center}
/* Her own look at every case (`?pwa=preview`): a row she scrolls. */
.pwa-cases{display:flex;gap:6px;overflow-x:auto;margin:-6px -4px 10px;margin-inline-end:44px;padding:2px 4px 6px;scrollbar-width:none}
.pwa-cases::-webkit-scrollbar{display:none}
.pwa-cases .chip{flex:none;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font:inherit;font-size:calc(13px*var(--fs,1));font-weight:700;white-space:nowrap}
.pwa-cases .chip.on{background:var(--primary-ink);border-color:var(--primary-ink);color:var(--on-fill,#fff)}
/* /app: the same, on a page: the way first, the reasons after. */
.app-hero{text-align:center;padding:6px 0 2px}
.app-hero .pwa-home{max-width:360px;margin:0 auto}
.app-hero .page-h{margin:14px 0 4px}
.app-hero .page-sub{margin:0 auto 14px;max-width:440px}
.app-guide{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;
  background:linear-gradient(135deg,#FFEAF1 0%,#FFFFFF 75%);border:1.5px solid var(--primary-soft);box-shadow:var(--shadow)}
.app-why-h{margin:22px 0 8px;font-size:calc(17px*var(--fs,1))}
.app-why{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.app-why li{position:relative;padding:11px 14px;padding-inline-start:40px;border-radius:14px;background:var(--card);
  box-shadow:var(--shadow);font-size:calc(14.5px*var(--fs,1));line-height:1.45;color:var(--ink)}
.app-why li::before{content:"✓";position:absolute;inset-inline-start:14px;top:10px;color:var(--mint-ink);font-weight:800}
.app-page.is-installed .app-why-h,.app-page.is-installed .app-why{display:none}
/* The first opening from the icon: a quiet card at the top of the home page. */
.app-hello{margin:4px 0 14px;padding:12px 14px;border-radius:16px;background:var(--card);box-shadow:var(--shadow);
  border:1.5px solid var(--primary-soft)}
.app-hello p{margin:0 0 10px;font-size:calc(14.5px*var(--fs,1));line-height:1.5;color:var(--ink)}
.app-hello-btns{display:flex;gap:8px;flex-wrap:wrap}
/* On the home page: her community, between the rows. */
.comm-card{margin:22px 0 0;padding:14px;border-radius:18px;background:linear-gradient(135deg,#FFEAF1 0%,#FFFFFF 75%);
  border:1.5px solid var(--primary-soft);box-shadow:var(--shadow)}
.comm-card-head{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.comm-card-head h2{margin:0;font-size:calc(17px*var(--fs,1))}
.comm-card-head p{margin:2px 0 0;color:var(--muted);font-size:calc(13.5px*var(--fs,1))}
.comm-card-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.face{width:52px;height:52px;border-radius:999px;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--primary)}
.face.ph{display:grid;place-items:center;font-size:calc(24px*var(--fs,1));background:var(--primary-soft)}
/* Her networks, as small round links at the foot of every page. */
.foot-social{display:flex;justify-content:center;gap:10px;margin:0 0 10px}
.soc{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:calc(20px*var(--fs,1));
  text-decoration:none;box-shadow:var(--shadow)}

/* ══════════ the menu ══════════ */
dialog.menu{width:min(360px,88vw);max-width:none}
[dir="ltr"] dialog.menu{margin:0 auto 0 0}
.menu-head{display:flex;align-items:center;gap:12px;padding:4px 44px 12px 0;border-bottom:1px solid var(--line)}
[dir="rtl"] .menu-head{padding:4px 0 12px 44px}
.menu-name{margin:0;font-size:calc(19px*var(--fs,1));line-height:1.2}
.menu-name:focus{outline:none}
.menu-head p{margin:2px 0 0;font-size:calc(13px*var(--fs,1));color:var(--muted);line-height:1.4}
/* Quiet on purpose: signing in is a secondary thing on this site, and a
   filled pink block at the top of the menu pulled the eye away from the
   pages it exists to lead to. */
.menu-acct{display:block;width:100%;margin:12px 0 4px;min-height:48px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:calc(15px*var(--fs,1));font-weight:600;cursor:pointer;
  text-align:start;padding:10px 14px}
.menu-nav{display:flex;flex-direction:column;margin:6px 0 0}
.menu-item,.menu-cats summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 8px;border-radius:12px;
  color:var(--ink);text-decoration:none;font-family:inherit;font-size:calc(16px*var(--fs,1));font-weight:600;background:none;border:0;
  width:100%;text-align:start;cursor:pointer;list-style:none}
.menu-cats summary::-webkit-details-marker{display:none}
.menu-item[aria-current="page"]{background:var(--primary-soft);color:var(--primary-deep)}
.mi-ico{width:30px;text-align:center;font-size:calc(20px*var(--fs,1));flex:none;display:grid;place-items:center}
.mi-ico img{width:28px;height:28px;border-radius:8px;object-fit:contain;background:#fff}
.mi-txt{flex:1;min-width:0}
.mi-sub{display:block;font-size:calc(12.5px*var(--fs,1));color:var(--muted);font-weight:600}
.menu-item .mi-sub{order:3;flex-basis:auto}
.mi-count{background:var(--primary);color:var(--on-fill,#fff);border-radius:999px;min-width:24px;height:24px;line-height:24px;
  text-align:center;font-size:calc(12.5px*var(--fs,1));padding:0 6px}
.mi-dot{width:9px;height:9px;border-radius:99px;background:var(--primary)}
.menu-cat-list{display:flex;flex-direction:column;padding:0 0 4px;margin-inline-start:22px}
.menu-cat{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-size:calc(15px*var(--fs,1))}
.menu-cat[aria-current="page"]{background:var(--primary-soft)}
.menu-cat img{width:32px;height:32px;border-radius:999px;object-fit:cover;flex:none;background:var(--bg)}
.menu-sec{margin:14px 8px 2px;font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--muted);letter-spacing:.3px}
.menu-social{display:flex;flex-wrap:wrap;gap:8px;padding:6px 8px 0}
.menu-foot{margin:16px 0 0;padding:12px 8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;
  gap:4px;align-items:flex-start;font-size:calc(14px*var(--fs,1))}
.menu-foot a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.menu-lang{margin:0;padding:0 4px;text-decoration:none;color:var(--ink);font-weight:700}
.menu-fb{margin:0;padding:0 4px;min-height:44px;color:var(--muted);font-weight:600;text-decoration:none}
/* The accessibility line sits right after feedback and is styled EXACTLY like it (owner, 2026-10-25: "supposed to be
   in the same style as שליחת משוב") -- it carries the .menu-fb class, so there is no rule of its own here. */
.menu-how summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted);font-weight:600}
.menu-how p{margin:0 0 8px;font-size:calc(13.5px*var(--fs,1));line-height:1.55;color:var(--ink)}

/* ══════════ toast ══════════ */
.toast{
  position:fixed;z-index:60;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 16px);background:var(--ink);color:var(--card);border-radius:999px;
  padding:11px 20px;font-size:calc(14.5px*var(--fs,1));font-weight:600;box-shadow:0 8px 24px rgba(51,32,46,.28);
  /* Its own width, up to the screen's: from left:50% a shrink-to-fit box
     could take only half the screen, and "הקוד WOIL09 הועתק ✓ — …" broke
     into a three-line oval (2026-10-16). */
  width:max-content;max-width:calc(100vw - 32px);text-align:center;
}
.toast[popover]{top:auto;right:auto;margin:0;border:0;overflow:visible;width:max-content;height:auto}
body.has-cartbar .toast{bottom:calc(var(--safe-b) + 80px)}
/* The strip is up: the toast sits at the top, never on its buttons (the open-coupon-sheet rule). */
body.has-statsbar .toast{top:calc(var(--safe-t) + 70px);bottom:auto}

/* ══════════ motion and hover ══════════ */
@keyframes heart-pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  .tile,.mini{transition:box-shadow .15s ease,transform .15s ease}
  .tile-img,.skel-img,.skel-line{animation:shimmer 1.4s linear infinite}
  .cart-toggle{transition:background .15s ease,color .15s ease,transform .12s ease}
  .cart-toggle:active{transform:scale(.92)}
  .heart-toggle svg{transition:transform .12s ease,fill .15s ease}
  .heart-toggle:active svg{transform:scale(.82)}
  /* A like beats once -- on the heart she tapped, and on the bar's heart,
     where it went. */
  .heart-toggle.pop svg{animation:heart-pop .36s ease}
  .btn:active{transform:translateY(1px)}
  .btn.busy::after{animation:spin .7s linear infinite}
  .vspin{animation:spin .8s linear infinite}
  .dr-pic .dr-img{transition:opacity .2s ease}
  .dr-pic:not(.ok){animation:shimmer 1.4s linear infinite}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-200% 0}}
.tile-img.ok,.mini-img.ok{animation:none;background:var(--bg)}
@media (hover:hover) and (pointer:fine){
  .tile:hover,.mini:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
  .cats button:hover,.qf:hover{border-color:var(--primary)}
  .btn:hover{filter:brightness(1.05)}
  .btn.ghost:hover{border-color:var(--primary);filter:none}
  .btn.buy:hover{background:var(--primary-ink);color:var(--on-fill,#fff);filter:none}
  .langbtn:hover{color:var(--ink);text-decoration:underline}
  .tab:not([aria-current="page"]):hover{box-shadow:0 0 0 1.5px var(--primary)}
  .cart-toggle:hover{transform:scale(1.06)}
  .heart-toggle:hover svg{transform:scale(1.1)}
  .cp-code:hover{border-color:var(--primary)}
  .home-all:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .coupon .cp-go:hover{background:var(--primary-ink);color:var(--on-fill,#fff);filter:none}
}

/* ══════════ desktop — ADDED here, never by changing a shared rule ══════════ */
/* ── price alerts (store.js "price alerts") ─────────────────────────────
   The bell lives only on the small products of her alerts' "you looked at
   these" row, under the cart toggle; a product's own sheet offers the email
   as a line under "buy" and "save" (.al-offer, below). Filled once she
   watches it. */
.mini-bell.on{--bell-fill:currentColor;color:var(--primary-ink)}
.mini-bell{
  position:absolute;top:56px;inset-inline-end:6px;z-index:2;border:0;border-radius:999px;
  width:44px;height:44px;background:rgba(255,255,255,.94);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(51,32,46,.14);
}
.mini-bell svg{width:21px;height:21px}
.alert-dlg .al-title{margin:0 0 12px;font-size:calc(20px*var(--fs,1));line-height:1.3}
.al-prod{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:700;font-size:calc(14.5px*var(--fs,1))}
.al-prod img{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;background:var(--card)}
.al-prod span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.al-why{margin:0 0 14px;line-height:1.5}
.al-today{margin:0 0 10px;font-weight:700;color:var(--ink)}
/* The consent: the box is UNTICKED until she ticks it, and the words beside
   it are exactly the words she agrees to (consent.js, from alerts-worker/).
   It sits under the rule, on the same sheet; the one button is always the
   loud one -- pressed unticked, it says why and sends nothing. */
.al-consent{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;padding:12px 14px;border-radius:var(--radius);
  background:var(--card);border:1.5px solid var(--line);font-size:calc(14px*var(--fs,1));line-height:1.55;cursor:pointer}
.al-consent .nw{white-space:nowrap}
.al-consent input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--primary-ink)}
.al-err{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#FDECEC;color:#8E1F1F;font-size:calc(14.5px*var(--fs,1))}
/* The choices on ONE row: 5% to 20% (2026-10-18). */
.al-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.chip.al-pct,.chip.al-rec{min-height:44px;padding:6px 4px;border-radius:999px;font:inherit;font-weight:700;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.chip.al-pct[aria-pressed="true"]{background:var(--primary-ink);border-color:var(--primary-ink);color:var(--on-fill,#fff)}
.chip.al-rec{margin-top:10px;padding:6px 14px;background:var(--mint-soft);border-color:var(--mint-soft);color:var(--mint-ink)}
/* The price is the second way, quieter: one line, beside its words. */
.al-target{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:calc(14.5px*var(--fs,1))}
.al-target span{flex:none}
.al-target input{flex:1;min-width:0;max-width:150px;font:inherit;font-size:calc(16px*var(--fs,1));min-height:44px;padding:6px 12px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);direction:ltr;text-align:start}
.al-mail{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:var(--radius);
  background:var(--sun-soft);color:var(--sun-ink);font-size:calc(14.5px*var(--fs,1))}
.al-mail svg{flex:none;width:22px;height:22px;margin-top:2px}
.al-mail p{margin:0}
.al-mail .al-sent{font-weight:700}
.al-mail .al-where{margin-top:4px}
.al-mail .linkbtn{margin-top:6px}
.al-resent{display:block;margin-top:6px;font-weight:700}
.al-card{padding:16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);margin:0 0 14px}
.al-card p{margin:0 0 12px}
.al-card.warn{background:var(--sun-soft);color:var(--sun-ink);box-shadow:none}
.al-note{color:var(--muted)}
/* The slot count beside the title, not under a second heading. */
/* Beside it when both fit; under it on a phone, never wrapping the title. */
.al-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:10px}
.al-top .al-count{margin:-4px 0 8px}
.al-count{color:var(--muted);font-weight:700;font-size:calc(14px*var(--fs,1));white-space:nowrap}
.al-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.al-row{display:flex;gap:12px;padding:12px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);min-width:0}
.al-row.al-focus{box-shadow:0 0 0 2px var(--primary-ink),var(--shadow)}
.al-pic{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;border:0;padding:0;background:var(--bg);
  display:grid;place-items:center;cursor:pointer}
.al-pic img{width:56px;height:56px;object-fit:cover}
.al-txt{min-width:0;flex:1}
.al-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;padding:0;
  border:0;background:none;font:inherit;font-weight:700;font-size:calc(15px*var(--fs,1));line-height:1.3;color:var(--ink);text-align:start;cursor:pointer}
.al-price{margin:4px 0 0;font-size:calc(15px*var(--fs,1));font-weight:700;overflow-wrap:anywhere}
.al-rule{margin:2px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--muted);overflow-wrap:anywhere}
.al-st{color:var(--ink)}
/* Colour only where it means something: a drop, and a product no longer
   sold. Never a faded row -- that took its button's contrast with it. */
.al-row.st-fired .al-st{color:var(--mint-ink);font-weight:800}
.al-row.st-gone .al-st,.al-row.st-gone .al-name,.al-row.st-gone .al-price{color:var(--muted)}
.al-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px}
.al-acts .al-rm{color:var(--muted);text-decoration:none;font-weight:600}
.al-sure{font-weight:700;font-size:calc(14px*var(--fs,1))}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--on-fill,#fff)}
.al-seen{margin:4px 0 8px}
.al-paste{margin:22px 0 0}
.al-paste label{display:block;margin-bottom:8px;color:var(--muted);font-size:calc(14.5px*var(--fs,1))}
.al-paste-row{display:flex;gap:8px}
.al-paste-row input{flex:1;min-width:0;font:inherit;font-size:calc(16px*var(--fs,1));min-height:48px;padding:8px 12px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.al-paste-row .btn{flex:none}
.al-stop{margin:28px 0 8px;font-size:calc(14px*var(--fs,1));color:var(--muted)}
.al-stop .linkbtn{color:var(--muted)}
/* Her alerts, under the cart in the same drawer (2026-10-15). */
.cart-alerts{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.cart-alerts .al-top{align-items:baseline}
.cart-alerts .al-top h2{margin:0 0 6px;font-family:inherit;font-size:calc(20px*var(--fs,1));line-height:1.3;font-weight:800;color:var(--ink)}
.cart-alerts .page-sub{margin:0 0 12px;color:var(--muted);font-size:calc(14px*var(--fs,1))}
/* A row's two sentences (2026-10-15): the rule, then where the watch stands. */
.al-state{margin:4px 0 0;font-size:calc(15px*var(--fs,1));line-height:1.4;font-weight:600;overflow-wrap:anywhere}
.al-state .linkbtn{margin:0;font-size:calc(14px*var(--fs,1))}
.al-row.is-pasted .al-st{color:var(--muted)}
.al-pic img.al-ph{object-fit:contain;padding:8px;background:var(--card)}
.al-rule{display:flex;align-items:baseline;gap:10px}
.al-rule .al-rm{margin-inline-start:auto;color:var(--muted);text-decoration:none;font-weight:600;font-size:calc(13.5px*var(--fs,1));min-height:32px}
/* Where she finds the feature first: the home section, the signed-out page,
   the line on the drop list. */
.al-home #homeAlertsBody{padding:16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.al-home-line{margin:0;line-height:1.5}
.al-home .al-paste{margin-top:12px}
.al-free{margin:10px 0 0;color:var(--muted);font-size:calc(14px*var(--fs,1))}
/* Signed out, one card: the promise, three steps as pictures, the way in
   (2026-10-16). */
.al-promo{padding:18px 16px 8px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.al-pitch{margin:0 0 14px;font-size:calc(16.5px*var(--fs,1));font-weight:800;color:var(--ink);line-height:1.35}
.al-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  counter-reset:alstep;position:relative}
/* A thin line behind the three circles says "one after the other". */
.al-steps::before{content:"";position:absolute;top:22px;inset-inline:16%;height:2px;background:var(--primary-soft)}
.al-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  font-size:calc(13px*var(--fs,1));line-height:1.3;color:var(--ink);counter-increment:alstep}
.al-step-ico{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-deep);box-shadow:0 0 0 4px var(--card)}
.al-step-ico svg{width:21px;height:21px}
.al-step-ico::after{content:counter(alstep);position:absolute;top:-4px;inset-inline-end:-6px;width:18px;height:18px;
  border-radius:50%;background:var(--primary-ink);color:var(--on-fill,#fff);font-size:calc(11px*var(--fs,1));font-weight:800;line-height:18px;text-align:center}
.al-in-label{margin:18px 0 8px;font-size:calc(14.5px*var(--fs,1));font-weight:700;color:var(--ink)}
.al-land-in{margin:0}
.al-land-in.al-two{flex-direction:row}
.al-land-in.al-two .btn{flex:1;min-width:0;min-height:50px;font-size:calc(15.5px*var(--fs,1))}
.al-promo .al-free{margin:12px 0 8px;text-align:center;font-size:calc(13px*var(--fs,1))}
.cart-alerts .al-paste{margin-top:18px}
.empty-paste{width:100%;max-width:420px;margin:16px auto 0;text-align:start}
/* Buying first (PLAN_price_alerts.md §21): the product's bar is "buy" and
   "save". Once she has said "not now", ONE quiet line under them offers the
   email -- a text button, never a third button beside "buy". */
.drawer-bar:has(.al-offer:not([hidden])){flex-wrap:wrap;row-gap:2px}
.al-offer{flex:1 1 100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 6px;
  min-height:40px;font-size:calc(14px*var(--fs,1));color:var(--muted);text-align:center}
.al-offer-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border:0;background:none;
  color:var(--primary-deep);font:inherit;font-size:calc(14.5px*var(--fs,1));font-weight:700;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.al-offer-btn svg,.cart-bell svg{flex:none;width:18px;height:18px}
.al-offer-btn.on,.cart-bell.on{--bell-fill:currentColor;text-decoration:none;color:var(--mint-ink)}
/* Her list: the email, under the product's name -- the row's button stays "open". */
.cart-bell{display:inline-flex;align-items:center;gap:4px;margin-top:2px;min-height:32px;padding:0;
  font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--primary-deep);white-space:nowrap}
.cart-state.drop{color:var(--mint-ink)}
/* Her limit: what she has, today's price, the way to buy it. */
.al-full{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.al-full-row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:8px}
.al-full-row img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg)}
.al-full-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:calc(14px*var(--fs,1));line-height:1.3}
.al-full-txt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.al-full-price{color:var(--muted);font-size:calc(13px*var(--fs,1))}
.al-full-row .btn{flex:none;min-height:44px}
.al-saved{color:var(--mint-ink);font-weight:700}
/* The way into her alerts from the account she just signed in with. */
.acct-alerts-go{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.acct-alerts-go svg{width:20px;height:20px}
/* The alerts sign-in asks one short thing: the display face at 36px was
   louder than the buttons it introduces. */
.acct-alerts .acct-title{font-size:calc(28px*var(--fs,1))}

/* ══════════ רשימות ציוד: her ready lists (PLAN_site_lists.md) ══════════
   A card per list (ONE picture), and a list page that reads as a
   checklist: what you already have is ticked off, and one bar at the foot
   puts the rest into the cart. */
.lc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.lcard{display:flex;flex-direction:column;background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  overflow:hidden;text-decoration:none;color:var(--ink);min-width:0}
.lcard.skel{min-height:220px;box-shadow:none;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
/* ONE picture per list (2026-10-18): her illustration of the moment, or the
   first product's photo, on the illustrations' own blush. Title and count
   centred under it, no description: the card says what it is for. */
.lc-pic{display:block;aspect-ratio:1/1;background:#FBE7EC;overflow:hidden}
.lc-pic img{width:100%;height:100%;object-fit:cover;display:block}
.lc-pic .ph{display:grid;place-items:center;height:100%;font-size:calc(52px*var(--fs,1))}
.lc-body{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 10px 12px;text-align:center}
.lc-title{font-size:calc(15.5px*var(--fs,1));line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.lc-meta{font-size:calc(12.5px*var(--fs,1));color:var(--muted);font-weight:700}
.lc-have{font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--mint-ink)}
.lc-rail .lcard{flex:0 0 148px;scroll-snap-align:start}
.lc-rail .lc-title{font-size:calc(13.5px*var(--fs,1))}
.lc-rail .lc-body{padding:8px 8px 10px}
.empty-note{grid-column:1/-1;color:var(--muted);text-align:center;margin:24px 0}

.list-hero{margin:6px 0 4px}
.lh-top{display:flex;align-items:center;gap:12px}
.lh-pic{flex:none;width:72px;height:72px;border-radius:16px;object-fit:cover;background:#FBE7EC}
.lh-emoji{flex:none;width:56px;height:56px;border-radius:999px;background:var(--primary-soft);display:grid;
  place-items:center;font-size:calc(30px*var(--fs,1))}
.lh-top .page-h{margin:0;font-size:calc(28px*var(--fs,1));line-height:1.2}
.lh-meta{margin:2px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--muted);font-weight:700}
.lh-intro{display:flex;align-items:flex-start;gap:10px;background:var(--card);border-radius:16px;padding:12px;
  margin:12px 0 10px;box-shadow:var(--shadow)}
.lh-intro p{margin:0;font-size:calc(15px*var(--fs,1));line-height:1.5}
.lh-head{min-width:0;flex:1}
.lh-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lh-share{width:44px;height:44px;border:0;border-radius:999px;background:#008069;color:var(--on-fill,#fff);cursor:pointer;
  display:grid;place-items:center;padding:0;flex:none}
.lh-share svg{width:22px;height:22px}
.lr-img .ph{display:grid;place-items:center;font-size:calc(24px*var(--fs,1));background:var(--bg)}
.list-progress{margin:14px 0 6px}
.lp-line{margin:0 0 6px;font-size:calc(14px*var(--fs,1));font-weight:700}
.lp-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.lp-fill{display:block;height:100%;border-radius:999px;background:var(--mint)}
.lp-fill.w0{width:0%}.lp-fill.w5{width:5%}.lp-fill.w10{width:10%}.lp-fill.w15{width:15%}.lp-fill.w20{width:20%}.lp-fill.w25{width:25%}.lp-fill.w30{width:30%}.lp-fill.w35{width:35%}.lp-fill.w40{width:40%}.lp-fill.w45{width:45%}.lp-fill.w50{width:50%}.lp-fill.w55{width:55%}.lp-fill.w60{width:60%}.lp-fill.w65{width:65%}.lp-fill.w70{width:70%}.lp-fill.w75{width:75%}.lp-fill.w80{width:80%}.lp-fill.w85{width:85%}.lp-fill.w90{width:90%}.lp-fill.w95{width:95%}.lp-fill.w100{width:100%}
.lrows{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
/* One row, one line of thought: picture · name and her note · the two
   answers stacked at the end ("הוספה", and "כבר יש לי" under it). */
.lrow{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:10px}
.lrow.skel{height:84px;box-shadow:none;
  background:linear-gradient(100deg,#F9E7EC 30%,#FFF3F6 50%,#F9E7EC 70%) 0 0/200% 100%}
.lr-img{width:64px;height:64px;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--bg);cursor:pointer}
.lr-img img{width:100%;height:100%;object-fit:cover;display:block}
.lr-img .ph{display:grid;place-items:center;height:100%;font-size:calc(26px*var(--fs,1))}
.lr-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.lr-name{border:0;background:none;padding:0;margin:0;font-family:inherit;font-size:calc(14.5px*var(--fs,1));font-weight:700;line-height:1.3;
  color:var(--ink);text-align:start;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lr-note{margin:0;font-size:calc(13px*var(--fs,1));line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.lrow .tile-store{font-size:calc(11.5px*var(--fs,1))}
.lr-acts{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:86px}
.lr-add{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 10px;border:0;
  border-radius:999px;background:var(--primary-soft);color:var(--primary-deep);font-family:inherit;font-size:calc(13.5px*var(--fs,1));
  font-weight:800;cursor:pointer}
.lr-add svg{width:18px;height:18px;flex:none}
.lr-add[aria-pressed="true"]{background:var(--primary);color:var(--on-fill,#fff)}
.lr-have{min-height:36px;padding:0 4px;border:0;background:none;color:var(--ink);font-family:inherit;font-size:calc(12.5px*var(--fs,1));
  font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
/* A product she already has: one crossed-off line, "ביטול" at its end. */
.lrow.have{grid-template-columns:44px minmax(0,1fr) auto;background:rgba(255,255,255,.5);box-shadow:none;
  padding:6px 10px}
.lrow.have .lr-img{width:44px;height:44px;opacity:.5}
.lrow.have .lr-name{opacity:.6;text-decoration:line-through;-webkit-line-clamp:1;font-size:calc(13.5px*var(--fs,1))}
.lr-gotit{font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--mint-ink)}
.lrow.have .lr-have{min-height:44px;padding:0 8px;font-size:calc(13px*var(--fs,1))}
.list-bar{position:fixed;z-index:40;inset-inline:0;bottom:0;padding:10px 16px calc(var(--safe-b) + 10px);
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(51,32,46,.10)}
.list-bar .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.list-bar .btn svg{width:22px;height:22px;flex:none}
.lb-done{margin:6px 0;text-align:center;font-weight:700;color:var(--mint-ink)}
body.has-listbar{padding-bottom:calc(var(--safe-b) + 88px)}
/* While the statistics strip holds the foot of the screen, the bar steps
   into the page under the rows instead of vanishing: it is the action. */
body.has-statsbar .list-bar{position:static;transform:none;width:auto;margin:14px 0 0;padding:0;
  background:none;border:0;box-shadow:none}
#listOthers{margin-top:26px}
.dr-lists{margin:10px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dr-list{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px 12px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary-deep);font-weight:700;text-decoration:none}

@media (min-width:900px){
  :root{--bar-h:72px}
  .wrap{max-width:1180px;padding:0 24px}
  .brand{font-size:calc(23px*var(--fs,1))}
  /* The search in the middle of the bar, wide; the 🔍 button is the phone's. */
  .bar-search{display:flex;flex:1 1 auto;justify-content:center;min-width:0;padding-inline:28px}
  .bar-search .search{max-width:620px;width:100%}
  .bar-search .search input{min-height:48px;background:var(--bg);font-size:calc(16.5px*var(--fs,1))}
  .bar-search .search input:focus{background:#fff}
  .top-search{display:none}
  #searchBtn{display:none}
  .tabs-row{justify-content:center;gap:6px}
  .top{padding:22px 0 4px}
  .hello{margin:0 0 6px;gap:16px}
  .hello-face{width:68px;height:68px}
  .value{margin-top:20px}
  .value-title{font-size:calc(24px*var(--fs,1));margin-bottom:12px}
  .value-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .vcard{min-height:92px;padding:16px}
  .vc-ico{width:48px;height:48px}
  .vc-txt b{font-size:calc(16px*var(--fs,1))}
  .vc-txt small{font-size:calc(13.5px*var(--fs,1))}
  .picks-rail .mini{flex-basis:214px}
  .hello-text{font-size:calc(16.5px*var(--fs,1))}
  .hello-text b{font-size:calc(34px*var(--fs,1))}
  .rail-head h2,.sec-title{font-size:calc(26px*var(--fs,1))}
  .rail-sec{margin-top:34px}
  /* Sized so her twelve categories and "all" share ONE row on a laptop; a
     thirteenth circle alone on a second row read as a mistake. */
  .circle{flex-basis:76px}
  .circle .ring{width:72px;height:72px}
  .circle b{max-width:80px;font-size:calc(12.5px*var(--fs,1))}
  /* Fifteen circles are ~1,500px and a laptop's row ~1,130: the last ones ran
     off the page, and a mouse has no sideways gesture to reach them. A laptop
     has the room to show every category at once. */
  .circles{flex-wrap:wrap;overflow:visible;gap:14px 4px;justify-content:center}
  /* A laptop lists her stores as ROWS, one under the other, each in the same
     columns: the store | its code | the button. A grid of cards left holes
     wherever one store had more deals than its neighbours (2026-10-22). Her
     other deals at a store are rows in the same three columns, and the foot
     sits at the row's reading start. The home page's strip and a store's own
     page keep their cards. */
  #cpCodes,#cpLinks{grid-template-columns:minmax(0,1fr);gap:10px}
  #cpCodesSec .coupon{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 260px;
    column-gap:24px;row-gap:10px;align-items:center;padding:16px 20px;grid-auto-flow:row dense}
  #cpCodesSec .coupon > *{grid-column:1/-1}
  #cpCodesSec .coupon > .cp-top{grid-column:1;grid-row:1}
  #cpCodesSec .coupon > .cp-code{grid-column:2;grid-row:1}
  #cpCodesSec .coupon > .cp-go{grid-column:3;grid-row:1;margin-top:0}
  #cpCodesSec .coupon > .cp-page{grid-column:1;justify-self:start;min-height:32px}
  #cpCodesSec .cp-blurb{max-width:70ch}
  #cpCodesSec .cp-more{gap:6px;padding-top:12px}
  #cpCodesSec .cp-more ul{gap:8px}
  #cpCodesSec .cp-deal{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 260px;
    column-gap:24px;align-items:center}
  #cpCodesSec .cp-deal > .cp-deal-offer{grid-column:1}
  #cpCodesSec .cp-deal > .cp-code{grid-column:2}
  #cpCodesSec .cp-deal > .cp-go{grid-column:3;align-self:center;justify-self:stretch}
  #cpCodesSec .cp-foot{justify-content:flex-start}
  /* The call to action keeps its band but gathers its content in the middle:
     across 1,130px the arrow sat a hand's width from the words it belongs to. */
  .home-all{justify-content:center;gap:18px}
  .home-all .ha-txt{flex:0 1 auto}
  .comm-card-btns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comm-list{max-width:560px;margin-inline:auto}
  .page-title,.page-h{font-size:calc(38px*var(--fs,1))}
  /* A laptop has room: the categories wrap beside her quick filters. */
  .chiprow{overflow:visible;align-items:flex-start}
  .chiprow > .cats{flex:1 1 0;min-width:0;flex-wrap:wrap}
  .cats{flex-wrap:wrap;overflow:visible}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
  .mini{flex-basis:170px}
  .tile-name{font-size:calc(15px*var(--fs,1))}
  dialog.drawer{width:480px}
  /* A 448px picture put "buy" under the close bar at 1280x800. */
  .dr-pic{max-height:40vh}
  /* The bar a mouse needs to scroll a row: a soft tint of the site's pink
     (grey was too loud), with room under it before the next heading. */
  .rail{scrollbar-width:thin;scrollbar-color:rgba(232,77,116,.28) transparent;padding-bottom:18px}
  .reel-band .rail{scrollbar-color:rgba(255,255,255,.28) transparent}
  /* On the page's full width the form is one row; inside the 480px drawer
     three fields in a row would be cramped, so there it stays stacked. */
  .nl-foot .nl-fields,.grid-note .nl-fields{flex-direction:row;align-items:stretch}
  .nl-foot .nl-fields input,.grid-note .nl-fields input{flex:1;min-width:0}
  .nl-foot .nl-fields .btn,.grid-note .nl-fields .btn{flex:none;padding:10px 24px}
  /* On a laptop the bar's cart button is always in view; a second, floating
     one is clutter. */
  .cartbar{display:none !important}
  body.has-cartbar{padding-bottom:calc(var(--safe-b) + 24px)}
  body.has-cartbar .toast{bottom:calc(var(--safe-b) + 16px)}
  /* The strip becomes a card, centred, the width of the tab bar on the board. */
  .statsbar{inset-inline:auto;left:50%;transform:translateX(-50%);width:min(100%,620px);
    bottom:16px;border:1px solid var(--line);border-radius:18px}
  .reel-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
  .deal-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
  .deal-pic{width:120px;height:120px}
  /* On a laptop the video and her words sit side by side, not stacked. */
  /* The video column is exactly a 9:16 reel's width at the dialog's height:
     a fixed 1040px left 110px of black on each side of it. */
  dialog.viewer{width:min(calc(min(92dvh,900px) * 9 / 16 + 360px),100%);height:min(92dvh,900px);
    margin:auto;border-radius:18px;overflow:hidden}
  dialog.viewer[open]{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr)}
  .viewer-sheet{max-height:none;border-radius:0;padding:22px 20px}
  /* The heart, the cart, Instagram and share: two to a row in the side panel,
     where four in one row folded their words onto two lines. */
  .viewer-sheet .dr-row{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* The video band and the category index: after the base rules they reshape
   (source order decides at equal specificity -- the lesson this file has
   paid for). */
@media (prefers-reduced-motion:no-preference){
  .reel-preview{transition:opacity .35s ease}
  .reel-play{transition:opacity .2s ease}
}
@media (min-width:641px){
  .reel-band{margin-inline:0;border-radius:22px;padding-inline:18px}
  .reel-band .rail{margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px}
}
@media (min-width:900px){
  .reel-band .reel-tile{flex-basis:200px}
}
@media (hover:hover) and (pointer:fine){
}

/* Whose product it is, above its name: an iHerb / Terminal X item (2026-10-13). */
.tile-store{display:block;font-size:calc(11.5px*var(--fs,1));font-weight:700;color:var(--muted);margin:0 0 2px}

/* ══════════ coupon sets (2026-10-14) ══════════
   A sale's codes: each row what it saves and above what, with the code
   itself as the copy button; the card's ONE action goes to the sale. */
.coupon.cpn{gap:8px}
.cpn-h{margin:0;font-size:calc(17px*var(--fs,1));line-height:1.3;font-weight:800}
.cpn-sub{margin:0;font-size:calc(14px*var(--fs,1));color:var(--muted);line-height:1.45}
.cpn-upto{margin:0;align-self:flex-start;border-radius:10px;padding:3px 10px;font-size:calc(14px*var(--fs,1));font-weight:800;
  color:var(--primary-deep);background:var(--primary-soft)}
.cpn-how{margin:2px 0 0;font-size:calc(13.5px*var(--fs,1));line-height:1.5;color:var(--muted)}
.cpn-tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cpn-tier{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;
  padding:6px 6px 6px 10px;padding-inline-start:12px;border-radius:14px;background:var(--bg)}
.cpn-amt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cpn-amt b{font-size:calc(16px*var(--fs,1));font-weight:800;color:var(--ink)}
.cpn-amt small{font-size:calc(12.5px*var(--fs,1));color:var(--muted)}
.cp-code.tier{width:auto;flex:none;min-height:44px;padding:6px 12px;gap:8px;background:var(--card)}
.cp-code.tier code{flex:none;font-size:calc(16px*var(--fs,1))}
/* Copied: said on the code itself, where her eye is. */
.cp-code.copied{border-style:solid;border-color:var(--mint-ink);background:var(--mint-soft)}
.cp-code.copied .cp-copy{display:none}
.cp-code.copied::after{content:'✓';font-weight:800;color:var(--mint-ink);font-size:calc(17px*var(--fs,1));line-height:1}
.cpn-terms{margin:0;font-size:calc(13px*var(--fs,1));line-height:1.5;color:var(--muted);white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#dealBody .cpn-upto{margin:0 0 8px}
#dealBody .cpn-how{margin:0 0 8px}
#dealBody .cpn-terms{margin:10px 0 0;-webkit-line-clamp:unset;display:block}
/* the pop-up */
dialog.drawer.cpn-pop{height:fit-content;max-height:calc(100dvh - var(--safe-t) - 24px);
  width:min(100%,560px);margin:auto auto 0;border-start-start-radius:22px;border-start-end-radius:22px;
  box-shadow:0 -12px 40px rgba(51,32,46,.22)}
dialog.drawer.cpn-pop .drawer-body{padding-top:20px}
dialog.drawer.cpn-pop .drawer-x{top:10px}
html:has(dialog.drawer.cpn-pop[open]){overflow:hidden;scrollbar-gutter:stable}
/* Her face beside "new coupons from Noa": a person's tip, not a generic ad
   a mother closes on reflex. */
.cpn-kicker{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-size:calc(14px*var(--fs,1));font-weight:800;
  color:var(--primary-deep);padding-inline-end:44px}
.cpn-kicker .face{width:28px;height:28px;border-radius:99px;flex:none;object-fit:cover}
.cpn-kicker .face.ph{display:grid;place-items:center;font-size:calc(15px*var(--fs,1));background:var(--primary-soft)}
.cpn-pop-set{display:flex;flex-direction:column;gap:8px}
.cpn-pop-set + .cpn-pop-set{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cpn-pop-h{margin:0;font-size:calc(19px*var(--fs,1));line-height:1.3;font-weight:800;padding-inline-end:44px}
.cpn-pop-set .deal-tags{padding-inline-end:44px}
.cpn-pop-go{margin-top:4px}
/* The sale button stays on screen while the codes scroll under it: on a
   360x640 phone it sat half below the fold, and the "WOIL09 הועתק ·" it
   turns into after a copy was never seen (2026-10-16). */
#cpnPopBody .cpn-pop-go{position:sticky;bottom:calc(var(--safe-b, 0px) + 10px);z-index:1;
  box-shadow:0 -10px 14px 6px var(--card, #fff)}
.cpn-pop-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
#cpnPopBody h2:focus{outline:none}
/* The first-visit welcome (2026-10-18): her face, one sentence, one button. */
.wel-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 4px 4px}
.wel-face .face{width:72px;height:72px;border-radius:99px;object-fit:cover;box-shadow:0 0 0 3px var(--primary-soft)}
.wel-face .face.ph{display:grid;place-items:center;font-size:calc(32px*var(--fs,1));background:var(--primary-soft)}
.wel-who{margin:2px 0 0;font-size:calc(14px*var(--fs,1));font-weight:800;color:var(--primary-deep)}
.wel-title{margin:0;font-size:calc(24px*var(--fs,1));line-height:1.25;font-weight:800}
.wel-title:focus{outline:none}
.wel-line{margin:0 0 10px;font-size:calc(16px*var(--fs,1));line-height:1.45;color:var(--ink)}
.wel-cta{background:var(--primary-ink);color:var(--on-fill,#fff);font-size:calc(17px*var(--fs,1));min-height:52px}
.wel-later{margin-top:2px;min-height:44px;padding:0 18px;border:0;background:none;font:inherit;font-size:calc(15px*var(--fs,1));
  color:var(--muted);cursor:pointer}
.wel-later:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:10px}
@media (min-width:900px){
  dialog.drawer.cpn-pop{width:460px;margin:auto;border-radius:22px;box-shadow:0 18px 60px rgba(51,32,46,.28)}
  /* The deals' own columns: three card widths on one page read as three
     different things (measured 558px / 367px / 367px). */
  .cpn-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}
/* A coupon set on the home strip: worth, time, one tap to every code. */
.coupon.cpn-mini{gap:7px}
.cpn-mini .deal-tags{margin:0}
.cpn-mini-h{font-size:calc(15px*var(--fs,1));line-height:1.3;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cpn-mini .cpn-upto{font-size:calc(13px*var(--fs,1))}
.cpn-upto .nw{white-space:nowrap}
/* A coupon sheet keeps its one button at the bottom, where a toast would sit
   on it right when she taps it next (copy, then go): the toast says
   "copied" at the top while one is open. */
html:has(#cpnPop[open]) .toast,html:has(#dealDlg[open]) .toast,
html:has(#dlg[open]) .toast,html:has(#reelDlg[open]) .toast{top:calc(var(--safe-t, 0px) + 14px);bottom:auto}
/* A code copied inside a set: its ONE button is the next step, solid. */
.cpn-go.ready{background:var(--primary-ink);color:var(--on-fill,#fff)}
.coupon .cpn-go.ready{background:var(--primary-ink);color:var(--on-fill,#fff)}
#storeCpns{margin:0 0 18px}
/* A live set makes the strip news: it sits under the categories then. */
#couponStrip.cpn-live{margin-top:6px}
/* The coupons tab with a set she has not seen: a dot, like the menu's. */
.tab.has-new::after{content:'';width:8px;height:8px;border-radius:99px;background:var(--primary);
  margin-inline-start:6px;box-shadow:0 0 0 2px #fff;flex:none}
.tab[aria-current="page"].has-new::after{background:var(--primary)}
/* A tier list in a wide card: codes in columns, each amount beside its code. */
@media (min-width:900px){
  .coupon.cpn .cpn-tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}

/* ══════════ feedback (PLAN_feedback.md §8) ══════════
   A phone: the drawer at its full height, never a bottom sheet -- a field in
   a bottom sheet sits under the iPhone keyboard (the account sheet's lesson);
   the one action, send, in the drawer's bar at the bottom. A laptop: a 480px
   card in the middle (below). Real radio inputs drawn as rows, 16px inputs
   (no zoom on focus), every target at least 44px. */
.fb-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding-inline-end:48px}
.fb-head .face{width:44px;height:44px;border-radius:99px;flex:none;object-fit:cover}
.fb-head .face.ph{display:grid;place-items:center;font-size:calc(22px*var(--fs,1));background:var(--primary-soft)}
.fb-h{margin:0;font-size:calc(22px*var(--fs,1));line-height:1.25}
.fb-sub{margin:2px 0 0;font-size:calc(14px*var(--fs,1));color:var(--muted)}
.fb-form{display:flex;flex-direction:column;gap:16px}
.fb-cats{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fb-cats legend{padding:0;margin:0 0 8px;font-weight:700;font-size:calc(15px*var(--fs,1))}
.fb-cat{display:flex;align-items:center;gap:10px;min-height:56px;padding:9px 12px;background:var(--card);
  border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.fb-cat input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--primary-ink);cursor:pointer}
.fb-cat:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.fb-ico{font-size:calc(22px*var(--fs,1));line-height:1;flex:none}
.fb-cat-txt{display:flex;flex-direction:column;min-width:0}
.fb-cat-txt b{font-size:calc(15px*var(--fs,1));line-height:1.3}
.fb-cat-txt small{font-size:calc(13px*var(--fs,1));color:var(--muted);line-height:1.35}
.fb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-field label{font-weight:700;font-size:calc(15px*var(--fs,1))}
.fb-star{color:var(--primary-deep)}
.fb-field input,.fb-field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;min-height:48px;
  padding:10px 14px;font-family:inherit;font-size:calc(16px*var(--fs,1));background:#fff;color:var(--ink)}
.fb-field textarea{resize:none;line-height:1.5;max-height:50vh;overflow-y:auto}
.fb-field input:focus-visible,.fb-field textarea:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.fb-field.is-bad input,.fb-field.is-bad textarea,.fb-cats.is-bad .fb-cat{border-color:var(--danger)}
.fb-under{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fb-hint{margin:0;font-size:calc(13px*var(--fs,1));color:var(--muted)}
.fb-count{font-size:calc(13px*var(--fs,1));color:var(--muted);white-space:nowrap}
.fb-err{margin:0;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--danger)}
.fb-err:empty{display:none}
.fb-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
.fb-check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--primary-ink);cursor:pointer}
.fb-what summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:4px;color:var(--muted);font-size:calc(14px*var(--fs,1))}
.fb-what ul{margin:0;padding-inline-start:20px;font-size:calc(13.5px*var(--fs,1));line-height:1.55}
.fb-what p{margin:6px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--muted);line-height:1.5}
.fb-robot:empty{display:none}
/* "Tick the box below": ABOVE the box, and a live region that is empty
   (and takes no room) until the check asks for a tick. */
.fb-robot-note{margin:0;font-size:calc(14px*var(--fs,1));font-weight:600;color:var(--sun-ink);background:var(--sun-soft);border-radius:12px;padding:8px 12px}
.fb-robot-note:empty{display:none}
.fb-msg{background:var(--sun-soft);color:var(--ink);border-radius:12px;padding:10px 12px}
.fb-msg:empty{display:none}
.fb-msg p{margin:0;font-weight:600;line-height:1.45}
.fb-ig{display:inline-flex;align-items:center;min-height:44px;color:var(--primary-ink);font-weight:700}
.fb-done{padding-top:4px}
.fb-ref-row{margin:0 0 12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:calc(15px*var(--fs,1))}
.fb-ref{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px;border:1.5px dashed var(--primary);
  border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-size:calc(15px*var(--fs,1));cursor:pointer}
.fb-ref b{font-size:calc(18px*var(--fs,1));letter-spacing:.06em}
.fb-ref-copy{font-size:calc(13px*var(--fs,1));color:var(--primary-deep);font-weight:700}
.fb-ref.copied{border-style:solid;border-color:var(--mint-ink);background:var(--mint-soft)}
.fb-read{margin:0;line-height:1.55}
.fb-bar .btn{flex:1 1 0}
/* Phases 2 and 3 (§21.11). What is already known to be broken, said once
   at the top; sending stays allowed. */
.fb-notice{margin:0 0 14px;background:var(--sun-soft);color:var(--ink);border-radius:12px;padding:10px 12px;
  font-weight:600;line-height:1.45}
/* What the message is about: a chip she can take off. */
.fb-ctx{display:flex;align-items:center;gap:2px;align-self:flex-start;max-width:100%;min-width:0;
  background:var(--primary-soft);border-radius:99px;padding-inline-start:14px}
.fb-ctx-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:calc(14px*var(--fs,1));color:var(--primary-deep)}
.fb-ctx-x{flex:none;width:44px;height:44px;border:0;border-radius:99px;background:none;color:var(--primary-deep);
  font-size:calc(15px*var(--fs,1));cursor:pointer}
/* Up to three photos (§23.5): a row of square tiles, each with its ✕ (a
   44px target on its corner), "preparing" while it is shrunk; a file that
   cannot go is a full-width line with its own sentence and its own ✕, under
   the tiles. Three tiles fit a 360px phone. */
.fb-photo{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;max-width:100%}
.fb-photo-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
.fb-photo-list:empty{display:none}
.fb-photo-item{position:relative;flex:none;width:96px;height:96px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;overflow:hidden}
.fb-photo-item img{display:block;width:100%;height:100%;object-fit:cover}
.fb-photo-wait{display:grid;place-items:center;width:100%;height:100%;padding:6px;text-align:center;font-size:calc(12.5px*var(--fs,1));
  line-height:1.3;color:var(--muted);background:var(--primary-soft)}
.fb-photo-item.bad{flex:1 1 100%;width:auto;min-width:0;max-width:100%;height:auto;min-height:48px;display:flex;align-items:center;gap:6px;
  padding:4px;padding-inline-start:12px;border-color:transparent;background:var(--sun-soft);overflow:visible}
.fb-photo-bad-txt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:4px 0}
.fb-photo-name{font-size:calc(12.5px*var(--fs,1));color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-photo-msg{font-size:calc(13.5px*var(--fs,1));font-weight:600;line-height:1.4;color:var(--sun-ink)}
.fb-photo-x{position:absolute;top:0;inset-inline-end:0;width:44px;height:44px;border:2px solid #fff;border-radius:99px;
  background:rgba(51,32,46,.82);color:#fff;font-size:calc(15px*var(--fs,1));cursor:pointer;display:grid;place-items:center}
.fb-photo-item.bad .fb-photo-x{position:static;flex:none;background:var(--ink)}
.fb-photo-add{min-height:48px;font-size:calc(15px*var(--fs,1))}
/* After sending: where the photos stand. */
.fb-up{margin-top:12px;outline:none}
.fb-up-line{margin:0;font-weight:600;line-height:1.45}
.fb-up-line.busy{color:var(--muted)}
.fb-up-line.ok{color:#11705B}
.fb-up-line.bad{color:var(--sun-ink);background:var(--sun-soft);border-radius:12px;padding:8px 12px}
.fb-up-why{margin:6px 0 0;font-size:calc(13.5px*var(--fs,1));line-height:1.5;color:var(--muted)}
.fb-up-retry{margin-top:8px;min-height:44px}
/* The ways in: a quiet line, never a button beside "buy". */
.fb-entry{margin:10px 0 0;text-align:center}
.fb-entry .linkbtn{display:inline-block;margin:0}
.foot-links .foot-fb{border:0;background:none;font:inherit;color:var(--muted);display:inline-block;padding:12px 6px;
  min-height:44px;cursor:pointer;text-decoration:underline}
/* The page behind stays put, and a toast (the ref copied) sits at the top,
   never on the bar's buttons. */
html:has(#fbDlg[open]){overflow:hidden}
html:has(#fbDlg[open]) .toast{top:calc(var(--safe-t, 0px) + 14px);bottom:auto}
/* The open keyboard: the drawer is the part of the screen above it, so the
   send button stays in sight (store.js fbFitKb measures it). */
@media (max-width:899.98px){
  dialog.drawer.fb-dlg.kb{height:var(--fb-vh, 100dvh);max-height:var(--fb-vh, 100dvh);transform:translateY(var(--fb-top, 0px))}
}
@media (min-width:900px){
  dialog.drawer.fb-dlg{width:480px;height:fit-content;max-height:min(92dvh,880px);margin:auto;border-radius:22px;
    box-shadow:0 18px 60px rgba(51,32,46,.28);overflow:hidden}
  dialog.drawer.fb-dlg .drawer-x{top:10px}
  dialog.drawer.fb-dlg .drawer-body{padding-top:20px}
}

/* Her ready lists on a laptop: three cards a row, the list page in a
   readable column, the bar as wide as the column. */
@media (min-width:900px){
  .lc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  #listPage{max-width:760px}
  .list-bar{inset-inline:auto;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));
    bottom:16px;border-radius:18px;border:1px solid var(--line)}
  body.has-statsbar .list-bar{transform:none;width:auto;border:0}
}
/* On a laptop "add all" is sized to its words, not a band across the page
   under two tiles (after its base rule: source order decides). */
@media (min-width:900px){
  .likes-cartall .btn{display:inline-flex;width:auto}
}

/* ══════════ accessibility settings (2026-10-25) ══════════
   The "נגישות" button in the bar opens a sheet (store.js renderA11y); what a
   visitor picks is kept on her device and put on <html> as a class BEFORE the
   first paint (early.js, window.MN_AX). This is what each class means. It is
   the LAST block of the file on purpose: a mode must beat every rule above it
   at equal weight, and the bar's own button, the sheet and the legal pages
   (which share this file) need nothing before it.

   Text size. Every font-size above is calc(Npx*var(--fs,1)), so one number
   scales every word on the page and leaves the layout, the pictures and the
   44px tap targets alone -- unlike zoom, which also scales what a script
   measures (rails, the video viewer's swipe) and so is not safe to switch on.
   A new font-size must be written the same way (tests/test_storefront_a11y.py
   fails on a raw px size). The steps are pinned to store.js AX_PCT. */
html.ax-fs1{--fs:1.15}
html.ax-fs2{--fs:1.3}
html.ax-fs3{--fs:1.5}
html.ax-fs4{--fs:1.75}
html.ax-fs5{--fs:2}

/* Larger text takes more room, and a name cut off after two lines or a badge
   cut off with "…" is a loss the visitor asked for no part in: names get up
   to four lines, badges wrap, and the rows that sat side by side wrap too.
   (Every cut-off name is whole in the product's own sheet either way.) */
html:is(.ax-fs2,.ax-fs3,.ax-fs4,.ax-fs5) :is(.tile-name,.mini-name,.al-name,.al-prod span,.al-full-txt b,.lr-name,
  .deal-lead,.deal-sub,.deal-offer,.circle b,.lc-title,.cpn-mini-h){-webkit-line-clamp:4}
html:is(.ax-fs1,.ax-fs2,.ax-fs3,.ax-fs4,.ax-fs5) .badge{white-space:normal;overflow:visible;text-overflow:clip;
  border-radius:12px;line-height:1.25}
html:is(.ax-fs2,.ax-fs3,.ax-fs4,.ax-fs5) .grid-title-row{flex-wrap:wrap}
html:is(.ax-fs3,.ax-fs4,.ax-fs5) .ali-sub-in{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
html:is(.ax-fs3,.ax-fs4,.ax-fs5) .ali-seg{line-height:1.25;padding:6px 4px}

/* The cookie strip is taller with larger words, and the page keeps clear of it
   (it stays up until a tap). */
html:is(.ax-fs3,.ax-fs4,.ax-fs5) body.has-statsbar{padding-bottom:calc(var(--safe-b) + 340px)}
/* At the two largest sizes the home page's four "what is waiting for you" cards do not fit two across a
   360px phone (word wider than half the row): one column. A laptop keeps its four (its own breakpoint). */
html:is(.ax-fs4,.ax-fs5) .value-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){html:is(.ax-fs4,.ax-fs5) .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the sheet */
.axp-group{padding:14px 0;border-top:1px solid var(--line)}
.axp-h{display:block;font-size:calc(15px*var(--fs,1));margin:0 0 10px}
.axp-step{display:flex;align-items:center;gap:10px}
.axp-btn{
  flex:none;width:52px;height:52px;border-radius:14px;border:1.5px solid var(--primary);cursor:pointer;
  background:var(--card);color:var(--primary-deep);display:grid;place-items:center;padding:0;
}
.axp-btn svg{width:22px;height:22px}
.axp-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.axp-pct{flex:1;text-align:center;font-weight:800;font-size:calc(20px*var(--fs,1));direction:ltr}
.axp-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.axp-opt{position:relative;display:block;cursor:pointer}
/* The real radio is the whole box, invisible: native arrow-key and screen
   reader behaviour, and a 48px target. Its picture is the span after it. */
.axp-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.axp-sw{
  display:grid;place-items:center;min-height:52px;padding:6px 8px;border-radius:14px;text-align:center;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;
  font-size:calc(15px*var(--fs,1));
}
/* Each choice looks like what it gives, so it needs no explaining. */
.axp-sw-dark{background:#000;color:#FFD60A;border-color:#000}
.axp-sw-light{background:#fff;color:#000;border-color:#000}
.axp-opt input:checked+.axp-sw{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--primary-ink)}
.axp-opt input:focus-visible+.axp-sw{outline:3px solid var(--primary-ink);outline-offset:3px}
.axp-row small.axp-desc{font-size:calc(13px*var(--fs,1));color:var(--muted);font-weight:400}
.axp-row input:focus-visible{outline:3px solid var(--primary-ink);outline-offset:3px}
.axp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  padding-top:16px}
.axp-full{color:var(--primary-deep);font-weight:700;text-decoration:underline;min-height:44px;
  display:inline-flex;align-items:center}

/* Greyscale. A filter on the root draws the page grey, but NOT what is in the
   browser's top layer (measured in both engines: the menu, every sheet and the
   toast stayed in colour), so those are filtered themselves. The dimming
   behind a sheet is a neutral grey for the same reason. */
html.ax-gray,html.ax-gray dialog,html.ax-gray .toast{filter:grayscale(1)}
html.ax-gray dialog.drawer::backdrop{background:rgba(0,0,0,.5)}

/* Links underlined: a link is no longer told from the words around it by
   colour alone. Only text links -- a card is not a "link" to the eye. */
html.ax-links a:not(.btn):not(.iconbtn):not(.tile):not(.mini):not(.skip),
html.ax-links .linkbtn{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}
html.ax-links a:focus-visible,html.ax-links button:focus-visible,html.ax-links input:focus-visible{
  outline-width:3px;outline-offset:3px;
}

/* A plain font, with room: WCAG 1.4.12's text spacing (line 1.5, letters
   .12em, words .16em) is what people who read with difficulty are helped by,
   and the display face of the headings is the first thing that gets in the
   way. */
html.ax-font,html.ax-font *{
  font-family:Arial,'Helvetica Neue',Helvetica,'Segoe UI',sans-serif !important;
  letter-spacing:.05em !important;word-spacing:.12em !important;
}
html.ax-font body{line-height:1.7}

/* Motion off. No animation or transition, no smooth scroll; the videos that
   start by themselves are stopped in store.js (axStill), and their play/
   pause marks have nothing left to do. */
html.ax-still,html.ax-still *,html.ax-still *::before,html.ax-still *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important;
}
html.ax-still [data-autoplay]{display:none}

/* Contrast. Two themes, chosen in the sheet, both done the same way: the
   colour TOKENS are replaced (so everything drawn from them follows), the
   shadows that told a card from the page become a hairline ring, and the few
   pieces that carry a colour of their own are set below. Nothing here
   darkens or lightens the page's pictures. The numbers: text 7:1 or better
   on its ground (WCAG's enhanced level), never below 4.5:1. */
html.ax-dark{
  color-scheme:dark;
  --bg:#000;--card:#000;--ink:#fff;--muted:#f0f0f0;
  --primary:#FFD60A;--primary-ink:#FFD60A;--primary-deep:#FFD60A;--primary-soft:#1f1f1f;
  --mint:#5CFF9D;--mint-ink:#5CFF9D;--mint-soft:#0a2a18;
  --sun:#FFD60A;--sun-ink:#FFD60A;--sun-soft:#2b2300;
  --line:#8f8f8f;--danger:#FF8F87;
  --shadow:0 0 0 1.5px #9a9a9a;--shadow-lift:0 0 0 2.5px #FFD60A;
}
html.ax-light{
  color-scheme:light;
  --bg:#fff;--card:#fff;--ink:#000;--muted:#1c1c1c;
  --primary:#A3002E;--primary-ink:#8A0027;--primary-deep:#8A0027;--primary-soft:#fff;
  --mint:#00573F;--mint-ink:#00573F;--mint-soft:#fff;
  --sun:#6B3E00;--sun-ink:#5A3300;--sun-soft:#fff;
  --line:#000;--danger:#9B0000;
  --shadow:0 0 0 1.5px #000;--shadow-lift:0 0 0 2.5px #000;
}
/* The pink wash behind the top of a page, the newsletter and the community
   card, and the placeholder shimmer: pink is not a colour either theme has. */
html.ax-dark .top:not(.badge),html.ax-dark .nl,html.ax-dark .comm-card{background:#000}
html.ax-light .top:not(.badge),html.ax-light .nl,html.ax-light .comm-card{background:#fff}
html.ax-dark .bar{background:#000;border-bottom:1px solid #8f8f8f}
html.ax-light .bar{background:#fff;border-bottom:1px solid #000}
html.ax-dark .skel-img,html.ax-dark .skel-line,html.ax-dark .tile-img:not(.ok),html.ax-dark .dr-pic:not(.ok){background:#2a2a2a}
html.ax-light .skel-img,html.ax-light .skel-line,html.ax-light .tile-img:not(.ok),html.ax-light .dr-pic:not(.ok){background:#e6e6e6}
/* Text on a piece the page FILLS with a theme colour is --on-fill (white,
   unless a theme says otherwise): in the dark theme those fills are yellow
   and green, and white on them would vanish. Pieces filled with the ink
   colour take the card colour instead (a rule up there says so), and
   whatever a rule colours for itself -- a pale button, WhatsApp's green --
   keeps its own. */
html.ax-dark{--on-fill:#000;--on-fill-soft:rgba(0,0,0,.86)}
html.ax-dark .ha-txt small{color:var(--on-fill-soft)}
html.ax-dark .net-other .net-ico,html.ax-dark .soc.net-other{color:#000}
/* Light: "sun" is a brown here, so the amber chips' own brown text goes white. */
html.ax-light :is(.badge.pop,.deal-pick){color:#fff}
html.ax-dark :is(.badge.pick,.lh-ico.heart){background:#000;color:#FFD60A;border:1.5px solid #FFD60A}
html.ax-dark :is(.nl input,.fb-field input,.fb-field textarea,.fb-ref,.fb-photo-item){background:#000;color:#fff}
html.ax-dark .bar-search .search input:focus{background:#000}
html.ax-dark dialog.drawer::backdrop{background:rgba(0,0,0,.8)}
html.ax-dark .drawer-x{background:#000;color:#fff;border:2px solid #fff}
html.ax-light .drawer-x{background:#fff;color:#000;border:2px solid #000}
html.ax-dark .drawer-bar,html.ax-light .drawer-bar{box-shadow:none}
/* Pale pieces drawn with a fixed white, whose icon or words follow the ink
   colour: in the dark theme ink is white, so they get a dark ground and a
   ring; in the light one they only gain the ring. */
html.ax-dark .heart-toggle::before,html.ax-dark .mini-bell,html.ax-dark .lh-ico.heart{background:#000;box-shadow:0 0 0 1.5px #fff}
html.ax-light .heart-toggle::before,html.ax-light .mini-bell{box-shadow:0 0 0 1.5px #000}
html.ax-dark .list-bar{background:#000}
html.ax-dark .lrow.have{background:#141414}
html.ax-light .lrow.have{background:#fff}
/* The sheet's switches (this one's and the privacy sheet's): a browser's own
   checkbox has a faint rim -- on black it is hard to find. Drawn here with
   a rim as strong as the text. */
html.ax-dark .priv-row input[type="checkbox"],html.ax-light .priv-row input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;position:relative;background:var(--card);
  border:2.5px solid var(--ink);border-radius:8px;
}
html.ax-dark .priv-row input[type="checkbox"]:checked,html.ax-light .priv-row input[type="checkbox"]:checked{
  background:var(--primary-ink);border-color:var(--primary-ink);
}
html.ax-dark .priv-row input[type="checkbox"]:checked::after,html.ax-light .priv-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:50%;top:44%;width:7px;height:13px;
  border:solid var(--on-fill,#fff);border-width:0 3px 3px 0;transform:translate(-50%,-50%) rotate(45deg);
}

/* Windows' own high-contrast mode (forced colours): the browser takes over
   every colour and drops every shadow, so the edge a card had from its
   shadow, and the ring round the chosen contrast, are drawn as real lines. */
@media (forced-colors:active){
  .tile,.mini,.deal,.coupon,.lcard,.lrow,.cart-row,.comm-card,.vcard,.nl,.al-card,.reel-tile,.empty,.setup,.err,
  .iconbtn,.net-btn,.dr-msg{border:1px solid CanvasText}
  .heart-toggle::before{border:1px solid CanvasText}
  .axp-opt input:checked+.axp-sw{outline:3px solid Highlight;outline-offset:2px}
}

/* A store offer's last day (2026-10-28): small, muted, on the offer's line. */
.cp-until{display:inline-block;font-weight:500;font-size:calc(12px*var(--fs,1));color:var(--muted);white-space:nowrap}

.shopping-guide { margin-block: 24px; padding: 18px; background: var(--soft, #fff5f7); border-radius: 18px; }
.shopping-guide h2 { font-size: calc(17.6px*var(--fs,1)); margin: 0 0 12px; }
.shopping-guide ul { margin: 0; padding-inline-start: 22px; line-height: 1.7; }
.shopping-guide li + li { margin-block-start: 8px; }
.shopping-guide p { line-height: 1.65; }
.shopping-guide h3 { font-size: calc(16px*var(--fs,1)); margin: 18px 0 8px; }
.guide-choices { display: grid; gap: 12px; margin-top: 20px; }
.guide-choice { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fff); min-width: 0; }
.guide-choice h3 { margin-top: 0; }
.guide-choice p { margin: 8px 0; }
.guide-choice a, .guide-video-links a, .guide-related a { display: inline-block; padding-block: 8px; min-height: 44px; }
.shopping-guide a, .reel-context a { color: var(--primary-ink); text-underline-offset: 3px; }
.guide-check { font-size: calc(15.2px*var(--fs,1)); }
.list-group-title { margin: 24px 0 12px; font-size: calc(17.6px*var(--fs,1)); }
.shopping-guide details { border-bottom: 1px solid var(--line); }
.shopping-guide summary { min-height: 44px; padding-block: 12px; font-weight: 700; cursor: pointer; }
.reel-context { margin-top: 14px; padding-top: 12px; border-top: 1px solid currentColor; font-size: calc(14.4px*var(--fs,1)); line-height: 1.6; }
.reel-context a { color: inherit; display: inline-block; min-height: 44px; padding-block: 8px; }
@media (min-width: 700px) { .guide-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Product links retain the existing card layout. */
.tile-name,.mini-name,.lr-name,.cart-name-btn{text-decoration:none}
.tile-img,.mini-img,.lr-img,.cart-pic{display:block;text-decoration:none;color:inherit}
.catalog-pages{display:flex;justify-content:space-between;gap:16px;margin:20px 0}
.catalog-pages a{padding:12px;color:var(--ink)}
.reel-body:not(.open) .reel-context{display:none}
.guide-entry{margin:16px 0 0}
.guide-entry a{display:inline-flex;align-items:center;min-height:44px;color:var(--primary-ink);text-underline-offset:4px}
.editorial{max-width:800px;line-height:1.75}
.editorial-page .bar-row{gap:12px}
.editorial-page .legal-back{margin:0}
.editorial-page .brand{direction:ltr}
.editorial-page .bar-row>a:last-child{display:inline-flex;align-items:center;min-height:44px;color:var(--primary-ink)}
.editorial h1{line-height:1.3}
.editorial h2{margin-top:30px;line-height:1.4}
.editorial a,.editorial-footer a{color:var(--primary-ink);text-underline-offset:4px}
.editorial li{margin-block:10px}
.editorial-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block:20px;align-items:center}
.packing-list{list-style:none;padding:0}
.packing-list li{margin:0;border-bottom:1px solid var(--line)}
.packing-list label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;min-height:44px;cursor:pointer}
.packing-list input{width:22px;height:22px;flex:none;margin:4px 0 0;accent-color:var(--primary-ink)}
.editorial-footer{padding-block:24px 40px;line-height:1.8}
.editorial-footer a{display:inline-block;min-height:44px;padding-block:8px}
.print-source{display:none}
@media print{
  .editorial-page .bar,.editorial-page .skip,.editorial-actions,.editorial-footer{display:none!important}
  .editorial-page,.editorial{background:#fff!important;color:#000!important;margin:0!important;padding:0!important;max-width:none!important;font-size:calc(14.67px*var(--fs,1))}
  .editorial h1{font-size:calc(26.67px*var(--fs,1))}.editorial h2{font-size:calc(18.67px*var(--fs,1));margin-top:14pt}
  .editorial section{break-inside:avoid}.packing-list label{padding:5pt 0;min-height:0}
  .editorial a{color:#000}.print-source{display:block;font-size:calc(13.33px*var(--fs,1));overflow-wrap:anywhere}
}

/* The home-screen item (2026-11-01): its explaining line sits under the title. */
#menuApp .mi-txt{display:flex;flex-direction:column;align-items:flex-start;text-align:start}
#menuApp .app-sub{font-weight:600}

/* A drawn browser button is a button (2026-11-01): a tap says, under its
   step, where the real one is -- it cannot press the browser's own. */
button.pwa-k{-webkit-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.pwa-k:active{transform:scale(.96)}
/* A calm help note, never the colour of an error (2026-11-01, the owner: "red
   looks as an error"): the mint the site's other help notes use, ink text, an
   "i" mark; the button names drawn small, each one piece. */
.pwa-where{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:9px 11px;border-radius:12px;
  background:var(--mint-soft);color:var(--ink);border-inline-start:3px solid var(--mint);
  font-weight:500;font-size:calc(14px*var(--fs,1));line-height:1.7}
.pwa-where:empty{display:none}
.pwa-info{flex:none;width:calc(18px*var(--fs,1));height:calc(18px*var(--fs,1));margin-top:calc(3px*var(--fs,1));color:var(--mint-ink)}
@keyframes pwa-flash{0%,100%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 4px var(--mint-soft)}}
@media (prefers-reduced-motion:no-preference){html:not(.ax-still) .pwa-k.pwa-flash{animation:pwa-flash .9s ease 2}}