.products_carousel {
background: var(--cream);
& > .container {
padding-top: clamp(56px, 8vw, 110px);
padding-bottom: clamp(56px, 8vw, 110px);
}
& .products_carousel_head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: clamp(16px, 3vw, 32px);
}
& .products_carousel_head .eyebrow {
margin: 0 0 8px;
}
& .products_carousel_title {
margin: 0;
}
& .products_carousel_intro {
margin-top: 6px;
color: var(--text);
} & .products_carousel_rail {
margin: 0 -10px;
& .slick-slide {
margin: 0 10px;
height: auto;
}
& .slick-track {
display: flex;
}
& .slick-slide > div {
height: 100%;
}
} & .products_carousel_item {
height: 100%;
} & .products_carousel_rail:not(.slick-initialized) {
display: flex;
gap: 20px;
overflow: hidden;
& .products_carousel_item {
flex: 0 0 calc(25% - 15px);
}
} @media (prefers-reduced-motion: no-preference) {
& .products_carousel_rail.reveal_slides .slick-slide {
opacity: 0;
transform: translateY(28px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
& .products_carousel_rail.reveal_slides.in .slick-slide {
opacity: 1;
transform: none;
}
& .products_carousel_rail.reveal_slides.in .slick-slide:nth-child(2) { transition-delay: .07s; }
& .products_carousel_rail.reveal_slides.in .slick-slide:nth-child(3) { transition-delay: .14s; }
& .products_carousel_rail.reveal_slides.in .slick-slide:nth-child(4) { transition-delay: .21s; }
& .products_carousel_rail.reveal_slides.in .slick-slide:nth-child(5) { transition-delay: .28s; }
& .products_carousel_rail.reveal_slides.in .slick-slide:nth-child(6) { transition-delay: .35s; }
} & .products_carousel_card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
text-decoration: none;
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
&:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
}
& .products_carousel_media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
flex: none; & .products_carousel_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
}
& .products_carousel_card:hover .products_carousel_image {
transform: scale(1.05);
}
& .products_carousel_badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
background: var(--white);
color: var(--ink);
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: var(--radius-pill);
&.sale {
background: var(--rose-deep);
color: var(--white);
animation: bf_badge_pulse 2.2s ease-in-out infinite;
}
}
& .products_carousel_heart {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
display: grid;
place-content: center;
cursor: pointer;
transition: background-color .2s var(--ease);
& .spk-icon {
font-size: 15px;
color: var(--ink);
transition: color .2s var(--ease);
}
&:hover {
background: var(--white);
} &.is_active {
background: var(--rose);
& .spk-icon {
color: var(--white);
}
}
}
& .products_carousel_quick {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 2;
background: var(--rose-deep);
color: var(--white);
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 12px;
border-radius: var(--radius-pill);
opacity: 0;
transform: translateY(10px);
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
& .products_carousel_card:hover .products_carousel_quick {
opacity: 1;
transform: translateY(0);
}
& .products_carousel_meta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 16px 18px 20px;
} & .products_carousel_botrow {
margin-top: auto;
}
& .products_carousel_brand {
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--rose-deep);
font-weight: 600;
}
& .products_carousel_name {
font-family: "Belleza", serif;
font-size: 18px;
color: var(--ink);
margin: 4px 0 8px;
line-height: 1.25; min-height: 2.5em;
}
& .products_carousel_botrow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
& .products_carousel_price {
font-weight: 600;
color: var(--ink);
white-space: nowrap;
& del,
& del .amount {
color: #b0a8a3;
font-weight: 400;
margin-right: 6px;
}
& ins {
text-decoration: none;
}
}
& .products_carousel_sizes {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
& span {
font-size: 10.5px;
font-weight: 600;
color: var(--rose-deep);
border: 1px solid var(--line);
border-radius: 6px;
padding: 3px 6px;
line-height: 1;
}
}
& .products_carousel_swatches {
display: flex;
gap: 5px;
margin-top: 9px;
& i {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid var(--line);
display: inline-block;
}
} & .products_carousel_arrows {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 28px; &.is_hidden {
display: none;
}
& button {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--line);
background: var(--white);
color: var(--ink);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
&:hover {
background: var(--rose);
border-color: var(--rose);
color: var(--white);
}
&.slick-disabled {
opacity: .4;
cursor: default;
}
}
}
@media (prefers-reduced-motion: reduce) {
& .products_carousel_badge.sale {
animation: none;
}
}
}