.swiper-subcategories-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
width: 100%;
}
.swiper-subcategories {
width: 88%;
}
.swiper-subcategories .swiper-wrapper {
width: auto !important;
margin-left: 0;
align-items: start!important;
padding-bottom: 10px;
}
.swiper-subcategories .swiper-wrapper.centered-swiper {
justify-content: center!important;
}
.swiper-subcategories .swiper-slide {
text-align: center;
width: 125px;
flex-shrink: 0;
}
.category-image {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background-color: #fff;
}
.category-image img {
padding:15px;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.category-title {
margin-top: 8px;
font-size: 12px;
font-weight: 500;
white-space: normal;
word-break: break-word;
text-align: center;
line-height: 1.2;
}
.custom-swiper-arrow {
width: 48px;
height: 48px;
background-color: white;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s;
flex-shrink: 0;
}
.custom-swiper-arrow:hover {
background-color: #f2f2f2;
color:#fed700;
}
.custom-swiper-arrow:after{
display:none;
}
.swiper-button-disabled.swiper-button-lock{
display:none;
}
.subcategories-menu {
display: none;
}
.subcategory-menu-container .subcategories-menu {
display: flex;
flex-wrap: wrap;
justify-content: center; align-items: flex-start; width: 100%;
gap: 20px;
padding: 20px 0;
border-top: 1px solid #eee;
text-align: center;
}
.subcategory-item {
display: flex;
width:80px;
flex-direction: column;
align-items: start!important;
justify-content: center!important;
}
.subcategory-item a{
text-align: center!important;
width:80px;
min-width:80px;
max-width:80px;
}
.subcategory-image {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background-color: #fff;
}
.subcategory-image img {
padding:5px;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.subcategory-item span {
display: block;
text-align: center;
font-size: 12px;
margin-top: 5px;
}
@media (max-width: 991px) {
.custom-swiper-arrow {
display: none;
}
}