/*
 * Dugri design tokens — the single source of truth for the site palette.
 *
 * Mostly-monochrome rebuild: white ground, near-black ink, neutral hairlines/text.
 * The section wash (--section) and the blush surface tint (--blush-tint) are a WARM
 * SAND / GREIGE — a natural, light neutral (replacing the old very-light-pink), so the
 * alternating .alt sections read as soft warm surfaces. Pink now lives ONLY on the logo.
 * --accent is the warm-sand accent used where a soft brand accent is wanted,
 * replacing the previous black/pink. Ink, muted text and hairlines stay neutral. Corners are sharp (radius 0) everywhere. Headings are thin Heebo Light.
 *
 * The old sage/blush token NAMES are kept (--sage, --blush, …) and simply remapped to
 * black/gray, so every page that references them turns monochrome without per-page edits.
 *
 * NOTE: layout tokens (--nav-h, --wizbar-h, --page-ratio) stay inline in options.html —
 * they are page geometry, not palette, and the wizard no-scroll e2e specs pin them.
 */
:root {
  /* neutrals — white ground, near-black ink */
  --bg: #ffffff; /* page background */
  --section: #f4efe6; /* warm sand/greige wash for alternating sections / soft surfaces (natural, light) */
  --surface: #ffffff; /* cards */
  --ink: #141414; /* near-black text */
  --muted: #6b6b6b; /* gray secondary text */
  --line: #e6e6e6; /* hairline borders */

  /* interaction — remapped from sage to black (buttons, links, active states) */
  --sage: #141414;
  --sage-deep: #000000; /* hover / active */
  --sage-deeper: #000000;
  --sage-tint: #f0f0f0; /* selected-card wash, active pills */

  /* small accents — blush stays near-black ink; its tint is a warm-sand surface */
  --blush: #141414;
  --blush-tint: #efe7d9;

  /* warm-sand brand accent — the natural, light accent that replaces pink/black where a
     soft accent is wanted. Full-strength + deep + tint. */
  --accent: #b7a389;
  --accent-deep: #9c8768;
  --accent-tint: #ece3d5;

  /* functional — semantic status only (not brand accent) */
  --ok: #2f9e6b; /* success state (payment received, etc.) */

  /* type — Heebo display (thin, tracked headings) + Assistant body */
  --display: 'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
  --font: 'Assistant', 'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
  --h-weight: 300; /* headline weight — thin */
  --h-spacing: 0.1em; /* headline letter-spacing — airy */
  --sub-weight: 200; /* subtitle weight — extra-light */

  /* The air between a live price and the struck old price beside it (see .was).
     --price-gap is the number; --was-gap is how the struck price claims it, and
     is the one a container that already spaces its children sets to 0. Two
     tokens, because a container that zeroes --was-gap ON ITSELF still needs to
     read the number for its own `gap` — and a custom property redeclared on an
     element resolves to the new value in that element's own declarations. */
  --price-gap: 14px;
  --was-gap: var(--price-gap);

  /* shape & motion — sharp corners, minimal neutral shadows */
  --radius: 0px;
  --radius-pill: 0px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.1), 0 6px 14px rgba(0, 0, 0, 0.05);
}

/* ============================================================
   A PRICE AND ITS ₪ ARE ONE RUN.

   ₪ is a bidi "European Terminator": on an RTL page it has no direction of its
   own and takes it from the numbers around it. So "199 ₪" with a struck old
   price beside it reordered into "₪ 239 199" — the sign torn off its own number
   and parked on the far side of BOTH, which is what the owner reported.

   Isolating the amount and running it LTR welds the sign to its digits and puts
   it at the right-hand (reading) end of the pair: "239  199 ₪".

   Wrap THE NUMBER AND ITS SIGN, nothing else. A Hebrew prefix inside the
   isolate ("מ-", "החל מ-") flips with it, so leave those outside. The struck
   price stays a plain sibling — isolating it too puts the sign back in the
   middle of the pair.
   ============================================================ */
.amt {
  unicode-bidi: isolate;
  direction: ltr;
  /* A price never breaks between its digits and its sign — it is one word. */
  white-space: nowrap;
}

/* ============================================================
   THE STRUCK OLD PRICE — ONE TREATMENT, EVERY SURFACE.

   Six pages each declared their own `.was` and they drifted: 0.82em/700 here,
   0.85em/700 there, opacity .55 or .6, and three different ideas about spacing.
   On the home rail the air even landed on the wrong side of the number
   (`margin-inline-end` in an RTL row), so the struck price touched the live one
   and the pair read as a single number — "239199". This is that one rule.

   BOTH prices carry the ₪ — the owner's call: a bare old number beside a signed
   one didn't read as a price. So the struck price wraps its amount in its own
   `.amt` too (`<s class="was"><span class="amt">239 ₪</span></s>`), which welds
   each sign to its own digits; without that isolate the two signs reorder and
   land between the numbers.

   Spacing: with two signed prices side by side, the air BETWEEN them has to beat
   the space INSIDE each one, or the row reads as four separate things — hence
   --price-gap at 14px against a ~4px word space. The struck price ALWAYS trails
   the live one in the DOM, which in RTL renders it to the LEFT, so the air
   belongs on its INLINE-START side and can never end up outside the pair. A
   container that already spaces its children (a flex row with its own `gap`)
   sets `--was-gap: 0` on itself rather than re-declaring anything here — one
   number, one place.
   ============================================================ */
.was {
  text-decoration: line-through;
  /* Dimmed from whatever colour it sits on, NOT a fixed grey: this price rides
     on a dark button as well as on a white product card, and --muted would all
     but vanish on a dark one. On white, 0.6 of --ink is
     --muted anyway, which is what the cards used before. */
  opacity: 0.6;
  font-weight: 400;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  margin-inline-start: var(--was-gap);
}

/* ============================================================
   SALE MODE — one owner switch, every surface.

   js/pricing.js applySale() stamps data-sale="on"/"off" on <html> once
   /api/pricing resolves; these three states decide what every page paints. The
   rules live HERE, in the one stylesheet every storefront page already links, so
   a page gets the whole behaviour by calling applySale() — no per-page copy of
   the hiding logic to keep in sync. The struck price's own styling lives here
   too (see .was above), so a page gets the look and the switch together.

   The pre-resolve state uses `visibility`, not `display`: the struck price
   occupies its space from first paint, so turning the sale on doesn't shove the
   price row sideways. Off uses `display:none` so the row genuinely closes up.
   ============================================================ */
html:not([data-sale]) .was {
  visibility: hidden;
}
html[data-sale='off'] .was {
  display: none;
}
/* Flags and the strip are ADDITIONS — absent until the sale is confirmed on. */
html:not([data-sale='on']) .sale-flag,
html:not([data-sale='on']) .sale-banner {
  display: none;
}

/* The corner flag over a product picture. Its container needs position:relative
   (each page sets that on its own media box). Ink-filled rather than sand: it
   sits on photography, where a tint would disappear into a light picture. */
.sale-flag {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  pointer-events: none;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The home-page announcement strip, directly under the fixed header. */
.sale-banner {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 9px 16px;
}

/* Scroll-reveal utility: sections fade/rise in as they enter the viewport.
   A tiny observer sets [data-reveal] -> .is-in; motion-safe only. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.6s var(--ease),
      transform 0.6s var(--ease);
    will-change: opacity, transform;
  }
  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* Consistent keyboard focus ring across the site. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}