/* ================================================
   ESPRESSIMO ACCESSIBILITY LAYER (2026-10-20, IS 5568 / WCAG 2.1 AA)
   Loaded site-wide after the widget stylesheets. Pairs with assets/js/esp-a11y.js.
   1. Pause/play buttons for moving content (2.2.2)
   2. Focus rings on carousel arrows and pause buttons (2.4.7)
   3. Product cards: link on the title stretched over the card, add-to-cart outside it
   4. Category filter toggle button, Elementor popup close target
   5. Contrast fixes (1.4.3), measured pairs listed per rule
   ================================================ */

/* ── 1. Pause / play button (shared look: the round white carousel arrow) ── */
.esp-motion-btn,
.esp-motion-btn:hover,
.esp-motion-btn:focus,
.esp-motion-btn:active {
    position: absolute;
    z-index: 6;
    width: 44px !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #522c25 !important;
    box-shadow: 0 2px 10px rgba(82, 44, 37, 0.22) !important;
    cursor: pointer;
    line-height: 1 !important;
    text-transform: none !important;
}
.esp-motion-btn:hover { background: #fff9f2 !important; }
.esp-motion-btn svg { display: block; width: 18px; height: 18px; flex: none; pointer-events: none; }

/* Product + blog carousels: top of the left ("next") arrow column on desktop/tablet. */
.esp-sales__carousel,
.esp-bestsel__carousel,
.esp-blog__carousel { position: relative; }
.esp-motion-btn--card { top: 12px; left: 10px; }
@media (max-width: 1024px) { .esp-motion-btn--card { left: 0; } }
/* Phones: the arrows float on the image; the button sits right under the left arrow,
   same 34px look, with an invisible ring that makes the touch target 44px. */
@media (max-width: 560px) {
    .esp-motion-btn--card,
    .esp-motion-btn--card:hover,
    .esp-motion-btn--card:focus {
        width: 34px !important;
        height: 34px !important;
        left: 4px;
        top: calc(10px + (50vw - 16px) / 2 + 25px);
    }
    .esp-blog__carousel .esp-motion-btn--card { left: 12px; top: calc(40% + 29px); }
    .esp-motion-btn--card::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
    .esp-motion-btn--card svg { width: 16px; height: 16px; }
}

/* Home hero: same translucent look as the hero arrows, left of the slide dots. */
.esp-motion-btn--hero,
.esp-motion-btn--hero:hover,
.esp-motion-btn--hero:focus {
    bottom: 8px;
    left: calc(50% - var(--esp-dots-w, 64px) / 2 - 60px);
    background: rgba(255, 249, 242, 0.18) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
}
.esp-motion-btn--hero:hover,
.esp-motion-btn--hero:focus-visible { background: #fff9f2 !important; color: #522c25 !important; }
@media (max-width: 767px) {
    /* Phones: bottom-left corner, clear of the centred button and the side arrows. */
    .esp-motion-btn--hero,
    .esp-motion-btn--hero:hover,
    .esp-motion-btn--hero:focus { left: 10px; bottom: 10px; }
}

/* Brands strip: right end of the strip (the floating cart button sits on the left edge), vertically centred. */
.esp-motion-btn--brands,
.esp-motion-btn--brands:hover,
.esp-motion-btn--brands:focus { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
    .esp-motion-btn--brands,
    .esp-motion-btn--brands:hover,
    .esp-motion-btn--brands:focus { right: 8px; }
}
/* The endless CSS animation stops while paused (button, hover, focus, hidden tab, Ally),
   and never runs under prefers-reduced-motion. */
.esp-brands:hover .esp-brands__track,
.esp-brands:focus-within .esp-brands__track,
/* Paused through the Web Animations API in esp-a11y.js; this rule stays as the no-JS-API fallback. */
.esp-brands.esp-motion--paused .esp-brands__track { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .esp-brands .esp-brands__track { animation-play-state: paused !important; }
}

/* ── 2. Focus rings (2px #522C25, offset; 12.0:1 on #fff9f2) ── */
.esp-sales__nav:focus-visible,
.esp-bestsel__nav:focus-visible,
.esp-blog__nav:focus-visible,
.esp-motion-btn:focus-visible {
    outline: 2px solid #522c25 !important;
    outline-offset: 2px !important;
}
/* Keep the arrow icon brown on focus (the theme's button:focus turns text white). */
.esp-sales__nav:focus,
.esp-bestsel__nav:focus,
.esp-blog__nav:focus { color: #522c25 !important; }
/* Desktop arrow columns run the full height: draw the ring inside the column. */
@media (min-width: 561px) {
    .esp-sales__nav:focus-visible,
    .esp-bestsel__nav:focus-visible,
    .esp-blog__nav:focus-visible { outline-offset: -4px !important; }
}
/* On the hero photo: white ring with a brown halo, visible on light and dark images. */
.esp-hero__arrow:focus-visible,
.esp-hero__dot:focus-visible,
.esp-motion-btn--hero:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #522c25 !important;
}

/* ── 3. Product cards: <div class="… esp-card"> + title link stretched over the card ── */
.esp-card { position: relative; }
.esp-card__link,
.esp-card__link:hover,
.esp-card__link:visited,
.esp-card__link:focus {
    color: inherit !important;
    text-decoration: none !important;
    font: inherit;
    outline: none;
}
.esp-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.esp-card__link:focus-visible::after { outline: 2px solid #522c25; outline-offset: -3px; border-radius: inherit; }
.esp-card .add_to_cart_button { position: relative; z-index: 2; }
.esp-card .add_to_cart_button:focus-visible { outline: 2px solid #522c25 !important; outline-offset: 2px !important; }

/* ── 4a. Category filter "סינון": the mobile toggle is a real button that looks like the heading ── */
.esp-cprod__side-toggle,
.esp-cprod__side-toggle:hover,
.esp-cprod__side-toggle:focus,
.esp-cprod__side-toggle:active {
    all: unset !important;
    flex: 1 1 auto !important;
    cursor: pointer !important;
}
.esp-cprod__side-toggle:focus-visible { outline: 2px solid #522c25 !important; outline-offset: 2px !important; }

/* ── 4b. Elementor popup close (×): 15px icon, 45px target via an invisible ring ── */
.elementor-popup-modal .dialog-close-button::before {
    content: "";
    position: absolute;
    inset: -15px;
}
.elementor-popup-modal .dialog-close-button:focus-visible { outline: 2px solid #522c25 !important; outline-offset: 4px !important; }

/* ── 5. Contrast (1.4.3) ── */
/* Footer WhatsApp button: white on #25d366 1.98 → white on #11853d 4.72 (hover #0d6e32 6.38). */
.esp-footer__talk-btn--wa { background: #11853d !important; }
.esp-footer__talk-btn--wa:hover { background: #0d6e32 !important; }

/* Brand orange TEXT #c46500 → #a35200 (owner approved).
   On #fff9f2 3.86 → 5.34, on #f6ede3 3.48 → 4.82, on #fff 4.03 → 5.58, on #f0e6dc hover → 4.53. */
.esp-cathero__eyebrow,
.esp-cprod__brand,
.esp-rel__brand,
.esp-mzrec__brand,
.esp-grec__brand,
.esp-ph__brand,
.esp-ph__shipping,
.esp-ph__installments,
.esp-fr__label,
.esp-bs__label,
.esp-faq__doc-dl,
.esp-ac__doc-dl,
.esp-av2-hero__eyebrow,
.esp-av2-founders__eyebrow,
.esp-av2-founders__role,
.esp-av2-founders__role span,
.esp-av2-store__eyebrow,
.esp-abh__eyebrow,
.esp-fnd__eyebrow,
.esp-fnd__role,
.esp-msplit__eyebrow,
.esp-store__eyebrow,
.esp-mzh__eyebrow,
.esp-mzarch__eyebrow,
.esp-mzarch__cat,
.esp-mzc__blend-sub,
.esp-gh__eyebrow,
.esp-garch__eyebrow,
.esp-garch__cat,
.esp-mega-menu__product-price,
.esp-mega-menu__badge { color: #a35200 !important; }

/* Orange on the dark brown CTA band (24px bold = large text, needs 3:1): #c46500 2.98 → #cc6d0a 3.30. */
.esp-mzcta__footnote,
.esp-gcta__footnote { color: #cc6d0a !important; }

/* Primary CTA buttons, 22px regular: white on #c46500 4.03 → white on #a35200 5.58 (hover #a34500 stays). */
.esp-av2-cta__btn--primary,
.esp-mzcta__btn--primary,
.esp-gcta__btn--primary { background: #a35200 !important; }
.esp-av2-cta__btn--primary:hover,
.esp-mzcta__btn--primary:hover,
.esp-gcta__btn--primary:hover { background: #a34500 !important; }

/* Current page in the category pagination: #fff9f2 on #c46500 3.86 → on #a35200 5.34. */
.esp-cprod__page.is-active,
.esp-cprod__page.is-active:hover,
.esp-cprod__page.is-active:focus { background-color: #a35200 !important; border-color: #a35200 !important; }

/* Struck-through prices: #522c25 at 30% opacity (#cbbbb4) 1.77 → solid #75605a 5.61 on #fff9f2
   (5.07 on the #f6ede3 hover), the same grey the home carousels already use. */
.esp-cprod__orig,
.esp-rel__price-original,
.esp-mzrec__old,
.esp-grec__old { opacity: 1 !important; color: #75605a !important; }

/* "מומלץ" badge: its background is the product's own card_badge_color #eeee22;
   white text 1.24 → brown #522c25 9.67. */
[class*="badge"][style*="#eeee22" i] { color: #522c25 !important; }

/* "עודכן" date lines (accessibility statement, privacy policy): #977e77 3.60 → #75605a 5.61 on #fff9f2. */
.esp-acc__updated,
.esp-privacy__updated { color: #75605a !important; }

/* Product page labels drawn at 80% opacity: full opacity so the #a35200 above reads at
   5.34 (#fff9f2) / 4.82 (#f6ede3) instead of ~3.9. */
.esp-fr__label,
.esp-bs__label { opacity: 1 !important; }
/* Feature numbers (52px bold = large text): #c46500 at 85% opacity 2.86 → full opacity 3.48 on #f6ede3. */
.esp-pf__num { opacity: 1 !important; }

/* Brands strip logos (first copy) are keyboard links now: ring + full colour on focus. */
.esp-brands__item a:focus-visible { outline: 2px solid #522c25 !important; outline-offset: 2px !important; }
.esp-brands__item a:focus-visible img { filter: none; }


/* ── 6. Focus rings everywhere (re-audit 2026-10-20) ──
   Default for links and buttons: 2px brown ring with a 2px cream gap, so the ring reads on cream
   pages (#522c25 vs #fff9f2 11.5:1) and on brown buttons (cream gap vs #8b3a00 7.8:1).
   Widgets with their own ring above keep it (higher specificity / !important). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid #522c25;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff9f2;
}
/* Brown buttons whose own CSS removes the shadow or outline on focus. */
.esp-hero__btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #522c25 !important; }
.esp-card .add_to_cart_button:focus-visible,
.esp-addcart-btn:focus-visible,
.esp-cprod__cart:focus-visible,
.esp-footer__talk-btn:focus-visible { box-shadow: 0 0 0 2px #fff9f2 !important; }
/* Cookie banner (brown panel): cream ring with a brown gap around the cream button. */
.cc-window .cc-btn:focus-visible,
.cc-window .cc-link:focus-visible { outline: 2px solid #fff9f2 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #522c25 !important; }
/* Mobile drawer "החנות" accordion button (its own rule removes the outline). */
.esp-header__drawer .esp-header__d-acc-btn:focus-visible { outline: 2px solid #522c25 !important; outline-offset: -2px !important; }
/* Footer newsletter fields: keep the orange border and add the ring (its rule removes the outline). */
.esp-footer__eform .elementor-field-textual:focus-visible,
.esp-footer__eform .elementor-field-textual:focus { outline: 2px solid #522c25 !important; outline-offset: 2px !important; }
/* Sort menu option with keyboard focus. */
.esp-cprod__sort-opt:focus-visible { outline: 2px solid #522c25 !important; outline-offset: -2px !important; background: #f6ede3; }

/* ── 7. Checkout (re-audit, measured with an item in the cart) ──
   "(אופציונלי)": #522c25 at 50% opacity = #a99692, 2.81 → solid #75605a 5.87 on #fff.
   Privacy text is drawn at 70% opacity, so its link was #ab7044 3.53 on #f6ede3 → full opacity:
   text #75605a 5.07, link #8b3a00 6.71. */
label .optional,
.woocommerce form .form-row label .optional { opacity: 1 !important; color: #75605a !important; }
body.woocommerce-checkout .woocommerce-privacy-policy-text p { opacity: 1 !important; color: #75605a !important; }

/* Popup container receives focus on open (dialog semantics); no ring around the whole panel. */
.elementor-popup-modal[role="dialog"]:focus { outline: none; }

/* Client 2026-10-20, mobile: the cookie-settings tab sits 20px from the bottom (above the purchase bar on product pages). */
@media (max-width: 767px) {
    .cc-revoke.cc-bottom { bottom: 20px !important; transform: none !important; }
    .cc-revoke.cc-bottom { transition: bottom .3s ease !important; }
    body.esp-bar-on .cc-revoke.cc-bottom { bottom: 85px !important; }
}

/* Client 2026-10-20, mobile: no single orphan word on the last line of headings and paragraphs. */
@media (max-width: 767px) {
    h1, h2, h3, h4, .elementor-heading-title { text-wrap: balance; }
    p, li, .esp-about-intro__body { text-wrap: pretty; }
}