/* Featured product: editorial copy paired with a full-height bathroom scene. */
.soap-feature{padding:88px 0 96px;scroll-margin-top:72px;}
.soap-feature-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.soap-feature-grid::before{content:"";position:absolute;left:50%;top:10%;bottom:10%;width:1px;background:#26231E;pointer-events:none;}
.soap-feature-copy{max-width:450px;justify-self:end;text-align:right;min-width:0;}
.soap-feature-copy h2{font:500 clamp(32px,3vw,42px)/1.2 var(--font-heading);text-transform:none;letter-spacing:-.02em;margin:0 0 24px;}
.soap-feature-promise{font:400 19px/1.5 'Jost',sans-serif;color:var(--gold-text);margin:0 0 24px;}
.soap-feature-description{font:400 17px/1.75 'Jost',sans-serif;color:var(--ink);margin:0 0 24px;}
.soap-feature-specs{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px 16px;margin:0 0 32px;color:var(--faint);font-size:14px;line-height:1.6;}
.soap-feature-specs span+span{border-left:1px solid var(--hairline);padding-left:16px;}
.soap-feature-link{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;max-width:100%;font-size:12px;letter-spacing:.07em;line-height:1.5;padding:16px 24px;text-align:center;}
.soap-feature-image{margin:0;min-width:0;aspect-ratio:4 / 5;overflow:hidden;background:var(--surface-warm);}
.soap-feature-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%;}
@media(max-width:1060px){
  .soap-feature-grid{gap:48px;}
  .soap-feature-copy h2{font-size:34px;}
  .soap-feature-description{font-size:16px;}
  .soap-feature-image{aspect-ratio:3 / 4;}
  .soap-feature-specs{gap:4px 12px;}
  .soap-feature-specs span+span{padding-left:12px;}
}
@media(max-width:760px){
  .soap-feature{padding:64px 0;}
  .soap-feature-grid{grid-template-columns:1fr;gap:24px;}
  .soap-feature-grid::before{position:static;grid-row:2;justify-self:center;width:64px;height:1px;}
  .soap-feature-image{grid-row:3;}
  .soap-feature-copy{max-width:480px;justify-self:center;text-align:center;}
  .soap-feature-copy h2{font-size:34px;margin-bottom:20px;}
  .soap-feature-promise{font-size:18px;margin-bottom:20px;}
  .soap-feature-description{margin-bottom:20px;}
  .soap-feature-specs{justify-content:center;margin-bottom:24px;font-size:13px;}
  .soap-feature-link{font-size:11px;padding:16px 18px;gap:12px;}
  .soap-feature-image{aspect-ratio:4 / 5;width:100%;max-width:480px;justify-self:center;}
}

/* The rule draws outward from its center once the product scene enters view. */
.soap-feature-grid{--divider-start:inset(50% 0 50% 0);}
.soap-feature-grid.divider-ready:not(.divider-revealed)::before{clip-path:var(--divider-start);opacity:0;}
.soap-feature-grid.divider-revealed::before{animation:soap-divider-reveal 1.8s cubic-bezier(.4,0,.2,1) both;}
@keyframes soap-divider-reveal{
  from{clip-path:var(--divider-start);opacity:0;}
  to{clip-path:inset(0);opacity:1;}
}
@media(max-width:760px){.soap-feature-grid{--divider-start:inset(0 50% 0 50%);}}
@media(prefers-reduced-motion:reduce){
  .soap-feature-grid.divider-ready::before{animation:none;clip-path:none;opacity:1;}
}
