/* Секції без фону і рамок */
.dsf-section {
    margin-bottom: 5px;
    padding: 10px;
    border: none;       /* прибираємо рамку */
    border-radius: 0;   /* прибираємо скруглення */
    background: transparent; /* фон прозорий */
}

/* Зробити картку на 30% ширшою */
.pps-filter-wrapper .pps-wrapper .swiper-slide {
    width: calc(100% / 4 * 1.3) !important; /* 30% ширше ніж стандартне */
    max-width: 350px; /* обмеження щоб не розтягувалось надто */
}


.dsf-section h4 {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #4B0082; /* темно-фіолетовий */
}

/* Секції */
/* Секції без фону і рамок */

.dsf-cat-item input[type="checkbox"],
.dsf-section input[type="checkbox"] {
    accent-color: #6A0DAD; /* яскраво-фіолетовий */
    transform: scale(1.1);
}

/* Ціна */
.dsf-price-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.dsf-price-inputs label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.dsf-price-inputs input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.dsf-price-inputs button,
.dsf-apply {
    background: #6A0DAD;
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dsf-price-inputs button:hover,
.dsf-apply:hover {
    background: #4B0082;
}

/* Слайдер */
#dsf-price-slider {
    height: 6px;
    background: #ddd;
    border-radius: 5px;
    margin-top: 15px;
    position: relative;
}

#dsf-price-slider .ui-slider-range {
    background: #6A0DAD;
    border-radius: 5px;
}

#dsf-price-slider .ui-slider-handle {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #6A0DAD;
    top: -5px;
    cursor: grab;
}

/* Кнопки застосування/скидання */
.dsf-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.dsf-apply {
    flex: 1;
    text-align: center;
}

#dsf-reset {
    flex: 1;
    background: #f5f5f5;
    border: 1px solid #ccc;
    color: #333;
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

#dsf-reset:hover {
    background: #e0e0e0;
}





/* ========== DSF: FLEX-BASED card-width & layout FIX v3 ========== */
/* Goals:
   - Desktop (>=1025px): 4 columns
   - Tablet (641px - 1024px): 3 columns
   - Mobile (<=640px): 2 columns
   This implementation uses flexbox on the product list to avoid pixel-collapse
   when content is replaced via AJAX and to respect JS-driven carousels.
*/

/* Make product lists flex containers that wrap */
ul.products,
.woocommerce ul.products,
.products,
.products-grid,
.pps-filter-wrapper .pps-products,
.pps-filter-wrapper .pps-wrapper .products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Product card: use flex-basis to control columns */
ul.products li.product,
.woocommerce ul.products li.product,
.pps-filter-wrapper .pps-wrapper .pps-filter-wrapper .pps-card,
.pps-filter-wrapper .pps-wrapper .swiper-slide,
div.products .product {
    box-sizing: border-box !important;
    flex: 0 0 calc(25% - 20px) !important; /* desktop: 4 columns */
    max-width: none !important;
    display: block !important;
    vertical-align: top !important;
    margin: 0 !important;
}

/* Ensure swiper slides behave as grid items (if Swiper is used, JS may override widths;
   these rules aim to keep visual consistency) */
.pps-filter-wrapper .pps-wrapper .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Images inside cards stay responsive and fill card width */
ul.products li.product img,
.pps-filter-wrapper .pps-wrapper .swiper-slide img,
.pps-filter-wrapper .pps-card img,
.product .attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
}

/* Inner card full height layout */
ul.products li.product .product-inner,
.pps-filter-wrapper .pps-wrapper .swiper-slide .product-inner,
.pps-filter-wrapper .pps-card .product-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Tablet: 3 columns */
@media (max-width: 1024px) and (min-width: 641px) {
    ul.products li.product,
    .woocommerce ul.products li.product,
    .pps-filter-wrapper .pps-wrapper .pps-filter-wrapper .pps-card,
    .pps-filter-wrapper .pps-wrapper .swiper-slide,
    div.products .product {
        flex: 0 0 calc(33.333333% - 20px) !important;
    }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
    ul.products li.product,
    .woocommerce ul.products li.product,
    .pps-filter-wrapper .pps-wrapper .pps-filter-wrapper .pps-card,
    .pps-filter-wrapper .pps-wrapper .swiper-slide,
    div.products .product {
        flex: 0 0 calc(50% - 12px) !important;
    }
    /* Reduce gaps slightly on very small screens */
    ul.products,
    .woocommerce ul.products {
        gap: 12px !important;
    }
}

/* Prevent flex items from shrinking */
ul.products > li.product,
.woocommerce ul.products > li.product {
    flex-shrink: 0 !important;
}

/* If theme sets product items to inline-block, ensure they stretch */
ul.products li.product,
.woocommerce ul.products li.product {
    min-width: 0 !important;
}

/* End of DSF FIX v3 */