/* ===== QT BIKE RESPONSIVE / MOBILE V5 =====
   Loaded after style.css + v3.css so it can safely correct the legacy template on phones/tablets.
   Desktop >= 992px stays visually close to Friendly UI V4. */

html, body { max-width:100%; }
body { overflow-x:hidden; }
img, svg, video, canvas { max-width:100%; }
iframe { max-width:100%; }
button, a, input, select, textarea { touch-action:manipulation; }
.breadcrumb__links, .product__details__breadcrumb, .news-content, .dealer-card, .qtbike-card { overflow-wrap:anywhere; }
.news-content pre, .news-content code { white-space:pre-wrap; word-break:break-word; }
.news-content table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mobile-bottom-nav { display:none; }
.qtbike-mobile-menu-btn { display:none; }
.offcanvas-close, .mobile-quick-links, .mobile-support-box, .offcanvas-mobile-head { display:none; }

/* Avoid touch devices getting stuck in a hover-raised state. */
@media (hover:none) {
    .product__item:hover, .blog__item:hover, .dealer-card:hover { transform:none !important; }
    .product__item:hover .product__item__pic img, .blog__item:hover .blog__item__pic img { transform:none !important; }
}

/* Tablet and phone navigation */
@media (max-width:991.98px) {
    :root { --qt-mobile-nav-h:64px; }

    body:not(.mobile-menu-open) { overflow-x:hidden; }
    body.mobile-menu-open { overflow:hidden; }

    .qtbike-header .header__top { display:none !important; }
    .qtbike-mainnav-row { min-height:66px !important; }
    .header__logo { height:66px; }
    .header__logo a { padding:6px 0; }
    .logo-img { width:38px !important; max-height:50px !important; margin-right:6px; }
    .logo-text { max-width:100px !important; max-height:40px !important; }

    .qtbike-header-actions { gap:8px !important; }
    .qtbike-header-actions > a,
    .qtbike-mobile-menu-btn {
        width:42px;
        height:42px;
        min-width:42px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid #d7e4f0;
        background:#f7fbff;
        color:var(--qt-primary-dark);
        border-radius:12px;
        font-size:19px;
        padding:0;
    }
    .qtbike-header-actions > a:hover,
    .qtbike-mobile-menu-btn:hover { background:var(--qt-primary-soft); color:var(--qt-primary-dark); }
    .qtbike-mobile-menu-btn { position:static !important; line-height:1 !important; cursor:pointer; }
    .cart-count { top:-5px !important; right:-5px !important; }

    .offcanvas-menu-overlay {
        position:fixed !important;
        inset:0;
        width:100%;
        height:100%;
        background:rgba(10,31,50,.48) !important;
        backdrop-filter:blur(2px);
        z-index:1098 !important;
        opacity:0;
        visibility:hidden;
        transition:opacity .22s ease,visibility .22s ease !important;
    }
    .offcanvas-menu-overlay.active { opacity:1; visibility:visible; }

    .offcanvas-menu-wrapper {
        display:block !important;
        position:fixed !important;
        top:0;
        left:0 !important;
        width:min(88vw,360px) !important;
        max-width:360px;
        height:100dvh !important;
        padding:max(18px,env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)) !important;
        background:#fff !important;
        z-index:1099 !important;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        opacity:1 !important;
        visibility:hidden;
        transform:translateX(-102%);
        transition:transform .24s ease, visibility .24s ease !important;
        box-shadow:16px 0 48px rgba(15,45,72,.18);
    }
    .offcanvas-menu-wrapper.active { visibility:visible; transform:translateX(0); }

    .offcanvas-mobile-head {
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:50px;
        padding-bottom:14px;
        margin-bottom:8px;
        border-bottom:1px solid var(--qt-border);
    }
    .offcanvas-brand img { width:auto; max-width:128px; max-height:40px; }
    .offcanvas-close {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border:0;
        border-radius:12px;
        background:#f1f6fb;
        color:#29455f;
        font-size:20px;
    }

    #mobile-menu-wrap { margin-top:6px; }
    .slicknav_menu { padding:0 !important; margin:0 !important; }
    .slicknav_btn { display:none !important; }
    .slicknav_nav { display:block !important; font-size:15px; }
    .slicknav_nav li.slicknav_collapsed > ul { display:none !important; }
    .slicknav_nav li.slicknav_open > ul { display:block !important; }
    .slicknav_nav > li { border-bottom:1px solid #edf2f7; }
    .slicknav_nav > li:last-child { border-bottom:0; }
    .slicknav_nav .slicknav_row,
    .slicknav_nav a {
        min-height:44px;
        display:flex;
        align-items:center;
        color:#263f57 !important;
        padding:10px 8px !important;
        margin:0 !important;
        border-radius:9px !important;
        font-weight:650;
    }
    .slicknav_nav a:hover,
    .slicknav_nav .slicknav_row:hover { color:var(--qt-primary-dark) !important; background:var(--qt-primary-soft) !important; }
    .slicknav_nav .slicknav_arrow { margin-left:auto; color:#67829a !important; font-size:15px; }

    /* Keep mega categories collapsible in SlickNav instead of dumping every child on screen. */
    .slicknav_nav ul.dropdown.mega-menu {
        position:static !important;
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        grid-template-columns:1fr !important;
        gap:0 !important;
        padding:4px 0 8px 12px !important;
        margin:0 !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        border-radius:0 !important;
    }
    .slicknav_nav .mega-col {
        display:block !important;
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
        background:transparent !important;
    }
    .slicknav_nav .mega-col > .mega-title,
    .slicknav_nav .mega-col > a {
        display:flex !important;
        min-height:40px;
        align-items:center;
        color:var(--qt-navy) !important;
        border:0 !important;
        margin:0 !important;
        padding:8px !important;
        font-size:14px !important;
    }
    .slicknav_nav .mega-col > ul { padding-left:12px !important; }
    .slicknav_nav .mega-col > ul a { min-height:38px; font-size:13px !important; font-weight:500 !important; color:#526a80 !important; }

    .mobile-quick-links {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:18px;
        padding-top:16px;
        border-top:1px solid var(--qt-border);
    }
    .mobile-quick-links a {
        display:flex;
        align-items:center;
        gap:8px;
        min-height:44px;
        padding:10px;
        border:1px solid #e3ecf5;
        border-radius:11px;
        background:#f9fcff;
        color:#34546f;
        font-size:13px;
        font-weight:650;
    }
    .mobile-quick-links i { color:var(--qt-primary); font-size:16px; width:18px; text-align:center; }
    .mobile-support-box {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-top:14px;
        padding:12px;
        border-radius:12px;
        background:linear-gradient(135deg,#eef6ff,#f8fbff);
        color:#587087;
    }
    .mobile-support-box a { color:var(--qt-primary-dark); font-weight:800; white-space:nowrap; }

    /* Fixed bottom shortcuts are much easier to reach with one thumb. */
    .mobile-bottom-nav {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1080;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        height:calc(var(--qt-mobile-nav-h) + env(safe-area-inset-bottom));
        padding:5px 4px env(safe-area-inset-bottom);
        background:rgba(255,255,255,.97);
        border-top:1px solid #dce7f1;
        box-shadow:0 -8px 24px rgba(25,64,100,.09);
        backdrop-filter:blur(12px);
    }
    .mobile-bottom-nav a {
        position:relative;
        display:flex;
        min-width:0;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        color:#6b7f91;
        font-size:10.5px;
        line-height:1.15;
        font-weight:650;
        border-radius:10px;
    }
    .mobile-bottom-nav a i { font-size:19px; line-height:1; }
    .mobile-bottom-nav a.active { color:var(--qt-primary-dark); background:#f0f7ff; }
    body { padding-bottom:calc(var(--qt-mobile-nav-h) + env(safe-area-inset-bottom)); }
    .footer { margin-bottom:0; }

    /* Page rhythm */
    .container { padding-left:16px; padding-right:16px; }
    .spad { padding-top:52px !important; padding-bottom:52px !important; }
    .section-title { margin-bottom:24px !important; }
    .section-title h1, .section-title h2 { font-size:clamp(25px,6vw,32px) !important; }
    h1 { font-size:clamp(28px,7vw,36px); }
    h2 { font-size:clamp(24px,6vw,32px); }

    .qtbike-card { border-radius:14px; }
    .sticky-summary, .checkout-summary { position:static !important; top:auto !important; }

    /* Hero: swipeable, no tiny side arrows on touch */
    .hero__items {
        height:clamp(300px,72vw,430px) !important;
        min-height:300px;
        padding-top:clamp(64px,15vw,92px) !important;
        background-position:center center !important;
    }
    .hero__text { max-width:80%; }
    .hero__text h2 { font-size:clamp(27px,7vw,36px) !important; line-height:1.15; }
    .hero__text p { font-size:15px !important; line-height:1.55; }
    .hero__slider .owl-dots {
        position:absolute;
        left:0;
        right:0;
        bottom:12px;
        z-index:4;
        display:flex !important;
        justify-content:center;
        gap:7px;
    }
    .hero__slider .owl-dot span { display:block; width:8px; height:8px; border-radius:50%; background:rgba(36,93,159,.35); }
    .hero__slider .owl-dot.active span { width:22px; border-radius:999px; background:var(--qt-primary); }

    .brand-intro { padding-top:42px !important; padding-bottom:42px !important; }
    .brand-intro h1 { font-size:clamp(27px,7vw,34px) !important; }
    .brand-intro p { font-size:15px !important; }
    .brand-intro .primary-btn { min-height:46px; display:flex !important; align-items:center; justify-content:center; max-width:none !important; width:100%; margin:8px 0 !important; }

    /* Shop/filter */
    .mobile-filter-toggle { display:flex !important; align-items:center; justify-content:center; gap:8px; min-height:46px; }
    #shopFilters { margin-bottom:18px; }
    .shop__sidebar { padding-top:0 !important; margin-bottom:0 !important; }
    .shop__sidebar.qtbike-card { padding:16px !important; }
    .shop__product__option { padding-top:4px; }
    .shop__product__option .row > div { margin-bottom:8px; }
    .shop__product__option form { width:100%; justify-content:flex-start !important; flex-wrap:wrap; gap:8px; }
    .shop__product__option form label { width:100%; margin:0 !important; }
    .shop__product__option select { width:100% !important; max-width:none !important; }
    .shop-filter-form .filter-price-grid {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
        margin-left:0;
        margin-right:0;
    }
    .shop-filter-form .filter-price-grid > [class*='col-'] {
        max-width:none !important;
        flex:0 0 auto !important;
        width:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .shop-filter-form .filter-field { margin-bottom:14px; }
    .shop-filter-form .btn,
    .shop-filter-form .btn-link { min-height:44px; }
    .shop-sort-form { display:block !important; }
    .shop-sort-form label { display:block; width:100%; margin:0 0 8px !important; }
    .shop-sort-form .form-control,
    .shop-sort-form .nice-select,
    .shop-sort-form select.qt-native-select {
        display:block;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }
    select.qt-native-select { display:block !important; width:100%; height:44px; padding:0 12px; border:1px solid #ccd8e5; border-radius:10px; background:#fff; color:var(--qt-text); }


    /* Narrow desktop / tablet polish: keep filters and select boxes aligned instead of half-inline. */
    .shop-filter-form { display:block; }
    .shop-filter-form .filter-field { display:block; width:100%; margin-bottom:16px; }
    .shop-filter-form .filter-field label { display:block; width:100%; margin:0 0 8px !important; line-height:1.35; }
    .shop-filter-form .filter-price-grid { margin-left:-6px; margin-right:-6px; }
    .shop-filter-form .filter-price-grid > [class*='col-'] { padding-left:6px; padding-right:6px; }
    .shop-filter-form .form-control,
    .shop-filter-form .nice-select,
    .shop-filter-form select.qt-native-select { width:100% !important; max-width:none !important; }
    .shop-filter-form .filter-stock-check { display:flex; align-items:flex-start; gap:8px; margin-top:4px; }
    .shop-filter-form .filter-stock-check .form-check-input { margin-top:4px; }
    .shop-filter-form .filter-stock-check .form-check-label { line-height:1.45; }

    .shop-sort-form { width:100%; justify-content:flex-start !important; flex-wrap:wrap; gap:10px; }
    .shop-sort-form label { white-space:nowrap; margin:0 !important; }
    .shop-sort-form .form-control,
    .shop-sort-form .nice-select,
    .shop-sort-form select.qt-native-select { min-width:170px; max-width:220px; }

    .dealer-toolbar { align-items:stretch; }
    .dealer-toolbar .dealer-search-control { flex:1 1 260px; min-width:220px; }
    .dealer-toolbar .dealer-province-control,
    .dealer-toolbar .nice-select,
    .dealer-toolbar select.qt-native-select { flex:1 1 220px; min-width:200px; width:100% !important; max-width:none !important; }
    .dealer-toolbar .btn { flex:0 0 auto; }

    .pagination { flex-wrap:wrap; gap:4px; }
    .pagination .page-item { margin:0; }
    .pagination .page-link { min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; border-radius:9px !important; }

    /* Product detail */
    .product__details__pic { padding:20px 0 28px !important; }
    .product__details__breadcrumb { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:13px; line-height:1.45; }
    .qtbike-thumbs {
        flex-direction:row !important;
        gap:8px;
        overflow-x:auto;
        padding:2px 2px 10px;
        margin-bottom:8px !important;
        scroll-snap-type:x proximity;
        scrollbar-width:thin;
    }
    .qtbike-thumb { min-width:72px !important; width:72px; scroll-snap-align:start; }
    .qtbike-thumb img { height:64px !important; }
    .product__details__pic__item.qtbike-main-image {
        min-height:0 !important;
        height:auto;
        aspect-ratio:1/1;
        padding:10px !important;
        border-radius:14px;
    }
    .qtbike-main-image img { max-height:100% !important; }
    .product__details__pic .col-lg-3 > .qtbike-card { margin-top:14px; height:auto !important; padding:18px !important; }
    .product__details__content { padding-top:32px !important; }
    .product__details__content .nav-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .product__details__content .nav-tabs::-webkit-scrollbar { display:none; }
    .product__details__content .nav-tabs .nav-item { flex:0 0 auto; margin-bottom:0 !important; }
    .product__details__content .nav-tabs .nav-link { white-space:nowrap; min-height:44px; }
    .product__details__content .tab-content.qtbike-card { padding:18px !important; }
    .product__color__select label, .color-label { width:28px !important; height:28px !important; margin-right:10px; }

    /* Dealer */
    .dealer-toolbar { display:grid !important; grid-template-columns:1fr 1fr; gap:9px !important; }
    .dealer-toolbar .form-control { grid-column:1 / -1; width:100% !important; max-width:none !important; }
    .dealer-toolbar .btn { min-height:44px; white-space:normal; }
    .dealer-grid { grid-template-columns:1fr !important; gap:12px; }
    .dealer-card { padding:15px !important; }
    .dealer-card img { height:180px !important; }
    .dealer-card .mt-3 { display:flex; gap:8px; }
    .dealer-card .mt-3 .btn { flex:1; min-height:42px; display:flex; align-items:center; justify-content:center; }
    .dealer-map-shell { position:relative !important; top:auto !important; min-height:300px !important; margin-bottom:18px; }
    .dealer-map-shell iframe { min-height:300px !important; height:300px; }
    .dealer-results-row .dealer-map-col { order:-1; }

    /* Contact / account / checkout forms */
    .contact .qtbike-card, .account-card { padding:20px !important; }
    .form-control, select.form-control, textarea.form-control { font-size:16px !important; }
    input, textarea, select { font-size:16px; }
    .btn, .primary-btn { min-height:44px; }
    .primary-btn { padding:13px 20px; }
    .checkout-payment-option { padding:13px 12px; border:1px solid var(--qt-border); border-radius:10px; background:#fbfdff; }
    .checkout-summary-line { gap:14px; align-items:flex-start !important; }
    .checkout-summary-line > span:first-child { min-width:0; flex:1; }
    .checkout-summary-line > strong { white-space:nowrap; }

    /* Blog/news */
    .breadcrumb-blog { min-height:180px !important; height:180px !important; background-position:center !important; }
    .blog__item__pic { height:210px !important; }
    .blog__item__text { padding:18px !important; }
    .news-content { font-size:16px !important; line-height:1.75 !important; }
    .news-content img { height:auto !important; }

    /* Footer */
    .footer { padding-top:42px !important; }
    .footer__about, .footer__widget { margin-bottom:28px; }
    .footer__widget ul li a { display:inline-flex; align-items:center; min-height:38px; }
    .footer__newslatter form { display:flex; position:relative; }
    .footer__newslatter form input { min-height:46px; width:100%; }

    /* Admin remains usable on tablets/phones: horizontal data, no 760px forced page. */
    .admin-topbar { overflow:visible !important; }
    .admin-topbar .container-fluid { min-width:0 !important; display:block !important; }
    .admin-topbar-links { flex-wrap:nowrap !important; overflow-x:auto; gap:6px !important; padding-bottom:5px; scrollbar-width:thin; }
    .admin-topbar-links > * { flex:0 0 auto; }
    .admin-topbar form { margin-top:7px !important; }
    .admin-page { padding-top:18px !important; }
    .admin-page .qtbike-card { padding:16px !important; }
    .qtbike-admin-table, .table-responsive { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
    .qtbike-admin-table table { min-width:720px; }
}

@media (max-width:767.98px) {
    .container { padding-left:13px; padding-right:13px; }
    .spad { padding-top:44px !important; padding-bottom:44px !important; }

    /* Two products per row is faster to browse on a phone, with compact card spacing. */
    .mobile-product-col { padding-left:5px !important; padding-right:5px !important; }
    .product__filter, .mobile-product-grid { margin-left:-5px !important; margin-right:-5px !important; }
    .product__item { margin-bottom:10px !important; padding:8px !important; border-radius:13px !important; }
    .product__item__pic, .qtbike-product-pic { height:auto !important; aspect-ratio:1/1; border-radius:10px !important; }
    .product__item__text { min-height:118px !important; padding:11px 2px 6px !important; }
    .product__item__text h6, .product__item__text .qtbike-product-name { font-size:14px !important; line-height:1.35 !important; }
    .product__item__text h5 { font-size:15px !important; line-height:1.35; }
    .product-price-old { display:block; margin-left:0 !important; margin-top:2px; font-size:11px !important; }
    .product-stock { font-size:11.5px !important; }
    .product__item__text .product__color__select { margin-top:6px !important; }
    .product__item__text .product__color__select label { width:13px !important; height:13px !important; margin-right:5px; }
    .product__item__pic .label { left:7px !important; top:7px !important; padding:4px 7px !important; font-size:10px !important; }

    .filter__controls {
        justify-content:flex-start !important;
        flex-wrap:nowrap !important;
        overflow-x:auto;
        padding:2px 1px 8px;
        margin-bottom:22px !important;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
    }
    .filter__controls::-webkit-scrollbar { display:none; }
    .filter__controls li { flex:0 0 auto; scroll-snap-align:start; min-height:38px; display:flex; align-items:center; }

    /* Card-style tables instead of sideways reading for the most common customer flows. */
    .mobile-card-table { overflow:visible !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
    .mobile-card-table table, .mobile-card-table thead, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td { display:block; width:100%; }
    .mobile-card-table thead { display:none; }
    .mobile-card-table table { margin:0; }
    .mobile-card-table tbody tr {
        margin-bottom:12px;
        padding:14px;
        border:1px solid var(--qt-border);
        border-radius:14px;
        background:#fff;
        box-shadow:0 4px 14px rgba(21,58,95,.045);
    }
    .mobile-card-table tbody td {
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        padding:8px 0 !important;
        border:0 !important;
        text-align:right !important;
    }
    .mobile-card-table tbody td::before {
        content:attr(data-label);
        flex:0 0 92px;
        color:#718295;
        font-size:12px;
        font-weight:700;
        text-align:left;
    }
    .mobile-card-table tbody td.mobile-product-cell { display:block; text-align:left !important; padding-top:0 !important; }
    .mobile-card-table tbody td.mobile-product-cell::before { display:none; }
    .mobile-card-table .mobile-cart-product { display:grid !important; grid-template-columns:76px 1fr; align-items:center; gap:12px; }
    .mobile-card-table .mobile-cart-product img { width:76px !important; height:76px !important; margin:0 !important; }
    .mobile-card-table .mobile-qty-form { width:100%; justify-content:flex-end; }
    .mobile-card-table .mobile-qty-form input { max-width:82px; }
    .mobile-card-table .mobile-action-cell { justify-content:flex-end; }
    .mobile-card-table .mobile-action-cell::before { display:none; }

    .checkout-summary-line { font-size:14px; }
    .order-lookup-card .d-flex.justify-content-between:first-child { gap:10px; align-items:flex-start; }
    .order-lookup-card .badge { flex:0 0 auto; }

    .dealer-toolbar { grid-template-columns:1fr !important; }
    .dealer-toolbar > * { grid-column:1 !important; width:100% !important; }
    .dealer-toolbar .dealer-search-control,
    .dealer-toolbar .dealer-province-control,
    .dealer-toolbar .nice-select,
    .dealer-toolbar select.qt-native-select,
    .dealer-toolbar .btn { min-width:0 !important; max-width:none !important; }

    .footer .row.mt-4 { margin-top:0 !important; }

    /* Admin login card never exceeds tiny screens. */
    .admin-login-shell { min-height:calc(100dvh - 66px); padding:18px 12px; }
    .admin-login-card { width:100% !important; max-width:380px; padding:20px !important; }
}

@media (max-width:479.98px) {
    .qtbike-header-actions { gap:5px !important; }
    .qtbike-header-actions > a, .qtbike-mobile-menu-btn { width:39px; height:39px; min-width:39px; border-radius:11px; }
    .logo-text { max-width:82px !important; }
    .logo-img { width:34px !important; }

    .hero__items { height:300px !important; min-height:300px; padding-top:55px !important; }
    .hero__text { max-width:88%; }
    .hero__text h2 { font-size:27px !important; }
    .hero__text p { font-size:14px !important; }

    .mobile-bottom-nav a span { font-size:9.5px; }
    .mobile-bottom-nav a i { font-size:18px; }
    .mobile-quick-links { grid-template-columns:1fr 1fr; }

    .breadcrumb-option { padding:20px 0 !important; }
    .breadcrumb__text h4 { font-size:22px !important; }
    .breadcrumb__links { font-size:12px; line-height:1.6; }

    .product__details__pic .col-lg-3 > .qtbike-card h1 { font-size:24px !important; }
    .product__details__pic .col-lg-3 > .qtbike-card .h3 { font-size:22px; }
    .product__details__content .tab-content.qtbike-card { padding:14px !important; }

    .contact .qtbike-card { padding:16px !important; }
}

@media (max-width:340px) {
    /* Very small phones get one product per row instead of unreadably narrow cards. */
    .mobile-product-col { flex:0 0 100% !important; max-width:100% !important; }
    .product__item__pic, .qtbike-product-pic { aspect-ratio:4/3; }
    .logo-text { display:none; }
}

/* Small reusable mobile action groups */
.order-complete-actions { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.order-complete-actions .primary-btn, .order-complete-actions .btn { min-width:150px; }
@media (max-width:575.98px) {
    .order-complete-actions { flex-direction:column; }
    .order-complete-actions .primary-btn, .order-complete-actions .btn { width:100%; margin:0 !important; display:flex; align-items:center; justify-content:center; }
    .account-orders-head { align-items:flex-start !important; gap:12px; }
    .account-orders-head h1 { margin-bottom:0; font-size:27px; }
    .account-orders-head .btn { white-space:nowrap; }
}

/* ============================================================
   V5.2 UI ALIGNMENT HOTFIX
   Fixes the three areas reported in narrow/window/mobile layouts:
   1) product filter/sidebar, 2) sort selector, 3) dealer province selector.
   ============================================================ */

/* Product filter: consistent labels, controls and spacing at every width. */
.qtbike-filter-card {
    background:#fbfdff;
    border:1px solid #dce7f2;
    border-radius:16px;
}
.shop-filter-form .form-group { margin-bottom:16px; }
.shop-filter-form label {
    display:block;
    margin:0 0 8px !important;
    color:#173f6d;
    font-weight:700;
    line-height:1.35;
}
.shop-filter-form .form-control,
.shop-filter-form .nice-select,
.shop-filter-form select.qt-native-select {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 13px !important;
    float:none !important;
    line-height:42px !important;
    border:1px solid #cbd9e7 !important;
    border-radius:11px !important;
    background:#fff !important;
    color:#40566f !important;
    box-shadow:none !important;
}
.shop-filter-form input.form-control { line-height:normal !important; }
.shop-filter-form .form-control:focus,
.shop-filter-form select:focus {
    border-color:#6da2dd !important;
    box-shadow:0 0 0 3px rgba(57,120,200,.11) !important;
    outline:none;
}
.shop-filter-form .filter-price-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    margin:0 0 16px !important;
}
.shop-filter-form .filter-price-field {
    min-width:0;
    width:100%;
    margin:0 !important;
}
.shop-filter-form .filter-price-field input { width:100% !important; min-width:0 !important; }
.shop-filter-form .filter-field--color {
    display:block !important;
    width:100% !important;
    clear:both;
}
.shop-filter-form .filter-field--color label { width:100% !important; }
.shop-filter-form .filter-field--color .nice-select,
.shop-filter-form .filter-field--color select { display:block !important; width:100% !important; }
.shop-filter-form .filter-stock-check {
    position:static !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-height:26px;
    margin:2px 0 16px !important;
    padding:0 !important;
}
.shop-filter-form .filter-stock-check .form-check-input {
    position:static !important;
    flex:0 0 auto;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
}
.shop-filter-form .filter-stock-check .form-check-label {
    display:block !important;
    margin:0 !important;
    line-height:1.35 !important;
    color:#314a65;
}
.qtbike-filter-actions .btn-primary {
    min-height:44px;
    border-radius:10px;
}
.qtbike-filter-actions .qtbike-clear-filter {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:4px;
    padding:8px 10px;
    color:#225f9e;
    text-decoration:none;
}

/* Category list: real collapsible groups, no misleading legacy arrows. */
.qtbike-category-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.qtbike-category-list .card,
.qtbike-category-list .card-heading,
.qtbike-category-list .card-body { all:unset; }
.qtbike-category-link,
.qtbike-category-card {
    display:block;
    width:100%;
    margin:0;
    border:1px solid #dce7f2;
    border-radius:13px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
}
.qtbike-category-link {
    padding:14px 15px;
    color:#0f3d70 !important;
    font-size:15.5px;
    font-weight:750;
    line-height:1.35;
    text-transform:uppercase;
    text-decoration:none !important;
}
.qtbike-category-link:hover,
.qtbike-category-link.active {
    background:#f3f8fe;
    border-color:#bcd4ee;
    color:#225f9e !important;
}
.qtbike-category-card > summary {
    position:relative;
    display:flex;
    align-items:center;
    min-height:50px;
    padding:13px 42px 13px 15px;
    color:#0f3d70;
    font-size:15.5px;
    font-weight:750;
    line-height:1.35;
    text-transform:uppercase;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.qtbike-category-card > summary::-webkit-details-marker { display:none; }
.qtbike-category-card > summary::after {
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:8px;
    height:8px;
    margin-top:-6px;
    border-right:2px solid #214e79;
    border-bottom:2px solid #214e79;
    transform:rotate(45deg);
    transition:transform .18s ease, margin-top .18s ease;
}
.qtbike-category-card[open] > summary {
    background:#f7fbff;
    border-bottom:1px solid #e5edf6;
}
.qtbike-category-card[open] > summary::after {
    margin-top:-2px;
    transform:rotate(225deg);
}
.qtbike-category-body {
    display:flex;
    flex-direction:column;
    padding:8px 15px 12px;
}
.qtbike-category-body a {
    display:block;
    padding:7px 0;
    color:#536b84 !important;
    font-size:15px;
    line-height:1.35;
    text-decoration:none !important;
}
.qtbike-category-body a:hover,
.qtbike-category-body a.active { color:#225f9e !important; }
.qtbike-category-parent-link {
    margin-bottom:3px;
    padding-bottom:9px !important;
    border-bottom:1px dashed #dbe6f1;
    color:#174f86 !important;
    font-weight:700;
}

/* Sort: baseline and control stay perfectly centered. */
.shop-sort-form {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end;
    gap:10px !important;
    width:100%;
}
.shop-sort-form label {
    display:block !important;
    width:auto !important;
    margin:0 !important;
    color:#34495e;
    font-weight:700;
    line-height:42px !important;
    white-space:nowrap;
}
.shop-sort-form .qtbike-sort-control,
.shop-sort-form .nice-select,
.shop-sort-form select.qt-native-select {
    flex:0 1 190px;
    width:190px !important;
    min-width:140px !important;
    max-width:190px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 13px !important;
    float:none !important;
    line-height:40px !important;
    border:1px solid #cbd9e7 !important;
    border-radius:11px !important;
    background:#fff !important;
}

/* Dealer toolbar: wrapper prevents native/nice-select from drifting. */
.dealer-toolbar {
    display:grid;
    grid-template-columns:minmax(220px,1.4fr) minmax(190px,.9fr) auto auto;
    align-items:center;
    gap:10px;
}
.dealer-toolbar__field { min-width:0; margin:0; }
.dealer-toolbar__field .form-control,
.dealer-toolbar__field .nice-select,
.dealer-toolbar__field select.qt-native-select {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 13px !important;
    float:none !important;
    line-height:42px !important;
    border:1px solid #cbd9e7 !important;
    border-radius:11px !important;
    background:#fff !important;
}
.dealer-toolbar__field input.form-control { line-height:normal !important; }
.dealer-toolbar .btn { min-height:44px; margin:0; }

@media (max-width:991.98px) {
    .shop__sidebar.qtbike-filter-card { padding:16px !important; }

    .shop-sort-form {
        justify-content:flex-start !important;
        flex-wrap:nowrap !important;
    }
    .shop-sort-form label { flex:0 0 auto; }
    .shop-sort-form .qtbike-sort-control,
    .shop-sort-form .nice-select,
    .shop-sort-form select.qt-native-select {
        flex:0 1 180px;
        width:180px !important;
        min-width:130px !important;
        max-width:180px !important;
    }

    .dealer-toolbar {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    .dealer-toolbar__field { grid-column:auto !important; }
    .dealer-toolbar .btn { width:100%; }
}

@media (max-width:767.98px) {
    .shop-filter-form .filter-price-grid { gap:10px !important; }
    .shop-filter-form .form-control,
    .shop-filter-form .nice-select,
    .shop-filter-form select.qt-native-select { font-size:16px !important; }

    .shop__product__option .row > div { margin-bottom:10px; }
    .shop-sort-form {
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr);
        align-items:center !important;
        gap:10px !important;
        width:100%;
    }
    .shop-sort-form label {
        width:auto !important;
        margin:0 !important;
        line-height:42px !important;
    }
    .shop-sort-form .qtbike-sort-control,
    .shop-sort-form .nice-select,
    .shop-sort-form select.qt-native-select {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        font-size:16px !important;
    }

    .dealer-toolbar {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
        padding:12px;
    }
    .dealer-toolbar__field,
    .dealer-toolbar .btn {
        grid-column:1 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }
    .dealer-toolbar__field .form-control,
    .dealer-toolbar__field .nice-select,
    .dealer-toolbar__field select.qt-native-select { font-size:16px !important; }
}

@media (max-width:359.98px) {
    .shop-filter-form .filter-price-grid {
        grid-template-columns:1fr !important;
        gap:0 !important;
    }
    .shop-filter-form .filter-price-field { margin-bottom:14px !important; }

    .shop-sort-form {
        grid-template-columns:1fr !important;
        gap:6px !important;
    }
    .shop-sort-form label { line-height:1.35 !important; }
}


/* ============================================================
   V5.3 - FIX DUPLICATE SELECT
   nice-select tạo một DIV ngay sau SELECT. Các select được đánh dấu
   qt-native-select phải chỉ hiển thị đúng một control native.
   ============================================================ */
select.qt-native-select {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
}
select.qt-native-select + .nice-select {
    display:none !important;
}

/* Ba control đang dùng native cố định để tránh lệch/nhân đôi ở mọi breakpoint. */
#colorFilter.qt-native-select,
#sortOrderSelect.qt-native-select,
#provinceFilter.qt-native-select {
    -webkit-appearance:auto;
    appearance:auto;
    background-image:none !important;
}