@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#32170E;--cream:#F3E1C5;--milk:#F7E9D2;--coral:#B87932;--red:#4A2415;--green:#778c58;--line:#D6A15B;--serif:'DM Serif Display',Georgia,serif;--sans:Manrope,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:15px;overflow-x:hidden}.sprinkle{position:fixed;color:var(--coral);z-index:-1;animation:drift 8s ease-in-out infinite}.sprinkle-a{left:3%;top:29%;font-size:25px}.sprinkle-b{right:4%;top:21%;font-size:18px;animation-delay:-3s}.sprinkle-c{right:8%;bottom:12%;font-size:27px;animation-delay:-6s}header{height:89px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;padding:0 28px;margin:auto}.brand{color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:28px;line-height:1;display:flex;align-items:center;gap:9px}.cake-mark{font-family:Arial;font-size:21px;color:var(--cream);background:var(--coral);padding:5px 7px;border-radius:50% 50% 35% 35%;position:relative;box-shadow:inset 0 -4px #dc573d}nav{display:flex;align-items:center;gap:26px}nav a{font-size:13px;color:var(--ink);text-decoration:none;font-weight:600}.nav-order{background:var(--ink);color:white!important;padding:12px 18px;border-radius:99px}.hero{min-height:590px;max-width:1180px;margin:auto;padding:70px 28px 95px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center}.eyebrow{font:500 10px 'DM Mono',monospace;letter-spacing:1.5px;color:var(--red);margin:0 0 17px}.hero h1,h2{font-family:var(--serif);font-size:clamp(54px,6.2vw,82px);line-height:.96;font-weight:400;letter-spacing:-2px;margin:0}.hero h1 em{color:var(--coral)}.lead{max-width:430px;line-height:1.8;margin:26px 0;color:#70452B}.button{border:0;background:var(--coral);color:white;text-decoration:none;border-radius:99px;display:inline-flex;justify-content:center;gap:25px;align-items:center;padding:15px 20px;font:700 13px var(--sans);cursor:pointer;box-shadow:0 7px 15px #eb826b55;transition:.2s}.button:hover{transform:translateY(-2px);background:#df5e45}.button span{font-size:19px;line-height:.5}.tiny{font-size:11px;color:#70452B;margin-top:17px}.dessert-scene{height:390px;position:relative;max-width:480px;margin:auto;width:100%;background:#D6A15B;border-radius:52% 48% 45% 55%/46% 48% 52% 54%;transform:rotate(-4deg)}.sun{position:absolute;width:220px;height:220px;border-radius:50%;background:#ffd9a9;top:42px;left:100px}.tiramisu{position:absolute;bottom:69px;left:50%;width:245px;height:190px;transform:translateX(-50%) rotate(4deg);filter:drop-shadow(0 20px 9px #a3443540)}.dish{position:absolute;width:275px;height:30px;bottom:-16px;left:-15px;border-radius:50%;background:#F7E9D2;border:7px solid #e9d5bc}.ladyfingers{position:absolute;bottom:0;width:100%;height:80px;background:repeating-linear-gradient(100deg,#cf9b5d 0 16px,#e7b873 16px 21px);border-radius:14px 14px 35px 35px}.cream{position:absolute;background:#F7E9D2;border-radius:55% 45% 20px 20px;left:0;width:100%;height:76px}.cream-one{bottom:57px;transform:rotate(-2deg)}.cream-two{bottom:112px;height:62px;transform:rotate(3deg)}.cocoa{position:absolute;top:5px;left:10px;width:228px;height:57px;border-radius:50%;background:#60362a;z-index:2;transform:rotate(2deg);overflow:hidden}.cocoa:after{content:'✦  ·  ✦  ·  ✦';color:#bc8b63;position:absolute;top:15px;left:37px;font-size:20px}.leaf{position:absolute;border-radius:100% 0 100% 0;background:var(--green);width:88px;height:43px}.leaf-one{top:54px;right:48px;transform:rotate(-34deg)}.leaf-two{bottom:44px;left:26px;transform:rotate(135deg);background:#a5b383}.spark{position:absolute;color:white;font-size:32px;animation:twinkle 2.3s infinite}.spark.one{top:50px;left:55px}.spark.two{right:51px;bottom:80px;animation-delay:-1.1s}.spark.three{top:130px;right:13px;font-size:24px;animation-delay:-.6s}.taste-note{position:absolute;right:-18px;top:155px;width:92px;height:92px;border-radius:50%;background:#FAF2E5;text-align:center;padding-top:23px;font:italic 16px var(--serif);transform:rotate(13deg);box-shadow:0 4px 10px #7e443030}.taste-note b{color:var(--coral)}.how{background:#2A140C;color:#F3E1C5;text-align:center;padding:80px 28px}.how .eyebrow{color:#D6A15B}.how h2,.order-intro h2,.track h2{font-size:52px;letter-spacing:-1px}.steps{display:flex;max-width:1000px;margin:55px auto 0;gap:60px}.steps article{flex:1}.steps span{font:500 11px 'DM Mono';color:#f59879}.steps h3{font:400 25px var(--serif);margin:12px 0}.steps p{font-size:13px;line-height:1.7;color:#d4bba9;margin:0}.order-section{max-width:1050px;margin:0 auto;padding:105px 28px;display:grid;grid-template-columns:.8fr 1.2fr;gap:95px;align-items:start}.order-intro>p:not(.eyebrow){color:#70452B;line-height:1.8;max-width:290px}.delivery-note{display:flex;gap:12px;margin-top:40px;padding:15px;background:#FAF2E5;border-radius:13px;max-width:320px}.delivery-note span{color:var(--coral);font-size:20px}.delivery-note p{margin:0;font-size:11px;line-height:1.55}.order-card{background:white;border:1px solid #D6A15B;border-radius:20px;padding:30px;box-shadow:0 15px 40px #7b44330c}.form-title{display:flex;gap:12px;align-items:center;margin-bottom:22px}.cup{font-size:23px;background:#F3E1C5;width:45px;height:45px;border-radius:50%;display:grid;place-items:center}.form-title h3{margin:0;font:400 25px var(--serif)}.form-title p{margin:1px 0 0;font-size:11px;color:#8a6d5d}label,.field{display:block;font-size:11px;font-weight:700;margin:0 0 16px}.field-label{display:block}input[type="hidden"]{display:none!important}input,select{display:block;width:100%;height:46px;border:1px solid var(--line);background:#FAF2E5;border-radius:9px;color:var(--ink);font:500 13px var(--sans);padding:0 12px;margin-top:7px;outline:none}input:focus,select:focus{border-color:var(--coral);box-shadow:0 0 0 3px #B8793222}.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.availability{font-size:11px;border-radius:8px;background:#FAF2E5;padding:10px 12px;margin:-5px 0 16px;color:#775b4a}.availability.ready{background:#ecf1df;color:#52633e}.availability.closed{background:#fff0e9;color:#ad503d}.quantity{height:46px;border:1px solid var(--line);background:#FAF2E5;border-radius:9px;display:flex;align-items:center;margin-top:7px}.quantity button{border:0;background:none;color:var(--coral);font-size:22px;width:42px;cursor:pointer}.quantity input{border:0;background:none;text-align:center;margin:0;padding:0;height:auto}.full{width:100%;margin-top:3px}.form-foot{text-align:center;color:#70452B;font-size:10px;margin:13px 0 0}.track{background:#D6A15B;padding:84px max(28px,calc((100vw - 1050px)/2));display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.track h2{font-size:50px}.track>div p:not(.eyebrow){line-height:1.75;color:#70452B;max-width:390px}.track-box{background:#FAF2E5;padding:25px;border-radius:16px}.track-box .button{width:100%;margin-top:3px}.tracking-result{grid-column:1/-1;background:#FAF2E5;padding:28px;border-radius:16px}.order-progress{display:flex;gap:6px;margin-top:15px}.progress-step{flex:1;text-align:center;color:#70452B;font-size:10px}.progress-dot{width:24px;height:24px;margin:0 auto 7px;border-radius:50%;background:#D6A15B;color:white;display:grid;place-items:center}.progress-step.done{color:var(--ink)}.progress-step.done .progress-dot{background:var(--coral);animation:pop .5s}.track-order{border-bottom:1px solid #D6A15B;padding:13px 0}.track-order:last-child{border:0}footer{max-width:1180px;margin:auto;padding:36px 28px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#70452B}footer p{margin:0}.admin-link{color:#70452B;text-decoration:none}#toast{position:fixed;bottom:22px;left:50%;translate:-50% 120px;background:var(--ink);color:#F3E1C5;padding:14px 19px;border-radius:12px;max-width:min(460px,90vw);font-size:12px;line-height:1.5;z-index:9;transition:.35s}#toast.show{translate:-50% 0}@keyframes twinkle{50%{transform:scale(.5) rotate(50deg);opacity:.45}}@keyframes drift{50%{translate:0 -15px;rotate:14deg}}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}}
@media(max-width:720px){header{height:74px;padding:0 18px}.brand{font-size:24px}nav a:not(.nav-order){display:none}nav{gap:0}.nav-order{padding:10px 14px;font-size:11px}.hero{display:flex;flex-direction:column;padding:55px 24px 65px;text-align:center;min-height:0}.hero-copy{display:flex;flex-direction:column;align-items:center}.hero h1{font-size:59px}.lead{font-size:14px;margin:21px 0}.dessert-scene{height:310px;max-width:350px;margin-top:53px}.sun{width:170px;height:170px;left:70px}.tiramisu{scale:.79;transform:translateX(-50%) rotate(4deg);transform-origin:bottom}.taste-note{right:-7px}.steps{display:block;margin-top:35px}.steps article{margin:32px 0}.how{padding:62px 26px}.how h2,.order-intro h2,.track h2{font-size:43px}.order-section{display:block;padding:72px 20px}.delivery-note{margin:27px 0 35px}.order-card{padding:22px 17px}.two{gap:10px}.track{display:block;padding:66px 20px}.track-box{margin-top:30px;padding:19px}.tracking-result{margin-top:19px}footer{padding:27px 20px}footer p{display:none}.sprinkle{display:none}}
.hero-logo{position:absolute;z-index:2;width:145px;height:82px;object-fit:contain;left:calc(50% - 72px);top:17px;filter:drop-shadow(0 5px 8px #7a3d2d33);animation:logoFloat 4s ease-in-out infinite}.tracking-result h3{font:400 28px var(--serif);margin:0 0 4px}.tracking-result{overflow:hidden}.tracking-magic{}#trackingMagic{height:190px;border-radius:14px;margin:16px 0 12px;position:relative;background:radial-gradient(circle at 50% 10%,#ffe6be,#efaa85 75%);overflow:hidden}#trackingMagic:after{content:'Your sweet moment is moving';position:absolute;bottom:12px;left:0;right:0;text-align:center;font:500 10px 'DM Mono',monospace;letter-spacing:1.4px;color:#7f4233;pointer-events:none}.magic-fallback:before{content:'✦  ♡  ☕  ♡  ✦';display:grid;place-items:center;height:100%;font-size:31px;color:#fff8e9;letter-spacing:14px;animation:twinkle 1.8s infinite}.order-progress{position:relative;gap:0;padding-top:4px}.order-progress:before{content:'';position:absolute;top:16px;left:10%;right:10%;height:2px;background:#D6A15B}.progress-step{position:relative;z-index:1}.progress-dot{width:31px;height:31px;border:3px solid #FAF2E5;box-shadow:0 2px 8px #6d322a22}.progress-step.done .progress-dot{animation:pop .6s cubic-bezier(.2,.9,.3,1.5)}@keyframes logoFloat{50%{transform:translateY(-7px) rotate(2deg)}}
/* Approved Kareemisu artwork */
.brand img{display:block;height:46px!important;width:auto;max-width:175px!important;object-fit:contain}.hero-logo{display:none}.hero-cake{position:absolute;z-index:4;left:50%;bottom:28px;width:min(310px,76%);transform:translateX(-50%) rotate(4deg);filter:drop-shadow(0 25px 18px #32170e55);animation:cakeDance 4.8s ease-in-out infinite}.tiramisu{display:none}.dessert-scene{background:radial-gradient(circle at 50% 25%,#FAF2E5 0 17%,#D6A15B 18% 60%,#B87932 100%)}.sun{background:#F3E1C5;opacity:.7}.leaf{background:#70452B}.leaf-two{background:#B87932}.taste-note{background:#FAF2E5;color:#4A2415}.taste-note b{color:#B87932}.how{background:#2A140C}.button{background:#B87932;box-shadow:0 7px 16px #4A241544}.button:hover{background:#4A2415}@keyframes cakeDance{0%,100%{transform:translateX(-50%) rotate(3deg) translateY(0)}50%{transform:translateX(-50%) rotate(-3deg) translateY(-15px)}}
/* Larger approved brand assets */
header .brand img{height:66px!important;max-width:230px!important}.hero-cake{width:min(405px,94%);bottom:2px}.dessert-scene{overflow:visible}@media(max-width:720px){header .brand img{height:54px!important;max-width:185px!important}.hero-cake{width:min(345px,98%);bottom:-6px}.dessert-scene{overflow:visible}}
/* Oversized hero focal point */
header{height:104px}header .brand img{height:76px!important;max-width:270px!important}.hero-cake{width:min(535px,112%);bottom:-36px}@media(max-width:720px){header{height:88px}header .brand img{height:62px!important;max-width:215px!important}.hero-cake{width:min(430px,118%);bottom:-30px}}
/* Desktop hero cake positioning approved by Kareem */
@media(min-width:721px){.hero-cake{bottom:114px;width:min(711px,114%)}}
/* Mobile hero cake scale trial */
@media(max-width:720px){.hero-cake{width:min(500px,132%);bottom:42px}}
/* Prevent oversized hero artwork from creating mobile sideways scroll */
html,body{max-width:100%;overflow-x:hidden}@media(max-width:720px){.hero{overflow:hidden}.dessert-scene{max-width:100%}}
.empty-state{position:relative;text-align:center;background:#FAF2E5;border:1px solid #D6A15B;border-radius:16px;padding:18px 18px 24px;margin:5px 0 18px;overflow:hidden}.empty-state img{position:relative;z-index:2;width:115px;height:115px;object-fit:contain;filter:drop-shadow(0 10px 8px #32170e28);animation:emptyCupFloat 3.3s ease-in-out infinite}.empty-state h3{position:relative;z-index:2;font:400 27px var(--serif);color:#4A2415;margin:3px 0 6px}.empty-state p{position:relative;z-index:2;max-width:340px;margin:0 auto;color:#70452B;font-size:12px;line-height:1.7}.empty-state>div:first-child{position:absolute;inset:0;opacity:.28;pointer-events:none}.empty-state canvas{width:100%!important;height:170px!important}@keyframes emptyCupFloat{50%{transform:translateY(-9px) rotate(-4deg)}}
/* Sold-out moment: our own cake becomes the friendly signpost */
.empty-state:after{content:'✦   ♡   ✦';position:absolute;top:20px;left:0;right:0;color:#B87932;font-size:28px;letter-spacing:18px;animation:emptySparkle 2.6s ease-in-out infinite}.empty-state img{width:220px;height:145px;animation:emptyCakeFloat 3.6s ease-in-out infinite}.empty-state h3{margin-top:-2px}@keyframes emptyCakeFloat{0%,100%{transform:translateY(6px) rotate(3deg) scale(1)}50%{transform:translateY(-10px) rotate(-3deg) scale(1.06)}}@keyframes emptySparkle{50%{opacity:.35;transform:scale(.85) rotate(4deg)}}
#submitOrder[hidden]{display:none!important}
.day-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.day-choice-empty{grid-column:1/-1;font-size:11px;color:#70452B}.day-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:13px 14px;border:1px solid #D6A15B;border-radius:14px;background:#FAF2E5;color:#4A2415;cursor:pointer;text-align:left;transition:background .18s,border-color .18s,transform .18s}.day-pick b{font:700 15px var(--sans);letter-spacing:.2px}.day-pick span{font-size:11px;color:#70452B;opacity:.85}.day-pick small{margin-top:4px;font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:#4D6B32}.day-pick:hover:not(:disabled){background:#F7E9D2;transform:translateY(-1px)}.day-pick.is-selected{background:#B87932;border-color:#B87932;color:#FAF2E5}.day-pick.is-selected span{color:#FAF2E5;opacity:.85}.day-pick.is-selected small{color:#F7E9D2}.day-pick.is-closed,.day-pick:disabled{opacity:.5;cursor:not-allowed;background:#F3EADB}.day-pick.is-closed small{color:#9A5B3A}@media(max-width:420px){.day-choice{grid-template-columns:1fr}}
#orderFields[hidden],#emptyState[hidden],#submitOrder[hidden]{display:none!important}
.track-animation{height:190px;margin:0 auto 15px;display:grid;place-items:center;background:linear-gradient(145deg,#FAF2E5,#F7E9D2);border:1px solid #D6A15B;border-radius:16px;overflow:hidden}.track-animation lottie-player{width:220px;height:190px;filter:sepia(.28) saturate(.9)}.track-order{padding:20px 0}.progress-dot span{font:700 11px var(--sans)}.progress-dot{font-size:0}
/* Refined order journey */
.tracking-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.tracking-heading h3{font:400 31px var(--serif);margin:0;color:#4A2415}.tracking-heading .eyebrow{margin-bottom:5px}.refresh-track{border:1px solid #D6A15B;background:#FAF2E5;color:#4A2415;border-radius:999px;padding:10px 13px;font:700 10px var(--sans);cursor:pointer;white-space:nowrap}.refresh-track:hover{background:#B87932;color:#F7E9D2}.refresh-track span{display:inline-block;font-size:16px;vertical-align:middle;margin-left:4px}.refresh-track:active span{animation:spin .6s linear}.journey-card{position:relative;overflow:hidden;padding:23px 5px 26px}.journey-card:before{content:'✦  ♡  ✦';position:absolute;right:2px;top:16px;color:#D6A15B;font-size:20px;letter-spacing:10px;opacity:.7;animation:journeyTwinkle 2.8s ease-in-out infinite}.journey-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 10px}.journey-top h3{font:700 28px var(--serif);margin:3px 0 0;color:#4A2415;letter-spacing:-.4px}.journey-top>b{font:600 11px 'DM Mono',monospace;color:#70452B;background:#FAF2E5;border:1px solid #D6A15B;padding:7px 9px;border-radius:99px}.journey-kicker{font:700 9px 'DM Mono',monospace;letter-spacing:1.2px;color:#B87932}.journey-meta{padding:0 10px;margin:5px 0 16px;color:#70452B;font-size:11px}.journey-card .order-progress{align-items:flex-start;gap:0;padding:10px 0 0}.journey-card .order-progress:before{top:58px;left:12%;right:12%;background:#D6A15B}.journey-card .progress-step{min-width:0;color:#8a6d5d;font-size:9px;line-height:1.35}.journey-card .progress-step strong{display:block;font:700 10px var(--sans);padding:8px 3px 0}.stage-orbit{position:relative;width:38px;height:38px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:#F7E9D2;border:2px solid #D6A15B;color:#70452B;z-index:1;transition:.3s}.stage-orbit>span{font:700 11px var(--sans)}.progress-step.done .stage-orbit{background:#B87932;border-color:#B87932;color:#F7E9D2}.stage-orbit.live{width:116px;height:116px;margin-top:-28px;background:#FAF2E5;border:2px solid #B87932;box-shadow:0 10px 24px #4A24152d}.stage-orbit.live:before,.stage-orbit.live:after{position:absolute;z-index:3;color:#B87932;font-size:19px;content:'♡';animation:heartOrbit 2.7s ease-in-out infinite}.stage-orbit.live:before{left:-10px;top:20px}.stage-orbit.live:after{right:-8px;bottom:18px;animation-delay:-1.35s}.stage-orbit.live lottie-player{width:105px;height:105px;filter:sepia(.32) saturate(.82)}.preparing-cake{position:absolute;width:42px;height:31px;object-fit:contain;bottom:3px;right:-9px;z-index:4;filter:drop-shadow(0 4px 3px #32170e40);animation:preparedCake 4.4s ease-in-out infinite}.is-delivered .stage-orbit.live{box-shadow:0 0 0 7px #D6A15B55,0 11px 26px #4A241538}.is-delivered:after{content:'✦  ♥  ✦  ♥  ✦';position:absolute;left:0;right:0;top:83px;text-align:center;color:#B87932;font-size:20px;letter-spacing:17px;animation:deliveredParty 2.3s ease-in-out infinite;pointer-events:none}.cancelled-order{padding:20px 10px;color:#70452B}.cancelled-order p{margin:7px 0 0;font-size:12px}@keyframes heartOrbit{50%{transform:translateY(-13px) scale(1.18);opacity:.55}}@keyframes preparedCake{0%,60%,100%{transform:scale(.3) rotate(-9deg);opacity:0}76%,92%{transform:scale(1) rotate(5deg);opacity:1}}@keyframes deliveredParty{50%{transform:translateY(-14px) scale(1.08);opacity:.45}}@keyframes journeyTwinkle{50%{transform:scale(.75) rotate(15deg);opacity:.25}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.tracking-heading{align-items:flex-end}.tracking-heading h3{font-size:26px}.refresh-track{font-size:9px;padding:9px}.journey-top h3{font-size:23px}.stage-orbit.live{width:89px;height:89px;margin-top:-20px}.stage-orbit.live lottie-player{width:80px;height:80px}.journey-card .order-progress:before{top:49px}.journey-card .progress-step strong{font-size:8px}.journey-card .progress-step{font-size:8px}.preparing-cake{width:35px;height:26px}}
/* Stable, centered tracking circles */
.journey-card .order-progress{padding-top:0}.journey-card .order-progress:before{top:52px;height:1px;background:rgba(184,121,50,.26)}.stage-orbit.live{width:104px;height:104px;margin-top:0}.progress-step:not(.active) .stage-orbit{margin-top:33px}.stage-delivery .stage-orbit.live{background:transparent}.stage-delivery .stage-orbit.live lottie-player{mix-blend-mode:multiply;filter:sepia(.36) saturate(.75)}.preparing-cake{display:none}
@media(max-width:720px){.journey-card .order-progress:before{top:37px;left:11%;right:11%;background:rgba(184,121,50,.22)}.stage-orbit.live{width:74px;height:74px;margin-top:0}.stage-orbit.live lottie-player{width:70px;height:70px}.progress-step:not(.active) .stage-orbit{width:23px;height:23px;margin-top:25.5px;border-width:1px}.progress-step:not(.active) .stage-orbit>span{font-size:8px}.journey-card .progress-step strong{font-size:7px;padding-top:7px;word-break:break-word}.stage-orbit.live:before,.stage-orbit.live:after{font-size:14px}.is-delivered:after{top:61px;font-size:13px;letter-spacing:9px}}
/* Delivery keeps its illustration while its renderer matte is clipped and blended away. */
.stage-delivery .stage-orbit.live{background:#FAF2E5}.stage-delivery .stage-orbit.live lottie-player{clip-path:circle(49%);background:#FAF2E5!important;mix-blend-mode:multiply;filter:sepia(.38) saturate(.72) brightness(.98)}
/* Keep every Lottie stage animation strictly inside its circular frame. */
.stage-orbit.live lottie-player{border-radius:50%;clip-path:circle(50%);overflow:hidden}
.archive-order{display:flex;align-items:center;gap:14px;padding:22px 10px;color:#70452B}.archive-order h3{font:700 22px var(--serif);margin:3px 0 5px;color:#4A2415}.archive-order p{margin:0;font-size:11px;line-height:1.6}.archive-seal{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:50%;background:#E7F0D5;border:1px solid #73934f;color:#4d6b32;font:700 22px var(--sans);box-shadow:0 4px 10px #73934f22}.completed-mark{font:700 25px var(--sans);color:#4d6b32}.progress-step.stage-completed.active .stage-orbit.live{background:#E7F0D5;border-color:#73934f}.progress-step.stage-completed.active .stage-orbit.live:before,.progress-step.stage-completed.active .stage-orbit.live:after{color:#73934f}
.order-history{border-top:1px solid #D6A15B;margin-top:22px;padding-top:20px}.order-history>h3{font:400 24px var(--serif);margin:0 0 5px;color:#4A2415}.order-history .archive-order{border-bottom:0}
/* Joyful Kareemisu order CTA */
.order-mark{width:45px;height:45px;object-fit:contain;background:#F3E1C5;border-radius:50%;padding:4px;filter:drop-shadow(0 3px 4px #4A241520)}.order-cta{position:relative;overflow:visible;border:0;border-radius:17px;background:#B87932;color:#F7E9D2;width:100%;min-height:55px;padding:10px 22px;display:flex;align-items:center;justify-content:center;gap:20px;cursor:pointer;font:900 16px var(--sans);letter-spacing:.2px;box-shadow:6px 6px 0 #4A2415;transform:skewX(-8deg);transition:.35s}.order-cta>*{transform:skewX(8deg)}.order-cta:hover{background:#4A2415;box-shadow:9px 9px 0 #D6A15B;transform:skewX(-8deg) translate(-2px,-2px)}.order-cta:disabled{cursor:wait;opacity:.9}.cta-art{width:28px;height:35px;display:flex;align-items:center;position:relative;transition:.45s}.cta-art svg{position:absolute;left:0;width:54px;height:35px;overflow:visible}.cta-art path{fill:#F7E9D2;transition:.45s}.arrow-one{transform:translateX(-60%)}.arrow-two{transform:translateX(-30%)}.cta-art img{position:absolute;width:37px;height:30px;object-fit:contain;right:-47px;opacity:0;transform:scale(.3) rotate(-16deg);transition:.45s}.order-cta:hover .arrow-one,.order-cta.is-celebrating .arrow-one,.order-cta:hover .arrow-two,.order-cta.is-celebrating .arrow-two{transform:translateX(0)}.order-cta:hover .cta-art,.order-cta.is-celebrating .cta-art{margin-right:43px}.order-cta.is-celebrating .cta-art img{opacity:1;transform:scale(1) rotate(5deg);animation:ctaCake 1.1s ease-in-out infinite}.order-cta.is-celebrating path{animation:arrowGlow .85s infinite}.cta-hearts{pointer-events:none;position:absolute;inset:0;display:grid;place-items:center;font:24px var(--serif);letter-spacing:22px;color:#F7E9D2;opacity:0}.order-cta.is-celebrating .cta-hearts{animation:heartBurst 1.25s ease-out infinite}.order-cta.is-loading .cta-label:after{content:' — just a moment';font-weight:500;font-size:11px}@keyframes arrowGlow{50%{fill:#D6A15B}}@keyframes ctaCake{50%{transform:scale(1.12) rotate(-5deg) translateY(-5px)}}@keyframes heartBurst{0%{opacity:0;transform:translateY(10px) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translateY(-62px) scale(1.35)}}
@media(max-width:720px){.order-cta{font-size:14px;min-height:51px;gap:13px}.cta-art{scale:.84}.order-cta:hover .cta-art,.order-cta.is-celebrating .cta-art{margin-right:34px}.order-mark{width:42px;height:42px}}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 — light lock, sizes, receipt, five-stage journey
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kareemisu is a light room, on every device. "only light" stops browsers
   (and Android's auto-dark) from re-tinting the page or the form controls. */
:root{color-scheme:only light}
html,body{background:var(--cream);color:var(--ink)}
input,select,textarea,button,fieldset,option{color-scheme:only light}
/* ---- Choosing a size ---------------------------------------------------- */

.size-picker{border:0;padding:0;margin:0 0 16px;min-width:0}
.size-picker legend{font-size:11px;font-weight:700;padding:0;margin-bottom:9px}
.size-options{display:grid;gap:9px}
.size-empty{margin:0;font-size:12px;color:#70452B}
.size-option{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#FAF2E5;cursor:pointer;transition:.18s}
.size-option:has(input:checked){background:#fff;border-color:var(--coral);box-shadow:0 0 0 2px #B8793222}
.size-option:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.size-option input{accent-color:var(--coral);width:17px;height:17px;flex:0 0 auto;margin:0}
.size-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.size-body b{font-size:14px;font-weight:700}
.size-body small{font-size:11px;line-height:1.5;color:#70452B;font-weight:400}
.size-price{font:600 14px 'DM Mono',monospace;color:var(--red);white-space:nowrap;text-align:right}
.size-option.is-out{opacity:.55;cursor:not-allowed}
.size-option.is-out .size-body b{text-decoration:line-through}
.size-left{display:block;font:500 9px var(--sans);letter-spacing:.4px;text-transform:uppercase;color:#8a6d5d;margin-top:2px}

/* ---- Delivery or pickup ------------------------------------------------- */

.mode-picker{border:0;padding:0;margin:0 0 4px;min-width:0}
.mode-picker legend{padding:0;margin-bottom:9px;font:600 12px/1 'Outfit',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#70452B}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mode-option{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#FAF2E5;cursor:pointer;transition:.18s}
.mode-option:has(input:checked){background:#fff;border-color:var(--coral);box-shadow:0 0 0 2px #B8793222}
.mode-option:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.mode-option input{accent-color:var(--coral);width:17px;height:17px;flex:0 0 auto;margin:0}
.mode-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mode-body b{font-size:14px;font-weight:700}
.mode-body small{font-size:11px;line-height:1.4;color:#70452B;font-weight:400}
.pickup-note{margin:10px 0 0;padding:11px 13px;border-radius:12px;background:#FFF4E2;border:1px dashed var(--coral);font-size:12px;line-height:1.55;color:#5A3520}

/* The delivery line sits just above the total, so the sum reads honestly. */
.receipt-fee{padding-top:9px;border-top:1px dashed var(--line)}

/* Once the receipt is up, the details step politely back. */
#orderFields.is-locked{opacity:.55;pointer-events:none;transition:opacity .25s}

/* ---- The receipt -------------------------------------------------------- */

.receipt{margin:4px 0 16px;animation:receiptIn .45s cubic-bezier(.2,.8,.3,1)}
@keyframes receiptIn{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.receipt{animation:none}}

.receipt-paper{position:relative;max-width:390px;margin:auto;background:#FAF2E5;
  border:1px solid #E8D3B4;border-radius:3px;padding:22px 22px 20px;
  box-shadow:0 12px 28px #4a24151a}
.receipt-head{text-align:center;padding-bottom:15px;border-bottom:1px dashed #D9BE95}
.receipt-shop{font:400 27px var(--serif);margin:0;letter-spacing:-.5px;color:var(--red)}
.receipt-sub{margin:5px 0 0;font-size:11px;color:#8a6d5d}

.receipt-items{padding:15px 0 12px;border-bottom:1px dashed #D9BE95}
.receipt-item{display:flex;align-items:baseline;gap:9px;font-size:13px}
.receipt-qty{font:600 13px 'DM Mono',monospace;color:var(--coral)}
.receipt-name{flex:1;font-weight:600}
.receipt-amount{font:600 13px 'DM Mono',monospace}
.receipt-unit{margin-top:4px;padding-left:31px;font:400 11px 'DM Mono',monospace;color:#8a6d5d}

.receipt-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px dashed #D9BE95}
.receipt-total span{font-size:12px;font-weight:600}
.receipt-total b{font:600 21px 'DM Mono',monospace;color:var(--red);white-space:nowrap}

.receipt-details{padding:14px 0 4px;display:grid;gap:8px}
.receipt-line{display:flex;align-items:flex-end;gap:7px;font-size:11px}
.receipt-line span{flex:0 0 auto;color:#8a6d5d}
.receipt-line::after{content:'';order:1;flex:1 1 14px;min-width:14px;border-bottom:1px dotted #D9BE95;transform:translateY(-4px)}
.receipt-line b{order:2;flex:0 1 auto;text-align:right;font-weight:600;line-height:1.45}
.receipt-foot{margin:12px 0 0;text-align:center;font:400 10px 'DM Mono',monospace;color:#a08a76;letter-spacing:.3px}

.edit-order{display:block;width:100%;margin:0 0 11px;padding:12px;border:1px solid var(--line);border-radius:13px;
  background:transparent;color:var(--red);font:700 12px var(--sans);cursor:pointer;transition:.18s}
.edit-order:hover{background:#FAF2E5}

/* ---- Five stages, on any screen ----------------------------------------- */

.stage-seal{font:700 26px var(--sans);color:#5c7a3c}
.progress-step.done .stage-orbit{background:var(--coral);border-color:var(--coral);color:#F7E9D2}
.is-fresh .journey-kicker{color:#5c7a3c}

/* Phones get a vertical rail: five stops fit, and the labels stay readable. */
@media(max-width:720px){
  .journey-card{padding:22px 16px 20px}
  /* The rail is only as wide as it needs to be, then centred in the card. */
  .journey-card .order-progress{flex-direction:column;gap:0;padding:6px 0 0;width:fit-content;max-width:100%;margin-inline:auto}
  .journey-card .order-progress:before{top:40px;bottom:40px;left:42px;right:auto;width:1px;height:auto;background:rgba(184,121,50,.28)}
  .journey-card .progress-step{display:grid;grid-template-columns:84px auto;align-items:center;gap:16px;text-align:left;font-size:11px;padding:5px 0;min-height:64px}
  .journey-card .progress-step .stage-orbit{margin:0;justify-self:center}
  .journey-card .progress-step:not(.active) .stage-orbit{width:34px;height:34px;margin-left:0}
  .journey-card .progress-step:not(.active) .stage-orbit>span{font-size:11px}
  .journey-card .progress-step.active .stage-orbit.live{width:84px;height:84px;margin:0}
  .journey-card .progress-step.active .stage-orbit.live lottie-player{width:78px;height:78px}
  .journey-card .progress-step.active .stage-orbit.live:before,
  .journey-card .progress-step.active .stage-orbit.live:after{display:none}
  .journey-card .progress-step .stage-seal{font-size:20px}
  .journey-card .progress-step strong{font:700 12px var(--sans);padding:0;word-break:normal}
  .journey-card .progress-step.active strong{color:var(--red);font-size:14px}
  .journey-card:before{display:none}
}

/* Desktop keeps the horizontal walk, now five stops wide. */
@media(min-width:721px){
  .journey-card .progress-step strong{font-size:10px;padding-top:9px}
  .journey-card .progress-step{font-size:10px}
  .journey-card .order-progress:before{top:37px;left:10%;right:10%}
  .stage-orbit.live{width:74px;height:74px}
  .stage-orbit.live lottie-player{width:70px;height:70px}
}

.journey-top>b{white-space:nowrap;font-size:10px}