/* Each desktop story moves as one image-and-description panel. */
.product-scroll-pin,.product-scroll-viewport,.product-scroll-track{display:contents}
@media(min-width:761px){
 #products{display:block}
 #products .products-intro{margin-bottom:32px}
 #products .soap-feature{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(34px,5vw,80px);min-height:0;padding:60px 0;border:0}
 #products .soap-feature>.soap-gallery{display:block;position:relative;top:auto}
 #products .soap-feature .soap-profile{align-self:center;transform:none}
 #products.has-horizontal-stories{padding:0;position:relative}
 .has-horizontal-stories .product-scroll-pin{display:flex;flex-direction:column;justify-content:center;position:sticky;top:100px;min-height:calc(100dvh - 120px);padding-block:16px}
 .has-horizontal-stories .products-intro{flex:none;margin:0 0 24px!important}
 .has-horizontal-stories .product-scroll-viewport{display:block;overflow:hidden;width:100%;min-width:0}
 .has-horizontal-stories .product-scroll-track{display:flex;align-items:center;width:100%;will-change:transform}
 #products.has-horizontal-stories .soap-feature{flex:0 0 100%;width:100%;min-width:0;padding:0}
 .has-horizontal-stories .soap-gallery-main{height:clamp(280px,calc(100dvh - 340px),560px);aspect-ratio:auto}
 .has-horizontal-stories .soap-profile h3{font-size:clamp(40px,4.8vw,68px)}
 .has-horizontal-stories .soap-profile-intro{font-size:clamp(17px,1.5vw,21px)}
 .has-horizontal-stories .soap-description{font-size:clamp(14px,1.15vw,16px)}
}

.soap-profile > .soap-benefits{
  margin-top:clamp(22px,2.3vw,30px);
  border-top:1px solid var(--line);
  padding-top:clamp(22px,2.3vw,30px);
}

.soap-gallery-main>picture{display:block;width:100%;height:100%}

.soap-preview-trigger{font-weight:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
.soap-preview-trigger:hover{color:var(--green);text-decoration-color:currentColor}
.soap-preview-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
@media(min-width:761px){.soap-preview.design-preview{width:min(1000px,calc(100vw - 40px))}}
.soap-preview-layout picture{display:block;position:relative;min-height:100%;background:#eeeae0}
.soap-preview-layout picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.soap-preview-content{padding:clamp(32px,4vw,52px) clamp(24px,2.8vw,36px);color:var(--green)}
.soap-preview-content h2{font-size:clamp(36px,4.6vw,62px);margin-bottom:10px}
.soap-preview-content .soap-profile-intro{margin:0;font-size:clamp(15px,1.55vw,20px)}
.soap-preview-benefits{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
.soap-preview-content .soap-benefits{margin:0;max-width:none}
.soap-preview-content .soap-benefit-icon{width:48px;height:48px}
.soap-preview-ingredients{margin-top:22px}
.soap-preview-ingredients h3{font-size:17px;margin-bottom:7px}
.soap-preview-ingredients p{font-size:14px;line-height:1.65;color:var(--muted)}
@media(max-width:760px){
  .soap-preview-layout{grid-template-columns:minmax(0,1fr)}
  .soap-preview-layout picture{min-height:0;aspect-ratio:1.55}
  .soap-preview-layout picture img{object-position:center 56%}
  .soap-preview-content{padding:24px 20px 28px}
  .soap-preview-content .soap-benefit-icon{width:40px;height:40px}
}