/* ─────────────────────────────────────────────────────────────────────────
   Velto — accessibility layer

   Three things that an automated checker cannot produce on its own, and that
   the Webflow export does not ship:

     1. A way to skip the navigation (WCAG 2.4.1, level A). Every page opens
        with the same header; a keyboard or screen-reader user had to walk
        through it on each one.
     2. A visible focus indicator everywhere (WCAG 2.4.7, level AA). Webflow's
        reset and a few of our own stylesheets removed outlines without
        replacing them, which leaves a keyboard user with no idea where they
        are.
     3. A control that stops the moving content (WCAG 2.2.2, level A). The
        marquees, the swirls and the collaboration arcs start by themselves,
        run far longer than five seconds and never stop. `prefers-reduced-
        motion` covers visitors who set it at OS level; the success criterion
        asks for a mechanism on the page as well, which is what
        [data-velto-motion="off"] is.

   Loaded on every page alongside velto-i18n.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Skip link ───────────────────────────────────────────────────────── */
/* Off-screen until focused rather than display:none — a hidden element is not
   focusable, so the link has to stay in the tree to be reachable at all. */
.velto-skip-link {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 2147483001;
  transform: translateY(-120%);
  padding: 14px 26px;
  background: #085136;
  color: #ffffff;
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 10px 0;
  transition: transform 0.16s ease;
}

.velto-skip-link:focus,
.velto-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #cdff63;
  outline-offset: -3px;
}

/* The skip target is not interactive, so it must not sit in the tab order
   after being jumped to; -1 keeps it focusable by script only. */
[data-velto-skip-target]:focus { outline: none; }

/* ── 2. Focus indicator ─────────────────────────────────────────────────── */
/* A dark ring with a lime halo: the ring carries the contrast on light
   surfaces, the halo on the dark green ones. !important because the point of
   this rule is to survive the stylesheets that removed outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid #085136 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(205, 255, 99, 0.6) !important;
  border-radius: 3px;
}

/* On the dark green surfaces the ring itself would disappear, so the two
   colours swap roles. */
.footer:not(.policy-footer) a:focus-visible,
.product-marquee-top a:focus-visible,
.velto-collab-section a:focus-visible,
.velto-consent button:focus-visible {
  outline-color: #cdff63 !important;
  box-shadow: 0 0 0 6px rgba(8, 81, 54, 0.75) !important;
}

/* Inputs that had their outline removed without a replacement. */
.f-search__input:focus-visible,
.f-select:focus-visible,
.k-search__input:focus-visible,
.f-acat__link:focus-visible {
  outline: 3px solid #085136 !important;
  outline-offset: 2px !important;
}

/* ── 3. Stopping the moving content ─────────────────────────────────────── */
/* Scoped to the decorative, self-starting, endless animations rather than
   `*`: a blanket rule also kills the preloader's transition and the checkout
   spinner, and the page then waits forever for an animationend that never
   fires. These are exactly the ones 2.2.2 is about. */
[data-velto-motion="off"] .expert-marquee-items,
[data-velto-motion="off"] .product-marquee-top .product-top-items,
[data-velto-motion="off"] .product-marquee-bottom .product-top-items,
[data-velto-motion="off"] .velto-collab-section::before,
[data-velto-motion="off"] .velto-collab-section::after,
[data-velto-motion="off"] .velto-collab-x,
[data-velto-motion="off"] .v-swirl.is-in svg,
[data-velto-motion="off"] .v-swirl.is-in .v-swirl-spark,
[data-velto-motion="off"] .choose-marquee-items,
[data-velto-motion="off"] .bags-marquee-items {
  animation: none !important;
  transition: none !important;
}

/* The marquees are translated by their animation; with it off they would sit
   at whatever offset the keyframes left them, so they are reset. */
[data-velto-motion="off"] .expert-marquee-items,
[data-velto-motion="off"] .product-marquee-top .product-top-items,
[data-velto-motion="off"] .product-marquee-bottom .product-top-items,
[data-velto-motion="off"] .choose-marquee-items,
[data-velto-motion="off"] .bags-marquee-items {
  transform: none !important;
}

/* ── The motion control itself ──────────────────────────────────────────── */
.velto-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.velto-motion-toggle:hover { opacity: 0.82; }

/* Screen-reader-only text, for labels that must exist without being drawn. */
.velto-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Stopping the moving content ────────────────────────────────────────
   Kept even though a third-party toolbar is installed: WCAG 2.2.2 is a level
   A requirement, and the UserWay free tier is not guaranteed to carry a
   "stop animations" control. The button on the accessibility statement page
   drives this, and prefers-reduced-motion is honoured regardless. */

/* ─────────────────────────────────────────────────────────────────────────
   Sienna toolbar — Velto's green

   Sienna ships blue (#0848ca) and derives its hover, focus and tint shades
   from a single custom property with color-mix(), so overriding that one
   value recolours the whole toolbar. !important because Sienna injects its
   stylesheet at runtime, after this file, and would otherwise win on order.

   White on #085136 is 10.6:1, so the launcher and the selected states stay
   well clear of the 4.5:1 floor.
   ───────────────────────────────────────────────────────────────────────── */
:root,
.asw-container,
.asw-widget,
.asw-menu {
  --asw-primary: #085136 !important;
}

/* A handful of Sienna's states hardcode its blue (#0848ca / rgba(8,72,202,…))
   instead of reading --asw-primary, so the selected and hover states stayed
   blue while the launcher turned green. These catch the remainder. */
.asw-menu .asw-btn.asw-selected,
.asw-menu .asw-filter.asw-selected {
  background: rgba(8, 81, 54, 0.12) !important;
  border-color: #085136 !important;
}

.asw-menu .asw-action-btn:hover,
.asw-menu .asw-tab-btn:hover {
  background: rgba(8, 81, 54, 0.1) !important;
  color: #085136 !important;
}

.asw-menu .asw-footer-link,
.asw-menu .asw-tab-btn.asw-selected {
  color: #085136 !important;
}

.asw-structure-header {
  background: linear-gradient(135deg, #085136 0%, #04301f 100%) !important;
}

/* Sienna's footer link renders in a faded tint of the primary colour that
   measured 4.2:1 on its white panel — under the 4.5:1 floor. The id is used
   because the vendor sets the colour on the id, which outranks the class. */
#asw-statement-link,
.asw-menu #asw-statement-link,
.asw-menu .asw-footer-link {
  color: #085136 !important;
}