:root {
  --purple:#472e43;--purple-deep:#2d1b2c;--purple-mid:#5a3d55;
  --cream:#e5ceb5;--cream-s:rgba(229,206,181,.7);--cream-d:rgba(229,206,181,.4);--cream-dd:rgba(229,206,181,.18);
  --gold:#e9a953;--gold-h:#f0b86a;--gold-bg:rgba(233,169,83,.12);--gold-border:rgba(233,169,83,.35);
  --teal:#76aaa9;--teal-d:rgba(118,170,169,.5);
  --error:#e97373;--error-bg:rgba(233,115,115,.12);
  --line:rgba(229,206,181,.1);--line-s:rgba(229,206,181,.22);
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--purple);color:var(--cream);font-family:'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* — Focus states — */
.brew-card:focus-visible,.blend-card:focus-visible,.prog-step:focus-visible,
.ready-card:focus-visible,.date-pill:focus-visible,.time-pill:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r);
}

/* — Typography — */
.serif{font-family:Georgia,'Times New Roman',Cambria,serif}
.mono{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
h2.step-h{font-family:Georgia,serif;font-size:clamp(32px,5.5vw,56px);line-height:1.05;text-wrap:balance;margin-bottom:8px}
h2.step-h em{font-style:italic;color:var(--gold)}
.step-sub{color:var(--cream-s);font-size:clamp(15px,1.4vw,17px);margin-bottom:clamp(28px,4vw,48px)}

/* — Progress bar — */
.progress{position:sticky;top:0;z-index:60;background:var(--purple-deep);border-bottom:1px solid var(--line);padding:0 clamp(16px,3vw,40px)}
.progress-inner{max-width:720px;margin:0 auto;display:flex;align-items:center;height:52px;gap:0}
.prog-step{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 4px;white-space:nowrap;transition:opacity .2s}
.prog-step .num{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--cream-d);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;transition:all .3s;font-family:'SF Mono',monospace}
.prog-step .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-d);transition:color .3s;display:none}
@media(min-width:600px){.prog-step .lbl{display:inline}}
.prog-line{flex:1;height:1px;background:var(--line-s);margin:0 4px}
.prog-step.active .num{background:var(--gold);border-color:var(--gold);color:var(--purple-deep)}
.prog-step.active .lbl{color:var(--cream)}
.prog-step.done .num{background:var(--teal);border-color:var(--teal);color:var(--purple-deep)}
.prog-step.done .lbl{color:var(--teal)}

/* — Layout — */
.page{display:flex;max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,40px);gap:32px;position:relative}
.main{flex:1;min-width:0;padding-bottom:120px}
.sidebar{width:320px;flex-shrink:0;display:none;position:relative}
@media(min-width:1024px){.sidebar{display:block}}
.sidebar-inner{position:sticky;top:72px;background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;gap:20px}

/* — Mobile bottom bar — */
.mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--purple-deep);border-top:1px solid var(--line-s);padding:12px 20px;align-items:center;justify-content:space-between;gap:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(min-width:1024px){.mobile-bar{display:none}}
.mobile-bar .price-big{font-family:Georgia,serif;font-size:22px;color:var(--gold);line-height:1.1}
.mobile-bar .price-big small{font-size:12px;color:var(--cream-d);font-family:'SF Mono',monospace;display:block;margin-top:2px}
.mobile-bar .mbtn{padding:14px 22px;background:var(--gold);color:var(--purple-deep);border:none;font-family:'SF Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:var(--r);white-space:nowrap}
.mobile-bar .mbtn:disabled{opacity:.4;cursor:not-allowed}

/* — Sections — */
.sec{padding:clamp(48px,7vh,80px) 0;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:none}
.step-label{font-family:'SF Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.step-label::before{content:'';width:28px;height:1px;background:var(--teal-d)}

/* — Brew cards — */
.brew-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.brew-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.brew-card{cursor:pointer;border:1.5px solid var(--line-s);border-radius:var(--r);overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.brew-card:hover{border-color:var(--cream-d);transform:translateY(-4px)}
.brew-card.sel{border-color:var(--gold);box-shadow:0 0 28px rgba(233,169,83,.15)}
.brew-img{height:clamp(160px,22vw,240px);position:relative;overflow:hidden}

.brew-card[data-b="expert"] .brew-img{background:url(images/expert-espresso.jpg) center/cover no-repeat}
.brew-card[data-b="retro"] .brew-img{background:url(images/retro-roast.jpg) center/cover no-repeat}
.brew-card[data-b="lounge"] .brew-img{background:url(images/lounge-latte.jpg) center/cover no-repeat}
.brew-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(45,27,44,.8))}
.brew-body{padding:20px 18px;display:flex;flex-direction:column;gap:10px;flex:1;background:var(--purple-deep)}
.brew-name{font-family:Georgia,serif;font-size:clamp(24px,3vw,32px);line-height:1}
.brew-name em{font-style:italic;color:var(--gold)}
.brew-for{font-size:13px;color:var(--cream-d);line-height:1.5}
.brew-for strong{color:var(--cream-s);font-weight:500}
.brew-check{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--gold);display:none;align-items:center;justify-content:center;z-index:2}
.brew-card.sel .brew-check{display:flex}
.brew-price-badge{position:absolute;bottom:12px;right:12px;padding:6px 12px;background:rgba(45,27,44,.75);backdrop-filter:blur(6px);border:1px solid var(--line-s);border-radius:var(--r);font-family:'SF Mono',monospace;font-size:12px;color:var(--gold);z-index:2;font-weight:500}
@media(max-width:639px){.brew-card{display:grid!important;grid-template-rows:1fr;grid-template-columns:1fr}.brew-card>.brew-img,.brew-card>.brew-body{grid-row:1;grid-column:1}.brew-img{height:auto!important;aspect-ratio:3/4;min-height:320px}.brew-img::after{background:linear-gradient(180deg,transparent 30%,rgba(45,27,44,.92))!important}.brew-body{align-self:end;background:transparent!important;padding:16px 14px;z-index:2}.brew-price-badge{bottom:80px!important;right:12px}.brew-name{font-size:22px}.brew-for{font-size:12px}}

/* — Included — */
.included{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
@media(min-width:500px){.included{grid-template-columns:repeat(4,1fr)}}
.incl-item{padding:14px;background:var(--purple-deep);border:1px solid var(--line);border-radius:var(--r);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.incl-icon{font-size:22px;opacity:.8}
.incl-label{font-size:12px;color:var(--cream-s);line-height:1.3}
.incl-tag{display:inline-block;padding:4px 10px;font-family:'SF Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal-d);border-radius:20px;margin-top:8px}

/* (table toggle removed — now a blend card) */

/* — Blend cards — */
.blend-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:500px){.blend-grid{grid-template-columns:repeat(2,1fr)}}
.blend-divider{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:4px 0}
.blend-divider span{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-d);white-space:nowrap}
.blend-divider::before,.blend-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.blend-card{padding:22px;background:var(--purple-deep);border:1.5px solid var(--line-s);border-radius:var(--r);cursor:pointer;transition:border-color .3s,transform .3s;display:flex;flex-direction:column;gap:10px}
.blend-card:hover{border-color:var(--cream-d);transform:translateY(-2px)}
.blend-card.sel{border-color:var(--gold);background:rgba(233,169,83,.06)}
.blend-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.blend-name{font-family:Georgia,serif;font-size:20px}
.blend-price{font-family:'SF Mono',monospace;font-size:13px;color:var(--gold);font-weight:500;white-space:nowrap}
.blend-desc{font-size:14px;color:var(--cream-d);line-height:1.4}
.blend-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-s);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.blend-card.sel .blend-check{background:var(--gold);border-color:var(--gold)}

/* — Pour (duration) — */
.pour-stepper{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:24px}
.pour-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line-s);background:transparent;color:var(--cream);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:'SF Mono',monospace}
.pour-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--purple-deep)}
.pour-btn:disabled{opacity:.25;cursor:not-allowed}
.pour-val{font-family:Georgia,serif;font-size:clamp(56px,8vw,80px);line-height:1;min-width:100px;text-align:center}
.pour-val small{font-size:18px;color:var(--cream-d);display:block;margin-top:4px;font-family:'SF Mono',monospace;letter-spacing:.06em}
.pour-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.pour-pill{padding:8px 16px;border:1px solid var(--line-s);border-radius:20px;font-family:'SF Mono',monospace;font-size:12px;cursor:pointer;background:transparent;color:var(--cream-d);transition:all .2s;letter-spacing:.04em}
.pour-pill:hover{border-color:var(--cream-d);color:var(--cream)}
.pour-pill.sel{background:var(--gold);border-color:var(--gold);color:var(--purple-deep);font-weight:600}
.pour-discount{text-align:center;padding:14px 20px;background:var(--gold-bg);border:1px solid rgba(233,169,83,.2);border-radius:var(--r);margin-bottom:16px}
.pour-discount .tier{font-family:'SF Mono',monospace;font-size:13px;color:var(--gold);font-weight:600;letter-spacing:.06em}
.pour-nudge{text-align:center;font-size:14px;color:var(--cream-s);margin-top:8px;min-height:20px;transition:opacity .3s}

/* — Price breakdown — */
.price-box{background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);padding:24px;margin-top:20px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:14px}
.price-row.dim{color:var(--cream-d)}
.price-row .old{text-decoration:line-through;color:var(--cream-d);font-family:'SF Mono',monospace;font-size:13px}
.price-row .save{color:var(--teal);font-family:'SF Mono',monospace;font-size:13px}
.price-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-top:10px;border-top:1px solid var(--line-s)}
.price-total .label{font-size:14px;color:var(--cream-s)}
.price-total .val{font-family:Georgia,serif;font-size:28px;color:var(--gold)}

/* — Date picker — */
.date-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.date-scroll::-webkit-scrollbar{display:none}
.date-pill{padding:12px 14px;border:1px solid var(--line-s);border-radius:var(--r);cursor:pointer;text-align:center;min-width:64px;flex-shrink:0;transition:all .2s;background:var(--purple-deep)}
.date-pill:hover{border-color:var(--cream-d)}
.date-pill.sel{border-color:var(--gold);background:var(--gold-bg)}
.date-pill .day{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--cream-d);font-family:'SF Mono',monospace}
.date-pill .dn{font-family:Georgia,serif;font-size:22px;margin-top:2px}
.date-pill .mo{font-size:11px;color:var(--cream-d);font-family:'SF Mono',monospace}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
@media(min-width:500px){.time-grid{grid-template-columns:repeat(5,1fr)}}
.time-pill{padding:12px;border:1px solid var(--line-s);border-radius:var(--r);cursor:pointer;text-align:center;font-family:'SF Mono',monospace;font-size:13px;background:var(--purple-deep);color:var(--cream-d);transition:all .2s}
.time-pill:hover{border-color:var(--cream-d);color:var(--cream)}
.time-pill.sel{border-color:var(--gold);background:var(--gold-bg);color:var(--gold);font-weight:600}
/* The rest of a multi-hour session's block once a start time is picked —
   deliberately a step below .sel so the actual start hour still reads as
   "the" selection and the rest reads as "included in it". */
.time-pill.in-range{border-color:var(--gold-border);background:var(--gold-bg);color:var(--cream)}
.time-pill.unavailable{cursor:not-allowed;pointer-events:none;opacity:.35;text-decoration:line-through;color:var(--cream-d)}
.time-pill.unavailable:hover{border-color:var(--line-s)}
.time-hint{font-family:'SF Mono',monospace;font-size:12px;color:var(--cream-d);margin-top:10px}
.time-hint.warn{color:var(--error)}

/* — Summary sidebar — */
.sum-section{display:flex;flex-direction:column;gap:4px}
.sum-label{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-d);margin-bottom:4px}
.sum-val{font-size:15px}
.sum-val em{color:var(--gold);font-style:normal}
.sum-items{display:flex;flex-direction:column;gap:6px}
.sum-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cream-s)}
.sum-item .chk{color:var(--teal);font-size:14px}
.sum-divider{border:none;border-top:1px solid var(--line);margin:4px 0}
.sum-total-label{font-size:13px;color:var(--cream-d)}
.sum-total-val{font-family:Georgia,serif;font-size:32px;color:var(--gold)}
.sum-save{font-family:'SF Mono',monospace;font-size:12px;color:var(--teal);margin-top:2px}
.sum-old{font-family:'SF Mono',monospace;font-size:13px;text-decoration:line-through;color:var(--cream-d)}
.sum-cta{display:block;width:100%;padding:16px;background:var(--gold);color:var(--purple-deep);border:none;font-family:'SF Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:var(--r);text-align:center;transition:background .2s}
.sum-cta:hover{background:var(--gold-h)}
.sum-cta:disabled{opacity:.4;cursor:not-allowed}
.cta-hint{font-size:12px;color:var(--cream-d);line-height:1.4;min-height:16px}
.mobile-bar .cta-hint{margin-top:2px;font-size:11px}

/* — Contact form — */
.contact-form{margin-top:40px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:500px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-field--full{grid-column:1/-1}
.contact-field label{display:block;font-family:'SF Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-d);margin-bottom:6px}
.contact-optional{text-transform:none;letter-spacing:0;opacity:.7}
.contact-required{color:var(--gold);text-transform:none}
.field-error{display:block;font-size:12px;color:#e97373;margin-top:6px;min-height:14px}
.contact-field input,.contact-field textarea{width:100%;padding:12px 14px;background:var(--purple-deep);border:1.5px solid var(--line-s);border-radius:var(--r);color:var(--cream);font-family:inherit;font-size:14px;transition:border-color .2s}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:var(--cream-d)}
.contact-field input:focus,.contact-field textarea:focus{outline:none;border-color:var(--gold)}
.contact-field input[aria-invalid="true"]{border-color:#e97373}
.contact-field input:disabled,.contact-field textarea:disabled{opacity:.5;cursor:not-allowed}
.contact-field textarea{resize:vertical;min-height:70px}
.contact-hint{font-size:13px;color:var(--cream-d);margin-top:14px}
.booking-status{margin-top:16px;padding:14px 16px;border-radius:var(--r);font-size:14px;line-height:1.5}
.booking-status.error{background:rgba(233,115,115,.12);border:1px solid rgba(233,115,115,.35);color:#e97373}
.booking-status.success{background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold)}
.book-another-btn{display:block;width:100%;margin-top:16px;padding:14px 20px;background:transparent;color:var(--gold);border:1.5px solid var(--gold-border);font-family:'SF Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:var(--r);transition:all .2s}
.book-another-btn:hover{background:var(--gold-bg);border-color:var(--gold)}
/* Honeypot: hidden from sighted users; aria-hidden + tabindex=-1 on the
   input keep it out of the keyboard/AT tab order too. Real users never see
   or fill this — anything that does is treated as a bot (see script.js). */
.hp-field{position:absolute;left:-5000px;top:-5000px;width:1px;height:1px;overflow:hidden}

/* — Toast — */
.toast{position:fixed;top:70px;right:16px;z-index:70;max-width:min(360px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,.35);color:var(--cream);font-size:14px;line-height:1.4;
  opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.toast.success{border-color:var(--gold-border)}
.toast.success #toast-msg::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--gold);color:var(--purple-deep);font-size:11px;font-weight:700;vertical-align:middle}
.toast-close{background:none;border:none;color:var(--cream-d);font-size:16px;line-height:1;cursor:pointer;padding:0;margin-left:auto;flex-shrink:0}
.toast-close:hover{color:var(--cream)}

/* — Ready-made — */
.ready{margin-top:24px;padding:28px 24px;background:var(--purple-deep);border:1px solid var(--line);border-radius:var(--r)}
.ready summary{cursor:pointer;font-family:Georgia,serif;font-size:18px;color:var(--cream-s);list-style:none;display:flex;align-items:center;gap:10px}
.ready summary::before{content:'›';font-size:20px;transition:transform .2s;display:inline-block}
.ready[open] summary::before{transform:rotate(90deg)}
.ready-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
@media(min-width:500px){.ready-grid{grid-template-columns:repeat(3,1fr)}}
.ready-card{padding:18px;border:1px solid var(--line-s);border-radius:var(--r);cursor:pointer;transition:border-color .3s}
.ready-card:hover{border-color:var(--gold-border)}
.ready-card h4{font-family:Georgia,serif;font-size:18px;margin-bottom:6px}
.ready-card p{font-size:13px;color:var(--cream-d);margin-bottom:10px;line-height:1.4}
.ready-card .rprice{font-family:'SF Mono',monospace;font-size:14px;color:var(--gold);font-weight:500}

/* — Responsive — */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}