/* ==========================================================================
   1. DESKTOP GRID LAYOUT (Modern CSS Grid Framework & Equal Heights)
   ========================================================================== */
/* Re-engineers the container into a bulletproof 4-column modern grid */
.woocommerce .oss-archive-products ul.products {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: 23% 23% 23% 23% !important; 
    grid-template-columns: repeat(4, 23%) !important; /* Strict 23% layout widths */
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;       /* Clean edge-to-edge calculation */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Strips legacy float markers and establishes equal vertical spacing rules */
.woocommerce .oss-archive-products ul.products li.product {
    width: 100% !important;                     /* Inherits the parent grid channel width */
    margin: 0 0 30px 0 !important;                /* Enforced 3% bottom margin space between rows */
    float: none !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;

    /* Configures inner block alignment to lock action items downward */
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}

/* Removes outdated layout clearance strings from older themes */
.woocommerce .oss-archive-products ul.products::before,
.woocommerce .oss-archive-products ul.products::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   2. PRODUCT CARD ELEMENTS & BRAND IDENTITY
   ========================================================================== */
/* Primary Action Button - Automatically locked to the floor of each card */
.woocommerce .oss-archive-products ul.products li.product a.button {
    color: #451488 !important;              /* Brand Deep Purple */
    padding: 10px 15px !important;
    background: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-family: 'Roboto Condensed' !important;
    position: relative !important;
    border-radius: 10px !important;
    border: 2px solid #451488 !important;
    -webkit-transition: 0.2s ease all !important;
    transition: 0.2s ease all !important;

    /* Auto spacing drops button straight to card floor */
    margin-top: auto !important;
    display: block !important;
    text-align: center !important;
}

/* Hover State - Seamless transition to Terracotta Orange */
.woocommerce .oss-archive-products ul.products li.product a.button:hover {
    color: #ffffff !important;              
    border-color: #451488 !important;
    background-color: #451488 !important;
}

/* Typography Customizations */
.woocommerce .oss-archive-products ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Roboto Condensed' !important;
    color: #3C3D3E !important;
    font-size: 18px !important;
}

.woocommerce .oss-archive-products ul.products li.product .price {
    font-family: 'Open Sans' !important;
    color: #451488 !important;                   /* Highlights price context with brand purple */
    margin-bottom: 15px !important;             /* Creates safety buffer space above button */
}

/* On-Sale Product Badge Accent */
.woocommerce .oss-archive-products span.onsale {
    background: #D45B34 !important;              /* Matches Terracotta theme accent */
    padding: 2px 11px !important;
}

/* ==========================================================================
   3. PAGINATION INTERACTION
   ========================================================================== */
.woocommerce .oss-archive-products nav.woocommerce-pagination ul li {
    border: unset !important;
    font-family: 'Open Sans' !important;
}

.woocommerce .oss-archive-products nav.woocommerce-pagination ul li a:hover {
    background: #e0e0e0 !important;
}

.woocommerce .oss-archive-products nav.woocommerce-pagination ul li a,
.woocommerce .oss-archive-products nav.woocommerce-pagination ul li span.current {
    color: #3C3D3E !important;
}

.woocommerce .oss-archive-products nav.woocommerce-pagination ul {
    border: unset !important;
}

.woocommerce .oss-archive-products nav.woocommerce-pagination ul li span.current {
    background: unset !important;
    font-weight: 800 !important;
    color: #451488 !important;                   /* Highlights active page index in purple */
}

/* ==========================================================================
   4. SIDEBAR FILTER STYLING & PRICE FILTER OVERFLOW FIXES
   ========================================================================== */
.oss-archive-sidebar li.widget {
    list-style: none !important;
}

.oss-archive-sidebar h3.wp-block-heading {
    color: #3f3f3f !important;
    font-family: "Roboto Condensed", Sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
}

.oss-archive-sidebar ul.wp-block-categories-list {
    list-style: none !important;
    padding-left: 0 !important;
}

.oss-archive-sidebar ul.wp-block-categories-list ul {
    list-style: none !important;
}

.oss-archive-sidebar ul.wp-block-categories-list li a {
    color: #3f3f3f !important;
    font-family: "Open Sans" !important;
    font-size: 16px !important;
}

/* Sidebar focus indicators */
.oss-archive-sidebar ul.wp-block-categories-list li.current-cat > a,
.oss-archive-sidebar ul.wp-block-categories-list li a:hover {
    color: #451488 !important;
    font-weight: 600 !important;
}

.oss-archive-sidebar ul.children {
    padding-left: 20px !important;
}

/* CRITICAL: Enforce rigid constraints on the price tracking element boxes */
.oss-archive-sidebar,
.oss-archive-sidebar li.widget,
.oss-archive-sidebar div.widget_price_filter,
.oss-archive-sidebar .wp-block-woocommerce-price-filter,
div.wp-block-woocommerce-product-filter-price-slider,
.wc-block-product-filter-price {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;                     /* Removes hidden minimum layout thresholds */
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* Hard containment reset directly on the sliding track layers */
.oss-archive-sidebar .price_slider,
.oss-archive-sidebar .price_slider_wrapper,
.wc-block-price-filter__range-input-wrapper,
.wc-block-product-filter-price-slider__range-input-wrapper,
.wc-block-price-filter__range-input,
.wc-block-product-filter-price-slider__range-input {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* Ensures sliding tracks adjust dynamically to fit your column */
.oss-archive-sidebar .ui-slider-horizontal,
.wc-block-price-filter__range-input::-webkit-slider-runnable-track {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* Flex layout setup for the input elements sitting below the slider track line */
.oss-archive-sidebar .price_slider_amount,
.wc-block-price-filter__controls,
.wc-block-product-filter-price__controls {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

/* Formats number field boxes to scale smoothly within narrower sidebar widths */
.oss-archive-sidebar .price_slider_amount input,
.wc-block-price-filter__controls input,
.wc-block-product-filter-price__controls input,
.wc-block-price-filter__amount {
    width: 45% !important;                       /* Retains side-by-side positioning without layout leaks */
    max-width: 45% !important;
    min-width: 50px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   5. HOVER ARCHIVE CATEGORIES BLOCK (If applicable)
   ========================================================================== */
.oss-categories ul.products.elementor-grid li.product-category {
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 0px 10px #00000033 !important;
    box-shadow: 0px 0px 10px #00000033 !important;
    -webkit-transition: 0.2s ease all !important;
    transition: 0.2s ease all !important;
}

.oss-categories ul.products.elementor-grid li.product-category:hover {
    -webkit-box-shadow: 0px 0px 20px #0000005e !important;
    box-shadow: 0px 0px 20px #0000005e !important;
}

.oss-categories:not(.oss-cat-noheader) ul.products.elementor-grid li.product-category h2.woocommerce-loop-category__title {
    padding: 0 20px 15px !important;
}

.oss-cat-noheader ul.products.elementor-grid li.product-category img {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   6. RESPONSIVE BREAKPOINTS (Tablets & Mobile Grid Controls)
   ========================================================================== */
/* Tablet Interface: Switches the grid from 4 columns straight down to 2 columns */
@media screen and (max-width: 992px) {
    .woocommerce .oss-archive-products ul.products {
        -ms-grid-columns: 48% 3% 48% !important;
        grid-template-columns: repeat(2, 48%) !important;
        -webkit-column-gap: 3%;
        -moz-column-gap: 3%;
        column-gap: 3%;
        row-gap: 20px;
    }
    .oss-archive-products nav.woocommerce-pagination {
        margin-top: 20px;
    }
    .woocommerce .oss-archive-products ul.products li.product {
        margin-bottom: 4% !important;
    }
}

@media screen and (max-width: 767px) {
    .oss-archive-sidebar button.wc-block-product-filters__open-overlay span {
        font-size: 16px;
        font-weight: 400;
    }

    .oss-archive-sidebar button.wc-block-product-filters__open-overlay {
        padding: 10px 15px;
    }
    
    .oss-archive-sidebar button.wc-block-product-filters__close-overlay,
    .oss-archive-sidebar button.wc-block-product-filters__apply {
        padding: 10px 15px;
        font-size: 16px;
    }

    .oss-archive-sidebar button.wc-block-product-filters__close-overlay:hover,
    .oss-archive-sidebar button.wc-block-product-filters__apply:hover {
        background: #ffffff;
        color: #451488;
    }
}

@media screen and (max-width: 767px) and (min-width: 600px) {
    .oss-categories-container {
        -ms-flex-wrap: unset !important;
        flex-wrap: unset !important;
        -webkit-column-gap: 40px !important;
        -moz-column-gap: 40px !important;
        column-gap: 40px !important;
    }

    .oss-category-left {
        width: 30% !important;
    }

    .oss-category-right {
        width: 70% !important;
    }
}

/* Phone Interface: Flattens the grid down into a crisp 1-column card stack */
@media screen and (max-width: 599px) {
    .woocommerce .oss-archive-products ul.products li.product {
        margin-bottom: 25px !important;
    }
    
    .woocommerce .oss-archive-products ul.products {
        -ms-grid-columns: 47% 5% 47% !important;
        grid-template-columns: repeat(2, 47%) !important;
        -webkit-column-gap: 5%;
        -moz-column-gap: 5%;
        column-gap: 5%;
        row-gap: 10px;
    }
}

@media screen and (max-width: 374px) {
    .woocommerce .oss-archive-products ul.products {
        grid-template-columns: repeat(1, 100%) !important;
        -ms-grid-columns: 100% !important;
    }
}