/* =====================================================================
Hau & Miau - accessibility toolbar (spec 12.5, Israeli standard 5568 practice)
Owned by the a11y stream. Two halves:
1. the floating button + dialog (.hm-a11y-btn / .hm-a11y)
2. site-wide adaptation classes applied to (data-hm-text, hm-a11y-*, hm-reduce-motion)
===================================================================== */
/* ---- 1a. Floating button (bottom-left in RTL: the article "back to product" pill and
product sticky bar live on the right / bottom, see JS lift logic) ---------- */
.hm-a11y-btn{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:18px;right:auto;z-index:115;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:var(--hm-olive-dark);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 8px 24px rgba(60,50,20,.22);transition:transform .15s ease,background .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.hm-a11y-btn svg{width:26px;height:26px;display:block}
@media (hover:hover){.hm-a11y-btn:hover{background:var(--hm-olive);transform:translateY(-2px);box-shadow:0 12px 28px rgba(60,50,20,.26)}}
.hm-a11y-btn:active{transform:scale(.96)}
.hm-a11y-btn:focus-visible{outline:3px solid var(--hm-orange);outline-offset:3px}
.hm-a11y-btn[aria-expanded="true"]{background:var(--hm-ink)}
.hm-a11y-btn.is-lifted{bottom:var(--hm-a11y-lift,18px)}
@media (max-width:820px){.hm-a11y-btn{left:12px;bottom:calc(14px + env(safe-area-inset-bottom))}}
/* ---- 1b. Dialog ------------------------------------------------------- */
.hm-a11y{position:fixed;left:18px;right:auto;bottom:calc(76px + env(safe-area-inset-bottom));z-index:121;width:min(340px,calc(100vw - 24px));max-height:min(78vh,640px,var(--hm-a11y-room,640px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--hm-line);border-radius:var(--hm-radius-lg);box-shadow:0 18px 48px rgba(60,50,20,.22);direction:rtl;text-align:right;color:var(--hm-text);font-family:var(--hm-font);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.hm-a11y[hidden]{display:none}
.hm-a11y.is-open{opacity:1;transform:none;pointer-events:auto}
.hm-a11y.is-lifted{bottom:calc(var(--hm-a11y-lift,18px) + 58px)}
@media (max-width:820px){.hm-a11y{left:12px;bottom:calc(72px + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 24px))}}
.hm-a11y__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 12px;border-bottom:1px solid var(--hm-line);flex:none}
.hm-a11y__title{margin:0;font-size:18px;font-weight:800;color:var(--hm-ink);display:flex;align-items:center;gap:8px}
.hm-a11y__title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--hm-olive);flex:none}
.hm-a11y__close{width:44px;height:44px;margin:-6px -8px -6px 0;border:0;border-radius:50%;background:transparent;color:var(--hm-ink);display:grid;place-items:center;cursor:pointer;transition:background .15s ease}
.hm-a11y__close:hover{background:var(--hm-cream-2)}
.hm-a11y__close:focus-visible{outline:3px solid var(--hm-olive);outline-offset:-2px}
.hm-a11y__body{padding:12px 14px 14px;overflow:auto;overscroll-behavior:contain;display:grid;gap:12px}
.hm-a11y__row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--hm-cream-accent);border:1px solid var(--hm-line);border-radius:var(--hm-radius-md);padding:8px 10px 8px 8px;min-height:56px}
.hm-a11y__label{font-weight:700;color:var(--hm-ink);font-size:15px}
.hm-a11y__stepper{display:flex;align-items:center;gap:4px}
.hm-a11y__step{width:44px;height:44px;border-radius:50%;border:2px solid var(--hm-olive);background:#fff;color:var(--hm-olive-dark);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s ease,transform .15s ease}
.hm-a11y__step:hover{background:var(--hm-olive-soft)}
.hm-a11y__step:active{transform:scale(.95)}
.hm-a11y__step:focus-visible{outline:3px solid var(--hm-orange);outline-offset:2px}
.hm-a11y__step:disabled{opacity:.4;cursor:not-allowed;background:#fff;transform:none}
.hm-a11y__level{min-width:64px;text-align:center;font-weight:700;font-size:14px;color:var(--hm-ink)}
.hm-a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hm-a11y__opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 6px;border-radius:var(--hm-radius-md);border:2px solid var(--hm-line);background:#fff;color:var(--hm-ink);font:inherit;font-size:13.5px;font-weight:600;line-height:1.25;text-align:center;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.hm-a11y__opt svg{color:var(--hm-olive-dark);flex:none}
@media (hover:hover){.hm-a11y__opt:hover{border-color:var(--hm-olive);background:var(--hm-cream-accent)}}
.hm-a11y__opt:active{transform:scale(.98)}
.hm-a11y__opt:focus-visible{outline:3px solid var(--hm-orange);outline-offset:2px}
.hm-a11y__opt[aria-pressed="true"]{background:var(--hm-olive-dark);border-color:var(--hm-olive-dark);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.hm-a11y__opt[aria-pressed="true"] svg{color:#fff}
.hm-a11y__opt[aria-pressed="true"] span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hm-orange);margin-inline-end:6px;vertical-align:middle}
.hm-a11y__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--hm-line);margin-top:2px}
.hm-a11y__reset{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:var(--hm-radius-pill);background:transparent;color:var(--hm-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s ease}
.hm-a11y__reset:hover{background:var(--hm-cream-2)}
.hm-a11y__reset:focus-visible{outline:3px solid var(--hm-olive);outline-offset:2px}
.hm-a11y__link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--hm-olive-dark);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.hm-a11y__link:hover{color:var(--hm-olive)}
.hm-a11y__link:focus-visible{outline:3px solid var(--hm-olive);outline-offset:2px}
@media print{.hm-a11y-btn,.hm-a11y{display:none!important}}
@media (prefers-reduced-motion:reduce){.hm-a11y-btn,.hm-a11y,.hm-a11y__opt,.hm-a11y__step{transition:none!important}}
/* ---- 2a. Text size (3 steps). The theme sizes everything in px, so a root font-size change
would not reach the copy; body zoom behaves like the browser's own text zoom and
reflows the layout (supported in Chrome, Edge, Safari and Firefox 126+). ---------- */
html[data-hm-text="1"] body{zoom:1.1}
html[data-hm-text="2"] body{zoom:1.2}
html[data-hm-text="3"] body{zoom:1.32}
/* ---- 2b. High contrast: brand-safe darker tokens on white, underlined links -------- */
html.hm-a11y-contrast{--hm-cream:#FFFFFF;--hm-cream-2:#FFFFFF;--hm-cream-accent:#FFFFFF;--hm-olive:#3E6C12;--hm-olive-dark:#2E520C;--hm-olive-soft:#E3F0D0;--hm-orange:#A9430A;--hm-orange-dark:#8F3806;--hm-lavender:#6B4FC7;--hm-ink:#000000;--hm-text:#111111;--hm-muted:#3A3A38;--hm-line:#6B6B66;--hm-shadow:0 0 0 1px #6B6B66;--hm-shadow-hover:0 0 0 2px #2E520C}
html.hm-a11y-contrast body{background:#fff;color:#111}
html.hm-a11y-contrast a:not(.hm-btn){text-decoration:underline;text-underline-offset:2px}
html.hm-a11y-contrast .hm-btn--buy{background:#8F3806;color:#fff}
html.hm-a11y-contrast .hm-btn--buy:hover{background:#6E2A03}
html.hm-a11y-contrast .hm-btn--primary{background:#2E520C;color:#fff}
html.hm-a11y-contrast .hm-btn--ghost{border-color:#2E520C;color:#2E520C}
html.hm-a11y-contrast .hm-btn--light{color:#000;box-shadow:0 0 0 2px #000 inset}
html.hm-a11y-contrast ::placeholder{color:#3A3A38;opacity:1}
html.hm-a11y-contrast input,html.hm-a11y-contrast select,html.hm-a11y-contrast textarea{border-color:#3A3A38!important;color:#000}
html.hm-a11y-contrast :focus-visible{outline:3px solid #000!important;outline-offset:2px}
html.hm-a11y-contrast .hm-a11y-btn{background:#000;border-color:#fff}
html.hm-a11y-contrast .hm-a11y__opt[aria-pressed="true"]{background:#000;border-color:#000}
/* ---- 2c. Grayscale (filter on the root element does not break position:fixed children) ---- */
html.hm-a11y-gray{filter:grayscale(1)}
/* ---- 2d. Highlight links ---------------------------------------------------------- */
html.hm-a11y-links a:not(.hm-btn):not(.hm-a11y__link){text-decoration:underline!important;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700;background:rgba(255,220,64,.35);box-shadow:0 0 0 2px rgba(255,220,64,.35);border-radius:3px}
html.hm-a11y-links a.hm-btn,html.hm-a11y-links button{outline:2px solid currentColor;outline-offset:2px}
/* ---- 2e. Readable font (system sans) --------------------------------------------- */
html.hm-a11y-font,html.hm-a11y-font body,html.hm-a11y-font *:not(svg):not(svg *):not(code):not(pre){font-family:Arial,Helvetica,"Segoe UI",system-ui,sans-serif!important;letter-spacing:0}
/* ---- 2f. Stop animations: class-based twin of prefers-reduced-motion for the whole site.
Durations are near-zero rather than "none" so transitionend/animationend still fire. ---- */
html.hm-reduce-motion *,html.hm-reduce-motion *::before,html.hm-reduce-motion *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.hm-reduce-motion{scroll-behavior:auto!important}
html.hm-reduce-motion .hm-dl .hm-dl-reveal{opacity:1!important;transform:none!important}
html.hm-reduce-motion .hm-dl .hm-btn:hover,html.hm-reduce-motion .hm-dl .hm-btn:active{transform:none!important}
html.hm-reduce-motion .hm-dl .hm-card:hover .hm-card__img img{transform:none!important}
html.hm-reduce-motion .hm-dl .hm-hero__doodle--spark path{stroke-dashoffset:0;animation:none!important}
html.hm-reduce-motion .hm-dl .hm-hero__doodle--hearts,html.hm-reduce-motion .hm-dl .hm-hero__doodle--hearts path,html.hm-reduce-motion .hm-dl-pet .hm-dl-pet__eye,html.hm-reduce-motion .hm-dl-pet .hm-dl-pet__tail,html.hm-reduce-motion .hm-dl-pet .hm-dl-pet__ear,html.hm-reduce-motion .hm-dl .hm-card__wish.hm-dl-beat svg{animation:none!important}
html.hm-reduce-motion .hm-dl-paws svg{opacity:.38;transform:rotate(-24deg);animation:none!important}
html.hm-reduce-motion .hm-dl-pop{display:none!important}
html.hm-reduce-motion .hm-dl .hm-footer__brand:hover .hm-footer__leaf,html.hm-reduce-motion .hm-dl .hm-footer__leaf:hover{transform:none!important}
html.hm-reduce-motion img,html.hm-reduce-motion video{animation:none!important}
html.hm-reduce-motion video[autoplay]{display:none}
/* ---- 2g. Line spacing (WCAG 1.4.12 text spacing) --------------------------------- */
html.hm-a11y-spacing body{line-height:1.9;letter-spacing:.04em;word-spacing:.12em}
html.hm-a11y-spacing p,html.hm-a11y-spacing li,html.hm-a11y-spacing dd,html.hm-a11y-spacing td,html.hm-a11y-spacing label{line-height:2!important}
html.hm-a11y-spacing p{margin-bottom:1.6em}
html.hm-a11y-spacing h1,html.hm-a11y-spacing h2,html.hm-a11y-spacing h3,html.hm-a11y-spacing h4{line-height:1.5}
/* ---- 2h. Big cursor ------------------------------------------------------------- */
html.hm-a11y-cursor,html.hm-a11y-cursor *{cursor:url("data:image/svg+xml;utf8,") 9 5,auto!important}
html.hm-a11y-cursor a,html.hm-a11y-cursor button,html.hm-a11y-cursor [role="button"],html.hm-a11y-cursor label,html.hm-a11y-cursor summary,html.hm-a11y-cursor select,html.hm-a11y-cursor input[type="checkbox"],html.hm-a11y-cursor input[type="radio"],html.hm-a11y-cursor a *,html.hm-a11y-cursor button *{cursor:url("data:image/svg+xml;utf8,") 16 4,pointer!important}
html.hm-a11y-cursor input[type="text"],html.hm-a11y-cursor input[type="email"],html.hm-a11y-cursor input[type="tel"],html.hm-a11y-cursor input[type="search"],html.hm-a11y-cursor input[type="number"],html.hm-a11y-cursor input[type="password"],html.hm-a11y-cursor textarea{cursor:text!important}
/* the toolbar itself keeps its own styling under "highlight links" (focus rings still apply) */
html.hm-a11y-links .hm-a11y button:not(:focus-visible),html.hm-a11y-links .hm-a11y-btn:not(:focus-visible){outline:0}
html.hm-a11y-links .hm-a11y a.hm-a11y__link{background:none;box-shadow:none}
/* ---------------------------------------------------------------------------
Colour contrast, WCAG 2.1 AA / Israeli standard 5568 (audit 2026-08-22).
Measured on the live site: the muted grey (#8A8A84 and #8A8074) came out at
2.9 to 3.9:1 on our backgrounds and the brand orange (#E8742C) at 2.5 to 3.0:1,
both under the 4.5:1 that body text needs. The values below are the corrected
ones; the orange stays orange, only deeper (4.65:1 on cream, 5.23:1 on white),
and the olive gets its darker shade wherever small white text sits on it.
This block lives in a11y.css because it is the last stylesheet the theme loads,
so it wins over the per-area parts without needing specificity tricks.
--------------------------------------------------------------------------- */
:root{
--hm-muted:#69695F;
--hm-orange:#B34E12;
--hm-orange-dark:#9E4409;
--hm-orange-btn:#B34E12;
--hm-orange-btn-hover:#9E4409;
}
.hm-grev__when,.hm-grev__who span{color:#6E665C}
.hm-card__badge:not(.hm-card__badge--orange){background:var(--hm-olive-dark,#4A7423)}
.hm-badge--olive,.hm-chip--olive{background:var(--hm-olive-dark,#4A7423)}
.hm-express__btn{color:var(--hm-muted)}
/* The buy button keeps its own hardcoded fills in main.css and a scoped token block in home.css,
so both are restated here at 5.2:1 for white text. */
.hm-btn--buy{background:#B34E12;color:#fff}
.hm-btn--buy:hover{background:#9E4409;color:#fff}
.hm-home{--hm-orange-btn:#B34E12;--hm-orange-btn-hover:#9E4409;--hm-orange-text:#B34E12}
/* The primary green failed AA in both directions at small sizes (3.86:1 as text on white and with
white text on top). #4E7A26 is the same green a shade deeper: 5.08:1 with white, 4.51:1 on cream. */
:root{--hm-olive:#4E7A26}
.hm-crumbs span{color:var(--hm-muted)}
.qty-btn{color:#69695F}
/* ---------------------------------------------------------------------------
Muted text pass (David, 11.9.2026, from his phone: the small grey text reads too
light). The AA greys above (#69695F / #66665F / #6B6B66 / #6E665C, 4.7 to 5.8:1)
are fine on paper but thin at 12-14px on iPhone. One deeper grey for every muted
token: #4F4F48 = 8.6:1 on white, 7.6:1 on cream, still clearly secondary next to
the ink #2E2E2C. Plugins that print var(--hm-muted, fallback) pick it up too.
--------------------------------------------------------------------------- */
:root{--hm-muted:#4F4F48;--hm-c-muted:#4F4F48}
.hm-home{--hm-muted-aa:#4F4F48}
.hm-calc,.hm-pets-wrap,.hm-club{--calc-muted:#4F4F48}
.hm-calc__help{color:#4F4F48}
.hm-grev__when,.hm-grev__who span{color:#4F4F48}
.hm-card__perkg,.hm-crumbs span,.qty-btn{color:#4F4F48}
.hm-news__consent,.hm-news__legal,.hm-footer__bottom,.hm-built{color:#4F4F48}
.hm-faq-search input::placeholder,.hm-cform input::placeholder,.hm-cform textarea::placeholder,.hm-page--content .hm-search input::placeholder{color:#5F5F58}
.single-product .hm-price__unit,.single-product .hm-shipnote{color:#4F4F48}