/* TTT Timmy's Tasty Treats – redesign mock-up */
:root{
  --bg:#fff7fb;
  --ink:#24123d;
  --muted:#6e5a86;
  --pink:#ff4f8b;
  --pink-d:#d42a68;
  --yellow:#ffcc29;
  --teal:#29d3c0;
  --purple:#8a5cff;
  --purple-d:#5a2fd6;
  --orange:#ff7a2f;
  --r:26px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --head:"Fredoka", "Trebuchet MS", sans-serif;
  --body:"Nunito", system-ui, sans-serif;
  --shadow:0 24px 50px -24px rgba(36,18,61,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.05}

.pill{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:.3rem .9rem;font-weight:800;font-size:.85rem;box-shadow:3px 3px 0 var(--ink);margin-bottom:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--pink);color:#fff;font-family:var(--head);font-weight:600;font-size:1.05rem;
  padding:.95rem 1.7rem;border-radius:18px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .2s var(--bounce), box-shadow .2s}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--yellow);color:var(--ink)}
.btn.full{width:100%}

/* loader */
.loader{position:fixed;inset:0;z-index:999;background:var(--purple);display:grid;place-content:center;justify-items:center;gap:1rem;color:#fff;font-family:var(--head);font-size:1.2rem;transition:clip-path .8s var(--ease);clip-path:circle(150% at 50% 50%)}
.loader.done{clip-path:circle(0% at 50% 50%)}
.ld-candy{width:70px;height:70px;border-radius:50%;background:repeating-conic-gradient(var(--pink) 0 30deg,#fff 30deg 60deg);animation:spin 1s linear infinite;box-shadow:0 0 0 6px #fff}
@keyframes spin{to{transform:rotate(360deg)}}

.promo{background:var(--ink);color:#fff;text-align:center;font-size:.85rem;font-weight:600;padding:.55rem 1rem}
.promo a{color:var(--yellow);text-decoration:underline}

/* nav */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:2rem;padding:.8rem max(3vw,18px);background:rgba(255,247,251,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:2px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--ink)}
.logo{display:flex;align-items:center;gap:.6rem}
.ttt{display:flex}
.ttt b{font-family:var(--head);font-weight:700;color:#fff;width:34px;height:40px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:10px;font-size:1.3rem;margin-right:-6px;box-shadow:2px 3px 0 var(--ink);transition:transform .3s var(--bounce)}
.ttt b:nth-child(1){background:var(--pink);rotate:-8deg}.ttt b:nth-child(2){background:var(--yellow);color:var(--ink);rotate:4deg;z-index:1}.ttt b:nth-child(3){background:var(--teal);rotate:-3deg}
.logo:hover .ttt b{transform:translateY(-6px)}.logo:hover .ttt b:nth-child(2){transition-delay:.05s}.logo:hover .ttt b:nth-child(3){transition-delay:.1s}
.lt{font-family:var(--head);font-weight:700;line-height:1;font-size:1.05rem;margin-left:6px}
.logo.light .lt{color:#fff}
.links{display:flex;gap:1.6rem;margin-left:auto;font-weight:800}
.links a{position:relative;padding:.2rem 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;border-radius:6px;background:var(--yellow);z-index:-1;transform:scaleX(0);transition:transform .3s var(--bounce)}
.links a:hover::after{transform:scaleX(1)}
.nav-icons{display:flex;align-items:center;gap:.4rem}
.ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.15rem;transition:background .2s, transform .2s var(--bounce)}
.ic:hover{background:#fff;transform:scale(1.1)}
.cart-btn{position:relative}
.cart-btn span{position:absolute;top:2px;right:0;min-width:20px;height:20px;border-radius:10px;background:var(--pink);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--ink)}
.cart-btn.bump{animation:bump .5s var(--bounce)}
@keyframes bump{40%{transform:scale(1.35) rotate(-10deg)}}
.burger{display:none;width:44px;height:44px;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:3px;border-radius:2px;background:var(--ink);transition:.3s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:28px}
.burger.open i:nth-child(1){top:21px;transform:rotate(45deg)}.burger.open i:nth-child(2){opacity:0}.burger.open i:nth-child(3){top:21px;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:2rem;min-height:calc(100vh - 110px);padding:4rem max(5vw,20px) 8rem;overflow:hidden;
  background:radial-gradient(circle at 80% 30%,#ffd6ea,transparent 50%),radial-gradient(circle at 10% 90%,#d8f8f3,transparent 45%),var(--bg)}
.hero-bg{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;opacity:.12;mix-blend-mode:multiply;z-index:0}
.hero>*{position:relative;z-index:1}
.hero>.hero-bg,.hero>.wave{position:absolute}
.hero>.wave{z-index:2}
.hero h1{font-size:clamp(2.8rem,6.2vw,5.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:1.2rem}
.hero h1 .w{display:inline-block;animation:wordIn .9s var(--bounce) both}
.hero h1 .w:nth-child(2){animation-delay:.08s}.hero h1 .w:nth-child(3){animation-delay:.16s}
.hero h1 .w:nth-child(5){animation-delay:.3s}.hero h1 .w:nth-child(6){animation-delay:.38s}.hero h1 .w:nth-child(7){animation-delay:.46s}
@keyframes wordIn{from{opacity:0;transform:translateY(60px) rotate(8deg) scale(.8)}}
.hero h1 .pop{color:var(--pink);-webkit-text-stroke:0;text-shadow:3px 3px 0 var(--ink)}
.hero h1 .pop:nth-of-type(5){color:var(--purple)}
.hero h1 .pop:last-child{color:var(--teal)}
.hero-copy>p{font-size:1.15rem;color:var(--muted);max-width:32rem;margin-bottom:2rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
.trust{display:flex;gap:1.6rem;margin-top:2.4rem;flex-wrap:wrap;font-weight:600;color:var(--muted)}
.trust b{font-family:var(--head);font-size:1.8rem;color:var(--ink);margin-right:2px}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:90px;z-index:2}
.wave path{fill:var(--ink)}

/* 3D jar */
.scene{position:relative;height:560px;perspective:1000px;transition:transform .2s linear;transform-style:preserve-3d}
.jar{position:absolute;left:50%;top:50%;width:280px;height:340px;transform:translate(-50%,-45%);animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translate(-50%,-45%) rotate(-3deg)}50%{transform:translate(-50%,-50%) rotate(3deg)}}
.lid{position:absolute;left:50%;top:-34px;width:190px;height:52px;transform:translateX(-50%);border-radius:14px;border:3px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--pink) 0 18px,#ff7aa8 18px 36px);box-shadow:0 6px 0 var(--pink-d)}
.glass{position:absolute;inset:0;border-radius:60px 60px 70px 70px;border:3px solid var(--ink);overflow:hidden;
  background:linear-gradient(100deg,rgba(255,255,255,.75) 0 12%,rgba(255,255,255,.25) 12% 20%,rgba(220,240,255,.45) 20% 100%);box-shadow:var(--shadow), inset -20px 0 40px rgba(138,92,255,.15)}
.glass .c{position:absolute;left:var(--x);top:var(--y);width:56px;height:56px;border-radius:50%;border:2.5px solid var(--ink);
  background:radial-gradient(circle at 32% 28%,#fff 0 10%,var(--c) 35%);animation:jiggle 2.6s ease-in-out infinite;animation-delay:calc(var(--y) * -0.05s)}
@keyframes jiggle{50%{transform:translateY(-8px) rotate(14deg)}}
.worm{position:absolute;left:8%;top:80%;width:150px;height:26px;border-radius:14px;border:2.5px solid var(--ink);background:linear-gradient(90deg,var(--pink) 0 33%,var(--yellow) 33% 66%,var(--teal) 66%);rotate:-12deg}
.bear{position:absolute;right:10%;top:78%;width:52px;height:60px;border-radius:24px 24px 20px 20px;border:2.5px solid var(--ink);background:var(--orange);opacity:.95}
.bear::before,.bear::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--orange);border:2.5px solid var(--ink)}
.bear::before{left:-4px}.bear::after{right:-4px}
.label{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg);background:#fff;border:3px solid var(--ink);border-radius:16px;padding:.6rem 1.2rem;
  font-family:var(--head);font-size:2rem;font-weight:700;text-align:center;line-height:1;box-shadow:4px 4px 0 var(--ink);z-index:3}
.label small{display:block;font-size:.8rem;color:var(--pink)}

.float{position:absolute;transition:transform .2s linear;transform-style:preserve-3d}
.f1{top:6%;left:6%}.f2{top:10%;right:4%}.f3{bottom:12%;left:2%}.f4{bottom:6%;right:12%}.f5{top:46%;right:-2%}
.cube{width:60px;height:60px;position:relative;transform-style:preserve-3d;animation:tumble 7s linear infinite}
@keyframes tumble{to{transform:rotateX(360deg) rotateY(720deg)}}
.cube i{position:absolute;inset:0;border:2.5px solid var(--ink);border-radius:10px;background:var(--yellow)}
.cube i:nth-child(1){transform:translateZ(30px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(30px);background:#ffe27a}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(30px);background:var(--pink)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(30px);background:var(--pink)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(30px);background:var(--teal)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(30px);background:var(--teal)}
.lolly{width:90px;height:90px;border-radius:50%;border:3px solid var(--ink);background:repeating-conic-gradient(var(--purple) 0 22.5deg,#fff 22.5deg 45deg);animation:spin 6s linear infinite;position:relative}
.lolly::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:80px;margin-left:-4px;background:#fff;border:2.5px solid var(--ink);border-radius:4px}
.wrapper{width:96px;height:44px;background:var(--orange);border:3px solid var(--ink);border-radius:22px;position:relative;animation:bobble 4s ease-in-out infinite}
.wrapper::before,.wrapper::after{content:"";position:absolute;top:2px;width:30px;height:34px;background:var(--yellow);border:3px solid var(--ink)}
.wrapper::before{left:-28px;clip-path:polygon(0 0,100% 30%,100% 70%,0 100%)}
.wrapper::after{right:-28px;clip-path:polygon(100% 0,0 30%,0 70%,100% 100%)}
.ring{width:80px;height:80px;border-radius:50%;border:18px solid var(--teal);box-shadow:0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink);animation:roll 5s ease-in-out infinite}
@keyframes roll{50%{transform:rotateY(70deg) rotateX(20deg)}}
.gumball{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:radial-gradient(circle at 32% 28%,#fff 0 10%,var(--pink) 40%);animation:bobble 3.4s ease-in-out infinite}
@keyframes bobble{50%{transform:translateY(-16px) rotate(-10deg)}}
.sticker{position:absolute;top:66%;left:8%;background:var(--yellow);border:3px solid var(--ink);border-radius:50%;width:116px;height:116px;display:grid;place-content:center;text-align:center;
  font-family:var(--head);font-size:.8rem;line-height:1.1;box-shadow:4px 4px 0 var(--ink);rotate:-12deg;transition:transform .2s linear}
.sticker b{font-size:.95rem;color:var(--pink-d)}

/* ribbon */
.ribbon{background:var(--ink);color:#fff;overflow:hidden;padding:.8rem 0 1.4rem}
.rtrack{display:flex;gap:2rem;width:max-content;font-family:var(--head);font-size:1.6rem;font-weight:600;animation:marq 26s linear infinite}
.rtrack span:nth-child(4n+1){color:var(--yellow)}.rtrack span:nth-child(4n+3){color:var(--teal)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.section{max-width:1240px;margin:0 auto;padding:6.5rem 20px 0}
.head{text-align:center;max-width:640px;margin:0 auto 2.8rem}
.head h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:.6rem}
.head p{color:var(--muted);font-size:1.05rem}
.center{text-align:center;margin-top:3rem}

/* 3D carousel */
.carousel-wrap{position:relative;height:440px;display:flex;align-items:center;justify-content:center}
.carousel{width:100%;height:100%;perspective:1400px;cursor:grab;touch-action:pan-y}
.carousel.drag{cursor:grabbing}
.ring3d{position:absolute;left:50%;top:50%;width:240px;height:320px;margin:-160px 0 0 -120px;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.ring3d.nodelay{transition:none}
.panel{position:absolute;inset:0;border-radius:var(--r);border:3px solid var(--ink);background:var(--c);overflow:hidden;box-shadow:6px 6px 0 var(--ink);
  display:flex;flex-direction:column;backface-visibility:hidden;transition:filter .4s}
.panel .pimg{flex:1;background:#fff;overflow:hidden;position:relative}
.panel .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.panel:hover .pimg img{transform:scale(1.08)}
.panel .pimg.noimg{background:radial-gradient(circle at 30% 30%,#fff,var(--c))}
.panel .pimg.noimg::after{content:attr(data-emoji);position:absolute;inset:0;display:grid;place-items:center;font-size:5rem}
.panel h3{font-size:1.5rem;padding:.9rem 1rem .2rem;color:var(--ink)}
.panel span{padding:0 1rem 1rem;font-weight:800;font-size:.9rem}
.arrow{position:absolute;top:50%;z-index:5;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-size:2rem;line-height:1;font-family:var(--head);transition:transform .2s var(--bounce)}
.arrow:hover{transform:scale(1.12)}
.prev{left:0}.next{right:0}
.coll-grid{display:none}

/* products */
.chips{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-bottom:2.4rem}
.chips button{border:2.5px solid var(--ink);border-radius:999px;padding:.5rem 1.1rem;font-weight:800;background:#fff;transition:transform .2s var(--bounce), background .2s}
.chips button:hover{transform:translateY(-3px)}
.chips button.on{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;perspective:1100px}
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:5px 5px 0 var(--ink);transform-style:preserve-3d;transition:transform .15s linear, box-shadow .2s;display:flex;flex-direction:column}
.card.hide{display:none}
.card:hover{box-shadow:9px 9px 0 var(--ink)}
.art{position:relative;height:190px;background:var(--bgc);display:grid;place-items:center;overflow:hidden;border-bottom:3px solid var(--ink)}
.art::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 10deg,transparent 10deg 20deg);animation:spin 30s linear infinite}
.art img{position:relative;max-height:160px;object-fit:contain;transition:transform .5s var(--bounce);filter:drop-shadow(0 12px 12px rgba(0,0,0,.2))}
.card:hover .art img{transform:scale(1.1) rotate(-4deg)}
/* 3D tub for products without photos */
.tub{position:relative;width:96px;height:110px;transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(-24deg);transition:transform .8s var(--ease)}
.card:hover .tub{transform:rotateX(-14deg) rotateY(336deg)}
.tub i{position:absolute;border:2.5px solid var(--ink);display:grid;place-items:center;font-size:2.2rem}
.tub .fr,.tub .bk{width:96px;height:110px;border-radius:8px;background:var(--tc)}
.tub .fr{transform:translateZ(36px)}.tub .bk{transform:rotateY(180deg) translateZ(36px)}
.tub .sl,.tub .sr{width:72px;height:110px;left:12px;border-radius:8px;background:color-mix(in srgb,var(--tc) 78%,#000)}
.tub .sl{transform:rotateY(-90deg) translateZ(48px)}.tub .sr{transform:rotateY(90deg) translateZ(48px)}
.tub .tp{width:96px;height:72px;top:19px;border-radius:8px;background:#fff;transform:rotateX(90deg) translateZ(55px)}
.tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:.15rem .7rem;font-weight:800;font-size:.75rem}
.tag.hot{background:var(--pink);color:#fff;animation:wobble 2s ease-in-out infinite}
@keyframes wobble{50%{transform:rotate(-6deg) scale(1.06)}}
.body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.body h3{font-family:var(--body);font-weight:800;font-size:1rem;line-height:1.3;margin-bottom:.3rem}
.pack{font-size:.82rem;color:var(--muted);font-weight:600}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.9rem}
.row b{font-family:var(--head);font-size:1.6rem}
.add{width:46px;height:46px;border-radius:14px;background:var(--teal);border:2.5px solid var(--ink);font-size:1.5rem;font-weight:800;box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--bounce), background .2s}
.add:hover{transform:rotate(90deg) scale(1.08)}
.add.ok{background:var(--yellow);transform:none}
.fly{position:fixed;z-index:300;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--pink);pointer-events:none;transition:transform .7s cubic-bezier(.5,-0.4,.7,1), opacity .7s}

/* spotlight */
.spot{background:var(--ink);color:#fff;margin-top:7rem;padding:6rem 20px;position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(rgba(255,255,255,.04) 0 8deg,transparent 8deg 16deg);animation:spin 80s linear infinite}
.spot-inner{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.spot-media{position:relative;perspective:1200px}
.flipper{aspect-ratio:1;border-radius:32px;border:4px solid #fff;background:#fff;overflow:hidden;transform:rotateY(-16deg) rotateX(6deg);box-shadow:-24px 30px 0 var(--pink);transition:transform .2s linear}
.flipper img{width:100%;height:100%;object-fit:contain;padding:1.5rem}
.flipper.noimg{background:radial-gradient(circle at 35% 30%,#ffe6b0,#d68a3c)}
.flipper.noimg img{display:none}
.burst{position:absolute;right:-10px;top:-20px;width:130px;height:130px;background:var(--yellow);color:var(--ink);display:grid;place-content:center;text-align:center;font-family:var(--head);font-weight:700;font-size:1.2rem;line-height:1;
  clip-path:polygon(50% 0,61% 13%,78% 7%,80% 24%,97% 28%,89% 44%,100% 56%,86% 66%,90% 83%,73% 83%,64% 98%,50% 88%,36% 98%,27% 83%,10% 83%,14% 66%,0 56%,11% 44%,3% 28%,20% 24%,22% 7%,39% 13%);animation:spin 20s linear infinite}
.spot h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:1rem}
.spot p{color:#d8cdee;font-size:1.1rem;margin-bottom:2rem}
.spot .pill{color:var(--ink)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mini{background:#fff;color:var(--ink);border-radius:18px;padding:.8rem;display:flex;flex-direction:column;gap:.5rem;font-weight:800;font-size:.9rem;transition:transform .25s var(--bounce)}
.mini:hover{transform:translateY(-6px) rotate(-2deg)}
.mini img{height:90px;object-fit:contain;margin:0 auto}
.mini b{font-size:.78rem;color:var(--pink-d)}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;perspective:1000px}
.wcard{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:1.8rem 1.5rem;box-shadow:5px 5px 0 var(--c);transform-style:preserve-3d;transition:transform .15s linear}
.wico{width:64px;height:64px;border-radius:18px;background:var(--c);border:2.5px solid var(--ink);display:grid;place-items:center;font-size:1.9rem;margin-bottom:1.2rem;transform:translateZ(40px)}
.wcard h3{font-size:1.4rem;margin-bottom:.4rem;transform:translateZ(25px)}
.wcard p{color:var(--muted)}

/* join */
.join{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--purple),var(--pink));color:#fff;border:3px solid var(--ink);border-radius:36px;box-shadow:8px 8px 0 var(--ink);padding:4rem 2rem;text-align:center}
.join h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.6rem;position:relative}
.join p{position:relative}
.join-form{position:relative;display:flex;gap:.8rem;max-width:480px;margin:2rem auto 0}
.join-form input{flex:1;border:3px solid var(--ink);border-radius:16px;padding:.9rem 1.1rem;font:inherit;font-weight:600}
.join-form input:focus{outline:4px solid var(--yellow)}
.join-form .btn{background:var(--yellow);color:var(--ink)}
.note{margin-top:1rem;font-weight:800;min-height:1.5em}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear infinite;opacity:.9}
@keyframes fall{to{transform:translateY(520px) rotate(720deg)}}

/* drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);background:#fff;border-left:3px solid var(--ink);z-index:400;transform:translateX(105%);transition:transform .45s var(--ease);display:flex;flex-direction:column}
.drawer.open{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 1.4rem;border-bottom:2px dashed #e4d6f0}
.dr-head button{font-size:1.3rem;width:40px;height:40px;border-radius:12px}
.dr-head button:hover{background:var(--bg)}
#cartList{list-style:none;flex:1;overflow:auto;padding:1rem 1.4rem}
#cartList li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid #f0e6f6;font-weight:600;animation:slideIn .4s var(--bounce)}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}}
#cartList .empty{color:var(--muted);border:0}
.dr-foot{padding:1.2rem 1.4rem;border-top:2px dashed #e4d6f0}
.total{display:flex;justify-content:space-between;font-family:var(--head);font-size:1.3rem;margin-bottom:1rem}
.scrim{position:fixed;inset:0;background:rgba(36,18,61,.4);z-index:350;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}

/* footer */
.footer{background:var(--ink);color:#d8cdee;margin-top:7rem;padding:4rem max(5vw,20px) 1.5rem}
.f-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2rem}
.f-grid p{margin-top:1rem}
.f-grid h4{color:#fff;font-size:1.2rem;margin-bottom:.8rem}
.f-grid a:not(.logo){display:block;margin-bottom:.35rem;transition:color .2s}
.f-grid a:not(.logo):hover{color:var(--yellow)}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{width:42px;height:42px;border-radius:12px;display:grid!important;place-items:center;background:#fff;color:var(--ink)!important;font-weight:800;transition:transform .2s var(--bounce)!important}
.socials a:hover{transform:translateY(-4px) rotate(-8deg)}
.f-bot{max-width:1240px;margin:3rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem}

/* reveal */
.reveal{opacity:0;transform:translateY(40px) scale(.96);transition:opacity .8s var(--ease), transform .8s var(--bounce)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1060px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .links{position:fixed;top:110px;left:12px;right:12px;flex-direction:column;gap:0;background:#fff;border:3px solid var(--ink);border-radius:22px;padding:.4rem 1.2rem;box-shadow:5px 5px 0 var(--ink);
    opacity:0;transform:translateY(-12px);pointer-events:none;transition:.3s}
  .links.open{opacity:1;transform:none;pointer-events:auto}
  .links a{padding:.9rem 0;border-bottom:2px dashed #eee}.links a:last-child{border:0}
  .burger{display:block}
  .hero{grid-template-columns:1fr;padding-bottom:7rem}
  .scene{height:460px}
  .spot-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .carousel-wrap{display:none}
  .coll-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .coll-grid .panel{position:relative;height:220px}
  .grid,.why{grid-template-columns:1fr}
  .scene{height:400px;transform:scale(.8)}
  .trio{grid-template-columns:1fr 1fr 1fr;gap:.5rem}
  .join-form{flex-direction:column}
  .nav{gap:.6rem}
  .lt{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}