/* CallaTé guest-experience pass · Oct 2026
   Loaded last on every page. Same fonts, colors and voice; smoother on phones. */

/* 1 · Hero: "Replay intro" and "Pause motion" sit side by side again. */
.hero .hero-motion-controls .motion-toggle,.hero .hero-motion-controls .intro-replay{transform:none;left:auto;right:auto;bottom:auto}

/* 2 · Hero next stop: a live "when" line, with a soft heartbeat while we are pouring. */
.hero .hero-next-stop .hero-stop-when{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--wine);background:var(--pink-light);border-radius:100px;padding:3px 12px}
.hero .hero-next-stop.is-live .hero-stop-when::before,.event-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#2f8a4e;box-shadow:0 0 0 0 #2f8a4e66;animation:live-pulse 1.8s ease-out infinite;flex:none}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 #2f8a4e66}70%{box-shadow:0 0 0 8px #2f8a4e00}100%{box-shadow:0 0 0 0 #2f8a4e00}}

/* 3 · Phones: the logo row tucks away while reading down, and returns on the way up. */
@media(max-width:760px){
 .site-header{transition:transform .3s cubic-bezier(.2,.7,.2,1);will-change:transform}
 .header-tucked .site-header{transform:translateY(calc(-1 * var(--header-tuck,0px)))}
 .site-header>.wordmark{transition:opacity .2s}
 .header-tucked .site-header>.wordmark{opacity:0}
 .menu-section .menu-filters{transition:top .3s cubic-bezier(.2,.7,.2,1)}
 .header-tucked .menu-section .menu-filters{top:calc(var(--guest-header-height) - var(--header-tuck,0px))}
 .header-tucked .menu-section #menu-items{scroll-margin-top:calc(var(--guest-header-height) - var(--header-tuck,0px) + var(--menu-filter-height) + 16px)}
}

/* 4 · Phones: one swipeable row of menu tabs instead of two stacked rows. */
@media(max-width:760px){
 .menu-section .menu-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;gap:8px}
 .menu-section .menu-filters::-webkit-scrollbar{display:none}
 .menu-section .menu-filters:not(.is-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
 .menu-section .menu-filters button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;font-size:.8125rem;padding:10px 16px}
 .menu-section .menu-filters button[data-category="food"]{flex-direction:row;gap:7px}
 .menu-section .menu-filters button[data-category="food"] .menu-tab-status{order:2;font-size:.625rem;padding:2px 7px}
}

/* 5 · The cart bar arrives with the first sip added. */
@keyframes dock-rise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.cart-dock:not([hidden]){animation:dock-rise .4s cubic-bezier(.2,.8,.2,1) both}
body.has-ordering{padding-bottom:28px}
.has-cart-dock body.has-ordering{padding-bottom:calc(var(--cart-height,62px) + 48px)}

/* 6 · Drink builder: one-tap choices and a real quantity stepper. */
#drink-dialog .modifier-group legend{font-size:1rem;margin-bottom:12px}
#drink-dialog .choice-chips{display:flex;flex-wrap:wrap;gap:8px}
#drink-dialog .temperature-options{display:flex;flex-wrap:wrap;gap:8px}
#drink-dialog label.modifier-choice{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-height:46px;padding:9px 16px;border:1px solid var(--pink);border-radius:100px;background:#fffcf7;font-size:.875rem;line-height:1.3;cursor:pointer;transition:background-color .15s,border-color .15s,transform .15s}
#drink-dialog label.modifier-choice input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;pointer-events:none}
#drink-dialog label.modifier-choice .choice-text{display:inline-flex;align-items:baseline;gap:7px}
#drink-dialog label.modifier-choice .choice-price{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
#drink-dialog label.modifier-choice:hover{border-color:var(--wine)}
#drink-dialog label.modifier-choice:has(input:checked){background:var(--wine);border-color:var(--wine);color:var(--cream)}
#drink-dialog label.modifier-choice:has(input:checked) .choice-price{color:var(--pink-light)}
#drink-dialog label.modifier-choice:has(input:checked)::before{content:"✓";font-size:.8rem;line-height:1}
#drink-dialog label.modifier-choice:has(input:focus-visible){outline:3px solid #a43253;outline-offset:3px}
#drink-dialog label.modifier-choice:has(input:disabled){opacity:.5;cursor:not-allowed;text-decoration:line-through}
#drink-dialog label.modifier-choice:active{transform:scale(.97)}
#drink-dialog .quantity-field{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
#drink-dialog .quantity-label{font-size:1rem}
.quantity-stepper{display:inline-flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--pink);border-radius:100px;background:#fffcf7}
.quantity-stepper .quantity-button{display:inline-grid;place-items:center;width:40px;height:40px;min-height:40px;border:0;border-radius:50%;background:var(--pink-light);color:var(--wine);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.quantity-stepper .quantity-button:disabled{opacity:.35;cursor:default}
.quantity-stepper .quantity-button:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
#drink-dialog .quantity-stepper input{width:46px;min-height:40px;padding:0;border:0;background:transparent;text-align:center;font:inherit;font-size:1.05rem;font-weight:600;color:var(--wine);-moz-appearance:textfield;appearance:textfield}
#drink-dialog .quantity-stepper input::-webkit-inner-spin-button,#drink-dialog .quantity-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* 7 · Checkout: pick a pop-up card, then a time chip. */
.customer-checkout .pickup-picker{display:block}
.customer-checkout .pickup-picker fieldset{margin:22px 0 0;padding:0;border:0;min-width:0}
.customer-checkout .pickup-picker legend{font-weight:600;margin-bottom:12px;padding:0}
.customer-checkout .pickup-event-list{display:grid;gap:10px}
.customer-checkout .pickup-picker label{margin:0;font-weight:400}
.customer-checkout .pickup-picker input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;margin:0;pointer-events:none}
.customer-checkout label.pickup-event-card{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:14px;padding:12px 14px;border:1px solid #69072e40;border-radius:16px;background:#fffcf7;cursor:pointer;transition:background-color .15s,border-color .15s}
.customer-checkout label.pickup-event-card:hover{border-color:var(--wine)}
.customer-checkout label.pickup-event-card:has(input:checked){background:var(--pink-light);border:2px solid var(--wine);padding:11px 13px}
.customer-checkout label.pickup-event-card:has(input:focus-visible),.customer-checkout label.pickup-time-chip:has(input:focus-visible){outline:3px solid #a43253;outline-offset:3px}
.pickup-event-date{display:grid;justify-items:center;align-content:center;min-height:62px;border-radius:12px;background:var(--wine);color:var(--cream);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.pickup-event-date strong{font:400 1.7rem/1 var(--hand);letter-spacing:0}
.pickup-event-copy{display:grid;gap:2px;min-width:0}
.pickup-event-kind{font-size:.75rem;font-weight:600;color:var(--muted)}
.pickup-event-name{font:400 1.25rem/1.2 var(--hand);color:var(--wine)}
.pickup-event-hours{font-size:.8125rem;font-weight:600}
.pickup-event-address{font-size:.75rem;color:var(--muted);overflow-wrap:anywhere}
.customer-checkout .pickup-time-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.customer-checkout label.pickup-time-chip{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 6px;border:1px solid #69072e40;border-radius:100px;background:#fffcf7;font-size:.875rem;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s,border-color .15s}
.customer-checkout label.pickup-time-chip:hover{border-color:var(--wine)}
.customer-checkout label.pickup-time-chip:has(input:checked){background:var(--wine);border-color:var(--wine);color:var(--cream);font-weight:600}
.pickup-time-hint{margin:0;font-size:.875rem;color:var(--muted)}
.customer-checkout .pickup-picker .checkout-pickup-address{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#f0d5d266;font-size:.875rem;line-height:1.55}

/* 8 · Cart: +/− on every drink, not just pastries. */
.order-line .order-line-controls{align-items:center;flex-wrap:wrap;gap:6px 22px}

/* 9 · Pop-up cards: live status, a countdown and a shortcut to order ahead. */
.event-status[hidden]{display:none}
.event-live{display:inline-flex;align-items:center;gap:7px}
.event-live::before{background:#4fbf73}
.event-countdown{font-weight:400;color:var(--muted)}
.event-actions>a.event-order-ahead{color:var(--cream);background:var(--wine);text-decoration:none;border-radius:100px;padding:0 16px;margin-right:4px}
.event-actions>a.event-order-ahead:hover{background:var(--wine-dark)}
.event-actions>a.event-order-ahead::after{content:"→";font-weight:400}

/* 10 · Booking: how a booking comes together. */
.booking-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0 34px;padding:0;counter-reset:step}
.booking-steps li{position:relative;padding:22px 20px 20px;border:1px solid var(--pink);border-radius:20px 26px 20px 28px;background:#fffcf7;counter-increment:step}
.booking-steps li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;margin-bottom:12px;border-radius:50%;background:var(--wine);color:var(--cream);font:400 1.3rem/1 var(--hand)}
.booking-steps li h3{font:400 1.45rem/1.2 var(--hand);color:var(--wine);margin:0 0 6px;letter-spacing:0}
.booking-steps p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink)}
.booking-steps li:nth-child(2){transform:rotate(-.6deg)}
.booking-steps li:nth-child(3){transform:rotate(.5deg)}
@media(max-width:760px){.booking-steps{grid-template-columns:1fr;gap:12px;margin:24px 0 28px}.booking-steps li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;padding:16px}.booking-steps li::before{grid-row:span 2;margin:0}.booking-steps li:nth-child(n){transform:none}}

/* 11 · Rewards: the card you are collecting, shown before you sign up. */
.punch-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:min(100%,420px);margin:26px auto 0;padding:18px;border:2px dashed var(--pink);border-radius:22px;background:#fffcf7}
.punch-card span{display:grid;font-size:1.1rem;place-items:center;aspect-ratio:1;border:1.5px solid var(--pink);border-radius:50%;color:var(--pink);font:400 1rem/1 var(--hand)}
.punch-card span.is-stamped{background:var(--wine);border-color:var(--wine);color:var(--cream);animation:stamp-in .45s cubic-bezier(.2,1.4,.4,1) both}
.punch-card span:nth-child(1){animation-delay:300ms}.punch-card span:nth-child(2){animation-delay:410ms}.punch-card span:nth-child(3){animation-delay:520ms}.punch-card span:nth-child(4){animation-delay:630ms}.punch-card span:nth-child(5){animation-delay:740ms}.punch-card span:nth-child(6){animation-delay:850ms}
.punch-card-note{margin:12px auto 0;font-size:.875rem;color:var(--muted);text-align:center}
@keyframes stamp-in{from{transform:scale(1.6) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}

/* Motion stays optional everywhere. */
.motion-paused .site-header,.motion-paused .menu-section .menu-filters,.motion-paused .cart-dock,.motion-paused .punch-card span,.motion-paused .event-live::before,.motion-paused .hero-next-stop .hero-stop-when::before{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.site-header,.menu-section .menu-filters,.cart-dock,.punch-card span,.event-live::before,.hero-next-stop .hero-stop-when::before,#drink-dialog label.modifier-choice{transition:none!important;animation:none!important}}