/* ============ VISIT (H-500) ============ */
.visit-hero { min-height: 0; padding-bottom: 24px; }
.panel-head + * { clear: both; }
.visit-hero .phero-title { padding-block: 56px; }
.visit-hero .phero-art { max-height: 46vh; }
#visitArt .cal-t { font-family: var(--mono); font-size: 36px; letter-spacing: .08em; fill: var(--ink-48); }

/* ---------- booking ---------- */
.book { display: grid; grid-template-columns: 34fr 66fr; }
.book-side { border-right: 1px solid var(--line); padding: 28px 26px; display: flex; flex-direction: column; gap: 28px; }
.book-side .label { margin-bottom: 0; }
.steps { border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); color: var(--ink-48); transition: color .4s; }
.steps li span { color: var(--ghost); transition: color .4s; }
.steps li em { width: 8px; height: 8px; border: 1px solid var(--line); transition: background .4s, border-color .4s; }
.steps li.is-on { color: var(--ink); }
.steps li.is-on span { color: var(--accent); }
.steps li.is-on em { border-color: var(--accent); }
.steps li.is-done { color: var(--ink-72); }
.steps li.is-done em { background: var(--ink); border-color: var(--ink); }
.re-piece { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; border: 1px solid var(--line); padding: 10px; background: var(--bg); box-shadow: 0 6px 0 var(--ink); }
.re-piece[hidden] { display: none; }
.re-art { width: 84px; height: 84px; overflow: visible; }
.re-piece div { display: grid; gap: 4px; }
.re-name { color: var(--ink); font-size: 11px; }
.re-link { color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }
.book-note { margin-top: auto; color: var(--ghost); }

.book-form { display: flex; flex-direction: column; min-width: 0; }
.book-track { position: relative; flex: 1; display: grid; }
.panel { grid-area: 1 / 1; border: 0; padding: 28px 26px 34px; min-width: 0; visibility: hidden; opacity: 0; }
.panel.is-on { visibility: visible; opacity: 1; }
.panel-head { float: left; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; padding: 0; }
.panel-err { color: var(--accent); min-height: 1.4em; margin-top: 14px; }

/* reasons */
.reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.reason { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 150px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.book .reason > input { position: absolute; opacity: 0; pointer-events: none; z-index: 0; }
.reason > span { color: var(--ink-48); }
.reason b { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.03em; line-height: 1; align-self: end; }
.reason small { font-size: var(--fs-s); color: var(--ink-72); transition: color .3s; }
.reason.brick-on small, .reason.brick-on > span { color: #a9a8a3; }
.reason.is-picked { background: var(--accent); color: #fff; }
.reason.is-picked small, .reason.is-picked > span { color: rgba(255, 255, 255, .8); }
.reason.is-picked .checker i { background: #d42e00; }
.reason:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* calendar */
.cal { max-width: 560px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head { color: var(--ink-48); padding-bottom: 8px; }
.cal-head .closed { color: var(--ghost); }
.cal-grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.day { aspect-ratio: 1; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: 6px; text-align: left; font-family: var(--mono); font-size: 10px; color: var(--ink-72); transition: background .25s, color .25s; }
.day b { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.day:not(:disabled):hover { background: var(--paper-2); }
.day:disabled { cursor: not-allowed; color: var(--ghost); background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line-soft) 5px 6px); }
.day:disabled b { color: var(--ghost); }
.day.is-pick { background: var(--ink); color: var(--bg); }
.day.is-pick b { color: var(--bg); }
.day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.day.blank { visibility: hidden; }
.cal-key { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--ink-48); }
.cal-key i { width: 10px; height: 10px; border: 1px solid var(--line); }
.cal-key .k-shut { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--line) 2px 3px); margin-left: 10px; }
.slots { margin-top: 26px; }
.slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { border: 1px solid var(--line); padding: 9px 12px; font-family: var(--mono); font-size: var(--fs-xs); min-height: 44px; }
.slot:disabled { color: var(--ghost); text-decoration: line-through; cursor: not-allowed; }
.slot.is-pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot:not(:disabled):not(.is-pick):hover { border-color: var(--ink); }

/* details */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 26px; max-width: 760px; }
.field-wide { grid-column: 1 / -1; }
.field textarea { resize: vertical; min-height: 90px; }
.field-msg { min-height: 1.3em; color: var(--ink-48); }
.field.bad .field-msg { color: var(--accent); }
.field.ok input { border-color: var(--ink); }

/* confirmation */
.appt { max-width: 560px; }
.appt .card-head { display: flex; justify-content: space-between; }
.appt-code { color: var(--accent); }
.appt-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px; align-items: center; }
.appt-art { width: 100%; height: auto; overflow: visible; }
.appt-art .ln-thin { stroke: var(--ink-48); stroke-width: .7; }
.appt-art text { font-family: var(--mono); font-size: 9px; fill: var(--ink-72); }
.appt-list { display: grid; grid-template-columns: 78px minmax(0, 1fr); row-gap: 8px; font-size: 11px; min-width: 0; }
.appt-list dt { color: var(--ink-48); }
/* a long unbroken name (or email-like string) wraps instead of running off the sheet */
.appt-list dd { color: var(--ink); text-transform: none; font-family: var(--sans); font-size: var(--fs-s); min-width: 0; overflow-wrap: anywhere; }
.appt-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding: 10px 18px; color: var(--ink-48); }
.appt-stamp { color: var(--accent); border: 1.5px solid var(--accent); padding: 4px 8px; transform: rotate(-4deg); }
.appt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* nav bar */
.book-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; border-top: 1px solid var(--line); }
.book-nav button { padding: 16px 22px; }
.nav-back { border-right: 1px solid var(--line); }
.nav-back:disabled { color: var(--ghost); cursor: default; }
.nav-sum { padding: 16px 20px; color: var(--ink-48); align-self: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-next { border-left: 1px solid var(--line); color: var(--accent); }
.nav-next.brick-on { color: var(--bg); }
.book.is-done .book-nav { display: none; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 34fr 66fr; border-top: 1px solid var(--line); }
.contact-info { border-right: 1px solid var(--line); }
.ci-block { padding: 22px 26px; border-bottom: 1px dashed var(--line); }
.ci-block:last-child { border-bottom: 0; }
.ci-block p { font-size: var(--fs-b); line-height: 1.45; }
.ci-block a { transition: color .3s; }
/* tap rows only where fingers tap (48: a 44 row measured 43.9998 at some scroll offsets); desktop keeps the tighter line rhythm */
@media (max-width: 900px), (pointer: coarse) { .ci-block a { display: inline-flex; align-items: center; min-height: 48px; } }
.ci-block a:hover { color: var(--accent); }
.hours { width: 100%; border-collapse: collapse; }
.hours th { text-align: left; font-weight: 400; color: var(--ink-48); padding: 6px 0; width: 60px; }
.hours td { padding: 6px 0; text-align: right; border-bottom: 1px dashed var(--line-soft); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--accent); }
.contact-map { position: relative; min-height: 480px; overflow: hidden; }
.contact-map .plus.tl { left: 10px; top: 10px; }
.streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.streets .blk { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.streets .road { fill: none; stroke: var(--ink-48); stroke-width: .8; vector-effect: non-scaling-stroke; }
.streets .route { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.streets text { font-family: var(--mono); font-size: 9px; fill: var(--ink-48); letter-spacing: .08em; }
.streets .here { font-size: 10px; fill: var(--ink); }
.streets .st-name { dominant-baseline: middle; }
.streets .st-bg { fill: var(--bg); }
.map-n { position: absolute; right: 22px; top: 18px; color: var(--ink-72); }

/* ---------- stockists ---------- */
.stock { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.stock th { text-align: left; font-weight: 400; color: var(--ink-48); padding: 12px 26px; border-bottom: 1px solid var(--line); }
.stock td { padding: 18px 26px; border-bottom: 1px dashed var(--line); font-size: var(--fs-b); transition: background .3s; }
.stock td:nth-child(2) { font-weight: 600; font-size: var(--fs-sm); letter-spacing: -.03em; }
.stock td:nth-child(3) { color: var(--ink-72); }
.stock tbody tr:hover td { background: var(--paper-2); }
.stock tbody tr:hover td:first-child { color: var(--accent); }

@media (max-width: 900px) {
  .book, .contact-grid { grid-template-columns: 1fr; }
  .book-side { border-right: 0; border-bottom: 1px solid var(--line); gap: 20px; }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); }
  .steps li { grid-template-columns: 1fr; gap: 4px; font-size: 9px; padding: 10px 6px 10px 0; }
  .steps li em { display: none; }
  .book-note { margin-top: 0; }
  .contact-info { border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-map { min-height: 340px; }
  .fields { grid-template-columns: 1fr; }
  .appt-body { grid-template-columns: minmax(0, 1fr); }
  .appt-art { max-width: 240px; }
  #visitArt .cal-t { font-size: 52px; }
  .stock th:nth-child(4), .stock td:nth-child(4) { display: none; }
}
@media (max-width: 520px) {
  .panel { padding: 22px 16px 28px; }
  /* minmax(0, 1fr): the panels share one grid cell, so a 1fr (min auto) track would grow to the widest panel's
     min-content and push the form past a narrow (zoomed) screen */
  .book, .book-track, .fields, .reasons { grid-template-columns: minmax(0, 1fr); }
  .reason { min-height: 0; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; }
  .reason b { align-self: center; }
  .reason small { grid-column: 2; }
  .day { padding: 3px; }
  .day b { font-size: 14px; }
  .day small { display: none; }
  .nav-sum { display: none; }
  .book-nav { grid-template-columns: 1fr 1fr; }
  .stock th, .stock td { padding: 12px 14px; }
  .stock th:nth-child(3), .stock td:nth-child(3) { display: none; }
}

@media (max-width: 900px) {
  .steps li { font-size: 10.5px; }
  .book-contact a, p > a[href^="mailto"], p > a[href^="tel"] { display: inline-block; padding: 10px 0; }
}
/* page zoom on a phone (iOS 150-200% leaves 260-195 CSS px; the folded Galaxy Fold is 280): the steps go two by two, the
   calendar's seven columns share the width (a day can't push the grid past the edge), and the contact and showing
   lists lose padding and break a long address rather than run off */
@media (max-width: 300px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-head, .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-head { font-size: 9px; }   /* TUE WED THU keep a gap between them in a 20px column */
  .day { padding: 2px; }
  .day b { font-size: 12px; }
  .ci-block { padding-inline: 16px; }
  .ci-block a { overflow-wrap: anywhere; }
  .stock th, .stock td { padding-inline: 8px; }
}
/* the showings table's whole words need ~224px: from 240 up (the folded Galaxy Fold at 280) NORTHGATE and CASTLEBRIDGE
   stay whole; only at 175-200% zoom does a name break rather than run off the edge */
@media (max-width: 239px) { .stock th, .stock td { overflow-wrap: anywhere; } }