/*
 * eCig Market - site overrides and responsive product catalogs
 *
 * Upload to: wp-content/themes/Ecig-Market/css/ecm-responsive-catalog.css
 * Enqueue from functions.php. After confirming this file is loaded and the
 * layouts work, remove the migrated rules from WordPress Additional CSS.
 *
 * Catalogs covered:
 *   - Search & Filter Pro: E-Liquid, Nic Salts, Nicotine Pouches
 *   - Standard WooCommerce product archives and subcategory-only pages
 *   - ECM variation catalog shortcode: Disposables
 *
 * Responsive targets:
 *   >=1200px desktop:              5 product columns
 *   992-1199px tablet landscape:   5 product columns
 *   500-991px tablet portrait:     3 product columns
 *   700-767px phone landscape:     3 product columns
 *   Small phone portrait:          existing single-column layout
 */

/* -------------------------------------------------------------------------
   1. Site-wide desktop container (keep the existing header/logo proportions)
   ------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .container {
        width: 95%;
        max-width: 1400px;
    }
}

/* -------------------------------------------------------------------------
   2. Desktop product grids: five columns on every catalog type
   ------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    /* Search & Filter results and regular WooCommerce archive results. */
    .search-filter-results .categry_sec,
    body.woocommerce-page ul.products {
        display: flex;
        flex-wrap: wrap;
    }

    .search-filter-results .categry_sec > .col-lg-3,
    body.woocommerce-page ul.products > .col-lg-3 {
        flex: 0 0 20%;
        width: 20%;
        float: none;
    }

    .search-filter-results .categry_sec > .col-lg-3 .cate_bx_1,
    body.woocommerce-page ul.products .cate_bx_1 {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    /* Disposables uses its own CSS grid, not WooCommerce's card markup. */
    #content .ecm-vc {
        max-width: 100%;
    }

    #content .ecm-vc .ecm-vc-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* -------------------------------------------------------------------------
   3. Tablet landscape: five compact columns (e.g. Samsung, 1007 CSS px)
   ------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {
    #content .search-filter-results .categry_sec,
    body.woocommerce-page ul.products {
        display: flex;
        flex-wrap: wrap;
    }

    #content .search-filter-results .categry_sec > .col-md-4,
    body.woocommerce-page ul.products > .col-md-4 {
        flex: 0 0 20%;
        width: 20%;
        float: none;
        padding-left: 7px;
        padding-right: 7px;
    }

    #content .categry_sec .cate_bx_1,
    body.woocommerce-page ul.products .cate_bx_1 {
        float: none;
        margin: 0 auto;
    }

    #content .categry_sec .cate_bx_1 img,
    body.woocommerce-page ul.products .cate_bx_1 img {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

    html body #content .categry_sec .cate_bx_1 h1,
    html body.woocommerce-page ul.products .cate_bx_1 h1 {
        font-size: 16px !important;
        line-height: 1.2;
    }

    html body #content .categry_sec .cate_bx_1 .price h1,
    html body.woocommerce-page ul.products .cate_bx_1 .price h1 {
        font-size: 17px !important;
    }

    #content .categry_sec .cate_bx_1 p,
    body.woocommerce-page ul.products .cate_bx_1 p {
        font-size: 11px;
    }

    #content .categry_sec .cate_bx_1 .view_cat_btn,
    body.woocommerce-page ul.products .cate_bx_1 .view_cat_btn {
        font-size: 11px;
        padding: 10px 2px;
    }

    #content .ecm-vc .ecm-vc-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    #content .ecm-vc .ecm-vc-card img {
        height: 165px;
    }

    #content .ecm-vc .ecm-vc-flavor { font-size: 16px; }
    #content .ecm-vc .ecm-vc-brand { font-size: 12px; }
    #content .ecm-vc .ecm-vc-price { font-size: 17px; }
    #content .ecm-vc .ecm-vc-view { font-size: 11px; padding: 10px 4px; }
}

/* -------------------------------------------------------------------------
   4. Tablet portrait: three columns (e.g. Samsung, 602 CSS px)
   ------------------------------------------------------------------------- */

@media (orientation: portrait) and (min-width: 500px) and (max-width: 991px) {
    #content .categry_sec,
    body.woocommerce-page ul.products {
        display: flex;
        flex-wrap: wrap;
    }

    #content .categry_sec > .col-lg-3.col-md-4.col-sm-6.col-xs-12,
    body.woocommerce-page ul.products > .col-lg-3.col-md-4.col-sm-6.col-xs-12 {
        flex: 0 0 33.3333%;
        width: 33.3333%;
        float: none;
        padding-left: 6px;
        padding-right: 6px;
    }

    #content .categry_sec .cate_bx_1,
    body.woocommerce-page ul.products .cate_bx_1 {
        float: none;
        margin: 0 auto;
    }

    #content .categry_sec .cate_bx_1 img,
    body.woocommerce-page ul.products .cate_bx_1 img {
        width: 100%;
        max-width: 160px;
        height: auto;
    }

    html body #content .categry_sec .cate_bx_1 h1,
    html body.woocommerce-page ul.products .cate_bx_1 h1 {
        font-size: 15px !important;
        line-height: 1.2;
    }

    html body #content .categry_sec .cate_bx_1 .price h1,
    html body.woocommerce-page ul.products .cate_bx_1 .price h1 {
        font-size: 16px !important;
    }

    #content .categry_sec .cate_bx_1 p,
    body.woocommerce-page ul.products .cate_bx_1 p {
        font-size: 11px;
    }

    #content .categry_sec .cate_bx_1 .view_cat_btn,
    body.woocommerce-page ul.products .cate_bx_1 .view_cat_btn {
        font-size: 11px;
        padding: 10px 2px;
    }

    #content .ecm-vc .ecm-vc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #content .ecm-vc .ecm-vc-card img { height: 155px; }
    #content .ecm-vc .ecm-vc-flavor { font-size: 15px; }
    #content .ecm-vc .ecm-vc-brand { font-size: 11px; }
    #content .ecm-vc .ecm-vc-price { font-size: 16px; }
    #content .ecm-vc .ecm-vc-view { font-size: 11px; padding: 10px 3px; }
}

/* -------------------------------------------------------------------------
   5. Phone landscape: three columns (e.g. phone, 752 CSS px)
   ------------------------------------------------------------------------- */

@media (orientation: landscape) and (min-width: 700px) and (max-width: 767px) {
    #content .categry_sec,
    body.woocommerce-page ul.products {
        display: flex;
        flex-wrap: wrap;
    }

    #content .categry_sec > .col-lg-3.col-md-4.col-sm-6.col-xs-12,
    body.woocommerce-page ul.products > .col-lg-3.col-md-4.col-sm-6.col-xs-12 {
        flex: 0 0 33.3333%;
        width: 33.3333%;
        float: none;
        padding-left: 6px;
        padding-right: 6px;
    }

    #content .categry_sec .cate_bx_1,
    body.woocommerce-page ul.products .cate_bx_1 {
        float: none;
        margin: 0 auto;
    }

    #content .categry_sec .cate_bx_1 img,
    body.woocommerce-page ul.products .cate_bx_1 img {
        width: 100%;
        max-width: 150px;
        height: auto;
    }

    html body #content .categry_sec .cate_bx_1 h1,
    html body.woocommerce-page ul.products .cate_bx_1 h1 {
        font-size: 14px !important;
        line-height: 1.2;
    }

    html body #content .categry_sec .cate_bx_1 .price h1,
    html body.woocommerce-page ul.products .cate_bx_1 .price h1 {
        font-size: 16px !important;
    }

    #content .categry_sec .cate_bx_1 p,
    body.woocommerce-page ul.products .cate_bx_1 p {
        font-size: 11px;
    }

    #content .categry_sec .cate_bx_1 .view_cat_btn,
    body.woocommerce-page ul.products .cate_bx_1 .view_cat_btn {
        font-size: 11px;
        padding: 9px 2px;
    }

    #content .ecm-vc .ecm-vc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #content .ecm-vc .ecm-vc-card img { height: 150px; }
    #content .ecm-vc .ecm-vc-flavor { font-size: 14px; }
    #content .ecm-vc .ecm-vc-brand { font-size: 11px; }
    #content .ecm-vc .ecm-vc-price { font-size: 16px; }
    #content .ecm-vc .ecm-vc-view { font-size: 11px; padding: 9px 3px; }
}

/* -------------------------------------------------------------------------
   6. Subcategory tiles (different markup from individual products)

   content-product_cat.php renders <li class="product-category product col-md-3">.
   Target the tile itself: some taxonomy templates do not place it directly
   under ul.products. The existing first/last row-clear classes also assume
   four columns, so override that clearing and horizontal margin here.
   ------------------------------------------------------------------------- */

@media (min-width: 992px) {
    li.product-category.product.col-md-3 {
        box-sizing: border-box;
        width: 20% !important;
        max-width: 20% !important;
        flex: 0 0 20% !important;
        float: left !important;
        clear: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (orientation: portrait) and (min-width: 500px) and (max-width: 991px),
       (orientation: landscape) and (min-width: 700px) and (max-width: 767px) {
    li.product-category.product.col-md-3 {
        box-sizing: border-box;
        width: 33.3333% !important;
        max-width: 33.3333% !important;
        flex: 0 0 33.3333% !important;
        float: left !important;
        clear: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   7. Existing WordPress Additional CSS: preserved unchanged
   ------------------------------------------------------------------------- */

.searchandfilter ul li {
    width: 29% !important;
}

select.postform {
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #000000;
    border-radius: 0;
    height: 40px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: block;
    font-size: 14px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.home_banner_outer .item .carousel-caption .right_slide_buttons ul.slide_buttons li:nth-of-type(2) a,
.home_banner_outer .item .carousel-caption .right_slide_buttons ul.slide_buttons li:nth-of-type(4) a {
    border: 1px solid #fff;
    font-size: 18px;
}

.searchandfilter h4 {
    text-align: center;
}