/* =========================================================
   DATXE MOBILE UI - App style header + homepage mobile polish
   Scope: mobile only. Không đụng desktop, service/category/listing CSS riêng.
========================================================= */

@media (min-width: 992px) {
    .datxe-mobile-app-header { display: none !important; }
}

@media (max-width: 991.98px) {
    :root {
        --datxe-mobile-red: var(--header-wow-top-bg, #ef0808);
        --datxe-mobile-orange: var(--header-wow-sticky-button-bg, #f59e0b);
        --datxe-mobile-gap: 12px;
    }

    body.w11-menu-open { overflow: hidden; }

    /* Header B: logo trái + search giữa + icon phải */
    .header-wow,
    .header-mobile-search-box,
    .w11-mobile-cta-bar {
        display: none !important;
    }

    .datxe-mobile-app-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        width: 100% !important;
        background: var(--datxe-mobile-red) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .16) !important;
    }

    .datxe-mobile-appbar {
        height: 56px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 36px 36px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 10px !important;
        box-sizing: border-box !important;
    }

    .datxe-mobile-app-logo {
        width: auto !important;
        max-width: 84px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }

    .datxe-mobile-app-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 82px !important;
        max-height: 40px !important;
        object-fit: contain !important;
        object-position: left center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .datxe-mobile-app-search {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .datxe-mobile-app-search-inner {
        height: 36px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 34px !important;
        align-items: center !important;
        background: #fff !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06) !important;
    }

    .datxe-mobile-app-search-inner > i {
        color: #94a3b8 !important;
        font-size: 15px !important;
        text-align: center !important;
        line-height: 36px !important;
    }

    .datxe-mobile-app-search-inner input {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #111827 !important;
        font-size: 13px !important;
        line-height: 36px !important;
        padding: 0 2px !important;
    }

    .datxe-mobile-app-search-inner input::placeholder {
        color: #94a3b8 !important;
        opacity: 1 !important;
    }

    .datxe-mobile-app-search-inner button {
        width: 34px !important;
        height: 36px !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--datxe-mobile-orange) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 22px !important;
    }

    .datxe-mobile-app-icon {
        width: 36px !important;
        height: 36px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.16) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        font-size: 21px !important;
        line-height: 1 !important;
        padding: 0 !important;
    }

    .datxe-mobile-app-icon:active {
        transform: scale(.96) !important;
    }

    /* Không để chữ Trang chủ / tên site cũ chen vào header mobile */
    .header-mobile-logo span,
    .datxe-mobile-app-logo span,
    .box-header-mobile-left span {
        display: none !important;
    }

    /* Mobile menu panel: giữ menu, không có bottom/floating button */
    .w11-mobile-panel {
        top: 0 !important;
        right: -360px !important;
        width: min(340px, 88vw) !important;
        height: 100vh !important;
        z-index: 10002 !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    body.w11-menu-open::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10001 !important;
        background: rgba(15,23,42,.36) !important;
    }

    .w11-menu-open .w11-mobile-panel {
        right: 0 !important;
    }

    /* Homepage mobile spacing đều giữa các khối chính */
    .datxe-home .datxe-province-strip,
    .datxe-home .datxe-service-strip,
    .datxe-home .datxe-categories,
    .datxe-home .datxe-vip,
    .datxe-home .datxe-latest-listings,
    .datxe-home .datxe-listings,
    .datxe-home .datxe-seo {
        margin-top: var(--datxe-mobile-gap) !important;
    }

    .datxe-home .datxe-province-strip:first-child,
    .datxe-home .datxe-banner-wrap:first-child,
    .datxe-home .datxe-home-wrapper:first-child {
        margin-top: 0 !important;
    }

    .datxe-home .datxe-service-strip,
    .datxe-home .datxe-categories,
    .datxe-home .datxe-vip,
    .datxe-home .datxe-latest-listings {
        padding-top: 8px !important;
        padding-bottom: 12px !important;
    }

    .datxe-home .datxe-title {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        min-height: 28px !important;
        line-height: 1.15 !important;
    }

    /* Latest listings mobile: giá nổi bật, bỏ đường xám, đẩy giá lên */
    .datxe-latest-listings .v11-card-body {
        padding: 7px 7px 8px !important;
    }

    .datxe-latest-listings .v11-card-title {
        margin-bottom: 4px !important;
    }

    .datxe-latest-listings .v11-card-title a {
        min-height: 34px !important;
        font-size: 13px !important;
        line-height: 17px !important;
    }

    .datxe-latest-listings .v11-card-bottom {
        border-top: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .datxe-latest-listings .v11-card-price {
        border-top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .datxe-latest-listings .v11-card-price strong {
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 900 !important;
        color: #ed2028 !important;
        letter-spacing: -.1px !important;
    }

    .datxe-latest-listings .v11-card-price small,
    .datxe-latest-listings .v11-card-actions {
        display: none !important;
    }

    .w11-pro-main {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 575px) {
    .datxe-mobile-appbar {
        grid-template-columns: auto minmax(0, 1fr) 34px 34px !important;
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .datxe-mobile-app-logo {
        max-width: 74px !important;
    }

    .datxe-mobile-app-logo img {
        max-width: 72px !important;
        max-height: 38px !important;
    }

    .datxe-mobile-app-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 20px !important;
    }

    .datxe-mobile-app-search-inner {
        height: 35px !important;
        grid-template-columns: 30px minmax(0, 1fr) 32px !important;
    }

    .datxe-mobile-app-search-inner input {
        height: 35px !important;
        line-height: 35px !important;
        font-size: 12.5px !important;
    }

    .datxe-mobile-app-search-inner button {
        width: 32px !important;
        height: 35px !important;
    }
}

/* PATCH H20.4.24: mobile listing/listing-detail header flow
   Thứ tự mobile chuẩn: navbar > banner top > breadcrumb > nội dung/gallery.
   Không để header mobile chạy như một overlay/lớp riêng gây đè banner. */
@media (max-width: 991.98px){
    body.w11-pro-site .header-mobile.datxe-mobile-app-header,
    body.w11-pro-site .datxe-mobile-app-header{
        display:block!important;
        position:sticky!important;
        top:0!important;
        left:auto!important;
        right:auto!important;
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        padding:0!important;
        z-index:10000!important;
        transform:none!important;
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        clear:both!important;
    }
    body.w11-pro-site .datxe-mobile-appbar{
        height:56px!important;
        min-height:56px!important;
        max-height:56px!important;
        box-sizing:border-box!important;
    }
    body.w11-pro-site main.w11-pro-main{
        padding-top:0!important;
        margin-top:0!important;
    }
    body.w11-pro-site .ctcat-page,
    body.w11-pro-site .ct5-page.ct5-listing-page{
        padding-top:8px!important;
        margin-top:0!important;
        clear:both!important;
    }
    body.w11-pro-site .ctcat-head{
        display:flex!important;
        flex-direction:column!important;
    }
    body.w11-pro-site .ctcat-head .ctcat-top-ad{
        order:1!important;
        display:block!important;
        margin-top:0!important;
        margin-bottom:10px!important;
        position:relative!important;
        z-index:1!important;
        transform:none!important;
    }
    body.w11-pro-site .ctcat-head .ctcat-breadcrumb{
        order:2!important;
        margin-top:0!important;
        margin-bottom:12px!important;
        position:relative!important;
        z-index:1!important;
    }
    body.w11-pro-site .ctcat-head .ctcat-title-row,
    body.w11-pro-site .ctcat-head .ctcat-filterbar,
    body.w11-pro-site .ctcat-head .ctcat-category-strip{
        order:3!important;
    }
    body.w11-pro-site .ct5-listing-page .ct5-detail-banner-top,
    body.w11-pro-site .ct5-listing-page .ct5-detail-banner-mobile-fallback{
        display:block!important;
        margin-top:0!important;
        margin-bottom:10px!important;
        position:relative!important;
        z-index:1!important;
        transform:none!important;
        clear:both!important;
    }
    body.w11-pro-site .ct5-listing-page .ct5-breadcrumb{
        margin-top:0!important;
        margin-bottom:10px!important;
        position:relative!important;
        z-index:1!important;
    }
}

/* v16 mobile header + modal interaction hardening */
@media (max-width: 991.98px) {
    .datxe-mobile-appbar {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) 40px !important;
        gap: 5px !important;
        padding: 7px 8px !important;
        height: 56px !important;
        align-items: center !important;
    }
    .datxe-mobile-app-logo {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        overflow: visible !important;
    }
    .datxe-mobile-app-logo img {
        max-width: 110px !important;
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: left center !important;
    }
    .datxe-mobile-search-location-box {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 96px !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    .datxe-mobile-location-btn {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
    }
    .datxe-mobile-location-btn span {
        max-width: 58px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .datxe-mobile-app-icon[aria-label="Tài khoản"] { display: none !important; }
    .w11-mobile-panel {
        z-index: 100050 !important;
        pointer-events: auto !important;
    }
    .w11-mobile-panel a,
    .w11-mobile-panel button {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }
    body.w11-menu-open::before {
        z-index: 100040 !important;
    }
    .datxe-location-modal,
    .datxe-location-modal > form {
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .datxe-location-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    .datxe-location-modal-grid { padding-bottom: 80px !important; }
}
@media (max-width: 380px) {
    .datxe-mobile-appbar { grid-template-columns: 104px minmax(0, 1fr) 38px !important; gap: 4px !important; padding-left: 6px !important; padding-right: 6px !important; }
    .datxe-mobile-app-logo { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
    .datxe-mobile-app-logo img { max-width: 102px !important; max-height: 38px !important; }
    .datxe-mobile-search-location-box { grid-template-columns: minmax(0, 1fr) 92px !important; gap: 3px !important; }
    .datxe-mobile-location-btn { width: 92px !important; min-width: 92px !important; max-width: 92px !important; font-size: 10.5px !important; padding: 0 5px !important; }
    .datxe-mobile-location-btn span { max-width: 56px !important; }
}

/* v17 mobile header/menu final fix: keep logo safe, push controls to the right, clickable menu, scrollable location popup */
@media (max-width: 991.98px) {
    body.w11-pro-site .datxe-mobile-app-header,
    .datxe-mobile-app-header {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    body.w11-pro-site .datxe-mobile-appbar,
    .datxe-mobile-appbar {
        display: grid !important;
        grid-template-columns: 108px minmax(0, 1fr) 40px !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 7px 8px !important;
        height: 56px !important;
        align-items: center !important;
    }

    body.w11-pro-site .datxe-mobile-app-logo,
    .datxe-mobile-app-logo {
        grid-column: 1 !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        overflow: visible !important;
    }

    body.w11-pro-site .datxe-mobile-app-logo img,
    .datxe-mobile-app-logo img {
        width: auto !important;
        height: auto !important;
        max-width: 106px !important;
        max-height: 39px !important;
        object-fit: contain !important;
        object-position: left center !important;
        image-rendering: auto !important;
    }

    body.w11-pro-site .datxe-mobile-search-location-box,
    .datxe-mobile-search-location-box {
        grid-column: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 104px !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 3px !important;
        justify-self: stretch !important;
        align-self: center !important;
    }

    body.w11-pro-site .datxe-mobile-search-location-box .datxe-mobile-app-search,
    .datxe-mobile-search-location-box .datxe-mobile-app-search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.w11-pro-site .datxe-mobile-location-btn,
    .datxe-mobile-location-btn {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 34px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
        flex: 0 0 104px !important;
    }

    body.w11-pro-site .datxe-mobile-location-btn span,
    .datxe-mobile-location-btn span {
        max-width: 66px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.w11-pro-site .datxe-mobile-app-icon[aria-label="Mở menu"],
    .datxe-mobile-app-icon[aria-label="Mở menu"] {
        grid-column: 3 !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        justify-self: end !important;
        z-index: 20 !important;
    }

    body.w11-menu-open .w11-mobile-panel,
    .w11-mobile-panel {
        z-index: 2147483000 !important;
        pointer-events: auto !important;
        background: #fff !important;
        opacity: 1 !important;
        filter: none !important;
        isolation: isolate !important;
    }

    body.w11-menu-open .w11-mobile-panel {
        right: 0 !important;
    }

    body.w11-menu-open::before {
        z-index: 2147482000 !important;
        pointer-events: auto !important;
        background: rgba(15,23,42,.42) !important;
    }

    .w11-mobile-panel a,
    .w11-mobile-panel button,
    .w11-mobile-panel__head,
    .w11-mobile-panel__head * {
        position: relative !important;
        z-index: 2147483001 !important;
        pointer-events: auto !important;
    }

    .datxe-location-modal-overlay.is-open {
        z-index: 2147483100 !important;
        touch-action: auto !important;
    }

    .datxe-location-modal {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .datxe-location-modal > form {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    .datxe-location-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        max-height: calc(100dvh - 112px) !important;
    }

    .datxe-location-modal-grid {
        padding-bottom: 96px !important;
    }
}

@media (max-width: 380px) {
    body.w11-pro-site .datxe-mobile-appbar,
    .datxe-mobile-appbar {
        grid-template-columns: 100px minmax(0, 1fr) 38px !important;
        gap: 4px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.w11-pro-site .datxe-mobile-app-logo,
    .datxe-mobile-app-logo {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    body.w11-pro-site .datxe-mobile-app-logo img,
    .datxe-mobile-app-logo img {
        max-width: 98px !important;
        max-height: 38px !important;
    }

    body.w11-pro-site .datxe-mobile-search-location-box,
    .datxe-mobile-search-location-box {
        grid-template-columns: minmax(0, 1fr) 96px !important;
        gap: 3px !important;
    }

    body.w11-pro-site .datxe-mobile-location-btn,
    .datxe-mobile-location-btn {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        font-size: 10.5px !important;
        padding: 0 6px !important;
    }

    body.w11-pro-site .datxe-mobile-location-btn span,
    .datxe-mobile-location-btn span {
        max-width: 60px !important;
    }
}


/* v20 final mobile header: real logo height + compact right controls + clickable drawer */
@media(max-width:991.98px){
  body .datxe-mobile-app-header{overflow:visible!important;isolation:isolate!important;}
  body .datxe-mobile-appbar{display:grid!important;grid-template-columns:max-content minmax(0,1fr) 38px!important;align-items:center!important;gap:3px!important;width:100%!important;max-width:100%!important;min-width:0!important;height:56px!important;min-height:56px!important;padding:5px 6px!important;box-sizing:border-box!important;overflow:visible!important;}
  body .datxe-mobile-app-logo{grid-column:1!important;width:auto!important;min-width:0!important;max-width:none!important;height:46px!important;min-height:46px!important;max-height:46px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;overflow:visible!important;padding:0!important;margin:0!important;flex:0 0 auto!important;}
  body .datxe-mobile-app-logo img{display:block!important;height:46px!important;max-height:46px!important;width:auto!important;min-width:0!important;max-width:none!important;object-fit:contain!important;object-position:left center!important;border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;transform:none!important;image-rendering:auto!important;}
  body .datxe-mobile-search-location-box{grid-column:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) 86px!important;align-items:center!important;gap:3px!important;width:100%!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;align-self:center!important;margin:0!important;padding:3px!important;box-sizing:border-box!important;border-radius:999px!important;overflow:hidden!important;}
  body .datxe-mobile-search-location-box .datxe-mobile-app-search{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;}
  body .datxe-mobile-search-location-box .datxe-mobile-app-search-inner{width:100%!important;min-width:0!important;height:34px!important;min-height:34px!important;display:grid!important;grid-template-columns:22px minmax(0,1fr) 24px!important;align-items:center!important;gap:0!important;padding:0 0 0 6px!important;overflow:hidden!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important;}
  body .datxe-mobile-search-location-box .datxe-mobile-app-search-inner input{width:100%!important;min-width:0!important;font-size:11.5px!important;padding:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  body .datxe-mobile-search-location-box .datxe-mobile-app-search-inner button{width:24px!important;min-width:24px!important;max-width:24px!important;height:28px!important;padding:0!important;}
  body .datxe-mobile-location-btn{width:86px!important;min-width:86px!important;max-width:86px!important;height:34px!important;padding:0 5px!important;gap:3px!important;font-size:10.5px!important;line-height:1!important;flex:0 0 86px!important;overflow:hidden!important;}
  body .datxe-mobile-location-btn span{display:inline-block!important;max-width:48px!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  body .datxe-mobile-location-btn i{font-size:11px!important;flex:0 0 auto!important;}
  body .datxe-mobile-app-icon[aria-label="Mở menu"]{grid-column:3!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;justify-self:end!important;align-self:center!important;margin:0!important;padding:0!important;position:relative!important;z-index:2147482500!important;pointer-events:auto!important;}
  body.w11-menu-open::before{z-index:2147482000!important;pointer-events:auto!important;background:rgba(15,23,42,.42)!important;}
  body .w11-mobile-panel{z-index:2147483000!important;pointer-events:auto!important;opacity:1!important;filter:none!important;background:#fff!important;isolation:isolate!important;}
  body.w11-menu-open .w11-mobile-panel{right:0!important;}
  body .w11-mobile-panel,body .w11-mobile-panel *{pointer-events:auto!important;}
  body .w11-mobile-panel a,body .w11-mobile-panel button{position:relative!important;z-index:2147483001!important;}
}
@media(max-width:380px){
  body .datxe-mobile-appbar{grid-template-columns:max-content minmax(0,1fr) 36px!important;gap:2px!important;padding-left:5px!important;padding-right:5px!important;}
  body .datxe-mobile-app-logo,body .datxe-mobile-app-logo img{height:44px!important;max-height:44px!important;min-height:44px!important;}
  body .datxe-mobile-search-location-box{grid-template-columns:minmax(0,1fr) 82px!important;gap:2px!important;padding:3px!important;}
  body .datxe-mobile-location-btn{width:82px!important;min-width:82px!important;max-width:82px!important;padding:0 4px!important;font-size:10px!important;}
  body .datxe-mobile-location-btn span{max-width:45px!important;}
  body .datxe-mobile-app-icon[aria-label="Mở menu"]{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;}
}

/* === PATCH datxe_225: mobile category filter popup UX reset ===
   Mục tiêu: mọi dropdown lọc trên /danh-muc và trang khu vực hiển thị như modal nhỏ,
   tự co theo nội dung, căn giữa màn hình, không lệch xuống dưới và không bị bottom menu che. */
@media (max-width: 991.98px) {
    body.w11-pro-site .ctcat-head,
    .ctcat-head {
        overflow: visible !important;
        position: relative !important;
        z-index: 60 !important;
    }

    body.w11-pro-site .ctcat-filterbar,
    .ctcat-filterbar {
        position: relative !important;
        z-index: 90 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 2px 2px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    body.w11-pro-site .ctcat-filterbar::-webkit-scrollbar,
    .ctcat-filterbar::-webkit-scrollbar { display: none !important; }

    body.w11-pro-site .ctcat-filterbar .ctcat-filter-pill,
    body.w11-pro-site .ctcat-filterbar .ctcat-filter-dd,
    .ctcat-filterbar .ctcat-filter-pill,
    .ctcat-filterbar .ctcat-filter-dd {
        flex: 0 0 auto !important;
    }

    body.w11-pro-site .ctcat-filter-dd,
    .ctcat-filter-dd {
        position: static !important;
        z-index: auto !important;
    }
    body.w11-pro-site .ctcat-filter-dd[open],
    .ctcat-filter-dd[open] {
        z-index: 2147483000 !important;
    }

    body.w11-pro-site .ctcat-filter-dd[open] .ctcat-dd-panel,
    .ctcat-filter-dd[open] .ctcat-dd-panel {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(430px, calc(100vw - 28px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        max-height: min(74dvh, 560px) !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        display: grid !important;
        gap: 7px !important;
        padding: 18px 14px 14px !important;
        border-radius: 22px !important;
        background: #fff !important;
        border: 1px solid rgba(226,232,240,.95) !important;
        box-shadow: 0 24px 80px rgba(15, 23, 42, .28) !important;
        z-index: 2147483001 !important;
        box-sizing: border-box !important;
    }

    body.w11-pro-site .ctcat-filter-dd[open] .ctcat-dd-panel::before,
    .ctcat-filter-dd[open] .ctcat-dd-panel::before {
        content: '' !important;
        position: sticky !important;
        top: -18px !important;
        display: block !important;
        height: 0 !important;
        background: #fff !important;
        z-index: 1 !important;
    }

    body.w11-pro-site .ctcat-filter-close-btn,
    .ctcat-filter-close-btn {
        position: sticky !important;
        top: 0 !important;
        justify-self: end !important;
        width: 42px !important;
        height: 42px !important;
        margin: -8px -2px 2px auto !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #111827 !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
        font-size: 24px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 4 !important;
    }

    body.w11-pro-site .ctcat-dd-panel a,
    .ctcat-dd-panel a,
    body.w11-pro-site .ctcat-dd-note,
    .ctcat-dd-note {
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        padding: 11px 14px !important;
        border-radius: 13px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        box-sizing: border-box !important;
    }

    body.w11-pro-site .ctcat-area-search,
    .ctcat-area-search {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: #fff !important;
        padding: 0 0 8px !important;
    }
    body.w11-pro-site .ctcat-area-search input,
    .ctcat-area-search input,
    body.w11-pro-site .ctcat-price-form input,
    .ctcat-price-form input,
    body.w11-pro-site .ctcat-price-form button,
    .ctcat-price-form button {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    body.w11-pro-site .ctcat-price-form,
    .ctcat-price-form {
        gap: 8px !important;
    }
}

/* === PATCH datxe_226: mobile filter close button must stay inside panel header, not fixed on viewport === */
@media (max-width: 991.98px){
    body.w11-pro-site .ctcat-filter-dd[open] .ctcat-dd-panel,
    .ctcat-filter-dd[open] .ctcat-dd-panel{
        position:fixed!important;
        left:50%!important;
        right:auto!important;
        top:118px!important;
        bottom:auto!important;
        transform:translate3d(-50%,0,0)!important;
        width:min(760px, calc(100vw - 24px))!important;
        max-width:calc(100vw - 24px)!important;
        max-height:calc(100dvh - 248px)!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        padding:64px 14px 16px!important;
        border-radius:22px!important;
        box-sizing:border-box!important;
        isolation:isolate!important;
    }

    body.w11-pro-site .ctcat-filter-dd[open] .ctcat-dd-panel > .ctcat-filter-close-btn,
    .ctcat-filter-dd[open] .ctcat-dd-panel > .ctcat-filter-close-btn,
    body.w11-pro-site .ctcat-filter-close-btn,
    .ctcat-filter-close-btn{
        position:absolute!important;
        top:14px!important;
        right:14px!important;
        left:auto!important;
        bottom:auto!important;
        transform:none!important;
        margin:0!important;
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
        padding:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        border:1px solid #e5e7eb!important;
        border-radius:999px!important;
        background:#f8fafc!important;
        box-shadow:0 10px 25px rgba(15,23,42,.14)!important;
        z-index:10!important;
        flex:0 0 auto!important;
    }

    body.w11-pro-site .ctcat-filter-dd[open] .ctcat-area-search,
    .ctcat-filter-dd[open] .ctcat-area-search{
        position:relative!important;
        top:auto!important;
        z-index:1!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        padding:0 0 10px!important;
        margin:0!important;
        box-sizing:border-box!important;
    }
}


/* Patch v229: mobile filter popup header titles */
@media (max-width: 991px){
  body.w11-pro-site .ctcat-filter-dd[open] > .ctcat-dd-panel,
  .ctcat-filter-dd[open] > .ctcat-dd-panel,
  body.w11-pro-site .ctcat-filter-dd[open] > .ctcat-price-form,
  .ctcat-filter-dd[open] > .ctcat-price-form{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    padding:0 14px 14px!important;
    box-sizing:border-box!important;
  }

  body.w11-pro-site .ctcat-filter-popup-head,
  .ctcat-filter-popup-head{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    min-height:54px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 -14px 6px!important;
    padding:10px 12px 10px 16px!important;
    background:#fff!important;
    border-bottom:1px solid #eef2f7!important;
    border-radius:18px 18px 0 0!important;
  }

  body.w11-pro-site .ctcat-filter-popup-title,
  .ctcat-filter-popup-title{
    display:block!important;
    min-width:0!important;
    color:#111827!important;
    font-size:17px!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.w11-pro-site .ctcat-filter-popup-head > .ctcat-filter-close-btn,
  .ctcat-filter-popup-head > .ctcat-filter-close-btn{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:999px!important;
    background:#f3f4f6!important;
    color:#111827!important;
    font-size:24px!important;
    line-height:1!important;
    font-weight:800!important;
    box-shadow:none!important;
  }

  body.w11-pro-site .ctcat-dd-panel > .ctcat-filter-close-btn,
  .ctcat-dd-panel > .ctcat-filter-close-btn,
  body.w11-pro-site .ctcat-price-form > .ctcat-filter-close-btn,
  .ctcat-price-form > .ctcat-filter-close-btn{
    display:none!important;
  }

  body.w11-pro-site .ctcat-dd-panel a,
  .ctcat-dd-panel a{
    width:100%!important;
    box-sizing:border-box!important;
  }

  body.w11-pro-site .ctcat-price-form input,
  .ctcat-price-form input,
  body.w11-pro-site .ctcat-price-form button,
  .ctcat-price-form button{
    width:100%!important;
    box-sizing:border-box!important;
  }
}