/* AquaVID mobile usability pass: 2026-09-16 */
@media (max-width: 767px) {
    body { padding-bottom: 72px; }

    /* Fixed in the normal document flow: stays visible without covering content. */
    header {
        position: sticky !important;
        top: 0;
        z-index: 1025;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }

    #top { display: none !important; }
    #top .container { padding-left: 0; padding-right: 0; }
    #top .us-top-mobile-item-info,
    #top .us-mobile-top-btn-wishlist,
    #top .us-mobile-top-btn-compare,
    #top #us-account-dropdown { display: none !important; }
    #top .us-menu-mobile,
    #top .us-mobile-top-btn-cart { width: 64px; min-width: 64px; }
    #top .us-mobile-top-btn-cart { margin-left: auto; }
    .oct-fixed-bar { display: none !important; }

    header { margin-top: 0 !important; padding: 0 0 8px !important; }
    header .container { margin-top: 0 !important; padding-left: 15px; padding-right: 15px; }
    header .row { margin-left: -5px; margin-right: -5px; }
    header #logo { flex: 0 0 40%; max-width: 40%; padding-left: 5px; padding-right: 5px; text-align: left !important; }
    header .us-logo-img { width: auto; max-width: 100%; max-height: 54px; }
    header .us-phone-box { flex: 0 0 60%; max-width: 60%; padding-left: 5px; padding-right: 5px; justify-content: flex-end; }
    header .us-phone-img { display: none; }
    header .us-phone-content { text-align: right; }
    header .top-phone-btn { padding: 0; font-size: 18px; line-height: 1.2; }
    header .us-phone-link { display: block; margin-top: 3px; font-size: 14px; }
    header .us-search-box { order: 3; flex: 0 0 100%; max-width: 100%; margin-top: 8px; padding-left: 5px; padding-right: 5px; }
    header .us-search-block input { min-height: 48px; border-color: #9aaab5; color: #34414d; font-weight: 500; }
    header .us-search-block input::placeholder { color: #687c8a; opacity: 1; }
    header .us-search-block .btn-search { color: #c84820; }

    .aquavid-home #main h1 { font-size: 30px; line-height: 1.18; margin-bottom: 20px; overflow-wrap: anywhere; }
    .aquavid-home #main p { font-size: 16px; line-height: 1.52; overflow-wrap: anywhere; }

    #us-subcat { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    #us-subcat .us-item { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; padding-left: 6px; padding-right: 6px; }
    #us-subcat .subcat-item { min-height: 250px; }
    #aquavid-swipe-hint { display: block; margin: 8px 0 18px; color: #dc5127; font-size: 14px; font-weight: 600; text-align: center; }

    #content .product-layout.product-grid { flex: 0 0 50%; max-width: 50%; width: 50%; padding: 5px; }
    .product-grid .us-module-img { height: 155px; display: flex; align-items: center; justify-content: center; }
    .product-grid .us-module-img img { max-height: 150px; object-fit: contain; }
    .product-grid .us-module-title { display: -webkit-box; height: 58px; margin-top: 8px; font-size: 15px; line-height: 1.25; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .product-grid .us-product-list-description { display: none; }
    .product-grid .us-module-price { margin: 8px 0; font-size: 18px; }
    .product-grid .us-module-btn { min-height: 42px; padding: 8px 6px; font-size: 13px; }

    .aquavid-mobile-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1005; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 64px; background: #34414d; box-shadow: 0 -4px 14px rgba(0, 0, 0, .16); }
    .aquavid-mobile-dock a,
    .aquavid-mobile-dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 11px; line-height: 1.2; text-decoration: none; }
    .aquavid-mobile-dock i { margin-bottom: 4px; color: #ffb392; font-size: 18px; }
    .aquavid-mobile-dock span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

    #us_fixed_contact_button { right: 14px; bottom: 82px; width: 54px; height: 54px; z-index: 1003; }
    #back-top { right: 15px; bottom: 148px; transform: scale(.78); transform-origin: bottom right; }

    #us_menu_mobile_content .aquavid-mobile-menu-link { border-top: 1px solid #e9e9e9; }
    #us_menu_mobile_content .aquavid-mobile-menu-link .oct-menu-a { color: #34414d; font-weight: 600; }
    #us_menu_mobile_content .aquavid-mobile-menu-link .oct-menu-a i { display: inline-block; width: 28px; color: #dc5127; text-align: center; }

    #aquavid-mobile-delivery-note { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; padding: 14px; border: 1px solid #f0b49e; border-radius: 4px; background: #fff5f0; color: #34414d; font-size: 14px; line-height: 1.4; }
    #aquavid-mobile-delivery-note strong { color: #c84820; font-size: 16px; }
    .simplecheckout .simplecheckout-block { margin-bottom: 14px; }
}

/* AquaVID mobile header & touch targets: 2026-11-08 */
@media (max-width: 767px) {
    /* Compact first screen: information stays readable and its close control stays tappable. */
    #oct-infobar { padding: 4px 0; }
    #oct-infobar .col-lg-12 {
        position: relative;
        min-height: 44px;
        padding-right: 44px;
        gap: 0;
        align-items: center !important;
    }
    #oct-infobar .oct-infobar-text { font-size: 12px; line-height: 15px; text-align: left; }
    #oct-infobar #oct-infobar-btn {
        position: absolute;
        top: 50%; right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0 !important;
        padding: 0;
        font-size: 22px;
        line-height: 1;
        transform: translateY(-50%);
    }

    header { padding-bottom: 4px !important; }
    header #logo { flex: 0 0 38%; max-width: 38%; }
    header .us-logo-img { max-height: 36px; }
    header .us-phone-box { flex: 0 0 62%; max-width: 62%; min-height: 44px; }
    header .top-phone-btn,
    #us-phones-dropdown {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 16px;
        line-height: 20px;
    }
    header .us-phone-link { display: none; }
    header .us-search-box { margin-top: 4px; }
    header .us-search-block input,
    #search,
    #input_search,
    #oct-search-button,
    #us_livesearch_close {
        min-height: 44px;
        height: 44px !important;
    }
    #oct-search-button,
    #us_livesearch_close {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
    }
    #us_livesearch_close { line-height: 44px; }

    /* Controls retain a 44 px touch target while the visual affordance remains compact. */
    .splide__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 8px;
        background: transparent;
        opacity: 1;
    }
    .splide__arrow::before {
        position: absolute;
        inset: 8px;
        z-index: 0;
        content: '';
        border-radius: 50%;
        background: rgba(255, 255, 255, .88);
    }
    .splide__arrow img,
    .splide__arrow svg { position: relative; z-index: 1; width: 16px; height: 16px; }
    .splide__arrow--prev { left: calc(1em - 8px); }
    .splide__arrow--next { right: calc(1em - 8px); }
    .splide__pagination__page {
        position: relative;
        width: 44px;
        height: 44px;
        margin: 0;
        background: transparent;
        opacity: 1;
    }
    .splide__pagination__page::after {
        position: absolute;
        top: 50%; left: 50%;
        width: 8px;
        height: 8px;
        content: '';
        border-radius: 50%;
        background: #ccc;
        transform: translate(-50%, -50%);
    }
    .splide__pagination__page.is-active::after {
        background: #fff;
        transform: translate(-50%, -50%) scale(1.4);
    }
}