﻿.products-highlights-wrapper { padding: 0 var(--global-space-inline) var(--global-plugin-space-large-block) var(--global-space-inline); }
.products-highlights-slider-container { opacity: 0; --cols: 4; --gap: 20px; position: relative; margin-inline: var(--global-space-inline); transition: opacity 0.4s linear; }
.products-highlights-slider-container.loading { opacity: 0; }
.products-highlights-slider-container.loaded { opacity: 1; }
.products-highlights-item { width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1)); position: relative; }
.products-highlights-item:not(:last-child) { margin-right: var(--gap); }
.products-highlights-slider-button .swiper-button-icon { fill: var(--text-color); }
.swiper-button-prev.products-highlights-slider-button { left: calc(var(--global-space-inline) * -1); }
.swiper-button-next.products-highlights-slider-button { right: calc(var(--global-space-inline) * -1); }
.product-highlights-categories { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: var(--global-plugin-space-block); }
.product-highlights-category.active { cursor: default; color: #FFF; background: var(--secondary-color); }
.product-highlights-category { user-select: none; }
.product-highlights-category-icon { display: none; fill: #908f8e; width: auto; height: 22px; }
.product-highlights-category[data-category="1200"] .product-highlights-category-icon { height: 25px; }
.product-highlights-category.active .product-highlights-category-icon { fill: #FFF; }

@media (max-width:1400px) {
    .products-highlights-slider-container { --cols: 3; }
}

@media (max-width:1200px) {
    .products-highlights-slider-container { --gap: 15px; }
    .product-highlights-category { font-size: 1.2rem; }
}

@media (max-width:1023px) {
    .products-highlights-slider-button .swiper-button-icon { display: none; }
    .products-highlights-slider-container { --cols: 2.5; margin-inline: 0; }
    .product-highlights-categories { gap: 10px; }
}

@media (max-width:767px) {
    .product-highlights-category { width: 60px; height: auto; display: flex; justify-content: center; align-items: center; min-width: max-content; }
    .product-highlights-category-icon { display: block; }
    .product-highlights-category-name { display: none; }
}

@media (max-width:640px) {
    .products-highlights-slider-container { --cols: 1.7; }
}

@media (max-width:480px) {
    .products-highlights-slider-container { --cols: 1.4; }
}
