:root{--paper:#fff9f0;--paper2:#fdf4e7;--blush:#f6d8d8;--blush2:#eebfbf;--sage:#cfdcc8;--sage2:#b7cbac;--butter:#f3e0b5;--cocoa:#5b4232;--ink:#4a3526;--gold:#d4a843;--taupe:#b89a7a;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Lora',serif;background:var(--paper);color:var(--ink);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}

/* ============ KEYFRAMES ============ */
@keyframes sway{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(34px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes twink{0%,100%{opacity:.35;transform:scale(1) rotate(var(--rot,0deg));}50%{opacity:1;transform:scale(1.25) rotate(var(--rot,0deg));}}
@keyframes driftStar{0%{transform:translateY(0) rotate(0);}100%{transform:translateY(-30px) rotate(12deg);}}
@keyframes marq{to{transform:translateX(-50%);}}
@keyframes heartUp{0%{opacity:1;transform:translate(0,0) scale(.7);}100%{opacity:0;transform:translate(var(--hx,0),-70px) scale(1.2);}}
@keyframes crumb{0%{opacity:1;transform:translate(0,0);}100%{opacity:0;transform:translate(var(--cx,0),26px);}}
@keyframes dirt{0%{opacity:1;transform:translate(0,0) rotate(0);}100%{opacity:0;transform:translate(var(--dx,0),-34px) rotate(160deg);}}
@keyframes starPop{0%{opacity:1;transform:translate(0,0) scale(.5) rotate(0);}100%{opacity:0;transform:translate(var(--sx,0),var(--sy,-90px)) scale(1.3) rotate(180deg);}}
@keyframes wagT{0%,100%{transform:rotate(0);}50%{transform:rotate(20deg);}}
@keyframes stepA{0%,100%{transform:rotate(17deg);}50%{transform:rotate(-17deg);}}
@keyframes earFlop{0%,100%{transform:rotate(0);}50%{transform:rotate(-8deg);}}
@keyframes zzUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-44px);}}
@keyframes pawWalk{0%{opacity:0;}15%{opacity:.7;}100%{opacity:0;}}
@keyframes drawPath{to{stroke-dashoffset:0;}}
@keyframes flip360{0%{transform:rotate(0) translateY(0);}50%{transform:rotate(180deg) translateY(-46px);}100%{transform:rotate(360deg) translateY(0);}}
@keyframes flip360f{0%{transform:scaleX(-1) rotate(0) translateY(0);}50%{transform:scaleX(-1) rotate(-180deg) translateY(-46px);}100%{transform:scaleX(-1) rotate(-360deg) translateY(0);}}
@keyframes hopA{0%,100%{transform:translateY(0);}50%{transform:translateY(-30px);}}
@keyframes hopAf{0%,100%{transform:scaleX(-1) translateY(0);}50%{transform:scaleX(-1) translateY(-30px);}}
@keyframes begBob{0%,100%{transform:rotate(-14deg) translateY(0);}50%{transform:rotate(-14deg) translateY(-5px);}}
@keyframes begBobF{0%,100%{transform:scaleX(-1) rotate(-14deg) translateY(0);}50%{transform:scaleX(-1) rotate(-14deg) translateY(-5px);}}
@keyframes digPaw{0%,100%{transform:rotate(10deg);}50%{transform:rotate(70deg);}}
@keyframes shuffleTop{0%{transform:rotate(3deg);}40%{transform:rotate(10deg) translate(60px,-20px);}100%{transform:rotate(-3deg) translate(0,0);}}
.reveal{opacity:0;}
.reveal.in{animation:fadeUp .9s ease both;}
.reveal.d1.in{animation-delay:.12s;}
.reveal.d2.in{animation-delay:.24s;}
.reveal.d3.in{animation-delay:.36s;}
@media (prefers-reduced-motion: reduce){
*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
.reveal{opacity:1;}}

/* ============ PRELOADER ============ */
#loader{position:fixed;inset:0;background:var(--paper);z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;transition:opacity .6s,visibility .6s;}
#loader.gone{opacity:0;visibility:hidden;}
#loader img{width:110px;height:110px;border-radius:50%;border:4px solid var(--gold);animation:sway 2s ease-in-out infinite;}
#loader .lp{font-family:'Caveat',cursive;font-size:26px;color:var(--cocoa);font-weight:700;}
#loader .ptrail{display:flex;gap:14px;}
#loader .ptrail span{font-size:16px;opacity:0;animation:pawWalk 1.4s ease infinite;}
#loader .ptrail span:nth-child(2){animation-delay:.18s;}
#loader .ptrail span:nth-child(3){animation-delay:.36s;}
#loader .ptrail span:nth-child(4){animation-delay:.54s;}
#loader .ptrail span:nth-child(5){animation-delay:.72s;}

/* ============ STARRY BACKGROUND (bold + visible) ============ */
.starsbg{position:fixed;inset:0;pointer-events:none;z-index:0;}
.bstar{position:absolute;color:var(--gold);animation:twink var(--dur,4s) ease-in-out infinite;text-shadow:0 0 8px rgba(212,168,67,.4);transition:transform .8s ease;line-height:1;}
.bstar.soft{color:#e9cf96;text-shadow:none;}
.bstar.big{filter:blur(.4px);}

/* ============ NAV ============ */
.nav{background:rgba(255,249,240,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:80px;position:sticky;top:0;z-index:600;border-bottom:3px dashed var(--blush);}
.nav-name{font-family:'Caveat',cursive;color:var(--cocoa);font-size:30px;font-weight:700;cursor:pointer;}
.nav-name span{color:var(--gold);}
.nav-links{display:flex;gap:1.7rem;list-style:none;align-items:center;}
.nav-links a{font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:#8a6f58;position:relative;cursor:pointer;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--cocoa);}
.nav-links a.active::after,.nav-links a:hover::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-4px;border-bottom:3px solid var(--blush2);border-radius:60% 30% 50% 40%;}
.nav-cta{background:var(--blush);padding:9px 22px;border-radius:30px 26px 32px 24px;border:2.5px solid var(--cocoa);color:var(--cocoa) !important;box-shadow:0 4px 0 var(--cocoa);transition:transform .15s,box-shadow .15s;}
.nav-cta::after{display:none !important;}
.nav-cta:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--cocoa);}
.nav-logo{width:54px;height:54px;border-radius:50%;border:3px solid var(--butter);margin-left:1.1rem;transform:rotate(4deg);transition:transform .3s;cursor:pointer;}
.nav-logo:hover{transform:rotate(-6deg) scale(1.08);}
.nav-social{display:flex;gap:.55rem;align-items:center;margin-left:1.6rem;}
.nav-social a{color:var(--cocoa);border:2px solid var(--cocoa);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#fff;transition:transform .18s,background .18s;}
.nav-social a:hover{background:var(--blush);transform:rotate(-8deg) scale(1.08);}
.nav-social a svg{display:block;}
@media(max-width:980px){.nav-links{display:none;}.nav-social{display:none;}}

/* ============ PAGES ============ */
.page{display:none;}
.page.show{display:block;animation:fadeIn .45s ease;}

/* ============ SHARED ============ */
.sec{max-width:1140px;margin:0 auto;padding:5rem 2rem;position:relative;z-index:1;}
.kicker{font-family:'Caveat',cursive;font-size:25px;color:#b08968;}
.h2{font-family:'Caveat',cursive;font-size:clamp(44px,6vw,68px);color:var(--cocoa);font-weight:700;line-height:.95;margin:.2rem 0 .9rem;}
.sub{font-size:16px;line-height:1.9;color:#7a6450;max-width:640px;}
.center{text-align:center;}
.center .sub{margin:0 auto;}
.btn{font-family:'Caveat',cursive;font-size:23px;font-weight:700;padding:11px 28px;border-radius:34px 28px 36px 26px;border:2.5px solid var(--cocoa);cursor:pointer;transition:transform .18s,box-shadow .18s;display:inline-block;box-shadow:0 5px 0 var(--cocoa);}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--cocoa);}
.btn-p{background:var(--blush);color:var(--cocoa);}
.btn-s{background:var(--sage);color:var(--cocoa);}
.btn-g{background:var(--butter);color:var(--cocoa);}
.washi{height:36px;background:repeating-linear-gradient(45deg,var(--sage) 0 16px,#dde8d6 16px 32px);opacity:.85;transform:rotate(-.5deg) scaleX(1.04);box-shadow:0 3px 8px rgba(91,66,50,.12);position:relative;z-index:1;}
.washi.pink{background:repeating-linear-gradient(45deg,var(--blush) 0 16px,#fbe7e7 16px 32px);transform:rotate(.5deg) scaleX(1.04);}
.washi.gold{background:repeating-linear-gradient(45deg,var(--butter) 0 16px,#f9ecce 16px 32px);}
.tape{position:absolute;width:92px;height:26px;background:rgba(243,224,181,.88);top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.08);z-index:2;}
.polaroid{background:#fff;padding:14px 14px 52px;box-shadow:0 12px 30px rgba(91,66,50,.2);position:relative;transition:transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;}
.polaroid img{width:100%;object-fit:cover;}
.polaroid .cap{font-family:'Caveat',cursive;font-size:25px;text-align:center;color:var(--cocoa);position:absolute;bottom:8px;left:0;right:0;}
.tiltable{transition:transform .6s cubic-bezier(.34,1.56,.64,1);}
.stealable{display:inline-block;transition:opacity .3s;}
.vid-napped{filter:saturate(.3) brightness(.6);transition:filter .5s;}

/* ============ HERO ============ */
.hero{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:5rem 2rem 5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:3.5rem;}}
.hero-kicker{font-family:'Caveat',cursive;font-size:27px;color:#b08968;transform:rotate(-2deg);display:inline-block;}
.hero h1{font-family:'Caveat',cursive;font-size:clamp(58px,9vw,100px);line-height:.92;color:var(--cocoa);font-weight:700;}
.hero h1 .star{color:var(--gold);display:inline-block;animation:sway 3s ease-in-out infinite;}
.scrib{position:relative;display:inline-block;}
.scrib svg{position:absolute;left:-4%;bottom:-12px;width:108%;height:22px;overflow:visible;}
.scrib path{stroke:var(--blush2);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:drawPath 1.2s .8s ease forwards;}
.hero-sub{font-size:17px;line-height:1.85;color:#7a6450;margin-top:1.3rem;max-width:470px;font-style:italic;}
.hero-btns{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;}
.hero-note{margin-top:1.6rem;font-family:'Caveat',cursive;font-size:21px;color:#b08968;display:flex;align-items:center;gap:8px;}
.stack{position:relative;height:470px;}
@media(max-width:860px){.stack{height:420px;max-width:420px;margin:0 auto;}}
.stack .polaroid{position:absolute;inset:0;cursor:pointer;}
.stack .polaroid img{height:100%;}
.stack .polaroid:nth-child(1){transform:rotate(-5deg) translate(-14px,10px);z-index:1;}
.stack .polaroid:nth-child(2){transform:rotate(4deg) translate(12px,-6px);z-index:2;}
.stack .polaroid:nth-child(3){transform:rotate(-1deg);z-index:3;}
.stack:hover .polaroid:nth-child(3){transform:rotate(1.5deg) translateY(-8px);}
.hero-logo-stamp{position:absolute;bottom:-26px;right:-18px;width:120px;height:120px;border-radius:50%;border:4px solid var(--gold);transform:rotate(-8deg);box-shadow:0 8px 18px rgba(91,66,50,.22);background:#fff;z-index:5;transition:transform .3s;}
.hero-logo-stamp:hover{transform:rotate(4deg) scale(1.06);}
.marq{overflow:hidden;padding:13px 0;position:relative;z-index:1;background:var(--paper2);border-top:2px dashed #ead9c3;border-bottom:2px dashed #ead9c3;}
.marq-track{display:flex;gap:3rem;width:max-content;animation:marq 26s linear infinite;font-family:'Caveat',cursive;font-size:23px;font-weight:700;color:#a98a68;}
.marq-track span{white-space:nowrap;}

/* feature cards home */
.feat3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.9rem;margin-top:2.6rem;}
.fcard{background:#fff;border:2px solid #ead9c3;border-radius:8px;padding:1.3rem;position:relative;box-shadow:0 10px 24px rgba(91,66,50,.1);cursor:pointer;transition:transform .35s,box-shadow .35s;}
.fcard:nth-child(1){transform:rotate(-1.5deg);}
.fcard:nth-child(2){transform:rotate(1deg);}
.fcard:nth-child(3){transform:rotate(-.7deg);}
.fcard:hover{transform:rotate(0) translateY(-8px);box-shadow:0 18px 34px rgba(91,66,50,.16);}
.fcard img{width:100%;height:170px;object-fit:cover;border-radius:5px;}
.fcard h3{font-family:'Caveat',cursive;font-size:30px;color:var(--cocoa);font-weight:700;margin:.8rem 0 .2rem;}
.fcard p{font-size:13.5px;font-style:italic;color:#8a6f58;line-height:1.65;}
.fcard .go{font-family:'Caveat',cursive;font-size:21px;font-weight:700;color:var(--gold);margin-top:.6rem;display:inline-block;}

/* ============ MENU ============ */
.mtabs{display:flex;gap:.8rem;justify-content:center;margin:2rem 0 .4rem;flex-wrap:wrap;}
.mtab{font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:#8a6f58;padding:7px 22px;border:2.5px dashed transparent;border-radius:30px;transition:all .2s;}
.mtab:hover{color:var(--cocoa);}
.mtab.on{border-color:var(--blush2);color:var(--cocoa);background:#fff;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1.9rem;margin-top:2.2rem;}
.rcard{background:#fff;border:2px solid #ead9c3;border-radius:6px;padding:1.2rem;position:relative;box-shadow:0 8px 22px rgba(91,66,50,.1);transition:transform .35s,box-shadow .35s;}
.rcard:nth-child(odd){transform:rotate(-1.4deg);}
.rcard:nth-child(even){transform:rotate(1.2deg);}
.rcard:hover{transform:rotate(0) translateY(-8px);box-shadow:0 16px 32px rgba(91,66,50,.16);}
.rcard.hide{display:none;}
.rcard .tape{width:70px;height:22px;}
.rcard img{width:100%;height:130px;object-fit:cover;border-radius:4px;}
.rcard img.drink{height:190px;object-fit:contain;background:linear-gradient(170deg,#fffdf8,#fdf4e7);padding:8px 4px 0;}

/* ============ ORDER PAGE ============ */
.ord-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:1.5rem;margin-top:1.6rem;align-items:start;}
@media(max-width:900px){.ord-grid{grid-template-columns:1fr;}}
.ord-step{font-family:'Caveat',cursive;font-size:36px;font-weight:700;color:var(--cocoa);margin:1.1rem 0 .7rem;display:flex;align-items:center;gap:.6rem;}
.ord-step .bn{width:42px;height:42px;border-radius:50%;background:var(--gold);color:#fff;font-size:27px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--cocoa);}
/* pickup picker */
.slot-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.slot{font-family:'Caveat',cursive;font-weight:700;font-size:25px;color:var(--cocoa);background:#fff;border:2.5px solid #ead9c3;border-radius:14px;padding:9px 15px;cursor:pointer;transition:all .2s;text-align:left;line-height:1.15;}
.slot small{display:block;font-size:18px;color:#a98a68;font-weight:400;}
.slot:hover{border-color:var(--blush2);transform:translateY(-2px);}
.slot.on{border-color:var(--cocoa);background:var(--butter);box-shadow:0 4px 0 var(--cocoa);}
.slot.full{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
.time-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;}
.tslot{font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:var(--cocoa);background:#fff;border:2px solid #ead9c3;border-radius:20px;padding:6px 16px;cursor:pointer;transition:all .2s;}
.tslot:hover{border-color:var(--blush2);}
.tslot.on{background:var(--sage);border-color:var(--cocoa);}
/* drink grid for ordering */
.ord-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-top:.5rem;}
.odrink{background:#fff;border:2px solid #ead9c3;border-radius:10px;padding:.5rem;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;}
.odrink:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(91,66,50,.14);}
.odrink img{width:100%;height:108px;object-fit:contain;background:linear-gradient(170deg,#fffdf8,#fdf4e7);border-radius:8px;}
.odrink img[src^="https"]{object-fit:cover;}
.odrink h4{font-family:'Caveat',cursive;font-size:26px;font-weight:700;color:var(--cocoa);margin:.35rem 0 .05rem;line-height:1.05;}
.odrink .op{font-family:'Caveat',cursive;font-size:24px;color:var(--gold);font-weight:700;}
.odrink .oing{font-family:'Lora',serif;font-size:12.5px;color:#a98a68;line-height:1.3;margin-top:.25rem;font-style:italic;}
.odrink .qty{position:absolute;top:6px;right:6px;background:var(--cocoa);color:#fff;font-family:'Lora',serif;font-size:17px;min-width:28px;height:28px;border-radius:50%;display:none;align-items:center;justify-content:center;}
.odrink.added .qty{display:flex;}
.ocat{font-family:'Caveat',cursive;font-size:30px;font-weight:700;color:#b08968;margin:1rem 0 .3rem;}
/* cart */
.cart{background:#fff;border:2px solid #ead9c3;border-radius:12px;box-shadow:0 14px 34px rgba(91,66,50,.13);padding:1.1rem;position:sticky;top:96px;}
.cart h3{font-family:'Caveat',cursive;font-size:40px;font-weight:700;color:var(--cocoa);margin-bottom:.3rem;}
.cart .pickup-at{font-family:'Caveat',cursive;font-size:25px;color:#a98a68;margin-bottom:.7rem;padding-bottom:.7rem;border-bottom:2px dashed #ead9c3;line-height:1.15;}
.cart .pickup-at b{color:var(--cocoa);}
.citem{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1.5px dashed #f0e4d2;}
.citem .cimg{width:40px;height:40px;border-radius:8px;object-fit:cover;background:linear-gradient(170deg,#fffdf8,#fdf4e7);border:1.5px solid #ead9c3;flex:none;}
.citem .cimg.contain{object-fit:contain;}
.citem .cn{flex:1;font-size:19px;color:var(--ink);font-family:'Caveat',cursive;font-weight:700;}
.citem .cc{display:flex;align-items:center;gap:.35rem;}
.citem button{width:30px;height:30px;border-radius:50%;border:2px solid var(--cocoa);font-family:'Caveat',cursive;font-weight:700;color:var(--cocoa);font-size:22px;line-height:1;background:#fff;}
.citem button:hover{background:var(--blush);}
.citem .qn{font-family:'Caveat',cursive;font-weight:700;font-size:22px;min-width:22px;text-align:center;}
.cart-empty{font-family:'Caveat',cursive;font-size:28px;color:#b08968;text-align:center;padding:1.6rem 0;line-height:1.2;}
.cart-total{display:flex;justify-content:space-between;font-family:'Caveat',cursive;font-weight:700;font-size:34px;color:var(--cocoa);margin:.8rem 0;}
.cart-cta{width:100%;text-align:center;font-family:'Caveat',cursive;font-size:32px;font-weight:700;padding:12px;border-radius:30px 24px 32px 22px;border:2.5px solid var(--cocoa);background:var(--blush);color:var(--cocoa);box-shadow:0 5px 0 var(--cocoa);transition:all .15s;cursor:pointer;}
.cart-cta:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--cocoa);}
.cart-cta:disabled{opacity:.45;cursor:not-allowed;}
.ord-note{font-size:17px;color:#a98a68;font-style:italic;margin-top:.7rem;line-height:1.5;text-align:center;font-family:'Caveat',cursive;}
/* order page headings */
#page-order .kicker{font-size:33px;}
#page-order .h2{font-size:clamp(48px,7.5vw,80px);}
#page-order .sub{font-size:21px;line-height:1.7;max-width:none;}

/* ============ ORDER: category tabs (data-driven) ============ */
.otabs{display:flex;gap:.6rem;flex-wrap:wrap;margin:.3rem 0 .8rem;}
.otab{font-family:'Caveat',cursive;font-size:21px;font-weight:700;color:#8a6f58;padding:6px 18px;border:2.5px dashed transparent;border-radius:30px;background:transparent;cursor:pointer;transition:all .2s;}
.otab:hover{color:var(--cocoa);}
.otab.on{border-color:var(--blush2);color:var(--cocoa);background:#fff;box-shadow:0 4px 0 rgba(238,191,191,.5);}
.ocat-panel{display:none;}
.ocat-panel.on{display:block;animation:fadeIn .35s ease;}

/* ============ ORDER: "your usual" welcome-back banner ============ */
.usual-banner{background:linear-gradient(170deg,#fffdf6,#fdf1d8);border:2.5px dashed var(--blush2);border-radius:14px 12px 16px 11px;padding:.85rem 1.1rem;margin:.2rem 0 .9rem;display:flex;align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap;box-shadow:0 6px 16px rgba(91,66,50,.1);animation:fadeIn .4s ease;}
.usual-banner[hidden]{display:none;}
.usual-banner .ub-text{font-family:'Caveat',cursive;font-size:24px;font-weight:700;color:var(--cocoa);line-height:1.2;}
.usual-banner .ub-text b{color:var(--gold);}
.usual-banner .ub-btns{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.usual-banner .ub-yes{font-family:'Caveat',cursive;font-size:20px;font-weight:700;padding:7px 16px;border-radius:22px;border:2.5px solid var(--cocoa);background:var(--blush);color:var(--cocoa);box-shadow:0 3px 0 var(--cocoa);cursor:pointer;transition:all .15s;}
.usual-banner .ub-yes:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--cocoa);}
.usual-banner .ub-no{font-family:'Caveat',cursive;font-size:18px;font-weight:700;padding:6px 12px;border-radius:20px;border:2px solid #ddc9ad;background:transparent;color:#a98a68;cursor:pointer;transition:all .15s;}
.usual-banner .ub-no:hover{border-color:var(--cocoa);color:var(--cocoa);}

/* ============ ORDER: dairy-free toggle + badge ============ */
.df-toggle{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;margin:0 0 .9rem;user-select:none;-webkit-tap-highlight-color:transparent;}
.df-toggle input{position:absolute;opacity:0;width:0;height:0;}
.df-track{width:46px;height:26px;border-radius:20px;background:#e7d7c0;border:2px solid var(--cocoa);position:relative;transition:background .2s;flex:none;}
.df-knob{position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--cocoa);transition:transform .2s;}
.df-toggle input:checked + .df-track{background:var(--sage);}
.df-toggle input:checked + .df-track .df-knob{transform:translateX(20px);}
.df-toggle input:focus-visible + .df-track{box-shadow:0 0 0 3px rgba(212,168,67,.5);}
.df-label{font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--cocoa);}
.df-badge{position:absolute;top:6px;left:6px;z-index:2;background:var(--sage);color:var(--cocoa);border:2px solid var(--cocoa);font-family:'Caveat',cursive;font-weight:700;font-size:15px;line-height:1;padding:4px 8px;border-radius:14px 12px 15px 11px;box-shadow:0 2px 0 rgba(91,66,50,.25);}
/* when the filter is on, gently de-emphasize drinks that aren't dairy-free */
/* when the filter is on, dairy-free drinks rise to the top of each category */
#ordMenu.df-only .odrink.is-df{order:0;box-shadow:0 0 0 2px var(--sage);}
#ordMenu.df-only .odrink:not(.is-df){order:1;opacity:.5;}

/* ============ ORDER: mobile "view cart" jump bar ============ */
/* hidden on desktop (cart is always visible via sticky column) */
#cartBar{display:none;}
.cart-flash{animation:cartFlash .6s ease;}
@keyframes cartFlash{0%{box-shadow:0 0 0 0 rgba(212,168,67,.5);}50%{box-shadow:0 0 0 8px rgba(212,168,67,0);}100%{box-shadow:0 14px 34px rgba(91,66,50,.13);}}

/* ============ SPECIAL BANNER ============ */
.special{max-width:1100px;margin:2.2rem auto 0;padding:0 1.4rem;}
.special-in{display:flex;align-items:center;gap:1.2rem;background:linear-gradient(120deg,#fdf4e7,#fbead3);border:2.5px dashed var(--gold);border-radius:16px;padding:1rem 1.5rem;box-shadow:0 8px 22px rgba(91,66,50,.1);flex-wrap:wrap;}
.special-in .sp-star{font-size:34px;}
.special-in .sp-txt{flex:1;min-width:220px;}
.special-in .sp-txt b{font-family:'Caveat',cursive;font-size:26px;color:var(--cocoa);display:block;line-height:1.1;}
.special-in .sp-txt span{font-size:14px;color:#a98a68;font-style:italic;}
.special-in .btn{white-space:nowrap;}

/* ============ CLUB + LOYALTY ============ */
.club-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2.4rem;max-width:1100px;margin:2.4rem auto 0;padding:0 1.4rem;align-items:stretch;}
@media(max-width:860px){.club-grid{grid-template-columns:1fr;}}
.club-card{background:#fff;border:2px solid #ead9c3;border-radius:14px;padding:2rem;box-shadow:0 14px 34px rgba(91,66,50,.12);position:relative;}
.club-card h3{font-family:'Caveat',cursive;font-size:34px;font-weight:700;color:var(--cocoa);margin-bottom:.4rem;}
.club-card p{font-size:14.5px;color:#7d655b;line-height:1.65;margin-bottom:1rem;}
.club-form{display:flex;gap:.6rem;flex-wrap:wrap;}
.club-form input{flex:1;min-width:200px;font-family:'Lora',serif;font-size:15px;padding:12px 16px;border:2px solid #ead9c3;border-radius:26px;background:#fffdf8;color:var(--ink);}
.club-form input:focus{outline:none;border-color:var(--gold);}
.club-form button{font-family:'Caveat',cursive;font-size:22px;font-weight:700;padding:9px 24px;border-radius:26px;border:2.5px solid var(--cocoa);background:var(--butter);color:var(--cocoa);box-shadow:0 4px 0 var(--cocoa);cursor:pointer;transition:all .15s;}
.club-form button:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--cocoa);}
.club-fine{font-size:12px;color:#b09a82;font-style:italic;margin-top:.7rem;}
/* punch card */
.punch-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin:1.2rem 0;}
.punch{aspect-ratio:1;border:2.5px dashed #d9c3a5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;background:#fffdf8;transition:all .3s;}
.punch.got{border-style:solid;border-color:var(--gold);background:var(--butter);transform:rotate(-8deg);}
.punch-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
.punch-btn{font-family:'Caveat',cursive;font-size:20px;font-weight:700;padding:7px 18px;border-radius:22px;border:2px solid var(--cocoa);background:#fff;color:var(--cocoa);cursor:pointer;transition:all .15s;}
.punch-btn:hover{background:var(--blush);}
.punch-note{font-size:12px;color:#b09a82;font-style:italic;margin-top:.8rem;line-height:1.5;}

/* ============ FAQ ============ */
.faq-wrap{max-width:760px;margin:2.2rem auto 0;padding:0 1.4rem;}
.faq{background:#fff;border:2px solid #ead9c3;border-radius:12px;margin-bottom:.9rem;overflow:hidden;}
.faq summary{font-family:'Caveat',cursive;font-size:24px;font-weight:700;color:var(--cocoa);padding:1rem 1.4rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background .2s;}
.faq summary:hover{background:#fdf8ef;}
.faq summary::after{content:'+';font-size:28px;color:var(--gold);transition:transform .25s;}
.faq[open] summary::after{transform:rotate(45deg);}
.faq .fa-body{padding:0 1.4rem 1.2rem;font-size:14.5px;color:#7d655b;line-height:1.7;}

/* ============ TIPS & GROUP (order page) ============ */
.tip-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .7rem;align-items:center;}
.tip-lab{font-family:'Caveat',cursive;font-size:21px;font-weight:700;color:var(--cocoa);width:100%;}
.tip{font-family:'Caveat',cursive;font-size:19px;font-weight:700;padding:5px 14px;border-radius:18px;border:2px solid #ead9c3;background:#fff;color:var(--cocoa);cursor:pointer;transition:all .15s;}
.tip:hover{border-color:var(--blush2);}
.tip.on{background:var(--sage);border-color:var(--cocoa);}
.group-note{width:100%;font-family:'Lora',serif;font-size:15px;padding:10px 12px;border:2px solid #ead9c3;border-radius:12px;background:#fffdf8;color:var(--ink);resize:vertical;min-height:54px;margin-bottom:.7rem;}
.group-note:focus{outline:none;border-color:var(--gold);}
.cart .tip-hint{font-family:'Caveat',cursive;font-size:24px;color:#a98a68;}

/* ============ SHARE COUPON ============ */
.share-coupon{font-family:'Caveat',cursive;font-size:21px;font-weight:700;padding:8px 20px;border-radius:22px;border:2.5px solid var(--cocoa);background:var(--blush);color:var(--cocoa);box-shadow:0 4px 0 var(--cocoa);cursor:pointer;margin-top:.6rem;transition:all .15s;}
.share-coupon:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--cocoa);}
.rcard h3{font-family:'Caveat',cursive;font-size:26px;color:var(--cocoa);margin:.7rem 0 .2rem;font-weight:700;}
.rcard p{font-size:13px;line-height:1.6;color:#8a6f58;font-style:italic;}
.rcard .pr{font-family:'Caveat',cursive;font-size:22px;color:var(--gold);font-weight:700;margin-top:.5rem;display:flex;justify-content:space-between;align-items:center;}
.fav{font-size:18px;transition:transform .2s;filter:grayscale(1) opacity(.45);}
.fav.on{filter:none;transform:scale(1.2);}
/* build your own */
.byo{background:#fff;border:2px solid #ead9c3;border-radius:8px;box-shadow:0 12px 28px rgba(91,66,50,.12);padding:2.4rem;margin-top:3rem;position:relative;}
.byo h3{font-family:'Caveat',cursive;font-size:36px;font-weight:700;color:var(--cocoa);text-align:center;}
.byo .tag{text-align:center;font-family:'Caveat',cursive;font-size:22px;color:#b08968;margin-bottom:1.6rem;}
.byo-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.8rem;}
.byo-col .bn{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;font-family:'Caveat',cursive;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:.7rem;box-shadow:0 3px 0 var(--cocoa);}
.byo-col h4{font-family:'Caveat',cursive;font-size:25px;font-weight:700;color:var(--cocoa);margin-bottom:.5rem;}
.byo-col li{list-style:none;font-size:14px;color:#7a6450;font-style:italic;padding:4px 0;border-bottom:1.5px dashed #ead9c3;}
.byo-col li::before{content:"★ ";color:var(--gold);font-style:normal;font-size:11px;}
.byo .dream{text-align:center;font-family:'Caveat',cursive;font-size:26px;color:var(--gold);font-weight:700;margin-top:1.6rem;}

/* ============ MAP ============ */
/* real map embed */
.gmap-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:1.6rem;margin-top:2.6rem;align-items:stretch;}
@media(max-width:840px){.gmap-grid{grid-template-columns:1fr;}}
.gmap-box{border:2px solid #ead9c3;border-radius:10px;overflow:hidden;box-shadow:0 12px 28px rgba(91,66,50,.12);min-height:380px;position:relative;}
.gmap-box iframe{width:100%;height:100%;min-height:380px;border:0;filter:sepia(.18) saturate(.92);}
.gmap-tag{position:absolute;top:10px;left:10px;z-index:2;background:#fff;border:2px solid var(--cocoa);border-radius:12px;font-family:'Caveat',cursive;font-size:18px;font-weight:700;color:var(--cocoa);padding:5px 13px;box-shadow:0 4px 10px rgba(91,66,50,.2);}
.stop-list{display:flex;flex-direction:column;gap:.9rem;}
.stop{background:#fff;border:2px solid #ead9c3;border-radius:10px;padding:.9rem 1.1rem;display:flex;gap:.9rem;align-items:center;transition:transform .25s,border-color .25s;cursor:pointer;}
.stop:hover{transform:translateX(5px);border-color:var(--blush2);}
.stop .sd{font-family:'Caveat',cursive;font-weight:700;font-size:18px;color:#fff;background:var(--blush2);border-radius:10px;min-width:56px;text-align:center;padding:6px 4px;line-height:1.05;transform:rotate(-2deg);}
.stop .sd small{display:block;font-size:13px;}
.stop h5{font-family:'Caveat',cursive;font-size:21px;font-weight:700;color:var(--cocoa);}
.stop p{font-size:12px;color:#8a6f58;font-style:italic;}
.stop a{font-family:'Caveat',cursive;font-size:16px;font-weight:700;color:var(--gold);margin-left:auto;white-space:nowrap;}
.stop.past{opacity:.45;}
.stop.past .sd{background:#cdbda6;}
.stop.now{border-color:var(--gold);box-shadow:0 4px 0 rgba(212,168,67,.4);}
.stop.now .sd{background:var(--gold);}
.stop .priv{font-family:'Lora',serif;font-size:10px;font-style:italic;color:#c08a8a;border:1.5px solid #eebfbf;border-radius:10px;padding:1px 6px;margin-left:4px;vertical-align:middle;font-weight:400;}

/* "where we are now" card */
.now-card{max-width:560px;margin:2.2rem auto 0;background:#fff;border:2.5px solid var(--cocoa);border-radius:16px 13px 18px 12px;box-shadow:0 12px 30px rgba(91,66,50,.16);padding:1.5rem 1.7rem;text-align:center;}
.now-card .nc-flag{display:inline-block;font-family:'Caveat',cursive;font-weight:700;font-size:20px;color:#fff;background:var(--gold);border:2px solid var(--cocoa);border-radius:20px;padding:3px 16px;transform:rotate(-2deg);margin-bottom:.6rem;}
.now-card h3{font-family:'Caveat',cursive;font-size:38px;font-weight:700;color:var(--cocoa);line-height:1.05;}
.now-card .nc-when{font-family:'Caveat',cursive;font-size:26px;font-weight:700;color:var(--gold);margin:.2rem 0;}
.now-card p{font-size:15px;color:#8a6f58;font-style:italic;margin-bottom:.8rem;}
.now-card .nc-dir{display:inline-block;font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--cocoa);text-decoration:underline;}
.cday.priv.has::after{content:"♡";}
.cal-detail .priv{font-family:'Lora',serif;font-size:11px;font-style:italic;color:#c08a8a;border:1.5px solid #eebfbf;border-radius:10px;padding:1px 7px;margin-left:5px;vertical-align:middle;}
.cal-detail .dir[onclick]{display:block;margin-top:.7rem;cursor:pointer;color:var(--gold);}

/* ============ CALENDAR ============ */
.cal-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.8rem;margin-top:2.4rem;align-items:start;}
@media(max-width:840px){.cal-grid{grid-template-columns:1fr;}}
.cal{background:#fff;border:2px solid #ead9c3;border-radius:10px;box-shadow:0 14px 34px rgba(91,66,50,.13);padding:1.6rem;}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.cal-head h3{font-family:'Caveat',cursive;font-size:32px;font-weight:700;color:var(--cocoa);}
.cal-nav{font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--cocoa);border:2px solid var(--cocoa);border-radius:50%;width:40px;height:40px;box-shadow:0 3px 0 var(--cocoa);transition:transform .12s,box-shadow .12s;}
.cal-nav:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--cocoa);}
.cal-nav:disabled{opacity:.3;cursor:default;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);font-family:'Caveat',cursive;font-weight:700;font-size:17px;color:#b08968;text-align:center;margin-bottom:4px;}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cday{aspect-ratio:1/.85;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;color:#7a6450;position:relative;border:2px solid transparent;transition:all .2s;}
.cday.dim{opacity:.28;}
.cday.has{background:var(--paper2);border-color:#ead9c3;cursor:pointer;font-weight:600;color:var(--cocoa);}
.cday.has:hover{border-color:var(--blush2);transform:translateY(-2px);}
.cday.has::after{content:"🐾";font-size:11px;margin-top:1px;}
.cday.today{border-color:var(--gold);background:#fdf3df;}
.cday.sel{border-color:var(--cocoa);background:var(--blush);}
.cal-detail{background:#fff;border:2px solid #ead9c3;border-radius:10px;box-shadow:0 12px 28px rgba(91,66,50,.12);padding:1.6rem;position:relative;min-height:230px;}
.cal-detail .tape{width:74px;}
.cal-detail .cd-date{font-family:'Caveat',cursive;font-size:21px;color:var(--gold);font-weight:700;}
.cal-detail h4{font-family:'Caveat',cursive;font-size:29px;font-weight:700;color:var(--cocoa);margin:.2rem 0 .4rem;}
.cal-detail p{font-size:13.5px;color:#8a6f58;font-style:italic;line-height:1.7;}
.cal-detail .empty{font-family:'Caveat',cursive;font-size:23px;color:#b08968;text-align:center;padding:2.6rem 0;}
.cal-detail a.dir{font-family:'Caveat',cursive;font-size:19px;font-weight:700;color:var(--cocoa);text-decoration:underline;display:inline-block;margin-top:.7rem;}

/* ============ STORY ============ */
.story-wrap{position:relative;}
#pawpath{position:absolute;left:50%;top:120px;height:calc(100% - 160px);width:60px;transform:translateX(-50%);overflow:visible;}
#pawpath path{stroke:#d9bfa3;stroke-width:3;stroke-dasharray:9 13;fill:none;}
.chapters{display:flex;flex-direction:column;gap:3.6rem;position:relative;z-index:1;margin-top:3rem;}
.chapter{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.chapter:nth-child(even) .ch-img{order:2;}
@media(max-width:840px){.chapter{grid-template-columns:1fr;}.chapter:nth-child(even) .ch-img{order:0;}}
.ch-tag{font-family:'Caveat',cursive;font-size:22px;color:#fff;background:var(--sage2);display:inline-block;padding:3px 16px;border-radius:20px 16px 22px 14px;transform:rotate(-2deg);}
.chapter h3{font-family:'Caveat',cursive;font-size:36px;color:var(--cocoa);font-weight:700;margin:.5rem 0;}
.chapter .p{font-size:15px;line-height:1.9;color:#7a6450;}
.chapter .p b{color:var(--cocoa);}

/* film / notes / stickers */
.film{background:var(--cocoa);padding:1.8rem 0;position:relative;z-index:1;}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:18px;background:repeating-linear-gradient(90deg,transparent 0 14px,#fff9f0 14px 28px);opacity:.9;}
.film::before{top:8px;}
.film::after{bottom:8px;}
.film-in{max-width:1140px;margin:0 auto;padding:2.4rem 2rem;}
.film-head{text-align:center;margin-bottom:2rem;}
.film-head .kicker{color:#cfa97c;}
.film-head .h2{color:var(--paper);}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;}
.frame{border:6px solid #fff9f0;border-radius:4px;overflow:hidden;aspect-ratio:16/10;position:relative;background:#000;transition:transform .3s;}
.frame:hover{transform:scale(1.025) rotate(-.5deg);}
.frame video{width:100%;height:100%;object-fit:cover;}
.frame .fcap{position:absolute;bottom:8px;left:12px;font-family:'Caveat',cursive;color:#fff;font-size:22px;text-shadow:1px 1px 3px rgba(0,0,0,.7);z-index:2;}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.9rem;margin-top:2.4rem;}
.note{background:#fff;padding:1.7rem 1.5rem 1.4rem;position:relative;box-shadow:0 8px 22px rgba(91,66,50,.12);transition:transform .35s;}
.note:nth-child(1){transform:rotate(-2deg);background:#fffdf6;}
.note:nth-child(2){transform:rotate(1.6deg);background:#fef9f9;}
.note:nth-child(3){transform:rotate(-1deg);background:#f9fcf6;}
.note:hover{transform:rotate(0) translateY(-6px);}
.note .stars{color:var(--gold);letter-spacing:4px;font-size:15px;}
.note p{font-family:'Caveat',cursive;font-size:22px;line-height:1.4;color:var(--ink);margin:.8rem 0 1rem;font-weight:500;}
.note .who{font-size:13px;color:#8a6f58;font-style:italic;}
.stickers{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;margin-top:2.4rem;}
.sticker{font-family:'Caveat',cursive;font-size:23px;font-weight:700;color:var(--cocoa);background:#fff;border:2.5px solid var(--cocoa);padding:10px 24px;border-radius:36px 28px 38px 26px;box-shadow:0 5px 0 var(--cocoa);transition:transform .18s,box-shadow .18s;cursor:default;}
.sticker:nth-child(odd){transform:rotate(-2deg);background:var(--blush);}
.sticker:nth-child(even){transform:rotate(1.6deg);background:var(--sage);}
.sticker:nth-child(3n){background:var(--butter);}
.sticker:hover{transform:rotate(0) translateY(3px);box-shadow:0 2px 0 var(--cocoa);}

/* postcard */
.postcard{background:#fff;border:2px solid #ead9c3;border-radius:8px;box-shadow:0 16px 40px rgba(91,66,50,.14);max-width:860px;margin:2.6rem auto 0;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;}
@media(max-width:760px){.postcard{grid-template-columns:1fr;}}
.pc-left{padding:2.2rem;border-right:2px dashed #ead9c3;}
@media(max-width:760px){.pc-left{border-right:none;border-bottom:2px dashed #ead9c3;}}
.pc-left h3{font-family:'Caveat',cursive;font-size:32px;color:var(--cocoa);font-weight:700;margin-bottom:1.2rem;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
@media(max-width:520px){.f-row{grid-template-columns:1fr;}}
.fld label{font-family:'Caveat',cursive;font-size:19px;font-weight:700;color:#a98a68;display:block;margin-bottom:3px;}
.fld input,.fld select,.fld textarea{width:100%;border:none;border-bottom:2px dashed #d9bfa3;background:transparent;font-family:'Caveat',cursive;font-size:21px;color:var(--ink);padding:4px 2px;outline:none;}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-bottom-color:var(--gold);}
.pc-right{padding:2.2rem;display:flex;flex-direction:column;justify-content:space-between;background:var(--paper2);}
.stamp{width:96px;height:96px;border:3px dashed var(--blush2);padding:5px;margin-left:auto;transform:rotate(3deg);}
.stamp img{width:100%;height:100%;border-radius:4px;}
.pc-addr{font-family:'Caveat',cursive;font-size:23px;color:#8a6f58;line-height:1.5;}
.pc-addr b{color:var(--cocoa);}

/* footer */
.footer{border-top:3px dashed var(--blush);padding:3.4rem 2rem 2rem;position:relative;z-index:1;background:var(--paper2);}
.f-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem;}
@media(max-width:760px){.f-grid{grid-template-columns:1fr;}}
.f-name{font-family:'Caveat',cursive;font-size:32px;color:var(--cocoa);font-weight:700;}
.f-name span{color:var(--gold);}
.f-desc{font-size:14px;color:#8a6f58;line-height:1.8;font-style:italic;margin-top:.5rem;max-width:340px;}
.f-social{display:flex;gap:.7rem;margin-top:1.1rem;}
.f-social a{color:var(--cocoa);border:2px solid var(--cocoa);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:all .2s;background:#fff;}
.f-social a svg{display:block;}
.f-social a:hover{background:var(--blush);transform:rotate(-8deg) scale(1.08);}
.f-col h5{font-family:'Caveat',cursive;font-size:24px;color:var(--cocoa);font-weight:700;margin-bottom:.7rem;}
.f-col a{display:block;font-size:14px;color:#8a6f58;padding:3px 0;font-style:italic;cursor:pointer;}
.f-col a:hover{color:var(--cocoa);}
.f-bot{max-width:1140px;margin:2.4rem auto 0;border-top:2px dashed #ead9c3;padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:13px;color:#a98a68;font-style:italic;}

/* toast + hud + pup (unchanged systems) */
#toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(30px);background:#fff;border:2.5px solid var(--cocoa);border-radius:14px;padding:14px 22px;font-family:'Caveat',cursive;font-size:23px;font-weight:700;color:var(--cocoa);box-shadow:0 10px 26px rgba(91,66,50,.22);z-index:11000;opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;text-align:center;}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
#toast small{display:block;font-family:'Lora',serif;font-size:12px;font-weight:400;font-style:italic;color:#8a6f58;}
#hud{position:fixed;right:18px;bottom:18px;z-index:10001;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.hud-btn{font-family:'Caveat',cursive;font-size:21px;font-weight:700;background:#fff;border:2.5px solid var(--cocoa);color:var(--cocoa);border-radius:30px 24px 32px 22px;padding:9px 20px;box-shadow:0 4px 0 var(--cocoa);transition:transform .15s,box-shadow .15s;display:flex;align-items:center;gap:8px;}
.hud-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--cocoa);}
.hud-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--cocoa);}
#happy{background:#fff;border:2.5px solid var(--cocoa);border-radius:16px;padding:8px 14px;box-shadow:0 4px 0 var(--cocoa);min-width:150px;}
#happy .hl{font-family:'Caveat',cursive;font-size:17px;font-weight:700;color:#a98a68;display:flex;justify-content:space-between;}
#happy .bar{height:11px;background:var(--paper2);border:1.5px solid #ead9c3;border-radius:8px;overflow:hidden;margin-top:4px;}
#happy .fill{height:100%;width:35%;background:linear-gradient(90deg,var(--blush2),var(--gold));border-radius:8px;transition:width .6s cubic-bezier(.34,1.56,.64,1);}
@media(max-width:600px){#happy{display:none;}}
#pup{position:fixed;bottom:0;left:40px;z-index:9999;cursor:pointer;user-select:none;-webkit-user-select:none;perspective:700px;}
#pup-shadow{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:112px;height:16px;background:rgba(91,66,50,.16);border-radius:50%;transition:transform .25s,opacity .25s;}
#pup.hop #pup-shadow,#pup.flipping #pup-shadow{transform:translateX(-50%) scale(.55);opacity:.45;}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);}35%{transform:translateX(-50%) scale(.68);opacity:.4;}}
#pup.running #pup-shadow{animation:shadowPulse .6667s linear infinite;}
#pup-flip{transition:transform .38s cubic-bezier(.45,0,.25,1);transform-style:preserve-3d;}
#pup.flip #pup-flip{transform:rotateY(180deg);}
#pup-anim{transform-origin:50% 100%;will-change:transform;}
#pup-img{width:150px;height:148px;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(91,66,50,.22));background:url("assets/images/img-01-11fb5f8c.webp") 0 0/900px 148px no-repeat;animation:kfSit 1.4s steps(6) infinite;}
@keyframes kfSit{to{background-position-x:-900px;}}
@keyframes kfWalk{to{background-position-x:-1800px;}}
@keyframes kfRun{to{background-position-x:-2700px;}}
@keyframes kfBeg{to{background-position-x:-2700px;}}
@keyframes kfDig{to{background-position-x:-1200px;}}
@keyframes kfLay{to{background-position-x:-900px;}}
#pup.walking #pup-img{background-image:url("assets/images/img-02-57ee7b92.webp");background-size:1800px 148px;animation:kfWalk .95s steps(12) infinite;}
#pup.running #pup-img{background-image:url("assets/images/img-03-7986f4b9.webp");background-size:2700px 148px;animation:kfRun .9s steps(18) infinite;}
#pup.begging #pup-img,#pup.excited #pup-img,#pup.wag #pup-img,#pup.look #pup-img,#pup.happy #pup-img,#pup.wiggle #pup-img{background-image:url("assets/images/img-03-7986f4b9.webp");background-size:2700px 148px;animation:kfBeg .9s steps(18) infinite;}
#pup.digging #pup-img{background-image:url("assets/images/img-04-39a8ab22.webp");background-size:1200px 148px;animation:kfDig .35s steps(8) infinite;}
#pup.lying #pup-img{background-image:url("assets/images/img-05-7057acdb.webp");background-size:1050px 148px;animation:kfLay .4s steps(6) 1 forwards;}
#pup.lying #pup-anim{animation:none;}
/* --- artwork puppet states --- */
@keyframes idleK{0%,100%{transform:rotate(1.5deg) translateY(0) scale(1,1);}50%{transform:rotate(-1.2deg) translateY(-2.5px) scale(1.012,1.022);}}
#pup #pup-anim{animation:idleK 3s ease-in-out infinite;}
#pup.excited:not(.walking):not(.running) #pup-anim{animation:idleK 1.1s ease-in-out infinite;}
@keyframes trotK{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
#pup.walking #pup-anim{animation:trotK .95s linear infinite;}
@keyframes boundK{0%,100%{transform:translateY(0);}45%{transform:translateY(-6px);}}
#pup.running #pup-anim{animation:boundK .6667s linear infinite;}
#pup.sitting #pup-anim{animation:idleK 3.1s ease-in-out infinite;}
@keyframes begK{0%,100%{transform:rotate(-3deg) translateY(0);}50%{transform:rotate(-3deg) translateY(-7px);}}
#pup.begging #pup-anim{animation:begK .62s ease-in-out infinite;transform-origin:62% 100%;}
@keyframes hopK{0%{transform:translateY(0) scale(1,1);}18%{transform:translateY(2px) scale(1.07,.9);}50%{transform:translateY(-36px) rotate(-7deg) scale(.97,1.05);}84%{transform:translateY(0) scale(1.09,.88) rotate(3deg);}100%{transform:translateY(0) scale(1,1);}}
#pup.hop #pup-anim{animation:hopK .58s ease;}
@keyframes flipK{0%{transform:translateY(0) rotate(0);}18%{transform:translateY(-14px) rotate(-30deg);}50%{transform:translateY(-56px) rotate(-185deg);}85%{transform:translateY(-4px) rotate(-348deg);}100%{transform:translateY(0) rotate(-360deg);}}
#pup.flipping #pup-anim{animation:flipK .9s cubic-bezier(.4,.1,.5,1);}
@keyframes digK{0%,100%{transform:rotate(15deg) translate(2px,4px) scale(1.01,.98);}50%{transform:rotate(19deg) translate(5px,5px) scale(1.02,.97);}}
#pup.digging #pup-anim{animation:digK .18s linear infinite;}
@keyframes wiggleK{0%,100%{transform:rotate(0);}25%{transform:rotate(-5deg);}65%{transform:rotate(4deg);}}
#pup.wiggle #pup-anim{animation:wiggleK .5s ease;}
.hud-btn.follow-on{background:var(--butter);}
#pup-bubble{position:absolute;bottom:106px;left:50%;transform:translateX(-50%) scale(0);background:#fff;border:2.5px solid var(--cocoa);border-radius:18px 16px 18px 4px;padding:7px 15px;font-family:'Caveat',cursive;font-weight:700;font-size:21px;color:var(--cocoa);white-space:nowrap;transition:transform .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 5px 12px rgba(91,66,50,.18);}
#pup-bubble.on{transform:translateX(-50%) scale(1);}
#pup-carry{position:absolute;bottom:88px;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:'Caveat',cursive;color:var(--gold);font-size:23px;font-weight:700;white-space:nowrap;text-shadow:0 1px 0 #fff;}
.pawprint{position:fixed;z-index:9998;font-size:13px;opacity:.45;pointer-events:none;transition:opacity 2.5s;}
.fly-word{position:fixed;z-index:10000;font-family:'Caveat',cursive;font-weight:700;color:var(--gold);pointer-events:none;transition:all .65s cubic-bezier(.5,0,.5,1);text-shadow:0 1px 0 #fff;}
.zz{position:fixed;z-index:9998;font-size:19px;pointer-events:none;animation:zzUp 2s ease forwards;}
.heart{position:fixed;z-index:10000;font-size:16px;pointer-events:none;animation:heartUp 1.1s ease forwards;}
.crumbp{position:fixed;z-index:10000;width:7px;height:7px;border-radius:2px;background:#a9743d;pointer-events:none;animation:crumb .7s ease forwards;}
.dirtp{position:fixed;z-index:9998;width:8px;height:8px;border-radius:3px;background:#c8a97f;pointer-events:none;animation:dirt .8s ease forwards;}
.starp{position:fixed;z-index:10000;font-size:18px;color:var(--gold);pointer-events:none;animation:starPop 1.2s ease forwards;}
#cookie-fly{position:fixed;z-index:10000;font-size:26px;pointer-events:none;transition:all .7s cubic-bezier(.4,-.2,.5,1);}
.coupon{position:fixed;z-index:10000;background:var(--butter);border:2.5px dashed var(--cocoa);font-family:'Caveat',cursive;font-weight:700;font-size:19px;color:var(--cocoa);padding:8px 14px;transform:rotate(-5deg);pointer-events:none;transition:all .8s ease;box-shadow:0 6px 14px rgba(91,66,50,.2);}
#ground-hint{position:fixed;z-index:9997;bottom:8px;width:40px;height:40px;border:3px dashed var(--blush2);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s;}
#ground-hint.on{opacity:.8;}

/* ================================================================
   MOBILE-ONLY ADDITIONS — everything below is scoped to small
   screens (or hidden on desktop). Desktop rendering is unchanged.
   ================================================================ */

/* ---- hamburger button (hidden on desktop) ---- */
.mnav-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:2.5px solid var(--cocoa);border-radius:14px;background:#fff;box-shadow:0 3px 0 var(--cocoa);padding:0 10px;flex:none;}
.mnav-btn span{display:block;height:3px;border-radius:3px;background:var(--cocoa);transition:transform .25s,opacity .25s;}
/* ---- mobile drawer (hidden on desktop) ---- */
#mnav{display:none;}

@media(max-width:980px){
  .mnav-btn{display:flex;margin-left:auto;}
  .nav{padding:0 1rem;}
  .nav-logo{margin-left:.8rem;}
  #mnav{display:block;position:fixed;inset:0;z-index:15000;pointer-events:none;}
  .mnav-backdrop{position:absolute;inset:0;background:rgba(74,53,38,.35);opacity:0;transition:opacity .3s;}
  .mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--paper);border-left:3px dashed var(--blush);box-shadow:-12px 0 34px rgba(91,66,50,.18);transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:1.1rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));overflow-y:auto;}
  #mnav.open{pointer-events:auto;}
  #mnav.open .mnav-backdrop{opacity:1;}
  #mnav.open .mnav-panel{transform:translateX(0);}
  .mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
  .mnav-head .mn-name{font-family:'Caveat',cursive;font-size:26px;font-weight:700;color:var(--cocoa);}
  .mnav-head .mn-name span{color:var(--gold);}
  .mnav-close{width:42px;height:42px;border:2.5px solid var(--cocoa);border-radius:50%;background:#fff;font-family:'Caveat',cursive;font-size:24px;font-weight:700;color:var(--cocoa);box-shadow:0 3px 0 var(--cocoa);line-height:1;}
  .mnav-links{list-style:none;display:flex;flex-direction:column;gap:.2rem;}
  .mnav-links a{display:block;font-family:'Caveat',cursive;font-size:27px;font-weight:700;color:#8a6f58;padding:.55rem .4rem;border-bottom:2px dashed #ead9c3;cursor:pointer;}
  .mnav-links a.active{color:var(--cocoa);}
  .mnav-links a.active::before{content:"★ ";color:var(--gold);}
  .mnav-cta{margin-top:1.4rem;text-align:center;font-family:'Caveat',cursive;font-size:25px;font-weight:700;background:var(--blush);padding:12px 22px;border-radius:30px 26px 32px 24px;border:2.5px solid var(--cocoa);color:var(--cocoa);box-shadow:0 4px 0 var(--cocoa);cursor:pointer;}
  .mnav-social{display:flex;gap:.9rem;justify-content:center;margin-top:1.6rem;}
  .mnav-social a{color:var(--cocoa);border:2px solid var(--cocoa);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#fff;transition:transform .18s,background .18s;}
  .mnav-social a:hover{background:var(--blush);transform:rotate(-8deg) scale(1.08);}
  .mnav-social a svg{display:block;}
  .mnav-paw{margin-top:auto;text-align:center;font-size:20px;opacity:.5;padding-top:1.6rem;}
}

/* ---- phone-size refinements ---- */
@media(max-width:640px){
  /* nav */
  .nav{height:64px;}
  .nav-name{font-size:23px;}
  .nav-logo{width:42px;height:42px;}
  .mnav-btn{width:42px;height:42px;}
  /* shared rhythm */
  .sec{padding:3rem 1.15rem;}
  .kicker{font-size:21px;}
  .h2{font-size:clamp(36px,9.5vw,48px);}
  .sub{font-size:15px;line-height:1.8;}
  .btn{font-size:20px;padding:10px 22px;box-shadow:0 4px 0 var(--cocoa);}
  /* hero */
  .hero{padding:2.4rem 1.15rem 2.8rem;gap:2.2rem;}
  .hero h1{font-size:clamp(52px,15vw,72px);}
  .hero-sub{font-size:15.5px;margin-top:1rem;}
  .hero-btns{margin-top:1.5rem;gap:.7rem;}
  .hero-note{font-size:18px;margin-top:1.2rem;}
  .stack{height:330px;max-width:330px;}
  .hero-logo-stamp{width:88px;height:88px;bottom:-18px;right:-8px;}
  .marq-track{font-size:19px;}
  .special{padding:0 1.15rem;}
  .special-in{padding:.9rem 1rem;gap:.8rem;}
  .fcard img{height:148px;}
  .fcard h3{font-size:26px;}
  /* menu */
  .mtab{font-size:19px;padding:6px 16px;}
  .rcard img.drink{height:160px;}
  /* film & notes */
  .film-in{padding:1.8rem 1.15rem;}
  .byo{padding:1.5rem 1.15rem;}
  .byo h3{font-size:28px;}
  /* order page — desktop uses jumbo type; bring it down to phone scale */
  #page-order .kicker{font-size:27px;}
  #page-order .h2{font-size:clamp(44px,12vw,62px);}
  #page-order .sub{font-size:17px;line-height:1.7;}
  .ord-step{font-size:31px;margin:1.2rem 0 .8rem;}
  .ord-step .bn{width:42px;height:42px;font-size:25px;}
  .slot{font-size:23px;padding:10px 16px;border-radius:13px;}
  .slot small{font-size:16px;}
  .tslot{font-size:21px;padding:7px 16px;}
  .ocat{font-size:29px;margin:1.1rem 0 .3rem;}
  .otabs{gap:.5rem;margin:.2rem 0 .9rem;}
  .otab{font-size:22px;padding:6px 16px;}
  .ord-menu{grid-template-columns:repeat(2,1fr);gap:.7rem;}
  .odrink{padding:.55rem;}
  .odrink img{height:104px;}
  .odrink h4{font-size:21px;margin:.4rem 0 0;}
  .odrink .op{font-size:20px;}
  .odrink .oing{font-size:12px;line-height:1.3;margin-top:.2rem;}
  .usual-banner{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.8rem .9rem;}
  .usual-banner .ub-text{font-size:21px;}
  .usual-banner .ub-yes{font-size:19px;}
  .usual-banner .ub-no{font-size:17px;}
  .df-label{font-size:19px;}
  .df-badge{font-size:13px;padding:3px 6px;top:5px;left:5px;}
  .odrink .qty{font-size:16px;min-width:28px;height:28px;top:5px;right:5px;}
  .tip-lab{font-size:21px;}
  .tip{font-size:19px;padding:5px 15px;}
  .group-note{font-size:16px;}
  .cart{position:static;padding:1.2rem;}
  /* mobile sticky "view cart" jump bar — only on the active order page */
  #cartBar{display:none;}
  #page-order.show #cartBar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:9000;align-items:center;justify-content:space-between;gap:.6rem;background:var(--cocoa);color:#fff;border:2.5px solid var(--cocoa);border-radius:30px 26px 32px 24px;padding:11px 18px;box-shadow:0 8px 22px rgba(91,66,50,.32);cursor:pointer;transition:transform .15s,opacity .2s;font-family:'Caveat',cursive;}
  #cartBar.hidden{transform:translateY(140%);opacity:0;pointer-events:none;}
  #cartBar .cb-left{display:flex;align-items:center;gap:.5rem;font-size:22px;font-weight:700;}
  #cartBar .cb-count{background:var(--butter);color:var(--cocoa);min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-size:16px;font-weight:600;padding:0 6px;}
  #cartBar .cb-total{font-size:26px;font-weight:700;}
  /* leave room so the bar never hides the checkout button */
  #page-order.show .sec{padding-bottom:5.5rem;}
  /* lift Biscuit's HUD above the cart bar on the order page */
  #page-order.show ~ #hud{bottom:calc(74px + env(safe-area-inset-bottom));}
  .cart h3{font-size:34px;}
  .cart .pickup-at{font-size:22px;margin-bottom:.8rem;padding-bottom:.8rem;}
  .citem .cn{font-size:19px;}
  .citem .cimg{width:46px;height:46px;}
  .citem button{width:36px;height:36px;font-size:23px;}
  .citem .qn{font-size:22px;min-width:24px;}
  .cart-empty{font-size:26px;padding:1.8rem 0;}
  .cart-total{font-size:33px;margin:1rem 0;}
  .cart-cta{font-size:27px;padding:13px;}
  .ord-note{font-size:17px;}
  .cart .tip-hint{font-size:18px;}
  /* club / faq / forms */
  .club-card{padding:1.3rem;}
  .club-form input{font-size:16px;}            /* ≥16px prevents iOS focus-zoom */
  .faq summary{font-size:21px;padding:.85rem 1.1rem;}
  /* map / calendar */
  .gmap-box,.gmap-box iframe{min-height:300px;}
  .cal{padding:1rem;}
  .cal-head h3{font-size:25px;}
  .cal-detail{padding:1.2rem;min-height:0;}
  /* story */
  #pawpath{display:none;}
  .chapters{gap:2.4rem;margin-top:2rem;}
  .chapter{gap:1.4rem;}
  .chapter h3{font-size:29px;}
  /* postcard / footer */
  .pc-left,.pc-right{padding:1.4rem 1.15rem;}
  .footer{padding:2.4rem 1.15rem 1.6rem;}
  .f-grid{gap:1.8rem;}
  .f-name{font-size:27px;}
  /* HUD, toast & Biscuit the pup */
  #hud{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));gap:8px;}
  .hud-btn{font-size:17px;padding:7px 14px;}
  #followBtn{display:none;}                    /* cursor-follow makes no sense on touch */
  #toast{max-width:calc(100vw - 28px);bottom:104px;}
  #pup{left:14px;transform:scale(.7);transform-origin:bottom left;}
}

/* ---- very small phones ---- */
@media(max-width:380px){
  .nav-name{font-size:20px;}
  .hero h1{font-size:48px;}
  .ord-menu{grid-template-columns:1fr 1fr;gap:.5rem;}
  .stack{height:290px;max-width:290px;}
}


/* ================================================================
   MOBILE POLISH PASS 2 — fixes from real-device screenshots.
   All rules scoped to max-width media queries; desktop unchanged.
   ================================================================ */
@media(max-width:640px){
  /* --- hero photo stack: the absolute-positioned 3-photo pile
         collapses on phones. Rebuild it as ONE simple polaroid
         in normal document flow. --- */
  .stack{height:auto !important;max-width:300px;margin:1.2rem auto 1.6rem;}
  .stack .polaroid:nth-child(1),
  .stack .polaroid:nth-child(2){display:none;}
  .stack .polaroid:nth-child(3){position:relative;inset:auto;transform:rotate(-1.5deg);}
  .stack:hover .polaroid:nth-child(3){transform:rotate(-1.5deg);}
  .stack .polaroid:nth-child(3) img.tiltable{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transform:none !important;}
  .stack .polaroid .cap{font-size:22px;}
  .hero-logo-stamp{width:76px !important;height:76px !important;bottom:-16px;right:-4px;}
  /* --- hero note: flex layout scattered the words; make it read
         like a normal sentence --- */
  .hero-note{display:block;line-height:1.6;font-size:17px;}
  /* --- hero spacing: tighter, calmer --- */
  .hero{gap:1.2rem;padding-bottom:2.2rem;}
  .hero h1{margin-top:.3rem;}
  /* --- Biscuit & HUD: shrink so they stop covering content --- */
  #pup{transform:scale(.58);transform-origin:bottom left;left:6px;}
  #hud{right:8px;bottom:calc(8px + env(safe-area-inset-bottom));gap:6px;}
  .hud-btn{font-size:14.5px;padding:6px 11px;box-shadow:0 3px 0 var(--cocoa);opacity:.95;}
  #pup-bubble{font-size:15px;}
  /* decorative paw-trail SVG path can overlap text on tiny screens */
  .pawprint{display:none;}
  /* --- background stars: thin them out a touch so content reads
         cleaner (every 3rd star hidden, purely cosmetic) --- */
  .bstar:nth-child(3n){display:none;}
  .bstar{font-size:90%;}
}
@media(max-width:380px){
  .stack{max-width:260px;}
}

/* ============================================================
   ENHANCEMENTS (PRD): accessibility, homepage today-card, menu
   badges, story CTA, booking form, footer content, mobile
   quick-action bar, confirmation overlay.
   ============================================================ */

/* --- visible focus states (keyboard accessibility) --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.loading-note { font-family:'Caveat',cursive; font-size:24px; color:#b08968; text-align:center; grid-column:1/-1; padding:2rem 0; }

/* --- homepage "where we are today" mini card --- */
.today-home { max-width:760px; margin:2.2rem auto 0; background:linear-gradient(170deg,#fffdf8,#fdf4e7); border:2.5px dashed var(--sage2); border-radius:16px 13px 18px 12px; padding:1.1rem 1.4rem; box-shadow:0 8px 22px rgba(91,66,50,.1); text-align:center; position:relative; }
.today-home:empty { display:none; }
.th-flag { font-family:'Caveat',cursive; font-weight:700; font-size:22px; color:var(--gold); }
.today-home h3 { font-family:'Caveat',cursive; font-size:34px; color:var(--cocoa); font-weight:700; line-height:1; margin:.15rem 0 .25rem; }
.today-home p { font-size:15px; color:#7a6450; }
.th-btns { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:.85rem; }
.th-btns .btn { font-size:20px; padding:8px 20px; }

/* --- menu card badges + ingredient line --- */
.m-badges { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; z-index:3; }
.m-badge { font-family:'Caveat',cursive; font-weight:700; font-size:14px; line-height:1; padding:3px 9px; border-radius:20px; border:2px solid var(--cocoa); white-space:nowrap; box-shadow:0 2px 0 rgba(91,66,50,.25); }
.m-badge.seasonal { background:var(--butter); color:var(--cocoa); }
.m-badge.favorite { background:var(--blush); color:var(--cocoa); }
.m-badge.df { background:var(--sage); color:var(--cocoa); }
.rcard .ing { font-size:11.5px; color:#a98a68; line-height:1.4; margin-top:.4rem; font-style:italic; }

/* --- story page closing CTA --- */
.story-cta { margin-top:3.4rem; }
.story-cta-btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:.7rem; }

/* --- booking: event types + extra fields + what-happens-next --- */
.serve-strip { margin:1.8rem auto 0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; max-width:820px; }
.serve-lab { font-family:'Caveat',cursive; font-weight:700; font-size:22px; color:#b08968; width:100%; margin-bottom:.2rem; }
.serve-strip .sticker { font-size:18px; padding:7px 16px; box-shadow:0 4px 0 var(--cocoa); }
.f-row-3 { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:520px){ .f-row-3 { grid-template-columns:1fr; } }
.f-actions { margin-top:1.4rem; }
.f-fine { font-size:12.5px; color:#a98a68; font-style:italic; margin-top:.9rem; line-height:1.55; }
.pc-next { margin-top:1.4rem; font-size:13.5px; color:#7a6450; line-height:1.5; }
.pc-next b { font-family:'Caveat',cursive; font-size:22px; color:var(--cocoa); display:block; margin-bottom:.2rem; }
.pc-next ol { margin:.2rem 0 0 1.1rem; }
.pc-next li { padding:.12rem 0; }

/* --- footer content polish --- */
.f-line { display:block; font-size:13.5px; color:#8a6f58; line-height:1.6; margin-top:.5rem; font-style:italic; }
.f-ilink { color:var(--gold); font-weight:700; cursor:pointer; }
.f-disclaimer { max-width:1140px; margin:1.8rem auto 0; display:flex; flex-wrap:wrap; gap:.4rem 2rem; font-size:12px; color:#a98a68; line-height:1.6; }
.f-disclaimer span { flex:1 1 280px; }

/* --- mobile bottom quick-action bar --- */
.qbar { display:none; }
@media(max-width:760px){
  .qbar { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:9500;
    background:rgba(255,249,240,.97); backdrop-filter:blur(8px); border-top:3px dashed var(--blush);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 18px rgba(91,66,50,.12); }
  .qbar a { display:flex; flex-direction:column; align-items:center; gap:2px; font-family:'Caveat',cursive; font-weight:700;
    font-size:16px; color:#8a6f58; padding:6px 2px; border-radius:14px; cursor:pointer; line-height:1; }
  .qbar a .qi { font-size:20px; }
  .qbar a.on { color:var(--cocoa); background:var(--butter); }
  body { padding-bottom:72px; }
  body.on-order { padding-bottom:0; }
  body.on-order .qbar { display:none; }
  #hud { bottom:calc(80px + env(safe-area-inset-bottom)); }
}

/* --- order / booking confirmation overlay --- */
.confirm-overlay { position:fixed; inset:0; z-index:20001; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.confirm-overlay[hidden] { display:none; }
.confirm-backdrop { position:absolute; inset:0; background:rgba(74,53,38,.5); backdrop-filter:blur(2px); }
.confirm-card { position:relative; background:#fff; border:2.5px solid var(--cocoa); border-radius:16px 13px 18px 12px;
  box-shadow:0 18px 50px rgba(91,66,50,.32); padding:2rem 1.6rem 1.6rem; max-width:440px; width:100%; text-align:center;
  animation:fadeUp .4s ease both; }
.confirm-star { font-size:40px; color:var(--gold); line-height:1; }
.confirm-card h3 { font-family:'Caveat',cursive; font-size:40px; color:var(--cocoa); font-weight:700; margin:.15rem 0 .7rem; line-height:1; }
.cf-line { font-family:'Caveat',cursive; font-size:24px; color:var(--cocoa); background:var(--paper2); border-radius:10px; padding:.6rem .8rem; margin-bottom:.7rem; line-height:1.2; }
.cf-items { list-style:none; text-align:left; max-width:300px; margin:0 auto .7rem; font-size:15px; color:#7a6450; }
.cf-items li { padding:.22rem 0; border-bottom:1.5px dashed #f0e4d2; }
.cf-note { font-style:italic; color:#8a6f58; font-size:14.5px; margin:.5rem 0; }
.cf-total { font-family:'Caveat',cursive; font-size:26px; color:var(--cocoa); margin:.6rem 0; }
.cf-total b { color:var(--gold); }
.cf-fine { font-size:13px; color:#a98a68; line-height:1.55; margin:.5rem 0 1rem; }
.cf-steps { text-align:left; background:var(--paper2); border-radius:10px; padding:.7rem .95rem; margin:.7rem 0; font-size:14.5px; color:#7a6450; }
.cf-steps b { font-family:'Caveat',cursive; font-size:22px; color:var(--cocoa); }
.cf-steps ol { margin:.3rem 0 0 1.1rem; }
.cf-steps li { padding:.15rem 0; }
.confirm-card .btn { margin-top:.4rem; }
