/*  ---------------------------------------------------------------------------
    Mobile polish.

    Note: common-css.php preloads these stylesheets asynchronously, so load order
    is not guaranteed. Rules here must win on specificity, not on coming last.

    Kept in its own file, loaded after style.css, so everything here is easy to
    find and easy to pull back out. Nothing below applies above 767px - the
    desktop layout is untouched.

    The phone header itself is handled in include-files/header.php, next to the
    markup it belongs to.
    --------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /*  --- 1. Type scale -------------------------------------------------------
        Body text was 13px, product names 11px and badges 10px. Anything under
        12px is hard work on a phone; 15px body with a 12px floor reads like a
        current site without changing any layout.  */

    body { font-size: 15px; }

    .product-widget .title,
    .widget-body .title,
    .productName,
    .product-title { font-size: 14px; line-height: 1.35; }

    .discountRibbon,
    .offerTag,
    .ribbon,
    .badge { font-size: 12px; }

    .price,
    .price .amount { font-size: 15px; }


    /*  --- 2. Tap targets ------------------------------------------------------
        62 controls measured under 44px on the homepage alone. These give the
        hit area without changing how anything looks: the icon stays its size,
        the touchable box around it grows.  */

    .pagination > li > a,
    .pagination > li > span { min-width: 44px; min-height: 44px; line-height: 44px; padding: 0; text-align: center; }

    .owl-dot,
    .slick-dots li button,
    .rh-prod-dot { min-width: 24px; min-height: 24px; }

    .socialLinks a,
    .footerLinks a { display: inline-block; min-height: 44px; line-height: 44px; }

    input.form-control,
    select.form-control,
    textarea.form-control { font-size: 15px; }

    input.form-control:not([type=checkbox]):not([type=radio]),
    select.form-control { min-height: 44px; }


    /*  --- 3. Product page sticky bar ------------------------------------------
        The bar already existed; it was 42px and showed no price, so the figure
        you were about to pay was always off screen. Price on the left, the
        action taking the space it deserves, wishlist reduced to its icon.  */

    .floatingAddToCart { min-height: 56px; align-items: stretch; padding: 0; }

    .floatingAddToCart .fatcPrice {
        display: flex;
        align-items: center;
        padding: 0 12px;
        font-size: 17px;
        font-weight: 700;
        color: #222;
        background: #fff;
        white-space: nowrap;
    }
    .floatingAddToCart .btn.atc { flex: 1 1 auto; min-height: 56px; font-size: 15px; }
    .floatingAddToCart .btn.atwl { flex: 0 0 56px; width: 56px; min-height: 56px; overflow: hidden; }
    /*  the label reads ADD TO WISHLIST via ::after, which fitted the old
        188px button but not a 56px one - show the heart instead.  */
    .floatingAddToCart .btn.atwl::after {
        content: "\f08a";
        font-family: FontAwesome;
        font-size: 20px;
        line-height: 56px;
    }
    .floatingAddToCart .btn.atwl.marked::after { content: "\f004"; }

    /*  the bar sits above the page, so the last of the content needs room to
        clear it rather than hiding underneath  */
    body.single-product .content_wrapper,
    .content_wrapper { padding-bottom: 64px; }


    /*  --- 4. Category pages ---------------------------------------------------
        The banner, a 29px heading and the breadcrumb took roughly 300px before
        any product. Sort options wrapped onto two lines.  */

    .inner_banner { padding-top: 22px; padding-bottom: 22px; }

    .inner_banner h1 { font-size: 22px; line-height: 1.25; margin-bottom: 6px; }

    .breadcrumb { font-size: 12px; padding: 6px 0; margin-bottom: 0; }

    /*  sort links on one scrollable row instead of wrapping  */
    .sort-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }
    .sort-wrapper::-webkit-scrollbar { display: none; }
    .sort-wrapper a { flex: 0 0 auto; min-height: 44px; line-height: 44px; }


    /*  --- 5. Floating help button --------------------------------------------
        The "Help ?" bubble is the site's own .quick-menu (call / WhatsApp); there
        is no third-party chat on this site. It was pinned at bottom:15%, which on
        a phone lands it in the middle of the product grid - it was sitting on the
        ADD button of the second product on every category page.

        A fixed offset puts it where a floating button belongs, just above the
        bottom edge, instead of somewhere that moves with the viewport height.
        The trigger hangs 50px below its parent, so 66px here renders it 16px up.

        The product page needs it higher, to clear the sticky buy bar; that rule
        lives in product.php and is written with more specificity so it wins
        regardless of which stylesheet the browser applies last.                */

    nav.quick-menu { bottom: 66px; }
}