/* Self-hosted rounded fonts (drop fredoka.woff2 / nunito.woff2 into media/fonts/); falls back to rounded system fonts */

:root{
  --orange:#FF7A1A; --pink:#F0239A; --plum:#8A1A66; --mint:#19B98A; --sun:#FFCB2E;
  --sky:#3FB8FF; --lilac:#A66BFF; --cream:#FFF5E6; --ink:#4A1038;
  --head:"Fredoka","Baloo 2","Arial Rounded MT Bold","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
html{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font:500 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.05;margin:0}
h2{font-size:clamp(2rem,5vw,3.4rem);color:var(--plum);letter-spacing:-.01em}
h2 em{font-style:normal;color:var(--pink);display:inline-block;transform:rotate(-3deg)}
h3{font-size:1.5rem;color:var(--plum)}
p{margin:0 0 1rem}
.lead{font-size:1.2rem;opacity:.85;max-width:34em}
.fine{font-size:.9rem;opacity:.7}
ul,ol{margin:0;padding:0;list-style:none}

/* ---------- buttons & stickers ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:700 1.1rem/1 var(--head);padding:1rem 1.7rem;border-radius:999px;border:3px solid var(--plum);text-decoration:none;color:#fff;cursor:pointer;
  box-shadow:0 6px 0 var(--plum);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 9px 0 var(--plum)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--plum)}
.btn-pink{background:var(--pink)} .btn-orange{background:var(--orange)} .btn-sun{background:var(--sun);color:var(--plum)}
.btn-ghost{background:#fff;color:var(--plum)}
.btn-sm{padding:.7rem 1.2rem;font-size:1rem;box-shadow:0 4px 0 var(--plum)}
.btn-lg{font-size:1.4rem;padding:1.2rem 2.4rem}
.btn[disabled]{opacity:.9;cursor:not-allowed;transform:none;background:repeating-linear-gradient(-45deg,var(--pink) 0 14px,#ff4fb4 14px 28px)}
.play{width:0;height:0;border-left:14px solid var(--pink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:2px}
.sticker{display:inline-block;font:700 1rem/1 var(--head);letter-spacing:.04em;text-transform:uppercase;padding:.6rem 1.1rem;border-radius:999px;background:#fff;color:var(--pink);border:3px solid var(--plum);box-shadow:3px 4px 0 var(--plum);margin-bottom:1.1rem}
.sticker-mint{background:var(--mint);color:#fff}.sticker-sun{background:var(--sun);color:var(--plum)}
.sticker-pink{background:var(--pink);color:#fff}.sticker-sky{background:var(--sky);color:#fff}
.tilt-l{transform:rotate(-4deg)}.tilt-r{transform:rotate(3deg)}

/* ---------- header ---------- */
.top{position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));display:flex;align-items:center;gap:1rem;padding:.5rem .6rem .5rem .6rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:3px solid var(--plum);border-radius:999px;box-shadow:0 5px 0 var(--plum)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--plum)}
.brand img{border-radius:50%;width:52px;height:52px;animation:wob 5s ease-in-out infinite}
.wm{display:none;font:700 1.25rem/1 var(--head);letter-spacing:-.01em}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;font:700 1rem/1 var(--head);padding:.75rem 1.2rem;border-radius:999px;border:3px solid var(--plum);background:var(--sun);color:var(--plum);box-shadow:0 4px 0 var(--plum);cursor:pointer;transition:transform .15s,box-shadow .15s}
.cart-btn:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 6px 0 var(--plum)}
.cart-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--plum)}
.cart-btn svg{width:22px;height:22px}
.count{display:none;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:var(--pink);color:#fff;font-size:.9rem;line-height:18px;border:3px solid var(--plum);place-content:center;text-align:center;box-sizing:border-box}
.count.on{display:inline-block}
.count.bump{animation:bump .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{0%{transform:scale(.4)}100%{transform:scale(1)}}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:3px solid var(--plum);background:var(--pink);box-shadow:0 4px 0 var(--plum);cursor:pointer;padding:0;position:relative;flex:none}
.burger span{position:absolute;left:11px;right:11px;height:3.5px;border-radius:4px;background:#fff;transition:transform .25s,opacity .2s,top .25s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
.nav{display:flex;gap:1.6rem;margin:0 auto;font:600 1.05rem var(--head)}
.nav a{color:var(--plum);text-decoration:none;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;border-radius:4px;background:var(--pink);transform:scaleX(0);transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}
@keyframes wob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.05)}}

/* ---------- bubbles ---------- */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubbles i{position:absolute;bottom:-60px;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.25) 15% 60%,rgba(255,255,255,.05) 61%);border:2px solid rgba(255,255,255,.6);animation:rise linear infinite}
.bubbles-soft i{border-color:rgba(240,35,154,.25);background:radial-gradient(circle at 30% 28%,#fff 0 14%,rgba(240,35,154,.12) 15% 60%,rgba(240,35,154,.03) 61%)}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx,30px),-110vh) scale(1.1);opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;padding:120px 24px 140px;background:
  radial-gradient(circle at 85% 20%,rgba(255,203,46,.55),transparent 38%),
  linear-gradient(135deg,var(--orange) 0%,#FF4F7B 55%,var(--pink) 100%);overflow:hidden;display:flex;align-items:center}
.hero-inner{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.hero h1{font-size:clamp(2.7rem,6.2vw,4.9rem);color:#fff;text-shadow:0 5px 0 var(--plum),0 8px 0 rgba(138,26,102,.35);margin-bottom:1.2rem}
.hero h1 .line{display:block;white-space:nowrap}
.w{display:inline-block;animation:drop .8s cubic-bezier(.3,1.6,.5,1) both}
.w1{animation-delay:.1s}.w2{animation-delay:.2s}.w3{animation-delay:.35s}.w4{animation-delay:.45s}.w5{animation-delay:.55s}.w6{animation-delay:.75s}.w7{animation-delay:.85s}.w8{animation-delay:.95s}
.poof{color:var(--sun);animation:drop .8s .55s cubic-bezier(.3,1.6,.5,1) both,pulse 2.4s 1.6s ease-in-out infinite}
.w8{color:var(--sun)}
@keyframes drop{0%{transform:translateY(-70px) scale(.6) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(3deg)}}
.hero-sub{color:#fff;font-size:1.25rem;font-weight:700;max-width:28em;text-shadow:0 2px 0 rgba(138,26,102,.35)}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4rem}
.hero .sticker{color:var(--pink)}

.hero-stage{position:relative;justify-self:center;width:min(480px,86vw);aspect-ratio:1}
.porthole{position:absolute;inset:6%;border-radius:50%;overflow:hidden;border:12px solid var(--orange);outline:6px solid #fff;box-shadow:0 0 0 14px var(--pink),0 24px 50px rgba(74,16,56,.45);animation:bob 6s ease-in-out infinite;background:#fff}
.porthole video{width:100%;height:100%;object-fit:cover}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.fly{position:absolute;filter:drop-shadow(0 8px 6px rgba(74,16,56,.3));animation:float 5s ease-in-out infinite}
.f1{top:-2%;left:2%}.f2{top:8%;right:-6%;animation-delay:-1.2s}.f3{bottom:2%;left:-6%;animation-delay:-2.4s}.f4{bottom:-2%;right:6%;animation-delay:-3.4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(14deg)}}
.price-badge{position:absolute;right:-2%;top:46%;width:112px;height:112px;border-radius:50%;background:var(--sun);color:var(--plum);border:4px solid var(--plum);box-shadow:4px 6px 0 var(--plum);display:grid;place-content:center;text-align:center;font-family:var(--head);transform:rotate(12deg);animation:wob 3.6s ease-in-out infinite}
.price-badge b{font-size:2.6rem;line-height:.9}.price-badge small{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:110px;fill:#fff7ec;z-index:1}

/* ---------- marquee ---------- */
.marquee{background:var(--plum);overflow:hidden;padding:.8rem 0;transform:rotate(-1.4deg);margin:-30px -10px 0;position:relative;z-index:3;border-block:4px solid var(--sun)}
.track{display:flex;gap:1.2rem;width:max-content;animation:slide 28s linear infinite}
.m{font:700 1.9rem var(--head);padding:.1rem 1.1rem;border-radius:999px}
.m1{color:var(--sun)}.m2{color:#ff8fd0}.m3{color:var(--sky)}.m4{color:var(--mint)}.m5{color:var(--orange)}.m6{color:#cfa6ff}
@keyframes slide{to{transform:translateX(-33.333%)}}

/* ---------- sections ---------- */
.sec{position:relative;padding:110px 24px;max-width:1160px;margin:0 auto}
.head{text-align:center;margin-bottom:3rem}
.head .lead{margin:1rem auto 0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.step{position:relative;padding:2.4rem 1.6rem 1.8rem;border-radius:var(--r);border:4px solid var(--plum);box-shadow:0 8px 0 var(--plum);text-align:center}
.step p{margin:.6rem 0 0}
.s1{background:#FFE9A8;transform:rotate(-2deg)}.s2{background:#FFC7E5;transform:rotate(1.5deg)}.s3{background:#BFEFE0;transform:rotate(-1deg)}
.num{position:absolute;left:50%;top:-30px;translate:-50% 0;width:60px;height:60px;border-radius:50%;display:grid;place-content:center;font:700 1.9rem var(--head);color:#fff;background:var(--pink);border:4px solid var(--plum)}
.s1 .num{background:var(--orange)}.s3 .num{background:var(--mint)}
.films{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:5rem}
.film{margin:0}
.frame{aspect-ratio:16/9;border-radius:34px 60px 34px 60px;overflow:hidden;border:5px solid var(--plum);box-shadow:8px 10px 0 var(--pink);background:#fff}
.f-b .frame{box-shadow:-8px 10px 0 var(--orange);border-radius:60px 34px 60px 34px}
.frame video{width:100%;height:100%;object-fit:cover}
.film figcaption{margin-top:1.3rem;text-align:center;font:600 1.25rem var(--head);color:var(--plum)}
.f-a{transform:rotate(-1.5deg)}.f-b{transform:rotate(1.5deg)}

/* scents */
.scents{max-width:none;background:#fff;border-radius:60px;margin:0 12px;padding-inline:max(24px,calc(50% - 560px));overflow:hidden}
.scents .head,.scents .grid{position:relative}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.card{--c:var(--pink);text-align:center;padding:1.2rem .6rem 1rem;border-radius:26px;background:color-mix(in srgb,var(--c) 18%,#fff);border:3px solid var(--c);transition:transform .25s cubic-bezier(.3,1.8,.5,1),box-shadow .25s;cursor:pointer}
.card img{margin:0 auto .5rem;width:min(150px,80%);height:auto;filter:drop-shadow(0 8px 5px rgba(74,16,56,.25));animation:bob2 4s ease-in-out infinite}
.card:nth-child(2n) img{animation-delay:-1.3s}.card:nth-child(3n) img{animation-delay:-2.6s}
.card b{font:700 1.2rem var(--head);color:var(--plum)}
.card:hover,.card:focus-visible{transform:translateY(-8px) rotate(-3deg) scale(1.04);box-shadow:0 12px 0 var(--c)}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.c-jasmine{--c:var(--sky)}.c-mint{--c:var(--mint)}.c-vanilla{--c:var(--lilac)}.c-gardenia{--c:#7B3FE4}
.c-orange{--c:var(--orange)}.c-chrys{--c:#F2B705}.c-rose{--c:var(--pink)}.c-lavender{--c:#B070D8}
.c-seaweed{--c:#2AA7D8}.c-milk{--c:#9AA3C7}.c-ylang{--c:#E0A21B}.c-sakura{--c:#4CC55A}

/* surprise */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
.pic img{border-radius:48px 90px 48px 90px;border:5px solid var(--plum);box-shadow:-10px 12px 0 var(--sun);transform:rotate(-2deg);width:100%;height:auto}
.copy h2{margin-bottom:1rem}
.ticks{margin:1.4rem 0 2rem}
.ticks li{position:relative;padding-left:2.4rem;margin-bottom:.8rem;font-weight:700}
.ticks li::before{content:"";position:absolute;left:0;top:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;border:2px solid var(--plum)}

/* love */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.perk{text-align:center;padding:1.8rem 1.2rem;border-radius:var(--r);border:4px solid var(--plum);box-shadow:0 7px 0 var(--plum);background:#fff;transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.perk:hover{transform:translateY(-6px) rotate(2deg)}
.perk svg{width:64px;height:64px;margin:0 auto .8rem}
.perk p{margin:.4rem 0 0;font-size:1rem}
.p1{background:#D6F6EA}.p2{background:#FFF0B8}.p3{background:#D8F1FF}.p4{background:#EBDDFF}.p5{background:#D6F6EA}.p6{background:#D8F1FF}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:4.5rem}
.gallery img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:32px;border:4px solid var(--plum);box-shadow:5px 7px 0 var(--pink);transition:transform .3s}
.g1{transform:rotate(-3deg)}.g2{transform:rotate(2deg);box-shadow:5px 7px 0 var(--sun)!important}.g3{transform:rotate(-2deg);box-shadow:5px 7px 0 var(--mint)!important}.g4{transform:rotate(3deg);box-shadow:5px 7px 0 var(--sky)!important}
.gallery img:hover{transform:scale(1.07) rotate(0)}

/* order */
.order{max-width:none;margin-top:60px;padding:120px 24px 130px;background:linear-gradient(135deg,var(--pink),var(--orange));overflow:hidden;border-radius:60px 60px 0 0}
.order-card{position:relative;z-index:2;max-width:640px;margin:0 auto;text-align:center;background:#fff;border:5px solid var(--plum);border-radius:48px;padding:2.6rem 2rem 2.4rem;box-shadow:0 12px 0 var(--plum)}
.o-logo{width:130px;height:130px;margin:-100px auto 1rem;border-radius:50%;border:5px solid var(--plum);background:#fff;animation:wob 5s ease-in-out infinite}
.order-card .lead{margin:1rem auto}
.big-price{display:flex;align-items:baseline;justify-content:center;gap:.5rem;color:var(--pink);font-family:var(--head);margin:.4rem 0 1.4rem}
.big-price b{font-size:5.4rem;line-height:1;text-shadow:3px 4px 0 var(--sun)}.big-price span{font-size:1.6rem;font-weight:700;color:var(--plum)}
.order-card .fine{margin:1.2rem 0 0}

/* footer */
.foot{text-align:center;padding:2.4rem 24px 3rem;background:var(--plum);color:#fff}
.foot img{margin:0 auto .6rem;border-radius:50%;border:3px solid #fff}
.foot p{margin:.2rem 0}

/* reveal on scroll */
.reveal{opacity:0;translate:0 40px;scale:.96;transition:opacity .7s,translate .7s cubic-bezier(.2,1.3,.4,1),scale .7s cubic-bezier(.2,1.3,.4,1)}
.reveal.in{opacity:1;translate:0 0;scale:1}
.steps .reveal:nth-child(2),.grid .card:nth-child(4n+2){transition-delay:.1s}
.steps .reveal:nth-child(3),.grid .card:nth-child(4n+3){transition-delay:.2s}
.grid .card:nth-child(4n){transition-delay:.3s}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{display:none}.top{justify-content:space-between}
  .hero{padding:120px 20px 130px}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-cta{justify-content:center}.hero-sub{margin-inline:auto}
  .hero-stage{width:min(380px,82vw)}
  .steps,.films,.split,.perks{grid-template-columns:1fr}
  .steps{gap:2.6rem}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{grid-template-columns:1fr 1fr}
  .sec{padding:80px 20px}
  .scents{border-radius:36px}
}
@media (max-width:560px){
  body{font-size:17px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .card b{font-size:1.05rem;overflow-wrap:anywhere}
  .price-badge{width:92px;height:92px;right:-4%}.price-badge b{font-size:2.1rem}
  .m{font-size:1.5rem}
  .btn-lg{font-size:1.2rem;padding:1.1rem 1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;translate:none;scale:1}
  html{scroll-behavior:auto}
}

/* ---------- order: scent card states ---------- */
.card{position:relative;user-select:none;-webkit-tap-highlight-color:transparent}
.card .add{display:inline-block;margin-top:.5rem;font:700 .9rem/1 var(--head);color:#fff;background:var(--c);padding:.45rem .9rem;border-radius:99px;border:2px solid var(--plum)}
.card .qty{position:absolute;top:-10px;right:-8px;min-width:34px;height:34px;padding:0 8px;border-radius:99px;background:var(--pink);color:#fff;font:700 1.05rem/28px var(--head);text-align:center;border:3px solid var(--plum);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.8,.5,1);box-sizing:border-box}
.card .minus{position:absolute;top:-10px;left:-8px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--plum);font:700 1.4rem/24px var(--head);border:3px solid var(--plum);cursor:pointer;padding:0;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.card.picked{box-shadow:0 6px 0 var(--c);background:color-mix(in srgb,var(--c) 30%,#fff)}
.card.picked .qty,.card.picked .minus{transform:scale(1)}
.card:focus-visible{outline:4px solid var(--plum);outline-offset:3px}

/* ---------- floating order bar + toast ---------- */
.cartbar{position:fixed;z-index:55;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:1rem;padding:.55rem .6rem .55rem 1.3rem;background:#fff;border:3px solid var(--plum);border-radius:999px;box-shadow:0 6px 0 var(--plum),0 18px 30px rgba(74,16,56,.25);font:700 1.05rem var(--head);color:var(--plum);white-space:nowrap;animation:barIn .4s cubic-bezier(.3,1.5,.5,1)}
.cartbar[hidden]{display:none}
@keyframes barIn{from{transform:translate(-50%,120%)}to{transform:translate(-50%,0)}}
.toast{position:fixed;z-index:70;left:50%;top:92px;transform:translate(-50%,-20px);background:var(--plum);color:#fff;font:700 1rem var(--head);padding:.65rem 1.2rem;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- order sheet ---------- */
body.lock{overflow:hidden}
.sheet-back{position:fixed;z-index:80;inset:0;background:rgba(74,16,56,.55);opacity:0;transition:opacity .25s}
.sheet-back.open{opacity:1}
.sheet{position:fixed;z-index:90;right:0;top:0;bottom:0;width:min(460px,100%);background:var(--cream);border-left:5px solid var(--plum);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .28s cubic-bezier(.3,1,.4,1)}
.sheet.open{transform:none}
.sheet[hidden],.sheet-back[hidden]{display:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;background:var(--pink);color:#fff;border-bottom:5px solid var(--plum)}
.sheet-head h2{color:#fff;font-size:1.8rem}
.x{width:44px;height:44px;border-radius:50%;border:3px solid var(--plum);background:#fff;color:var(--plum);font:700 1.8rem/1 var(--head);cursor:pointer;padding:0}
.sheet-body{padding:1.2rem;overflow:auto;flex:1;-webkit-overflow-scrolling:touch}
.empty{text-align:center;font-weight:700;padding:1.5rem 0}
.lines li{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:.7rem;padding:.6rem .7rem;margin-bottom:.6rem;background:#fff;border:3px solid var(--plum);border-radius:20px}
.lines img{width:44px;height:44px;border-radius:50%}
.ln{font:700 1.05rem var(--head);color:var(--plum);min-width:0;overflow-wrap:anywhere}
.step-ctl{display:inline-flex;align-items:center;gap:.4rem}
.step-ctl button{width:32px;height:32px;border-radius:50%;border:3px solid var(--plum);background:var(--sun);color:var(--plum);font:700 1.1rem/1 var(--head);cursor:pointer;padding:0}
.step-ctl b{min-width:1.4rem;text-align:center;font-family:var(--head);color:var(--plum)}
.lp{font:700 1rem var(--head);color:var(--pink);min-width:2.2rem;text-align:right}
.totals{display:flex;justify-content:space-between;align-items:center;margin:1rem 0 1.2rem;padding:.8rem 1rem;background:var(--plum);color:#fff;border-radius:20px;font:600 1.05rem var(--head)}
.totals .tot b{font-size:1.5rem;color:var(--sun)}
#orderForm label{display:block;font:700 .95rem var(--head);color:var(--plum);margin-bottom:.8rem}
#orderForm input,#orderForm textarea{display:block;width:100%;margin-top:.3rem;padding:.8rem 1rem;font:600 1rem var(--body);color:var(--ink);background:#fff;border:3px solid var(--plum);border-radius:16px}
#orderForm input:focus,#orderForm textarea:focus{outline:4px solid rgba(240,35,154,.35);border-color:var(--pink)}
.err{color:#c0126b;font-weight:800;margin:.2rem 0 .8rem}
.send{width:100%;justify-content:center}
.btn-wa svg{width:26px;height:26px}
.btn-wa[disabled]{background:#9bb;cursor:not-allowed;box-shadow:0 6px 0 var(--plum);opacity:.7;transform:none}
#orderForm .fine{text-align:center;margin:.9rem 0 0}

/* order section extras */
.order-sum{font:700 1.15rem var(--head);color:var(--plum);margin:0 0 1.2rem}
.order-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ---------- phone fixes ---------- */
@media (max-width:900px){
  .top{gap:.6rem;padding:.4rem .5rem .4rem .5rem;top:8px;width:calc(100% - 16px)}
  .wm{display:block;font-size:1.2rem}
  .brand{margin-right:auto}
  .cart-label{display:none}
  .cart-btn{padding:.6rem .75rem}
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 12px);flex-direction:column;gap:.5rem;margin:0;padding:1rem;background:#fff;border:3px solid var(--plum);border-radius:28px;box-shadow:0 8px 0 var(--plum),0 20px 40px rgba(74,16,56,.3)}
  .menu-open .nav{display:flex;animation:drop .35s cubic-bezier(.3,1.5,.5,1)}
  .nav a{display:block;text-align:center;padding:.9rem 1rem;border-radius:18px;font-size:1.25rem;background:var(--cream)}
  .nav a:nth-child(1){background:#FFE9A8}.nav a:nth-child(2){background:#FFC7E5}.nav a:nth-child(3){background:#BFEFE0}.nav a:nth-child(4){background:#D8F1FF}
  .nav a::after{display:none}

  /* hero: show the video first, text right under it */
  .hero{min-height:0;padding:84px 18px 110px;align-items:flex-start}
  .hero-inner{gap:1.1rem}
  .hero-stage{order:-1;width:min(250px,60vw);margin-top:.4rem}
  .hero .sticker{margin-bottom:.7rem;font-size:.85rem}
  .hero h1{font-size:clamp(2.2rem,10.5vw,3.3rem);margin-bottom:.8rem}
  .hero-sub{font-size:1.02rem;margin-bottom:0}
  .hero-cta{margin-top:1rem;gap:.7rem}
  .hero-cta .btn{padding:.85rem 1.25rem;font-size:1rem}
  .price-badge{width:84px;height:84px;right:-14%;top:44%}.price-badge b{font-size:1.9rem}.price-badge small{font-size:.65rem}
  .fly{width:58px;height:58px}
  .sheet{border-left:0;width:100%;top:auto;height:min(92dvh,760px);max-height:92%;border-radius:32px 32px 0 0;border-top:5px solid var(--plum);transform:translateY(105%)}
  .sheet.open{transform:none}
  .sheet-head{border-radius:26px 26px 0 0}
  .cartbar{width:calc(100% - 24px);justify-content:space-between}
}
@media (max-width:420px){
  .hero{padding-top:80px}
  .hero-stage{width:min(230px,58vw)}
  .hero-sub{display:none}
  .lines li{grid-template-columns:40px 1fr auto;row-gap:.3rem}
  .lines li .lp{grid-column:3;grid-row:1}
  .lines li .step-ctl{grid-column:2/4;grid-row:2;justify-self:end}
}
@media (max-width:900px) and (max-height:600px){
  .hero{padding-top:74px}
  .hero-stage{width:min(190px,48vw)}
  .hero h1{font-size:clamp(2rem,9.5vw,2.7rem);margin-bottom:.6rem}
  .hero-cta{margin-top:.6rem}
}
.card b{display:block}
.card .add{display:block;width:max-content;margin:.5rem auto 0}

/* ---------- delivery + order form + success ---------- */
.ship{display:inline-flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;font:700 1rem var(--head);color:#fff;background:rgba(138,26,102,.45);padding:.45rem 1rem .45rem .7rem;border-radius:99px;border:2px solid rgba(255,255,255,.55)}
.ship svg{width:26px;height:26px;flex:none}
.ship-note{font:700 1.1rem var(--head);color:var(--plum);margin:-.6rem 0 1rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.totals{display:grid;gap:.35rem;background:var(--plum);color:#fff;padding:.9rem 1.1rem;border-radius:20px;margin:1rem 0 1.2rem;font:600 1rem var(--head)}
.totals>div{display:flex;justify-content:space-between;align-items:center}
.totals .grand{border-top:2px solid rgba(255,255,255,.35);padding-top:.5rem;margin-top:.2rem;font-size:1.15rem}
.totals .grand b{font-size:1.6rem;color:var(--sun)}
.done{text-align:center;padding:2rem .5rem}
.done-badge{width:92px;height:92px;margin:0 auto 1rem;border-radius:50%;background:var(--mint);border:5px solid var(--plum);display:grid;place-items:center;animation:bump .5s cubic-bezier(.3,1.8,.5,1)}
.done-badge svg{width:52px;height:52px}
.done h3{font-size:2rem}
.done-id{font:700 1.2rem var(--head);color:var(--pink);margin:.4rem 0 1rem}
.done-total{font:700 1.2rem var(--head);color:var(--plum);margin:.8rem 0 1.6rem}
.foot .btn{margin:.6rem auto}
.btn[disabled].send{opacity:.6}