/* Accessibility toolbar and cookie notice.
   Loaded on every page — both have to work before anything else does. */

/* The scale multiplies the root size rather than resizing each rule, so every
   rem in the stylesheet follows without a second set of declarations. */
:root { --a11y-scale: 1; }
html { font-size: calc(100% * var(--a11y-scale)); }

/* ---------- launcher ---------- */
.a11y {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 90;
}
.a11y__btn {
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.a11y__btn:hover { transform: scale(1.06); box-shadow: 0 4px 16px rgb(0 0 0 / .28); }
.a11y__btn svg { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.a11y__btn svg circle { fill: currentColor; stroke: none; }

/* ---------- panel ---------- */
.a11y__panel {
  position: absolute;
  inset-block-end: 3.75rem;
  inset-inline-start: 0;
  inline-size: min(17rem, calc(100vw - 2rem));
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgb(0 0 0 / .16);
}
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.a11y__title { font-size: 1rem; margin: 0; font-weight: 400; }
.a11y__close {
  border: 0; background: none; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0 .25rem;
}

.a11y__row { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.a11y__label { font-size: .875rem; color: var(--muted); }
.a11y__steps { display: flex; align-items: center; gap: .25rem; }
.a11y__steps button {
  inline-size: 2rem; block-size: 2rem;
  border: 1px solid var(--line); background: #fff;
  cursor: pointer; border-radius: var(--radius); font-size: 1rem; line-height: 1;
}
.a11y__steps button:hover { border-color: var(--brand); color: var(--brand); }
.a11y__steps output { min-inline-size: 3rem; text-align: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }

.a11y__toggle {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .5rem .25rem;
  border: 0; border-block-end: 1px solid var(--line);
  background: none; cursor: pointer;
  font: inherit; font-size: .875rem; text-align: start; color: var(--ink);
}
.a11y__switch {
  flex: 0 0 auto;
  inline-size: 2.25rem; block-size: 1.25rem;
  border-radius: 999px; background: var(--line); position: relative;
  transition: background .2s ease;
}
.a11y__switch::after {
  content: ""; position: absolute; inset-block-start: .1875rem; inset-inline-start: .1875rem;
  inline-size: .875rem; block-size: .875rem; border-radius: 50%; background: #fff;
  transition: translate .2s ease;
}
.a11y__toggle[aria-pressed="true"] .a11y__switch { background: var(--brand); }
.a11y__toggle[aria-pressed="true"] .a11y__switch::after { translate: -1rem 0; }

.a11y__reset {
  inline-size: 100%; margin-block-start: .75rem; padding: .5rem;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: inherit; font-size: .8125rem; border-radius: var(--radius);
}
.a11y__reset:hover { border-color: var(--brand); color: var(--brand); }
.a11y__statement { display: block; margin-block-start: .5rem; font-size: .8125rem; text-align: center; }

/* ---------- the modes themselves ---------- */
.a11y-contrast body { background: #fff; color: #000; }
.a11y-contrast :is(p, li, td, span, div, h1, h2, h3, h4, dd, dt) { color: #000; }
.a11y-contrast a:not(.btn) { color: #00309e; }
.a11y-contrast :is(.btn, .single_add_to_cart_button, #place_order) { background: #000; color: #fff; border-color: #000; }
.a11y-contrast :is(img, .card__img) { filter: contrast(1.15); }

.a11y-links a { text-decoration: underline !important; text-underline-offset: .15em; }
.a11y-links a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Arial ships on every platform and carries full Hebrew; no download, so the
   readable mode applies instantly rather than after a font request. */
.a11y-readable body,
.a11y-readable :is(h1, h2, h3, h4, button, input, select, textarea) {
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  letter-spacing: .01em;
}
.a11y-readable :is(p, li) { line-height: 1.85; }

.a11y-nomotion *,
.a11y-nomotion *::before,
.a11y-nomotion *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ---------- cookie notice ---------- */
/* A centred card rather than a full-width strip: both bottom corners are
   already taken — WhatsApp on one side, the accessibility button on the
   other — and a strip laid straight over them. */
.cookiebar {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  /* Wide enough for the sentence and both buttons on one line; the viewport
     term keeps it clear of the two bottom-corner bubbles on narrow desktops. */
  max-inline-size: min(52rem, calc(100vw - 9rem));
  z-index: 95;
  display: flex;
  /* One line: wrapped, the buttons dropped under the text and the pill turned
     into a two-row lozenge. The cap is wide enough for the sentence and the
     two buttons side by side. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .625rem 1rem;
  padding: .5rem .5rem .5rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgb(0 0 0 / .14);
  /* Off-screen until the script adds .is-in, so it can never strand someone
     without JavaScript behind a banner they cannot dismiss. */
  translate: 0 calc(100% + 1.5rem);
  transition: translate .3s ease;
}
.cookiebar.is-in { translate: 0 0; }

/* Too narrow to clear the two bubbles side to side, so it clears them
   vertically instead and squares off — a pill that wraps to three lines
   stops reading as a pill. */
@media (max-width: 700px) {
  .cookiebar {
    inset-inline: .75rem;
    /* Above both bubbles, not between them: WhatsApp reaches 4.25rem and the
       accessibility button — raised on mobile to clear the buy bar — reaches
       7.5rem. The notice is dismissed once, so the height it costs is
       temporary; landing on top of the two things it must not cover is not. */
    inset-block-end: 8.5rem;
    margin-inline: 0;
    inline-size: auto;
    max-inline-size: none;
    border-radius: var(--radius);
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.cookiebar__text {
  margin: 0;
  font-size: .8125rem;
  color: var(--muted);
  /* One line. The bar sizes to its content, so letting the sentence wrap was
     what turned a strip into a two-row block. */
  white-space: nowrap;
}
.cookiebar__actions { display: flex; gap: .5rem; }
.cookiebar__btn {
  padding: .4rem 1.125rem;
  white-space: nowrap;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font: inherit; font-size: .875rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.cookiebar__btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.cookiebar__btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

/* Clear of the WhatsApp bubble and the mobile buy bar. */
@media (max-width: 767px) {
  .a11y { inset-block-end: 4.5rem; }
}

/* Must come after the base .cookiebar__text: same specificity, so source order
   is what decides. Inside the earlier media query the nowrap below simply
   overrode it and the sentence ran out of the card on phones. */
@media (max-width: 700px) {
  .cookiebar__text { white-space: normal; }
}