/* craft skin: Soap Making — blush rose + honey gold + cream + sage; airy, spa-soft. Playfair Display (italic accents) + Nunito. Rounded arches and circles, pale hairlines, soft static shadows (no hard offsets). Tokens come from theme_config.tokens. */
.cfs-soap-making{--bg:#FFF8F3;--bg2:#FAE8E6;--paper:#FFFDFB;--deep:#6E3445;--ink:#4A2F2F;--mute:#6E5654;--line:#EBCFCB;--accent:#C98A93;--accent-ink:#9C4F5E;--pop:#E2A93B;--pop2:#6F8F72;--pop3:#F3C9CF;--sig-bg:#F7DEDA;--rad:26px;--shd:0 14px 34px rgba(156,79,94,.13)}
.cfs-soap-making .cf-head{border-bottom:1px solid var(--line)}
.cfs-soap-making .cf-mark{background:var(--pop3);border:1px solid var(--accent);color:var(--accent-ink);transform:none;font-style:italic}
.cfs-soap-making .cf-h1,.cfs-soap-making .cf-h2,.cfs-soap-making :is(.cf-card,.cf-step,.cf-done) h3{font-family:var(--f-disp);font-weight:500;letter-spacing:-.005em}
.cfs-soap-making .cf-h1{line-height:1.06;max-width:14ch;font-size:clamp(38px,6.2vw,74px)}
.cfs-soap-making .cf-ac{font-family:var(--f-disp);font-style:italic;font-weight:400;color:var(--accent-ink);margin-inline:.04em}
.cfs-soap-making .cf-kicker{font:italic 400 22px/1.2 var(--f-disp);color:var(--accent-ink);letter-spacing:.01em}
.cfs-soap-making .cf-ul path{stroke:var(--pop);stroke-width:4}
.cfs-soap-making .cf-btn{border:0;background:var(--accent-ink);box-shadow:0 8px 20px rgba(156,79,94,.3);font-weight:800}
.cfs-soap-making .cf-btn:active,.cfs-soap-making .cf-btn.press{transform:translateY(2px)}
.cfs-soap-making .cf-btn-ghost{background:var(--paper);color:var(--accent-ink)!important;border:1.5px solid var(--accent);box-shadow:none}
.cfs-soap-making .cf-btn-sm{box-shadow:0 5px 12px rgba(156,79,94,.25)}
.cfs-soap-making .cf-sticker{background:var(--pop3);color:var(--deep);border:0;border-radius:999px;transform:none;letter-spacing:.08em;font-size:13px}
.cfs-soap-making .cf-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;font-weight:700;color:var(--ink)}
.cfs-soap-making .cf-chip:nth-child(2n){background:#FBF0DA;border-color:#EBD3A0}
.cfs-soap-making .cf-chip:nth-child(3n){background:#EAF0E8;border-color:#C5D4C4}
.cfs-soap-making .cf-nav a{white-space:nowrap;font-size:14px;padding:10px 9px}
/* hero: soft blush dome + sage moon; arched main photo, two round "bubble" photos */
.cfs-soap-making .cf-hero{background:linear-gradient(180deg,var(--bg) 0,#FCEDEA 100%)}
.cfs-soap-making .cf-hero::before{content:"";position:absolute;z-index:-1;width:min(86vw,660px);aspect-ratio:1;right:-18%;top:-24%;border-radius:50%;background:var(--pop3);opacity:.75}
.cfs-soap-making .cf-hero::after{content:"";position:absolute;z-index:-1;width:min(46vw,360px);aspect-ratio:1;left:-12%;bottom:-18%;border-radius:50%;background:#DCE7D9;opacity:.9}
.cfs-soap-making .cf-collage{aspect-ratio:1/1.06}
.cfs-soap-making .cf-collage figure{border:6px solid var(--paper);box-shadow:var(--shd)}
.cfs-soap-making .cf-c1{left:20%;top:0;width:74%;aspect-ratio:4/5;border-radius:999px 999px 30px 30px}
.cfs-soap-making .cf-c2{--rr:0deg;transform:none;left:-1%;bottom:2%;width:44%;aspect-ratio:1;border-radius:50%}
.cfs-soap-making .cf-c3{--rr:0deg;transform:none;right:-3%;bottom:-3%;width:34%;aspect-ratio:1;border-radius:50%}
.cfs-soap-making .cf-dec svg{--m1:var(--accent);--m2:var(--pop2);--m3:var(--pop);--mi:#6E3445}
.cfs-soap-making .cf-dec1{right:0;top:2%;rotate:-8deg;width:clamp(40px,8vw,60px)}.cfs-soap-making .cf-dec2{left:4%;top:20%;rotate:-18deg;width:clamp(40px,8vw,60px)}.cfs-soap-making .cf-dec3{right:8%;bottom:30%;width:clamp(34px,6vw,48px)}
.cfs-soap-making .cf-dec1 svg{--m2:var(--accent)}.cfs-soap-making .cf-dec3 svg{--m1:var(--pop)}
@keyframes sp-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}
.cfs-soap-making .cf-hero.on .cf-dec{animation:sp-bob 6.5s ease-in-out infinite}
.cfs-soap-making .cf-hero.on .cf-dec2{animation-duration:8s;animation-delay:-2s}.cfs-soap-making .cf-hero.on .cf-dec3{animation-duration:7.2s;animation-delay:-3.5s}
/* section edges: previous colour hangs down in a soft soap-bar curve */
.cfs-soap-making .cf-sec{padding-top:calc(clamp(56px,8vw,104px) + 14px)}
.cfs-soap-making .cf-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:var(--prev,var(--bg));border-radius:0 0 50% 50%/0 0 100% 100%}
.cfs-soap-making #make{--prev:#FCEDEA}.cfs-soap-making #brew{--prev:var(--bg2)}.cfs-soap-making #flow{--prev:var(--paper)}.cfs-soap-making #materials{--prev:var(--bg)}
.cfs-soap-making #story{--prev:var(--bg2)}.cfs-soap-making #moments{--prev:var(--paper)}.cfs-soap-making #faq{--prev:var(--bg2)}.cfs-soap-making #join{--prev:var(--paper)}
.cfs-soap-making .cf-bg-pop{background:var(--deep)}
.cfs-soap-making .cf-bg-pop :is(h2,.cf-kicker,.cf-lead,.cf-note,p,li,legend,label){color:#fff}
.cfs-soap-making .cf-bg-pop .cf-ac{color:#F6D58A}
.cfs-soap-making .cf-bg-pop .cf-formcard :is(p,li,legend,label,span){color:var(--ink)}
.cfs-soap-making .cf-bg-pop .cf-formcard .cf-consent,.cfs-soap-making .cf-bg-pop .cf-formcard .cf-msg{color:var(--mute)!important}
.cfs-soap-making .cf-bg-pop .cf-facts li,.cfs-soap-making .cf-bg-pop .cf-contact{color:#fff}
.cfs-soap-making .cf-bg-pop .cf-ul path{stroke:#F6D58A}
.cfs-soap-making .cf-bg-pop .cf-formcard .cf-btn,.cfs-soap-making .cf-bg-pop .cf-formcard .cf-btn span{color:#fff!important}
.cfs-soap-making .cf-bg-pop a{color:#F6D58A}
/* colour-recipe cards: arched photo on top */
.cfs-soap-making .cf-card{border:1px solid var(--line);border-radius:30px;box-shadow:var(--shd);padding:10px 10px 0}
.cfs-soap-making .cf-card-img{border:0;border-radius:200px 200px 22px 22px}
.cfs-soap-making .cf-card-mo{border:1px solid var(--line);background:var(--paper);top:-30px;right:12px}
.cfs-soap-making .cf-card-mo svg{--m1:var(--accent);--m2:var(--pop2);--m3:var(--pop)}
.cfs-soap-making .cf-card-b{padding:22px 14px 22px}
.cfs-soap-making .cf-tag{color:var(--accent-ink);border-width:1px}
.cfs-soap-making .cf-k1 .cf-tag{color:#8A5A12}.cfs-soap-making .cf-k2 .cf-tag{color:#4E6B51}.cfs-soap-making .cf-k3 .cf-tag{color:#7A4B2A}
.cfs-soap-making .cf-k1{margin-top:22px}.cfs-soap-making .cf-k3{margin-top:22px}
@media (max-width:1099px){.cfs-soap-making .cf-k1,.cfs-soap-making .cf-k3{margin-top:0}}
.cfs-soap-making .cf-sigsec{overflow:hidden}
/* steps */
.cfs-soap-making .cf-rail{background:var(--bg2);border-bottom:1px solid var(--line)}
.cfs-soap-making .cf-rail a[aria-current=step] b{background:var(--accent-ink);border-color:var(--accent-ink)}
.cfs-soap-making .cf-step{border:1px solid var(--line);border-radius:30px;box-shadow:var(--shd)}
.cfs-soap-making .cf-no{background:var(--pop3);border:0;color:var(--deep);font-style:italic}
.cfs-soap-making .cf-step-img{border:0;border-radius:100px 100px 18px 18px}
/* materials: pill chips */
.cfs-soap-making .cf-mat{border:1px solid var(--line);border-radius:999px;padding:12px 22px 12px 14px;box-shadow:0 6px 16px rgba(156,79,94,.08)}
.cfs-soap-making .cf-mat-mo{--m1:var(--accent);--m2:var(--pop2);--m3:var(--pop);--mi:#6E3445}
/* story / media */
.cfs-soap-making .cf-media figure{border:6px solid var(--paper);border-radius:200px 200px 28px 28px;box-shadow:var(--shd)}
.cfs-soap-making .cf-media .cf-m2{border-radius:28px 200px 28px 28px;width:80%;margin-left:auto}
.cfs-soap-making .cf-pull{border-left:0;padding:8px 0 0 0;font-style:italic;font-weight:400;color:var(--accent-ink);font-size:clamp(22px,3vw,30px);position:relative}
.cfs-soap-making .cf-pull::before{content:"";display:block;width:56px;height:6px;border-radius:6px;background:var(--pop);margin-bottom:14px}
/* gallery: tall rounded snap cards */
.cfs-soap-making .cf-cell{border:0;border-radius:26px;box-shadow:var(--shd);background:var(--paper)}
.cfs-soap-making .cf-g-snap .cf-cell img{aspect-ratio:4/5}
.cfs-soap-making .cf-cell figcaption{font:italic 400 19px/1.25 var(--f-disp);color:var(--ink)}
.cfs-soap-making details.cf-acc{border:1px solid var(--line);border-radius:24px}
.cfs-soap-making .cf-formcard{border:1px solid var(--line);border-radius:36px;box-shadow:0 22px 50px rgba(0,0,0,.2)}
.cfs-soap-making .cf-fld input,.cfs-soap-making .cf-opt span{border:1.5px solid #D2AFAA}
.cfs-soap-making .cf-opt input:checked+span{background:var(--pop3);box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
.cfs-soap-making .cf-done-c{fill:var(--pop3);stroke:var(--accent-ink)}
.cfs-soap-making .cf-end{background:var(--bg2)}
.cfs-soap-making .cf-bar,.cfs-soap-making .cf-share a{border-color:var(--line)}
@media (prefers-reduced-motion:reduce){.cfs-soap-making .cf-hero.on .cf-dec{animation:none}}
@media (min-width:900px){.cfs-soap-making .cf-rail{background:none;border:0}}
.cfs-soap-making .cf-bg-pop .cf-formcard a{color:var(--accent-ink)}