.archive-products { display: flex; gap: 30px; margin-bottom: 30px; }
.archive-products .filters-container,
.archive-products .product-filters .filter-header { display: none; }
.archive-products .products-wrapper { flex: 1; }
.archive-products .product-filters { min-width: 20%; padding-right: 10px; }

.products-container { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.products-container .single-product { width: 20%; padding: 0 15px; margin-bottom: 30px; }
.products-container .product-container { display: flex; height: 100%; flex-direction: column; gap: 20px; }
.products-container .product-image-container { position: relative; border-radius: 10px; width: 100%; }
.products-container .product-image-container img { margin: 0; padding: 0; vertical-align: middle; transition: .2s; border-radius: 10px; object-fit: cover; width: 100%; height: auto; }
.products-container .product-image-container:hover img { transform: scale(1.05); }
.products-container .stock-overlay { position: absolute; top: 0; left: 0; right: 0; padding: 10px; background: rgba(0,0,0,.75); text-align: center; font-size: 20px; font-weight: 700; border-radius: 10px 10px 0 0; }
.products-container .out-of-stock .product-image-container { filter: grayscale(1); }
.products-container .product-title { font-size: 1.1em; font-weight: 400; transition: .1s; margin: 0 0 20px 0; }
.products-container .product-info-container { text-align: center; padding: 15px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.products-container .product-price { font-size: 1.1em; color: #ffffff; font-weight: 500; margin: 0; }

body.term-new-products .products-container { max-width: 1230px; margin: 0 auto; }

.product-filters .filter-group { padding: 20px; margin-bottom: 20px; }
.product-filters .filter-name { margin: 0 0 12px 0; font-size: 20px; }
.product-filters ul { margin: 0; padding: 0; }
.product-filters li { list-style: none; padding: 4px 0 4px 24px; position: relative; cursor: pointer; transition: .1s; }
.product-filters li::before { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -7px; border: 2px solid #354F9C; border-radius: 3px; }
.product-filters li.selected { font-weight: 700; }
.product-filters li.selected::after { content: "\2713"; color: #4CAF50; font-size: 20px; position: absolute; left: 1px; top: 50%; transform: translateY(-55%); }

.pagination-container { display: flex; justify-content: center; gap: 8px; align-items: center; margin-top: 10px; }
.pagination-container > span,
.pagination-container > a { padding: 12px 12px; font-size: 1.1em; }
.pagination-container > span.current-page { font-weight: 700; }

@media screen and (max-width: 1024px) {
    .products-container .single-product { width: 33.3%; }
}
@media screen and (max-width: 768px) {
    .archive-products { flex-direction: column; }
    .archive-products .filters-container { display: block; }
    .archive-products .product-filters .filter-header { padding: 15px 15px 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #354F9C; }
    .archive-products .product-filters .filter-header h2 { font-size: 24px; text-transform: uppercase; margin: 0; }
    .archive-products .product-filters .filter-header button { background: transparent; border: none; color: #fff; padding: 0; }
    .filter-button { background: transparent; text-transform: uppercase; padding: 12px 24px; color: #fff; border: none; font-weight: 700; width: 100%; }

    .off-canvas-filters { position: fixed; top: 0; left: -100%; z-index: 999999; background: #0a1128; height: 100vh; width: 400px; max-width: 80%; box-shadow: 0px 0px 9px #354F9C, 0px 0px 9px #354F9C, 0px 0px 9px #354F9C; overflow-y: scroll; padding-bottom: 40px; transition: .2s; }
    .off-canvas-filters.product-filters .filter-group { box-shadow: none; border-bottom: 1px solid #354F9C; margin-bottom: 0; padding: 30px; }
    .off-canvas-filters.offcanvas-active { left: 0; }

    .products-container .product-title,
    .products-container .product-price { font-size: 1em; }
    
    body.admin-bar .off-canvas-filters { top: 46px; }
}
@media screen and (max-width: 480px) {
    .products-container .single-product { width: 50%; }
}
@media screen and (max-width: 360px) {
    .products-container .single-product { width: 100%; }
}