/* ================================================================
   Mobile input guard
   Keeps touch scrolling independent from desktop hover effects.
================================================================ */

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    html,
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }

    a,
    button,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [tabindex],
    .btn,
    [class*="-btn"],
    [class*="btn-"] {
        touch-action: manipulation;
        cursor: default !important;
        -webkit-tap-highlight-color: rgba(232, 93, 4, .16);
    }

    :where(
        .destinations-grid,
        .tdest-viewport,
        .tdest-track,
        .ths-grid,
        .ttag-viewport,
        .ttag-track,
        .tpd-viewport,
        .tpd-track,
        .home-blogs-viewport,
        .home-ferry-slider-viewport,
        .home-ferry-slider-track,
        .home-boats-grid,
        .tour-mobile-sheet-results,
        .tsd-list,
        .avp-panel,
        .avtp-panel
    ) {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y pinch-zoom;
    }

    html.av-touch-device body :where(
        a,
        button,
        [role="button"],
        .btn,
        [class*="-btn"],
        [class*="btn-"],
        [class*="-card"],
        [class*="card-"],
        [class*="-item"],
        [class*="item-"],
        [class*="-link"],
        [class*="link-"],
        [class*="-tab"],
        [class*="tab-"],
        [class*="-arrow"],
        [class*="arrow-"]
    ):hover {
        transform: none !important;
    }

    html.av-touch-device body :where(
        a,
        button,
        [role="button"],
        .btn,
        [class*="-btn"],
        [class*="btn-"],
        [class*="-card"],
        [class*="card-"],
        [class*="-item"],
        [class*="item-"],
        [class*="-link"],
        [class*="link-"],
        [class*="-tab"],
        [class*="tab-"],
        [class*="-arrow"],
        [class*="arrow-"]
    ):hover :where(img, svg, picture, .logo-mark, .hb-image) {
        transform: none !important;
    }

    html.av-touch-device.av-touch-scrolling body :where(
        a,
        button,
        [role="button"],
        .btn,
        [class*="-btn"],
        [class*="btn-"],
        [class*="-card"],
        [class*="card-"],
        [class*="-item"],
        [class*="item-"],
        [class*="-link"],
        [class*="link-"],
        [class*="-tab"],
        [class*="tab-"],
        [class*="-arrow"],
        [class*="arrow-"]
    ),
    html.av-touch-device.av-touch-scrolling body :where(
        a,
        button,
        [role="button"],
        .btn,
        [class*="-btn"],
        [class*="btn-"],
        [class*="-card"],
        [class*="card-"],
        [class*="-item"],
        [class*="item-"],
        [class*="-link"],
        [class*="link-"],
        [class*="-tab"],
        [class*="tab-"],
        [class*="-arrow"],
        [class*="arrow-"]
    ):hover {
        transform: none !important;
        transition-duration: 0s !important;
    }
}