/* ─────────────────────────────────────────────────────────────
   mobile-ux.css — Task B2 (2026-07-09)
   Mobile-only overrides: WCAG 2.5.5 tap targets (≥44×44px) for
   interactive controls, plus fixed-header/breadcrumb clearance on
   product_cat archive pages. Loaded last; scoped to ≤768px.
   !important is used deliberately: several targets are styled by
   in-body inline <style> blocks (canvas-grid.php, taxonomy
   templates) that would otherwise win on source order.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* 1 ── Hamburger / mobile menu toggle */
    .vh-hamburger {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* 2 ── Filter controls (drawer pills + sort) */
    .cp-filter__pill {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
    }
    .cp-grid-bar__sort {
        min-height: 44px !important;
    }
    /* Removable active-filter chips — modest bump, not full 44 to
       avoid a chunky chip row, but comfortably tappable. */
    .cp-active-chips__chip {
        min-height: 38px !important;
    }

    /* 3 ── Wishlist heart on product cards.
       Base CSS keeps these at opacity:0 until card :hover, which never
       fires on touch — reveal + size so they are actually usable. */
    .cp-card__wish {
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    /* 4 ── Single-product gallery controls */
    .gallery-fullscreen-btn,
    .gallery-prev,
    .gallery-next {
        width: 44px !important;
        height: 44px !important;
    }

    /* 5 ── Modal / lightbox / drawer close buttons */
    .lightbox-close,
    .vh-search-overlay__close,
    .vh-mobile-drawer__close,
    .vh-fdrawer__close {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 6 ── Language switcher */
    .vh-lang__toggle {
        min-height: 44px !important;
    }
    .vh-lang__link {
        min-height: 44px !important;
        display: flex;
        align-items: center;
    }

    /* 7 ── Cookie consent buttons */
    .vh-ck-accept,
    .vh-ck-manage {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 8 ── Fixed header overlaps the breadcrumb on product_cat archive
       pages (the ~10px clip). The custom canvas/wallpaper templates use
       a tall .cp-hero instead and are unaffected. Add top clearance to
       the breadcrumb wrapper that sits directly under the fixed header. */
    .s-breadcrumb-wrap {
        padding-top: 30px;
    }
}