/**
 * Floating WhatsApp button — see framework/whatsapp-button.php for why it
 * exists and how it mirrors in RTL.
 */
.siggi-whatsapp {
    position: fixed;
    bottom: 25px;
    /* The end of the line, not the right-hand edge: logical properties put
       this in the bottom-right corner in Russian and English and the
       bottom-left one in Hebrew, off the `dir="rtl"` WordPress already prints
       on <html>. One declaration, no second rule to keep in sync — the same
       choice order-request.css and quick-view-close-button.css made, and for
       the same reason.

       22, not 25: it puts this button's centre on the same line as
       a.backtotop's (30px from the same edge on a 40px control), so the two
       read as one column rather than two near-misses when both are on
       screen.

       Nothing in this file may set `right` or `left` on this button again.
       Mixing the two kinds does not read as a mistake anywhere it is written:
       a later `right: 12px` and this line would both apply, and an
       over-constrained fixed box under `dir="rtl"` resolves in favour of
       `right` (CSS 2.1 §10.3.7) — so the button would return to the right in
       Hebrew alone, with nothing in devtools looking overridden. */
    inset-inline-end: 22px;
    z-index: 99; /* above a.backtotop (9), below the theme's own overlays */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.siggi-whatsapp:hover,
.siggi-whatsapp:focus {
    color: #fff;
    background-color: #1ebe5a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

.siggi-whatsapp:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.siggi-whatsapp__icon {
    display: block;
    width: 28px;
    height: 28px;
}

@media (max-width: 767px) {
    .siggi-whatsapp {
        bottom: 18px;
        inset-inline-end: 18px;
        width: 52px;
        height: 52px;
    }

    .siggi-whatsapp__icon {
        width: 26px;
        height: 26px;
    }
}

/**
 * The mobile template — which the theme picks by user agent, not by viewport
 * width — ends in a fixed bottom bar (`.header-mobile .fixed`, 55px tall,
 * z-index 14) carrying Home / Menu / My cart / To top. Sitting 18px off the
 * bottom put this button squarely on top of its last item, so on that template
 * it rides above the bar instead.
 *
 * `body.boutique-enable-mobile` is the theme's own marker for that template
 * (functions.php sets it from `kute_boutique_is_mobile()`) — anchoring here
 * rather than to a width means a narrow desktop window, which has no bar, does
 * not get the gap.
 *
 * Note what this class does **not** tell you: whether `a.backtotop` is on the
 * page. The theme hides that one by *width*, not by this class, which is what
 * the block below exists to deal with — do not read the two as the same
 * condition.
 *
 * Nor does it tell you what that bar looks like. The theme ships a second
 * mobile header, `mobile-style-02`, whose bar is not a strip but an expanding
 * cluster reaching 133px up (`style-mobile.css`) — under it 73px is not enough,
 * in Hebrew or in any other language. The shop runs `mobile-style-01` (the body
 * carries `boutique-mobile-style-01`), so this is a note for whoever changes
 * that option, not a defect: the number below is measured against the strip.
 */
.boutique-enable-mobile .siggi-whatsapp {
    /* 55px bar + 18px. The 55 is measured, not declared: `.header-mobile
       .fixed` sets no height, deriving it from padding, icon and label — so a
       theme update that changes any of the three moves the bar, and this
       number needs re-measuring rather than trusting. */
    bottom: 73px;
}

/**
 * A tablet gets the mobile template *and* keeps the theme's back-to-top, and
 * that combination is the one place the two controls fight.
 *
 * `kute_boutique_is_mobile()` asks Mobile_Detect for `isMobile() || isTablet()`
 * — a user agent test with no width in it — but both rules that hide
 * `a.backtotop` on that template are width-gated: `style.css`'s lives inside
 * `@media (max-width: 767px)`, and `style-mobile.css`'s
 * `.header-mobile ~ .backtotop` never matches at all, because `.header-mobile`
 * sits *inside* `div.site` while `a.backtotop` is `div.site`'s sibling. So on a
 * landscape tablet the bar is at 0–55px, the back-to-top is visible at
 * 100–140px, and 73px puts this button straight through it — measured, not
 * assumed: 628–668 against 638–696 on a 1024×768 iPad UA.
 *
 * The 45px between bar and back-to-top cannot hold a 56px button, so the only
 * free corner left is above both. The theme's own control is left alone: it is
 * the theme's to show, and hiding it here would be a second module quietly
 * changing a third one's behaviour.
 *
 * This applies in Hebrew for the same reason it applies in Russian, and that is
 * newer than the rest of the file: while this button stayed on the right in
 * every language, an RTL tablet had nothing to clear — `style-rtl.css` moves
 * `a.backtotop` to the left, so the two were on opposite sides. Since the
 * button mirrors, they share a side again in Hebrew too, and the lift is what
 * keeps them apart there rather than a convenience.
 */
@media (min-width: 768px) {
    .boutique-enable-mobile .siggi-whatsapp {
        bottom: 150px; /* clears a.backtotop's 100–140px band */
    }
}

@media (prefers-reduced-motion: reduce) {
    .siggi-whatsapp {
        transition: none;
    }

    .siggi-whatsapp:hover,
    .siggi-whatsapp:focus {
        -webkit-transform: none;
        transform: none;
    }
}

@media print {
    .siggi-whatsapp {
        display: none !important;
    }
}