/* TG_BOOK_CLIENT_V1 -- booking flow. Dark, disciplined, large touch targets. */
.bk-head { margin-bottom: 18px; }
.bk-head .book__step-title:focus { outline: none; }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bk-card, .bk-svc, .bk-date, .bk-time { font: inherit; color: inherit; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.bk-card:hover, .bk-svc:hover, .bk-date:hover:not(:disabled), .bk-time:hover { border-color: rgba(201,162,39,0.8); }
.bk-card:focus-visible, .bk-svc:focus-visible, .bk-date:focus-visible, .bk-time:focus-visible, .bk-more:focus-visible, .bk-back:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }
.is-picked { border-color: #c9a227 !important; background: rgba(201,162,39,0.14) !important; }
.bk-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; min-height: 120px; }
.bk-card__name { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; }
.bk-card__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; }
.bk-card__bio { font-size: .92rem; opacity: .85; line-height: 1.45; }
.bk-cat { border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; margin-bottom: 12px; padding: 0 14px; }
.bk-cat[open] { padding-bottom: 12px; }
.bk-cat__title { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font-weight: 700; font-size: 1.1rem; letter-spacing: .03em; list-style: none; }
.bk-cat__title::-webkit-details-marker { display: none; }
.bk-cat__title::after { content: '+'; font-size: 1.4rem; margin-left: 10px; }
.bk-cat[open] .bk-cat__title::after { content: '\2212'; }
.bk-cat__count { margin-left: auto; font-weight: 400; font-size: .85rem; opacity: .7; }
.bk-svc { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; margin-top: 8px; }
.bk-svc__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.bk-svc__meta { font-size: .88rem; opacity: .75; }
.bk-dates { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.bk-date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 10px 8px; scroll-snap-align: start; }
.bk-date__dow, .bk-date__mon { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.bk-date__num { font-size: 1.4rem; font-weight: 700; }
.bk-date.is-closed, .bk-date:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.bk-day { margin: 18px 0 6px; font-size: 1.05rem; }
.bk-period { margin: 14px 0; }
.bk-period__name { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; opacity: .75; margin: 0 0 8px; }
.bk-times { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-time { min-width: 104px; min-height: 48px; padding: 10px 14px; text-align: center; font-weight: 600; }
.bk-more, .bk-back { font: inherit; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 10px 0; opacity: .85; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 22px; }
.bk-msg { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; border: 1px solid rgba(255,255,255,0.2); }
.bk-msg--bad { border-color: #d9534f; background: rgba(217,83,79,0.12); }
.bk-msg--info { border-color: rgba(201,162,39,0.6); background: rgba(201,162,39,0.08); }
.bk-hold { padding: 10px 14px; border-left: 3px solid #c9a227; background: rgba(201,162,39,0.08); margin: 0 0 16px; }
.bk-form { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .bk-row { grid-template-columns: 1fr; } }
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-label { font-weight: 600; font-size: .92rem; }
.bk-input { font: inherit; color: inherit; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; padding: 12px; min-height: 48px; }
.bk-input:focus { outline: 3px solid #c9a227; outline-offset: 1px; }
.has-error .bk-input, .has-error input[type=checkbox] { border-color: #d9534f; outline: 2px solid #d9534f; }
.bk-hint { font-size: .85rem; opacity: .75; margin: -6px 0 0; }
.bk-check { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.bk-check input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.bk-subhead { margin: 8px 0 0; font-size: 1rem; }
.bk-policy { max-height: 180px; overflow-y: auto; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; font-size: .9rem; line-height: 1.5; }
.bk-policy p { margin: 0 0 8px; }
.bk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.bk-dl dt { opacity: .7; }
.bk-dl dd { margin: 0; font-weight: 600; }
.bk-empty { padding: 14px 0; }
/* TG_BOOK_CALENDAR_V1 -- Today / This week / This month / Next 90 days. */
.bk-views { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.bk-view { font: inherit; color: inherit; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.bk-view:focus-visible, .bk-cal__day:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }
.bk-month { margin: 0 0 18px; }
.bk-month__name { font-size: 1rem; margin: 6px 0 8px; letter-spacing: .04em; }
.bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-cal__dow { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; text-align: center; padding-bottom: 2px; }
.bk-cal__pad { min-height: 1px; }
.bk-cal__day { font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 2px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; cursor: pointer; }
.bk-cal__day.is-open:hover { border-color: rgba(201,162,39,0.8); }
.bk-cal__day.is-closed, .bk-cal__day:disabled { opacity: .32; cursor: not-allowed; }
.bk-cal__day.is-today { border-style: dashed; border-color: rgba(201,162,39,0.7); }
.bk-cal__day.is-out { opacity: .15; border-color: transparent; background: none; cursor: default; }
.bk-cal__num { font-size: 1.1rem; font-weight: 700; }
.bk-cal__info { font-size: .68rem; opacity: .8; min-height: 1em; }
.bk-cal--week .bk-cal__day { min-height: 76px; }
@media (max-width: 480px) { .bk-cal { gap: 4px; } .bk-cal__day { min-height: 52px; } .bk-cal__info { font-size: .6rem; } }
.bk-cal__wd { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
/* TG_BOOK_CALENDAR_V2 -- back and forward. */
.bk-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.bk-pager__label { font-weight: 700; letter-spacing: .04em; text-align: center; flex: 1; }
.bk-pager__btn { font: inherit; font-size: 1.6rem; line-height: 1; color: inherit; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
.bk-pager__btn:hover:not(:disabled) { border-color: rgba(201,162,39,0.8); }
.bk-pager__btn:disabled { opacity: .25; cursor: not-allowed; }
.bk-pager__btn:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }
.bk-cal { touch-action: pan-y; }
/* TG_BOOK_NO_COUNTS_V1 -- open days get a small gold dot, not a number. */
.bk-cal__day.is-open .bk-cal__info::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c9a227; }
/* TG_BOOK_FIRST_AVAILABLE_V1 */
.bk-card--any { border-style: dashed; }
.bk-card--any .bk-card__name { color: #c9a227; }
/* TG_BOOK_FIRST_AVAILABLE_PREF_V1 */
.bk-pref { margin: 0 0 8px; }
.bk-pref .bk-subhead { margin: 14px 0 8px; font-size: .95rem; }
.bk-pref__chip { display: inline-flex; flex-direction: column; align-items: flex-start; border-radius: 12px; }
.bk-pref__name { font-weight: 600; }
.bk-pref__hint { font-size: .72rem; opacity: .75; }
.bk-time--soon { min-width: 170px; }
/* TG_BOOK_SOONEST_V1 */
.bk-cards--pref { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bk-card--pref { min-height: 92px; }
.bk-soon-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.bk-soonbar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 12px; }
.bk-soonbar .bk-hint { margin: 0; }
/* TG_BOOK_GROUP_V1 */
.bk-card--group { border-style: dashed; }
.bk-person { border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.bk-person .bk-subhead { margin: 0 0 8px; }
.bk-gfield { display: block; margin: 10px 0; }
.bk-gfield > span { display: block; font-size: .85rem; opacity: .8; margin-bottom: 4px; }
.bk-gin { width: 100%; max-width: 440px; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.25); color: inherit; font: inherit; }
.bk-gin:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }
.bk-gin option, .bk-gin optgroup { color: #111; }
.bk-plan { border: 1px solid rgba(201,162,39,0.55); border-radius: 14px; padding: 16px 18px; margin: 12px 0; }
.bk-plan__when { font-weight: 700; font-size: 1.08rem; margin: 0 0 4px; }
.bk-plan__list { margin: 10px 0 8px; padding-left: 18px; line-height: 1.7; }
.bk-plan-opt { margin-bottom: 14px; }
/* TG_BOOK_CARD_SIZE_V1 -- every card in a set is the same size. */
.bk-cards { grid-auto-rows: 1fr; align-items: stretch; }
.bk-card { height: 100%; min-height: 150px; justify-content: flex-start; text-align: left; box-sizing: border-box; }
.bk-card--pref { min-height: 110px; }
.bk-card__bio { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* TG_BOOK_PRESELECT_V2 */
.bk-card.is-unavailable { opacity: .45; cursor: not-allowed; }
/* TG_BOOK_DEPOSIT_LIFT_TEXT_V1 */
.bk-lift { font-weight: 600; }
.bk-liftbar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; margin: 8px 0 4px; max-width: 420px; }
.bk-liftbar__fill { display: block; height: 100%; background: #c9a227; border-radius: 999px; }

/* TG_BOOK_USUAL_V1 -- Book my usual, and the customer sign in line. The greyed out card keeps its
   own opacity so the sign in link inside it stays legible and clickable: a parent opacity would
   dim the link too, and a disabled button would swallow the click. */
.bk-card--usual { border-style: dashed; }
.bk-card--usual .bk-card__name { color: #c9a227; }
.bk-card--usual.is-unavailable { opacity: 1; cursor: default; }
.bk-card--usual.is-unavailable .bk-card__name { color: rgba(201,162,39,0.55); }
.bk-card--usual.is-unavailable .bk-card__title,
.bk-card--usual.is-unavailable .bk-card__bio { opacity: .5; }
.bk-card--usual .bk-card__bio--link { display: block; overflow: visible; opacity: .7; }
.bk-card--usual .bk-card__bio--link .textlink { opacity: 1; cursor: pointer; }
.bk-session { margin: 0 0 14px; font-size: .9rem; opacity: .85; }
.bk-session .textlink { font-size: .78rem; }

/* TG_BOOK_LOOK_V1 -- the booking flow in the site's language: notched cards
   with gold corner ticks instead of rounded dashed boxes, condensed uppercase
   names, tracked labels, and a clean three-across grid (the three ways to
   book on top, the barbers underneath) that drops to one column on phones.
   The summary panel stays hidden until it has something to say, and the flow
   takes the full width until then. */
.book__summary:empty { display: none; }
.book__layout:has(.book__summary:empty) { grid-template-columns: minmax(0, 1fr); }

.bk-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.6rem, 1.4vw, 0.9rem);
}
@media (max-width: 40rem) {
  .bk-cards { grid-template-columns: minmax(0, 1fr); }
}

.bk-card, .bk-cat { position: relative; }
.bk-card,
.bk-cat,
.book__summary {
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--surface), var(--bg-raised));
  clip-path: var(--cut-poly);
}
.bk-card {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.15rem;
  text-align: left;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.bk-card::before, .bk-card::after,
.book__summary::before, .book__summary::after {
  content: '';
  position: absolute;
  width: var(--tick);
  height: var(--tick);
  pointer-events: none;
}
.bk-card::before, .book__summary::before { top: 0; left: 0; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.bk-card::after, .book__summary::after { right: 0; bottom: 0; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.bk-card:hover:not(:disabled):not(.is-unavailable) {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, #1a1812, var(--bg-raised));
}
.bk-card.is-picked {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, rgba(214, 176, 100, 0.14), var(--bg-raised));
}
.bk-card.is-unavailable { opacity: 0.6; }
.bk-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--text);
}
.bk-card--any .bk-card__name, .bk-card--usual .bk-card__name { color: var(--accent); }
.bk-card:not(.bk-card--any):not(.bk-card--usual):not(.bk-card--group):not(:disabled) .bk-card__name::after {
  content: 'Choose \2192';
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.bk-card__title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-card__bio { font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); }

/* Service step: each category is a notched panel, services are ruled rows. */
.bk-cat { margin-bottom: 0.6rem; }
.bk-cat__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bk-cat__count {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-svc {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.bk-svc:hover, .bk-svc[aria-pressed="true"] {
  border-color: var(--accent) !important;
  background: var(--accent-wash);
}
.bk-svc__price { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent-bright); }
.bk-svc__meta {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Summary panel. */
.book__summary { padding: 1.25rem 1.35rem; }
.book__summary-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bk-dl dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Every other control in the flow (dates, times, form fields) squares off. */
.book__app :is(button, input, select, textarea) { border-radius: 2px; }
.bk-back {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* TG_BOOK_STABLE_V1 -- while the booking options load, the page ends at the booking panel: the closing
   poster and the footer are taken out of the layout (not hidden in place) and come back in
   one step once the panel has its content, so nothing that was on screen moves. Only when
   scripts run; without them the noscript note and the footer show as before. */
@media (scripting: enabled) {
  .book-loading .closer, .book-loading .mapband, .book-loading .footer { display: none; }
}
.book__app[aria-busy="true"] { min-height: 22rem; }
.bk-check input { width: 24px; height: 24px; }
/* TG_BOOK_STABLE_V2 -- clear of the sticky header when a step change scrolls to its title. */
.book__step-title { scroll-margin-top: 7.5rem; }

/* TG_BOOK_AUDIT_V2 */
.bk-field-err { color: #e8746f; font-size: .85rem; margin: 4px 0 0; }
.bk-soonline { font-size: 1.15rem; font-weight: 600; margin: 6px 0 12px; }
.bk-earliest, .bk-resume { border: 1px solid rgba(201,162,39,0.5); padding: 12px 14px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bk-earliest .bk-subhead, .bk-earliest .bk-soonline, .bk-resume .bk-soonline { margin: 0; }
.bk-svcline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.bk-policy-more summary { cursor: pointer; text-decoration: underline; margin: 6px 0; }
.bk-person .bk-hint { margin: 6px 0 0; }

/* TG_BOOK_AUDIT_V5 */
.bk-cancelbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
.bk-cancelbar .bk-hint { margin: 0; }