/* Shop pages on phones/tablets: products first, filters in a slide-in drawer */
.shop-filter-toggle,
.shop-drawer-head,
.shop-drawer-foot,
.shop-filter-overlay{ display:none; }

@media (max-width: 991.98px){
    .product-area.shop{ padding-top:16px; padding-bottom:40px; }

    /* sidebar column collapses, products take the full width */
    .product-area.shop .col-lg-3{ flex:0 0 0; max-width:0; padding:0; margin:0; }
    .product-area.shop .col-lg-9{ flex:0 0 100%; max-width:100%; }

    .product-area.shop .col-lg-3 > .shop-sidebar{
        position:fixed;
        top:0; left:0; bottom:0;
        width:min(88vw, 360px);
        background:#fff;
        z-index:100001;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding:0 16px 96px;
        transform:translateX(-105%);
        transition:transform .3s ease;
        box-shadow:none;
    }
    body.shop-filters-open .product-area.shop .col-lg-3 > .shop-sidebar{
        transform:none;
        box-shadow:0 0 40px rgba(0,0,0,.25);
    }
    .shop-filter-overlay{
        display:block;
        position:fixed; top:0; right:0; bottom:0; left:0;
        background:rgba(17,17,17,.5);
        z-index:100000;
        opacity:0; visibility:hidden;
        transition:opacity .3s ease, visibility .3s ease;
    }
    body.shop-filters-open .shop-filter-overlay{ opacity:1; visibility:visible; }
    body.shop-filters-open{ overflow:hidden; }

    .shop-drawer-head{
        display:flex; align-items:center; justify-content:space-between;
        position:sticky; top:0; z-index:2;
        background:#fff; margin:0 -16px 8px; padding:16px;
        border-bottom:1px solid #eee;
    }
    .shop-drawer-head strong{ font-size:18px; color:#222; }
    .shop-drawer-close{
        width:36px; height:36px; border:0; border-radius:50%;
        background:#f3f3f3; color:#333; font-size:16px; line-height:36px; padding:0; cursor:pointer;
    }
    .shop-drawer-foot{
        display:block;
        position:fixed; left:0; bottom:0; width:min(88vw, 360px);
        padding:12px 16px; background:#fff; border-top:1px solid #eee; z-index:100002;
        transform:translateX(-105%); transition:transform .3s ease;
    }
    body.shop-filters-open .shop-drawer-foot{ transform:none; }
    .shop-drawer-foot button{
        width:100%; height:46px; border:0; border-radius:10px;
        background:#222; color:#fff; font-weight:600; cursor:pointer;
    }

    .product-area.shop .shop-sidebar .single-widget{
        background:transparent; padding:14px 0; margin:0; border-bottom:1px solid #f0f0f0;
    }
    .product-area.shop .shop-sidebar .single-widget .title{ font-size:16px; margin-bottom:12px; }
    .product-area.shop .shop-sidebar .single-widget.recent-post{ display:none; }

    /* top bar: filter button + selects in one compact block */
    .product-area.shop .shop-top{
        display:flex; flex-wrap:wrap; align-items:center; gap:10px;
        padding:12px; margin:0 0 6px; background:#f7f7f9; border-radius:14px;
    }
    .product-area.shop .shop-top .view-mode{ display:none; }
    .product-area.shop .shop-top .shop-shorter{
        display:flex; gap:8px; width:100%; margin:0; padding:0; float:none;
    }
    .product-area.shop .shop-top .single-shorter{
        flex:1; min-width:0; margin:0; padding:0; float:none; display:block;
    }
    .product-area.shop .shop-top .single-shorter label{
        display:block; font-size:11px; color:#888; margin:0 0 4px; line-height:1.2;
    }
    .product-area.shop .shop-top .single-shorter select,
    .product-area.shop .shop-top .single-shorter .nice-select{
        width:100% !important; height:40px; line-height:38px; border-radius:10px; border:1px solid #e3e3e3;
        font-size:13px; background:#fff; float:none; padding-left:12px; padding-right:28px;
    }
    .product-area.shop .shop-top .single-shorter .nice-select .list{ width:100%; }
    .shop-filter-toggle{
        display:flex; align-items:center; justify-content:center; gap:8px;
        width:100%; height:44px; border:0; border-radius:10px;
        background:#F7941D; color:#fff; font-weight:600; letter-spacing:.3px; cursor:pointer;
        position:relative;
    }
    .shop-filter-toggle .dot{
        width:8px; height:8px; border-radius:50%; background:#fff; display:inline-block;
    }
}

@media (max-width: 767.98px){
    /* 2 products per row */
    .product-area.shop .col-lg-9 > .row{ margin-left:-6px; margin-right:-6px; }
    .product-area.shop .col-lg-9 > .row > [class*="col-"]{
        flex:0 0 50%; max-width:50%; padding-left:6px; padding-right:6px;
    }
    .product-area.shop .col-lg-9 > .row:first-child > .col-12{ flex:0 0 100%; max-width:100%; }
    .product-area.shop .single-product{ margin-top:18px; }
    .product-area.shop .single-product .product-img{ border-radius:12px !important; }
    .product-area.shop .single-product .product-content{ padding:10px 2px 0; margin-top:0 !important; }
    .product-area.shop .single-product .product-content h3{
        font-size:13px; line-height:1.35; margin-bottom:4px; font-weight:500;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:35px;
    }
    .product-area.shop .single-product .product-content > span,
    .product-area.shop .single-product .product-price span{ font-size:14px; font-weight:700; }
    .product-area.shop .single-product .product-content del,
    .product-area.shop .single-product .product-price del{ font-size:12px; }
    .product-area.shop .single-product .product-img a span.price-dec,
    .product-area.shop .single-product .product-img a span.new,
    .product-area.shop .single-product .product-img a span.hot,
    .product-area.shop .single-product .product-img a span.out-of-stock{
        right:8px !important; top:8px !important; padding:3px 8px !important; font-size:10px !important;
        line-height:1.4 !important; height:auto !important; border-radius:20px;
    }
    .product-area.shop .single-product .store-badge{
        top:8px !important; left:8px !important; width:30px !important; height:30px !important;
    }

    /* no hover on phones: small round action buttons, always visible */
    .product-area.shop .single-product .product-img::after{ display:none; }
    .product-area.shop .single-product .button-head{
        background:transparent !important; width:auto !important; height:auto !important; line-height:1 !important;
        left:auto !important; right:8px; bottom:8px !important; display:flex; flex-direction:column; gap:6px;
        opacity:1 !important; visibility:visible !important;
    }
    .product-area.shop .single-product .button-head .product-action,
    .product-area.shop .single-product .button-head .product-action-2{
        position:static !important; display:flex; flex-direction:column; gap:6px; padding:0; margin:0; width:auto; transform:none;
    }
    .product-area.shop .single-product .button-head .product-action a:not(.wishlist-btn){ display:none !important; }
    .product-area.shop .single-product .button-head .product-action a.wishlist-btn,
    .product-area.shop .single-product .button-head .product-action-2 a{
        display:flex !important; align-items:center; justify-content:center;
        width:34px !important; height:34px !important; line-height:1 !important; padding:0 !important; margin:0 !important;
        border-radius:50%; background:#fff !important; color:#333 !important;
        box-shadow:0 2px 8px rgba(0,0,0,.22); font-size:0 !important; border:0 !important; position:static !important;
    }
    .product-area.shop .single-product .button-head .product-action a.wishlist-btn i{ font-size:15px; margin:0; }
    .product-area.shop .single-product .button-head .product-action a.wishlist-btn span{ display:none !important; }
    .product-area.shop .single-product .button-head .product-action a.wishlist-btn.favorited i{ color:#e53935; }
    .product-area.shop .single-product .button-head .product-action-2 a::before{
        content:"\f07a"; font-family:FontAwesome; font-size:15px; color:#F7941D;
    }

    /* list view: same compact look as the grid */
    .product-area.shop .list-content{ padding:10px 2px 0; margin-top:0 !important; }
    .product-area.shop .list-content .product-price{ margin:0; }
    .product-area.shop .list-content .product-price span{ font-size:14px; font-weight:700; }
    .product-area.shop .list-content .product-price del{ font-size:12px; display:inline-block; }
    .product-area.shop .list-content h3.title{
        font-size:13px; line-height:1.35; font-weight:500; margin:4px 0 0;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .product-area.shop .list-content h3.title a{ font-size:13px; font-weight:500; }
    .product-area.shop .list-content .des{ display:none; }

    .product-area.shop .pagination, .product-area.shop .pagination-wrap{ justify-content:center; }
}