/* The quiet booking flow: one question per screen, nothing else on the page. */

/* Manage page (booking-manage.html) ------------------------------------------ */
/* Reserve the entire form column plus 64px of breathing room on each side.
   A static outer mask also constrains the moving relief and its fallback.
   When there is no room beside the form, the flowers fade out completely. */
.booking-page #relief,
.booking-page .margin-relief-layer {
  --booking-column-half: min(410px, calc(50vw - var(--gutter)));
  --booking-fade-end: max(0px, calc(50vw - var(--booking-column-half) - 64px));
  --booking-fade-start: max(0px, calc(var(--booking-fade-end) - 140px));
  mask-image: linear-gradient(to right,
    #000 var(--booking-fade-start),
    transparent var(--booking-fade-end),
    transparent calc(100% - var(--booking-fade-end)),
    #000 calc(100% - var(--booking-fade-start)));
}

.calm {
  width: min(calc(100% - var(--gutter) * 2), 820px);
  margin-inline: auto;
  padding: clamp(60px, 8vw, 110px) 0 clamp(90px, 11vw, 150px);
}
.calm-count {
  font-size: var(--type-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(69 71 63 / 55%);
}
.calm-title {
  margin-top: 16px;
  font: 400 clamp(38px, 5vw, 68px)/1.04 var(--font-display);
  letter-spacing: -.038em;
}
.calm-body { margin-top: clamp(40px, 5vw, 62px); }
.calm-review { max-width: 520px; }
.calm-review dl { border-top: 1px solid var(--rule); }
.calm-review .summary-row { padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--rule); }
.calm-review .summary-total { border-bottom: 0; border-top: 0; }
.calm-review .text-link { margin-top: 34px; width: 100%; justify-content: space-between; }
.calm-note { margin-top: 22px; font-size: var(--type-meta); line-height: 1.6; color: rgb(69 71 63 / 62%); }
.form-error { margin-top: 24px; font-size: var(--type-ui); line-height: 1.6; color: var(--accent); }

/* Hidden field that only bots fill in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Booking page (booking.html) ------------------------------------------------- */
/* Two looks chosen by the owner: .d1 calm editorial (hairlines, square buttons),
   .d2 rounded cards. The day-and-time step comes as .f1 (strip of days) or .f2 (guided). */
.bk {
  --paper: #efeee9;
  --ink: #45473f;
  --muted: #63645c;
  --accent: #8e3129;
  --rule: rgb(69 71 63 / 20%);
  --line: rgb(69 71 63 / 12%);
  --card: #f8f7f3;
  --soft: rgb(69 71 63 / 6%);
  --hatch: repeating-linear-gradient(-45deg, rgb(69 71 63 / 11%) 0 1px, transparent 1px 5px);
  --hatch-key: repeating-linear-gradient(-45deg, rgb(69 71 63 / 32%) 0 1px, transparent 1px 3.5px);
  --pad: 24px;
  --col: 600px;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.bk.d2 { --muted: #5f6058; --pad: 20px; }
.bk [hidden] { display: none !important; }
.bk :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bk .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bk svg { flex: none; }
.bk-wrap { width: min(100% - var(--pad) * 2, var(--col)); margin-inline: auto; }

/* Header */
.bk-top { position: relative; z-index: 2; }
.d1 .bk-top { border-bottom: 1px solid var(--rule); }
.bk-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.bk-brand { font: 400 26px/1 var(--font-display); letter-spacing: -.025em; white-space: nowrap; }
.bk-close { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 15px; }
.bk-close:hover, .bk-back:hover, .bk-secondary:hover { color: var(--accent); }
.bk-round {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--rule); color: var(--ink);
}
.bk-round:disabled { opacity: .4; cursor: default; }
.d2 .bk-top-in { display: grid; grid-template-columns: 40px 1fr 40px; height: 60px; }
.d2 .bk-back-round { grid-column: 1; }
.d2 .bk-brand { grid-column: 2; justify-self: center; font-size: 23px; letter-spacing: -.02em; }
.d2.no-back .bk-brand { grid-column: 1 / 3; justify-self: start; }
.d2 .bk-close {
  grid-column: 3; justify-content: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; background: var(--card); border: 1px solid var(--rule);
}

/* Progress and step counter */
.bk-main { padding-bottom: 72px; }
.has-bar .bk-main { padding-bottom: 150px; }
.d1 .bk-main { padding-top: 24px; }
.bk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.bk-seg i { height: 2px; background: var(--rule); }
.bk-seg i.done { background: var(--ink); }
.bk-seg i.now { background: var(--accent); }
.bk-count {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 20px; margin-top: 18px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.bk-back { display: flex; align-items: center; gap: 8px; padding: 6px 0; text-transform: inherit; letter-spacing: inherit; color: inherit; }
.bk-track { height: 4px; border-radius: 4px; background: rgb(69 71 63 / 12%); overflow: hidden; }
.bk-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width 300ms ease; }
.bk-steplbl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Titles and small text */
.bk-title { margin-top: 14px; font: 400 46px/1.02 var(--font-display); letter-spacing: -.035em; outline: none; }
.d2 .bk-title { margin-top: 18px; font-size: 33px; line-height: 1.05; letter-spacing: -.03em; }
.d2.f2[data-step='schedule'] .bk-title { margin-top: 12px; font-size: 36px; line-height: 1.06; }
.d1[data-step='done'] .bk-title { font-size: 54px; }
.d2[data-step='done'] .bk-title { margin-top: 40px; }
.bk-empty { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.bk-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bk-sub { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk-voice { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
#lead > .bk-voice { margin-top: 26px; }
.bk-mono {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding-top: 2px;
  border-radius: 50%; background: var(--ink); color: var(--paper); font: 400 17px/1 var(--font-display);
}
.d1 .bk-mono { display: none; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bk-c {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: rgb(69 71 63 / 8%); font-size: 13px; white-space: nowrap;
}
.bk-c.acc { background: rgb(142 49 41 / 10%); color: var(--accent); }

/* Buttons */
.bk-primary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; height: 56px; padding: 0 22px;
  background: var(--accent); color: var(--paper);
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 200ms ease;
}
.bk-primary:hover, .bk-pill.p:hover:not(:disabled) { background: #7a2922; }
.bk-primary:disabled { opacity: .45; cursor: progress; }
.d2 .bk-primary { justify-content: center; height: 52px; font-size: 16px; letter-spacing: 0; text-transform: none; }
.bk-secondary {
  display: block; margin: 22px auto 0; font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(69 71 63 / 45%);
}
.bk-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; font-size: 16px; white-space: nowrap;
}
.bk-pill.p { background: var(--accent); color: var(--paper); transition: background-color 200ms ease; }
.bk-pill.p:disabled { background: rgb(69 71 63 / 10%); color: var(--muted); cursor: default; }
.bk-pill.s { border: 1px solid rgb(69 71 63 / 40%); background: var(--card); }
.bk-pill.s:hover { border-color: var(--ink); }
.d1 .bk-pill.p { gap: 12px; height: 50px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }

/* Bottom bar */
.bk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--rule);
}
.d2 .bk-bar { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.bk-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.bk-bar .info { min-width: 0; }
.bk-bar .info b { display: block; font-weight: 400; font-size: 17px; }
.bk-bar .info small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.bk-bar .info + .bk-pill { flex: none; padding: 0 26px; }
.bk-bar-in.one .bk-pill { width: 100%; }
.bk-bar-in.two { display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; }

/* Step 1: treatments. Design 1: hairline rows. */
.d1 .bk-group { margin-top: 34px; }
.d1 .bk-group:first-child { margin-top: 30px; }
.d1 .bk-ghead h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bk-ghead p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.bk-rows { margin-top: 12px; border-top: 1px solid var(--rule); }
.bk-row {
  display: grid; grid-template-columns: 1fr auto 16px; align-items: center; column-gap: 16px;
  width: 100%; padding: 14px 2px; border-bottom: 1px solid var(--rule); text-align: left;
  transition: padding-left 240ms cubic-bezier(.2, .7, .2, 1), color 200ms ease;
}
.bk-row:hover { padding-left: 10px; color: var(--accent); }
.bk-row .n { font-size: 19px; font-weight: 300; letter-spacing: -.01em; }
.bk-row .m { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bk-row svg { color: var(--accent); }

/* Design 2: category tabs and cards. */
.bk-tabs {
  display: flex; gap: 8px; margin: 18px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 2px;
  overflow-x: auto; scrollbar-width: none;
}
.bk-tabs::-webkit-scrollbar, .bk-dayrow::-webkit-scrollbar { display: none; }
.bk-tab {
  flex: none; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); font-size: 15px; white-space: nowrap;
}
.bk-tab[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.d2 .bk-group { margin-top: 24px; scroll-margin-top: 16px; }
.d2 .bk-ghead h2 { font: 400 23px/1.1 var(--font-display); letter-spacing: -.02em; }
.bk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bk-card {
  display: flex; flex-direction: column; min-height: 118px; padding: 16px 14px 14px;
  border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: left;
  transition: border-color 200ms ease;
}
.bk-card:hover { border-color: rgb(142 49 41 / 45%); }
.bk-card .t { display: flex; flex-direction: column; flex: 1; }
.bk-card .n { font: 400 19px/1.12 var(--font-display); letter-spacing: -.02em; }
.bk-card .bk-chips { margin-top: auto; padding-top: 12px; }
.bk-card .note { margin-top: 6px; font-size: 14px; color: var(--muted); }
.bk-card.hero { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; gap: 12px; min-height: 0; padding: 18px 16px 16px; }
.bk-card.hero .n { font-size: 24px; }
.bk-go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--paper); }

/* Step 2: extras. Design 1: checkbox rows. */
.bk-chosen { margin-top: 14px; font-size: 15px; color: var(--accent); }
.bk-chosen .bk-link { text-underline-offset: 4px; }
.bk-extras { margin-top: 34px; }
.bk-extra {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: start; column-gap: 16px;
  padding: 20px 2px; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.bk-extra input, .d1 .bk-quiet input {
  appearance: none; width: 20px; height: 20px; margin: 3px 0 0;
  border: 1px solid var(--ink); border-radius: 0; background: var(--paper) center / 14px no-repeat;
}
.bk-extra input:checked, .d1 .bk-quiet input:checked, .bk-opt input:checked, .d2 .bk-quiet input:checked {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23efeee9' stroke-width='1.7'%3E%3Cpath d='M3 8.6 6.4 12 13 4.6'/%3E%3C/svg%3E");
}
.bk-extra .n { display: block; font-size: 20px; font-weight: 300; }
.bk-extra small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.bk-extra .m { margin-top: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bk-sum { display: flex; justify-content: space-between; padding: 18px 2px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.bk-sum span:first-child { color: var(--muted); }
.bk-actions { margin-top: 40px; }

/* Design 2: a card for the treatment, then yes / no choices. */
.bk-sel {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px;
  border-radius: 18px; background: var(--card); border: 1px solid var(--line);
}
.bk-sel .t { flex: 1; }
.bk-sel h2 { font: 400 20px/1.1 var(--font-display); letter-spacing: -.01em; }
.bk-sel .bk-chips { margin-top: 6px; }
.bk-sel .bk-link { font-size: 14px; }
.bk-opts { display: grid; gap: 10px; margin-top: 22px; }
.bk-opt, .d2 .bk-quiet {
  display: grid; grid-template-columns: 1fr 26px; align-items: center; gap: 12px;
  padding: 16px 16px 16px 18px; border-radius: 18px; border: 1px solid rgb(69 71 63 / 30%);
  background: var(--card); cursor: pointer;
}
.bk-opt b, .bk-quiet b { display: block; font-weight: 400; font-size: 18px; }
.bk-opt small, .bk-quiet small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.bk-opt input, .d2 .bk-quiet input {
  appearance: none; width: 24px; height: 24px; margin: 0;
  border-radius: 50%; border: 1px solid rgb(69 71 63 / 45%); background: var(--card) center / 14px no-repeat;
}
.bk-opt:has(input:checked), .d2 .bk-quiet:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 .5px var(--accent); }
.bk-opt:has(input:focus-visible), .bk-extra:has(input:focus-visible), .bk-quiet:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-opt input:focus-visible, .bk-extra input:focus-visible, .bk-quiet input:focus-visible { outline: none; }
.bk-reply { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 15px; }
.bk-reply .bk-mono { width: 24px; height: 24px; font-size: 14px; }
.bk-reply p { padding-top: 2px; }
.bk-reply .eq { color: var(--muted); }
.bk-reply b { font-weight: 400; }

/* Step 3: day and time */
.bk-summary {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 34px; margin-top: 16px; padding: 6px 14px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--rule); font-size: 14px; text-align: left;
}
.bk-summary svg { color: var(--accent); }
button.bk-summary:hover { border-color: rgb(142 49 41 / 45%); }
.bk-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.bk-opencal {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--card); border: 1px solid rgb(142 49 41 / 50%);
  color: var(--accent); font-size: 14px; white-space: nowrap;
}
.d1 .bk-opencal { height: auto; padding: 6px 0; border: 0; background: none; font-size: 15px; }
.d1 .bk-opencal:hover { text-decoration: underline; text-underline-offset: 4px; }
.bk-dayrow {
  display: flex; gap: 8px; margin: 10px calc(var(--pad) * -1) 0; padding: 2px var(--pad) 4px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); scrollbar-width: none;
}
.bk-dc {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none;
  width: 64px; height: 86px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  scroll-snap-align: start;
}
.bk-dc .w { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bk-dc .n { font-size: 24px; font-weight: 300; line-height: 1.15; }
.bk-dc .f { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bk-dc .few { font-size: 11px; line-height: 1; color: var(--accent); }
.bk-dc:hover { border-color: rgb(69 71 63 / 35%); }
.bk-dc[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.bk-dc[aria-pressed='true'] .f { background: var(--paper); }
.bk-dc[aria-pressed='true'] .few { color: var(--paper); }
/* Fully booked: the studio works that day, every time is taken. */
.bk-dc.full { background: var(--hatch); border-color: transparent; color: var(--muted); cursor: default; }
.bk-dc.full .n { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-dc.full .few { color: var(--muted); }
/* Design 1 shows only free days in the strip, so the "free" dot says nothing. */
.d1 .bk-dc { height: 76px; border-radius: 12px; }
.d1 .bk-dc .f { display: none; }
.bk-dlabel { margin-top: 18px; font-size: 14px; color: var(--muted); }
.d1 .bk-dlabel {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.bk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.bk-slots .bk-empty { grid-column: 1 / -1; margin-top: 0; }
.bk-time {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px;
  border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 19px;
}
.bk-time:hover { border-color: rgb(69 71 63 / 35%); }
.bk-time svg { display: none; }
.bk-time[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.bk-time[aria-pressed='true'] svg { display: block; }
.d1 .bk-time { height: 52px; border-radius: 12px; font-size: 18px; }
.bk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.bk-fchip {
  height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); font-size: 14px; white-space: nowrap;
}
.bk-fchip:hover { border-color: rgb(69 71 63 / 40%); }
.bk-fchip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bk-wait { margin-top: 18px; font-size: 15px; color: var(--muted); }

/* "More times": every other start the day allows, in a compact grid. */
.bk-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 10px;
  border-radius: 16px; border: 1px solid rgb(69 71 63 / 32%); background: transparent; font-size: 15px;
}
.bk-more svg { color: var(--accent); }
.bk-more span { color: var(--muted); }
.bk-more span::before { content: '· '; }
.bk-more:hover { border-color: var(--ink); }
.d1 .bk-more { border-radius: 12px; }
.bk-moretimes .bk-sub { margin-top: 18px; font-size: 12px; }
.d2 .bk-moretimes .bk-sub { font-size: 14px; letter-spacing: 0; text-transform: none; }
.bk-slots.more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.bk-slots.more .bk-time { height: 44px; border-radius: 12px; font-size: 16px; }
.d1 .bk-slots.more .bk-time { height: 42px; border-radius: 10px; font-size: 16px; }

/* Flow 2: one question at a time, earlier answers stay as chips. */
.bk-answers { margin-top: 16px; }
.bk-answers .bk-fchip { height: 38px; padding: 0 12px; border-color: rgb(69 71 63 / 32%); font-size: 14px; }
.bk-q { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.d2 .bk-q { border-top-color: var(--line); }
.bk-q > .bk-subrow { margin-top: 0; }
.d1 .bk-q .bk-voice { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.bk-dayname { margin-top: 10px; font: 400 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.d1 .bk-dayname { font-size: 30px; }
.f2 .bk-q .bk-slots { margin-top: 14px; }
.f2 .bk-q .bk-slots.more { margin-top: 10px; }
.d2.f2 .bk-slots { display: flex; flex-wrap: wrap; }
.d2.f2 .bk-time { height: 42px; padding: 0 18px; border-radius: 999px; border-color: rgb(69 71 63 / 32%); font-size: 16px; }
.d2.f2 .bk-slots.more .bk-time { height: 38px; padding: 0 14px; border-radius: 999px; font-size: 15px; }
.d2.f2 .bk-more { display: inline-flex; width: auto; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); }

/* Calendar overview: a sheet from the bottom */
.bk-sheet {
  position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 64px);
  margin: 0; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto;
  border: 0; border-radius: 24px 24px 0 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 -8px 30px rgb(46 47 42 / 18%);
}
.bk-sheet::backdrop { background: rgb(46 47 42 / 50%); }
.bk-sheet[open] { animation: bk-up 280ms cubic-bezier(.2, .7, .2, 1); }
@keyframes bk-up { from { transform: translateY(48px); opacity: .5; } }
.bk-grab { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgb(69 71 63 / 25%); }
.bk-shead { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.bk-shead .bk-voice { flex: 1; }
.bk-mhead { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.bk-mhead h2 { flex: 1; font: 400 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.d1 .bk-mhead h2 { font-size: 30px; }
.bk-dow, .bk-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; }
.bk-dow { margin-top: 14px; }
.bk-dow span { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bk-mgrid { margin-top: 8px; justify-items: center; }
.bk-mc {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 999px; border: 1px solid transparent; font-size: 16px; color: var(--muted);
}
.bk-mc:disabled { cursor: default; }
.bk-mc.free, .bk-mc.few { border-color: rgb(69 71 63 / 32%); background: var(--card); color: var(--ink); }
.bk-mc.few::after {
  content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper);
}
.bk-mc.full { background: var(--hatch); color: var(--muted); }
.bk-mc.full span { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-mc.today.full span { text-decoration-line: underline line-through; }
.bk-mc:not(:disabled):hover { border-color: var(--accent); }
.bk-mc[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.bk-mc.today span { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.bk-mc.today[aria-pressed='true'] span { color: var(--paper); }
.bk-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.bk-key { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--soft); font-size: 13px; }
.bk-key i { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgb(69 71 63 / 32%); background: var(--card); }
.bk-key i.few::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bk-key i.on { background: var(--accent); border-color: var(--accent); }
.bk-key i.full { border-color: rgb(69 71 63 / 14%); background: var(--hatch-key); }
.bk-key u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Step 4: details */
.bk-dl { margin-top: 26px; border-top: 1px solid var(--rule); }
.bk-dl div { display: grid; grid-template-columns: 100px 1fr; column-gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.bk-dl dt { padding-top: 3px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk-dl dd { margin: 0; font-size: 16px; }
.bk-sumcard { margin-top: 16px; padding: 4px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.bk-sumcard .li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bk-sumcard .li:last-child { border-bottom: 0; }
.bk-sumcard .ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(142 49 41 / 9%); color: var(--accent); }
.bk-sumcard b { display: block; font-weight: 400; font-size: 16px; line-height: 1.25; }
.bk-sumcard small { display: block; font-size: 13px; color: var(--muted); }
.bk-price { display: flex; justify-content: space-between; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--soft); font-size: 15px; }
.bk-price b { font-weight: 400; }
.bk-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 30px; }
.bk-field { display: grid; gap: 6px; }
.bk-field > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk-field small { letter-spacing: .04em; text-transform: none; }
.bk-field input, .bk-field textarea, .bk-field select {
  width: 100%; min-width: 0; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: none; color: inherit; font: inherit; font-size: 17px; resize: vertical; appearance: none;
  transition: border-color 200ms ease;
}
.bk-field select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2345473f' stroke-width='1.3'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E") right 4px center / 14px no-repeat;
}
.bk-field input:focus, .bk-field textarea:focus, .bk-field select:focus { outline: none; border-color: var(--accent); }
.d2 .bk-field > span { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.d2 .bk-field small { color: var(--muted); }
.d2 .bk-field input, .d2 .bk-field textarea, .d2 .bk-field select {
  padding: 12px 14px; border: 1px solid rgb(69 71 63 / 25%); border-radius: 14px; background-color: var(--card);
}
.d2 .bk-field select { background-position: right 14px center; }
.d2 .bk-field input:focus, .d2 .bk-field textarea:focus, .d2 .bk-field select:focus { box-shadow: 0 0 0 1px var(--accent); }
.d2 .bk-form { gap: 16px; margin-top: 22px; }
.d1 .bk-quiet { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 14px; cursor: pointer; }
.d1 .bk-quiet b { font-size: 17px; }
.d2 .bk-quiet input { grid-column: 2; grid-row: 1; }
.d2 .bk-quiet > span { grid-column: 1; grid-row: 1; }
.d2 .bk-quiet b { font-size: 16px; }
.bk-error { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--accent); }
#confirm { margin-top: 28px; }
.bk-note { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Waiting list: a quiet link under the times, opening a short form. */
.bk-waitform { margin-top: 18px; padding-top: 4px; }
.bk-waitform .bk-form { margin-top: 0; gap: 18px; }
.bk-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bk-waitform .bk-primary { margin-top: 22px; }
.bk-wait-done { margin-top: 18px; color: var(--accent); }

/* Done */
.bk-booked { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.bk-lead { margin-top: 14px; font-size: 17px; font-weight: 300; }
.d2 .bk-lead { margin-top: 6px; font-size: 16px; font-weight: 400; color: var(--muted); }
.bk-hero { position: relative; margin-top: 8px; }
.bk-hero img { height: 164px; border-radius: 20px; object-fit: cover; object-position: 50% 38%; }
.bk-badge {
  position: absolute; left: 20px; bottom: -24px; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--accent); color: var(--paper); box-shadow: 0 0 0 5px var(--paper);
}
.bk-links { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 24px; }
.d1 .bk-links .bk-primary { justify-content: center; }
.bk-textlink { font-size: 15px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.d2 .bk-links { display: grid; gap: 8px; margin-top: 14px; }
.d2 .bk-links .bk-pill { width: 100%; }
.d1 .bk-next { margin-top: 28px; }
.d1 .bk-next h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.d1 .bk-next p { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.d2 .bk-next { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--soft); font-size: 14px; line-height: 1.45; }
.d2 .bk-next svg { margin-top: 2px; color: var(--accent); }

/* Desktop pieces: on the phone they take no room at all. */
.bk-visual, .bk-xtot, .bk-steplbls, .bk-back-title, .bk-seg i span, .bk-bar.dt-only, .bk-bar .info.dt { display: none; }
.bk-hrow, .bk-submit, .bk-submit-in { display: contents; }

@media (min-width: 760px) {
  .d1 .bk-title { font-size: 58px; }
  .d1[data-step='done'] .bk-title { font-size: 64px; }
  .d2 .bk-title, .d2.f2[data-step='schedule'] .bk-title { font-size: 42px; }
  .d1 .bk-main { padding-top: 40px; }
  .bk-tabs, .bk-dayrow { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .bk-dayrow { padding-right: 48px; mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .bk-hero img { height: 220px; }
  .bk-sheet { inset: 0; width: min(100% - 48px, 480px); height: fit-content; max-height: calc(100dvh - 48px); margin: auto; padding-bottom: 24px; border-radius: 24px; }
  .bk-grab { visibility: hidden; }
}
/* Desktop: a split screen. The atelier with the appointment card on the left
   (fixed), the steps on the right; the bottom bar spans the right column only.
   The breakpoint matches `wide` in booking-calm.js. */
@media (min-width: 1024px) {
  .bk, .bk.d2 { --vis: clamp(384px, 37.5vw, 720px); --pad: clamp(40px, 4.5vw, 64px); --col: 880px; padding-left: var(--vis); }

  /* The atelier and the appointment card */
  .bk-visual {
    display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 4; width: var(--vis);
    background: #3a3b35 url(./assets/atelier-room-1120.webp) center 62% / cover no-repeat; color: var(--paper);
  }
  .bk-visual::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(38 39 34 / 55%) 0, rgb(38 39 34 / 8%) 22%, rgb(38 39 34 / 5%) 55%, rgb(38 39 34 / 50%) 100%);
  }
  .bk-vtop { position: absolute; top: 40px; left: 44px; right: 44px; }
  .bk-vbrand { font: 400 34px/1 var(--font-display); letter-spacing: -.025em; white-space: nowrap; }
  .bk-vtop p { margin-top: 10px; font-size: 14px; }
  .bk-appt {
    position: absolute; left: 32px; right: 32px; bottom: 32px; max-height: calc(100% - 172px); overflow-y: auto;
    padding: 24px 28px 26px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 50px rgb(20 20 18 / 25%);
  }
  .d2 .bk-appt { padding: 22px; border-radius: 24px; }
  .bk-appt > .bk-sub { margin-bottom: 12px; font-size: 12px; letter-spacing: .14em; }
  .bk-appt .bk-dl { margin-top: 0; }
  .bk-appt .bk-dl div { grid-template-columns: 104px 1fr; }
  .bk-appt dd small { display: block; margin-top: 1px; font-size: 14px; color: var(--muted); }
  .bk-appt dd.empty { color: var(--muted); }
  .bk-appt > .bk-voice { margin-bottom: 12px; color: var(--ink); }
  .bk-appt .bk-mono { width: 24px; height: 24px; font-size: 14px; }
  .bk-appt .bk-sumcard { margin-top: 0; }
  .bk-appt .li.empty b { color: var(--muted); }
  .bk-appt .li.empty .ic { background: var(--soft); color: var(--muted); }
  .bk-appt .bk-price { background: #e6e4dc; }
  .bk-appt.done > .bk-sub, .bk-appt.done > .bk-voice { margin-bottom: 0; }
  .bk-apdate { margin-top: 8px; font: 400 34px/1.05 var(--font-display); letter-spacing: -.03em; }
  .bk-apsub { margin-top: 6px; font-size: 15px; color: var(--muted); }

  /* Header: only Close, at the end of the step bar */
  .bk-top { position: absolute; top: 0; left: var(--vis); right: 0; pointer-events: none; }
  .d1 .bk-top { border-bottom: 0; }
  .bk-top-in, .d2 .bk-top-in { display: flex; justify-content: flex-end; height: 28px; margin-top: 40px; }
  .d2 .bk-top-in { height: 40px; }
  .bk-top .bk-brand, .bk-top .bk-back-round { display: none; }
  .bk-close { pointer-events: auto; }
  .bk-main, .d1 .bk-main, .has-bar .bk-main { padding-top: 40px; padding-bottom: 150px; }
  #progress { padding-right: 108px; }
  .d2 #progress { padding: 4px 88px 0 0; }

  /* Step bar with labels */
  .d1 .bk-seg { gap: 8px; }
  .d1 .bk-seg i {
    height: auto; padding-top: 10px; border-top: 2px solid var(--rule); background: none;
    font-size: 12px; font-style: normal; line-height: 16px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .d1 .bk-seg i span { display: inline; }
  .d1 .bk-seg i.done { border-color: var(--ink); color: var(--ink); }
  .d1 .bk-seg i.now { border-color: var(--accent); color: var(--accent); }
  .d1 .bk-count { margin-top: 34px; }
  #step-count { margin-left: auto; }
  .d2 .bk-steplbl { display: none; }
  .bk-steplbls { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 9px; font-size: 14px; color: var(--muted); }
  .bk-steplbls span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .bk-steplbls .done, .bk-steplbls .now { color: var(--ink); }
  .bk-steplbls .done svg { color: var(--accent); }
  .bk-steplbls .now::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

  /* Titles; Design 2 has its round Back beside the title */
  .d1 .bk-title { font-size: 52px; }
  .d1[data-step='done'] .bk-title { font-size: 64px; }
  .d2 .bk-hrow { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
  .d2 .bk-hrow .bk-title { margin-top: 0; }
  .d2 .bk-back-title:not([hidden]) { display: grid; }

  /* Bottom bar: a summary line and the buttons, in the right column */
  .bk-bar { left: var(--vis); padding: 22px 0; }
  .d2 .bk-bar { padding-bottom: 22px; }
  .bk-bar.dt-only { display: block; }
  .bk-bar .info.dt { display: block; min-width: 0; max-width: 520px; font-size: 15px; line-height: 1.5; color: var(--muted); }
  .bk-bar-in.one, .bk-bar-in.two { display: flex; }
  .bk-bar-in .bk-pill { flex: none; width: auto; height: 52px; padding: 0 26px; }
  .bk-bar-in.one .bk-pill { width: auto; }
  .bk-bar-in.two .bk-pill.s { margin-left: auto; }
  .bk-bar-in .bk-pill.p:only-child { margin-left: auto; }

  /* Step 1: Design 1 in two columns, rows with the details below the name */
  .bk-tcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 56px); align-items: start; }
  .d1 .bk-tcol .bk-group:first-child { margin-top: 30px; }
  .d1 .bk-tcol .bk-group + .bk-group { margin-top: 34px; }
  .d1 .bk-row { grid-template-columns: minmax(0, 1fr) 16px; padding: 13px 2px; }
  .d1 .bk-row:hover { padding-left: 10px; }
  .d1 .bk-row .m { grid-column: 1; grid-row: 2; margin-top: 3px; font-size: 13px; letter-spacing: .02em; text-transform: none; }
  .d1 .bk-row svg { grid-column: 2; grid-row: 1 / 3; }

  /* Step 2: the total in a card beside the extras (Design 1) */
  .bk-xwrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .bk-xwrap > .bk-chosen { grid-column: 1 / -1; }
  .bk-xwrap > .bk-extras, .bk-xwrap > .bk-actions { grid-column: 1; }
  .bk-xwrap #together { display: none; }
  .bk-xtot { display: block; grid-column: 2; grid-row: 2 / span 2; margin-top: 34px; padding: 24px 26px; background: #f6f5f1; border: 1px solid var(--rule); }
  .bk-xtot .m { font-size: 15px; color: var(--muted); }
  .bk-xtot .big { margin-top: 8px; font: 400 40px/1 var(--font-display); letter-spacing: -.03em; }
  .bk-xtot p:last-child { margin-top: 12px; font-size: 15px; }
  .bk-actions { margin-top: 22px; }
  .bk-actions .bk-primary { display: none; }
  .bk-actions .bk-secondary { display: inline-block; margin: 0; }
  .d2 .bk-sel, .d2 .bk-opts, .d2 .bk-reply { max-width: 600px; }

  /* Step 3: the month calendar beside the day's times */
  #step-schedule > .bk-summary { display: none; }
  .bk-tgrid { display: grid; grid-template-columns: minmax(0, 390px) minmax(240px, 1fr); gap: 0 clamp(28px, 3.4vw, 48px); align-items: start; margin-top: 30px; }
  .bk-q.bk-tgrid { margin-top: 22px; }
  .bk-calcol > .bk-subrow { margin: 0 0 16px; }
  .bk-cal .bk-mhead { margin-top: 0; }
  .bk-cal .bk-mhead h3 { flex: 1; margin: 0; font: 400 28px/1.05 var(--font-display); letter-spacing: -.025em; white-space: nowrap; }
  .bk-cal .bk-dow { margin-top: 16px; }
  .bk-cal .bk-mgrid { gap: 6px; }
  .bk-cal .bk-keys { margin-top: 14px; }
  .d1 .bk-cal .bk-mgrid { justify-items: stretch; }
  .d1 .bk-cal .bk-mc {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: auto; height: clamp(40px, 3.5vw, 50px); border-radius: 12px; font-size: 17px; font-weight: 300;
  }
  .d1 .bk-cal .bk-mc.free, .d1 .bk-cal .bk-mc.few { border-color: var(--line); background: var(--card); }
  .d1 .bk-cal .bk-mc.free::after, .d1 .bk-cal .bk-mc.few::after {
    content: ''; position: static; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: none;
  }
  .d1 .bk-cal .bk-mc.few::after { box-sizing: border-box; background: transparent; border: 1.5px solid var(--accent); }
  .d1 .bk-cal .bk-mc.today { border: 1.5px solid var(--ink); }
  .d1 .bk-cal .bk-mc.today span { text-decoration: none; }
  .d1 .bk-cal .bk-mc.full span { text-decoration: line-through; }
  .d1 .bk-cal .bk-mc[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
  .d1 .bk-cal .bk-mc[aria-pressed='true']::after { background: var(--paper); border-color: var(--paper); }
  .d1 .bk-cal .bk-keys { gap: 6px 16px; }
  .d1 .bk-cal .bk-key { height: auto; padding: 0; background: none; font-size: 13px; color: var(--muted); }
  .d1 .bk-cal .bk-key i { width: 8px; height: 8px; border: 0; background: var(--accent); }
  .d1 .bk-cal .bk-key i.few { box-sizing: border-box; background: transparent; border: 1.5px solid var(--accent); }
  .d1 .bk-cal .bk-key i.few::after { display: none; }
  .d1 .bk-cal .bk-key i.full { box-sizing: border-box; width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgb(69 71 63 / 14%); background: var(--hatch-key); }
  .d1 .bk-cal .bk-key i.today { box-sizing: border-box; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--ink); background: transparent; }
  .d2 .bk-cal .bk-mc { width: 100%; max-width: 46px; height: auto; aspect-ratio: 1; }
  .bk-daycol > .bk-sub { font-size: 12px; letter-spacing: .14em; }
  .bk-daycol .bk-dayname { margin-top: 8px; }
  .d1 .bk-daycol .bk-voice { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
  #guided-times.bk-daycol > .bk-empty { margin-top: 2px; }
  #day-times .bk-slots { margin-top: 16px; }
  .bk-slots.list { grid-template-columns: minmax(0, 1fr); }
  .bk-slots.list .bk-time { justify-content: space-between; height: 56px; padding: 0 18px; font-size: 19px; }
  .bk-slots.list .bk-time small { font-size: 12px; color: var(--muted); }
  .bk-slots.list .bk-time[aria-pressed='true'] small { color: var(--paper); }

  /* Step 4: three fields in a row; the button and the address in a footer */
  .bk-step:has(#details-fields:not([hidden])) #review-summary { display: none; }
  #details-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; margin-top: 30px; }
  .d2 #details-fields { gap: 18px 20px; margin-top: 26px; }
  #details-fields .bk-field:has(textarea), #details-fields .bk-quiet { grid-column: 1 / -1; }
  .bk-submit { display: block; position: fixed; left: var(--vis); right: 0; bottom: 0; z-index: 3; padding: 22px 0; background: var(--paper); border-top: 1px solid var(--rule); }
  .bk-submit-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100% - var(--pad) * 2, var(--col)); min-height: 52px; margin-inline: auto; }
  .bk-submit-in .bk-note { order: -1; max-width: 440px; margin-top: 0; }
  #confirm { flex: none; width: auto; height: 52px; margin: 0 0 0 auto; padding: 0 26px; }

  /* Done: the details, and beside them what to do next */
  .d1[data-step='done'] .bk-booked { margin-top: 56px; }
  .bk-hero { margin-top: 44px; }
  .bk-hero img { display: none; }
  .bk-badge { position: static; box-shadow: none; }
  .d2[data-step='done'] .bk-hrow { margin-top: 18px; }
  #step-done { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  #step-done > .bk-lead { grid-column: 1 / -1; }
  #step-done > .bk-dl, #step-done > .bk-sumcard { grid-column: 1; grid-row: 2 / span 2; margin-top: 30px; }
  #step-done > .bk-links { grid-column: 2; grid-row: 2; align-items: stretch; gap: 14px; margin-top: 30px; }
  #step-done > .bk-next { grid-column: 2; grid-row: 3; margin-top: 30px; }
  .bk-links .bk-textlink { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-sheet[open] { animation: none; }
  .bk-row, .bk-track i { transition: none; }
}