/**
 *
 *   Mobile shop
 *   ===========
 *
 *   Mobile usability fixes for the storefront. See inc/functions/mobile-shop.php
 *   and js/theme.mobile-shop.js.
 *
 */


/**
 *   FLOATING CART BUBBLE
 *   --------------------
 *   The Xoo side cart's floating basket sat over the cookie banner's "reject
 *   all" button and over checkout fields. Wherever the mobile header shows
 *   (below Responsiville's desktop breakpoint, 1280px) it already carries a
 *   cart icon that opens the same side cart, and that header is sticky, so the
 *   bubble is redundant there.
 *
 *   Xoo's script sets style="display: block" on the bubble, and its stylesheet
 *   answers with .xoo-wsc-basket[style*="block"] { display: flex !important },
 *   which outranks a bare class. body ...[style] is more specific than that.
 */
@media ( max-width: 1279px ) {

    .xoo-wsc-basket,
    body .xoo-wsc-basket[style] {
        display: none !important;
    }

}


/**
 *   PRODUCT CARD "ΣΤΟ ΚΑΛΑΘΙ" BUTTON
 *   --------------------------------
 *   style.css sizes this button to its content with "padding: 0 !important",
 *   and on a two-column phone grid the 30px cart icon plus 16px text filled
 *   the whole pill edge to edge. Here the button gets side padding, and a
 *   smaller icon and text so the label still fits on 360px-wide phones.
 *
 *   The icon is a background instead of style.css's content: url(), because
 *   an image set through content cannot be resized. style.css's white filter
 *   on the pseudo-element still applies.
 */
@media ( max-width: 768px ) {

    .archive ul.products .add_to_cart_button,
    .archive ul.products .rtwpvs_add_to_cart,
    .related .add_to_cart_button {
        gap: 6px;
        min-height: 48px;
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding: 0 12px !important;
        font-size: 14px;
        white-space: nowrap;
    }

    .archive ul.products .add_to_cart_button:before,
    .related .add_to_cart_button:before {
        content: "";
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        margin-right: 0;
        background: url( "../inc/responsiville/icons/svg/cart.svg" ) center / contain no-repeat;
    }

}


/**
 *   STICKY ADD TO CART
 *   ------------------
 *   Hidden with visibility as well as the transform, so the offscreen copy of
 *   the button cannot be reached by keyboard or screen reader.
 *
 *   It stays under the fixed header (z-index 10000), the mobile menu (9998),
 *   the side cart and the FiboFilters overlay.
 */
.nvm-sticky-atc {
    display: none;
}

@media ( max-width: 1024px ) {

    .nvm-sticky-atc {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9000;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px calc( 8px + env( safe-area-inset-bottom ) );
        background-color: var( --nvm-color-white );
        box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.12 );
        visibility: hidden;
        transform: translateY( 100% );
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .nvm-sticky-atc.is-visible {
        visibility: visible;
        transform: none;
        transition: transform 0.25s ease, visibility 0s linear 0s;
    }

    .nvm-sticky-atc__image {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .nvm-sticky-atc__image img {
        display: block;
        width: 44px;
        height: 44px !important;
        object-fit: cover;
        border-radius: 4px;
    }

    .nvm-sticky-atc__info {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .nvm-sticky-atc__title {
        overflow: hidden;
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .nvm-sticky-atc__price {
        font-size: 15px;
        font-weight: 600;
    }

    .nvm-sticky-atc__price del {
        font-size: 12px;
        font-weight: 400;
        opacity: 0.6;
    }

    .nvm-sticky-atc__price ins {
        text-decoration: none;
    }

    /* Matches the real single_add_to_cart_button in style.css. */
    .nvm-sticky-atc__button {
        flex: 0 0 auto;
        min-height: 48px;
        margin: 0;
        padding: 0 18px;
        border: 2px solid var( --nvm-theme-color-pink );
        border-radius: 30px;
        background-color: var( --nvm-theme-color-pink );
        color: var( --nvm-color-white );
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* Room at the end of the page, so the bar never covers the footer. */
    body.nvm-has-sticky-atc {
        padding-bottom: calc( 64px + env( safe-area-inset-bottom ) );
    }

    /* Lift the other bottom-corner floaters above the bar instead of under it:
       the Klaviyo teaser tab (Klaviyo hashes its class names, hence the
       attribute selector) and CookieScript's consent-settings badge, which
       appears once cookies are accepted. "translate" composes with any
       transform the plugins animate with. */
    body.nvm-sticky-atc-visible [class*="kl-teaser-"],
    body.nvm-sticky-atc-visible #cookiescript_badge {
        translate: 0 -72px;
        transition: translate 0.25s ease;
    }

}

@media ( prefers-reduced-motion: reduce ) {

    .nvm-sticky-atc,
    .nvm-sticky-atc.is-visible {
        transition: none;
    }

}