/* ==========================================================================

   Northline Booking Studio — customer site + demo admin

   Hand-written CSS. Mobile-first. No frameworks.

   \\========================================================================== */

:root {

  --ink: #16202b;

  --ink-2: #3b4a5a;

  --ink-3: #6b7a89;

  --line: #dde3e9;

  --line-2: #eef2f6;

  --bg: #ffffff;

  --bg-2: #f6f8fa;

  --bg-3: #eef2f6;

  --accent: #1f5f8b;

  --accent-dark: #17496b;

  --accent-soft: #e8f1f7;

  --ok: #1d7a4d;

  --ok-soft: #e6f3ec;

  --warn: #a3620b;

  --warn-soft: #fdf2e2;

  --danger: #a8322c;

  --danger-soft: #fbeceb;

  --focus: #2f7ab0;

  --r-sm: 4px;

  --r: 8px;

  --r-lg: 12px;

  --shadow-1: 0 1px 2px rgba(20, 32, 44, 0.06), 0 1px 3px rgba(20, 32, 44, 0.04);

  --shadow-2: 0 2px 6px rgba(20, 32, 44, 0.07), 0 6px 18px rgba(20, 32, 44, 0.06);

  --wrap: 1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {

  margin: 0;

  font-family: var(--font);

  font-size: 16px;

  line-height: 1.55;

  color: var(--ink);

  background: var(--bg);

  overflow-x: hidden;

}

img { max-width: 100%; display: block; }

a { color: var(--accent); }

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; font-weight: 600; letter-spacing: -0.01em; }

h1 { font-size: 1.65rem; }

h2 { font-size: 1.3rem; }

h3 { font-size: 1.05rem; }

h4 { font-size: .95rem; }

p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.muted { color: var(--ink-3); }

.small { font-size: .875rem; }

.tiny { font-size: .78rem; }

.center { text-align: center; }

.nowrap { white-space: nowrap; }

.hidden { display: none !important; }

.sr-only {

  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;

}

/* ---------- Buttons ---------- */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 10px 18px;

  font: inherit;

  font-size: .95rem;

  font-weight: 500;

  border-radius: var(--r);

  border: 1px solid var(--line);

  background: #fff;

  color: var(--ink);

  cursor: pointer;

  text-decoration: none;

  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;

  -webkit-tap-highlight-color: transparent;

}

.btn:hover { background: var(--bg-2); }

.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--accent); }

.btn-quiet:hover { background: var(--accent-soft); }

.btn-danger { color: var(--danger); }

.btn-danger:hover { background: var(--danger-soft); border-color: #ecc9c6; }

.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .845rem; }

.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Forms ---------- */

.field { margin-bottom: 16px; }

.field > label, .label {

  display: block;

  font-size: .85rem;

  font-weight: 600;

  color: var(--ink-2);

  margin-bottom: 6px;

}

.field .hint { font-size: .78rem; color: var(--ink-3); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],

input[type="date"], input[type="time"], input[type="search"], select, textarea {

  width: 100%;

  min-height: 44px;

  padding: 10px 12px;

  font: inherit;

  font-size: 1rem;

  color: var(--ink);

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--r);

  transition: border-color .15s ease, box-shadow .15s ease;

}

textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

select {

  appearance: none;

  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http\://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a89' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 12px center;

  padding-right: 34px;

}

input:focus, select:focus, textarea:focus {

  outline: none;

  border-color: var(--focus);

  box-shadow: 0 0 0 3px rgba(47, 122, 176, .15);

}

input.is-error, select.is-error, textarea.is-error { border-color: var(--danger); }

.field-error { color: var(--danger); font-size: .8rem; margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

/* ---------- Header ---------- */

.site-header {

  position: sticky;

  top: 0;

  z-index: 40;

  background: rgba(255, 255, 255, .96);

  backdrop-filter: saturate(140%) blur(6px);

  border-bottom: 1px solid var(--line);

}

.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  min-height: 60px;

}

.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: var(--ink);

  min-width: 0;

}

.brand-mark {

  flex: none;

  width: 32px;

  height: 32px;

  border-radius: 7px;

  background: var(--accent);

  color: #fff;

  font-size: .82rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  letter-spacing: .02em;

}

.brand-text { min-width: 0; }

.brand-name {

  font-size: .98rem;

  font-weight: 600;

  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.brand-sub { font-size: .72rem; color: var(--ink-3); line-height: 1.2; }

.nav-toggle {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 44px;

  min-width: 44px;

  padding: 8px 12px;

  border: 1px solid var(--line);

  background: #fff;

  border-radius: var(--r);

  font: inherit;

  font-size: .9rem;

  color: var(--ink);

  cursor: pointer;

}

.nav-toggle-bars { display: block; width: 16px; }

.nav-toggle-bars span {

  display: block;

  height: 2px;

  background: var(--ink-2);

  border-radius: 2px;

  margin: 3px 0;

}

.site-nav {

  display: none;

  border-top: 1px solid var(--line-2);

  padding: 8px 0 14px;

}

.site-nav.is-open { display: block; }

.site-nav a {

  display: block;

  padding: 12px 4px;

  text-decoration: none;

  color: var(--ink-2);

  font-size: .95rem;

  border-bottom: 1px solid var(--line-2);

}

.site-nav a:last-child { border-bottom: 0; }

.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.site-nav .nav-cta { margin-top: 12px; }

/* ---------- Sections ---------- */

.section { padding: 40px 0; }

.section-tight { padding: 28px 0; }

.section-alt { background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }

.section-head { margin-bottom: 20px; max-width: 640px; }

.section-head p { color: var(--ink-3); margin-bottom: 0; }

.eyebrow {

  font-size: .76rem;

  font-weight: 700;

  letter-spacing: .09em;

  text-transform: uppercase;

  color: var(--accent);

  margin-bottom: 8px;

}

/* ---------- Hero ---------- */

.hero { padding: 34px 0 30px; border-bottom: 1px solid var(--line-2); }

.hero h1 { margin-bottom: .45em; }

.hero-lead { font-size: 1.02rem; color: var(--ink-2); max-width: 46ch; }

.hero-points {

  list-style: none;

  margin: 18px 0 22px;

  padding: 0;

  display: grid;

  gap: 8px;

}

.hero-points li {

  position: relative;

  padding-left: 22px;

  font-size: .92rem;

  color: var(--ink-2);

}

.hero-points li::before {

  content: "";

  position: absolute;

  left: 2px;

  top: .52em;

  width: 8px;

  height: 8px;

  border-radius: 2px;

  background: var(--accent);

  opacity: .75;

}

.hero-card {

  margin-top: 24px;

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: #fff;

  box-shadow: var(--shadow-1);

  padding: 18px;

}

.hero-card h3 { margin-bottom: .3em; }

.hero-card dl { margin: 12px 0 0; display: grid; gap: 10px; }

.hero-card dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

.hero-card dd { margin: 2px 0 0; font-size: .92rem; }

/* ---------- Cards ---------- */

.card {

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: #fff;

  box-shadow: var(--shadow-1);

}

.card-body { padding: 18px; }

.card + .card { margin-top: 16px; }

.card-head {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: 8px 12px;

  margin-bottom: 12px;

}

.card-head h3 { margin: 0; }

.price {

  font-size: 1rem;

  font-weight: 600;

  color: var(--ink);

  white-space: nowrap;

}

.price-from { font-size: .74rem; color: var(--ink-3); font-weight: 500; }

/* ---------- Offering list ---------- */

.filters {

  display: grid;

  gap: 12px;

  margin-bottom: 20px;

}

.filter-search { position: relative; }

.filter-tabs {

  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding-bottom: 2px;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

}

.filter-tabs button {

  flex: none;

  min-height: 38px;

  padding: 7px 14px;

  border: 1px solid var(--line);

  background: #fff;

  border-radius: var(--r);

  font: inherit;

  font-size: .88rem;

  color: var(--ink-2);

  cursor: pointer;

}

.filter-tabs button.is-active {

  background: var(--accent-soft);

  border-color: #c6dcea;

  color: var(--accent-dark);

  font-weight: 600;

}

.offering-list { display: grid; gap: 14px; }

.offering {

  display: flex;

  flex-direction: column;

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: #fff;

  box-shadow: var(--shadow-1);

  overflow: hidden;

}

.offering-top { padding: 16px 16px 0; }

.offering-body { padding: 12px 16px 16px; display: flex; flex-direction: column; flex: 1; }

.offering h3 { margin: 0 0 4px; font-size: 1.02rem; }

.offering .offering-cat {

  font-size: .72rem;

  text-transform: uppercase;

  letter-spacing: .07em;

  color: var(--ink-3);

  font-weight: 600;

}

.offering-desc { color: var(--ink-2); font-size: .92rem; margin: 0 0 12px; }

.meta-row {

  display: flex;

  flex-wrap: wrap;

  gap: 6px 14px;

  margin: 0 0 14px;

  padding: 0;

  list-style: none;

  font-size: .85rem;

  color: var(--ink-2);

}

.meta-row li { display: flex; align-items: center; gap: 6px; }

.meta-row .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); opacity: .6; }

.offering-foot {

  margin-top: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding-top: 12px;

  border-top: 1px solid var(--line-2);

}

.thumb {

  height: 118px;

  border-bottom: 1px solid var(--line-2);

  background-color: var(--bg-3);

  background-size: cover;

  background-position: center;

  position: relative;

}

.thumb::after {

  content: attr(data-label);

  position: absolute;

  left: 12px;

  bottom: 10px;

  font-size: .72rem;

  font-weight: 600;

  letter-spacing: .05em;

  text-transform: uppercase;

  color: #fff;

  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);

}

/* ---------- Steps / how it works ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }

.steps li { display: flex; gap: 14px; }

.steps .n {

  flex: none;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  border: 1px solid #c6dcea;

  background: var(--accent-soft);

  color: var(--accent-dark);

  font-size: .85rem;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

}

.steps h4 { margin: 4px 0 2px; }

.steps p { margin: 0; font-size: .9rem; color: var(--ink-3); }

/* ---------- Info blocks ---------- */

.info-grid { display: grid; gap: 16px; }

.info-card {

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: #fff;

  padding: 18px;

}

.info-card h3 { font-size: .95rem; margin-bottom: .6em; }

.info-card p, .info-card li { font-size: .9rem; color: var(--ink-2); }

.hours-list { list-style: none; margin: 0; padding: 0; }

.hours-list li {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding: 7px 0;

  border-bottom: 1px solid var(--line-2);

  font-size: .9rem;

}

.hours-list li:last-child { border-bottom: 0; }

.hours-list .day { color: var(--ink-2); }

.hours-list .hrs { color: var(--ink); font-weight: 500; white-space: nowrap; }

.hours-list .closed { color: var(--ink-3); font-weight: 500; }

/* ---------- CTA band ---------- */

.cta-band {

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: var(--bg-2);

  padding: 22px 18px;

  display: grid;

  gap: 14px;

}

.cta-band h2 { margin-bottom: .3em; }

.cta-band p { margin: 0; color: var(--ink-2); font-size: .94rem; }

/* ---------- Booking flow ---------- */

.book-layout { display: grid; gap: 22px; }

.flow-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 14px 0 10px;

}

.flow-head .flow-title { font-weight: 600; font-size: 1rem; }

.flow-head .flow-step { font-size: .82rem; color: var(--ink-3); }

.progress {

  display: flex;

  gap: 4px;

  margin-bottom: 18px;

}

.progress span {

  flex: 1;

  height: 4px;

  border-radius: 2px;

  background: var(--line);

}

.progress span.done { background: var(--accent); }

.progress span.current { background: var(--accent); }

.flow-step-panel { animation: none; }

.step-title { margin-bottom: .2em; }

.step-sub { color: var(--ink-3); font-size: .9rem; margin-bottom: 18px; }

.choice-list { display: grid; gap: 10px; }

.choice {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 13px 14px;

  border: 1px solid var(--line);

  border-radius: var(--r);

  background: #fff;

  cursor: pointer;

  transition: border-color .15s ease, background-color .15s ease;

}

.choice:hover { border-color: #c3ccd6; background: #fcfdfe; }

.choice input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

.choice-main { flex: 1; min-width: 0; }

.choice-name { font-weight: 600; font-size: .95rem; }

.choice-desc { font-size: .855rem; color: var(--ink-3); margin-top: 2px; }

.choice-price { font-weight: 600; font-size: .9rem; white-space: nowrap; }

.choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }

.choice-cat {

  font-size: .7rem;

  text-transform: uppercase;

  letter-spacing: .07em;

  color: var(--ink-3);

  font-weight: 600;

  display: block;

  margin-bottom: 2px;

}

/* date + time pickers */

.cal-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;

}

.cal-head .cal-month { font-weight: 600; font-size: .98rem; }

.cal-nav { display: flex; gap: 6px; }

.cal-nav button {

  width: 38px; height: 38px;

  border: 1px solid var(--line);

  background: #fff;

  border-radius: var(--r);

  font: inherit;

  font-size: 1rem;

  color: var(--ink-2);

  cursor: pointer;

  line-height: 1;

}

.cal-nav button:disabled { opacity: .4; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-grid .dow {

  text-align: center;

  font-size: .7rem;

  font-weight: 700;

  letter-spacing: .04em;

  color: var(--ink-3);

  padding: 4px 0 6px;

  text-transform: uppercase;

}

.cal-day {

  min-height: 42px;

  border: 1px solid transparent;

  border-radius: var(--r-sm);

  background: var(--bg-2);

  font: inherit;

  font-size: .9rem;

  color: var(--ink);

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding: 4px 0;

}

.cal-day.is-empty { background: transparent; cursor: default; }

.cal-day.is-off { background: transparent; color: #b6c0ca; cursor: not-allowed; text-decoration: line-through; }

.cal-day .cnt { font-size: .62rem; color: var(--ok); line-height: 1; }

.cal-day:not(.is-empty):not(.is-off):hover { background: var(--accent-soft); }

.cal-day.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }

.cal-day.is-selected .cnt { color: #d8e8f3; }

.cal-day.is-today { border-color: #c3ccd6; }

.slot-group { margin-bottom: 16px; }

.slot-group h4 {

  font-size: .78rem;

  text-transform: uppercase;

  letter-spacing: .07em;

  color: var(--ink-3);

  margin-bottom: 8px;

}

.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.slot {

  min-height: 44px;

  padding: 8px;

  border: 1px solid var(--line);

  background: #fff;

  border-radius: var(--r);

  font: inherit;

  font-size: .9rem;

  color: var(--ink);

  cursor: pointer;

}

.slot:hover { border-color: #c3ccd6; }

.slot.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.slot small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 400; }

.slot.is-selected small { color: #d8e8f3; }

.review-list { margin: 0; padding: 0; list-style: none; }

.review-list li {

  display: flex;

  justify-content: space-between;

  gap: 14px;

  padding: 10px 0;

  border-bottom: 1px solid var(--line-2);

  font-size: .9rem;

}

.review-list li:last-child { border-bottom: 0; }

.review-list .k { color: var(--ink-3); }

.review-list .v { text-align: right; font-weight: 500; }

.review-list .v.multiline { font-weight: 400; white-space: pre-wrap; text-align: right; }

.review-total {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 12px;

  margin-top: 4px;

  padding-top: 14px;

  border-top: 1px solid var(--line);

  font-size: 1rem;

  font-weight: 600;

}

.summary-card { position: relative; }

.summary-card .summary-head {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;

}

.summary-line {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  font-size: .86rem;

  padding: 5px 0;

  color: var(--ink-2);

}

.summary-line .lbl { color: var(--ink-3); }

.summary-line .val { text-align: right; }

.summary-divider { height: 1px; background: var(--line-2); margin: 10px 0; }

.flow-nav {

  display: flex;

  gap: 10px;

  align-items: center;

  margin-top: 20px;

  padding-top: 16px;

  border-top: 1px solid var(--line-2);

}

.flow-nav .spacer { flex: 1; }

.notice {

  border: 1px solid #c6dcea;

  background: var(--accent-soft);

  border-radius: var(--r);

  padding: 12px 14px;

  font-size: .88rem;

  color: var(--accent-dark);

  margin-bottom: 16px;

}

.notice-quiet { background: var(--bg-2); border-color: var(--line); color: var(--ink-2); }

/* confirmation */

.confirm-mark {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: var(--ok-soft);

  color: var(--ok);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 14px;

  font-size: 1.5rem;

}

.ref-box {

  border: 1px dashed #c3ccd6;

  border-radius: var(--r);

  background: var(--bg-2);

  padding: 14px;

  text-align: center;

  margin: 0 0 18px;

}

.ref-box .ref {

  font-size: 1.22rem;

  font-weight: 700;

  letter-spacing: .06em;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

}

.ref-box .tiny { margin-top: 4px; }

/* ---------- Status labels ---------- */

.status {

  display: inline-block;

  padding: 2px 9px;

  border-radius: 999px;

  font-size: .75rem;

  font-weight: 600;

  letter-spacing: .01em;

  border: 1px solid transparent;

  white-space: nowrap;

}

.status-pending { background: var(--warn-soft); color: var(--warn); border-color: #f0dcbb; }

.status-confirmed { background: var(--accent-soft); color: var(--accent-dark); border-color: #c6dcea; }

.status-completed { background: var(--ok-soft); color: var(--ok); border-color: #cbe6d8; }

.status-canceled { background: var(--danger-soft); color: var(--danger); border-color: #ecc9c6; }

/* ---------- Footer ---------- */

.site-footer {

  border-top: 1px solid var(--line);

  background: var(--bg-2);

  padding: 30px 0 26px;

  margin-top: 0;

}

.footer-grid { display: grid; gap: 22px; }

.footer-grid h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: .6em; }

.footer-grid ul { list-style: none; margin: 0; padding: 0; }

.footer-grid li { margin-bottom: 6px; font-size: .89rem; color: var(--ink-2); }

.footer-grid a { color: var(--ink-2); text-decoration: none; }

.footer-grid a:hover { color: var(--accent); text-decoration: underline; }

.footer-bottom {

  margin-top: 24px;

  padding-top: 16px;

  border-top: 1px solid var(--line-2);

  display: flex;

  flex-wrap: wrap;

  gap: 8px 16px;

  justify-content: space-between;

  font-size: .82rem;

  color: var(--ink-3);

}

.footer-bottom strong { color: var(--ink-2); font-weight: 600; }

.admin-link { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted #b6c0ca; }

.admin-link:hover { color: var(--accent); }

/* ==========================================================================

   Admin

   \\========================================================================== */

.admin-body { background: var(--bg-2); }

.admin-top {

  background: #16202b;

  color: #e8edf2;

  padding: 10px 0;

}

.admin-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.admin-top .admin-top-label { font-size: .84rem; color: #a9b6c2; }

.admin-top .admin-top-label strong { color: #fff; font-weight: 600; }

.admin-header {

  background: #fff;

  border-bottom: 1px solid var(--line);

  position: sticky;

  top: 0;

  z-index: 30;

}

.admin-header .wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  min-height: 58px;

}

.admin-tabs {

  display: flex;

  gap: 4px;

  overflow-x: auto;

  border-bottom: 1px solid var(--line);

  background: #fff;

  -webkit-overflow-scrolling: touch;

}

.admin-tabs-inner { display: flex; gap: 2px; padding: 0 8px; min-width: max-content; }

.admin-tab {

  flex: none;

  padding: 13px 14px;

  font-size: .9rem;

  color: var(--ink-3);

  text-decoration: none;

  border-bottom: 2px solid transparent;

  white-space: nowrap;

}

.admin-tab:hover { color: var(--ink); }

.admin-tab.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }

.admin-main { padding: 22px 0 60px; }

.admin-head {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 18px;

}

.admin-head h1 { font-size: 1.3rem; margin: 0; }

.admin-head p { margin: 2px 0 0; font-size: .88rem; color: var(--ink-3); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }

.stat {

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: #fff;

  padding: 14px;

  box-shadow: var(--shadow-1);

}

.stat .k { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }

.stat .v { font-size: 1.55rem; font-weight: 600; margin-top: 6px; line-height: 1.1; }

.stat .sub { font-size: .78rem; color: var(--ink-3); margin-top: 4px; }

.panel {

  border: 1px solid var(--line);

  border-radius: var(--r-lg);

  background: #fff;

  box-shadow: var(--shadow-1);

  overflow: hidden;

}

.panel + .panel { margin-top: 18px; }

.panel-head {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--line-2);

}

.panel-head h2 { font-size: 1rem; margin: 0; }

.panel-body { padding: 16px; }

.toolbar { display: grid; gap: 10px; margin-bottom: 16px; }

.toolbar-row { display: flex; flex-wrap: wrap; gap: 10px; }

.toolbar-row > * { flex: 1 1 160px; min-width: 0; }

.toolbar .grow { flex: 1 1 220px; }

/* responsive record list (replaces tables on small screens) */

.rec-list { display: grid; gap: 10px; }

.rec {

  border: 1px solid var(--line);

  border-radius: var(--r);

  background: #fff;

  padding: 13px 14px;

}

.rec.is-clickable { cursor: pointer; }

.rec.is-clickable:hover { border-color: #c3ccd6; background: #fcfdfe; }

.rec-top {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 8px 12px;

  margin-bottom: 6px;

}

.rec-ref {

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: .86rem;

  font-weight: 600;

}

.rec-title { font-weight: 600; font-size: .95rem; }

.rec-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 4px 14px;

  font-size: .85rem;

  color: var(--ink-3);

  margin: 0 0 8px;

  padding: 0;

  list-style: none;

}

.rec-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding-top: 10px;

  border-top: 1px solid var(--line-2);

}

.rec-actions .btn { flex: 1 1 auto; }

/* desktop table */

.table-wrap { display: none; width: 100%; overflow-x: auto; }

table.data {

  width: 100%;

  border-collapse: collapse;

  font-size: .875rem;

}

table.data th, table.data td {

  text-align: left;

  padding: 11px 12px;

  border-bottom: 1px solid var(--line-2);

  vertical-align: middle;

  white-space: nowrap;

}

table.data th {

  font-size: .74rem;

  text-transform: uppercase;

  letter-spacing: .06em;

  color: var(--ink-3);

  background: var(--bg-2);

  border-bottom: 1px solid var(--line);

  position: sticky;

  top: 0;

}

table.data tbody tr:hover { background: #fbfcfd; }

table.data tbody tr.is-clickable { cursor: pointer; }

table.data td.wrap { white-space: normal; min-width: 180px; }

table.data .num { text-align: right; }

.empty {

  text-align: center;

  padding: 34px 16px;

  color: var(--ink-3);

  font-size: .92rem;

}

/* drawer / detail */

.drawer-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(18, 26, 34, .5);

  z-index: 60;

  opacity: 0;

  pointer-events: none;

  transition: opacity .18s ease;

}

.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {

  position: fixed;

  z-index: 61;

  top: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  max-width: 460px;

  background: #fff;

  box-shadow: -8px 0 30px rgba(18, 26, 34, .18);

  transform: translateX(100%);

  transition: transform .22s ease;

  display: flex;

  flex-direction: column;

}

.drawer.is-open { transform: translateX(0); }

.drawer-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--line);

  position: sticky;

  top: 0;

  background: #fff;

}

.drawer-head h2 { font-size: 1rem; margin: 0; }

.drawer-head .sub { font-size: .8rem; color: var(--ink-3); margin-top: 2px; }

.drawer-body { padding: 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }

.drawer-foot {

  padding: 12px 16px;

  border-top: 1px solid var(--line);

  background: #fcfdfe;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}

.close-x {

  flex: none;

  width: 40px; height: 40px;

  border: 1px solid var(--line);

  background: #fff;

  border-radius: var(--r);

  font-size: 1.1rem;

  line-height: 1;

  color: var(--ink-2);

  cursor: pointer;

}

.detail-list { margin: 0; padding: 0; list-style: none; }

.detail-list li {

  display: flex;

  justify-content: space-between;

  gap: 14px;

  padding: 9px 0;

  border-bottom: 1px solid var(--line-2);

  font-size: .89rem;

}

.detail-list li:last-child { border-bottom: 0; }

.detail-list .k { color: var(--ink-3); flex: none; }

.detail-list .v { text-align: right; font-weight: 500; word-break: break-word; }

.detail-list .v.multiline { white-space: pre-wrap; text-align: right; font-weight: 400; }

.subhead {

  font-size: .76rem;

  text-transform: uppercase;

  letter-spacing: .07em;

  color: var(--ink-3);

  font-weight: 700;

  margin: 20px 0 6px;

  padding-top: 14px;

  border-top: 1px solid var(--line-2);

}

.subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.rule-list { list-style: none; margin: 0 0 12px; padding: 0; }

.rule-list li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 9px 0;

  border-bottom: 1px solid var(--line-2);

  font-size: .89rem;

}

.rule-list li:last-child { border-bottom: 0; }

.inline-form {

  border: 1px solid var(--line);

  border-radius: var(--r);

  background: var(--bg-2);

  padding: 14px;

  margin-bottom: 14px;

}

.inline-form h4 { margin-bottom: 12px; }

.sub-item {

  border: 1px solid var(--line-2);

  border-radius: var(--r);

  padding: 10px 12px;

  margin-bottom: 8px;

  background: #fcfdfe;

}

.sub-item .grid-2 { gap: 10px; }

.sub-item-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 8px;

  font-size: .82rem;

  color: var(--ink-3);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .05em;

}

.check-row {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: .9rem;

  padding: 6px 0;

}

.check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

.toggle-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding: 12px 0;

  border-bottom: 1px solid var(--line-2);

}

.toggle-row:last-child { border-bottom: 0; }

.toggle-row .t-label { font-size: .9rem; font-weight: 500; }

.toggle-row .t-sub { font-size: .8rem; color: var(--ink-3); margin-top: 2px; }

.switch { position: relative; display: inline-block; flex: none; width: 46px; height: 28px; }

.switch input { opacity: 0; width: 0; height: 0; }

.switch .slider {

  position: absolute;

  inset: 0;

  background: #c3ccd6;

  border-radius: 14px;

  transition: background-color .15s ease;

  cursor: pointer;

}

.switch .slider::before {

  content: "";

  position: absolute;

  height: 22px; width: 22px;

  left: 3px; top: 3px;

  background: #fff;

  border-radius: 50%;

  transition: transform .15s ease;

  box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.switch input:checked + .slider { background: var(--ok); }

.switch input:checked + .slider::before { transform: translateX(18px); }

.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(47,122,176,.3); }

.toast {

  position: fixed;

  left: 50%;

  bottom: 18px;

  transform: translateX(-50%) translateY(12px);

  background: #16202b;

  color: #fff;

  font-size: .88rem;

  padding: 11px 18px;

  border-radius: var(--r);

  box-shadow: var(--shadow-2);

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease;

  z-index: 90;

  max-width: calc(100vw - 32px);

  text-align: center;

}

.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.day-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.day-pill {

  min-height: 40px;

  padding: 8px 13px;

  border: 1px solid var(--line);

  background: #fff;

  border-radius: var(--r);

  font: inherit;

  font-size: .88rem;

  color: var(--ink-2);

  cursor: pointer;

}

.day-pill.is-on { background: var(--accent-soft); border-color: #c6dcea; color: var(--accent-dark); font-weight: 600; }

.prose-block { font-size: .92rem; color: var(--ink-2); }

.prose-block h3 { font-size: .95rem; color: var(--ink); margin-bottom: .4em; }

/* ---------- Breakpoints ---------- */

@media (min-width: 560px) {

  h1 { font-size: 1.9rem; }

  h2 { font-size: 1.45rem; }

  .grid-2 { grid-template-columns: 1fr 1fr; }

  .slot-grid { grid-template-columns: repeat(3, 1fr); }

  .info-grid { grid-template-columns: 1fr 1fr; }

  .estat-grid { grid-template-columns: repeat(2, 1fr); }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  .filters { grid-template-columns: 1fr; }

  .offering-list { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .cta-band { grid-template-columns: 1fr auto; align-items: center; }

  .rec-actions .btn { flex: 0 0 auto; }

}

@media (min-width: 760px) {

  .wrap { padding: 0 24px; }

  .section { padding: 56px 0; }

  .hero { padding: 56px 0 48px; }

  .nav-toggle { display: none; }

  .site-nav {

    display: flex !important;

    align-items: center;

    gap: 4px;

    border-top: 0;

    padding: 0;

  }

  .site-nav a {

    padding: 9px 12px;

    border-bottom: 0;

    border-radius: var(--r);

    font-size: .9rem;

  }

  .site-nav a:hover { background: var(--bg-2); }

  .site-nav a[aria-current="page"] { background: var(--accent-soft); }

  .site-nav .nav-cta { margin: 0 0 0 6px; }

  .hero-inner { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }

  .hero-card { margin-top: 4px; }

  .book-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }

  .summary-card { position: sticky; top: 78px; }

  .info-grid { grid-template-columns: repeat(3, 1fr); }

  .steps { grid-template-columns: 1fr; gap: 20px; }

  .slot-grid { grid-template-columns: repeat(4, 1fr); }

  .rec-list { display: none; }

  .table-wrap { display: block; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }

  .cta-band { padding: 28px 30px; }

  .stat-grid { grid-template-columns: repeat(4, 1fr); }

  .toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

  .card-body { padding: 22px; }

  .offering-top { padding: 18px 18px 0; }

  .offering-body { padding: 12px 18px 18px; }

}

@media (min-width: 980px) {

  h1 { font-size: 2.1rem; }

  h2 { font-size: 1.6rem; }

  .offering-list { grid-template-columns: repeat(3, 1fr); }

  .hero-inner { grid-template-columns: 1fr 380px; gap: 56px; }

  .book-layout { grid-template-columns: minmax(0, 1fr) 340px; }

}

@media (min-width: 1200px) {

  .hero { padding: 64px 0 56px; }

}

/* 320px safety */

@media (max-width: 340px) {

  .wrap { padding: 0 13px; }

  h1 { font-size: 1.5rem; }

  .brand-sub { display: none; }

  .stat .v { font-size: 1.35rem; }

  .flow-nav { flex-wrap: wrap; }

  .flow-nav .btn { flex: 1 1 100%; }

  .flow-nav .spacer { display: none; }

  .drawer { max-width: 100%; }

}

@media (prefers-reduced-motion: reduce) {

  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }

}

/* ==========================================================================

   TCL warm-neutral visual refresh

   \\========================================================================== */

:root {

  --ink: #2d2926;

  --ink-2: #5a514b;

  --ink-3: #81766e;

  --line: #ded7cf;

  --line-2: #eee9e3;

  --bg: #fffdf9;

  --bg-2: #f7f3ed;

  --bg-3: #ece4da;

  --accent: #755b48;

  --accent-dark: #5d4636;

  --accent-soft: #eee5dc;

  --focus: #8a6b55;

  --r-sm: 5px;

  --r: 8px;

  --r-lg: 10px;

  --shadow-1: 0 1px 2px rgba(53,43,35,.05), 0 5px 16px rgba(53,43,35,.035);

  --shadow-2: 0 10px 30px rgba(53,43,35,.12);

}

body { background: var(--bg); }

a { color: var(--accent); }

.btn { background:#fffdf9; border-color:var(--line); font-weight:600; }

.btn:hover { background:#f7f3ed; border-color:#cfc4b9; }

.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }

.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }

.btn-quiet:hover { background:var(--accent-soft); }

input:focus, select:focus, textarea:focus { border-color:var(--focus); box-shadow:0 0 0 3px rgba(138,107,85,.14); }

.site-header { background:rgba(255,253,249,.97); backdrop-filter:none; border-bottom-color:var(--line-2); }

.header-inner { min-height:68px; }

.brand-mark { background:var(--accent-dark); border-radius:6px; }

.brand-name { font-weight:700; color:var(--ink); }

.brand-sub { color:var(--ink-3); }

.site-nav a { color:var(--ink-2); }

.site-nav a[aria-current="page"] { color:var(--accent-dark); }

.eyebrow { color:var(--accent); letter-spacing:.11em; }

.hero { background:#fbf7f1; border-bottom-color:var(--line-2); }

.hero h1 { color:var(--ink); letter-spacing:-.025em; }

.hero-lead { color:var(--ink-2); }

.hero-points li::before { width:6px; height:6px; border-radius:50%; background:var(--accent); top:.58em; }

.hero-card { background:#fffdf9; border-color:#d8cec4; box-shadow:0 12px 30px rgba(69,54,43,.07); padding:22px; }

.hero-card dl { gap:0; }

.hero-card dl > div { padding:12px 0; border-bottom:1px solid var(--line-2); }

.hero-card dl > div:last-child { border-bottom:0; padding-bottom:0; }

.hero-card dt { color:var(--ink-3); }

.hero-card dd { color:var(--ink); font-weight:600; }

.section-alt { background:#f7f3ed; border-color:var(--line-2); }

.card,.offering,.info-card,.panel,.stat { border-color:var(--line); box-shadow:var(--shadow-1); }

.offering { background:#fffdf9; }

.offering:hover { border-color:#cfc4b9; }

.thumb { background-color:#e8dfd5; filter:saturate(.35) sepia(.16); }

.thumb::after { background:rgba(45,41,38,.58); left:0; bottom:0; right:0; padding:9px 12px; text-shadow:none; }

.offering .offering-cat { color:var(--accent); }

.offering-foot { border-top-color:var(--line-2); }

.info-card { background:#fffdf9; }

.steps .n { border-color:#d7c7b8; background:var(--accent-soft); color:var(--accent-dark); }

.cta-band { background:#eee5dc; border-color:#d8cec4; padding:26px 22px; }

.choice:hover { border-color:#cfc4b9; background:#fffaf4; }

.choice.is-selected { border-color:var(--accent); background:var(--accent-soft); }

.cal-day:not(.is-empty):not(.is-off):hover { background:var(--accent-soft); }

.cal-day.is-selected,.slot.is-selected { background:var(--accent); border-color:var(--accent); }

.notice { border-color:#d7c7b8; background:var(--accent-soft); color:var(--accent-dark); }

.site-footer { background:#f2ece5; border-top-color:#ddd3ca; }

.footer-grid h4 { color:var(--ink); }

.admin-body { background:#f5f1eb; }

.admin-top { background:#332b26; color:#f4eee8; }

.admin-top .admin-top-label { color:#cdbfb3; }

.admin-header,.admin-tabs { background:#fffdf9; }

.admin-tab.is-active { color:var(--accent-dark); border-bottom-color:var(--accent); }

.rec.is-clickable:hover { border-color:#cfc4b9; background:#fffaf4; }

table.data th { background:#f7f3ed; }

table.data tbody tr:hover { background:#fcf8f3; }

.inline-form { background:#f7f3ed; }

.sub-item { background:#fcf8f3; }

.toast { background:#332b26; }

.day-pill.is-on { background:var(--accent-soft); border-color:#d7c7b8; color:var(--accent-dark); }

@media (min-width:760px) {

  .site-nav a:hover { background:#f5efe8; }

  .site-nav a[aria-current="page"] { background:var(--accent-soft); }

  .hero-inner { align-items:center; }

}

@media (min-width:980px) {

  body[data-page="home"] .hero h1 { font-size:2.45rem; max-width:15ch; }

  body[data-page="home"] .hero { padding:72px 0 68px; }

}

@media (max-width:759px) {

  .site-nav { background:#fffdf9; }

  .hero-card { margin-top:28px; }

  .footer-grid,.footer-bottom { text-align:center; }

  .footer-bottom { justify-content:center; }

}

/* ---------- Primary action contrast fix ---------- */

.site-nav a.nav-cta,

.site-nav a.nav-cta:visited,

a.btn-primary,

a.btn-primary:visited,

button.btn-primary,

input.btn-primary {

  color: #fff;

}

.site-nav a.nav-cta:hover,

.site-nav a.nav-cta:focus-visible,

a.btn-primary:hover,

a.btn-primary:focus-visible,

button.btn-primary:hover,

button.btn-primary:focus-visible {

  color: #fff;

}

/* ==========================================================================

   Final navigation CTA contrast fix

   Normal: brown + white

   Hover/focus-visible: light warm background + dark brown

   \\========================================================================== */

.site-nav .nav-cta {

  background: var(--accent);

  border-color: var(--accent);

  color: #fff;

}

.site-nav .nav-cta:hover,

.site-nav .nav-cta:focus-visible {

  background: var(--accent-soft);

  border-color: var(--accent);

  color: var(--accent-dark);

}

/* ==========================================================================

   BOOK NOW — final desktop/mobile hover override

   This intentionally wins over generic nav-link and primary-button rules.

   \\========================================================================== */

.site-nav a.nav-cta.btn-primary,

.site-nav a.nav-cta.btn-primary:visited {

  background: #755b48 !important;

  border-color: #755b48 !important;

  color: #ffffff !important;

}

.site-nav a.nav-cta.btn-primary:hover,

.site-nav a.nav-cta.btn-primary:focus,

.site-nav a.nav-cta.btn-primary:focus-visible {

  background: #eee5dc !important;

  border-color: #755b48 !important;

  color: #2f2925 !important;

}

/* ==========================================================================

   ADMIN — Services / Rentals cleanup

   Compact, practical management cards without changing JS behavior.

   \\========================================================================== */

body[data-admin-page="offerings"] .admin-main {

  padding-top: 30px;

}

body[data-admin-page="offerings"] .admin-head {

  margin-bottom: 22px;

}

body[data-admin-page="offerings"] .admin-head h1 {

  margin-bottom: 5px;

}

body[data-admin-page="offerings"] .offering-list {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}

body[data-admin-page="offerings"] .offering-list > .card {

  margin: 0;

  min-width: 0;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: var(--bg);

  box-shadow: 0 3px 12px rgba(47, 41, 37, 0.05);

}

body[data-admin-page="offerings"] .offering-list > .card .card-body {

  padding: 20px;

}

body[data-admin-page="offerings"] .offering-list .card-head {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: start;

  gap: 16px;

  margin-bottom: 14px;

}

body[data-admin-page="offerings"] .offering-list .offering-cat {

  margin-bottom: 5px;

  color: var(--ink-3);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}

body[data-admin-page="offerings"] .offering-list h3 {

  margin: 0;

  font-size: 1.05rem;

  line-height: 1.3;

}

body[data-admin-page="offerings"] .offering-list .price {

  white-space: nowrap;

  color: var(--ink);

  font-size: 0.95rem;

  font-weight: 700;

}

body[data-admin-page="offerings"] .offering-list .meta-row {

  margin: 0 0 16px;

  padding: 12px 0;

  border-top: 1px solid var(--line-2);

  border-bottom: 1px solid var(--line-2);

}

body[data-admin-page="offerings"] .offering-list .btn-row {

  gap: 8px;

}

body[data-admin-page="offerings"] .offering-list .btn {

  min-height: 38px;

  padding: 8px 12px;

}

body[data-admin-page="offerings"] [data-editor] {

  margin-bottom: 20px;

}

@media (max-width: 759px) {

  body[data-admin-page="offerings"] .admin-main {

    padding-top: 22px;

  }

  body[data-admin-page="offerings"] .offering-list {

    grid-template-columns: 1fr;

    gap: 12px;

  }

  body[data-admin-page="offerings"] .offering-list > .card .card-body {

    padding: 16px;

  }

  body[data-admin-page="offerings"] .offering-list .card-head {

    grid-template-columns: 1fr;

    gap: 6px;

  }

  body[data-admin-page="offerings"] .offering-list .price {

    white-space: normal;

  }

  body[data-admin-page="offerings"] .offering-list .btn-row {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

  body[data-admin-page="offerings"] .offering-list .btn {

    width: 100%;

    padding-left: 8px;

    padding-right: 8px;

  }

}

@media (max-width: 380px) {

  body[data-admin-page="offerings"] .offering-list .btn-row {

    grid-template-columns: 1fr 1fr;

  }

  body[data-admin-page="offerings"] .offering-list .btn-row > :last-child {

    grid-column: 1 / -1;

  }

}

/* ==========================================================================

   ADMIN — Availability cleanup

   Compact scheduling UI; preserves all availability behavior.

   \\========================================================================== */

body[data-admin-page="availability"] .admin-main {

  max-width: 1120px;

  padding-top: 28px;

  padding-bottom: 48px;

}

body[data-admin-page="availability"] .admin-head {

  margin-bottom: 18px;

}

body[data-admin-page="availability"] .panel {

  border-radius: 12px;

  box-shadow: 0 3px 12px rgba(47, 41, 37, 0.045);

  margin-bottom: 14px;

}

body[data-admin-page="availability"] .panel-head {

  padding: 16px 18px 12px;

}

body[data-admin-page="availability"] .panel-head h2 {

  font-size: 1rem;

}

body[data-admin-page="availability"] .panel-body {

  padding: 16px 18px 18px;

}

/* Service selector becomes a compact toolbar instead of a giant card control. */

body[data-admin-page="availability"] [data-availability-offering] {

  width: 100%;

  max-width: 440px;

  min-height: 44px;

}

/* Opening-hours rows */

body[data-admin-page="availability"] [data-hours-editor] .rule-list > li,

body[data-admin-page="availability"] [data-hours-editor] li {

  min-height: 58px;

  padding: 8px 0 !important;

  align-items: center;

}

body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {

  width: 118px;

  min-height: 40px;

  padding: 7px 9px;

}

body[data-admin-page="availability"] [data-hours-editor] .check-row {

  min-width: 72px;

  justify-content: flex-start;

}

/* Make the lower settings easier to scan. */

body[data-admin-page="availability"] [data-general-avail] .grid-2 {

  gap: 14px;

}

body[data-admin-page="availability"] .field {

  margin-bottom: 12px;

}

body[data-admin-page="availability"] .slot-grid {

  gap: 8px;

}

body[data-admin-page="availability"] .slot {

  min-height: 54px;

  border-radius: 9px;

}

/* Desktop: opening hours are intentionally compact and aligned. */

@media (min-width: 760px) {

  body[data-admin-page="availability"] [data-hours-editor] .rule-list > li,

  body[data-admin-page="availability"] [data-hours-editor] li {

    display: grid !important;

    grid-template-columns: minmax(130px, 1fr) auto;

  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {

    display: grid !important;

    grid-template-columns: 118px 22px 118px 78px;

    align-items: center;

    gap: 8px !important;

  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child > .small.muted {

    text-align: center;

  }

}

/* Mobile: each day becomes a tidy stacked row with full usable controls. */

@media (max-width: 759px) {

  body[data-admin-page="availability"] .admin-main {

    padding-top: 20px;

  }

  body[data-admin-page="availability"] .panel-head,

  body[data-admin-page="availability"] .panel-body {

    padding-left: 15px;

    padding-right: 15px;

  }

  body[data-admin-page="availability"] [data-availability-offering] {

    max-width: none;

  }

  body[data-admin-page="availability"] [data-hours-editor] li {

    display: block !important;

    padding: 14px 0 !important;

  }

  body[data-admin-page="availability"] [data-hours-editor] li > span:first-child {

    display: block;

    margin-bottom: 9px;

    font-weight: 700;

  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);

    gap: 7px !important;

    width: 100%;

  }

  body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {

    width: 100%;

    max-width: none !important;

  }

  body[data-admin-page="availability"] [data-hours-editor] .check-row {

    grid-column: 1 / -1;

    margin-top: 3px;

  }

}

/* ==========================================================================

   ADMIN AVAILABILITY — centered layout + wider time controls

   \\========================================================================== */

body[data-admin-page="availability"] .admin-main {

  width: min(100% - 32px, 1030px);

  margin-left: auto !important;

  margin-right: auto !important;

}

body[data-admin-page="availability"] .admin-head {

  width: 100%;

}

body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {

  width: 132px !important;

  max-width: 132px !important;

  min-width: 132px;

  padding-left: 11px;

  padding-right: 8px;

}

@media (min-width: 760px) {

  body[data-admin-page="availability"] [data-hours-editor] .rule-list > li,

  body[data-admin-page="availability"] [data-hours-editor] li {

    grid-template-columns: minmax(150px, 1fr) auto;

  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {

    grid-template-columns: 132px 24px 132px 82px !important;

    justify-content: end;

  }

}

@media (max-width: 759px) {

  body[data-admin-page="availability"] .admin-main {

    width: min(100% - 24px, 1030px);

  }

  body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {

    width: 100% !important;

    max-width: none !important;

    min-width: 0;

  }

}

/* ==========================================================================

   ADMIN HEADER — clean single nav + stacked brand tagline

   \\========================================================================== */

/* Business name and tagline stack instead of sitting on one line. */

.admin-brand,

.site-brand {

  align-items: center;

}

.admin-brand > div,

.site-brand > div,

.admin-brand .brand-copy,

.site-brand .brand-copy {

  min-width: 0;

}

.admin-brand [data-brand-name],

.site-brand [data-brand-name] {

  display: block;

  line-height: 1.2;

}

.admin-brand .small,

.admin-brand .muted,

.site-brand .small,

.site-brand .muted {

  display: block;

  margin-top: 3px;

  line-height: 1.25;

}

/* Admin header/nav spacing */

.admin-header .container,

.admin-topbar .container {

  align-items: center;

}

.admin-tabs {

  width: 100%;

}

.admin-tabs .container,

.admin-tabs-inner {

  display: flex;

  justify-content: center;

  gap: 6px;

}

.admin-tabs a {

  padding-left: 18px;

  padding-right: 18px;

  white-space: nowrap;

}

/* Mobile: keep the single admin nav usable without squeezing labels. */

@media (max-width: 759px) {

  .admin-brand [data-brand-name],

  .site-brand [data-brand-name] {

    font-size: 0.95rem;

  }

  .admin-brand .small,

  .admin-brand .muted,

  .site-brand .small,

  .site-brand .muted {

    font-size: 0.72rem;

  }

  .admin-tabs {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .admin-tabs::-webkit-scrollbar {

    display: none;

  }

  .admin-tabs .container,

  .admin-tabs-inner {

    width: max-content;

    min-width: 100%;

    justify-content: flex-start;

  }

  .admin-tabs a {

    flex: 0 0 auto;

    padding-left: 14px;

    padding-right: 14px;

  }

}

/* Explicit Admin brand stack */

.admin-brand-copy {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center;

  gap: 2px;

  min-width: 0;

}

.admin-brand-copy [data-brand-name],

.admin-brand-copy [data-biz-name] {

  display: block !important;

  margin: 0 !important;

}

.admin-brand-copy .small,

.admin-brand-copy .muted {

  display: block !important;

  margin: 0 !important;

}

/* ==========================================================================

   BRAND NAME + TAGLINE — FINAL

   Applies to customer homepage/header AND Admin header.

   Force the text immediately following the brand name onto its own line.

   \\========================================================================== */

.site-brand,

.admin-brand {

  display: flex !important;

  align-items: center !important;

}

/* Covers the existing markup even when there is no wrapper around the text. */

.site-brand [data-brand-name],

.site-brand [data-biz-name],

.admin-brand [data-brand-name],

.admin-brand [data-biz-name] {

  display: block !important;

}

.site-brand [data-brand-name] + *,

.site-brand [data-biz-name] + *,

.admin-brand [data-brand-name] + *,

.admin-brand [data-biz-name] + * {

  display: block !important;

  width: 100% !important;

  margin-top: 3px !important;

}

/* If the name/tagline are inside a text wrapper, stack that wrapper too. */

.site-brand > span:not(.brand-mark):not(.logo-mark),

.site-brand > div,

.admin-brand > span:not(.brand-mark):not(.logo-mark),

.admin-brand > div,

.admin-brand-copy,

.brand-copy {

  flex-direction: column !important;

  align-items: flex-start !important;

}

/* Explicitly stack common brand text wrappers. */

.site-brand .brand-copy,

.admin-brand .brand-copy,

.admin-brand-copy {

  display: flex !important;

}

/* Customer header fallback: if the brand itself contains only text siblings,

   allow wrapping after the business name rather than keeping one inline row. */

.site-brand {

  flex-wrap: wrap;

}

.site-brand > [data-brand-name],

.site-brand > [data-biz-name] {

  flex-basis: auto;

}

.site-brand > [data-brand-name] + *,

.site-brand > [data-biz-name] + * {

  flex-basis: 100%;

  margin-left: 0 !important;

}

/* Admin brand uses the same vertical treatment. */

.admin-brand {

  flex-wrap: wrap;

}

.admin-brand > [data-brand-name],

.admin-brand > [data-biz-name] {

  flex-basis: auto;

}

.admin-brand > [data-brand-name] + *,

.admin-brand > [data-biz-name] + * {

  flex-basis: 100%;

  margin-left: 0 !important;

}

/* ==========================================================================

   CUSTOMER HEADER — business name + tagline stack

   Only affects the existing .brand-text wrapper.

   \========================================================================== */

.site-header .brand .brand-text {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center !important;

  gap: 2px !important;

  min-width: 0;

}

.site-header .brand .brand-text .brand-name,

.site-header .brand .brand-text .brand-sub {

  display: block !important;

  width: 100%;

  margin: 0 !important;

}

.site-header .brand .brand-text .brand-sub {

  margin-top: 1px !important;

}

/* ==========================================================================

   ADMIN HEADER — business name + tagline stack

   Matches the actual admin markup:

   .admin-header .brand > .brand-text > .brand-name + .brand-sub

   \========================================================================== */

.admin-header .brand .brand-text {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center !important;

  gap: 2px !important;

  min-width: 0;

}

.admin-header .brand .brand-text .brand-name,

.admin-header .brand .brand-text .brand-sub {

  display: block !important;

  width: 100%;

  margin: 0 !important;

}

.admin-header .brand .brand-text .brand-sub {

  margin-top: 1px !important;

}

/* ==========================================================================
   MOBILE CUSTOMER + ADMIN LAYOUT FIXES — FINAL
   ========================================================================== */

@media (max-width: 759px) {

  /* ---------- Customer header / navigation ---------- */
  .site-header .wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-header .header-inner {
    min-height: 64px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
  }

  .site-header .brand {
    flex: 1 1 0;
    min-width: 0;
  }

  .site-header .brand-mark {
    width: 34px;
    height: 34px;
  }

  .site-header .brand-text {
    min-width: 0;
    max-width: calc(100vw - 125px);
  }

  .site-header .brand-name {
    font-size: .91rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .brand-sub {
    font-size: .67rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .nav-toggle {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 7px 10px;
    border-radius: 7px;
  }

  .site-header .site-nav {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 8px 0 12px;
    border-top: 1px solid var(--line-2);
  }

  .site-header .site-nav a {
    width: 100%;
    padding: 11px 4px;
    border-bottom: 1px solid var(--line-2);
  }

  .site-header .site-nav .nav-cta {
    display: flex;
    width: 100%;
    margin-top: 10px;
    border-bottom: 0;
  }

  /* ---------- Homepage hero ---------- */
  body[data-page="home"] .hero {
    padding: 28px 0 24px;
  }

  body[data-page="home"] .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body[data-page="home"] .hero-copy {
    min-width: 0;
  }

  body[data-page="home"] .hero .eyebrow {
    margin-bottom: 9px;
    font-size: .69rem;
    letter-spacing: .08em;
  }

  body[data-page="home"] .hero h1 {
    max-width: 11ch;
    margin-bottom: 10px;
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: -.035em;
  }

  body[data-page="home"] .hero-lead {
    max-width: none;
    margin-bottom: 18px;
    font-size: .96rem;
    line-height: 1.55;
  }

  body[data-page="home"] .hero-copy > .btn-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body[data-page="home"] .hero-copy > .btn-row .btn {
    width: 100%;
  }

  body[data-page="home"] .hero-points {
    margin: 18px 0 0;
    gap: 9px;
  }

  body[data-page="home"] .hero-points li {
    padding-left: 20px;
    font-size: .84rem;
    line-height: 1.4;
  }

  body[data-page="home"] .hero-card {
    margin-top: 0;
    padding: 16px;
    border-radius: 10px;
    box-shadow: none;
  }

  body[data-page="home"] .hero-card h3 {
    font-size: 1.05rem;
  }

  body[data-page="home"] .hero-card dl {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid var(--line-2);
  }

  body[data-page="home"] .hero-card dl > div {
    min-width: 0;
    padding: 11px 8px 10px 0;
    border-bottom: 1px solid var(--line-2);
  }

  body[data-page="home"] .hero-card dl > div:nth-child(even) {
    padding-left: 12px;
    padding-right: 0;
    border-left: 1px solid var(--line-2);
  }

  body[data-page="home"] .hero-card dt {
    font-size: .65rem;
    line-height: 1.25;
  }

  body[data-page="home"] .hero-card dd {
    font-size: .82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* ---------- Homepage offerings: two cards per row ---------- */
  body[data-page="home"] [data-featured-list].offering-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="home"] [data-featured-list] .offering {
    min-width: 0;
    border-radius: 9px;
  }

  body[data-page="home"] [data-featured-list] .thumb {
    height: 82px;
  }

  body[data-page="home"] [data-featured-list] .thumb::after {
    left: 8px;
    bottom: 7px;
    font-size: .58rem;
  }

  body[data-page="home"] [data-featured-list] .offering-body {
    padding: 9px 10px 10px;
  }

  body[data-page="home"] [data-featured-list] .offering-cat {
    font-size: .58rem;
  }

  body[data-page="home"] [data-featured-list] .offering h3 {
    font-size: .86rem;
    line-height: 1.25;
  }

  body[data-page="home"] [data-featured-list] .offering-desc {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: .75rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-page="home"] [data-featured-list] .meta-row {
    display: none;
  }

  body[data-page="home"] [data-featured-list] .offering-foot {
    gap: 6px;
    padding-top: 8px;
  }

  body[data-page="home"] [data-featured-list] .price-from {
    font-size: .6rem;
  }

  body[data-page="home"] [data-featured-list] .price {
    font-size: .82rem;
  }

  body[data-page="home"] [data-featured-list] .offering-foot .btn {
    min-height: 32px;
    padding: 5px 9px;
    font-size: .72rem;
  }

  /* ---------- Customer footer: Explore + Booking share one row ---------- */
  .site-footer {
    padding: 24px 0 20px;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  .site-footer .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .site-footer .footer-grid > div:nth-child(2) {
    grid-column: 1;
  }

  .site-footer .footer-grid > div:nth-child(3) {
    grid-column: 2;
  }

  .site-footer .footer-grid > div:nth-child(4) {
    grid-column: 1 / -1;
  }

  .site-footer .footer-grid h4 {
    margin-bottom: 7px;
  }

  .site-footer .footer-grid li {
    margin-bottom: 4px;
    font-size: .83rem;
  }

  .site-footer .footer-bottom {
    margin-top: 18px;
    padding-top: 13px;
    gap: 7px;
    font-size: .75rem;
  }

  /* ---------- Admin Bookings: Start + End date on one equal row ---------- */
  

  

  

  /* ---------- Admin Availability: compact equal time fields, no "to" ---------- */
  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {
    display: grid !important;
    grid-template-columns: 124px 124px !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child > .small.muted {
    display: none !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    min-height: 40px;
    padding: 7px 8px !important;
    font-size: .88rem;
  }

  body[data-admin-page="availability"] [data-hours-editor] .check-row {
    grid-column: 1 / -1 !important;
    margin-top: 2px;
  }
}

@media (max-width: 339px) {
  body[data-page="home"] [data-featured-list].offering-list {
    gap: 8px !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: .82rem;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ==========================================================================
   MOBILE REFINEMENTS — hero CTA + admin date/time controls
   ========================================================================== */
@media (max-width: 759px) {

  /* Homepage: keep CTAs secondary to the main hero title */
  body[data-page="home"] .hero-copy > .btn-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px !important;
  }

  body[data-page="home"] .hero-copy > .btn-row .btn {
    width: auto !important;
    min-height: 38px !important;
    padding: 7px 12px !important;
    font-size: .82rem !important;
    flex: 0 0 auto;
  }

  /* Admin Bookings: two dates, equal width, real gap, no overflow */
  

  

  

  

  /* Admin Availability: centered, equal time boxes across each hours card */
  body[data-admin-page="availability"] [data-hours-editor] li {
    min-width: 0;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: min(100%, 290px) !important;
    max-width: 290px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child > .small.muted {
    display: none !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 7px 8px !important;
    margin: 0 !important;
    text-align: center;
    font-size: .86rem !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] .check-row {
    grid-column: 1 / -1 !important;
    justify-self: center;
  }
}

/* ==========================================================================
   MOBILE FINAL SPACING + HERO CONTRAST
   ========================================================================== */
@media (max-width: 759px) {

  /* Hero: subtle warm contrast without overpowering the content */
  body[data-page="home"] .hero {
    background:
      linear-gradient(180deg, #f4eee7 0%, #faf7f3 72%, #ffffff 100%) !important;
    border-bottom: 1px solid #ded2c7 !important;
  }

  body[data-page="home"] .hero .eyebrow {
    color: #755b48 !important;
  }

  body[data-page="home"] .hero h1 {
    color: #2f2925 !important;
  }

  body[data-page="home"] .hero-card {
    background: rgba(255,255,255,.88) !important;
    border-color: #d8cbbf !important;
    box-shadow: 0 8px 24px rgba(73, 56, 43, .07) !important;
  }

  /* Bookings: make the two date fields match Search + Status exactly */
  

  

  

  /* Availability: two equal boxes with visible space between them */
  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: calc(50% - 6px) calc(50% - 6px) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] input[type="time"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    text-align: center !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] .check-row {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin-top: 8px !important;
  }
}

/* ==========================================================================
   MOBILE CORRECTION — compact admin controls + stronger homepage hero
   ========================================================================== */
@media (max-width: 759px) {

  /* HOME: make the hero headline the visual focus */
  body[data-page="home"] .hero {
    padding-top: 34px !important;
    padding-bottom: 28px !important;
    background:
      linear-gradient(145deg, #efe5db 0%, #f8f3ee 58%, #fff 100%) !important;
  }

  body[data-page="home"] .hero h1 {
    max-width: 10ch !important;
    font-size: clamp(2.65rem, 13vw, 3.35rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    margin-bottom: 14px !important;
  }

  body[data-page="home"] .hero-lead {
    font-size: 1rem !important;
    max-width: 34ch !important;
  }

  body[data-page="home"] .hero-copy > .btn-row .btn {
    min-height: 36px !important;
    padding: 6px 11px !important;
    font-size: .79rem !important;
  }

  /* BOOKINGS: copy the proportions of the Search + Status pair */
  

  

  

  /* AVAILABILITY: same compact two-column sizing as other paired controls */
  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child > input[type="time"] {
    flex: 1 1 0 !important;
    box-sizing: border-box !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    font-size: .84rem !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] .check-row {
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }
}

/* ==========================================================================
   MOBILE — compact availability time height + centered hero
   ========================================================================== */
@media (max-width: 759px) {

  /* Availability time inputs: match normal admin control height */
  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child > input[type="time"] {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  /* Homepage hero: centered mobile composition */
  body[data-page="home"] .hero-copy {
    text-align: center !important;
  }

  body[data-page="home"] .hero h1 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body[data-page="home"] .hero-lead {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body[data-page="home"] .hero-copy > .btn-row {
    justify-content: center !important;
  }

  body[data-page="home"] .hero-points {
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  body[data-page="home"] .hero .eyebrow {
    text-align: center !important;
  }
}

/* ==========================================================================
   MOBILE ADMIN — ACTUAL COMPACT CONTROL HEIGHT FIX
   ========================================================================== */
@media (max-width: 759px) {

  /* Booking date row: keep same two-column proportions as Search + Status,
     but remove inherited field spacing that was making the row huge. */
  

  

  

  

  /* Availability: the tall area is the wrapper/day row, not just the input.
     Collapse wrapper sizing and keep the actual controls at normal form height. */
  body[data-admin-page="availability"] [data-hours-editor] li {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] li > div:last-child > input[type="time"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    line-height: normal !important;
  }

  body[data-admin-page="availability"] [data-hours-editor] .check-row {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 4px 0 0 !important;
    padding: 4px 0 0 !important;
  }

  /* Keep the centered hero from the previous pass. */
  body[data-page="home"] .hero-copy,
  body[data-page="home"] .hero .eyebrow,
  body[data-page="home"] .hero h1,
  body[data-page="home"] .hero-lead {
    text-align: center !important;
  }

  body[data-page="home"] .hero h1,
  body[data-page="home"] .hero-lead {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-page="home"] .hero-copy > .btn-row {
    justify-content: center !important;
  }
}

/* ==========================================================================
   MOBILE ADMIN CONTROLS — STRUCTURE-BASED FINAL FIX
   ========================================================================== */
@media (max-width: 759px) {

  /* Bookings: exact same 2-column relationship as Search + Status */
  

  

  body[data-admin-page="bookings"] .booking-filter-reset {
    margin-top: 10px !important;
  }

  body[data-admin-page="bookings"] .booking-filter-reset .btn {
    width: calc(50% - 5px) !important;
    min-height: 40px !important;
  }

  /* Availability: direct classes from admin.js; no inline width/flex conflicts */
  body[data-admin-page="availability"] .hours-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  body[data-admin-page="availability"] .hours-fields .hours-time {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    line-height: 32px !important;
    font-size: .84rem !important;
    text-align: center !important;
  }

  body[data-admin-page="availability"] .hours-fields .hours-closed {
    grid-column: 1 / -1 !important;
    display: flex !important;
    width: fit-content !important;
    min-height: 32px !important;
    margin: 2px auto 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   MOBILE DATE CONTROLS — FINAL AUTHORITATIVE FIX
   ========================================================================== */
@media (max-width: 759px) {

  /* All admin date controls stay the same compact height as other form fields. */
  body[data-admin-page] input[type="date"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    line-height: normal !important;
  }

  /* Bookings: Start Date + End Date are exactly two equal columns. */
  

  

  

  

  /* Clear Filters is a separate row below the date pair. */
  body[data-admin-page="bookings"] .booking-filter-reset {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }

  body[data-admin-page="bookings"] .booking-filter-reset .btn {
    display: inline-flex !important;
    width: calc(50% - 5px) !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  /* Availability date fields use normal compact form sizing too. */
  body[data-admin-page="availability"] #block-date,
  body[data-admin-page="availability"] #slot-date,
  body[data-admin-page="availability"] input[type="date"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   MOBILE ADMIN — DIMENSION-ONLY OVERRIDE (deterministic; wins the cascade)
   Higher specificity than the earlier equal-specificity !important blocks.
   Box size only — no colors, spacing, layout, fonts, or desktop rules.
   Includes the native-control appearance reset so the set height actually
   takes effect on iOS for the date inputs (as it already does for time).
   ========================================================================== */
@media (max-width: 759px) {

  /* ---- BOOKINGS: Start Date + End Date — copy the Search/Status proportions ----
     Reference pair: search + status each ~50% wide, compact control height,
     one row, no overflow. sr-only labels are taken out of flow. */
  body.admin-body[data-admin-page="bookings"] .toolbar-row:has(input[type="date"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  body.admin-body[data-admin-page="bookings"] .toolbar-row:has(input[type="date"]) .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  body.admin-body[data-admin-page="bookings"] .toolbar-row:has(input[type="date"]) input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    line-height: 28px !important;
    font-size: .88rem !important;
  }

  /* ---- AVAILABILITY: Opening / Closing time — equal width, compact height ----
     Matches the reference control height; stays inside the card. */
  body.admin-body[data-admin-page="availability"] .hours-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
  }

  body.admin-body[data-admin-page="availability"] .hours-fields .hours-time {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    line-height: 28px !important;
    font-size: .88rem !important;
    text-align: center !important;
  }

  /* ---- AVAILABILITY: Unavailable Date + Time-slot Choose-a-date ----
     Compact control height; width 100% of the available column;
     box-sizing: border-box; min-width 0; never horizontally overflows.
     appearance reset lets the explicit height win over iOS native sizing. */
  body.admin-body[data-admin-page="availability"] #block-date,
  body.admin-body[data-admin-page="availability"] #slot-date,
  body.admin-body[data-admin-page="availability"] input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    line-height: 28px !important;
    font-size: .88rem !important;
  }
}