@font-face{font-family:"Young Serif";src:url(fonts/young-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --kraft:#E2CFAD; --kraft-deep:#D5BE96; --tent:#F7F2E8; --ink:#2A2018; --ink-soft:#5A4A3A;
  --gulf:#1E5652; --gulf-deep:#153F3C; --sign:#1D1B18; --honey:#C98A1B; --wood:#A9794A;
  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --r1:4px;--r2:8px;
  --shadow:0 1px 0 rgba(42,32,24,.08),0 12px 24px -12px rgba(42,32,24,.35);
  --out:cubic-bezier(.2,.7,.2,1); --quick:160ms; --base:240ms;
  --z-header:10; --z-skip:20;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kraft) var(--grain);color:var(--ink);font:400 18px/1.55 var(--sans);text-rendering:optimizeLegibility}
::selection{background:var(--gulf);color:#fff}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.005em}
p,li,dd{text-wrap:pretty}
p{margin:0}
a{color:var(--gulf)}
:focus-visible{outline:3px solid var(--gulf);outline-offset:3px;border-radius:var(--r1)}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:var(--z-skip);background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r2)}
.skip:focus{top:16px}

/* header */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--kraft) 92%,transparent);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid rgba(42,32,24,.14)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:72px}
.wordmark{display:inline-flex;align-items:center;gap:var(--s3);color:var(--ink);text-decoration:none;font:400 22px/1 var(--serif)}
.mark{width:32px;height:32px;color:var(--gulf)}
.nav{display:flex;gap:var(--s5);list-style:none;margin:0;padding:0;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;padding:12px 0;position:relative}
.nav a.nav-cta{border:1.5px solid var(--ink);padding:10px 16px;border-radius:var(--r2)}
@media (hover:hover) and (pointer:fine){
  .nav a:not(.nav-cta):hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
  .nav a.nav-cta:hover{background:var(--ink);color:var(--kraft)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s5);border-radius:var(--r2);font:600 18px/1 var(--sans);text-decoration:none;transition:transform var(--quick) var(--out),background var(--quick) var(--out)}
.btn-primary{background:var(--gulf);color:#fff;box-shadow:0 2px 0 var(--gulf-deep)}
.btn-primary:active{transform:translateY(2px);box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--gulf-deep)}}
.text-link{color:var(--ink);font-weight:600;text-underline-offset:5px;text-decoration-thickness:1.5px;padding:14px 0}

/* hero */
.hero{padding:var(--s8) 0 var(--s9)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.kicker{font-weight:600;font-size:16px;color:var(--ink-soft);margin-bottom:var(--s5);display:flex;align-items:center;gap:var(--s3)}
.kicker::before{content:"";width:32px;height:2px;background:var(--honey)}
.hero h1{font-size:64px;line-height:1.04;max-width:13ch}
.lede{font-size:22px;line-height:1.5;color:var(--ink-soft);max-width:34ch;margin-top:var(--s5)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.hero-visual{position:relative;max-width:500px;justify-self:end;width:100%}
.hero-photo{transform:rotate(-1.5deg)}

/* hang tag (the one loud thing) */
.tag{position:absolute;left:-56px;bottom:56px;width:172px;padding:40px 18px 20px;background:#C9A36B var(--grain);color:var(--ink);border-radius:var(--r1);
  clip-path:polygon(22% 0,78% 0,100% 13%,100% 100%,0 100%,0 13%);
  box-shadow:var(--shadow);text-align:center;transform-origin:50% -40px;transform:rotate(-7deg);
  animation:swing 1.6s var(--out) .35s both;filter:drop-shadow(0 10px 14px rgba(42,32,24,.3))}
.tag::before{content:"";position:absolute;left:50%;top:-60px;width:1.5px;height:76px;background:#6b4a2a;transform:translateX(-50%) rotate(14deg);transform-origin:bottom}
.tag-hole{position:absolute;left:50%;top:14px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--kraft);box-shadow:inset 0 0 0 2px #8a6a3f}
.tag-line{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;color:#3d2d1f}
.tag-price{display:block;font:400 48px/1 var(--serif);margin-top:2px;font-variant-numeric:tabular-nums}
.tag-price--sm{font-size:36px}
.tag-rule{display:block;height:0;border-top:1.5px dashed rgba(42,32,24,.45);margin:var(--s3) 0}
@keyframes swing{0%{transform:rotate(9deg)}30%{transform:rotate(-13deg)}55%{transform:rotate(-3deg)}75%{transform:rotate(-8.5deg)}100%{transform:rotate(-7deg)}}

/* photos */
.photo{margin:0;position:relative}
.photo img,.photo-gap{width:100%;aspect-ratio:var(--ratio);object-fit:cover;border-radius:var(--r2);background:var(--kraft-deep)}
.photo img{height:auto;box-shadow:var(--shadow)}
.photo-gap{display:grid;place-items:center;padding:var(--s5);
  background-color:#C7AC7E;
  background-image:repeating-linear-gradient(0deg,rgba(90,62,30,.22) 0 2px,transparent 2px 6px),repeating-linear-gradient(90deg,rgba(255,240,210,.18) 0 2px,transparent 2px 6px),var(--grain);
  box-shadow:inset 0 0 0 1px rgba(42,32,24,.25)}
.gap-label{background:var(--tent);border-radius:var(--r1);padding:var(--s4) var(--s5);max-width:300px;display:grid;gap:var(--s1);box-shadow:var(--shadow);text-align:left}
.gap-label b{font:400 18px/1.2 var(--serif)}
.gap-label span{font-size:14px;line-height:1.4;color:var(--ink-soft)}
.gap-label code{font-size:12px;color:var(--ink-soft);margin-top:var(--s1)}
.artist .gap-label{padding:var(--s2) var(--s3)}.artist .gap-label span,.artist .gap-label code{display:none}
.photo figcaption{font-size:14px;color:var(--ink-soft);margin-top:var(--s2)}
.hero-photo figcaption{text-align:right;padding-right:var(--s2)}

/* sections */
section{position:relative}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:end;margin-bottom:var(--s7)}
.section-head h2,.sponge-copy h2,.inside-copy h2,.care h2,.visit h2{font-size:48px}
.section-head p{color:var(--ink-soft);max-width:44ch}

.soap{background:var(--tent) var(--grain);padding:var(--s9) 0;border-block:1px solid rgba(42,32,24,.12)}
.soap-photos{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s6);margin-bottom:var(--s7);align-items:start}
.price-sign{background:var(--sign);color:#EFE8DC;border-radius:var(--r2);padding:var(--s6);box-shadow:var(--shadow),inset 0 0 0 8px #2b2722,inset 0 0 0 9px rgba(239,232,220,.25);font-variant-numeric:tabular-nums}
.ps-head{font-weight:600;font-size:16px;color:#E9C46A}
.ps-big{font:400 64px/1 var(--serif);color:#fff;margin-top:var(--s2)}
.ps-sub{font-size:18px;margin-top:var(--s2);color:#E9C46A}
.ps-math{margin:var(--s5) 0 0;border-top:1px dashed rgba(239,232,220,.3)}
.ps-math div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px dashed rgba(239,232,220,.3)}
.ps-math dt{color:#cfc5b4}.ps-math dd{margin:0;font-weight:600}
.ps-note{margin-top:var(--s4);font-size:14px;color:#cfc5b4}

.filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s6);padding-bottom:var(--s4);border-bottom:1.5px solid rgba(42,32,24,.18)}
.filter-btn{font:600 16px/1 var(--sans);color:var(--ink);background:transparent;border:1.5px solid rgba(42,32,24,.4);border-radius:var(--r1);min-height:44px;padding:0 var(--s4);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);transition:background var(--quick) var(--out)}
.filter-btn .count{font-weight:500;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.filter-btn[aria-pressed="true"]{background:var(--ink);color:var(--tent);border-color:var(--ink)}
.filter-btn[aria-pressed="true"] .count{color:#d9cbb3}
@media (hover:hover) and (pointer:fine){.filter-btn[aria-pressed="false"]:hover{background:rgba(42,32,24,.07)}}
.filter-status{margin-left:auto;font-size:14px;color:var(--ink-soft)}

.soap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5)}

.soap-item[hidden]{display:none}
.soap-item.is-in{animation:rise var(--base) var(--out) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bar-art{width:100%;max-width:220px;height:auto;display:block;margin-bottom:var(--s3)}
.soap-line{font-size:14px;font-weight:600;color:var(--ink-soft)}
.soap-name{font-size:22px;line-height:1.2;margin-top:var(--s1)}
.tbc{display:block;width:fit-content;margin-top:var(--s2);font-size:14px;border:1.5px dashed #8a6a3f;border-radius:var(--r1);padding:2px 8px;background:#fff6d8}
.math{margin-top:var(--s7);padding:var(--s5);border:1.5px solid rgba(42,32,24,.2);border-radius:var(--r2);max-width:760px;font-variant-numeric:tabular-nums}

/* sponges */
.sponges{padding:var(--s9) 0}
.sponge-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s8);align-items:start}
.lede-sm{color:var(--ink-soft);margin-top:var(--s4);max-width:46ch}
.board{width:100%;border-collapse:collapse;margin-top:var(--s6);font-variant-numeric:tabular-nums;background:var(--tent);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow)}
.board th,.board td{padding:var(--s4) var(--s5);text-align:left;border-bottom:1px solid rgba(42,32,24,.12)}
.board thead th{font-size:14px;font-weight:600;color:var(--ink-soft);background:#EFE6D4}
.board tbody th{font:400 22px/1.2 var(--serif)}
.board td{font-size:22px;font-weight:500}
.board tr:last-child>*{border-bottom:0}
.board td:last-child,.board th:last-child{text-align:right}
.artist{display:grid;grid-template-columns:200px 1fr;gap:var(--s5);align-items:center;margin-top:var(--s6)}
.artist figcaption{display:none}
.artist h3{font-size:28px}
.artist p{margin-top:var(--s2);color:var(--ink-soft)}

/* inside */
.inside{padding:var(--s9) 0;background:var(--kraft-deep) var(--grain)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.inside-copy p{margin-top:var(--s4);max-width:46ch}
.sign{background:var(--sign);color:#EFE8DC;border-radius:var(--r2);padding:var(--s7);box-shadow:var(--shadow),inset 0 0 0 10px #2b2722,inset 0 0 0 11px rgba(239,232,220,.25)}
.sign-title{font:400 36px/1 var(--serif);color:#fff}
.sign-sub{margin-top:var(--s2);color:#cfc5b4;font-size:16px}
.sign-list{list-style:none;margin:var(--s5) 0 0;padding:0}
.sign-list li{padding:var(--s3) 0;border-bottom:1px dashed rgba(239,232,220,.25);font-size:18px}
.sign-foot{margin-top:var(--s5);font-size:14px;color:#cfc5b4}

/* care */
.care{padding:var(--s9) 0}
.care-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:var(--s7);align-items:start}
.care-list{margin:0;padding:0;list-style:none}
.care-list li{position:relative;padding:0 0 var(--s4) 40px;margin-bottom:var(--s4);border-bottom:1px solid rgba(42,32,24,.15)}
.care-list li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:22px;background:var(--honey);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.care-list strong{font-weight:600}
.also h3{font-size:22px}
.also p{margin-top:var(--s2);color:var(--ink-soft)}
.care .weight{color:var(--ink-soft)}

/* visit */
.visit{padding:0 0 var(--s9)}
.visit-card{display:grid;grid-template-columns:auto 1fr;gap:var(--s7);align-items:center;background:var(--tent) var(--grain);border-radius:var(--r2);padding:var(--s8);box-shadow:var(--shadow)}
.stamp{width:200px;height:200px;border:3px solid var(--gulf);border-radius:50%;display:grid;place-items:center;transform:rotate(-10deg);color:var(--gulf);position:relative}
.stamp::before{content:"";position:absolute;inset:10px;border:1.5px dashed var(--gulf);border-radius:50%}
.stamp span{font:400 36px/1 var(--serif);text-transform:uppercase;letter-spacing:.06em}
.visit-copy p{margin-top:var(--s4);max-width:52ch;color:var(--ink-soft)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6);margin:var(--s6) 0 0}
.facts dt{font-size:14px;font-weight:600;color:var(--ink-soft)}
.facts dd{margin:var(--s1) 0 0}
.ph{display:inline-block;border:1.5px dashed #8a6a3f;background:#fff6d8;border-radius:var(--r1);padding:2px 8px;font-size:16px;color:var(--ink)}

/* footer */
.site-footer{border-top:1px solid rgba(42,32,24,.18);padding:var(--s7) 0 var(--s8)}
.footer-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s6);align-items:baseline}
.footer-brand{font:400 22px/1 var(--serif)}
.footer-row p{font-size:16px;color:var(--ink-soft)}
.footer-meta{display:flex;gap:var(--s2);flex-wrap:wrap}

/* responsive */
@media (max-width:1080px){
  .soap-photos{grid-template-columns:1fr 1fr}
  .hero h1{font-size:48px}
  .soap-grid{grid-template-columns:repeat(3,1fr)}
  .care-grid{grid-template-columns:1fr 1fr}.care-grid h2{grid-column:1/-1}
}
@media (max-width:860px){
  .nav li:not(:last-child){display:none}
  .hero{padding:var(--s6) 0 var(--s8)}
  .hero-grid,.sponge-grid,.inside-grid,.section-head{grid-template-columns:1fr;gap:var(--s6)}
  .hero-visual{justify-self:center;max-width:440px;margin-top:var(--s4)}
  .tag{left:-8px;bottom:40px;width:148px;padding:36px 14px 16px}
  .tag-price{font-size:36px}.tag-price--sm{font-size:28px}
  .visit-card{grid-template-columns:1fr;padding:var(--s6)}
  .stamp{width:136px;height:136px}.stamp span{font-size:22px}
  .footer-row{grid-template-columns:1fr;gap:var(--s3)}
  .section-head{margin-bottom:var(--s6)}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{width:min(100% - 32px,1240px)}
  .hero h1{font-size:36px}
  .lede{font-size:18px}
  .section-head h2,.sponge-copy h2,.inside-copy h2,.care h2,.visit h2{font-size:36px}
  .soap,.sponges,.inside,.care{padding:var(--s8) 0}
  .soap-photos{grid-template-columns:1fr;gap:var(--s5)}.ps-big{font-size:48px}.soap-photos .gap-label span,.soap-photos .gap-label code{display:none}.soap-photos .gap-label{padding:var(--s2) var(--s3)}
  .soap-grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .soap-name{font-size:18px}
  .filter-status{width:100%;margin-left:0}
  .board th,.board td{padding:var(--s3) var(--s4)}
  .board td,.board tbody th{font-size:18px}
  .artist{grid-template-columns:112px 1fr;gap:var(--s4)}
  .artist h3{font-size:22px}
  .sign{padding:var(--s6)}
  .care-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .wordmark{font-size:20px}
  .btn{width:100%}
  .hero-actions{gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* iteration 2 fixes */
.hero-photo .photo-gap{place-items:start end}
@media (max-width:860px){
  .sponge-copy{order:-1}
  .sponge-photo .photo img,.sponge-photo .photo-gap{aspect-ratio:4/3;object-position:50% 38%}
  .tag{bottom:24px}
}

/* ===== interactive layer ===== */
.no-js [data-js]{display:none!important}
.tabnum{font-variant-numeric:tabular-nums}
.finder{display:grid;gap:var(--s3);margin-bottom:var(--s6);padding-bottom:var(--s4);border-bottom:1.5px solid rgba(42,32,24,.18)}
.finder .filter{margin:0;padding:0;border:0}
.filter-label{font-size:14px;font-weight:600;color:var(--ink-soft);width:56px}
.scent-btn{font:600 16px/1 var(--sans);color:var(--ink);background:transparent;border:1.5px solid rgba(42,32,24,.4);border-radius:var(--r1);min-height:44px;padding:0 var(--s4);cursor:pointer}
.scent-btn[aria-pressed="true"]{background:var(--gulf);border-color:var(--gulf);color:#fff}
@media (hover:hover) and (pointer:fine){.scent-btn[aria-pressed="false"]:hover{background:rgba(42,32,24,.07)}}
.finder-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.finder-foot .filter-status{margin:0;font-size:16px;color:var(--ink)}
.surprise{margin-left:auto;font:600 16px/1 var(--sans);color:var(--gulf);background:none;border:0;min-height:44px;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}

.soap-item{position:relative;border-radius:var(--r2);padding:var(--s3);margin:calc(-1 * var(--s3));transition:background var(--base) var(--out)}
.bar-art{transition:transform var(--base) var(--out)}
@media (hover:hover) and (pointer:fine){.soap-item:hover .bar-art{transform:translateY(-6px) rotate(-1.5deg)}}
.soap-item.in-list{background:rgba(201,138,27,.12)}
.soap-item.in-list .bar-art{transform:translateY(-4px)}
.soap-item.is-picked{background:rgba(30,86,82,.1);box-shadow:inset 0 0 0 2px var(--gulf)}
.soap-item.bump .bar-art{animation:bump 420ms var(--out)}
@keyframes bump{0%{transform:translateY(0)}35%{transform:translateY(-12px) rotate(-3deg)}100%{transform:translateY(-4px)}}
.stepper{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s3);border:1.5px solid rgba(42,32,24,.3);border-radius:var(--r2);background:var(--tent)}
.step{width:44px;height:44px;border:0;background:none;font:500 22px/1 var(--sans);color:var(--ink);cursor:pointer;border-radius:var(--r2)}
.step:disabled{color:rgba(42,32,24,.3);cursor:default}
@media (hover:hover) and (pointer:fine){.step:not(:disabled):hover{background:rgba(42,32,24,.08)}}
.step-plus{color:var(--gulf);font-weight:600}
.step-count{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.list-hint{margin-top:var(--s6);color:var(--ink-soft);font-size:16px}

.tray{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-header);background:var(--ink);color:var(--tent);box-shadow:0 -10px 30px -10px rgba(42,32,24,.45);padding:var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));animation:trayIn var(--base) var(--out)}
@keyframes trayIn{from{transform:translateY(100%)}to{transform:none}}
.tray-inner{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s5);align-items:center}
.tray-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4)}
.tray-count{font-weight:600}
.tray-price{font:400 28px/1 var(--serif);font-variant-numeric:tabular-nums}
.tray-save{font:600 14px var(--sans);color:#E9C46A;margin-left:var(--s2)}
.tray-nudge{font-size:14px;color:#d9cbb3;width:100%}
.tray-actions{display:flex;gap:var(--s2)}
.btn-ghost{min-height:44px;font-size:16px;color:var(--tent);background:transparent;border:1.5px solid rgba(247,242,232,.45);cursor:pointer;padding:0 var(--s4)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:rgba(247,242,232,.1)}}
.tray .btn-ghost:focus-visible,.tray :focus-visible{outline-color:#E9C46A}
.tray-list{grid-column:1/-1;border-top:1px dashed rgba(247,242,232,.3);padding-top:var(--s3);max-height:40vh;overflow:auto}
.tray-list ul{list-style:none;margin:0;padding:0}
.tray-list li{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s1) 0;font-size:16px}
.tray-note{font-size:14px;color:#d9cbb3;margin-top:var(--s2)}
body.has-tray{padding-bottom:120px}

.calc{margin-top:var(--s6);padding:var(--s5);background:var(--tent);border-radius:var(--r2);box-shadow:var(--shadow)}
.calc h3{font-size:22px}
.calc-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.size-btn{font:600 16px/1 var(--sans);min-height:44px;padding:0 var(--s4);border-radius:var(--r1);border:1.5px solid rgba(42,32,24,.4);background:transparent;color:var(--ink);cursor:pointer}
.size-btn[aria-pressed="true"]{background:var(--ink);color:var(--tent);border-color:var(--ink)}
.calc-body{display:grid;grid-template-columns:120px auto 1fr;gap:var(--s5);align-items:center;margin-top:var(--s5)}
.calc-sponge{width:120px;height:100px;overflow:visible}
#sponge-shape{transform-origin:60px 55px;transform-box:view-box;transition:transform 420ms var(--out)}
.qty{display:inline-flex;align-items:center;border:1.5px solid rgba(42,32,24,.3);border-radius:var(--r2)}
.qty output{min-width:28px;text-align:center;font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
.calc-out{display:grid;gap:var(--s1)}
#calc-total{font:400 36px/1 var(--serif);font-variant-numeric:tabular-nums}
#calc-detail{font-size:16px;color:var(--ink-soft)}
.calc-fine{margin-top:var(--s4);font-size:14px;color:var(--ink-soft)}

.flip{perspective:1600px}
.js .flip-inner{display:grid;transition:transform 700ms var(--out);transform-style:preserve-3d}
.js .flip-inner>.sign{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.js .flip-back{transform:rotateY(180deg)}
.js .flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.no-js .flip-back{margin-top:var(--s5)}
.sign-list--prose li{font-size:18px;line-height:1.45}
.flip-btn{margin-top:var(--s4);font:600 16px/1 var(--sans);min-height:44px;padding:0 var(--s5);border-radius:var(--r2);border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover) and (pointer:fine){.flip-btn:hover{background:var(--ink);color:var(--kraft)}}

.tag{cursor:pointer}
.tag.reswing{animation:swing 1.4s var(--out) both}

.reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--out),transform 600ms var(--out)}
.reveal.in{opacity:1;transform:none}

@media (max-width:560px){
  .filter-label{width:100%}
  .surprise{margin-left:0}
  .soap-item{padding:var(--s2);margin:calc(-1 * var(--s2))}
  .tray-inner{grid-template-columns:1fr}
  .tray-actions{order:2}
  .tray-price{font-size:22px}
  .calc-body{grid-template-columns:88px 1fr;gap:var(--s4)}
  .calc-sponge{width:88px;height:74px}
  .calc-out{grid-column:1/-1}
  body.has-tray{padding-bottom:170px}
}
@media (prefers-reduced-motion:reduce){
  .js .flip-inner{transform:none!important}
  .js .flip-inner>.sign{backface-visibility:visible}
  .js .flip-back{transform:none;visibility:hidden}
  .js .flip.is-flipped .flip-back{visibility:visible}
  .js .flip.is-flipped .flip-front{visibility:hidden}
  .reveal{opacity:1;transform:none}
}
.qty{justify-self:start}