/* Products page styles */

/* ============================================================
   Sidebar is removed on product pages — filters live in the
   top bar rendered by variscite_shop_top_filter_bar().
   ============================================================ */

/* Fallback: hide sidebar in case the layout filter doesn't fire */
#left-sidebar {
    display: none !important;
}

/* Primary area takes full width without the sidebar */
#primary,
.site-content .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    left: auto !important;
}

/* Hide the old mobile filter strip — top bar handles all screens */
.mobile_filter_wrap {
    display: none !important;
}

/* ============================================================
   Top filter bar — dropdowns + active-filter chips
   ============================================================ */

.vari-filter-bar {
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
}

/* --- dropdown row --- */

.vari-filter-dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 27px;
}

.vari-filter-dropdown {
    position: relative;
}

.vari-filter-btn {
    width: 164px;
    height: 50px;
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 14px 15px 16px;
    background: #fff;
    border: 1px solid #C8C8C8;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;

    &:hover,
    &:focus{
        background: none ;
        color: black;
    }
}


/* CSS-only chevron */
.vari-btn-chevron {
    width: 12px;
    height: 10px;
    transition: transform 0.2s;
}

.vari-filter-dropdown.is-open .vari-btn-chevron {
    transform: rotate(-180deg);
}

/* --- dropdown panel --- */

.vari-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 220px;
    width: max-content;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}

.vari-filter-dropdown.is-open .vari-filter-panel {
    display: block;
}

.vari-filter-option {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 4px 16px;
    background: transparent;
    border: none;
    color: #222;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.vari-filter-option:hover, .vari-filter-option:focus {
    background: #F6F6F6;
    color: #222;
    text-decoration: none;
}

.vari-filter-option.is-checked {
    color: rgba(33, 37, 41, 0.5);
}

/* --- active-filter chips row --- */

.vari-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.vari-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 30px;
    font-size: 12px;
    background: #F1F1F1;
}

.vari-chip-remove {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.vari-chip-remove:hover,
.vari-chip-remove:focus{
    background: none;
    color: #000;
    text-decoration: none;
}

.vari-filter-clear {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid black;
    border-radius: 30px;
    font-size: 12px;
    color: black;
    background: transparent;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;

    &:hover,
    &:focus{
        background: none;
        color: black;
        text-decoration: none;
    }
}


/* ============================================================
   Mobile-only elements — hidden on desktop by default
   ============================================================ */

.vari-mobile-filter-section {
    display: none;
}



/* ============================================================
   Result count row — count left, view-toggle buttons right
   ============================================================ */

.wc_result_count_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.woocommerce-result-count {
    margin: 0 !important;
    font-size: 20px;
    font-weight: 600;
}

/* View-toggle button group */
.vari-view-toggle {
    display: flex;
    display: none;
    align-items: center;
    gap: 30px;
}

@media (max-width: 768px) {
    .vari-view-toggle {
        display: none;
    }
}

.vari-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}


.vari-view-btn:hover, .vari-view-btn:focus {
    background: transparent;
}

.vari-view-btn:not(.active) {
    filter: brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(1606%) hue-rotate(233deg) brightness(103%) contrast(90%);
}

/* ============================================================
   List view — 2 columns, horizontal card layout
   ============================================================ */

/* .products.list-view {
    .product {
        width: calc(50% - 15px) !important;
        height: 300px;
        padding: 37px 34px !important;
        align-items: stretch !important;

        .woocommerce-loop-product__link {
            display: grid !important;
            grid-template-columns: 250px 1fr;
            grid-template-rows: auto 1fr;
            gap: 20px 47px;
            flex: 1;
            width: 100%;
            color: black;

            .wc-product-image {
                grid-column: 1;
                grid-row: 1 / 3;
                width: auto !important;
                height: auto !important;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 !important;

                .inside-wc-product-image {
                    height: 160px !important;
                    margin: 0 !important;
                    width: 100%;

                    img {
                        transform: rotate(-22.57deg);
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }

            .wc-product-name-price {
                grid-column: 2;
                grid-row: 1;
                flex-direction: column-reverse !important;
                gap: 20px !important;
                margin: 0 !important;
                align-self: start;

                .woocommerce-loop-product__title {
                    height: auto !important;
                    font-size: 20px;
                }

                .price {
                    font-size: 15px !important;
                }

                .amount {
                    font-size: 20px !important;
                }
            }

            .product_short_description {
                grid-column: 2;
                grid-row: 2;
                align-self: start;
                -webkit-line-clamp: 4;
            }
        }

        .add_to_cart_button {
            font-size: 18px !important;
            margin-top: -50px !important;
            margin-left: 297px;
        }
    }
} */

/* ============================================================
   Existing layout
   ============================================================ */

.home .inside-article{
    max-width: 1420px;
    width: 100%;
}
/* .products{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 30px;
    margin-left: 0 !important;

    &::before{
        display: none !important;
    }

    .product {
        width: calc(33.33% - 20px) !important;
        height: 554px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #F0F0F0;
        padding: 44px 36px 55px !important;
        margin : 0 !important;


        .woocommerce-loop-product__link {
            display: flex !important;
            flex-direction: column;
            gap: 20px;
            color: black;
            width: 100%;

            .wc-product-image{
                width: 100%;
                height: auto;

                .inside-wc-product-image{
                    height: 132px;
                    margin: 25px;

                    img{
                        width: 100%;
                        transform: rotate(-22.57deg);
                        height: 100%;
                        object-fit: contain;
                    }

                    .secondary-image{
                        display: none;
                    }
                }
            }

            .wc-product-name-price{
                display: flex;
                flex-direction: column-reverse;
                gap: 20px;
                margin: 0 !important;

                .woocommerce-loop-product__title{
                    height: 44px;
                    font-weight: 600;
                }

                .price{
                    display: inline-flex;
                    gap: 7px;
                    font-size: 15px;
                    font-weight: 400;
                    align-items: center;
                    margin: 0;
                }

                .amount{
                    font-weight: 600;
                    font-size: 20px;
                    color: #FF5F46;
                }
            }

            .product_short_description{
                margin: 0 !important;
                overflow: hidden;       
                display: -webkit-box;
                -webkit-line-clamp: 5;  
                -webkit-box-orient: vertical;

                p{
                    margin: 0 !important;
                }
            }

           

        }

        .add_to_cart_button{
            display: flex !important;
            align-items: center;
            color: black;
            background: no-repeat;
            gap: 10px;
            font-size: 20px;
            font-weight: 600;
            align-self: flex-start;
            padding: 0;
            margin-top: auto !important;

            &:hover{
                background: none !important;
                border: none !important;
                color: black !important;
                gap: 25px !important;
                transition: gap 0.3s ease-in-out !important;
            }

            .order-arrow{
                width: 15px;
                height: 11px;
                margin-top: 3px;
                margin-bottom: 0;
            }
        }
    }
}
 */


/* ============================================================
   Mobile filter — inline collapsible bar  (≤ 600px)
   ============================================================ */

   @media (max-width: 768px) {

    .products{
        .product {
            height: 507px !important;
            padding: 20px 38px 25px !important;
    
            .woocommerce-loop-product__link {
                gap: 15px !important;
            }
    
            .wc-product-name-price{
                gap: 15px !important;
            }
        }
    } 

    .vari-filter-bar{
        margin-bottom: 50px;
    }

    .wc_result_count_wrap{
        margin-bottom: 50px;
    }

    .woocommerce-result-count{
        font-size: 16px;
    }

    /* Hide desktop dropdown buttons */
    .vari-filter-dropdowns {
        display: none;
    }

    /* Show mobile section */
    .vari-mobile-filter-section {
        display: block;
        margin-bottom: 20px;
        background: #fff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
        border-radius: 0.375rem;
    }

    /* ── Header row (always visible) ───────────────────────────── */
    .vari-mobile-filter-header {
        width: 100%;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        

        &:hover,
        &:focus{
            background: white;
        }
    }

    .vari-mobile-header-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .vari-mobile-search-icon {
        flex-shrink: 0;
        display: block;
        display: none;
    }

    .vari-mobile-header-divider {
        display: block;
        width: 1px;
        height: 22px;
        background: #C8C8C8;
        flex-shrink: 0;
        display: none;
    }

    .vari-mobile-header-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 20px;
        font-weight: 600;
        color: black;
    }

    .vari-mobile-header-chevron {
        width: 16px;
        height: 16px;
        transition: transform 0.22s ease;
        flex-shrink: 0;
    }

    .vari-mobile-filter-section.is-open .vari-mobile-header-chevron {
        transform: rotate(-180deg);
    }

    /* ── Expandable panel ───────────────────────────────────────── */
    .vari-mobile-filter-panel {
        display: none;
        padding: 0 30px 40px;
    }

    .vari-mobile-filter-section.is-open .vari-mobile-filter-panel {
        display: block;
    }

    /* ── Individual filter group row ────────────────────────────── */
    .vari-mobile-filter-group {
        margin-top: 25px;

        &:first-child{
            margin-top: 14px;
        }
    }

    .vari-mobile-group-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid #C8C8C8;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #222;
        cursor: pointer;
        text-align: left;

        &:hover,
        &:focus{
            background: none ;
            color: black;
        }
    }

    .vari-mobile-group-chevron {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .vari-mobile-filter-group.is-open .vari-mobile-group-chevron {
        transform: rotate(-180deg);
    }

    .vari-mobile-group-options {
        display: none;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.175);
        padding: 8px 0;
        margin-top: 4px;
    }

    .vari-mobile-filter-group.is-open .vari-mobile-group-options {
        display: block;
    }

    /* ── Action buttons ─────────────────────────────────────────── */
    .vari-mobile-filter-actions {
        display: flex;
        display: none;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

    .vari-mobile-show-btn,
    .vari-mobile-clear-filters-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 52px;
        border-radius: 50px;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #222;
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
    }

    .vari-mobile-show-btn {
        border: 2px solid #3ECFC9;
    }

    .vari-mobile-show-btn:hover {
        background: rgba(62, 207, 201, 0.06);
    }

    .vari-mobile-clear-filters-btn {
        border: 2px solid #222;
    }

    .vari-mobile-clear-filters-btn:hover {
        color: #222;
        text-decoration: none;
        background: rgba(0, 0, 0, 0.04);
    }

    /* ── Chip row — smaller text on mobile ──────────────────────── */
    .vari-filter-chip,
    .vari-filter-clear {
        font-size: 12px;
    }

    .add_to_cart_button {
        font-size: 18px;
    }
}

.vari-no-products-message {
    line-height: 36px;
    margin-bottom: 40px;
    letter-spacing: 1%; 
    font-size: 1.125em;
    font-weight: 600;
}

/* ============================================================
   Products filter loader — small spinner next to filter bar
   ============================================================ */

.vari-products-loader {
    display: none;
    position: fixed;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-50%);
}

.vari-products-loader.is-active {
    display: flex;
}

.vari-products-loader__spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #e0e0e0;
    border-top-color: #222;
    border-radius: 50%;
    animation: vari-spin 0.75s linear infinite;
}

@keyframes vari-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Product image size fix — overrides GP Premium width:auto
   for image-align-left/right/center so images always fill
   their .wc-product-image container and never overflow it,
   whether the products were rendered on page-load or via AJAX.
   ============================================================ */

.woocommerce ul.products li.product .wc-product-image,
.woocommerce ul.products li.product .inside-wc-product-image {
    overflow: hidden;
}

/* Same selector specificity as GP Premium's rule — wins by source order
   because page-products.css is enqueued at priority 700 (after all other sheets). */
.woocommerce ul.products li.product.woocommerce-image-align-left a .wc-product-image img,
.woocommerce ul.products li.product.woocommerce-image-align-right a .wc-product-image img,
.woocommerce ul.products li.product.woocommerce-image-align-center a .wc-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}