/* =========================================================
   VZUTA_UA — REAL MOBILE STRUCTURE
   Замінити mobile.css повністю.
   Це не латка. Це окрема мобільна архітектура.
   ========================================================= */

@media (min-width: 769px){
    .vz-mobile-header,
    .vz-mobile-menu,
    .vz-mobile-menu-overlay{
        display:none !important;
    }
}

@media (max-width: 768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        background:#f6f6f6;
        -webkit-text-size-adjust:100%;
    }

    body{
        font-size:14px;
        line-height:1.45;
        color:#111;
    }

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

    .container,
    .footer-soft-inner{
        width:100%;
        max-width:100%;
        padding-left:16px;
        padding-right:16px;
        margin-left:auto;
        margin-right:auto;
    }

    main,
    section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    img{
        max-width:100%;
        height:auto;
    }

    /* прибираємо старий desktop header на телефоні повністю */
    .site-header{
        display:none !important;
    }

    /* =====================================================
       MOBILE HEADER LIKE REFERENCE
       ===================================================== */

    .vz-mobile-header{
        position:sticky;
        top:0;
        z-index:9999;
        width:100%;
        height:66px;
        padding:0 18px;
        background:#fff;
        border-bottom:1px solid #e9e9e9;
        display:grid;
        grid-template-columns:42px 1fr auto;
        align-items:center;
        gap:16px;
    }

    .vz-mobile-burger{
        width:38px;
        height:28px;
        padding:0;
        border:0;
        background:transparent;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        align-items:flex-start;
    }

    .vz-mobile-burger span{
        display:block;
        width:34px;
        height:3px;
        background:#111;
        border-radius:20px;
    }

    .vz-mobile-logo{
        justify-self:center;
        color:#111;
        font-family:'Cormorant Garamond', Georgia, serif;
        font-size:34px;
        font-weight:600;
        line-height:1;
        letter-spacing:.3px;
        white-space:nowrap;
    }

    .vz-mobile-icons{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:18px;
    }

    .vz-mobile-icons a,
    .vz-mobile-search-btn{
        width:28px;
        height:28px;
        min-width:28px;
        border:0;
        background:transparent;
        color:#111;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:25px;
        line-height:1;
    }

    .vz-mobile-search-btn{
        font-size:27px;
    }

    /* =====================================================
       MOBILE MENU LIKE LADYBOOM
       ===================================================== */

    .vz-mobile-menu-overlay{
        position:fixed;
        inset:0;
        z-index:10000;
        background:rgba(0,0,0,.44);
        opacity:0;
        visibility:hidden;
        transition:.24s ease;
    }

    .vz-mobile-menu-overlay.active{
        opacity:1;
        visibility:visible;
    }

    .vz-mobile-menu{
        position:fixed;
        top:0;
        left:0;
        z-index:10001;
        width:min(88vw, 390px);
        height:100dvh;
        background:#fff;
        transform:translateX(-105%);
        transition:.24s ease;
        overflow-y:auto;
        overflow-x:hidden;
        box-shadow:18px 0 44px rgba(0,0,0,.18);
        will-change:transform;
    }

    .vz-mobile-menu.active{
        transform:translateX(0);
    }

    .vz-mobile-menu-head{
        height:70px;
        padding:0 20px;
        display:grid;
        grid-template-columns:42px 1fr auto;
        align-items:center;
        gap:18px;
        border-bottom:1px solid #e8e8e8;
    }

    .vz-mobile-menu-close{
        width:42px;
        height:42px;
        padding:0;
        border:0;
        background:transparent;
        color:#111;
        font-size:42px;
        line-height:1;
        display:flex;
        align-items:center;
        justify-content:flex-start;
    }

    .vz-mobile-menu-logo{
        justify-self:center;
        color:#111;
        font-family:Arial, sans-serif;
        font-size:28px;
        font-weight:500;
        letter-spacing:-1px;
        white-space:nowrap;
    }

    .vz-mobile-menu-head-icons{
        display:flex;
        align-items:center;
        gap:16px;
    }

    .vz-mobile-menu-head-icons a{
        width:26px;
        height:26px;
        color:#111;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:22px;
    }

    .vz-mobile-menu-nav{
        display:block;
        padding:0;
        margin:0;
    }

    .vz-mobile-menu-nav > a,
    .vz-mobile-menu-toggle{
        width:100%;
        min-height:62px;
        padding:0 22px;
        border:0;
        border-bottom:1px solid #e8e8e8;
        background:#fff;
        color:#111;
        display:flex;
        align-items:center;
        justify-content:space-between;
        font-size:20px;
        font-weight:600;
        line-height:1.2;
        text-transform:uppercase;
        text-align:left;
    }

    .vz-sale-link{
        color:#e12b2b !important;
    }

    .vz-mobile-menu-toggle i{
        font-size:18px;
    }

    .vz-mobile-category-panel{
        display:none;
        padding:24px 22px 28px;
        border-bottom:1px solid #e8e8e8;
        background:#fff;
    }

    .vz-mobile-category-panel.active{
        display:block;
    }

    .vz-all-products{
        display:flex;
        align-items:center;
        min-height:54px;
        gap:16px;
        margin-bottom:22px;
        padding-bottom:22px;
        border-bottom:1px solid #e8e8e8;
        color:#111;
        font-size:20px;
        font-weight:600;
        text-transform:none;
    }

    .vz-all-products::before{
        content:"";
        width:54px;
        height:54px;
        min-width:54px;
        border-radius:50%;
        background:#eee;
        display:block;
    }

    .vz-mobile-category-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px 24px;
    }

    .vz-mobile-category-grid a{
        min-width:0;
        display:grid;
        grid-template-columns:54px minmax(0,1fr);
        align-items:center;
        gap:13px;
        color:#111;
        font-size:18px;
        font-weight:500;
        line-height:1.15;
    }

    .vz-mobile-category-grid img{
        width:54px;
        height:54px;
        min-width:54px;
        border-radius:50%;
        background:#eee;
        object-fit:cover;
        display:block;
    }

    /* якщо картинка відсутня — щоб не було синього битого значка */
    .vz-mobile-category-grid img:not([src]),
    .vz-mobile-category-grid img[src=""]{
        visibility:hidden;
    }

    /* =====================================================
       HOME MOBILE
       ===================================================== */

    .category-showcase{
        padding:18px 0 42px;
        background:#fff;
    }

    .category-showcase .container,
    .products-section .container{
        padding-left:16px;
        padding-right:0;
    }

    .category-grid{
        display:flex;
        flex-wrap:nowrap;
        gap:14px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 16px 12px 0;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .category-grid::-webkit-scrollbar,
    .products-section .products-grid::-webkit-scrollbar{
        display:none;
    }

    .category-card{
        flex:0 0 74vw;
        min-width:74vw;
        max-width:74vw;
        height:auto;
        aspect-ratio:3 / 4;
        border-radius:16px;
        scroll-snap-align:start;
        box-shadow:none;
        transform:none;
    }

    .category-card:hover{
        transform:none;
        box-shadow:none;
    }

    .category-card img,
    .category-card:hover img{
        width:100%;
        height:100%;
        object-fit:cover;
        transform:none;
    }

    .category-name{
        left:16px;
        right:16px;
        bottom:18px;
        font-size:25px;
        font-weight:800;
        line-height:1.05;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .products-section{
        padding:44px 0;
        background:#f6f6f6;
    }

    .products-section .section-header{
        padding-right:16px;
        margin:0 0 20px;
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:12px;
    }

    .products-section .section-header h2{
        max-width:68%;
        font-size:32px;
        font-weight:800;
        line-height:1.05;
    }

    .products-section .section-header a{
        font-size:12px;
        font-weight:800;
        white-space:nowrap;
    }

    .products-section .products-grid{
        display:flex;
        grid-template-columns:none;
        flex-wrap:nowrap;
        gap:14px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 16px 12px 0;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .products-section .product-card{
        flex:0 0 62vw;
        min-width:62vw;
        max-width:62vw;
        width:62vw;
        scroll-snap-align:start;
    }

    /* =====================================================
       PRODUCT CARDS
       ===================================================== */

    .product-card,
    .product-card:hover{
        border-radius:16px;
        box-shadow:0 8px 22px rgba(0,0,0,.045);
        transform:none;
    }

    .product-image img,
    .product-card:hover .product-image img{
        transform:none;
    }

    .product-info{
        padding:12px 12px 5px;
    }

    .product-info h3{
        font-size:14px;
        font-weight:700;
        line-height:1.23;
        overflow:hidden;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .price{
        font-size:15px;
        font-weight:800;
    }

    .old-price{
        font-size:12px;
    }

    .product-color{
        font-size:12.5px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .catalog-color-dots{
        gap:7px;
        padding:0 12px 13px;
    }

    .catalog-color-dot{
        width:19px;
        height:19px;
    }

    .product-favorite-btn,
    .product-image .product-favorite-btn{
        width:36px;
        height:36px;
        top:9px;
        right:9px;
        font-size:21px;
    }

    /* =====================================================
       CATALOG MOBILE
       ===================================================== */

    .catalog,
    .catalog-page,
    .favorites-page,
    .search-results-page{
        padding:32px 0 66px;
    }

    .catalog-title,
    .search-page-title h1{
        font-size:30px;
        line-height:1.1;
        font-weight:800;
    }

    .search-catalog-layout,
    .catalog-page-with-filters .search-catalog-layout,
    .catalog-layout,
    .catalog-content,
    .search-content{
        display:block;
        width:100%;
        max-width:100%;
    }

    .catalog-sidebar{
        display:none;
    }

    .mobile-filter-open{
        display:flex;
        width:100%;
        height:50px;
        margin:14px 0 20px;
        border:0;
        border-radius:14px;
        background:#111;
        color:#fff;
        font-size:14px;
        font-weight:800;
        align-items:center;
        justify-content:center;
    }

    .catalog-results .products-grid,
    .catalog-page-with-filters .products-grid,
    .favorites-page .products-grid,
    .search-results-page .products-grid{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:13px;
        overflow:visible;
        padding:0;
    }

    .catalog-results .product-card,
    .catalog-page-with-filters .product-card,
    .favorites-page .product-card,
    .search-results-page .product-card{
        width:100%;
        min-width:0;
        max-width:100%;
        flex:none;
    }

    /* =====================================================
       PRODUCT DETAIL MOBILE
       ===================================================== */

    .product-detail-page{
        padding:16px 0 58px;
    }

    .breadcrumbs{
        margin-bottom:14px;
        font-size:12px;
        line-height:1.4;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .product-detail-layout{
        display:block;
        width:100%;
        max-width:100%;
    }

    .product-left,
    .product-right{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .product-photo-grid{
        display:flex;
        flex-wrap:nowrap;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 16px 10px 0;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .product-photo-grid::-webkit-scrollbar{
        display:none;
    }

    .product-photo-main{
        flex:0 0 86vw;
        min-width:86vw;
        max-width:86vw;
        height:auto;
        border-radius:14px;
        overflow:hidden;
        scroll-snap-align:start;
        background:#f2f2f2;
    }

    .product-photo-main img{
        width:100%;
        height:auto;
        aspect-ratio:3 / 4;
        object-fit:cover;
        object-position:center;
    }

    .product-right{
        position:static;
        padding-top:20px;
    }

    .product-status-label{
        font-size:11px;
        font-weight:800;
    }

    .product-right h1{
        font-size:23px;
        line-height:1.16;
        font-weight:800;
        margin-bottom:14px;
    }

    .detail-price{
        font-size:22px;
        font-weight:800;
    }

    .detail-actions{
        display:grid;
        grid-template-columns:1fr 54px;
        gap:9px;
    }

    .detail-buy-btn,
    .detail-like-btn{
        width:100%;
        height:54px;
        min-width:0;
    }

    .size-btn{
        min-width:48px;
        height:48px;
        border-radius:15px;
        font-size:14px;
        font-weight:800;
    }

    /* =====================================================
       CART / CHECKOUT / AUTH / SERVICE / FOOTER
       ===================================================== */

    .cart-page,
    .cart-page-vzuta,
    .checkout-page{
        padding:32px 0 64px;
    }

    .cart-vzuta-layout,
    .cart-layout,
    .checkout-grid{
        display:block;
    }

    .cart-vzuta-summary,
    .cart-summary,
    .checkout-summary{
        position:static;
        margin-top:18px;
    }

    .checkout-fields,
    .promo-row{
        grid-template-columns:1fr;
    }

    .auth-page,
    .profile-page,
    .order-success-page{
        padding:52px 0 76px;
    }

    .auth-card,
    .profile-card,
    .order-success-card{
        width:100%;
        max-width:100%;
        padding:26px 20px;
        border-radius:20px;
    }

    .auth-card h1,
    .profile-card h1,
    .order-success-card h1{
        font-size:28px;
        font-weight:800;
    }

    .info-page,
    .contacts-page,
    .about-page,
    .service-page{
        padding:40px 0 68px;
    }

    .contacts-layout,
    .service-layout,
    .about-grid,
    .contacts-info-grid,
    .service-info-grid,
    .about-values{
        grid-template-columns:1fr;
    }

    .site-footer.footer-soft,
    .footer-soft{
        padding:40px 0 24px;
    }

    .footer-soft-logo{
        font-size:45px;
    }

    .footer-soft-contact{
        flex-direction:column;
        gap:11px;
    }

    .footer-soft-links{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:12px;
    }
}

@media (max-width:390px){

    .vz-mobile-header{
        grid-template-columns:40px 1fr auto;
        padding:0 16px;
        gap:14px;
    }

    .vz-mobile-logo{
        font-size:31px;
    }

    .vz-mobile-icons{
        gap:15px;
    }

    .vz-mobile-icons a,
    .vz-mobile-search-btn{
        width:26px;
        min-width:26px;
        height:26px;
        font-size:23px;
    }

    .vz-mobile-category-grid{
        gap:16px 18px;
    }

    .vz-mobile-category-grid a{
        grid-template-columns:50px minmax(0,1fr);
        font-size:17px;
    }

    .vz-mobile-category-grid img,
    .vz-all-products::before{
        width:50px;
        height:50px;
        min-width:50px;
    }

    .category-card{
        flex-basis:78vw;
        min-width:78vw;
        max-width:78vw;
    }

    .products-section .product-card{
        flex-basis:68vw;
        min-width:68vw;
        max-width:68vw;
        width:68vw;
    }

    .footer-soft-links{
        grid-template-columns:1fr;
        gap:22px;
    }
}
@media (max-width: 768px){

    /* HEADER — компактніше і дорожче */
    .vz-mobile-header{
        height:68px !important;
        padding:0 18px !important;
        grid-template-columns:38px 1fr auto !important;
        gap:14px !important;
        background:#fff !important;
        border-bottom:1px solid #ededed !important;
    }

    .vz-mobile-burger{
        width:34px !important;
        height:24px !important;
    }

    .vz-mobile-burger span{
        width:32px !important;
        height:2.6px !important;
        border-radius:20px !important;
    }

    .vz-mobile-logo{
        font-size:31px !important;
        font-weight:600 !important;
        letter-spacing:.4px !important;
        line-height:1 !important;
    }

    .vz-mobile-icons{
        gap:15px !important;
    }

    .vz-mobile-icons a,
    .vz-mobile-search-btn{
        width:25px !important;
        min-width:25px !important;
        height:25px !important;
        font-size:22px !important;
    }

    .vz-mobile-search-btn{
        font-size:24px !important;
    }

    /* MENU OVERLAY */
    .vz-mobile-menu-overlay{
        background:rgba(0,0,0,.42) !important;
        backdrop-filter:blur(2px) !important;
    }

    /* MENU PANEL */
    .vz-mobile-menu{
        width:min(88vw, 390px) !important;
        background:#fff !important;
        box-shadow:20px 0 50px rgba(0,0,0,.18) !important;
    }

    .vz-mobile-menu-head{
        height:72px !important;
        padding:0 22px !important;
        grid-template-columns:42px 1fr auto !important;
        gap:16px !important;
        border-bottom:1px solid #e8e8e8 !important;
    }

    .vz-mobile-menu-close{
        width:40px !important;
        height:40px !important;
        font-size:42px !important;
        font-weight:300 !important;
    }

    .vz-mobile-menu-logo{
        font-size:28px !important;
        font-weight:500 !important;
        letter-spacing:-.8px !important;
    }

    .vz-mobile-menu-head-icons{
        gap:16px !important;
    }

    .vz-mobile-menu-head-icons a{
        width:25px !important;
        height:25px !important;
        font-size:21px !important;
    }

    /* TOP MENU LINKS */
    .vz-mobile-menu-nav > a,
    .vz-mobile-menu-toggle{
        min-height:62px !important;
        padding:0 22px !important;
        font-size:19px !important;
        font-weight:600 !important;
        letter-spacing:.2px !important;
        text-transform:uppercase !important;
        border-bottom:1px solid #e8e8e8 !important;
        background:#fff !important;
    }

    .vz-sale-link{
        color:#e43131 !important;
        letter-spacing:1.2px !important;
    }

    .vz-mobile-menu-toggle i{
        font-size:17px !important;
        transition:.22s ease !important;
    }

    .vz-mobile-menu-toggle.active i{
        transform:rotate(180deg) !important;
    }

    /* CATEGORY PANEL */
    .vz-mobile-category-panel{
        padding:24px 22px 30px !important;
        background:#fff !important;
        border-bottom:1px solid #e8e8e8 !important;
    }

    .vz-all-products{
        min-height:58px !important;
        margin-bottom:22px !important;
        padding-bottom:22px !important;
        border-bottom:1px solid #e6e6e6 !important;
        display:grid !important;
        grid-template-columns:58px minmax(0,1fr) !important;
        align-items:center !important;
        gap:15px !important;
        color:#111 !important;
        font-size:19px !important;
        font-weight:600 !important;
        line-height:1.18 !important;
        text-transform:none !important;
    }

    .vz-all-products::before{
        display:none !important;
        content:none !important;
    }

    .vz-all-products img{
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        border-radius:50% !important;
        object-fit:cover !important;
        background:#eee !important;
        display:block !important;
    }

    .vz-mobile-category-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:19px 22px !important;
        align-items:start !important;
    }

    .vz-mobile-category-grid a{
        display:grid !important;
        grid-template-columns:56px minmax(0,1fr) !important;
        align-items:center !important;
        gap:13px !important;
        color:#111 !important;
        font-size:18px !important;
        font-weight:500 !important;
        line-height:1.15 !important;
    }

    .vz-mobile-category-grid img{
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        border-radius:50% !important;
        object-fit:cover !important;
        background:#eee !important;
        display:block !important;
    }

    .vz-mobile-category-grid span,
    .vz-all-products span{
        min-width:0 !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    /* якщо якась картинка не завантажилась */
    .vz-mobile-category-grid img{
        color:transparent !important;
        font-size:0 !important;
    }

    /* прибрати старе меню, якщо воно випадково ще є у base */
    .mobile-menu,
    .mobile-menu-overlay,
    .mobile-menu-btn{
        display:none !important;
    }
}

@media (max-width: 390px){

    .vz-mobile-header{
        height:66px !important;
        padding:0 16px !important;
        grid-template-columns:36px 1fr auto !important;
        gap:12px !important;
    }

    .vz-mobile-logo{
        font-size:29px !important;
    }

    .vz-mobile-icons{
        gap:13px !important;
    }

    .vz-mobile-icons a,
    .vz-mobile-search-btn{
        width:24px !important;
        min-width:24px !important;
        height:24px !important;
        font-size:21px !important;
    }

    .vz-mobile-category-grid{
        gap:17px 18px !important;
    }

    .vz-mobile-category-grid a{
        grid-template-columns:52px minmax(0,1fr) !important;
        font-size:16.5px !important;
        gap:12px !important;
    }

    .vz-mobile-category-grid img,
    .vz-all-products img{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
    }

    .vz-all-products{
        grid-template-columns:52px minmax(0,1fr) !important;
        font-size:17.5px !important;
    }
}
/* =========================================================
   VZUTA_UA — MOBILE FILTERS FIX
   Додати в самий низ mobile.css
   ========================================================= */

@media (min-width: 769px){
    .vz-mobile-filter-btn,
    .vz-filter-overlay,
    .vz-filter-close{
        display:none !important;
    }
}

@media (max-width: 768px){

    .vz-mobile-filter-btn{
        width:100%;
        height:50px;
        margin:0 0 18px;
        border:0;
        border-radius:14px;
        background:#111;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        font-size:14px;
        font-weight:800;
        text-transform:uppercase;
    }

    .vz-filter-overlay{
        position:fixed;
        inset:0;
        z-index:12000;
        background:rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        transition:.22s ease;
    }

    .vz-filter-overlay.active{
        opacity:1;
        visibility:visible;
    }

    body.vz-filters-open{
        overflow:hidden;
    }

    .catalog-sidebar{
        display:block !important;
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        z-index:12001 !important;
        width:min(88vw, 390px) !important;
        height:100dvh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        background:#fff !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:18px 0 46px rgba(0,0,0,.18) !important;
        transform:translateX(-105%) !important;
        transition:.24s ease !important;
        padding:76px 0 24px !important;
    }

    .catalog-sidebar.active{
        transform:translateX(0) !important;
    }

    .catalog-sidebar::before{
        content:"Фільтри";
        position:fixed;
        top:0;
        left:0;
        width:min(88vw, 390px);
        height:66px;
        padding:0 22px;
        background:#fff;
        border-bottom:1px solid #e8e8e8;
        display:flex;
        align-items:center;
        color:#111;
        font-size:22px;
        font-weight:800;
        z-index:2;
    }

    .vz-filter-close{
        position:fixed;
        top:13px;
        right:18px;
        z-index:12002;
        width:40px;
        height:40px;
        border:0;
        background:transparent;
        color:#111;
        font-size:34px;
        line-height:1;
        display:none;
    }

    .vz-filter-close.active{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .filter-block{
        padding:20px 22px !important;
        border-bottom:1px solid #eee !important;
    }

    .filter-block h3{
        margin:0 0 14px !important;
        font-size:16px !important;
        font-weight:800 !important;
        color:#111 !important;
    }

    .filter-block label{
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
        min-height:34px !important;
        margin-bottom:10px !important;
        font-size:15px !important;
        font-weight:600 !important;
        color:#111 !important;
    }

    .filter-block input[type="radio"],
    .filter-block input[type="checkbox"]{
        width:18px !important;
        height:18px !important;
        accent-color:#111 !important;
    }

    .filter-block input[type="number"],
    .filter-block input[type="text"]{
        width:100% !important;
        height:48px !important;
        border:1px solid #ddd !important;
        border-radius:14px !important;
        padding:0 14px !important;
        font-size:14px !important;
        outline:none !important;
        background:#fafafa !important;
    }

    .filter-apply-btn,
    .catalog-sidebar button[type="submit"],
    .catalog-sidebar input[type="submit"]{
        width:100% !important;
        height:50px !important;
        border:0 !important;
        border-radius:14px !important;
        background:#111 !important;
        color:#fff !important;
        font-size:14px !important;
        font-weight:800 !important;
        text-transform:uppercase !important;
    }

    .filter-reset-btn{
        height:48px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        color:#111 !important;
        font-size:14px !important;
        font-weight:800 !important;
    }

    .filter-option,
    .filter-option-link{
        min-height:42px !important;
        padding:10px 16px !important;
        border-radius:999px !important;
        font-size:14px !important;
        font-weight:700 !important;
    }

    .size-filter-grid{
        display:grid !important;
        grid-template-columns:repeat(3, 1fr) !important;
        gap:8px !important;
    }

    .color-filter-list{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:12px !important;
    }
}
/* =========================================================
   SERVICE PAGES — LOAD-ORDER SAFETY
   Same scoped rules ensure correct mobile layout even when
   mobile.css is linked after service-pages.css.
   ========================================================= */
@media (max-width:768px){
    .service-page .service-layout,
    .contacts-page .contacts-layout,
    .about-page .about-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:16px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .service-page .service-side,
    .contacts-page .contacts-side{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:16px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .service-page .service-actions,
    .contacts-page .contacts-actions{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:12px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .service-page .service-action,
    .contacts-page .contact-action{
        display:grid !important;
        grid-template-columns:48px minmax(0,1fr) !important;
        align-items:center !important;
        gap:13px !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        padding:16px !important;
        box-sizing:border-box !important;
    }

    .service-page .service-action > div,
    .contacts-page .contact-action > div{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .service-page .service-action strong,
    .service-page .service-action span,
    .contacts-page .contact-action strong,
    .contacts-page .contact-action span{
        max-width:100% !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .service-page .service-info-grid,
    .contacts-page .contacts-info-grid,
    .about-page .about-values{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:14px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .service-page .service-card,
    .contacts-page .contacts-card,
    .service-page .service-info-card,
    .contacts-page .contacts-info-card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }
}
/* =========================================================
   RECOMMENDED PRODUCTS MOBILE FINAL
   ========================================================= */

@media (max-width: 768px) {

    .recommended-section,
    .related-products,
    .you-may-like {
        width: 100%;
        max-width: 100%;
        padding: 52px 16px 70px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .recommended-section .container,
    .related-products .container,
    .you-may-like .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .recommended-section h2,
    .related-products h2,
    .you-may-like h2 {
        margin: 0 0 28px;
        max-width: 100%;
        font-size: clamp(38px, 11vw, 52px);
        line-height: 1.04;
        letter-spacing: -1.8px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .recommended-grid,
    .related-products-grid,
    .you-may-like-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .recommended-card,
    .related-product-card,
    .you-may-like-card,
    .recommended-grid .product-card,
    .related-products-grid .product-card,
    .you-may-like-grid .product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .recommended-card img,
    .related-product-card img,
    .you-may-like-card img,
    .recommended-grid .product-card img,
    .related-products-grid .product-card img,
    .you-may-like-grid .product-card img {
        display: block;
        width: 100% !important;
        height: 190px !important;
        object-fit: cover !important;
    }

    .recommended-card-content,
    .related-product-card-content,
    .you-may-like-card-content,
    .recommended-grid .product-card-content,
    .related-products-grid .product-card-content,
    .you-may-like-grid .product-card-content {
        padding: 14px 12px 16px !important;
    }

    .recommended-card h3,
    .related-product-card h3,
    .you-may-like-card h3,
    .recommended-grid .product-card h3,
    .related-products-grid .product-card h3,
    .you-may-like-grid .product-card h3 {
        margin: 0 0 12px !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    .recommended-card .price,
    .related-product-card .price,
    .you-may-like-card .price,
    .recommended-grid .product-card .price,
    .related-products-grid .product-card .price,
    .you-may-like-grid .product-card .price {
        margin: 0 !important;
        font-size: 19px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {

    .recommended-section,
    .related-products,
    .you-may-like {
        padding-left: 14px;
        padding-right: 14px;
    }

    .recommended-grid,
    .related-products-grid,
    .you-may-like-grid {
        gap: 10px !important;
    }

    .recommended-card img,
    .related-product-card img,
    .you-may-like-card img,
    .recommended-grid .product-card img,
    .related-products-grid .product-card img,
    .you-may-like-grid .product-card img {
        height: 170px !important;
    }
}