/* Self-hosted accessibility menu and supporting storefront styles. No third-party widget. */
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -100px; z-index: 200;
  background: #000; color: #fff; padding: .7em 1.1em; border-radius: 8px; font-weight: 700;
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 3px solid #fff; outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.a11y-toggle {
  position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #0f4d1f;
  background: #166B2C; color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 0;
}
.a11y-toggle:hover { background: #0f4d1f; }
.a11y-toggle svg { width: 26px; height: 26px; display: block; }
@media (max-width: 900px) {
  /* Bottom corner, opposite the WhatsApp FAB; page padding clears add-to-cart / totals. */
  .a11y-toggle { bottom: 16px; inset-inline-end: 12px; }
}

.a11y-panel {
  position: fixed; inset-inline-end: 16px; bottom: 80px; z-index: 81;
  width: min(22rem, calc(100vw - 24px)); max-height: min(70vh, 32rem); overflow: auto;
  background: #fff; color: #111; border: 2px solid #111; border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.22); padding: 16px 16px 18px;
}
.a11y-panel[hidden] { display: none !important; }
@media (max-width: 900px) {
  .a11y-panel { bottom: 156px; inset-inline-end: 12px; }
}
.a11y-panel h2 { font-size: 1.1rem; margin: 0 2.5rem 12px 0; }
[dir=rtl] .a11y-panel h2 { margin: 0 0 12px 2.5rem; }
.a11y-close {
  position: absolute; top: 10px; inset-inline-end: 10px;
  border: 0; background: transparent; color: #111; font-size: 1.4rem;
  width: 40px; height: 40px; cursor: pointer; border-radius: 8px; line-height: 1;
}
.a11y-actions { display: grid; gap: 8px; }
.a11y-actions button {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; text-align: start; padding: .7em .9em; border-radius: 10px;
  border: 1.5px solid #222; background: #fff; color: #111; font: inherit; font-weight: 600; cursor: pointer;
}
.a11y-actions button[aria-pressed="true"] { background: #111; color: #fff; }
.a11y-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-reset { margin-top: 4px; }

html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 150%; }
html.a11y-font, html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea {
  font-family: Arial, "Noto Sans Hebrew", Tahoma, sans-serif !important;
}
html.a11y-links a[href] { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.a11y-gray { filter: grayscale(1); }
html.a11y-contrast {
  --ink: #000; --mute: #000; --line: #000; --soft: #fff; --white: #fff;
  --green: #000; --green-d: #000; --purple: #000;
}
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast a { color: #000; text-decoration: underline; }
html.a11y-contrast .btn, html.a11y-contrast .btn.green, html.a11y-contrast .btn.ghost,
html.a11y-contrast .a11y-toggle { background: #000 !important; color: #fff !important; border-color: #000 !important; }
html.a11y-contrast header.site, html.a11y-contrast .filters, html.a11y-contrast .a11y-panel { background: #fff; color: #000; }
html.a11y-contrast .hero, html.a11y-contrast .age, html.a11y-contrast .announce,
html.a11y-contrast .staging-bar { background: #000; color: #fff; }
html.a11y-contrast .hero p, html.a11y-contrast .hero a, html.a11y-contrast .age p,
html.a11y-contrast .age a, html.a11y-contrast .staging-bar a, html.a11y-contrast .staging-bar .linkish { color: #fff; }
html.a11y-contrast .mode-bar { background: #fff; color: #000; border-color: #000; }
html.a11y-contrast .muted, html.a11y-contrast .kicker { color: #000; }
html.a11y-contrast .card .img, html.a11y-contrast .gallery .main { border: 2px solid #000; }

@media (prefers-reduced-motion: reduce), html.a11y-motion {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Catalog is a grid (including at 400px); carousel arrows stay hidden. */
.browse-wrap { position: relative; }
.browse-nav, .browse-toolbar { display: none; }