:root {
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Libre Caslon Text", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; }

.slider-site {
  min-width: 320px;
  overflow-x: hidden;
  color: #23271f;
  background: #f2ead4;
  font-family: var(--sans);
}

.soap-slider {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--active-bg, #f2ead4);
  transition: background-color .85s cubic-bezier(.22,.61,.36,1);
  isolation: isolate;
}

.soap-slider::after {
  position: absolute;
  inset: 0;
  z-index: 20;
  content: "";
  opacity: .23;
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: multiply;
}

.slider-nav {
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 94px;
  padding: 16px clamp(24px, 4.8vw, 78px);
}

.slider-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  text-decoration: none;
  color: #25291f;
}

.slider-brand__name {
  display: grid;
  gap: 3px;
  font: 700 18px/.95 var(--serif);
  letter-spacing: -.025em;
}

.slider-brand__name small {
  font: 700 7px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.slider-brand__logo { display: block; width: 138px; height: auto; }

.slider-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 42px); }
.slider-links a,
.slider-links button {
  position: relative;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.slider-links a::after,
.slider-links button::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transition: transform .2s ease;
}
.slider-links a:hover::after,
.slider-links button:hover::after,
.slider-links button.is-active::after { transform: scaleX(1); }

.slider-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 17px;
}
.slider-actions a { display: grid; width: 30px; height: 30px; place-items: center; }
.slider-action-link { position: relative; text-decoration: none; }
.slider-menu-toggle { display: none; width: 30px; height: 30px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.slider-action-link [data-store-badge] {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  color: #fff;
  background: var(--slide-ink, #536a3f);
  font: 700 8px/1 var(--sans);
}
.slider-action-link [data-store-badge]:empty,
.slider-action-link [data-store-badge][data-count="0"] { display: none; }
.slider-actions svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.slider-menu-toggle svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }

.slider-stage { position: absolute; inset: 0; }
.soap-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: var(--slide-bg);
  opacity: 0;
  transition: opacity .65s ease, visibility 0s linear .7s;
}
.soap-slide::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  background-image: url("/images/atmosphere/shadow-leaves-wall.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: .34;
  pointer-events: none;
  transition: opacity .65s ease;
}
.soap-slide.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.soap-slide.is-leaving {
  z-index: 1;
  visibility: visible;
  opacity: 0;
}

.slide-kicker {
  position: absolute;
  z-index: 6;
  top: 18%;
  left: 50%;
  margin: 0;
  color: color-mix(in srgb, var(--slide-ink) 78%, #1d211c);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .45s ease .38s, transform .65s cubic-bezier(.16,1,.3,1) .3s;
}
.is-active .slide-kicker { opacity: 1; transform: translateX(-50%) translateY(0); }

.slide-name {
  position: absolute;
  z-index: 11;
  top: 72%;
  left: 50%;
  width: auto;
  margin: 0;
  color: var(--slide-ink);
  font: 700 clamp(34px, 4vw, 60px)/1 var(--serif);
  letter-spacing: -.045em;
  text-align: center;
  text-transform: capitalize;
  transform: translate(-50%, 22px) scale(.9);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1) .06s, opacity .45s ease .06s;
  white-space: nowrap;
}
.slide-name--long { font-size: clamp(31px, 3.6vw, 52px); }
.is-active .slide-name { transform: translate(-50%, 0) scale(1); opacity: 1; }
.is-leaving .slide-name { transform: translate(-72%, 0) scale(1.04); opacity: 0; }

.slide-product {
  position: absolute;
  z-index: 7;
  top: 48%;
  left: 50%;
  display: flex;
  width: min(46vw, 640px);
  height: min(29vw, 376px);
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(.65) rotate(-7deg);
  filter: drop-shadow(0 38px 26px rgba(46, 47, 30, .25));
  opacity: 0;
  transition: transform .92s cubic-bezier(.16,1,.3,1) .12s, opacity .42s ease .12s, filter .3s ease;
}
.slide-product::before {
  position: absolute;
  z-index: -1;
  top: 76%;
  left: 50%;
  width: 76%;
  height: 22%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--slide-ink) 23%, transparent) 0%, transparent 72%);
  filter: blur(15px);
  transform: translate(-50%, -50%);
  opacity: .72;
}
.slide-product img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.is-active .slide-product { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
.is-leaving .slide-product { transform: translate(-50%, -50%) scale(.52) rotate(8deg); opacity: 0; }
.slide-product:hover { filter: drop-shadow(0 45px 31px rgba(46,47,30,.34)); }
.soap-slider.is-product-selected .soap-slide.is-active .slide-product { opacity: 0; transition-duration: .24s; }
.soap-slider.is-product-restored .soap-slide.is-active .slide-product { opacity: 1; transition: none; }

.satellite {
  position: absolute;
  z-index: 8;
  width: clamp(130px, 15vw, 250px);
  aspect-ratio: 1;
  background-image: var(--sat-sheet);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  filter: drop-shadow(0 22px 18px rgba(43, 47, 31, .18));
  opacity: 0;
  pointer-events: none;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1), opacity .55s ease, filter 1s ease;
}

.sat--additional { background-image: url("/images/hero-v2/ingredient-additional-sheet.webp"); }
.sat--sugar { background-image: url("/images/hero-v2/ingredient-sugar.webp"); background-position: center; background-size: cover; }
.sat--verbena { background-image: url("/images/hero-v2/ingredient-lemon-verbena.webp"); background-position: center; background-size: cover; }
/* The supplied lemongrass cutout is panoramic (4000 × 2399), unlike the square satellite assets. */
.sat--lemongrass { aspect-ratio: 4000 / 2399; background-image: url("/images/hero-v2/ingredient-lemongrass.webp"); background-position: center; background-size: contain; }
.soap-slide[data-product="lemon"] .sat--verbena { width: clamp(175px, 16vw, 250px); }
.sat--r1c1 { background-position: 0 0; }
.sat--r1c2 { background-position: 50% 0; }
.sat--r1c3 { background-position: 100% 0; }
.sat--r2c1 { background-position: 0 50%; }
.sat--r2c2 { background-position: 50% 50%; }
.sat--r2c3 { background-position: 100% 50%; }
.sat--r3c1 { background-position: 0 100%; }
.sat--r3c2 { background-position: 50% 100%; }
.sat--r3c3 { background-position: 100% 100%; }

.sat--a { top: 20%; left: -3%; width: clamp(220px, 25vw, 410px); transform: translate(-36%, -12%) scale(1.7) rotate(-18deg); filter: blur(6px) drop-shadow(0 25px 18px rgba(43,47,31,.15)); }
.sat--b { top: 10%; left: 23%; width: clamp(105px, 10vw, 170px); transform: translateY(-90%) scale(.45) rotate(18deg); }
.sat--c { top: 16%; right: 12%; width: clamp(130px, 12vw, 190px); transform: translate(70%, -50%) scale(.5) rotate(-12deg); }
.sat--d { right: -4%; bottom: 8%; width: clamp(230px, 26vw, 420px); transform: translate(38%, 25%) scale(1.65) rotate(22deg); filter: blur(5px) drop-shadow(0 25px 18px rgba(43,47,31,.15)); }
.sat--e { bottom: 10%; left: 20%; width: clamp(110px, 12vw, 190px); transform: translate(-30%, 60%) scale(.55) rotate(-18deg); }

.is-active .sat--a { transform: translate(0, 0) scale(1) rotate(-8deg); opacity: .98; animation: satellite-drift-a 8s ease-in-out 1.2s infinite alternate; }
.is-active .sat--b { transform: translate(0, 0) scale(1) rotate(8deg); opacity: 1; animation: satellite-drift-b 6.7s ease-in-out 1.45s infinite alternate; }
.is-active .sat--c { transform: translate(0, 0) scale(1) rotate(-7deg); opacity: 1; animation: satellite-drift-c 7.3s ease-in-out 1.25s infinite alternate; }
.is-active .sat--d { transform: translate(0, 0) scale(1) rotate(12deg); opacity: .98; animation: satellite-drift-d 8.4s ease-in-out 1.15s infinite alternate; }
.is-active .sat--e { transform: translate(0, 0) scale(1) rotate(-12deg); opacity: 1; animation: satellite-drift-e 6.9s ease-in-out 1.35s infinite alternate; }
.is-active .sat--a,
.is-active .sat--d { filter: blur(1.3px) drop-shadow(0 25px 18px rgba(43,47,31,.17)); }
.is-leaving .satellite { opacity: 0; transform: scale(1.7) rotate(25deg); filter: blur(8px); }

.product-group {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
  align-items: center;
  overflow: hidden;
  padding: 120px clamp(28px, 8vw, 130px) 72px;
  color: #574c3c;
  background: #eadfca;
  isolation: isolate;
}
.product-group[hidden] { display: none; }
.soap-slider[data-group="pack"] .product-group { position: relative; inset: auto; min-height: 100svh; overflow: visible; }
.product-group::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .35;
  background: url("/images/atmosphere/shadow-leaves-wall.webp") center/cover no-repeat;
  mix-blend-mode: multiply;
}
.product-group__copy { position: relative; z-index: 12; width: min(100%, 530px); }
.product-group__eyebrow { display: block; margin-bottom: 17px; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.product-group h1 { margin: 0 0 23px; color: inherit; font: 700 clamp(48px, 5.8vw, 90px)/.94 var(--serif); letter-spacing: -.06em; }
.product-group h1 em { font-weight: 400; }
.product-group p { max-width: 490px; margin: 0 0 13px; color: color-mix(in srgb, #574c3c 78%, #30312b); font-size: 16px; line-height: 1.72; }
.product-group .product-group__small { max-width: 430px; font-size: 13px; }
.product-group__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.product-group__button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; padding: 0 19px; border: 1px solid #574c3c; border-radius: 999px; color: #574c3c; background: rgba(255,255,255,.34); font: 700 11px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.product-group__button:hover { background: rgba(255,255,255,.7); transform: translateY(-2px); }
.product-group__button--fill { color: #fff; background: #574c3c; }
.product-group__button--fill:hover { background: #45382d; }
.product-group__button:disabled { border-color: rgba(87,76,60,.2); color: rgba(87,76,60,.52); background: rgba(255,255,255,.18); cursor: not-allowed; }
.product-group__button:disabled:hover { background: rgba(255,255,255,.18); transform: none; }
.product-group__variants { display: grid; gap: 9px; margin-top: 25px; }
.product-group__variant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 13px 12px 16px; border: 1px solid rgba(87,76,60,.19); border-radius: 15px; background: rgba(255,255,255,.2); }
.product-group__variant--available { border-color: rgba(87,76,60,.25); background: rgba(255,255,255,.64); box-shadow: none; }
.product-group__price-badge { display: inline-flex; margin: 7px 0 0; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; color: #7e4d2f; background: #fff7e9; box-shadow: 0 3px 8px rgba(72,55,37,.1); font: 700 9.5px/1.3 var(--sans); white-space: nowrap; }
.product-group__variant strong { display: block; margin-bottom: 3px; color: #574c3c; font: 700 22px/.95 var(--serif); letter-spacing: -.035em; }
.product-group__variant p { max-width: none; margin: 0; font-size: 11px; line-height: 1.4; }
.product-group__variant .product-group__price { margin: 7px 0 0; font: 700 16px/1.25 var(--sans); color: #574c3c; white-space: nowrap; }
.product-group__variant .product-group__price del { margin-right: 8px; font: 500 12px/1 var(--sans); color: rgba(87,76,60,.55); text-decoration-thickness: 1px; }
.product-group__variant .product-group__price-note { display: block; margin: 4px 0 0; color: rgba(87,76,60,.72); font: 600 10.5px/1.5 var(--sans); letter-spacing: .01em; }
.product-group__variant .product-group__button { min-height: 37px; padding: 0 13px; font-size: 9px; white-space: nowrap; }
.product-group__variant--available .product-group__button--fill { gap: 9px; min-height: 44px; padding: 0 18px; border-color: rgba(255,255,255,.2); background: linear-gradient(135deg, #625744, #4d4435); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 7px 16px rgba(68,54,37,.2); font-size: 10px; letter-spacing: .015em; }
.product-group__variant--available .product-group__button--fill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform .2s ease; }
.product-group__variant--available .product-group__button--fill small { margin-left: 3px; color: rgba(255,255,255,.72); font: inherit; }
.product-group__variant--available .product-group__button--fill:hover { background: linear-gradient(135deg, #70634d, #554936); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 20px rgba(68,54,37,.24); }
.product-group__variant--available .product-group__button--fill:hover svg { transform: translateY(-1px); }
.product-group__variant--available .product-group__button--fill:active { box-shadow: inset 0 1px 3px rgba(34,27,19,.22), 0 3px 8px rgba(68,54,37,.16); transform: translateY(0); }
.product-group__variant--available .product-group__button--fill:focus-visible { outline: 3px solid rgba(142,104,57,.3); outline-offset: 3px; }
.product-group__variants .product-group__variant--available { padding: 18px; gap: 8px 16px; border-radius: 8px; }
.product-group__variant--available > div { display: contents; }
.product-group__variant--available > div > strong { grid-column: 1 / -1; margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: 0; }
.product-group__variant--available > div > p:not(.product-group__price) { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; }
.product-group__variant--available > div > .product-group__price { grid-column: 1; grid-row: 3; margin: 8px 0 0; white-space: normal; font-size: 24px; }
.product-group__price .price-display { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.product-group__variant .product-group__price .price-display strong { order: -1; margin: 0; color: #374b35; font: 700 24px/1.2 var(--sans); letter-spacing: 0; }
.product-group__variant .product-group__price .price-display del { margin: 0; color: #756e63; font: 400 13px/1.4 var(--sans); }
.product-group__price .price-display__label { flex-basis: 100%; font-size: 10px; color: #8a382e; }
.product-group__price .price-display small { flex-basis: 100%; }
.product-group__variant--available > .product-group__button--fill { grid-column: 2; grid-row: 3; align-self: center; margin-top: 8px; min-height: 44px; background: #536848; box-shadow: none; font-size: 11px; }
.product-group__variant--available > .product-group__button--fill small { display: none; }
@media (max-width: 420px) {
  .product-group__variants .product-group__variant--available { padding: 14px; column-gap: 10px; }
  .product-group__variant--available > .product-group__button--fill { padding-inline: 12px; }
}
.product-group__visual { position: relative; z-index: 7; display: grid; min-height: min(62vw, 740px); place-items: center; }
.product-group__visual > span { position: absolute; width: min(50vw, 640px); aspect-ratio: 1; border: 1px solid rgba(87,76,60,.2); border-radius: 50%; }
.product-group__visual::after { position: absolute; z-index: 0; bottom: 15%; width: min(39vw, 470px); height: 54px; border-radius: 50%; content: ""; background: radial-gradient(ellipse, rgba(67,48,35,.32), transparent 70%); filter: blur(16px); }
.product-group__visual img { position: relative; z-index: 1; width: min(52vw, 650px); max-height: min(80vh, 760px); object-fit: contain; filter: drop-shadow(0 44px 34px rgba(57,43,30,.3)); transform: rotate(-2deg); }
.product-group--salts { grid-template-columns: minmax(310px, .9fr) minmax(360px, 1.1fr); color: #4f6653; background: #dfe8d5; }
.product-group--salts::before { opacity: .27; transform: scaleX(-1); }
.salt-preview { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: clamp(16px, 3vw, 38px); max-width: 680px; margin-left: auto; }
.salt-preview article { display: flex; min-height: min(37vw, 430px); flex-direction: column; padding: 25px; border: 1px solid rgba(79,102,83,.22); border-radius: 50% 50% 18px 18px; background: linear-gradient(145deg, rgba(255,255,255,.46), rgba(196,211,184,.52)); box-shadow: inset 0 0 0 13px rgba(255,255,255,.12), 0 23px 46px rgba(65,85,63,.12); }
.salt-preview article:nth-child(2) { transform: translateY(52px); background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(225,206,185,.58)); }
.salt-preview span { margin-bottom: 16px; font: 800 9px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.salt-preview h2 { margin: 0 0 10px; font: 700 clamp(27px, 2.6vw, 39px)/.95 var(--serif); letter-spacing: -.045em; }
.salt-preview > article > p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.salt-preview details { margin-top: auto; border-top: 1px solid rgba(79,102,83,.2); }
.salt-preview summary { padding-top: 13px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.salt-preview details > div { padding-top: 9px; font-size: 11px; line-height: 1.5; }
.salt-preview details p { margin: 0 0 9px; }
.salt-preview details ul { margin: 0 0 9px; padding-left: 16px; }
.salt-preview details li + li { margin-top: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.salt-slider { position: absolute; inset: 0; overflow: hidden; background: var(--salt-bg, #e4e0ed); }
.salt-slide { position: absolute; inset: 0; visibility: hidden; overflow: hidden; color: var(--salt-ink); background: var(--salt-bg); opacity: 0; transition: opacity .65s ease, visibility 0s linear .7s; }
.salt-slide::before { position: absolute; z-index: 3; inset: 0; content: ""; opacity: .3; background: url("/images/atmosphere/shadow-leaves-wall.webp") center/cover no-repeat; mix-blend-mode: multiply; }
.salt-slide.is-active { z-index: 2; visibility: visible; opacity: 1; transition-delay: 0s; }
.salt-slide__kicker { position: absolute; z-index: 11; top: 18%; left: 50%; margin: 0; color: var(--salt-ink); font-size: 10px; font-weight: 800; letter-spacing: .19em; text-align: center; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.salt-slide h2 { position: absolute; z-index: 12; top: 71%; left: 50%; margin: 0; color: var(--salt-ink); font: 700 clamp(35px, 4.2vw, 63px)/1 var(--serif); letter-spacing: -.055em; transform: translateX(-50%); white-space: nowrap; }
.salt-vessel { position: absolute; z-index: 9; top: 47%; left: 50%; width: min(22vw, 300px); height: min(29vw, 385px); padding: 0; border: 0; border-radius: 44px 44px 28px 28px; color: #554e48; background: linear-gradient(100deg, rgba(255,255,255,.88), rgba(239,235,222,.98) 45%, rgba(201,194,175,.94)); box-shadow: inset 12px 0 16px rgba(255,255,255,.56), inset -14px 0 18px rgba(87,74,58,.12), 0 34px 30px rgba(73,57,44,.22); cursor: pointer; transform: translate(-50%, -50%) rotate(-3deg); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.salt-vessel:hover { box-shadow: inset 12px 0 16px rgba(255,255,255,.56), inset -14px 0 18px rgba(87,74,58,.12), 0 42px 35px rgba(73,57,44,.3); transform: translate(-50%, -52%) rotate(-1deg) scale(1.03); }
.salt-vessel::after { position: absolute; z-index: -1; bottom: -9%; left: 50%; width: 90%; height: 14%; border-radius: 50%; content: ""; background: radial-gradient(ellipse, rgba(62,53,44,.3), transparent 70%); filter: blur(10px); transform: translateX(-50%); }
.salt-vessel__lid { position: absolute; top: -7%; right: 6%; left: 6%; height: 18%; border-radius: 30px 30px 10px 10px; background: linear-gradient(#a99785, #766858); box-shadow: inset 0 3px 3px rgba(255,255,255,.28); }
.salt-vessel__label { position: absolute; top: 25%; right: 11%; bottom: 13%; left: 11%; display: grid; align-content: center; padding: 16px; border: 1px solid rgba(95,78,61,.19); border-radius: 14px; background: rgba(255,253,245,.8); box-shadow: inset 0 0 0 6px rgba(255,255,255,.24); }
.salt-vessel__label b { margin-bottom: 13px; font: 700 11px/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.salt-vessel__label i { margin-bottom: 7px; font: 700 8px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.salt-vessel__label strong { font: italic 700 clamp(23px, 2.6vw, 37px)/.95 var(--serif); letter-spacing: -.04em; }
.salt-vessel__label small { margin-top: 15px; font: 800 7px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.salt-slide__details { position: absolute; z-index: 12; top: 81%; left: 50%; min-height: 42px; padding: 0 17px; border: 1px solid var(--salt-ink); border-radius: 999px; color: #fff; background: var(--salt-ink); font: 700 10px/1 var(--sans); cursor: pointer; transform: translateX(-50%); }
.salt-slider__arrow { position: absolute; z-index: 14; top: 50%; display: grid; width: 46px; height: 46px; padding: 0; border: 1px solid color-mix(in srgb, var(--salt-ink) 28%, transparent); border-radius: 50%; place-items: center; color: var(--salt-ink); background: rgba(255,255,255,.5); font: 400 34px/.8 var(--serif); cursor: pointer; transform: translateY(-50%); }
.salt-slider__arrow--prev { left: clamp(20px, 5vw, 78px); }.salt-slider__arrow--next { right: clamp(20px, 5vw, 78px); }
.salt-slider__progress { position: absolute; z-index: 14; bottom: 31px; left: 50%; display: flex; gap: 9px; transform: translateX(-50%); }.salt-slider__progress button { width: 34px; height: 12px; padding: 5px 0; border: 0; background: none; cursor: pointer; }.salt-slider__progress button::after { display: block; height: 2px; content: ""; background: color-mix(in srgb, var(--salt-ink) 30%, transparent); }.salt-slider__progress button.is-active::after { background: var(--salt-ink); }
.salt-slider__counter { position: absolute; z-index: 14; bottom: 31px; left: clamp(24px, 4.8vw, 78px); margin: 0; color: color-mix(in srgb, var(--salt-ink) 72%, transparent); font-size: 10px; font-weight: 700; letter-spacing: .15em; }.salt-slider__counter strong { margin-right: 6px; color: var(--salt-ink); font-size: 14px; }
.soap-slide.salt-slide { color: var(--slide-ink); background: var(--slide-bg); }
.soap-slide.salt-slide .salt-vessel { top: 45%; width: min(24vw, 350px); height: min(48vh, 480px); border-radius: 0; background: transparent; box-shadow: none; }
.soap-slide.salt-slide .salt-vessel::after { display: none; }
.soap-slide.salt-slide .salt-vessel img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 28px 24px rgba(64, 48, 39, .24)); }
.soap-slide.salt-slide .slide-name { top: 72%; color: var(--slide-ink); font: 700 clamp(34px, 4vw, 60px)/1 var(--serif); transform: translate(-50%, 22px) scale(.9); opacity: 0; transition: transform .9s cubic-bezier(.16,1,.3,1) .06s, opacity .45s ease .06s; }
.soap-slide.salt-slide.is-active .slide-name { transform: translate(-50%, 0) scale(1); opacity: 1; }
.soap-slide.salt-slide.is-leaving .slide-name { transform: translate(-72%, 0) scale(1.04); opacity: 0; }
.soap-slide.salt-slide .slide-cta { top: auto; right: auto; bottom: 12%; left: 50%; color: var(--slide-ink); background: rgba(255,255,255,.45); transform: translate(-50%, 20px); }
.soap-slide.salt-slide.is-active .slide-cta { transform: translate(-50%, 0); }
.salt-detail { position: absolute; z-index: 28; inset: 0; overflow-y: auto; padding: 118px clamp(28px, 9vw, 145px) 74px; color: var(--salt-ink, #594c77); background: var(--salt-bg, #e4e0ed); }.salt-detail[hidden] { display: none; }.salt-detail::before { position: fixed; z-index: -1; inset: 0; content: ""; opacity: .25; background: url("/images/atmosphere/shadow-leaves-wall.webp") center/cover no-repeat; mix-blend-mode: multiply; }.salt-detail__back { display: inline-flex; margin-bottom: 52px; padding: 0; border: 0; color: inherit; background: none; font: 800 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }.salt-detail__grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.1fr); gap: clamp(42px, 9vw, 150px); max-width: 1320px; }.salt-detail__grid h2 { margin: 0 0 22px; font: 700 clamp(52px, 6vw, 90px)/.94 var(--serif); letter-spacing: -.06em; }.salt-detail__grid h3 { margin: 0 0 12px; font: 700 clamp(26px, 2.4vw, 38px)/1 var(--serif); letter-spacing: -.04em; }.salt-detail__grid p, .salt-detail__grid li { font-size: 15px; line-height: 1.7; }.salt-detail__grid p { margin: 0 0 20px; }.salt-detail__grid ul { margin: 0; padding-left: 20px; }.salt-detail__grid li + li { margin-top: 8px; }.salt-detail__facts { display: grid; gap: 12px; }.salt-detail__fact { padding: 19px 20px; border: 1px solid color-mix(in srgb, var(--salt-ink) 24%, transparent); border-radius: 18px 2px 18px 2px; background: rgba(255,255,255,.34); }.salt-detail__fact b { display: block; margin-bottom: 7px; font: 700 18px/1 var(--serif); }.salt-detail__fact p { margin: 0; font-size: 13px; line-height: 1.55; }
.soap-slider[data-group="pack"] .slider-stage,
.soap-slider[data-group="pack"] .slider-arrow,
.soap-slider[data-group="pack"] .slider-progress,
.soap-slider[data-group="pack"] .slider-counter,
.soap-slider[data-group="pack"] .slider-signature { visibility: hidden; opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  .soap-slide::before {
    background-position: 42% center;
    opacity: .24;
  }
}

@keyframes satellite-drift-a { to { transform: translate(14px, -10px) scale(1.025) rotate(-4deg); } }
@keyframes satellite-drift-b { to { transform: translate(-8px, 12px) scale(.96) rotate(3deg); } }
@keyframes satellite-drift-c { to { transform: translate(11px, 9px) scale(1.04) rotate(-2deg); } }
@keyframes satellite-drift-d { to { transform: translate(-12px, 9px) scale(.98) rotate(16deg); } }
@keyframes satellite-drift-e { to { transform: translate(9px, -10px) scale(1.04) rotate(-7deg); } }

.slide-cta {
  position: absolute;
  z-index: 12;
  bottom: 12%;
  left: 50%;
  display: inline-flex;
  min-width: 132px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #25271f;
  background: rgba(255,255,255,.45);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  transform: translate(-50%, 20px);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: transform .55s ease .48s, opacity .4s ease .48s, background .2s ease;
}
.is-active .slide-cta { transform: translate(-50%, 0); opacity: 1; }
.slide-cta:hover { background: rgba(255,255,255,.75); }

.slide-buy {
  position: absolute;
  z-index: 13;
  top: 80%;
  left: 50%;
  display: flex;
  align-items: stretch;
  gap: 8px;
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: transform .55s ease .44s, opacity .35s ease .44s;
}
.is-active .slide-buy { transform: translate(-50%, 0); opacity: 1; }
.slide-buy .stock-notice--hero { top: -8px; right: -9px; left: auto; transform: none; }
.slide-promotion { position: absolute; bottom: calc(100% + 12px); left: 0; width: 100%; color: var(--detail-ink, #374b35); }
.slide-promotion .price-display { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; font-size: 17px; }
.slide-promotion .price-display small { flex-basis: 100%; max-width: none; text-align: center; }
.slide-quantity {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--slide-ink) 38%, transparent);
  border-radius: 999px;
  color: var(--slide-ink);
  background: rgba(255,255,255,.48);
  box-shadow: 0 10px 24px rgba(47,48,32,.08);
  backdrop-filter: blur(8px);
}
.slide-quantity button {
  width: 37px;
  height: 42px;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  transition: background .2s ease;
}
.slide-quantity button:hover { background: rgba(255,255,255,.56); }
.slide-quantity output { min-width: 25px; text-align: center; font-size: 12px; font-weight: 700; }
.slide-add {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--slide-ink) 78%, #1d211c);
  border-radius: 999px;
  color: #fff;
  background: var(--slide-ink);
  box-shadow: 0 13px 26px color-mix(in srgb, var(--slide-ink) 26%, transparent);
  font: 700 11px/1 var(--sans);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.slide-add:hover { filter: brightness(.92); transform: translateY(-2px); }
.slide-add span { margin-left: 3px; opacity: .74; font-weight: 600; }

/* Product detail opens inside the home journey — it is deliberately not a new page. */
.product-loofah { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 64px; padding: 100px max(24px, calc((100% - 1280px) / 2)); background: #fff; color: var(--detail-ink, #536a3f); }
.product-loofah__image { position: relative; padding-block: 88px 24px; }
.product-loofah__gift { position: absolute; top: 0; left: 12%; display: flex; width: 108px; height: 108px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; transform: rotate(-12deg); }
.product-loofah__gift strong { font: italic 400 32px/1.1 var(--serif); }
.product-loofah__image img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 11; object-fit: contain; }
.product-loofah__copy > span { display: block; margin-bottom: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.product-loofah__copy h2 { margin: 0 0 28px; font: 700 64px/1 var(--serif); letter-spacing: 0; }
.product-loofah__copy h2 em { font-weight: 400; }
.product-loofah__copy p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; }
.home-detail__copy .home-detail__gift-note { margin: 14px 0 0; font-size: 13px; }
@media (max-width: 759px) {
  .product-loofah { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 48px 24px 56px; }
  .product-loofah__image { width: min(100%, 420px); margin-inline: auto; }
  .product-loofah__gift { width: 88px; height: 88px; left: 4%; }
  .product-loofah__gift strong { font-size: 26px; }
  .product-loofah__copy h2 { font-size: 46px; }
  .product-loofah__copy p { font-size: 15px; }
}
.home-product-detail { position: relative; overflow: visible; margin: 0; color: var(--detail-ink, #536a3f); background: transparent; font-family: var(--sans); }
.home-product-detail.is-open { animation: home-detail-arrive .45s ease both; }
@keyframes home-detail-arrive { from { opacity: .25; } to { opacity: 1; } }
.home-detail__sticky { position: sticky; z-index: 8; top: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none; }
.home-product-detail.is-open .home-detail__sticky { position: fixed; z-index: 60; inset: 0; height: 100svh; margin: 0; }
.home-detail__sticky img { position: absolute; top: 0; left: 0; display: block; width: min(36vw, 520px); height: auto; filter: drop-shadow(0 36px 28px rgba(43,45,29,.24)); transform: translate3d(calc(50vw - 50%), calc(50vh - 50%), 0); transform-origin: center; transition: transform .12s cubic-bezier(.22,1,.36,1), opacity .24s ease; will-change: transform, opacity; }
.home-product-detail.is-salt-detail .home-detail__sticky img { width: min(36vw, 580px); filter: drop-shadow(0 28px 23px rgba(55,41,38,.22)); }
.home-detail__chapter { position: relative; z-index: 3; display: grid; min-height: 108svh; overflow: hidden; isolation: isolate; }
.home-detail__chapter::after { position: absolute; z-index: 1; inset: 0; content: ""; opacity: .19; background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"); mix-blend-mode: multiply; pointer-events: none; }
.home-detail__chapter--intro { border-radius: 32px 32px 0 0; background: var(--detail-bg); }
.home-detail__chapter--story { background: color-mix(in srgb, var(--detail-bg) 70%, #fff); }
.home-detail__chapter--maturation { background: color-mix(in srgb, var(--detail-bg) 68%, #f7f0df); }
.home-detail__chapter--ingredients { background: color-mix(in srgb, var(--detail-bg) 74%, #e4ead9); }
.home-detail__chapter--base { background: color-mix(in srgb, var(--detail-bg) 69%, #edf0df); }
.home-detail__chapter--botanicals { background: color-mix(in srgb, var(--detail-bg) 71%, #f8ecdf); }
.home-detail__chapter--inci { background: color-mix(in srgb, var(--detail-bg) 72%, #f8f1e7); }
.home-detail__chapter--care { background: color-mix(in srgb, var(--detail-bg) 72%, #dfe7d4); }
.home-detail__chapter--specs { background: color-mix(in srgb, var(--detail-bg) 70%, #f4ecd8); }
.home-detail__chapter--final { min-height: 100svh; border-radius: 0 0 32px 32px; background: color-mix(in srgb, var(--detail-bg) 64%, #f9f4ea); }
.home-detail__copy { position: relative; z-index: 12; width: min(42vw, 560px); align-self: center; }
.home-detail__copy--intro,
.home-detail__copy--left { margin-left: clamp(28px, 8vw, 130px); }
.home-detail__copy--right { margin-left: 55%; }
.home-detail__copy > span { display: block; margin-bottom: 18px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.home-detail__copy h2,
.home-detail__copy h3 { margin: 0 0 20px; color: var(--detail-ink); font: 700 clamp(52px, 6vw, 94px)/.96 var(--serif); letter-spacing: -.055em; }
.home-detail__copy h3 { font-size: clamp(45px, 5.1vw, 76px); }
.home-detail__copy h3 em { font-weight: 400; }
.home-detail__copy p { max-width: 500px; margin: 0 0 24px; color: color-mix(in srgb, var(--detail-ink) 76%, #333b2e); font-size: 16px; line-height: 1.72; }
.home-detail__maturation-link { display: inline-flex; gap: 10px; margin-top: 2px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--detail-ink) 55%, transparent); color: var(--detail-ink); font: 800 10px/1 var(--sans); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.home-detail__maturation-link span { color: #a07b29; font-size: 16px; line-height: .6; }
.home-detail__copy > strong { display: block; margin-bottom: 16px; font: 700 26px/1 var(--serif); }
.home-detail__weight-note { margin: 10px 0 15px !important; max-width: 430px; color: color-mix(in srgb, var(--detail-ink) 77%, #364036); font-size: 12px !important; line-height: 1.5 !important; }
.home-detail__copy--base,
.home-detail__copy--botanicals { width: min(52vw, 700px); }
.home-detail__copy--right { max-width: calc(45% - 28px); }
.home-detail__copy--base,
.home-detail__copy--botanicals { padding-block: 48px; min-width: 0; }
.home-detail__copy--base { max-width: calc(100% - clamp(28px, 8vw, 130px) - 28px); }
.home-detail__base-grid,
.home-detail__botanical-grid,
.home-detail__specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 700px; margin-top: 25px; }
.home-detail__specs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-detail__botanical-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.home-detail__specs-grid .home-detail__base-card h4 { font-size: clamp(16px, 1.3vw, 19px); }
.home-detail__base-card,
.home-detail__botanical-card { min-width: 0; padding: 15px 16px 16px; border: 1px solid color-mix(in srgb, var(--detail-ink) 22%, transparent); border-radius: 2px 18px 2px 18px; background: rgba(255,255,255,.38); box-shadow: 0 12px 30px rgba(65,80,54,.06); }
.home-detail__botanical-card { border-radius: 18px 2px 18px 2px; }
.home-detail__base-card h4,
.home-detail__botanical-card h4 { margin: 0 0 7px; color: var(--detail-ink); font: 700 24px/1.12 var(--serif); letter-spacing: 0; overflow-wrap: anywhere; }
.home-detail__base-card p,
.home-detail__botanical-card p { margin: 0; color: color-mix(in srgb, var(--detail-ink) 77%, #364036); font-size: 12px; line-height: 1.48; }
.home-detail__recommended { margin: 22px 0 15px; padding: 15px 17px; border: 1px solid color-mix(in srgb, var(--detail-ink) 24%, transparent); border-radius: 18px 2px 18px 2px; background: rgba(255,255,255,.34); }
.home-detail__recommended > span { display: block; margin-bottom: 9px; color: var(--detail-ink); font: 800 9px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.home-detail__recommended > div { display: flex; flex-wrap: wrap; gap: 6px; }
.home-detail__recommended b { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--detail-ink) 22%, transparent); border-radius: 999px; color: var(--detail-ink); background: rgba(255,255,255,.36); font: 700 10px/1 var(--sans); }
.home-detail__recommended p { margin: 11px 0 0; color: color-mix(in srgb, var(--detail-ink) 76%, #364036); font-size: 12px; line-height: 1.48; }
.home-detail__back { display: block; margin: 0 0 38px; padding: 0; border: 0; color: var(--detail-ink); background: none; font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.home-detail__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.home-detail__tags b { padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.52); font-size: 10px; text-transform: lowercase; }
.home-detail__add { min-height: 45px; padding: 0 19px; border: 1px solid var(--detail-ink); border-radius: 999px; color: #fff; background: var(--detail-ink); box-shadow: 0 13px 26px color-mix(in srgb, var(--detail-ink) 25%, transparent); font: 700 11px/1 var(--sans); cursor: pointer; }
.home-detail__purchase { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; width: fit-content; }
.home-detail__purchase .stock-notice { border-color: color-mix(in srgb, var(--detail-ink) 36%, transparent); color: var(--detail-ink); background: rgba(255,255,255,.56); }
.home-detail__intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.home-detail__favorite { display: grid; width: 45px; height: 45px; padding: 0; border: 1px solid color-mix(in srgb, var(--detail-ink) 32%, transparent); border-radius: 50%; place-items: center; color: var(--detail-ink); background: rgba(255,255,255,.38); cursor: pointer; }
.home-detail__favorite.is-favorite { border-color: var(--detail-ink); color: #fff; background: var(--detail-ink); }
.home-detail__favorite .material-symbols-outlined { font-size: 20px; }
.home-detail__availability { display: inline-flex; min-height: 45px; align-items: center; padding: 0 17px; border: 1px solid color-mix(in srgb, var(--detail-ink) 36%, transparent); border-radius: 999px; color: var(--detail-ink); background: rgba(255,255,255,.42); font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.home-detail__scroll-hint { position: absolute; z-index: 14; bottom: 110px; left: 50%; display: grid; gap: 4px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--detail-ink) 24%, transparent); border-radius: 999px; place-items: center; color: var(--detail-ink); background: rgba(255,255,255,.2); font: 700 8px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transform: translateX(-50%); transition: background .2s ease; }
.home-detail__scroll-hint:hover { background: rgba(255,255,255,.52); }
.home-detail__scroll-hint span { opacity: .78; }
.home-detail__scroll-leaf { display: block; width: 18px; height: 20px; max-width: 18px; max-height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; animation: detail-scroll-cue 1.8s ease-in-out infinite; }
@keyframes detail-scroll-cue { 0%,100% { transform: translateY(-1px) rotate(-2deg); opacity: .52; } 50% { transform: translateY(3px) rotate(2deg); opacity: 1; } }
.home-detail__copy i { display: grid; width: 93px; aspect-ratio: 1; margin-top: 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--detail-ink) 65%, transparent); border-radius: 50%; font: italic 17px/1 var(--serif); text-align: center; transform: rotate(-11deg); }
.home-detail__word,
.home-detail__outline { position: absolute; z-index: 2; margin: 0; color: color-mix(in srgb, var(--detail-ink) 16%, transparent); font: 700 clamp(150px, 19vw, 320px)/.75 var(--sans); letter-spacing: -.09em; white-space: nowrap; user-select: none; }
.home-detail__word { top: 50%; left: 49%; transform: translateY(-50%); }
.home-detail__outline { bottom: 8%; left: -3%; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--detail-ink) 25%, transparent); }
.home-detail__outline--right { right: -3%; left: auto; }
.home-detail__satellites { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.home-detail__satellite { position: absolute; display: block; width: clamp(105px, 14vw, 220px); aspect-ratio: 1; background-image: url("/images/hero-v2/ingredient-slider-sheet.webp"); background-repeat: no-repeat; background-size: 300% 300%; filter: blur(3px) drop-shadow(0 20px 16px rgba(43,47,31,.15)); opacity: 0; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter .7s ease; }
.home-detail__satellite.sat--additional { background-image: url("/images/hero-v2/ingredient-additional-sheet.webp"); }
.home-detail__satellite.sat--sugar { background-image: url("/images/hero-v2/ingredient-sugar.webp"); background-position: center; background-size: cover; }
.home-detail__satellite.sat--verbena { width: clamp(160px, 17vw, 260px); background-image: url("/images/hero-v2/ingredient-lemon-verbena.webp"); background-position: center; background-size: cover; }
.home-detail__satellite.sat--lemongrass { aspect-ratio: 4000 / 2399; background-image: url("/images/hero-v2/ingredient-lemongrass.webp"); background-position: center; background-size: contain; }
.home-detail__satellite--1 { top: 13%; left: 6%; width: clamp(145px, 20vw, 320px); transform: translate(-50%, -30%) scale(.6) rotate(-23deg); }
.home-detail__satellite--2 { top: 14%; right: 9%; transform: translate(45%, -34%) scale(.58) rotate(19deg); }
.home-detail__satellite--3 { right: 5%; bottom: 9%; width: clamp(145px, 19vw, 280px); transform: translate(45%, 36%) scale(.58) rotate(18deg); }
.home-detail__chapter.is-current .home-detail__satellite { opacity: .92; filter: blur(0) drop-shadow(0 20px 16px rgba(43,47,31,.15)); }
.home-detail__chapter.is-current .home-detail__satellite--1 { transform: translate(0,0) scale(1) rotate(-8deg); }
.home-detail__chapter.is-current .home-detail__satellite--2 { transform: translate(0,0) scale(1) rotate(8deg); }
.home-detail__chapter.is-current .home-detail__satellite--3 { transform: translate(0,0) scale(1) rotate(-8deg); }
.home-detail__satellites--story .home-detail__satellite--1 { top: 10%; left: auto; right: 8%; }
.home-detail__satellites--story .home-detail__satellite--2 { top: auto; right: 19%; bottom: 8%; }
.home-detail__satellites--story .home-detail__satellite--3 { top: 49%; right: 2%; bottom: auto; }
.home-detail__satellites--ingredients .home-detail__satellite--1 { top: 12%; left: 4%; }
.home-detail__satellites--ingredients .home-detail__satellite--2 { top: auto; right: auto; bottom: 8%; left: 12%; }
.home-detail__satellites--ingredients .home-detail__satellite--3 { right: 7%; bottom: 10%; }
.home-detail__satellites--base .home-detail__satellite--1 { top: 11%; left: 4%; }
.home-detail__satellites--base .home-detail__satellite--2 { right: 8%; bottom: 9%; top: auto; }
.home-detail__satellites--base .home-detail__satellite--3 { right: 4%; bottom: auto; top: 45%; }
.home-detail__satellites--botanicals .home-detail__satellite--1 { top: 12%; left: 5%; }
.home-detail__satellites--botanicals .home-detail__satellite--2 { right: 8%; bottom: 9%; top: auto; }
.home-detail__satellites--botanicals .home-detail__satellite--3 { right: 4%; bottom: auto; top: 47%; }

.v2-collection,
.v2-about,
.v2-footer { font-family: var(--sans); }
.v2-collection[hidden],
.v2-about[hidden],
.v2-footer[hidden] { display: none !important; }
.v2-collection {
  padding: clamp(72px, 9vw, 132px) clamp(20px, 7vw, 112px);
  color: #31382c;
  background: #f4efe1;
}
.v2-section-heading { max-width: 670px; margin: 0 auto clamp(42px, 5vw, 70px); text-align: center; }
.v2-section-heading > span,
.v2-about__copy > span { display: block; margin-bottom: 13px; color: #847045; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.v2-section-heading h2,
.v2-about h2 { margin: 0; color: #3d4938; font: 700 clamp(37px, 4.7vw, 66px)/1.02 var(--serif); letter-spacing: -.04em; }
.v2-section-heading p { max-width: 560px; margin: 18px auto 0; color: #6a7160; font-size: 15px; line-height: 1.7; }
.v2-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); max-width: 1320px; margin: auto; }
.v2-card { display: flex; flex-direction: column; overflow: hidden; min-height: 100%; border: 1px solid rgba(82,91,69,.17); border-radius: 22px; color: #3a4234; background: rgba(255,255,255,.54); box-shadow: 0 18px 45px rgba(68,60,42,.08); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.v2-card:hover { box-shadow: 0 26px 65px rgba(68,60,42,.15); transform: translateY(-7px); }
.v2-card__media { position: relative; display: grid; min-height: 255px; place-items: center; overflow: hidden; padding: 18px; background: var(--card-bg, #ebe0d8); }
.v2-card__media::after { position: absolute; z-index: 0; bottom: 11%; left: 50%; width: 56%; height: 8%; border-radius: 50%; content: ""; background: rgba(60,60,40,.18); filter: blur(13px); transform: translateX(-50%); }
.v2-card__media img { position: relative; z-index: 1; width: 92%; max-height: 255px; object-fit: contain; filter: drop-shadow(0 18px 14px rgba(48,49,32,.19)); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.v2-card:hover .v2-card__media img { transform: scale(1.06) rotate(-1.5deg); }
.v2-card__favorite { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(62,73,55,.17); border-radius: 50%; color: #617053; background: rgba(255,255,255,.76); cursor: pointer; }
.v2-card__favorite.is-favorite { color: #fff; background: #9c5b59; }
.v2-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.v2-card__meta { margin-bottom: 9px; color: #7d856f; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.v2-card h3 { margin: 0; font: 700 29px/1.1 var(--serif); letter-spacing: -.03em; }
.v2-card h3 a { color: inherit; text-decoration: none; }
.v2-card p { min-height: 48px; margin: 12px 0 18px; color: #66705e; font-size: 13px; line-height: 1.6; }
.v2-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.v2-card__price { color: #546746; font: 700 20px/1 var(--serif); }
.v2-card__purchase { position: relative; display: grid; justify-items: end; gap: 7px; }
.v2-card__purchase .stock-notice { color: #77513b; }
.v2-card__add { min-height: 39px; padding: 0 14px; border: 1px solid #546746; border-radius: 999px; color: #fff; background: #546746; font: 700 10px/1 var(--sans); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.v2-card__add:hover { background: #3f5334; transform: translateY(-2px); }
.v2-about { display: grid; grid-template-columns: minmax(290px, .8fr) minmax(0, 1.12fr); gap: clamp(38px, 8vw, 130px); align-items: start; padding: clamp(74px, 10vw, 150px) clamp(20px, 9vw, 150px); color: #303a31; background: #dfe7d4; }
.v2-about__image { position: sticky; top: 40px; overflow: hidden; border-radius: 50% 50% 22px 22px; box-shadow: 0 24px 60px rgba(56,70,48,.18); }
.v2-about__image img { display: block; width: 100%; min-height: 560px; object-fit: cover; object-position: center; filter: saturate(.83) sepia(.08); }
.v2-about__copy { max-width: 700px; padding-top: 12px; }
.v2-about__copy h2 { margin-bottom: 30px; }
.v2-about__copy p { margin: 0 0 17px; color: #566150; font-size: 15px; line-height: 1.76; }
.v2-about__copy .v2-about__thanks { margin-top: 30px; color: #536447; font: 400 24px/1.35 var(--serif); }
.v2-footer { display: grid; grid-template-columns: 1fr auto; gap: 12px 36px; align-items: center; padding: 36px clamp(20px, 7vw, 112px); color: #e5eddb; background: #354936; }
.v2-footer > span { font: 700 23px/1 var(--serif); }
.v2-footer p { margin: 0; color: #c7d4bb; font-size: 12px; }
.v2-footer div { display: flex; grid-column: 2; grid-row: 1 / span 2; gap: 18px; }
.v2-footer a { color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .2s ease both fade-out; }
::view-transition-new(root) { animation: .42s .08s cubic-bezier(.16,1,.3,1) both rise-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }

.slider-arrow {
  position: absolute;
  z-index: 30;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #262a22;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(55,56,41,.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .2s ease, background .2s ease;
}
.slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.slider-arrow svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.slider-arrow--prev { left: calc(50% - min(24vw, 330px)); }
.slider-arrow--next { right: calc(50% - min(24vw, 330px)); }

.slider-progress {
  position: absolute;
  z-index: 35;
  bottom: 35px;
  left: 50%;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}
.slider-progress button {
  width: 34px;
  height: 12px;
  padding: 5px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.slider-progress button span { display: block; height: 2px; background: rgba(35,39,31,.28); }
.slider-progress button.is-active span { background: #25291f; }

.slider-counter,
.slider-signature {
  position: absolute;
  z-index: 30;
  bottom: 31px;
  margin: 0;
  color: rgba(35,39,31,.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.slider-counter { left: clamp(24px, 4.8vw, 78px); }
.slider-counter strong { margin-right: 6px; color: #25291f; font-size: 14px; }
.slider-signature { right: clamp(24px, 4.8vw, 78px); }

@media (max-width: 760px) {
  .slider-nav { grid-template-columns: 1fr auto; min-height: 74px; padding: 10px 15px; }
  .slider-brand__logo { width: 120px; }
  .slider-brand { position: relative; z-index: 61; }
  .slider-links { position: fixed; z-index: 60; inset: 0; display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; padding: 100px 30px 48px; color: #30382f; background: rgba(246,241,228,.98); opacity: 0; transition: opacity .24s ease, visibility 0s linear .24s; }
  .slider-links::before { position: absolute; top: 78px; right: 30px; left: 30px; height: 1px; content: ""; background: rgba(83,106,63,.2); }
  .slider-links a,
  .slider-links button { font: 700 clamp(34px, 10vw, 47px)/1 var(--serif); letter-spacing: -.045em; }
  .slider-links a::after,
  .slider-links button::after { right: auto; bottom: -9px; width: 54px; transform: scaleX(0); transform-origin: left; }
  body.is-mobile-menu-open .slider-links { visibility: visible; opacity: 1; transition-delay: 0s; }
  .slider-actions { position: relative; z-index: 61; gap: 5px; }
  .slider-actions a, .slider-menu-toggle { display: grid; width: 36px; height: 44px; place-items: center; }
  .slider-menu-toggle { display: grid; }
  body.is-mobile-menu-open .slider-menu-toggle svg path:nth-child(1) { transform: translateY(5px) rotate(45deg); transform-origin: center; }
  body.is-mobile-menu-open .slider-menu-toggle svg path:nth-child(2) { opacity: 0; }
  body.is-mobile-menu-open .slider-menu-toggle svg path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); transform-origin: center; }
  .slide-kicker { top: 17%; max-width: calc(100% - 30px); overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
  .slide-name { top: 67%; font-size: 39px; }
  .slide-name--long { font-size: 34px; }
  .slide-product { top: 45%; width: 100vw; height: min(54vw, 250px); }
  .product-group { grid-template-columns: 1fr; align-content: center; gap: 18px; min-height: 100svh; padding: 104px 24px 58px; }
  .product-group__copy { max-width: 440px; }
  .product-group h1 { font-size: clamp(43px, 12vw, 61px); }
  .product-group p { font-size: 14px; line-height: 1.62; }
  .product-group__actions { margin-top: 20px; }
  .product-group__button { min-height: 41px; padding: 0 14px; font-size: 10px; }
  .product-group__variants { gap: 7px; margin-top: 18px; }
  .product-group__variant { gap: 9px; padding: 9px 10px 9px 12px; border-radius: 12px; }
  .product-group__variant strong { font-size: 19px; }
  .product-group__variant .product-group__price { font-size: 14px; }
  .product-group__variant .product-group__price del { font-size: 10.5px; }
  .product-group__price-badge { padding: 4px 8px; font-size: 8.5px; }
  .product-group__variant .product-group__price-note { font-size: 9.5px; }
  .product-group__variant p { font-size: 10px; }
  .product-group__variant .product-group__button { min-height: 34px; padding: 0 10px; font-size: 8px; }
  .product-group__variant--available .product-group__button--fill { min-height: 40px; padding: 0 13px; font-size: 9px; }
  .product-group__variant--available .product-group__button--fill svg { width: 14px; height: 14px; }
  .product-group__visual { min-height: 285px; margin-top: -20px; }
  .product-group__visual > span { width: 76vw; }
  .product-group__visual::after { bottom: 8%; width: 66vw; }
  .product-group__visual img { width: min(86vw, 390px); max-height: 440px; }
  .product-group--salts { grid-template-columns: 1fr; }
  .salt-preview { width: min(100%, 390px); margin: 4px auto 0; gap: 14px; }
  .salt-preview article { min-height: 250px; padding: 18px; }
  .salt-preview article:nth-child(2) { transform: translateY(24px); }
  .salt-slide__kicker { top: 17%; max-width: calc(100% - 36px); font-size: 8px; line-height: 1.4; white-space: normal; }
  .salt-slide h2 { top: 67%; font-size: 38px; }
  .soap-slide.salt-slide .slide-name { top: 67%; font-size: 38px; }
  .salt-vessel { top: 43%; width: min(54vw, 220px); height: min(70vw, 285px); }
  .soap-slide.salt-slide .salt-vessel { top: 43%; width: min(42vw, 190px); height: min(40vh, 290px); }
  .salt-vessel__label { padding: 11px; }
  .salt-vessel__label b { margin-bottom: 10px; font-size: 8px; }
  .salt-vessel__label strong { font-size: 26px; }
  .salt-vessel__label small { margin-top: 10px; }
  .salt-slide__details { top: 75%; min-height: 39px; font-size: 9px; }
  .soap-slide.salt-slide .slide-cta { bottom: 14%; min-height: 38px; font-size: 9px; }
  .salt-slider__arrow { top: 45%; width: 38px; height: 38px; font-size: 29px; }.salt-slider__arrow--prev { left: 14px; }.salt-slider__arrow--next { right: 14px; }
  .salt-slider__progress { bottom: 25px; }.salt-slider__progress button { width: 26px; }.salt-slider__counter { bottom: 23px; left: 16px; }
  .salt-detail { padding: 102px 20px 54px; }.salt-detail__back { margin-bottom: 33px; }.salt-detail__grid { grid-template-columns: 1fr; gap: 28px; }.salt-detail__grid h2 { font-size: 53px; }.salt-detail__grid p, .salt-detail__grid li { font-size: 14px; line-height: 1.62; }
  .sat--a { top: 24%; left: -22%; width: 48vw; }
  .sat--b { top: 15%; left: 13%; width: 25vw; }
  .sat--c { top: 20%; right: -3%; width: 27vw; }
  .sat--d { right: -25%; bottom: 17%; width: 51vw; }
  .sat--e { bottom: 17%; left: 1%; width: 28vw; }
  .soap-slide[data-product="lemon"] .sat--verbena { width: 31vw; }
  .slide-cta { bottom: 14%; min-width: 126px; min-height: 38px; }
  .slide-buy { top: 76%; }
  .slide-quantity { min-height: 40px; }
  .slide-quantity button { width: 34px; height: 38px; }
  .slide-add { min-height: 40px; padding: 0 13px; font-size: 10px; }
  .slider-progress button { width: 26px; }
  .slider-arrow { top: 48%; width: 38px; height: 38px; }
  .slider-arrow--prev { left: 14px; }
  .slider-arrow--next { right: 14px; }
  .slider-counter { bottom: 23px; left: 16px; }
  .slider-signature { right: 16px; bottom: 24px; font-size: 8px; }
  .slider-progress { bottom: 25px; }
  .home-detail__chapter { min-height: 116svh; }
  .home-detail__sticky img { width: 320px; }
  .home-product-detail.is-salt-detail .home-detail__sticky img { width: min(52vw, 240px); }
  .home-detail__copy { width: calc(100% - 38px); max-width: calc(100% - 38px); margin-left: 19px; }
  .home-detail__copy--intro { align-self: end; padding-bottom: 52px; }
  .home-detail__copy--maturation { align-self: start; padding-top: 15vh; }
  .home-detail__copy--left,
  .home-detail__copy--right { margin-left: 19px; }
  .home-detail__copy--base,
  .home-detail__copy--botanicals { width: calc(100% - 38px); }
  .home-detail__base-grid,
  .home-detail__botanical-grid,
  .home-detail__specs-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .home-detail__base-card,
  .home-detail__botanical-card { padding: 13px 14px; }
  .home-detail__base-card h4,
  .home-detail__botanical-card h4 { font-size: 22px; }
  .home-detail__base-card p,
  .home-detail__botanical-card p,
  .home-detail__recommended p { font-size: 11px; }
  .home-detail__copy h2,
  .home-detail__copy h3 { font-size: 46px; }
  .home-detail__copy p { font-size: 14px; line-height: 1.68; }
  .home-detail__word { display: none; }
  .home-detail__outline { font-size: 105px; }
  .home-detail__scroll-hint { bottom: 68px; font-size: 7px; }
  .home-detail__satellite--1 { top: 12%; left: 3%; width: 35vw; }
  .home-detail__satellite--2 { top: 15%; right: 3%; width: 25vw; }
  .home-detail__satellite--3 { right: 3%; bottom: 10%; width: 34vw; }
  .v2-collection { padding: 68px 16px; }
  .v2-product-grid { grid-template-columns: 1fr; max-width: 430px; }
  .v2-card__media { min-height: 290px; }
  .v2-about { grid-template-columns: 1fr; padding: 70px 20px; }
  .v2-about__image { position: relative; top: auto; max-width: 460px; margin: auto; }
  .v2-about__image img { min-height: 430px; }
  .v2-footer { grid-template-columns: 1fr; }
  .v2-footer div { grid-column: auto; grid-row: auto; }
}

@media (max-width: 360px) {
  .slider-action-link[aria-label="Ulubione"], .slider-action-link[aria-label="Profil"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .soap-slider,
  .soap-slide,
  .slide-name,
  .slide-product,
  .satellite,
  .slide-kicker,
  .slide-cta,
  .slide-buy,
  .v2-card,
  .v2-card__media img { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .satellite { animation: none !important; }
}