/* gelato cake builder */
.cakes{background:#FFE4EA;padding:72px 0 0;position:relative}
.cakes > .wave{margin-top:80px}
.cakes-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
.cakes-intro{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.cake-stage{position:relative;margin-top:8px;padding:10px 0 4px;text-align:center}
.cake-bob{animation:cakebob 3.2s ease-in-out infinite;transform-origin:50% 90%}
.cake-canvas{display:block;width:100%;height:auto;transition:transform .45s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 85%;filter:drop-shadow(0 10px 0 rgba(26,16,20,.08))}
.cake-floor{width:70%;height:22px;margin:-18px auto 0;border-radius:50%;background:radial-gradient(closest-side,rgba(26,16,20,.22),rgba(26,16,20,0));animation:cakefloor 3.2s ease-in-out infinite}
.cake-stage.pop .cake-canvas{animation:cakepop .55s ease}
.cake-caption{margin:10px auto 0;display:inline-block;padding:8px 16px;border-radius:999px;background:#FFFFFF;border:2.5px solid #1A1014;font-weight:800;font-size:15px;box-shadow:0 3px 0 #1A1014}
@keyframes cakebob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
@keyframes cakefloor{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.7}}
@keyframes cakepop{0%{transform:scale(1,1)}25%{transform:scale(1.07,.93)}55%{transform:scale(.96,1.05)}100%{transform:scale(1,1)}}
.cake-card{background:#FFFFFF;border:3px solid #1A1014;border-radius:32px;padding:28px;box-shadow:0 8px 0 #1A1014}
.cake-card .progress{margin-bottom:18px;flex-wrap:nowrap;gap:6px}
.cake-card .progress li{flex:0 0 auto;white-space:nowrap;gap:6px;padding:6px 12px 6px 6px;font-size:14px}
.cake-card .progress li::before{width:24px;height:24px;font-size:13px}
@media (max-width:480px){.cake-card .progress{gap:4px}.cake-card .progress li{font-size:12px;padding:5px 9px 5px 5px;gap:4px}.cake-card .progress li::before{width:20px;height:20px;font-size:11px}}
@media (max-width:400px){.cake-card .progress li{padding:5px 10px}.cake-card .progress li::before{display:none}}
.cake-card form{display:block}
.cpanel{display:flex;flex-direction:column;gap:16px}
.cpanel[hidden]{display:none}
.cpanel .q-small{margin-top:0}
.cpanel .q-small + .field-grid, .cake-estimate + .q-small{margin-top:0}
.step-sub{margin:-6px 0 0;color:#5C4650;font-size:16px}
.cake-card .field-grid{align-items:start}
.cake-card label > span:first-child{min-height:1.4em}
.cake-card select{width:100%}
.field-hint{font-size:13px;font-weight:600;color:#5C4650}
.custom-hint{margin:0;padding:12px 14px;border-radius:16px;background:#ECE0FF;font-weight:700;font-size:14px}
.custom-hint[hidden],.premium-note[hidden]{display:none}
.cake-estimate{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:22px;background:#F4F9C4;border:2.5px dashed #1A1014}
.est-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.est-lines li{display:flex;justify-content:space-between;gap:12px;font-size:16px}
.est-lines li span:last-child{font-weight:800;white-space:nowrap}
.est-lines li.prem span:first-child::after{content:"premium";margin-left:8px;padding:1px 8px;border-radius:999px;background:#FE4871;color:#FFFFFF;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:2px}
.est-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;border-top:2px solid #1A1014}
.est-label{font-size:20px;font-weight:800;color:#1A1014}
#est-price{font-family:Fraunces,Georgia,serif;font-size:32px;font-weight:900;line-height:1}
.premium-note{margin:0;padding:10px 12px;border-radius:14px;background:#FFFFFF;border:2px solid #FFC2D0;font-size:14px;font-weight:600}
.est-fine{font-size:13px;font-weight:600;color:#5C4650}
.cake-done{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cake-done:focus{outline:none}
.cake-done[hidden],.cake-card .progress[hidden]{display:none}
.cake-lead-note{margin:0;padding:12px 14px;border-radius:16px;background:#F4F9C4;font-size:14px}
@media (max-width:860px){
  .cakes{padding-top:56px}
  .cakes > .wave{margin-top:56px}
  .cakes-grid{grid-template-columns:1fr;gap:20px}
  .cakes-intro{position:static}
  .cake-stage{max-width:520px;margin:0 auto}
  .cake-card{padding:20px;border-radius:26px}
}
.cake-bob{cursor:pointer}
.cake-bob:hover{animation:cakejiggle .6s ease-in-out infinite}
@keyframes cakejiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) scale(1.04)}40%{transform:rotate(5deg) scale(1.04)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.cake-bob,.cake-bob:hover,.cake-floor,.cake-stage.pop .cake-canvas{animation:none}}
.field-error{display:block;margin-top:4px;font-size:14px;font-weight:700;color:#C0143C}
[aria-invalid="true"]{border-color:#C0143C !important;box-shadow:0 0 0 3px rgba(254,72,113,.25)}
.date-field{position:relative;display:block;max-width:320px}
.date-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 16px;border-radius:16px;border:2.5px solid #1A1014;background:#FFFFFF;font:inherit;font-weight:600;color:#8A7580;text-align:left;cursor:pointer}
.date-btn.has-date{color:#1A1014}
.date-btn:focus-visible{outline:3px solid #FE4871;outline-offset:2px}
.date-btn svg{flex:none}
.date-field:has([aria-invalid="true"]) .date-btn{border-color:#C0143C;box-shadow:0 0 0 3px rgba(254,72,113,.25)}
.cal{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:300px;max-width:calc(100vw - 48px);padding:14px;background:#FFFFFF;border:3px solid #1A1014;border-radius:22px;box-shadow:0 6px 0 #1A1014}
.cal[hidden]{display:none}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:16px}
.cal-nav{width:34px;height:34px;border-radius:50%;border:2px solid #1A1014;background:#FFE4EA;font-size:20px;line-height:1;cursor:pointer;color:#1A1014}
.cal-nav[disabled]{opacity:.3;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-grid > span{font-size:12px;font-weight:800;color:#5C4650;padding:4px 0}
.cal-day{aspect-ratio:1;border:0;border-radius:50%;background:transparent;font:inherit;font-size:14px;font-weight:700;color:#1A1014;cursor:pointer}
.cal-day:hover:not([disabled]),.cal-day:focus-visible{background:#FFE4EA;outline:none}
.cal-day.sel{background:#FE4871;color:#FFFFFF}
.cal-day[disabled]{color:#C9BCC2;background:#F3EEF0;cursor:not-allowed;text-decoration:line-through}
.cal-note{margin:10px 0 0;font-size:12px;font-weight:600;color:#5C4650}
/* order received: hide the form, keep the card the same height, celebrate */
.cake-card form[hidden]{display:none}
.cake-card.is-done{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.cake-done > *{margin:0}
.cake-done{gap:12px}
.cake-done .done-tag{display:inline-flex;align-items:center;gap:.4em;max-width:100%;font-size:clamp(24px,3vw,36px);line-height:1.1;padding:.35em .8em .35em .4em;border-width:3px;box-shadow:0 5px 0 #1A1014;margin:6px 0 8px;animation:stampin .6s cubic-bezier(.34,1.56,.64,1) .1s both}
.cake-done .done-tag::before{content:"✓";flex:none;display:flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;border-radius:50%;background:#1A1014;color:#E4F229;font-size:.85em}
@media (max-width:480px){.cake-done .done-tag{font-size:20px}}
@keyframes stampin{0%{transform:scale(2.4) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.cake-done > *:not(.done-tag){animation:doneup .5s ease-out .5s both}
.cake-done > .done-sum{animation-delay:.75s}
.cake-done > .cake-lead-note,.cake-done > #cake-again{animation-delay:.9s}
@keyframes doneup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cake-stage.celebrate .cake-bob{animation:cakejiggle .6s ease-in-out 3}
@media (prefers-reduced-motion:reduce){.cake-done .done-tag,.cake-done > *,.cake-stage.celebrate .cake-bob{animation:none;stroke-dashoffset:0}}