@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600&display=swap"); .leger-srp,
.leger-srp *{
box-sizing:border-box;
}
.leger-srp{
--srp-font-display:Cabin, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--srp-font-body:Cabin, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--srp-ink:#0a0a0a;
--srp-muted:rgba(10,10,10,.56);
--srp-gap:1px;
--srp-title-w:clamp(180px, 15.5vw, 270px);
--srp-card-w:clamp(320px, calc((100vw - var(--srp-title-w) - 82px) / 2.5), 660px);
width:100%;
padding:0 clamp(18px,1.7vw,30px);
overflow:hidden;
color:var(--srp-ink);
font-family:var(--srp-font-body); margin-top:clamp(54px,5.3vw,84px);
margin-bottom:clamp(42px,4vw,64px);
} .leger-srp--complete{
margin-bottom:clamp(20px,2vw,34px);
}
.leger-srp--fall{
margin-top:clamp(24px,2.4vw,42px);
} .leger-srp + .leger-srp{
margin-top:clamp(18px,1.8vw,32px);
}
.leger-srp__layout{
display:grid;
grid-template-columns:var(--srp-title-w) minmax(0, 1fr);
gap:clamp(14px,1.1vw,20px);
align-items:start;
}
.leger-srp--complete .leger-srp__layout{
grid-template-columns:minmax(0, 1fr) var(--srp-title-w);
}
@media (min-width:1025px){
.leger-srp--count-1 .leger-srp__layout,
.leger-srp--count-2 .leger-srp__layout,
.leger-srp--count-3 .leger-srp__layout{
display:inline-grid;
width:auto;
max-width:100%;
align-items:start;
}
.leger-srp--fall.leger-srp--count-1 .leger-srp__layout,
.leger-srp--fall.leger-srp--count-2 .leger-srp__layout,
.leger-srp--fall.leger-srp--count-3 .leger-srp__layout{
grid-template-columns:var(--srp-title-w) auto;
}
.leger-srp--complete.leger-srp--count-1 .leger-srp__layout,
.leger-srp--complete.leger-srp--count-2 .leger-srp__layout,
.leger-srp--complete.leger-srp--count-3 .leger-srp__layout{
grid-template-columns:auto var(--srp-title-w);
}
.leger-srp--count-1 .leger-srp__rail,
.leger-srp--count-2 .leger-srp__rail,
.leger-srp--count-3 .leger-srp__rail{
width:auto;
max-width:calc(100vw - var(--srp-title-w) - 70px);
}
}
.leger-srp__intro{
position:relative;
z-index:3;
align-self:start;
padding-top:clamp(20px,1.9vw,30px);
opacity:0;
transform:translateY(12px);
transition:opacity .74s cubic-bezier(.19,1,.22,1), transform .74s cubic-bezier(.19,1,.22,1);
}
.leger-srp.is-in .leger-srp__intro{
opacity:1;
transform:translateY(0);
}
.leger-srp__label{
display:block;
margin:0 0 clamp(14px,1vw,18px);
font-family:var(--srp-font-body);
font-size:7.8px;
font-weight:400;
line-height:1;
letter-spacing:.24em;
text-transform:uppercase;
color:rgba(10,10,10,.34);
}
.leger-srp__label:after{
content:"";
display:block;
width:28px;
height:1px;
margin-top:12px;
background:rgba(10,10,10,.14);
}
.leger-srp__intro h2{
margin:0;
max-width:3.9em;
font-family:var(--srp-font-display) !important;
font-size:clamp(58px,4.65vw,88px) !important;
font-style:normal !important;
font-weight:400 !important;
line-height:.88 !important;
letter-spacing:-.055em !important;
text-transform:none !important;
text-align:left !important;
color:var(--srp-ink) !important;
text-rendering:optimizeLegibility;
font-synthesis:none;
}
.leger-srp__title-line{
display:block;
white-space:nowrap;
}
.leger-srp__title-line:nth-child(2){ transform:translateX(.05em); }
.leger-srp__title-line:nth-child(3){ transform:translateX(0); }
.leger-srp--complete .leger-srp__title-line:nth-child(2){ transform:translateX(0); }
.leger-srp--complete .leger-srp__title-line:nth-child(3){ transform:translateX(.05em); }
.leger-srp--complete .leger-srp__intro{
padding-left:2px;
}
.leger-srp__rail{
min-width:0;
width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
outline:none;
cursor:grab;
user-select:none;
touch-action:pan-x pan-y;
overscroll-behavior-x:contain;
scroll-behavior:auto;
position:relative;
}
.leger-srp__rail:active,
.leger-srp__rail.is-dragging{
cursor:grabbing;
}
.leger-srp__rail::-webkit-scrollbar{
display:none;
}
.leger-srp__track{
display:flex;
gap:var(--srp-gap);
align-items:flex-start;
min-width:100%;
transform:none !important;
}
.leger-srp__card{
position:relative;
flex:0 0 var(--srp-card-w);
min-width:var(--srp-card-w);
opacity:0;
transform:translateY(12px);
transition:opacity .82s cubic-bezier(.19,1,.22,1), transform .82s cubic-bezier(.19,1,.22,1), filter .38s ease;
transition-delay:calc(var(--i,0) * 28ms);
}
.leger-srp.is-in .leger-srp__card{
opacity:1;
transform:translateY(0);
}
.leger-srp__media{
position:relative;
display:block;
width:100%;
aspect-ratio:2 / 3;
overflow:hidden;
background:#f4f1ed;
color:inherit;
text-decoration:none;
isolation:isolate;
}
.leger-srp__media:before{
content:"";
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
border:1px solid rgba(255,255,255,.028);
opacity:.42;
}
.leger-srp__media:after{
content:"";
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
background:
radial-gradient(circle at 50% 22%, rgba(255,255,255,.022), rgba(255,255,255,0) 38%),
linear-gradient(180deg, rgba(255,255,255,.012) 0%, rgba(255,255,255,0) 34%),
linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(0,0,0,.03) 100%);
opacity:.54;
transition:opacity .72s cubic-bezier(.19,1,.22,1);
}
.leger-srp__img,
.leger-srp__media img{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
object-fit:cover;
transform:scale(1.001);
transition:
opacity .88s cubic-bezier(.19,1,.22,1),
transform 1.06s cubic-bezier(.19,1,.22,1),
filter 1.06s cubic-bezier(.19,1,.22,1);
pointer-events:none;
-webkit-user-drag:none;
user-select:none;
}
.leger-srp__img--primary{ opacity:1; z-index:1; }
.leger-srp__img--secondary{ opacity:0; z-index:2; }
.leger-srp__meta{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
min-height:54px;
padding-top:16px;
text-align:center;
color:inherit;
text-decoration:none;
transition:opacity .34s ease, transform .34s cubic-bezier(.19,1,.22,1);
}
.leger-srp__name{
display:block;
max-width:92%;
font-size:11.7px;
font-weight:400;
line-height:1.34;
letter-spacing:.055em;
text-transform:uppercase;
color:var(--srp-ink);
}
.leger-srp__price{
display:flex;
align-items:baseline;
justify-content:center;
flex-wrap:nowrap;
gap:.24em;
margin-top:6px;
font-size:10.9px;
font-weight:400;
line-height:1.26;
letter-spacing:.012em;
color:rgba(10,10,10,.6);
white-space:nowrap;
}
.leger-srp__price span,
.leger-srp__price bdi,
.leger-srp__price .amount,
.leger-srp__price .woocommerce-Price-amount,
.leger-srp__price .woocommerce-Price-currencySymbol{
display:inline-flex;
align-items:baseline;
margin-top:0;
font:inherit;
line-height:inherit;
letter-spacing:inherit;
color:inherit;
white-space:nowrap;
}
.leger-srp__price ins{
display:inline-flex;
align-items:baseline;
text-decoration:none;
color:inherit;
}
.leger-srp__price del{
display:inline-flex;
align-items:baseline;
opacity:.42;
margin-right:4px;
color:inherit;
}
.leger-srp__price .woocommerce-Price-currencySymbol{
margin-left:.18em;
}
@media (min-width:1025px){
.leger-srp--meta-quiet .leger-srp__meta{ opacity:.9; }
.leger-srp--meta-hover .leger-srp__meta{
opacity:0;
transform:translateY(6px);
}
.leger-srp--meta-hover .leger-srp__card:hover .leger-srp__meta{
opacity:1;
transform:translateY(0);
}
.leger-srp__track:hover .leger-srp__card{
opacity:.94;
filter:saturate(.99);
}
.leger-srp__track:hover .leger-srp__card:hover{
opacity:1;
filter:none;
}
}
@media (hover:hover) and (pointer:fine){
.leger-srp__card:hover .leger-srp__img--primary,
.leger-srp__card:hover .leger-srp__media img:first-child{
transform:scale(1.008);
filter:brightness(1.012) contrast(1.004);
}
.leger-srp__card:hover .leger-srp__img--secondary{
opacity:1;
transform:scale(1.008);
filter:brightness(1.01) contrast(1.002);
}
.leger-srp__card:hover .leger-srp__media:after{ opacity:.42; }
}
.leger-srp .quick-add,
.leger-srp .quick_add,
.leger-srp .quickview,
.leger-srp .quick-view,
.leger-srp .add_to_cart_button,
.leger-srp .button,
.leger-srp form.cart,
.leger-srp .yith-wcwl-add-to-wishlist,
.leger-srp .woosq-btn,
.leger-srp .woolentor-quickview,
.leger-srp .eael-product-popup,
.leger-srp .ht-product-action,
.leger-srp .product-action,
.leger-srp .product-actions{
display:none !important;
}
.leger-srp__media,
.leger-srp__meta{
pointer-events:auto;
}
.leger-srp__media,
.leger-srp__meta,
.leger-srp__media img{
-webkit-user-drag:none;
user-drag:none;
}
@media (min-width:1025px){
.leger-srp__rail{
cursor:grab;
}
.leger-srp__rail.is-dragging{
cursor:grabbing;
}
} @media (max-width:1024px){
.leger-srp{
--srp-card-w:calc((100vw - 28px) / 1.16);
margin-top:56px;
margin-bottom:112px;
padding:0 14px;
overflow:visible;
}
.leger-srp--complete{
margin-bottom:128px;
}
.leger-srp--fall{
margin-top:36px;
}
.leger-srp + .leger-srp{
margin-top:96px;
}
.leger-srp__layout,
.leger-srp--complete .leger-srp__layout,
.leger-srp--count-1 .leger-srp__layout,
.leger-srp--count-2 .leger-srp__layout,
.leger-srp--count-3 .leger-srp__layout,
.leger-srp--fall.leger-srp--count-1 .leger-srp__layout,
.leger-srp--fall.leger-srp--count-2 .leger-srp__layout,
.leger-srp--fall.leger-srp--count-3 .leger-srp__layout,
.leger-srp--complete.leger-srp--count-1 .leger-srp__layout,
.leger-srp--complete.leger-srp--count-2 .leger-srp__layout,
.leger-srp--complete.leger-srp--count-3 .leger-srp__layout{
display:flex;
flex-direction:column;
width:100%;
max-width:none;
gap:14px;
}
.leger-srp__intro,
.leger-srp--complete .leger-srp__intro{
order:-1;
position:relative;
padding:0;
margin:0 0 12px;
text-align:left;
}
.leger-srp__label{
margin-bottom:8px;
font-size:7.2px;
letter-spacing:.2em;
}
.leger-srp__label:after{
width:24px;
margin-top:8px;
}
.leger-srp__intro h2,
.leger-srp--complete .leger-srp__intro h2{
max-width:100%;
font-size:clamp(38px,8.2vw,56px) !important;
line-height:.92 !important;
letter-spacing:-.02em !important;
text-align:left !important;
} .leger-srp__title-line,
.leger-srp__title-line:nth-child(2),
.leger-srp__title-line:nth-child(3),
.leger-srp--complete .leger-srp__title-line:nth-child(2),
.leger-srp--complete .leger-srp__title-line:nth-child(3){
display:inline-block;
white-space:normal;
transform:none !important;
margin-right:.24em;
vertical-align:baseline;
}
.leger-srp__title-line:last-child{
margin-right:0;
}
.leger-srp__rail{
width:100%;
padding-right:10vw;
overflow-x:auto;
scroll-snap-type:x proximity;
touch-action:pan-x pan-y;
}
.leger-srp__card,
.leger-srp--count-1 .leger-srp__card,
.leger-srp--count-2 .leger-srp__card,
.leger-srp--count-3 .leger-srp__card{
flex:0 0 var(--srp-card-w);
min-width:var(--srp-card-w);
scroll-snap-align:start;
}
.leger-srp__meta{
min-height:50px;
padding-top:12px;
}
.leger-srp__name{ font-size:10.8px; }
.leger-srp__price{ font-size:10.2px; }
.leger-srp--complete.leger-srp--count-1 .leger-srp__rail{
padding-right:0;
}
.leger-srp--complete.leger-srp--count-1 .leger-srp__track{
min-width:100%;
}
.leger-srp--complete.leger-srp--count-1 .leger-srp__card{
flex:0 0 100%;
min-width:100%;
}
}
@media (max-width:767px){
.leger-srp{
--srp-card-w:calc((100vw - 20px) / 1.14);
margin-top:48px;
margin-bottom:126px;
padding:0 10px;
}
.leger-srp--complete{
margin-bottom:142px;
}
.leger-srp--fall{
margin-top:42px;
}
.leger-srp + .leger-srp{
margin-top:112px;
}
.leger-srp__layout,
.leger-srp--complete .leger-srp__layout{
gap:14px;
}
.leger-srp__intro,
.leger-srp--complete .leger-srp__intro{
margin-bottom:14px;
}
.leger-srp__intro h2,
.leger-srp--complete .leger-srp__intro h2{
font-size:clamp(34px,9.3vw,45px) !important;
line-height:.93 !important;
letter-spacing:-.016em !important;
}
.leger-srp__title-line,
.leger-srp__title-line:nth-child(2),
.leger-srp__title-line:nth-child(3),
.leger-srp--complete .leger-srp__title-line:nth-child(2),
.leger-srp--complete .leger-srp__title-line:nth-child(3){
margin-right:.28em;
}
.leger-srp__rail{
padding-right:8vw;
}
.leger-srp__meta{
min-height:46px;
padding-top:10px;
}
.leger-srp__name{ font-size:10.4px; max-width:100%; }
.leger-srp__price{ font-size:10px; }
.leger-srp--complete.leger-srp--count-1 .leger-srp__rail{
padding-right:0;
}
}
@media (prefers-reduced-motion:reduce){
.leger-srp__intro,
.leger-srp__card,
.leger-srp__img,
.leger-srp__media img{
transition:none !important;
transform:none !important;
opacity:1 !important;
}
}