/*!
 * Burman A/B — variant arm v1 · experiment burman_home_2026_09 · rev 2026-09-14b
 *
 * REV 2026-09-15 (Edgar, 2026-09-15: "the new section … needs to be floating as you scroll")
 *   · HOMEPAGE ONLY (body.home): the booking card floats. >=1101px it starts at Figma's spot
 *     and docks 24px under the header as you scroll; <=1100px it docks to the bottom of the
 *     viewport and REPLACES the theme's floating bar
 *   · the bar keeps only its anchor links on desktop: its "Check availability" (which opened
 *     the theme's second booking form) and its burger are hidden; the header burger stays
 *   · the in-flow <=1100px card and its grid are gone; the photo is capped so the hero fits
 *     between the header and the docked card; the date picker opens UPWARD, one month
 *
 * REV 2026-09-14b (Anna's Figma saves 09:20–12:54Z the same day, read from the REST API)
 *   · hero offset now comes from --bx-header-h, measured on the fixed header by a
 *     ResizeObserver in 01-bx-experiment.php — the rem-tuned offsets left 9–17px gaps
 *     on /et/ at 768 and 1000 because the theme's root font scales with the viewport
 *   · tagline sized to Figma (36/42 at 1920; 21/26 on mobile)
 *   · <=1100px: MICHELIN line restored (Figma's mobile hero keeps it, as a band at the
 *     photo's foot) — hiding it let the theme drop the offer under its floating bar
 *   · <=1100px: the booking card flows UNDER the photo (Figma mobile), not hidden
 *   · desktop card re-placed: Figma moved it to 274px below the photo edge, 393 wide
 *   · discount band styles (PHP renders it only once BX_DISCOUNT_CODE is set)
 *
 * WHAT CHANGED FROM THE FRIDAY REVISION, AND WHY
 *   Friday's sheet restyled the page with blanket rules — every h2, every
 *   `.section-content p`, `section + section` padding, the footer. Two problems:
 *     1. The live theme ALREADY implements Figma's palette and type below the hero,
 *        so most of those rules changed nothing (F121: one property differed).
 *     2. `.section-content` is also the hero booking CARD, so the paragraph rule gave
 *        the card 18px / 62ch text — the cramped, wrapping card Edgar saw.
 *   This revision touches ONLY what Figma changes structurally in view: the header,
 *   the hero composition and the booking card. Every other band renders exactly as
 *   control, by construction.
 *
 * SOURCE OF TRUTH
 *   Figma u0Vq08ndQwY5gy3w5ZSKXG, frame "Homepage / 1920 px / EN" (53879:2625),
 *   geometry read from the REST API and a rendered PNG, 2026-09-14. Proportions are
 *   expressed as vw against the 1920 frame and clamped, so they hold below 1920.
 *
 * EVERY RULE IS SCOPED under [data-bx~="burman_home_2026_09:v1"], except the two
 * default-hide rules immediately below, which keep injected chrome out of control.
 */

/* Injected by 01-bx-experiment.php into BOTH arms; revealed only in v1. */
.bx-header-burger,
.bx-tagline {
  display: none !important;
}

html[data-bx~="burman_home_2026_09:v1"] {
  --bx-panel:  #F2F1E9;   /* the card's inner panel — Figma "Swap Content" fill, 2026-09-14 */
  --bx-maroon: #8E2C21;   /* Color/Red — identical to the theme's --primary */
  --bx-ink:    #1b1917;
  --bx-muted:  #8b857b;
  --bx-hair:   #E6E1D6;
}

/* ================================================================ HEADER ==== */
/* Figma: burger top-left · logo centred with a tagline beneath · "ET" top-right. */

/* "HOTEL" (link + hover label) is replaced by the burger. Neither is instrumented. */
html[data-bx~="burman_home_2026_09:v1"] .header .header-inner .header-block:first-child .text-link {
  display: none !important;
}

html[data-bx~="burman_home_2026_09:v1"] .bx-header-burger {
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

html[data-bx~="burman_home_2026_09:v1"] .bx-header-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--bx-maroon);
}

html[data-bx~="burman_home_2026_09:v1"] .bx-header-burger:focus-visible {
  outline: 2px solid var(--bx-maroon);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-bx~="burman_home_2026_09:v1"] .bx-header-burger span { transition: width .18s ease; }
  html[data-bx~="burman_home_2026_09:v1"] .bx-header-burger:hover span:nth-child(2) { width: 15px; }
}

/* Shown at every width: Figma's 393px hero carries the burger top-left too (2026-09-14).
   The theme's own small-screen opener is the floating bottom bar — a different element
   with its own label (burger_floating), so no duplicate binding and no double count. */

/* "ET" instead of "ESTONIAN". The theme hides .mobile-visible at >=641px with
   !important, so the reveal needs !important plus higher specificity. Both links
   carry language_switch, so this is an exposure swap, not an instrumentation change. */
html[data-bx~="burman_home_2026_09:v1"] .header .header-right .text-link.mobile-hidden {
  display: none !important;
}
html[data-bx~="burman_home_2026_09:v1"] .header .header-right .text-link.mobile-visible {
  display: inline-block !important;
}

/* Tagline: logo-block is `display:block; width:fit-content`, so stack and centre. */
html[data-bx~="burman_home_2026_09:v1"] .header .logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

html[data-bx~="burman_home_2026_09:v1"] .bx-tagline {
  display: block !important;
  margin: .55rem 0 0;
  font-family: 'SeriouslyNostalgicFn', 'SeriouslyNostalgic', Georgia, serif;
  font-size: clamp(1.3125rem, 1.875vw, 2.25rem);   /* Figma 36/42 at 1920 */
  line-height: 1.17;
  letter-spacing: .02em;
  color: var(--bx-ink);
  text-align: center;
  white-space: nowrap;
}

html[data-bx~="burman_home_2026_09:v1"] .bx-tagline em {
  font-style: italic;
}

@media screen and (max-width: 640px) {
  html[data-bx~="burman_home_2026_09:v1"] body.home .header {
    padding: 1rem 0;   /* Figma 393 header: 90px; theme 2.625rem + tagline gave 143px */
  }
  html[data-bx~="burman_home_2026_09:v1"] .bx-tagline {
    font-size: 1.3125rem;   /* Figma mobile 21/26 */
    line-height: 1.24;
    white-space: normal;
  }
}

/* The header is position:fixed and the theme lets it overlap the hero by ~1.8rem so it
   hides the white frame's top strip. A full-bleed photo has no strip to hide, so the
   hero must start exactly at the header's bottom edge. The header's height depends on
   breakpoint, language (no ET tagline) and font loading, and the theme scales its root
   font with the viewport, so no rem constant holds everywhere — the 2026-09-14 rem set
   measured 0 at 1718/1940 and then -9px / -17px on /et/ at 768 / 1000. So the value is
   MEASURED: 01-bx-experiment.php sets --bx-header-h on <html> from a ResizeObserver on
   .header (both arms; only this sheet consumes it). Fallback is the 1718px value. */
html[data-bx~="burman_home_2026_09:v1"] .first-screen-section {
  padding-top: var(--bx-header-h, calc(5.625rem + 4rem));
}

/* ================================================================== HERO ==== */
/* Figma: a FULL-BLEED photograph — no inset, no white frame. The theme pads the
   hero's container with --container-padding-size (12.03125vw = 192.5px a side at
   1600px) and caps .section-inner at 76.5625vw; zeroing both is the whole fix. */

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section {
  --container-padding-size: 0px;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-inner {
  max-width: none;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-image {
  padding: 0;
  border: 0;
  background: none;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-image picture {
  border: 0;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .image-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* <=1100px (homepage): Figma's 393px hero photo is 393 x 579 = 147.33vw. With the booking
   card docked to the bottom of the viewport the photo is ALSO capped so the whole hero —
   headline, offer, award band — fits between the header and the dock at scroll 0 on a
   short phone (375x667). --bx-header-h and --bx-dock-h are measured by
   01-bx-experiment.php; the fallbacks are the 393px values.
   PORTRAIT ONLY: on a landscape tablet (1024x768) the theme's root font is ~21px, the header
   207px and the card 222px, so the cap left a 431px photo in which the headline overlapped
   the offer by 64px (headless probe, 2026-09-15). There the photo keeps its own ratio and
   the docked card sits over its foot until the visitor scrolls. */
@media screen and (max-width: 1100px) and (orientation: portrait) {
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .section-image picture:before {
    padding-top: 0;
    min-height: 24.5rem;   /* 375x667: root font is 15.27px there; 23rem (351px) still overlapped by 2px */
    height: min(147.33vw, calc(100dvh - var(--bx-header-h, 91px) - var(--bx-dock-h, 196px) - 12px));
  }
}

/* Figma's photo band is 786 x 1920 = 41vw. The theme derives height from the
   viewport instead; cap it at the design's proportion so a full-bleed image does
   not become a wall on tall windows. */
@media screen and (min-width: 1101px) {
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-image picture:before {
    padding-top: clamp(28rem, calc(100dvh - 5.625rem - 4rem - 9rem), 41vw);
    min-height: 0;
  }
}

/* Composition — Figma sets the headline in the upper-middle of the photo and the
   offer at its foot, rather than grouping them in the centre. In the theme's flex
   column, auto margins on the headline centre it in the space ABOVE the offer. */
@media screen and (min-width: 1101px) {
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-overlay-content {
    padding-bottom: clamp(2.4rem, 3.6vw, 4.5rem);
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-overlay-content .section-overlay-content-inner {
    justify-content: flex-start;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-overlay-content .sc-main-title {
    margin: auto 0;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-overlay-content .awards-section {
    margin-top: 0;
  }
}

/* DESKTOP (>=1101px): no MICHELIN line in Figma's hero (the award lives in the footer).
   In the markup it is a bare text node plus an <em> AFTER the offer span inside one <h3>;
   01-bx-experiment.php wraps that tail in <span class="bx-award"> (both arms, inline, so
   control renders byte-for-byte the same). The heading goes to font-size:0 and the offer
   span restores the theme's own sizes, per breakpoint, in the theme's order. */
@media screen and (min-width: 1101px) {
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-title {
    font-size: 0 !important;
    line-height: 0 !important;
    margin-bottom: 0 !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .bx-award,
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-title > em,
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-items {
    display: none !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-title .hero-promo {
    font-size: 2.25rem;
    line-height: 2.625rem;
    margin: 0;
  }
}
@media screen and (min-width: 1101px) and (max-width: 1720px) {
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-title .hero-promo {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}
@media screen and (min-width: 1101px) and (max-height: 950px) {
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-title .hero-promo {
    font-size: 1.25rem;
    line-height: 1.6rem;
  }
}

/* MOBILE / TABLET (<=1100px): Figma's 393px hero KEEPS the award, as a black band at the
   photo's foot ("MICHELIN Opening of the Year Award 2025", 21/26, #F7F6F1 on #000), and
   shows no award icons. Keeping the block in place also keeps the theme's own offer
   position: with it hidden, the theme let the offer drop to the photo's foot, under the
   floating "Check availability" bar at 1000px (measured 63px overlap, 2026-09-14). */
@media screen and (max-width: 1100px) {
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-items {
    display: none !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .awards-title {
    margin-bottom: 0 !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .awards-section .bx-award {
    display: block;
    margin: 1.5rem 0 0;
    padding: .45rem 1rem;
    background: #000;
    color: #F7F6F1;
    font-size: 1.3125rem;
    line-height: 1.24;
    text-align: center;
  }
  html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-overlay-content {
    padding-bottom: 0;          /* the band sits flush on the photo's bottom edge */
  }
}

/* ========================================================== BOOKING CARD ==== */
/* The card is ALREADY BUILT and instrumented: .section-content holds the full
   check-in widget. Production hides it at every width ON PURPOSE, from Customizer
   Additional CSS (<style id="wp-custom-css">):
   `.first-screen-section .section-content.tablet-hidden{display:none!important}`.
   critical1234.css's own `.tablet-hidden` rule applies only at <=1100px.
   (Corrected 2026-09-14: this comment used to call it an unscoped critical1234 rule.)

   Figma's card ("Popover"): a white frame with an 8px margin around a beige panel; a
   rooms/guests row on top; one white date field split by a hairline; a solid maroon
   "Check availability". GEOMETRY MOVED BY THE DESIGNER 2026-09-14: 393x235 at x=1447
   y=396 in the 1920 frame — 274px below the photo's top edge (was 418x291 at y=224,
   102px below). Right gutter 80px unchanged.

   Restyled, never restructured — every control keeps its element, class and
   data-track attribute. What CSS cannot do is turn the Adults/Children steppers
   into Figma's "Guests 2 ▾" dropdown; that is theme JavaScript. */

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-content.tablet-hidden {
  display: block !important;
}

/* <=1100px placement: see FLOATING at the end of this section (it must come AFTER the base
   card rule below, or that rule's padding and background win the cascade). */

/* Positioned INSIDE the photo now it is full-bleed: 80px gutter, 274px below the
   photo's top edge, 393px wide — all against the 1920 frame (2026-09-14 Figma). */
html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-content {
  top: clamp(60px, 14.27vw, 274px);
  right: clamp(16px, 4.17vw, 80px);
  width: clamp(300px, 20.47vw, 393px);
  padding: 8px;
  background: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 20px 48px -24px rgba(14, 4, 3, .55);
  color: var(--bx-ink);
  z-index: 3;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-content .section-caption {
  margin: 0;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .section-content .section-caption .sc-title {
  display: none;              /* "Choose your date" — Figma's card has no title */
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component {
  background: var(--bx-panel);
  padding: clamp(14px, 1.25vw, 24px) clamp(10px, .85vw, 16px) clamp(10px, .85vw, 16px);
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, .9vw, 16px) 0;
  align-items: stretch;
}

/* Guests on top, the two stepper rows side by side — Figma's "Our rooms | Guests". */
html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .form-field.wide {
  grid-column: auto;
  order: -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 clamp(4px, .5vw, 10px);
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .form-field.wide .field-label {
  margin: 0;
  font-family: 'SeriouslyNostalgicFn', 'SeriouslyNostalgic', Georgia, serif;
  font-size: clamp(13px, .9vw, 17px);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--bx-ink);
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .count-select-component {
  display: flex;
  align-items: center;
  gap: 4px;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--bx-hair);
  border-radius: 50%;
  background: #fff;
  color: var(--bx-maroon);
  font-size: 12px;
  line-height: 1;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .cmp-count {
  min-width: 1.3em;
  text-align: center;
  font-family: 'SeriouslyNostalgicFn', Georgia, serif;
  font-size: clamp(13px, .9vw, 16px);
  color: var(--bx-maroon);
}

/* One white date field, split by a hairline. */
html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .date-field {
  position: relative;
  min-width: 0;
  padding: clamp(7px, .6vw, 11px) clamp(9px, .75vw, 14px);
  background: #fff;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .check-in-btn {
  border-radius: 3px 0 0 3px;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .check-out-btn {
  border-radius: 0 3px 3px 0;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .check-out-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--bx-hair);
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .date-field .field-label {
  margin: 0 0 2px;
  font-family: 'GTPressura', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(10px, .68vw, 12px);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--bx-muted);
  white-space: nowrap;
}

/* The theme draws these as 8rem-tall tiles with 4.5rem numerals. */
html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .date-field .field-value {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  font-family: 'SeriouslyNostalgicFn', Georgia, serif;
  font-size: clamp(14px, 1vw, 19px);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--bx-maroon);
  cursor: pointer;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .date-field .field-value strong {
  margin-right: .2em;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Solid maroon CTA. This is the theme's OWN .btn.secondary:hover appearance, so the
   notched button__left/right ends keep the rendering the theme designed for them. */
html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .form-footer {
  margin-top: clamp(10px, .9vw, 16px);
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .form-footer .btn.secondary {
  width: 100%;
  background: var(--primary);
  color: #fff;
}

html[data-bx~="burman_home_2026_09:v1"] .first-screen-section .check-in-component .form-footer .btn.secondary:hover {
  background: var(--primary-hover);
}

/* ============================================================== FLOATING ==== */
/* HOMEPAGE ONLY. The arm cookie follows a visitor to every page, and the theme's bottom bar
   carries page-specific buttons elsewhere (Reserve a Seat on dining, Choose a treatment on
   spa), so nothing below may apply off the homepage. body.home is on / and /et/ and not on
   /rooms/ (served HTML, 2026-09-15). */

/* The theme's bar: its show-form button opens a SECOND booking form (.cmp-rooms, with a
   room dropdown and a guests dropdown); in v1 the floating card replaces it. Hidden, not
   removed — markup is identical in both arms. */
html[data-bx~="burman_home_2026_09:v1"] body.home .navbar-component .cmp-show-form-btn,
html[data-bx~="burman_home_2026_09:v1"] body.home .navbar-component .cmp-menu-opener,
html[data-bx~="burman_home_2026_09:v1"] body.home .navbar-component .cmp-rooms {
  display: none !important;
}
/* The theme shifts the pill right by half the button's width to make room for it. */
html[data-bx~="burman_home_2026_09:v1"] body.home .navbar-component .cmp-default-view {
  transform: none !important;
}

/* >=1101px: starts where Figma puts it (274px below the photo's top edge at 1920) and rises
   with the page until it parks 24px under the fixed header, then stays. --bx-scroll is set
   ON THE CARD ELEMENT by 01-bx-experiment.php, so a scroll restyles only the card's subtree,
   not the document. The photo's top edge IS the header's bottom edge (--bx-header-h). */
@media screen and (min-width: 1101px) {
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .section-content.tablet-hidden {
    position: fixed;
    /* The starting offset is also capped so the date picker (it opens DOWN from the card and
       a fixed element cannot be scrolled into view) fits: at 1280x720 it overflowed the
       viewport by 18px at scroll 0. 440px = card-to-field ~61 + picker <=351 at 1280 + air.
       On 1920x1080 and 1463x780 the Figma value is the smaller and wins, unchanged. */
    /* Parking spot: --bx-dock-top is set ON THE CARD by 01-bx-experiment.php from the header's
       `.out` class — header-h + 24px while the theme shows the header, 24px while it has
       slid it away on scroll-down (probe 2026-09-15: without this the card parked 154px
       down under an empty edge). The card must come back down when the header returns, or
       at 1920 it would sit on the header's ET link. */
    top: max(var(--bx-dock-top, calc(var(--bx-header-h, 9.5rem) + 24px)),
             calc(var(--bx-header-h, 9.5rem)
                  + min(clamp(60px, 14.27vw, 274px), calc(100dvh - var(--bx-header-h, 9.5rem) - 440px))
                  - var(--bx-scroll, 0px)));
    z-index: 150;   /* over page content; under .main-nav (200) so the open menu covers it */
    transition: top .25s ease;   /* matches the header sliding in and out; the per-scroll term
                                    changes in ~1px steps, so the transition is invisible there */
  }
}

/* <=1100px: the card REPLACES the bottom bar — docked to the viewport's foot, wider than
   Figma's 345px form (Edgar: "safe to widen"): 10px from each edge, capped at 560px so it
   does not sprawl on a tablet. White frame + beige panel as on desktop, because it now
   floats over photographs and text, not over the page ground. */
@media screen and (max-width: 1100px) {
  html[data-bx~="burman_home_2026_09:v1"] body.home .navbar-component {
    display: none !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section {
    padding-bottom: 1.5rem;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home {
    padding-bottom: var(--bx-dock-h, 196px);   /* the footer's last line clears the dock */
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .section-content.tablet-hidden {
    display: block !important;
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 6px;
    z-index: 150;
    box-shadow: 0 -8px 36px -16px rgba(14, 4, 3, .38), 0 18px 40px -24px rgba(14, 4, 3, .5);
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component {
    padding: 10px 10px 10px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-fields {
    gap: 8px 0;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-footer {
    margin-top: 8px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-field.wide .field-label,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .cmp-count {
    font-size: 15px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .cmp-btn {
    width: 26px;   /* thumb-sized steppers: 18px is too small to hit on a phone */
    min-width: 26px;
    height: 26px;
    font-size: 14px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .date-field .field-label {
    font-size: 11px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .date-field .field-value {
    font-size: 17px;
  }

  /* DATE PICKER. The theme's picker is flatpickr, inline, absolutely positioned inside the
     check-in field, and this form hardcodes TWO months (742px wide — measured off-screen
     at left -721 on a 393px viewport). Docked at the bottom it must open UPWARD and fit:
     the check-in field goes static so the picker's containing block is the card itself,
     and only the first month is shown; flatpickr's arrows still step through months. */
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .check-in-btn {
    position: static;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .date-picker {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 380px !important;   /* day cells track width: 373px gives 40px cells and a ~400px-tall calendar */
    margin: 0 auto !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-calendar,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-innerContainer,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-rContainer,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-weekdays,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-days,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-month + .flatpickr-month,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer,
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .dayContainer + .dayContainer {
    display: none !important;
  }
}

/* 881–1100px (landscape tablets, small laptops): ONE ROW — guests | dates | CTA.
   The theme's root font is ~21px here, so the two-row card was 222px tall and at 1024x768 it
   covered the foot of the headline and the whole offer at load, and its calendar needed 529px
   above it and poked 1px off the top (headless probe, 2026-09-15). Same controls and
   data-track attributes; grid order only. The picker still opens upward, centred, 380px. */
@media screen and (min-width: 881px) and (max-width: 1100px) {
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .section-content.tablet-hidden {
    max-width: 960px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component {
    padding: 8px 12px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-fields {
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0 14px;
    align-items: center;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-fields > hr {
    display: none;
  }
  /* .form-footer is a SIBLING of .form-fields inside the <form>, not a grid item — the first
     attempt put the CTA in grid column 5 and it wrapped to its own line at 1024x768. So the
     form itself is the row: fields take the space, the CTA sits at the end. */
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component form {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component form > .form-fields {
    flex: 1 1 auto;
    min-width: 0;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-footer {
    flex: 0 0 auto;
    margin-top: 0;
  }
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .form-footer .btn.secondary {
    width: auto;
    min-width: 11rem;
    white-space: nowrap;
  }
  /* The theme's day cells are a fixed 54px at this root font, so 380px clipped Sunday. */
  html[data-bx~="burman_home_2026_09:v1"] body.home .first-screen-section .check-in-component .date-picker {
    max-width: 420px !important;
  }
}

/* ============================================================ DISCOUNT BAND ==== */
/* Figma 2026-09-14: a 64px band under the photo, "Discount code: use <code>", 26/32,
   desktop frame only (the 393px hero has none). Rendered by 01-bx-experiment.php ONLY
   when BX_DISCOUNT_CODE is non-empty — Figma's "456GHN" is a placeholder and does not
   ship. Injected into both arms, revealed in v1. */
html[data-bx~="burman_home_2026_09:v1"] .bx-discount {
  display: block !important;
  margin: 0;
  padding: 1rem 1.5rem;
  font-family: 'SeriouslyNostalgicFn', 'SeriouslyNostalgic', Georgia, serif;
  font-size: clamp(1.1rem, 1.354vw, 1.625rem);
  line-height: 1.23;
  letter-spacing: .02em;
  color: var(--bx-ink);
  text-align: center;
}
@media screen and (max-width: 1100px) {
  html[data-bx~="burman_home_2026_09:v1"] .bx-discount { display: none !important; }
}