/** Critical CSS for the theme. This file is included on every page. */

/* One radius pair for the whole storefront: the box that surrounds a group gets
   the larger curve, anything nested inside it gets the smaller one, so nested
   corners read as concentric instead of fighting each other. Pills (999px) and
   circles (50%) are shapes rather than boxes and keep their own. */
:root {
  --vn-radius-outer: 24px;
  --vn-radius-inner: 16px;

  /* ── Type scale ──────────────────────────────────────────────────────────
     One scale for the whole storefront. Before this there were 133 distinct
     font-size values in the shop's CSS, clustering four sizes inside a single
     pixel (17 / 16.8 / 16.3 / 16), which no eye can tell apart and no one can
     maintain. Every size below is a step on one ladder:

         13 · 15 · 17 · 19 · 22 · 26 · 34 · 42 · 52

     Body is 17px, not the usual 16: this shop sells health and mobility
     products to an older Israeli audience, and the accessibility guidance for
     readers past fifty is 17–18px rather than the general 16px floor.

     Headings are fluid between a 375px phone and a 1280px desktop, so a
     section title is 26px in the hand and 34px on a monitor. They used to be
     one fixed size at every width — a 38px heading was landing unchanged on a
     375px screen.

     Sizes are in rem so the reader's own browser font setting still moves
     them; a px value here would ignore it. --fs-micro is the floor: nothing
     in the storefront should be smaller, and it is for legal footnotes and
     badges, never for a sentence someone has to read. */
  --fs-micro: 0.8125rem;  /* 13px — footnotes, badges. the floor. */
  --fs-small: 0.9375rem;  /* 15px — meta, captions, secondary labels */
  --fs-body: 1.0625rem;   /* 17px — default body text */
  --fs-lead: 1.1875rem;   /* 19px — lead paragraphs, buy-box bullets */

  --fs-h4: clamp(1.1875rem, 1.1098rem + 0.331vw, 1.375rem);   /* 19 → 22 */
  --fs-h3: clamp(1.375rem, 1.2714rem + 0.442vw, 1.625rem);    /* 22 → 26 */
  --fs-h2: clamp(1.625rem, 1.4178rem + 0.884vw, 2.125rem);    /* 26 → 34 */
  --fs-h1: clamp(1.875rem, 1.5642rem + 1.326vw, 2.625rem);    /* 30 → 42 */
  --fs-display: clamp(2.125rem, 1.6588rem + 1.989vw, 3.25rem);/* 34 → 52 */

  /* Hebrew hangs from the top line rather than sitting on a baseline, and
     reads tighter than Latin at the same size, so body copy gets 1.6 rather
     than the 1.5 the WCAG text-spacing criterion asks for. */
  --lh-body: 1.6;
  --lh-heading: 1.15;
}

/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  max-width: 100vw;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Header is position: fixed and always visible, so push content below it
   to avoid the first section rendering underneath/behind it. The
   announcement bar lives inside #MainContent itself (right below the
   header, above the rest of the page content), so it's covered by this
   same padding and needs no separate offset math. */
#MainContent {
  padding-top: 5rem;
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

select {
  background-color: var(--color-background);
  color: currentcolor;
}

dialog {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

p {
  text-wrap: pretty;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/** Theme styles below */
body {
  font-family: var(--font-primary--family);
  background-color: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading--family);
  font-weight: var(--font-heading--weight);
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
}

/* The bare headings used to run to 88px at the top end, while the one heading
   that actually sells — the product name — was overridden down to 22px by its
   own class. The ladder now runs the other way round. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-lead); }

a {
  color: inherit;
  transition: opacity var(--duration-hover, 250ms) var(--ease-premium, ease);
}

a:hover {
  opacity: 0.65;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1em 2.25em;
  border-radius: 999px;
  font-family: var(--font-primary--family);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--duration-hover, 250ms) var(--ease-premium, ease),
    opacity var(--duration-hover, 250ms) var(--ease-premium, ease);
}

.button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.button--primary {
  background-color: var(--color-foreground);
  color: var(--color-background);
}

.button--accent {
  background-color: var(--color-accent);
  color: #ffffff;
}

/** Section layout utilities */

/**
 * Setup a grid that enables both full-width and constrained layouts
 * depending on the class of the child elements.
 *
 * By default, a minimum content margin is set on the left and right
 * sides of the section and the content is centered in the viewport to
 * not exceed the maximum page width.
 *
 * When a child element is given the `full-width` class, it will span
 * the entire viewport.
 */
.sv-section {
  --content-width: min(
    calc(var(--page-width) - var(--page-margin) * 2),
    calc(100% - var(--page-margin) * 2)
  );
  --content-margin: minmax(var(--page-margin), 1fr);
  --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

  /* This is required to make <img> elements work as background images */
  position: relative;
  grid-template-columns: var(--content-grid);
  display: grid;
  width: 100%;
}

/* Child elements, by default, are constrained to the central column of the grid.
   Panels that take themselves out of the flow are excluded: the header menu and
   the cart drawer are `position: fixed`, parked off-canvas when closed and sized
   by their own stylesheets. Stretched to the grid column they became as wide as
   the viewport, which is not what a 360px drawer sliding in from the side is
   meant to be. Listed by name because CSS cannot select on `position`. */
.sv-section > *:not(.header__drawer, .header__overlay, .cart-drawer) {
  grid-column: 2;

  /* Two separate things stop a section from dragging the page wider than the
     phone, and both are needed.

     `min-width: 0` because grid items refuse by default to shrink below their
     content's minimum size, so a carousel track of fixed-width cards grew to
     fit every card instead of scrolling inside its own overflow.

     `width: 100%` because most sections centre themselves with
     `margin-inline: auto`, and auto inline margins switch a grid item from
     stretching to shrink-to-fit — which resolves to the content's max-content
     width, not the space available. That is what widened the layout to ~864px
     on a 390px screen and cut the right-hand side off every page. Stating the
     width restores the stretch behaviour without disturbing the centring or
     any section's own smaller max-width. */
  min-width: 0;
  width: 100%;
}

/* Child elements that use the full-width utility class span the entire viewport. */
.sv-section > .full-width {
  grid-column: 1 / -1;
}

/* ── Accessibility utilities (WCAG 2.0 AA / ת"י 5568) ───────────────────────── */

/**
 * Text for screen readers only.
 *
 * Not `display: none` and not `visibility: hidden` — both of those remove the
 * element from the accessibility tree as well as from the page, which is the
 * opposite of what is wanted. Clipping to a 1px box leaves it readable to
 * assistive technology while taking no visual space.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Skip to content (SC 2.4.1).
 *
 * A keyboard user starting a page lands on the first focusable thing, which is
 * the top of the navigation — on every page, before every purchase. Without
 * this they tab through the whole menu again each time. Hidden until focused,
 * then it is the first thing on screen.
 *
 * `.sr-only` is undone rather than toggled off, because the element has to stay
 * in the accessibility tree the whole time for focus to be able to reach it.
 */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100%;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 12px 12px;
  background: var(--color-brand, #005464);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  /* Instant, not animated: a control that slides in is a control a fast tab
     press can miss, and `prefers-reduced-motion` would have to undo it. */
  transition: none;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* Media is not draggable and not selectable — the CSS half of the same rule the
   storefront script applies to right-click and drag. Long-press on iOS opens
   the same "save image" sheet a right-click does, and `-webkit-touch-callout`
   is the only thing that suppresses it. Text stays entirely selectable. */
img,
video,
picture {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The smooth scroll for the rating-to-reviews link used to live here, as
   `scroll-behavior: smooth` on `html`. It worked, and it cost the whole site
   its scrolling.

   `scroll-behavior` is a property of the scrolling box, not of the thing that
   scrolled it, so it does not distinguish a link that jumps the page from a
   hand on the wheel. Every notch became an animation: measured on the product
   page, one notch had moved 1px after 150ms and 7px after half a second, and
   took a second and a half to travel its 500. The page did scroll. It just
   answered a second late, every time, which is indistinguishable from a page
   that will not scroll — and that is exactly how it was reported.

   The link keeps its smooth scroll; it asks for it by name now, in
   widgets.js, where it applies to that click and to nothing else. */