.onglets-produits {
margin-bottom: var(--wp--preset--spacing--6);
}
.onglets-produits .onglets-navigation {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--1);
margin-bottom: var(--wp--preset--spacing--4);
}
.onglets-produits .onglets-navigation .wp-block-button .wp-block-button__link {
padding-left: var(--wp--preset--spacing--2);
padding-right: var(--wp--preset--spacing--2);
background-color: var(--wp--preset--color--custom-blanc);
color: var(--wp--preset--color--custom-rose);
border: 1px solid var(--wp--preset--color--custom-rose);
font-size: var(--wp--preset--font-size--3);
transition: all 0.3s ease;
}
.onglets-produits .onglets-navigation .wp-block-button .wp-block-button__link:hover,
.onglets-produits .onglets-navigation .wp-block-button .wp-block-button__link.active {
background-color: var(--wp--preset--color--custom-rose)!important;
color: var(--wp--preset--color--custom-blanc)!important;
}
.onglets-produits .onglet-panel {
display: none;
}
.onglets-produits .onglet-panel.active {
display: flex;
gap: var(--wp--preset--spacing--4);
}
.onglets-produits .onglet-contenu-wrapper {
flex: 1;
}
.onglets-produits .onglet-titre {
font-size: var(--wp--preset--font-size--5);
font-weight: 600;
margin-bottom: var(--wp--preset--spacing--3);
color: var(--wp--preset--color--custom-noir);
}
.onglets-produits .onglet-texte {
font-size: var(--wp--preset--font-size--2);
margin-bottom: var(--wp--preset--spacing--3);
}
.onglets-produits .onglet-texte ul {
color: var(--wp--preset--color--custom-rose);
font-size: var(--wp--preset--font-size--3);
font-weight: 400;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--1);
margin-top: var(--wp--preset--spacing--2);
}
.onglets-produits .onglet-contenu-wrapper .wp-block-buttons {
margin-top: var(--wp--preset--spacing--3);
} .onglets-produits .onglet-produits-slider {
width: 100%;
flex: 0 0 62.5%;
position: relative;
padding-bottom: var(--wp--preset--spacing--4);
}
.onglets-produits .produit {
display: flex;
flex-direction: column;
width: 100%;
}
.onglets-produits .produit-image-wrapper {
position: relative;
overflow: hidden;
} .onglets-produits .coups-de-coeur {
position: absolute;
z-index: 2;
top: var(--wp--preset--spacing--2);
left: var(--wp--preset--spacing--2);
pointer-events: none;
}
.onglets-produits .coups-de-coeur img {
position: absolute;
top: 0;
left: 0;
width: 59px;
height: 59px;
}
.onglets-produits .produit .wp-post-image {
width: 100%;
height: auto;
aspect-ratio: 396/500;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.onglets-produits .produit-image-wrapper:hover .wp-post-image {
transform: scale(1.05);
}
.onglets-produits .produit h4 {
margin: var(--wp--preset--spacing--2) 0 0;
font-size: var(--wp--preset--font-size--3);
font-weight: 600;
color: var(--wp--preset--color--custom-noir);
}
.onglets-produits .produit-buttons {
position: absolute;
bottom: var(--wp--preset--spacing--2);
left: var(--wp--preset--spacing--2);
opacity: 0;
transform: translateY(100%);
transition: all 0.3s ease;
z-index: 2;
}
.onglets-produits .produit-image-wrapper:hover .produit-buttons {
opacity: 1;
transform: translateY(0);
}
.onglets-produits .produit-buttons .wp-block-button__link {
border: 1px solid var(--wp--preset--color--custom-rose);
background-color: var(--wp--preset--color--custom-rose);
}
.onglets-produits .produit-buttons .wp-block-button__link:hover {
background-color: var(--wp--preset--color--custom-blanc)!important;
color: var(--wp--preset--color--custom-rose)!important;
} .onglets-produits .produit-sans-lien .produit-image-wrapper {
cursor: default;
}
.onglets-produits .produit-sans-lien .produit-image-wrapper:hover .wp-post-image {
transform: none;
}
.onglets-produits .produit-sans-lien .produit-image-wrapper .produit-buttons {
display: none;
}
.onglets-produits .produit-sans-lien h4 span {
cursor: default;
} .onglets-produits .swiper-button-prev,
.onglets-produits .swiper-button-next {
width: 52px;
height: 30px;
margin-top: 0;
top: auto;
bottom: 0px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.onglets-produits .swiper-button-prev {
left: 0;
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-rose.svg);
transform: rotate(180deg);
}
.onglets-produits .swiper-button-next {
right: 0;
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-rose.svg);
}
.onglets-produits .swiper-button-prev:after,
.onglets-produits .swiper-button-next:after {
display: none;
}
.onglets-produits .swiper-button-prev:hover,
.onglets-produits .swiper-button-next:hover {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-rose-hover.svg);
}
.onglets-produits .swiper-pagination {
position: static;
text-align: center;
height: 30px;
padding-top: 18px;
border-top: 1px solid var(--wp--preset--color--custom-rose);
}
.onglets-produits .swiper-pagination-bullet {
background: var(--wp--preset--color--custom-rose);
opacity: 0.3;
width: 12px;
height: 12px;
margin: 0 6px;
}
.onglets-produits .swiper-pagination-bullet-active {
opacity: 1;
background: var(--wp--preset--color--custom-rose);
}
@media (max-width: 768px) {
.onglets-produits .onglets-navigation {
gap: 8px;
margin-bottom: var(--wp--preset--spacing--2);
}
.onglets-produits .onglets-navigation .wp-block-button .wp-block-button__link {
font-size: var(--wp--preset--font-size--2);
padding-left: 16px;
padding-right: 16px;
}
.onglets-produits .onglet-panel.active {
flex-direction: column;
gap: var(--wp--preset--spacing--4);
}
.onglets-produits .onglet-produits-slider {
padding-bottom: var(--wp--preset--spacing--2);
}
.onglets-produits .swiper-pagination {
margin-top: var(--wp--preset--spacing--2);
}
.onglets-produits .coups-de-coeur img {
width: 40px;
height: 40px;
}
}