/* Crave Wave — layout: loud orange "wave" hero, sticker-bomb menu wall, product pages as tilted polaroid + order slip */
:root{
  --orange:#FF6119;
  --orange-deep:#E84E0B;
  --brown:#49251E;
  --cream:#FFF3EC;
  --peach:#FFB08A;
  --butter:#FFD84D;
  --mint:#B9F0C9;
  --veg:#2E8B2E;
  --egg:#F2C200;
  --display:"Bowlby One","Arial Black",Impact,sans-serif;
  --body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Caveat",ui-rounded,"Comic Sans MS",cursive;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --radius:22px;
  --shadow:6px 6px 0 var(--brown);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
main{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--brown);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
:focus-visible{outline:3px dashed var(--brown);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-size:1rem;text-decoration:none;padding:.85em 1.3em;border-radius:999px;border:3px solid var(--brown);box-shadow:4px 4px 0 var(--brown);transition:transform .15s,box-shadow .15s;cursor:pointer;white-space:nowrap;line-height:1}
.btn:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:6px 6px 0 var(--brown)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--brown)}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn-wa{background:#25D366;color:var(--brown)}
.btn-call{background:var(--butter);color:var(--brown)}
.btn-ghost{background:var(--cream);color:var(--brown)}
.btn-brown{background:var(--brown);color:var(--cream);box-shadow:4px 4px 0 var(--orange)}

/* ---------- nav ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--orange)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--orange);border-bottom:3px solid var(--brown)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.nav-logo img{height:46px;width:auto}
.nav-links{display:flex;gap:22px;align-items:center;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.08em}
.nav-links a{text-decoration:none}
.nav-links a:not(.btn):hover{text-decoration:underline wavy;text-underline-offset:5px}
.nav .btn{font-size:.85rem;padding:.7em 1em;box-shadow:3px 3px 0 var(--brown)}
@media (max-width:720px){.nav-links a:not(.btn){display:none}.nav-logo img{height:40px}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--orange);overflow:hidden;border-bottom:3px solid var(--brown)}
.waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.waves path{fill:none;stroke:var(--peach);stroke-width:7;stroke-linecap:round;stroke-dasharray:14 0}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:56px 80px}
.hero-copy{min-width:0}
.hero-kicker{display:inline-block;background:var(--brown);color:var(--cream);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.45em .9em;border-radius:999px;transform:rotate(-3deg);margin-bottom:18px}
.hero-logo{width:min(520px,100%);height:auto;filter:drop-shadow(5px 5px 0 rgba(73,37,30,.18))}
.hero-logo.wobble{animation:wob 6s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-1.2deg) scale(1.01)}75%{transform:rotate(1deg) scale(.995)}}
.hero-tag{font-family:var(--script);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;margin:18px 0 26px;color:var(--brown)}
.hero-tag mark{background:var(--butter);color:var(--brown);padding:0 .2em;border-radius:6px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-num{margin-top:16px;font-weight:600;font-size:.9rem}
.hero-num span{user-select:all;background:var(--cream);padding:.15em .5em;border-radius:8px;border:2px solid var(--brown)}
.hero-art{position:relative;min-height:440px}
.polaroid{position:absolute;background:#fff;padding:10px 10px 38px;border:3px solid var(--brown);box-shadow:var(--shadow);border-radius:6px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.polaroid .ph{width:100%;aspect-ratio:1;max-width:100%}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--script);font-size:1.35rem;line-height:1}
.polaroid:hover{transform:rotate(0) scale(1.05)!important;z-index:5}
.p1{width:58%;left:2%;top:4%;transform:rotate(-7deg)}
.p2{width:52%;right:0;top:30%;transform:rotate(6deg)}
.p3{width:40%;left:16%;bottom:-2%;transform:rotate(3deg)}
.badge{position:absolute;width:132px;height:132px;right:4%;top:-2%;z-index:4;animation:spin 14s linear infinite}
.badge text{font-family:var(--display);font-size:11.5px;letter-spacing:1.6px;fill:var(--cream)}
@keyframes spin{to{transform:rotate(360deg)}}
.sparkle{position:absolute;color:var(--cream);width:34px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.6) rotate(45deg);opacity:.6}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-block:36px 56px;gap:24px}
  .hero-art{min-height:380px;max-width:460px;width:100%;margin:0 auto}
}

/* ---------- photo frames with fallback ---------- */
.ph{position:relative;overflow:hidden;background:var(--peach);border-radius:4px}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .fb{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:12px;background:repeating-linear-gradient(-35deg,var(--peach) 0 18px,#FFC2A3 18px 36px);font-family:var(--display);font-size:1.1rem;line-height:1;color:var(--brown)}
.ph.noimg img{display:none}
.ph.noimg .fb{display:grid}

/* ---------- marquee ---------- */
.ticker{background:var(--brown);color:var(--cream);overflow:hidden;border-bottom:3px solid var(--brown);transform:rotate(-1.2deg) scale(1.03);margin-top:-14px;position:relative;z-index:3}
.ticker-track{display:flex;width:max-content;animation:tick 28s linear infinite}
.ticker span{font-family:var(--display);font-size:1.15rem;padding:.7em 0;white-space:nowrap}
.ticker i{font-style:normal;color:var(--orange);padding:0 .8em}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
section{padding-block:80px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:40px}
.sec-head h2{font-size:clamp(2.4rem,7vw,5rem);color:var(--orange);-webkit-text-stroke:2px var(--brown);text-shadow:4px 4px 0 var(--brown)}
.sec-head .script{font-family:var(--script);font-size:1.7rem;transform:rotate(-3deg);display:inline-block}
.sec-head p{max-width:34ch;font-weight:500}

/* ---------- menu cards ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
@media (max-width:960px){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.menu-grid{grid-template-columns:1fr}}
.card{position:relative;background:#fff;border:3px solid var(--brown);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;min-width:0}
.card:nth-child(3n+1){transform:rotate(-1.4deg)}
.card:nth-child(3n+2){transform:rotate(1deg)}
.card:nth-child(3n){transform:rotate(-.6deg)}
.card:hover{transform:rotate(0) translateY(-6px);box-shadow:10px 10px 0 var(--brown)}
.card .ph{aspect-ratio:4/3;border-radius:19px 19px 0 0;border-bottom:3px solid var(--brown)}
.card .ph img{transition:transform .5s}
.card:hover .ph img{transform:scale(1.07) rotate(1deg)}
.sticker{position:absolute;top:-14px;right:-10px;z-index:2;background:var(--butter);border:2.5px solid var(--brown);border-radius:999px;padding:.35em .8em;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;transform:rotate(8deg);box-shadow:2px 2px 0 var(--brown)}
.sticker.mint{background:var(--mint)}
.sticker.pink{background:#FFC8DD}
.sticker.cream{background:var(--cream)}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:6px 12px}
.card-top h3{flex:1 1 150px;min-width:0}
.card h3{font-size:1.45rem;line-height:1}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .desc{font-size:.92rem}
.price{font-family:var(--display);font-size:1.15rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:.72rem;font-weight:600;display:block;text-align:right;opacity:.75}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px}
.card-foot .btn{position:relative;z-index:2;font-size:.82rem;padding:.65em 1em;box-shadow:3px 3px 0 var(--brown)}
.peek{font-weight:700;font-size:.82rem;text-decoration:underline wavy var(--orange);text-underline-offset:4px}

/* veg / egg marks (Indian food labelling style) */
.mark{display:inline-grid;place-items:center;width:18px;height:18px;border:2px solid currentColor;border-radius:3px;flex:none;vertical-align:middle}
.mark::after{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.mark.veg{color:var(--veg)}
.mark.egg{color:var(--egg)}
.diet{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ---------- vibe check ---------- */
.vibe{background:var(--brown);color:var(--cream);border-block:3px solid var(--brown);position:relative;overflow:hidden}
.vibe .sec-head h2{color:var(--butter);-webkit-text-stroke:0;text-shadow:4px 4px 0 var(--orange)}
.moods{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.mood{font-family:var(--body);font-weight:700;font-size:.95rem;background:transparent;color:var(--cream);border:2.5px solid var(--cream);border-radius:999px;padding:.6em 1.1em;cursor:pointer;transition:all .15s}
.mood:hover{background:var(--cream);color:var(--brown);transform:rotate(-2deg)}
.mood[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--brown);transform:rotate(-2deg) scale(1.05)}
.verdict{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;background:var(--cream);color:var(--brown);border:3px solid var(--cream);border-radius:var(--radius);padding:20px;box-shadow:8px 8px 0 var(--orange);max-width:820px}
.verdict .ph{aspect-ratio:1;border:3px solid var(--brown);border-radius:16px;transform:rotate(-3deg)}
.verdict h3{font-size:clamp(1.6rem,4vw,2.3rem);margin:4px 0 10px}
.verdict .why{font-family:var(--script);font-size:1.5rem;line-height:1.15;margin-bottom:16px}
.verdict .label{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)}
.verdict .row{display:flex;flex-wrap:wrap;gap:12px}
.verdict.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.94) rotate(-1deg)}100%{transform:none}}
@media (max-width:640px){.verdict{grid-template-columns:1fr}.verdict .ph{max-width:240px}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--peach);border:3px solid var(--brown);border-radius:var(--radius);padding:26px 22px;position:relative;box-shadow:var(--shadow)}
.step:nth-child(2){background:var(--butter);transform:rotate(1deg)}
.step:nth-child(3){background:var(--mint);transform:rotate(-1deg)}
.step b{font-family:var(--display);font-size:3.2rem;line-height:1;display:block;color:var(--orange);-webkit-text-stroke:2px var(--brown)}
.step h3{font-size:1.5rem;margin:8px 0 8px}

/* ---------- big CTA ---------- */
.cta-band{background:var(--orange);border-block:3px solid var(--brown);position:relative;overflow:hidden;text-align:center}
.cta-band h2{font-size:clamp(2.6rem,9vw,6.5rem);color:var(--cream);-webkit-text-stroke:2.5px var(--brown);text-shadow:6px 6px 0 var(--brown);position:relative}
.cta-band p{font-family:var(--script);font-size:1.8rem;margin:14px 0 26px;position:relative}
.cta-band .hero-ctas{justify-content:center;position:relative}
.cta-band .hero-num{position:relative}

/* ---------- footer ---------- */
footer{background:var(--brown);color:var(--cream);padding-block:56px 110px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
footer img{width:220px}
footer h4{font-family:var(--display);font-weight:400;font-size:1.1rem;margin:0 0 10px;color:var(--orange)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline wavy var(--orange)}
footer small{display:block;margin-top:14px;opacity:.7}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* ---------- floating WA ---------- */
.fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;width:62px;height:62px;border-radius:50%;background:#25D366;border:3px solid var(--brown);box-shadow:4px 4px 0 var(--brown);display:grid;place-items:center;animation:bob 2.6s ease-in-out infinite}
.fab svg{width:32px;height:32px}
.fab::after{content:"order rn!";position:absolute;right:72px;white-space:nowrap;background:var(--cream);border:2.5px solid var(--brown);padding:.3em .7em;border-radius:12px;font-weight:800;font-size:.8rem;transform:rotate(-4deg)}
@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}
@media (max-width:600px){.fab::after{display:none}}
.has-mbar .fab::after{display:none}

/* ---------- product page ---------- */
.crumbs{font-weight:600;font-size:.85rem;padding-block:22px 0}
.crumbs a{text-decoration:underline wavy var(--orange);text-underline-offset:4px}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-block:30px 70px}
@media (max-width:880px){.pdp{grid-template-columns:1fr;gap:36px}}
.pdp-art{position:relative;padding:10px 20px 30px 10px;min-width:0}
.pdp-art .polaroid{position:relative;transform:rotate(-3deg);padding:14px 14px 56px}
.pdp-art .polaroid figcaption{font-size:1.8rem;bottom:12px}
.pdp-art .badge{right:-6px;top:-24px;width:120px;height:120px}
.pdp-art .badge text{fill:var(--brown)}
.pdp-art .badge circle{fill:var(--butter)}
.pdp-info{min-width:0;display:flex;flex-direction:column;gap:18px}
.pdp-info h1{font-size:clamp(2.6rem,6.5vw,4.6rem);color:var(--orange);-webkit-text-stroke:2px var(--brown);text-shadow:5px 5px 0 var(--brown)}
.quip{font-family:var(--script);font-size:1.9rem;line-height:1.1;transform:rotate(-1.5deg);display:inline-block}
.pdp-desc{font-size:1.08rem;max-width:52ch}
.meter{display:grid;gap:10px;background:#fff;border:3px solid var(--brown);border-radius:var(--radius);padding:18px 20px}
.meter h2{font-size:1.1rem}
.meter-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;font-weight:600;font-size:.88rem}
.meter-bar{height:16px;border:2.5px solid var(--brown);border-radius:999px;overflow:hidden;background:var(--cream)}
.meter-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--orange) 0 8px,var(--orange-deep) 8px 16px);border-right:2.5px solid var(--brown);transform-origin:left;animation:grow 1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes grow{from{transform:scaleX(.05)}}
.slip{background:var(--peach);border:3px solid var(--brown);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:grid;gap:16px}
.slip-label{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.sizes{display:flex;flex-wrap:wrap;gap:10px}
.size{font-family:var(--body);font-weight:700;background:var(--cream);color:var(--brown);border:2.5px solid var(--brown);border-radius:14px;padding:.55em 1em;cursor:pointer;display:grid;gap:2px;text-align:left;font-size:.95rem}
.size small{font-weight:600;opacity:.75;font-size:.78rem}
.size[aria-pressed="true"]{background:var(--brown);color:var(--cream);transform:rotate(-2deg)}
.qty-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.qty{display:inline-flex;align-items:center;border:2.5px solid var(--brown);border-radius:999px;background:var(--cream);overflow:hidden}
.qty button{font-family:var(--display);font-size:1.2rem;width:44px;height:44px;border:0;background:transparent;color:var(--brown);cursor:pointer}
.qty button:hover{background:var(--butter)}
.qty output{min-width:36px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.total{font-family:var(--display);font-size:2rem;font-variant-numeric:tabular-nums}
.slip .hero-ctas{gap:12px}
.slip .btn{flex:1 1 200px;justify-content:center}
.slip-note{font-size:.8rem;font-weight:500}
.also{background:#fff;border-top:3px solid var(--brown)}
.also .menu-grid .desc{display:none}

/* mobile sticky order bar on product pages */
.mbar{display:none}
@media (max-width:700px){
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--cream);border-top:3px solid var(--brown);padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter)}
  .mbar .btn{flex:1;justify-content:center;font-size:.85rem;padding:.75em .8em}
  .has-mbar .fab{display:none}
}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:960px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-card{position:relative;background:var(--cream);border:3px solid var(--brown);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.post-card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--shadow)}
.post-card .ph{aspect-ratio:16/10;border-bottom:3px solid var(--brown);border-radius:0}
.post-card-body{padding:16px 18px 20px;display:grid;gap:8px}
.post-card h3{font-size:1.25rem;line-height:1.05}
.post-card h3 a{text-decoration:none}
.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card p{font-size:.88rem}
.post-kicker{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep)}
.blog-hero{position:relative;background:var(--orange);overflow:hidden;border-bottom:3px solid var(--brown);padding-block:64px 70px}
.blog-hero .wrap{position:relative}
.blog-hero h1{font-size:clamp(3rem,10vw,7rem);color:var(--brown)}
.post{max-width:800px;padding-block:20px 60px}
.post-head{display:grid;gap:22px;margin-bottom:34px}
.post-head h1{font-size:clamp(2.1rem,5.5vw,3.6rem);color:var(--brown)}
.post-photo{position:relative;transform:rotate(-1.5deg);padding:12px 12px 48px}
.post-photo .ph{aspect-ratio:16/9}
.post-photo figcaption{font-size:1.6rem;bottom:10px}
.prose{font-size:1.07rem;line-height:1.75;display:grid;gap:18px;max-width:68ch}
.prose h2{font-size:clamp(1.5rem,3.5vw,2rem);margin-top:18px;color:var(--orange-deep);line-height:1.05}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.prose a{font-weight:700;text-decoration:underline wavy var(--orange);text-underline-offset:4px}
.post-cta{margin-top:44px;background:var(--brown);color:var(--cream);border-radius:var(--radius);padding:28px;box-shadow:8px 8px 0 var(--orange);display:grid;gap:12px}
.post-cta h2{font-size:2rem;color:var(--butter)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}