/* Public booking site. Colours, fonts and radius come from the business theme as the shared
   CSS variables (--color-*, --font-*, --radius), set on <body> by business-theme.js. The owner
   panel uses the fixed platform tokens (--p-*) from platform.css instead. */

.bs {
  background: var(--color-background, #ffffff);
  color: var(--color-foreground, #111827);
  font: 16px/1.55 var(--font-sans, Inter, Helvetica Neue, Arial, sans-serif);
  color-scheme: var(--color-mode, light);
}
.bs a { color: inherit; }
.bs :focus-visible { outline: 2px solid var(--color-primary, #0b2545); outline-offset: 2px; }
.bs code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .9em; }
.bs-skip { position: absolute; left: -9999px; top: 12px; z-index: 30; padding: 8px 12px; background: var(--color-surface); border-radius: var(--radius); }
.bs-skip:focus { left: 12px; }

/* ---- Frame: content and a large side picture ---------------------------------------------- */
.bs-site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44vw); min-height: 100vh; min-height: 100dvh; }
.bs-site.no-side { grid-template-columns: minmax(0, 1fr); }
.bs-content { display: flex; flex-direction: column; min-width: 0; padding: 0 clamp(20px, 5vw, 72px); }
.bs-content > * { width: 100%; max-width: 760px; margin-inline: auto; }
.bs-side { position: sticky; top: 0; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; background: var(--color-muted, #f3f4f6); }
.bs-side img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bs-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.bs-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; text-decoration: none; }
.bs-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-mark { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: var(--radius); background: var(--color-primary); color: var(--color-primary-foreground); font: 700 14px/1 var(--font-display); letter-spacing: .02em; }
.bs-nav { display: flex; gap: 22px; font-size: 14px; }
.bs-nav a { color: var(--color-muted-foreground); text-decoration: none; white-space: nowrap; }
.bs-nav a:hover { color: var(--color-foreground); }
.bs-main { flex: 1; }
.bs-loading { color: var(--color-muted-foreground); }

/* ---- Hero ------------------------------------------------------------------------------------ */
.bs-hero { padding: clamp(24px, 8vh, 88px) 0 44px; }
.bs-hero-compact { padding-bottom: 20px; }
.bs-eyebrow { margin: 0 0 12px; color: var(--color-accent); font: 600 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.bs-title { margin: 0; font: 600 clamp(40px, 6.2vw, 76px)/1.02 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.bs-tagline { max-width: 36ch; margin: 18px 0 0; color: var(--color-muted-foreground); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; }
.bs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 44px 0 0; border-block: 1px solid var(--color-border); }
.bs-facts > div { min-width: 0; padding: 16px 16px 16px 0; }
.bs-facts > div + div { padding-left: 16px; border-left: 1px solid var(--color-border); }
.bs-facts dt { color: var(--color-muted-foreground); font-size: 12px; }
.bs-facts dd { margin: 4px 0 0; font: 600 20px/1.2 var(--font-display); white-space: nowrap; }

/* ---- Buttons ---------------------------------------------------------------------------------- */
.bs-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--color-primary); border-radius: var(--radius); background: var(--color-primary); color: var(--color-primary-foreground); font: 600 15px/1.2 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; transition: filter .15s ease, background .15s ease; }
.bs a.bs-button { color: var(--color-primary-foreground); }
.bs-button:hover { filter: brightness(.93); }
.bs-button:disabled { cursor: not-allowed; opacity: .45; filter: none; }
.bs-button-ghost, .bs a.bs-button-ghost { background: transparent; color: var(--color-primary); }
.bs-button-ghost:hover { background: var(--color-muted); filter: none; }
.bs-wide { width: 100%; }
.bs-link-button { padding: 8px 0; border: 0; background: none; color: var(--color-muted-foreground); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.bs-link-button:hover { color: var(--color-foreground); }

/* ---- Sections and offerings ------------------------------------------------------------------- */
.bs-section { padding: 52px 0; border-top: 1px solid var(--color-border); scroll-margin-top: 12px; }
.bs-section-head h2 { margin: 0; font: 600 clamp(26px, 3vw, 36px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.bs-section-head p { margin: 8px 0 0; color: var(--color-muted-foreground); }
.bs-muted { margin: 8px 0 0; color: var(--color-muted-foreground); }
.bs-fine { margin: 10px 0 0; color: var(--color-muted-foreground); font-size: 13px; }
.bs-hours { margin-top: 20px; }
.bs-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.bs-offers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-offer { padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.bs-offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bs-offer h3 { margin: 0; font: 600 20px/1.25 var(--font-display); }
.bs-price { margin: 0; font: 600 22px/1 var(--font-display); white-space: nowrap; }
.bs-price small { color: var(--color-muted-foreground); font-size: 14px; font-weight: 500; }
.bs-list { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.bs-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 15px; }
.bs-list b { font-family: var(--font-mono); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- Booking steps ---------------------------------------------------------------------------- */
.bs-book [data-booking] { margin-top: 28px; }
.bs-steps { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.bs-step { min-width: 0; }
.bs-step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; font: 600 18px/1.3 var(--font-sans); }
.bs-step-title small { flex-basis: 100%; margin-left: 40px; color: var(--color-muted-foreground); font-size: 14px; font-weight: 400; }
.bs-step-no { display: inline-grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-foreground); color: var(--color-background); font-size: 13px; }

.bs-days { display: flex; gap: 8px; margin: 0 -4px; padding: 2px 4px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bs-day { display: flex; flex: 0 0 74px; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; scroll-snap-align: start; }
.bs-day strong { font: 600 22px/1.1 var(--font-display); }
.bs-day small { color: var(--color-muted-foreground); font-size: 11px; white-space: nowrap; }
.bs-day:hover:not(:disabled) { border-color: var(--color-primary); }
.bs-day[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); }
.bs-day[aria-pressed="true"] small { color: inherit; }
.bs-day:disabled { cursor: not-allowed; opacity: .45; }

.bs-slots { display: grid; gap: 8px; }
.bs-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; text-align: left; }
.bs-slot time { font: 600 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bs-slot span { display: flex; flex-direction: column; min-width: 0; }
.bs-slot small { color: var(--color-muted-foreground); font-size: 13px; }
.bs-slot b { font-weight: 600; white-space: nowrap; }
.bs-slot:hover, .bs-time:hover { border-color: var(--color-primary); }
.bs-slot[aria-pressed="true"], .bs-time[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.bs-time-group + .bs-time-group { margin-top: 14px; }
.bs-time-group h4 { margin: 0 0 8px; color: var(--color-muted-foreground); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bs-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.bs-time { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; }
.bs-time time { font: 600 17px/1.1 var(--font-sans); font-variant-numeric: tabular-nums; }
.bs-time small { color: var(--color-muted-foreground); font-size: 12px; }
.bs-time[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-foreground); }
.bs-time[aria-pressed="true"] small { color: inherit; }
.bs-empty { padding: 18px; border: 1px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted-foreground); }

/* Floor plan: bikes as round seats facing the instructor, courts as small courts with a net. */
.bs-floor { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-muted); }
.bs-floor-front { grid-column: 1 / -1; padding: 6px; border: 1px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted-foreground); font-size: 11px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.bs-spot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; max-width: 64px; width: 100%; justify-self: center; padding: 0; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-surface); color: var(--color-primary); font: 600 15px/1 var(--font-sans); }
.bs-spot small { font-size: 9px; font-weight: 500; letter-spacing: .02em; }
.bs-spot[data-state="free"]:hover { background: var(--color-muted); }
.bs-spot[data-state="idle"] { border-color: var(--color-border); color: var(--color-muted-foreground); cursor: default; }
.bs-spot[data-state="taken"] { border-color: var(--color-border); background: repeating-linear-gradient(45deg, var(--color-surface) 0 5px, var(--color-border) 5px 6px); color: var(--color-muted-foreground); cursor: not-allowed; }
.bs-spot[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-foreground); }
.bs-floor[data-kind="court"] { gap: 12px; }
.bs-floor[data-kind="court"] .bs-spot { aspect-ratio: 2 / 1; max-width: none; border-radius: var(--radius); font-size: 15px; }
.bs-floor[data-kind="court"] .bs-spot::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; border-left: 2px dashed currentColor; opacity: .3; }
.bs-floor[data-kind="court"] .bs-spot span, .bs-floor[data-kind="court"] .bs-spot small { position: relative; padding: 2px 6px; border-radius: 4px; background: inherit; }
.bs-floor[data-kind="court"] .bs-spot small { font-size: 11px; }
.bs-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; color: var(--color-muted-foreground); font-size: 13px; }
.bs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bs-legend i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-surface); }
.bs-legend i[data-state="taken"] { border-color: var(--color-border); background: repeating-linear-gradient(45deg, var(--color-surface) 0 3px, var(--color-border) 3px 4px); }
.bs-legend i[data-state="mine"] { background: var(--color-primary); }

/* ---- Hold, form, banners, status ------------------------------------------------------------- */
.bs-hold, .bs-status { padding: clamp(18px, 4vw, 28px); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.bs-hold h3 { margin: 0; font: 600 22px/1.25 var(--font-display); }
.bs-hold-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bs-timer { flex: 0 0 auto; padding: 10px 14px; border-radius: var(--radius); background: var(--color-muted); text-align: center; }
.bs-timer strong { display: block; font: 600 26px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.bs-timer small { color: var(--color-muted-foreground); font-size: 11px; }
.bs-form { display: grid; gap: 14px; margin-top: 22px; }
.bs-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bs-field { display: grid; gap: 6px; min-width: 0; }
.bs-field > span { font-size: 14px; font-weight: 600; }
.bs-field em { color: var(--color-muted-foreground); font-style: normal; font-weight: 400; }
.bs-field small { color: var(--color-muted-foreground); font-size: 13px; }
.bs-field input, .bs-field select, .bs-field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-background); color: inherit; font-size: 16px; }
.bs-field textarea { min-height: 88px; resize: vertical; }
.bs-field input:focus, .bs-field select:focus, .bs-field textarea:focus { border-color: var(--color-primary); outline: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent); outline-offset: 0; }
.bs-field [aria-invalid="true"] { border-color: var(--color-danger); }
.bs-field-hours { max-width: 160px; }
.bs-field-error { margin: 0; color: var(--color-danger); font-size: 14px; font-weight: 600; }
.bs-hint { margin: -4px 0 0; color: var(--color-muted-foreground); font-size: 14px; }
.bs-hint:empty { display: none; }
.bs-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0 4px; border-top: 1px solid var(--color-border); font-size: 18px; }
.bs-total strong { font: 600 24px/1 var(--font-display); }
.bs-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius); background: var(--color-surface); }
.bs-form .bs-banner { margin-bottom: 0; }
.bs-banner p { margin: 4px 0 0; color: var(--color-muted-foreground); font-size: 14px; }
.bs-banner[data-kind="info"] { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface)); }
.bs-banner[data-kind="error"] { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface)); }
.bs-banner-close { flex: 0 0 auto; width: 32px; height: 32px; border: 0; background: none; color: var(--color-muted-foreground); font-size: 20px; line-height: 1; }

.bs-status { display: grid; justify-items: start; gap: 8px; }
.bs-status h2 { margin: 6px 0 0; font: 600 clamp(26px, 3vw, 34px)/1.15 var(--font-display); }
.bs-status .bs-muted { margin: 0; }
.bs-status-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-muted); color: var(--color-foreground); font: 700 24px/1 var(--font-sans); }
.bs-status[data-status="paid"] .bs-status-icon { background: var(--color-success); color: var(--color-surface); }
.bs-status[data-status="failed"] .bs-status-icon, .bs-status[data-status="expired"] .bs-status-icon { background: var(--color-danger); color: var(--color-surface); }
.bs-spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: bs-spin .9s linear infinite; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bs-spinner { animation-duration: 3s; } html { scroll-behavior: auto; } }
.bs-details { display: grid; width: 100%; margin: 12px 0; border-top: 1px solid var(--color-border); }
.bs-details > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.bs-details dt { color: var(--color-muted-foreground); font-size: 14px; }
.bs-details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---- Footer ----------------------------------------------------------------------------------- */
.bs-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 24px; padding: 26px 0 36px; border-top: 1px solid var(--color-border); color: var(--color-muted-foreground); font-size: 13px; }
.bs-footer p { margin: 0; }
.bs-footer p:empty { display: none; }
.bs-footer strong { color: var(--color-foreground); font-weight: 600; }
.bs-mode-note { flex-basis: 100%; }

/* ---- Owner preview panel (platform look, not the business theme) ----------------------------- */
.bs-owner { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 400px; border-right: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-text); box-shadow: 0 0 40px rgb(10 15 20 / .12); font: 14px/1.5 var(--p-font); color-scheme: light; }
.bs-owner :focus-visible { outline: 2px solid var(--p-forest); outline-offset: 2px; }
.bs-owner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--p-border); }
.bs-owner-head p { margin: 6px 0 0; color: var(--p-muted); font-size: 13px; }
.bs-owner-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--p-navy); color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bs-owner-toggle { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--p-border); border-radius: var(--p-radius); background: transparent; color: var(--p-text); font-size: 13px; }
.bs-owner-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; overscroll-behavior: contain; }
.bs-owner-section { padding: 16px 0; border-bottom: 1px solid var(--p-border); }
.bs-owner-section:last-child { border-bottom: 0; }
.bs-owner h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.bs-owner h3 { margin: 18px 0 8px; color: var(--p-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bs-owner-hint { margin: 0 0 10px; color: var(--p-muted); font-size: 13px; }
.bs-owner-field { display: grid; gap: 4px; margin-bottom: 12px; }
.bs-owner-field span { font-size: 13px; font-weight: 600; }
.bs-owner-field em { color: var(--p-muted); font-style: normal; font-weight: 400; }
.bs-owner-field input, .bs-owner-field textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--p-border); border-radius: var(--p-radius); background: #ffffff; color: var(--p-text); font: inherit; font-size: 15px; }
.bs-owner-field textarea { resize: vertical; }
.bs-owner-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--p-navy); border-radius: var(--p-radius); background: transparent; color: var(--p-navy); font-weight: 600; }
.bs-owner-button:disabled { cursor: not-allowed; opacity: .45; }
.bs-owner-primary { background: var(--p-navy); color: #ffffff; }
.bs-owner-upload { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--p-border); border-radius: var(--p-radius); background: var(--p-canvas); }
.bs-owner-upload small { color: var(--p-muted); font-size: 12px; }
.bs-owner-upload .bs-owner-field { margin: 4px 0 0; }
.bs-owner-file { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: var(--p-radius); background: var(--p-forest); color: #ffffff; font-weight: 600; cursor: pointer; }
.bs-owner-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bs-owner-file:focus-within { outline: 2px solid var(--p-navy); outline-offset: 2px; }
.bs-owner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bs-owner-grid > p { grid-column: 1 / -1; }
.bs-thumb { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: calc(var(--p-radius) + 2px); background: var(--p-recessed); color: var(--p-text); text-align: left; }
.bs-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--p-recessed); }
.bs-thumb-meta { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 8px; }
.bs-thumb-meta b { padding: 1px 6px; border-radius: 999px; background: var(--p-forest); color: #ffffff; font-size: 10px; font-weight: 600; }
.bs-thumb-meta small { flex-basis: 100%; overflow: hidden; color: var(--p-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bs-thumb:hover { border-color: var(--p-border); }
.bs-thumb[aria-pressed="true"] { border-color: var(--p-navy); box-shadow: 0 0 0 2px rgb(11 37 69 / .15); }
.bs-owner-foot { display: grid; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--p-border); background: var(--p-surface); }
.bs-owner-status { min-height: 20px; margin: 0; color: var(--p-muted); font-size: 13px; }
.bs-owner-status[data-kind="success"] { color: var(--p-forest); }
.bs-owner-status[data-kind="error"] { color: #7a2e2e; }
.bs-owner.is-collapsed .bs-owner-body, .bs-owner.is-collapsed .bs-owner-foot { display: none; }
.bs-owner.is-collapsed { bottom: auto; box-shadow: 0 6px 24px rgb(10 15 20 / .12); }
@media (min-width: 1101px) {
  .bs.is-editing .bs-site { margin-left: 400px; }
  .bs.is-editing .bs-site { grid-template-columns: minmax(0, 1fr) minmax(300px, 38vw); }
}

/* ---- Phones and tablets ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bs-owner { top: auto; right: 0; width: auto; max-height: 62vh; border-top: 1px solid var(--p-border); border-right: 0; border-radius: 14px 14px 0 0; }
  .bs-owner.is-collapsed { bottom: 0; }
  .bs.is-editing { padding-bottom: 62vh; }
  .bs-owner-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 900px) {
  .bs-site, .bs-site.no-side { grid-template-columns: minmax(0, 1fr); }
  .bs-side { position: relative; order: -1; height: 36vh; min-height: 200px; max-height: 380px; }
  .bs-content { padding: 0 16px; }
  .bs-header { padding: 14px 0; }
  .bs-nav { gap: 16px; }
  .bs-hero { padding: 20px 0 36px; }
  .bs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .bs-facts > div:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
  .bs-section { padding: 40px 0; }
  .bs-offers-2 { grid-template-columns: minmax(0, 1fr); }
  .bs-step-title small { margin-left: 0; }
  .bs-slot { gap: 12px; padding: 12px 14px; }
  .bs-slot time { font-size: 19px; }
  .bs-floor { gap: 8px; padding: 12px; }
  .bs-hold-head { flex-direction: column-reverse; }
  .bs-timer { display: flex; align-items: baseline; gap: 8px; }
  .bs-details > div { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .bs-nav a:first-child { display: none; }
  .bs-actions .bs-button { flex: 1 1 100%; }
}