/*
 * PCM Accessibility — storefront layer.
 *
 * The module links this file right before </head>, after every theme
 * stylesheet and the theme's inline <style>, so these rules win without
 * editing app.css. Only direction-neutral properties are used (outline,
 * colour, sizes, logical properties), so the theme's RTL rules keep working.
 */

:root {
    --pcm-a11y-focus: #1a237e;
    --pcm-a11y-focus-halo: #fff;
}

/* Text for screen readers only. */
.pcm-a11y-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Visible keyboard focus (WCAG 2.4.7). The theme removes every outline
 * (`* { outline: none }` and the .btn / fancybox / radio resets), so the
 * indicator is restored with !important. :focus-visible keeps mouse clicks
 * free of the ring. Dark ring with a white inner halo: visible on the white
 * pages and on the coloured header, footer and buttons alike.
 */
:focus-visible {
    outline: 3px solid var(--pcm-a11y-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--pcm-a11y-focus-halo) !important;
}

/*
 * Where a theme container clips its overflow, the outer ring above is cut:
 * the filter tabs of the product blocks scroll sideways (overflow-x: auto,
 * which makes the other axis clip too), and the header's top bar
 * (.header__row--01) sits at the top edge of .app { overflow: hidden }. There
 * the ring goes inside the element: the dark 3px at its edge, the white halo
 * inside it.
 */
.products-featured__filter :focus-visible,
.header__row--01 .header__info-link:focus-visible,
.header__row--01 .header__call-btn:focus-visible,
.header__row--01 .header__currency-btn:focus-visible,
.header__row--01 .header__language-btn:focus-visible {
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 5px var(--pcm-a11y-focus-halo) !important;
}

/*
 * The top bar's links and buttons have no inline padding, so an inner ring
 * would run over the first and last letters. Room for it with the same
 * footprint: the padding and the negative margin cancel out. Scoped to the
 * desktop top bar: elsewhere the same classes are fixed-size or bordered
 * boxes (mobile header, checkout header) and are left alone.
 */
@media (min-width: 1200px) {
    .header__row--01 .header__info-link,
    .header__row--01 .header__call-btn,
    .header__row--01 .header__currency-btn,
    .header__row--01 .header__language-btn {
        padding-inline: 5px;
        margin-inline: -5px;
    }
}

/* "Skip to main content": off screen until it gets keyboard focus. */
.pcm-a11y-skip {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 2147483000;
    padding: 12px 18px;
    background: #fff;
    color: var(--pcm-a11y-focus) !important;
    font: 700 16px/1.25 Arial, Helvetica, sans-serif;
    text-decoration: underline !important;
    border: 3px solid var(--pcm-a11y-focus);
    border-end-end-radius: 8px;
    transform: translateY(-200%);
}

.pcm-a11y-skip:focus {
    /* a11y-ok outline-none {.pcm-a11y-skip:focus}: the link itself shows up with its 3px border. */
    transform: none;
    outline: none !important;
    box-shadow: none !important;
}

/* Skip link target: an empty marker right before the page content. */
.pcm-a11y-target {
    display: block;
    height: 0;
    scroll-margin-top: 120px;
}

.pcm-a11y-target:focus,
.pcm-a11y-target:focus-visible {
    /* a11y-ok outline-none {.pcm-a11y-target:focus, .pcm-a11y-target:focus-visible}: an empty marker, not a control. */
    outline: none !important;
    box-shadow: none !important;
}

/*
 * Window titles get focus only so that screen readers start reading the
 * window there (fancyboxA11y() in app.js). They are not controls and the
 * next Tab goes to the first field, so no ring around them.
 */
.fancybox-container [tabindex="-1"]:focus {
    /* a11y-ok outline-none {.fancybox-container [tabindex="-1"]:focus}: window titles, not controls; the next Tab goes to a field. */
    outline: none !important;
    box-shadow: none !important;
}

/*
 * Radio buttons and checkboxes drawn by the theme: product options, the
 * review rating, filters, agreements, account and cart forms (.ui-check,
 * .ui-rating). The theme hides the real inputs with visibility: hidden, which
 * also takes them out of the keyboard order and away from screen readers —
 * a required option could not be chosen without a mouse. The inputs stay
 * invisible (clipped to nothing, transparent, not clickable — the label still
 * toggles them) but are focusable again; the focus ring goes on the visible
 * part next to them. Only an outline there: the selected option itself is
 * marked with a box-shadow.
 *
 * visibility: inherit, not visible: the theme also hides whole panels with
 * visibility: hidden (an inactive tab, the review forms and the filter on
 * phones while closed), and an explicit visible on the input would show it
 * through — invisible Tab stops and stars nobody can see.
 */
.ui-check__input,
.ui-rating__input {
    visibility: inherit !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

/*
 * Right inside its label (.ui-check, position: relative in the theme) the
 * input covers the whole label, still clipped to nothing: the browser scrolls
 * a focused field into view by its own box, and a 1px box in the label's
 * corner could count as visible while the chip itself stayed outside — at the
 * edge of the screen or of a collapsed filter group.
 */
.ui-check > .ui-check__input {
    width: 100% !important;
    height: 100% !important;
}

.ui-check__input:focus-visible ~ .ui-check__checkbox,
.ui-check__input:focus-visible ~ .ui-check__radio,
.ui-check__input:focus-visible ~ .ui-check__option,
.ui-check__input:focus-visible ~ .ui-check__tag,
.ui-check__input:focus-visible ~ .ui-check__btn,
.ui-rating__input:focus-visible + .ui-rating__star {
    outline: 3px solid var(--pcm-a11y-focus) !important;
    outline-offset: 2px !important;
}

/*
 * Filter values (.ui-check__tag) in a long group: readmore.js collapses
 * .filter-aside__group-body to 275px with overflow: hidden, and there is no
 * room around the tags, so the outer ring of the tags at its edges was cut.
 * The ring goes inside the tag, as in the other clipping containers above.
 */
.filter-aside__group-body .ui-check__input:focus-visible ~ .ui-check__tag {
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 5px var(--pcm-a11y-focus-halo) !important;
}

/*
 * In the same groups the theme's list reaches 1.5rem past its right edge
 * while the gap after each tag is 0.5rem, both set for left-to-right: a tag
 * at the end of a row could stick out by up to 1rem, and in Hebrew every row
 * starts at the right edge, 1rem outside it — in a collapsed group these tags
 * were cut together with their ring. The list now reaches past the end edge
 * by just the gap, on the end side of the page's direction (logical margins
 * replace the theme's left and right ones).
 */
.filter-aside__group-checklist {
    margin-inline-start: 0;
    margin-inline-end: -0.5rem;
}

.filter-aside__group-checklist > li {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

/*
 * The theme puts the rating's inputs at top: 0; left: 0 (position: absolute)
 * of the nearest positioned ancestor — without this, a distant wrapper or the
 * fixed overlay of the phone form, so focusing a star scrolled to that corner
 * and left the star off the screen.
 */
.ui-rating {
    position: relative;
}

/* On phones the stars are white cells overlapping by 1px: the focused one is
   raised, or the next cell covers one side of its ring. */
.ui-rating__input:focus-visible + .ui-rating__star {
    position: relative;
    z-index: 1;
}

/*
 * Product cards (≥1200px): "Add to cart", quantity, discount and the photo
 * arrows appear only on :hover (visibility: hidden otherwise), so a keyboard
 * user could never reach them. Show them the same way while the keyboard is
 * in the card — tabbing to the product link reveals the card's controls, the
 * next Tab enters them. Mirrors the theme's .products__item:hover rules, but
 * without the theme's 0.25s fade-in: during it the buttons are still hidden,
 * and a quick Tab would skip them.
 *
 * Only for keyboard use, never after a mouse click: browsers focus a button
 * on a click, a click into the quantity field (shown for products already in
 * the cart) focuses it, and fancybox gives focus back to "Quick view" when it
 * closes. A card left open by such focus reaches into the card below and, at
 * z-index 20 over the neighbours' 10, swallows clicks meant for it — a lost
 * "Compare", or "Add to cart" of the wrong product. So the card opens when:
 *   - .pcm-a11y-kbd .products__item:focus-within — focus is in the card and
 *     the keyboard is in use (pcm_accessibility.js: Tab or Escape set the
 *     class, a mouse press clears it). Covers the quantity field reached by
 *     Tab;
 *   - .products__item:has(:focus-visible:not(input, textarea, select)) — a
 *     link or button has keyboard-style focus. Covers focus moved by a screen
 *     reader without key events, and the page before the script runs. Fields
 *     are left out: they match :focus-visible on a mouse click as well.
 * Both selectors are more specific than the theme's :hover rules — (0,4,0)
 * and (0,3,1) against (0,3,0). Each rule comes twice, once per selector
 * form, never as one list: a browser that does not know :has() (Firefox
 * before 121, ESR 115 included) drops a whole rule whose list has it, and
 * the keyboard form would go with it.
 */
.pcm-a11y-kbd .products__item:focus-within {
    z-index: 20;
}

.products__item:has(:focus-visible:not(input, textarea, select)) {
    z-index: 20;
}

.pcm-a11y-kbd .products__item:focus-within .products__item-in:before {
    opacity: 1;
    box-shadow: 0 0 20px rgba(170, 189, 206, 0.25);
}

.products__item:has(:focus-visible:not(input, textarea, select)) .products__item-in:before {
    opacity: 1;
    box-shadow: 0 0 20px rgba(170, 189, 206, 0.25);
}

.pcm-a11y-kbd .products__item:focus-within .products__item-discount,
.pcm-a11y-kbd .products__item:focus-within .products__item-action {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition: none;
}

.products__item:has(:focus-visible:not(input, textarea, select)) .products__item-discount,
.products__item:has(:focus-visible:not(input, textarea, select)) .products__item-action {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition: none;
}

/*
 * Compact catalog cards (.products__item--min, category_micro.twig), width
 * 1200px and up only: the buy block is always visible and absolutely
 * positioned (.products__item--min .products__item-action in app.css,
 * itself inside @media (min-width: 1200px), unconditional on :hover). The
 * generic :hover rule above out-ranks that base rule, so the theme adds its
 * own :hover exception, in the same media query,
 * (.products__item--min:hover .products__item-action { position: absolute })
 * to win it back. The keyboard rules above need the same exception — the
 * same two selector forms (same specificity, later in the file, separate
 * rules for the same reason), the same single property, the same media
 * query. The media query matters as much as the selector: below 1200px, when
 * the theme's `mobile_buttons` setting is on, header.twig prints its own
 * @media (max-width: 1199px) rule that sets the card to height:auto and the
 * buy block to position:relative so it sizes the card from inside the normal
 * flow; an unscoped exception here would win at every width, including that
 * one, pulling the buy block out of flow while the card still has no fixed
 * height — the card collapses around the description and the buttons end up
 * outside its background.
 */
@media (min-width: 1200px) {
    .pcm-a11y-kbd .products__item--min:focus-within .products__item-action {
        position: absolute;
    }

    .products__item--min:has(:focus-visible:not(input, textarea, select)) .products__item-action {
        position: absolute;
    }
}

.pcm-a11y-kbd .products__item:focus-within .swiper-images .swiper-prev,
.pcm-a11y-kbd .products__item:focus-within .swiper-images .swiper-next {
    opacity: 1;
    transform: translate(0, 0);
}

.products__item:has(:focus-visible:not(input, textarea, select)) .swiper-images .swiper-prev,
.products__item:has(:focus-visible:not(input, textarea, select)) .swiper-images .swiper-next {
    opacity: 1;
    transform: translate(0, 0);
}

.pcm-a11y-kbd .products__item:focus-within .hpm-cat-box {
    opacity: 1;
    visibility: visible;
    display: block;
}

.products__item:has(:focus-visible:not(input, textarea, select)) .hpm-cat-box {
    opacity: 1;
    visibility: visible;
    display: block;
}

/*
 * The header's desktop dropdowns (language, currency, phone) open from their
 * buttons too (PcmA11y.disclosure() in pcm_accessibility.js). With the
 * keyboard they open and close without the theme's 0.25s fade: at the start
 * of the fade-in the panel is still visibility: hidden, and a quick Tab after
 * Enter went past it; during the fade-out it is still visible, and a quick
 * Shift+Tab back went into the closing list. The fade stays for the mouse,
 * and below 1200px, where the same classes are the theme's full-screen
 * sheets, nothing changes.
 */
@media (min-width: 1200px) {
    .pcm-a11y-kbd .header__language > .header__language-offcanvas,
    .pcm-a11y-kbd .header__currency > .header__currency-offcanvas,
    .pcm-a11y-kbd .header__call > .header__call-offcanvas {
        transition: none;
    }
}

/*
 * Focus going back to a card button after a window opened from it closes
 * (fancyboxReturnFocus() in app.js): with focus in the window the buttons
 * were hidden again, and a hidden button cannot take focus. The script sets
 * this class for that moment. Afterwards the card stays open only while the
 * keyboard is in use (.pcm-a11y-kbd, or the returned focus is
 * :focus-visible). A window opened by a press on the button takes focus off
 * it again right away, so the card closes as on mouse-out even when the
 * window was closed with Escape.
 */
.products__item.pcm-a11y-reveal .products__item-action {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition: none;
}

/*
 * The floating WhatsApp button (footer.twig, position: fixed) is drawn over
 * the phone sheets, but while a sheet is open the page behind it is inert
 * (PcmA11y.disclosure(), modal) and so is the button: it would be seen and
 * not work. Hidden for that time.
 */
.wa-sticky[inert],
[inert] .wa-sticky {
    visibility: hidden;
}