:root {
  --color-bg: #f8f4ee;
  --color-surface: #ffffff;
  --color-black: #141110;
  --color-black-surface: #201b18;
  --color-text: #221c19;
  --color-text-inverse: #f8f4ee;
  --color-text-muted: #6b5f56;
  --color-text-muted-inverse: #c9beb2;
  --color-champagne: #c9a15a;
  --color-champagne-light: #e6d3ac;
  --color-blush: #f3e3da;
  --color-border: #e6ddd2;
  --color-border-dark: #3a332c;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --container-width: 1180px;
}

* { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* Hide the page's own vertical scroll indicator on mobile only — the
   page still scrolls normally via touch, this only removes the visible
   track/thumb. Desktop keeps its native scrollbar. Scoped to html/body
   (the page's own vertical scroll), not any of the horizontal card-rail
   scroll containers, which keep their own thin scrollbar as an
   intentional "more content" affordance. */
@media (max-width: 640px) {
  html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
  }
}

/* Pins the footer to the bottom of the viewport on short pages (e.g. the
   single-step Check Your Date flow) instead of leaving it high up under
   the content. .site-menu/.site-menu-overlay are position:fixed and take
   no part in this flex flow, so they're unaffected. */
main.site-main { flex: 1 0 auto; }
.site-footer { flex: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

a { color: inherit; }

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

.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;
}

/* Announcement bar + header */

.announcement-bar {
  margin: 0;
  background: var(--color-black);
  color: var(--color-champagne-light);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
}

/* The announcement text (data/siteConfig.json) uses non-breaking spaces
   everywhere except the one regular space right after "·" — that's the
   only place the browser is allowed to wrap, so a narrow viewport always
   breaks into exactly "SERVING HAMPTON ROADS ·" / "ACCEPTING 2026-2027
   RENTALS" (two lines) rather than an arbitrary/uneven wrap, while a
   wide viewport keeps it on one line since nothing forces the break. */
@media (max-width: 430px) {
  .announcement-bar { font-size: 0.64rem; letter-spacing: 0.08em; padding: 0.5rem 0.75rem; }
}

/* Shown only on normal site pages reached from /bridal-show (?from=bridal-show),
   so expo visitors always have a tasteful way back — see partials/bridal-return-banner. */
.bridal-return-banner { margin: 0; text-align: center; padding: 0.6rem 1rem; background: var(--color-champagne-light); }
.bridal-return-banner a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
}
.bridal-return-banner a:hover, .bridal-return-banner a:focus-visible { color: var(--color-champagne); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 2rem;
  background: transparent;
  color: var(--color-text);
  border-bottom: none;
  position: relative;
  z-index: 30;
}

/* Homepage-only: the brand logo/link is omitted entirely (not just
   visually hidden, so it isn't left behind as an empty, accessible-
   name-less link to the page you're already on) — with only the
   menu-toggle left as a flex child, space-between would otherwise pull
   it to the start (there's no second item to space "between"), so it's
   pinned to the end explicitly instead. */
.site-header--no-logo { justify-content: flex-end; }

/* Bridal Show Exclusive page only: the simple header's logo is removed
   entirely (no placeholder left behind), but main.site-main:has(> .bridal-hero)
   still pulls the hero up by exactly the header's old (logo-height) footprint
   so the hero sits underneath the transparent header — shrink the header
   without this and the hero would rise up over the announcement bar. */
.site-header--simple-no-logo { min-height: 64px; }

/* The homepage hero is pulled up underneath the header by the header's own
   height (see .hero below) so the transparent header overlays the hero
   image instead of pushing it down. Every other page is unaffected. */

/* Sticky is desktop-only: on small screens the announcement bar plus a
   sticky header eats too much vertical space above the fold, and the
   full-height slide-out menu already overlays everything while open. */
@media (min-width: 901px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  /* Invisible offset only, so an anchor jump (footer/home links into
     #backdrops etc.) doesn't land underneath the sticky header. */
  .rentals-category {
    scroll-margin-top: 80px;
  }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--color-text);
}

.site-header__brand img { height: 43px; width: auto; }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-toggle:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.menu-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.site-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 16, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 40;
}
.site-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 88vw);
  background: var(--color-black);
  color: var(--color-text-inverse);
  padding: 4rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
  z-index: 50;
  overflow-y: auto;
}
.site-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s ease, visibility 0s linear 0s;
}

.site-menu a {
  color: var(--color-text-inverse);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-menu a:hover, .site-menu a:focus-visible { color: var(--color-champagne); }

/* Check Your Date stands out from the rest of the menu: gold at rest
   (not just on hover, like every other link) plus a small periodic
   shake to draw the eye — mostly idle, a brief wiggle every few
   seconds rather than continuous motion. */
.site-menu__cta { color: var(--color-champagne); animation: site-menu-cta-shake 4s ease-in-out infinite; }
.site-menu__cta:hover, .site-menu__cta:focus-visible { color: var(--color-champagne-light); }

@keyframes site-menu-cta-shake {
  0%, 90%, 100% { transform: translateX(0) rotate(0); }
  91% { transform: translateX(-2px) rotate(-3deg); }
  92% { transform: translateX(2px) rotate(3deg); }
  93% { transform: translateX(-2px) rotate(-2deg); }
  94% { transform: translateX(2px) rotate(2deg); }
  95% { transform: translateX(-1px) rotate(-1deg); }
  96%, 100% { transform: translateX(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu__cta { animation: none; }
}

.site-menu__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: var(--color-text-inverse);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}

.site-nav-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-black);
  font-family: var(--font-sans);
}
.site-nav-fallback a {
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav-fallback a:hover { color: var(--color-champagne); }

/* Buttons */

.button {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.button:hover { opacity: 0.82; }

.button--gold { background: var(--color-champagne); color: var(--color-black); border-color: var(--color-champagne); }
.button--dark { background: var(--color-black); color: var(--color-text-inverse); border-color: var(--color-black); }
.button--outline-light { background: transparent; color: var(--color-text-inverse); border-color: var(--color-text-inverse); }
.button--outline-dark { background: transparent; color: var(--color-black); border-color: var(--color-black); }
.button--sm { padding: 0.5rem 1.1rem; font-size: 0.68rem; }

/* Hero */

/* main.site-main is a flex item (see body layout below), so the overlap
   margin belongs on it directly rather than on .hero: a flex item's own
   margin always shifts its position in the flex stack in a well-defined
   way, whereas a negative margin on a child would only collapse through
   an ordinary block container, not a flex item (flex items establish
   their own formatting context for their contents). Scoped to :has(>
   .hero) so only the homepage's <main> is pulled up under the (full,
   menu-toggle-tall) header. */
/* Base padding (0.65rem * 2 = 20.8px) + the 43px logo (the header's
   tallest child, now that the logo is larger than the 42px menu-toggle
   button) = ~64px. */
main.site-main:has(> .hero) { margin-top: -64px; }
/* The simple bridal-show header shows the same 43px logo as the full
   header (just non-clickable, with no menu-toggle) — so its rendered
   height works out to the same 64px and this rule currently matches
   .hero's value exactly. Deliberately kept as its own selector rather
   than merged with .hero above: the two header variants' heights are
   computed independently and have diverged before (when the logo was
   hidden here but not on the full header) and may again. */
main.site-main:has(> .bridal-hero) { margin-top: -64px; }
.hero { position: relative; }
.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; display: block; }

.hero__overlay-link {
  position: absolute;
  top: 65%;
  height: 9%;
  display: block;
}
.hero__overlay-link--explore { left: 33%; width: 17.5%; }
.hero__overlay-link--date { left: 50.5%; width: 17.5%; }
.hero__overlay-link:focus-visible {
  outline: 2px solid var(--color-champagne);
  outline-offset: 3px;
}

/* Homepage mobile hero: desktop shows hero-cta.jpg (baked-in
   headline/buttons), untouched. Mobile shows mobile-hero.png as a plain
   image with no overlaid text — the headline/copy/buttons instead sit
   in .hero-mobile-fallback, a normal-flow block immediately below the
   image, visible only at max-width:640px.

   The hide/show rules for .hero__mobile-image are scoped as
   ".hero__media .hero__mobile-image" (two classes) rather than the bare
   ".hero__mobile-image" class: ".hero__media img" above is class+type
   (specificity 0,1,1), which silently beats a same-or-lower-specificity
   single-class override regardless of source order — that mismatch is
   what let the mobile image also render on desktop. Two classes here
   (0,2,0) reliably wins in both directions. */
.hero__media .hero__mobile-image { display: none; }

.hero-mobile-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .hero__media img:not(.hero__mobile-image) { display: none; }
  .hero__overlay-link { display: none; }
  /* Fixed-background hero: .hero__mobile-image is taken out of flow via
     position:fixed, so .hero__media (its former in-flow box) is given an
     explicit aspect-ratio to keep reserving the same space — otherwise
     .hero-mobile-fallback would collapse up to sit directly under the
     header instead of below the image. width:100% on a fixed element
     resolves against the viewport, which matches .hero__media's own
     full-bleed width (no horizontal padding on .hero/main/body), so the
     reserved spacer and the fixed image line up exactly at initial load.
     z-index:-1 keeps it behind every normal in-flow element (header,
     .hero-mobile-fallback, and every .section after it) for the rest of
     the scroll, per the standard stacking order (negative z-index paints
     below non-positioned in-flow descendants of the same context) — see
     the ".section { background }" rule below, which is what actually
     covers it back up as the page scrolls past. */
  /* Gate 2F (D15): the spacer takes the real shape of the image phones see
     (set inline on a page hero whose phone image differs from the homepage
     one), and reserves nothing when the hero has no image at all (it used
     to leave a tall blank box above page-builder content on phones). */
  .hero__media { aspect-ratio: var(--hero-mobile-ratio, 1024 / 1266); }
  .hero__media:not(:has(img)) { aspect-ratio: auto; }
  .hero__media .hero__mobile-image {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
  }
  .hero-mobile-fallback {
    position: static;
    width: auto;
    height: auto;
    padding: 1.75rem 1.25rem 2rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    background: var(--color-bg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
  }
  /* The section's own top padding (1.75rem) is the gap above the logo;
     the flex column's gap (0.85rem) is the gap between the logo and the
     headline below it — both already give the logo breathing room
     without needing extra margins of its own. */
  .hero-mobile-fallback__logo { height: 56px; width: auto; }
  .hero__mobile-headline { font-size: 1.3rem; line-height: 1.3; margin: 0; color: var(--color-text); }
  .hero__mobile-lede { margin: 0; color: var(--color-text); font-size: 0.92rem; }
  .hero__mobile-actions { display: flex; flex-direction: column; gap: 0.65rem; }
  /* .section--dark/--surface/--champagne already paint an opaque
     background (defined below, unconditionally); this equal-specificity
     rule only ever wins for the bare .section variant (the homepage's
     category-cards/packages/gallery sections), which otherwise has none
     and would let the fixed hero image behind it show through as those
     sections scroll past. var(--color-bg) is the same color body was
     already showing through it, so this is a no-op everywhere except
     where the fixed hero sits behind it. */
  .section { background: var(--color-bg); }
}

/* Experimental (default OFF): fixed backgrounds for three more sections —
   homepage "Elevated From Start to Finish" / "What Our Clients Say", and
   bridal-show "Bridal Show Offer". Toggled per-request via
   ?backgroundPreview=on|off (dev-only, see
   src/middleware/backgroundPreview.js), which sets body.bg-preview-on.
   Uses the same transform-containing-block technique as the hero above,
   NOT background-attachment:fixed (unreliable on iOS Safari) — a
   transform on the section gives its ::before a new containing block
   equal to the section's own box, so overflow:hidden on that same box
   clips the "fixed" pseudo exactly to this section and it can never
   bleed into a neighboring section or the footer. Gated on
   prefers-reduced-motion so a visitor who has asked for reduced motion
   always gets a normal, non-fixed background regardless of the toggle.
   NOTE: all three target sections currently have only a flat solid-color
   background (no image) — fixing a solid color in place is visually
   indistinguishable from letting it scroll normally, so ON vs OFF will
   look identical today. This is still the correct, reversible mechanism
   for whenever any of them gets real background art. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  body.bg-preview-on .section--process,
  body.bg-preview-on .section--testimonials,
  body.bg-preview-on .bridal-offer {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
  }
  body.bg-preview-on .section--process::before,
  body.bg-preview-on .section--testimonials::before,
  body.bg-preview-on .bridal-offer::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Reuses whichever background color the section already resolved
       from .section--dark/.section--surface/.bridal-offer — no new
       imagery invented for this experiment. */
    background: inherit;
  }
}

/* Generic sections */

.section { padding: 4rem 1.5rem; }
.section--dark { background: var(--color-black); color: var(--color-text-inverse); }
.section--champagne { background: var(--color-champagne-light); color: var(--color-text); }
.section--champagne .section__lede { color: var(--color-text-muted); }
.section--surface { background: var(--color-surface); color: var(--color-text); }
.section__inner { max-width: var(--container-width); margin: 0 auto; }

.section__eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 0.5rem;
}

.section__title { text-align: center; font-size: 2rem; margin: 0 0 0.75rem; }
.section__lede { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; color: var(--color-text-muted); }
.section--dark .section__lede { color: var(--color-text-muted-inverse); }
.section__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; text-align: center; margin-top: 2rem; }

/* Homepage testimonials */

.testimonial-rotator { max-width: 42rem; margin: 2.5rem auto 0; text-align: center; }
.testimonial-card { margin: 0; }
.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 1rem;
  color: var(--color-text);
}
.testimonial-card__attribution {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne);
  font-style: normal;
}
.testimonial-rotator__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.testimonial-rotator__prev,
.testimonial-rotator__next {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.9rem;
}
.testimonial-rotator__prev:hover, .testimonial-rotator__prev:focus-visible,
.testimonial-rotator__next:hover, .testimonial-rotator__next:focus-visible {
  border-color: var(--color-champagne);
  color: var(--color-champagne);
}
.testimonial-rotator__dots { display: flex; gap: 0.5rem; }
.testimonial-rotator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.testimonial-rotator__dot.is-active { background: var(--color-champagne); border-color: var(--color-champagne); }

/* Featured category cards */

.category-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.package-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* A lone item in a curated collage/thumbnail grid (a handful of
   featured category/package cards, a process-steps row, a gallery)
   should sit centered at a natural card width instead of pinned left
   (repeat(N,1fr) with only one child) or stretched full-width
   (auto-fill/auto-fit with one child). Scoped to :has(> *:only-child)
   so grids with 2+ items are completely unaffected.

   .item-grid (a category's rental listing on /rentals) is deliberately
   EXCLUDED (owner-test fix pass, item 3): that grid is a plain catalog
   listing, not a curated single-feature spot, and a staff-created
   category with only one rental must render its card exactly like any
   other item in a multi-item category — never an oversized, centered
   "feature" that a legacy category with several rentals never shows. */
.category-cards:has(> *:only-child),
.package-cards:has(> *:only-child),
.process-grid:has(> *:only-child),
.gallery-grid:has(> *:only-child) {
  grid-template-columns: minmax(240px, 360px);
  justify-content: center;
}

/* display:flex + height:100% (rather than block) is what makes every
   card in a row actually equal height: a CSS Grid row already stretches
   each grid-item child to the row's height by default, but only the
   grid item itself — a card's own internal content (image frame +
   caption) doesn't automatically fill that stretched height unless it's
   told to. height:100% is inert outside a stretched grid context, so
   this doesn't affect any other layout the card is used in. */
.category-card, .package-card, .item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-card:hover, .category-card:focus-within,
.package-card:hover, .package-card:focus-within,
.item-card:hover, .item-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(20, 17, 16, 0.14);
}

.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-border);
  display: block;
}
.media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.media-frame--square { aspect-ratio: 1 / 1; }
.media-frame--card { aspect-ratio: 4 / 3; }
.media-frame--gallery { aspect-ratio: 4 / 3; }

.media-frame:hover img,
a:hover .media-frame img,
a:focus-visible .media-frame img {
  transform: scale(1.05);
}

/* Image-first browsing cards: the media-frame image is the dominant
   visual element, the caption is image + title only — no price,
   inclusion/availability text, dimensions, or CTA text. That
   information lives on the linked detail page instead.

   The body is a flex column that grows to fill whatever height the card
   was stretched to (flex:1 in a flex-column card — see .category-card
   above), and centers its title both ways within that space — so a
   one-line title and a two-line title sit visually centered in an
   equal-height caption strip instead of the box just growing/shrinking
   around the text. min-height reserves room for two lines at the
   mobile title size so cards don't visibly resize based on which
   titles happen to wrap. */
.category-card__body, .package-card__body, .item-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  text-align: center;
  min-height: 4.5rem;
}

.category-card__title, .package-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* Process grid */

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.5rem; }

.process-step { text-align: center; border: none; }
.process-step__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.process-step__summary::-webkit-details-marker { display: none; }
.process-step__icon { width: 34px; height: 34px; color: var(--color-champagne); }
.process-step__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.process-step__title { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; color: var(--color-champagne); }
.process-step__text { font-size: 0.85rem; color: var(--color-text-muted-inverse); margin: 0.85rem 0 0; }

/* Event details split section */

.event-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.event-details img { width: 100%; height: auto; }
.event-details__title { text-align: left; font-size: 1.9rem; }
.event-details__lede { text-align: left; margin: 0 0 1.5rem; }
.event-details .section__eyebrow { text-align: left; }

/* Gallery */

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery-grid--full { grid-template-columns: repeat(3, 1fr); }
.gallery-grid figure { margin: 0; }
.gallery-grid figcaption { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--color-text-muted); padding: 0.5rem 0.1rem; }

.final-cta { text-align: center; }

/* Footer */

.site-footer { background: var(--color-black); color: var(--color-text-muted-inverse); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  /* Top padding doubled (1rem -> 2rem) per explicit request — bottom,
     horizontal, and the internal column gap above are unchanged. */
  padding: 2rem 1.5rem 0.5rem;
  max-width: var(--container-width);
  margin: 0 auto;
}

.site-footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.3rem; }
.site-footer__brand img { height: 59px; width: auto; }
.site-footer__wordmark { font-family: var(--font-display); color: var(--color-text-inverse); margin: 0; font-size: 1.05rem; }

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin: 0 0 0.3rem;
}

.site-footer__heading a { color: inherit; text-decoration: none; }
.site-footer__heading a:hover, .site-footer__heading a:focus-visible { color: var(--color-champagne); }

.site-footer__bottom {
  text-align: center;
  padding: 0.3rem 1.5rem 0.45rem;
  font-size: 0.78rem;
}

.site-footer__social { display: flex; gap: 0.75rem; margin: 0; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-text-inverse);
}
.site-footer__social a:hover, .site-footer__social a:focus-visible { color: var(--color-champagne); }
.site-footer__social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.footer-newsletter { margin: 0 0 0.3rem; }
.footer-newsletter__toggle {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  text-decoration: none;
}
.footer-newsletter__toggle:hover, .footer-newsletter__toggle:focus-visible { color: var(--color-champagne); }
.footer-newsletter__toggle::-webkit-details-marker { display: none; }
.footer-newsletter__form { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
.footer-newsletter__form input[type="email"] {
  flex: 1 1 200px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border-dark);
  background: transparent;
  color: var(--color-text-inverse);
  font-family: var(--font-body);
}
.footer-newsletter__note { flex-basis: 100%; font-size: 0.78rem; color: var(--color-text-muted-inverse); margin: 0.4rem 0 0; }

/* Inner-page content container */

.page-content { max-width: var(--container-width); margin: 0 auto; padding: 3rem 1.5rem; }
/* The footer itself is pinned to the bottom of short pages via the
   body/main flex layout above; this is just comfortable breathing room
   around the Check Your Date body, not a stand-in for that layout fix. */
.page-content--roomy { padding: 4rem 1.5rem; }
.page-content .section__title, .page-content .section__eyebrow, .page-content .section__lede { text-align: left; margin-left: 0; }

/* Text-only centering for pages that want the invitation-card feel
   without rearranging their existing media/grid layout. */
.page-content--centered > h1,
.page-content--centered > p,
.page-content--centered .section__title,
.page-content--centered .section__eyebrow,
.page-content--centered .section__lede,
.page-content--centered .pricing-note,
.page-content--centered figcaption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Fallback container for .site-main elements with no .section/.page-content wrapper
   (staff panel + error pages) so they aren't flush/unbounded. Public pages already
   manage their own layout via .section/.page-content and are unaffected. */
main.site-main:not(:has(.section, .page-content)) {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
}

/* Rentals grid + filter */

.category-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }

.category-filter a {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}

.category-filter a:hover {
  background: var(--color-black);
  color: var(--color-text-inverse);
  border-color: var(--color-black);
}

.rentals-category { scroll-margin-top: 20px; margin: 3rem 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.rentals-category:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }

.item-card__name { font-family: var(--font-display); margin: 0; font-size: 1rem; line-height: 1.25; }

.pricing { color: var(--color-champagne); font-weight: bold; }
.pricing-note { color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; max-width: 42rem; }

.availability-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
/* A resolved/verified state reuses the same soft green as
   .status-banner--available, so "verified" reads consistently across the
   whole site rather than introducing a new color meaning. */
.availability-badge--done { background: #e5f0e2; border-color: #e5f0e2; color: var(--color-text); }

/* "Your Selections" cards (owner-feedback pass, item 3) — one centered
   card per package/extra, image above name (per "put each image ABOVE
   its item/package name"), reusing the existing .media-frame/
   .media-frame--square pattern (the same aspect-ratio-locked,
   object-fit:cover box the public rentals/package cards already use)
   so the image can never distort or overflow its box. Card width is
   ~4x the previous 44px thumbnail width, capped by the container and
   free to wrap onto more than one row. */
.customer-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0.5rem 0; }
.customer-selection-card { width: 176px; max-width: 100%; text-align: center; }
.customer-selection-card .media-frame { width: 100%; border-radius: 4px; border: 1px solid var(--color-border); }
.customer-selection-card__name { display: block; margin-top: 0.5rem; font-size: 0.9rem; }
.customer-selection-card__inclusions { margin-top: 0.4rem; font-size: 0.8rem; color: var(--color-text-muted); text-align: left; }
.customer-selection-card__inclusions summary { cursor: pointer; text-align: center; }
.customer-selection-card__inclusions ul { list-style: disc; padding-left: 1.2rem; margin: 0.4rem 0 0; }
.customer-selection-card__inclusions li { margin-bottom: 0.2rem; }

/* Item / package detail */

.item-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; }
/* Spans both grid columns as its own row so it doesn't disturb the
   gallery/body two-column layout below it. */
.item-detail__back { grid-column: 1 / -1; margin: 0; }
.item-detail__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne);
  text-decoration: none;
}
.item-detail__back a:hover, .item-detail__back a:focus-visible { color: var(--color-champagne-light); }
.item-detail__gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.item-detail__image { width: 100%; height: auto; }
.item-detail__dimensions { color: var(--color-text-muted); font-size: 0.9rem; }
.item-detail__subhead { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

.addons-section { margin-top: 3rem; }
.item-detail__secondary-cta { margin-top: 1rem; }
.item-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }

/* Bridal show (QR-only) page: a self-contained page built from real HTML
   in distinct, coordinated sections (see bridal-show.ejs) rather than one
   long block or a single flyer image — existing rental photos stand in
   for dedicated illustrations until final photos are ready. */

/* The hero image (hero-cta.jpg) already has "Explore Rentals" / "Check
   Your Date" buttons baked in, same as the homepage hero — reuses
   .hero__media/.hero__overlay-link (see "Hero" rules above) rather than
   duplicating that positioning, since it's the same image at the same
   scale: a real <img> at its natural width/height, no HTML text or logo
   layered on top, just transparent overlay links on the baked buttons. */
.bridal-hero { position: relative; }

/* Bridal Show Exclusive intro: a premium gold band (distinct from the
   surrounding hero image / white categories / black offer section)
   housing the expo badge, copy, package carousel, and CTAs. Dark text
   throughout (not the lighter muted tone) for contrast against gold. */
.bridal-exclusive { background: var(--color-champagne); }
.bridal-exclusive .section__lede { color: var(--color-text); }
.bridal-exclusive__badge {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  background: var(--color-champagne-light);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  width: fit-content;
  margin: 0 auto 1rem;
}

/* Closing CTA: the soft blush/tan band the expo section above used to
   have, before that section moved to gold — keeps the page's color
   rhythm (image / gold / black / white / blush) coordinated. */
.bridal-final-cta { background: var(--color-blush); }
.bridal-final-cta .section__lede { color: var(--color-text-muted); }

/* "Let's Celebrate What's Next" placeholder image: centered, capped
   width so it reads as an accent between the heading and copy rather
   than a full-bleed banner. */
.beyond-wedding__image { max-width: 420px; margin: 0 auto 1.5rem; }

.bridal-carousel { position: relative; margin-top: 2.5rem; padding: 0 2.75rem; }
.bridal-carousel__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.bridal-carousel__card { flex: 0 0 min(280px, 80vw); scroll-snap-align: start; }
.bridal-carousel__card .package-card { height: 100%; }
.bridal-carousel__nav {
  display: none;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.bridal-carousel__nav:hover, .bridal-carousel__nav:focus-visible { border-color: var(--color-champagne); color: var(--color-champagne); }
.bridal-carousel__nav--prev { left: 0; }
.bridal-carousel__nav--next { right: 0; }
.bridal-carousel--enhanced .bridal-carousel__nav { display: flex; }

@media (max-width: 640px) {
  .bridal-carousel { padding: 0 0.5rem; }
  .bridal-carousel__nav { display: none !important; }
  /* Desktop keeps the horizontal scrolling/snapping carousel (its own,
     pre-existing behavior, unrelated to the mobile card-rail removed
     elsewhere) — mobile instead shows the same package cards as a plain
     2-column grid, so bridal-package-carousel.js's scroll/nav-button
     logic simply has nothing to drive here (its buttons are already
     hidden above) rather than needing its own mobile-detection branch. */
  .bridal-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .bridal-carousel__card { flex: initial; scroll-snap-align: none; max-width: none; }
}

.bridal-offer__code { display: flex; justify-content: center; margin: 0.5rem auto 0; }
.bridal-offer__code-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--color-champagne);
  border-radius: 999px;
  background: var(--color-black);
}
.bridal-offer__code-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted-inverse);
  line-height: 1.2;
}
.bridal-offer__code-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-champagne);
  line-height: 1.2;
}

/* Reveal trigger reuses the site's standard CTA button (.button.button--gold)
   directly in markup now — no bespoke class/border/typography here, which
   is what was producing a second gold border nested inside
   .bridal-offer__code-pill's own border. */

/* Native <dialog> + showModal(): the browser promotes the dialog into the
   page's "top layer" when shown modally, which sits above the entire
   normal document render regardless of any ancestor's stacking context,
   transform, or overflow — including .section__inner.reveal (transform:
   translateY(...) even at rest) further up this markup, which is exactly
   what trapped the old position:fixed div and let the next section's
   content paint over its lower half. This also gives native Escape-to-close,
   focus containment, and a real ::backdrop for free. */
.offer-reveal-modal {
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  width: min(26rem, calc(100vw - 2rem));
  margin: auto;
  overflow: hidden; /* the header stays put; __body-scroll below scrolls independently */
  max-height: 90vh; /* static-viewport fallback, kept even where dvh is supported */
  max-height: 90dvh; /* dynamic viewport height: stays correct as mobile browser chrome shows/hides */
}
.offer-reveal-modal[open] { display: flex; flex-direction: column; }
.offer-reveal-modal::backdrop { background: rgba(20, 17, 16, 0.6); }

.offer-reveal-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  flex: 0 0 auto;
}
.offer-reveal-modal__title { font-size: 1.3rem; margin: 0; }
.offer-reveal-modal__close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -0.5rem -0.5rem -0.5rem 0;
}

.offer-reveal-modal__body-scroll {
  flex: 1 1 auto;
  min-height: 0; /* required for a flex child's own overflow-y:auto to actually scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.5rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.offer-reveal-modal__body { font-size: 0.92rem; color: var(--color-text-muted); margin: 0 0 1.25rem; }
.offer-reveal-modal__label { display: block; font-family: var(--font-sans); font-size: 0.8rem; margin-bottom: 0.35rem; }
#offer-reveal-email,
#exclusive-access-email,
#exclusive-access-name {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1rem; /* >=16px prevents iOS Safari auto-zoom on focus */
}
/* LB-067: the optional name step shares the email field's look. */
.exclusive-access-modal__name { margin: 0 0 0.75rem; }
.exclusive-access-modal__name[hidden] { display: none; }
.exclusive-access-modal__optional { color: var(--color-text-muted); }
.offer-reveal-modal__checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 1rem; cursor: pointer; }
.offer-reveal-modal__checkbox input { margin-top: 0.2rem; }
.offer-reveal-modal__privacy { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 1.25rem; }
.offer-reveal-modal__privacy a { color: inherit; text-decoration: underline; }
.offer-reveal-modal__error { color: #a3312a; font-size: 0.85rem; margin: 0 0 1rem; }
.offer-reveal-modal__error[hidden] { display: none; }
.offer-reveal-modal__submit { display: block; width: 100%; text-align: center; }
.offer-reveal-modal__submit:disabled { opacity: 0.6; cursor: default; }

/* Countdown: the visible ticking display is aria-hidden once JS takes
   over (see bridal-offer-countdown.js) — a separate sr-only live region,
   updated only once a minute, carries the accessible announcement so
   screen readers aren't spammed every second. Explicit line-height on
   both lines of text (rather than inheriting body's 1.5) is what
   actually removes the "double-spaced" look — margin alone wasn't the
   whole story. */
.bridal-countdown { text-align: center; margin: 0 0 0.75rem; }
.bridal-countdown__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.2;
  margin: 0 0 0.3rem;
}
.bridal-countdown__time { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; margin: 0; }
.bridal-offer .bridal-countdown__label { color: var(--color-champagne-light); font-weight: 600; }
/* Countdown numbers + unit labels (e.g. "2d 14h 30m 12s") are white,
   scoped specifically to .bridal-countdown__time — the "Price Lock Ends
   In" caption above it keeps its own champagne-light color. */
.bridal-offer .bridal-countdown__time { color: var(--color-text-inverse); }

/* Three compact rows, in order: eyebrow -> countdown -> coupon code. */

/* Compact Bridal Show Offer: less vertical padding/type size so the
   countdown/code fit tightly instead of reading as an oversized,
   sparse block. */
@media (max-width: 640px) {
  .bridal-offer { padding: 1.75rem 1.25rem; }
  .bridal-offer .bridal-countdown { margin: 0 0 0.5rem; }
  .bridal-offer .bridal-countdown__time { font-size: 1.5rem; }
}

/* Featured categories: white section, four cards reusing the exact
   homepage category-card component (markup carries both
   "expo-categories" and "category-cards" classes — the grid columns/
   gap/responsive behavior come from .category-cards below, not a
   parallel copy here, so the two can never drift out of sync again;
   .expo-categories itself now only adds the page-specific top margin).
   .category-card shares .category-card/.package-card's border/
   background/hover-lift and .category-card__title's typography — same
   premium card language, not a bespoke look. Each opens into a panel
   with the category's options — a native <details> per card
   (name="expo-categories" makes them mutually exclusive in browsers
   that support it), so it's keyboard-accessible with no framework and
   degrades to "all independently toggleable" elsewhere. The <summary>
   is itself the accessible trigger (native button-like semantics, its
   text content is its accessible name) — no nested link/button inside
   it. */
.expo-categories { margin-top: 2.5rem; }
/* The grid item here is <details class="expo-category"> — the grid row
   stretches IT to a uniform height by default, but its <summary> child
   (the visible, bordered .category-card) doesn't inherit that height
   automatically, since a plain block child never fills a taller parent.
   That mismatch — not a missing width rule — is why these cards showed
   different overall heights even though their columns were already
   equal width. Making .expo-category a flex column and its summary
   flex:1 passes the stretched height down to the actual visible card. */
.expo-category { border: none; display: flex; flex-direction: column; height: 100%; }
.expo-category__summary {
  list-style: none;
  /* Without an explicit display, <summary> defaults to list-item in most
     engines, which reserves a marker box and visually shifts the card's
     content to the right even with list-style:none — this is the fix
     for the reported right-shifted alignment. flex (not block) is what
     lets it grow to fill .expo-category's stretched height below. */
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}
.expo-category__summary::-webkit-details-marker { display: none; }
.expo-category__summary::marker { content: ''; }
.expo-category__summary:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }

/* An open category spans every grid column so its panel has the full
   section width to lay out options as a horizontal row instead of being
   squeezed into one of four narrow columns (which reads as a vertical
   stack once options wrap one-per-line). */
.expo-category[open] { grid-column: 1 / -1; }

.expo-category__panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  background: var(--color-bg);
  border-top: 3px solid var(--color-champagne);
  color: var(--color-text);
}
.expo-category__options {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem;
}
.expo-category__option-link {
  display: flex;
  flex-direction: column;
  /* No cross-axis centering: the box before the name is a .media-frame
     span with an absolutely-positioned <img> and thus no intrinsic width
     of its own — centering it would shrink-wrap it to zero instead of
     letting it fill (and square off via aspect-ratio) the full card
     width. */
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.expo-category__option-link:hover,
.expo-category__option-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(20, 17, 16, 0.12);
}
.expo-category__option-link:hover .expo-category__option-name,
.expo-category__option-link:focus-visible .expo-category__option-name { color: var(--color-champagne); }
.expo-category__option-name { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.03em; text-align: center; }

.expo-category__close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.expo-category__close:hover, .expo-category__close:focus-visible { color: var(--color-champagne-light); }

/* .expo-categories' own 2-column mobile behavior now comes from the
   shared .category-cards rule (see the consolidated mobile card-grid
   block further down) — nothing bridal-specific to override here
   anymore. .expo-category__options (the drawer's item list, a
   different grid from the category cards themselves) keeps its own
   2-column rule. */
@media (max-width: 640px) {
  .expo-category__options { grid-template-columns: repeat(2, 1fr); }
}

/* §8c mobile bottom drawer for .expo-category panels (bridal-category-
   drawer.js). Desktop keeps the existing inline-expand-in-grid
   behavior untouched — .expo-category--drawer-mode/.is-drawer-open are
   only ever added by JS inside its own max-width:640px check, and this
   whole block only applies visually at that width too, so a no-JS
   visit still gets the plain inline expansion at every width. */
.expo-category__panel-head { display: none; }
.expo-drawer-overlay { display: none; }

@media (max-width: 640px) {
  .expo-category--drawer-mode .expo-category__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--color-bg);
    border-top: 3px solid var(--color-champagne);
    padding: 1.25rem 1.25rem 2rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .expo-category--drawer-mode.is-drawer-open .expo-category__panel {
    transform: translateY(0);
  }
  .expo-category--drawer-mode .expo-category__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .expo-category__panel-title { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
  .expo-category__panel-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
    padding: 0.25rem;
  }
  .expo-category--drawer-mode .expo-category__close { display: none; }
  .expo-drawer-overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 16, 0.5);
    z-index: 55;
  }
}

/* Desktop category modal (expo-category-modal.js): same native
   <dialog>.showModal() top-layer approach as .offer-reveal-modal above
   — guaranteed above every header/badge/section regardless of any
   ancestor stacking context, and immune to the .reveal wrapper's
   transform. Opened only above the max-width:640px breakpoint (mobile
   keeps the existing drawer above, untouched); a no-JS visit falls back
   to the plain inline <details> expansion at every width. */
.expo-category-modal {
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  width: min(40rem, calc(100vw - 2rem));
  margin: auto;
  overflow: hidden; /* header stays put; __body below scrolls independently */
  max-height: 90vh; /* static-viewport fallback, kept even where dvh is supported */
  max-height: 90dvh;
}
.expo-category-modal[open] { display: flex; flex-direction: column; }
.expo-category-modal::backdrop { background: rgba(20, 17, 16, 0.6); }

.expo-category-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 3px solid var(--color-champagne);
  flex: 0 0 auto;
}
.expo-category-modal__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.expo-category-modal__close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -0.5rem -0.5rem -0.5rem 0;
}
.expo-category-modal__body {
  flex: 1 1 auto;
  min-height: 0; /* required for a flex child's own overflow-y:auto to actually scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
/* The moved-in .expo-category__options keeps its own existing
   responsive grid (repeat(auto-fill, minmax(150px,1fr))) unchanged —
   it's the same real element, not a copy — so it just lays out inside
   this body instead of inside the original inline panel. */
.expo-category-modal__body .expo-category__options { margin: 0; }

.faq-item { margin-bottom: 1.5rem; }

/* Forms (unchanged behavior, retinted) */

.status-banner { padding: 1rem; border-radius: 2px; margin-bottom: 1.5rem; }
.status-banner--available { background: #e5f0e2; }
.status-banner--limited { background: #f7ecd6; }
.status-banner--unavailable { background: #f5e2df; }

.countdown { font-weight: bold; color: var(--color-champagne); }

.hold-countdown { text-align: center; margin: 0 0 1.75rem; }
.hold-countdown__headline {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}
.hold-countdown__time { font-size: 1.4rem; margin: 0; }

/* Booking request page: a centered column, form fields kept left-aligned
   inside it for usability while the page's actions/summary are centered. */
.request-form-wrap { max-width: 32rem; margin: 0 auto; }
.request-form-wrap .status-banner { text-align: center; }

.requested-summary { text-align: center; margin: 0 0 1.75rem; }
.requested-summary ul { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.requested-summary li { margin-bottom: 0.3rem; }

/* Checkout coupon field + price summary (request-form.ejs) */
.coupon-panel { border: 1px solid var(--color-border); padding: 1rem 1.25rem; margin: 0 0 1.5rem; text-align: center; }
.coupon-panel__form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; justify-content: center; }
.coupon-panel__label { display: block; font-family: var(--font-sans); font-size: 0.8rem; text-align: left; }
.coupon-panel__form input[type="text"] { padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); font-family: var(--font-body); font-size: 1rem; }
.coupon-panel__applied { margin: 0 0 0.35rem; }
.coupon-panel__message { margin: 0 0 0.75rem; color: var(--color-text-muted); font-size: 0.9rem; }
.coupon-panel__error { color: #a3312a; font-size: 0.85rem; margin: 0.6rem 0 0; }

.price-summary { border: 1px solid var(--color-border); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.price-summary__list { list-style: none; padding: 0; margin: 0; }
.price-summary__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.price-summary__list li:last-child { border-bottom: none; }
.price-summary__name { display: flex; flex-direction: column; }
.price-summary__qty { font-size: 0.78rem; color: var(--color-text-muted); }
.price-summary__amount { text-align: right; white-space: nowrap; }
.price-summary__tag { display: block; font-size: 0.78rem; color: var(--color-champagne); font-weight: normal; }
.price-summary__original { display: block; font-size: 0.78rem; color: var(--color-text-muted); font-weight: normal; white-space: normal; }
.price-summary__total { text-align: right; margin: 0.75rem 0 0; }
.price-summary__message { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.5rem 0 0; }
.price-summary__pending { font-size: 0.85rem; color: #a3312a; margin: 0.5rem 0 0; }

#submit-button { display: block; margin: 1.5rem auto 0; }

.edit-selection-link { text-align: center; margin-top: 1.5rem; }
.edit-selection-link--group { display: flex; justify-content: center; gap: 1.5rem; }
.edit-selection-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-champagne);
  text-decoration: none;
}
.edit-selection-link a:hover, .edit-selection-link a:focus-visible { color: var(--color-champagne-light); }

form.stacked-form label { display: block; margin-bottom: 1rem; font-family: var(--font-sans); font-size: 0.9rem; }
.field-help { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--color-text-muted); }

/* First/last name split (owner-test fix pass): a single compact row on
   desktop, stacked (the plain default — no override needed) on mobile. */
.name-fields-row { display: flex; flex-direction: column; }
@media (min-width: 641px) {
  .name-fields-row { flex-direction: row; gap: 1rem; }
  .name-fields-row label { flex: 1; }
}

.event-address-fields { border: 1px solid var(--color-border); padding: 1rem; margin: 0 0 1rem; }
.event-address-fields legend { padding: 0 0.4rem; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.event-address-fields__confirm-toggle { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.3rem; cursor: pointer; }
/* Specificity note: `form.stacked-form input { width: 100%; display: block; }`
   (below) outranks a same-weight class selector on the checkbox, which
   stretched it into a full-width box instead of a normal checkbox sitting
   beside its label text. Matching `form.stacked-form` in this selector too
   restores the checkbox to its intrinsic size so text wraps beside it,
   never underneath. */
form.stacked-form .event-address-fields__confirm-toggle input {
  display: inline-block;
  width: auto;
  margin: 0.15rem 0 0;
  flex: none;
}
/* Comfortable breathing room before the next field (Venue name) — the
   help text otherwise sits flush against it. */
.event-address-fields__confirm-toggle + .field-help { margin-bottom: 1rem; }
form.stacked-form input,
form.stacked-form select,
form.stacked-form textarea {
  display: block;
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.3rem;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  background: var(--color-surface);
}

/* Sales offer editor stages 2-4: these fields live OUTSIDE the offer
   <form> (bound to it via the HTML `form` attribute, same technique as
   the package editor's action bar), so the `form.stacked-form` rules
   above don't reach them. Same declarations, own scope. */
.staff-offer-fields label { display: block; margin-bottom: 1rem; font-family: var(--font-sans); font-size: 0.9rem; }
.staff-offer-fields input,
.staff-offer-fields select {
  display: block;
  width: 100%;
  max-width: 32rem;
  padding: 0.6rem;
  margin-top: 0.3rem;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  background: var(--color-surface);
}
.staff-offer-fields input[name="displayOrder"] { max-width: 8rem; }

/* Compact contract/payment verification rows (owner-test fix pass):
   one row per requirement — checkbox + label | amount | reference —
   instead of the checkbox and its label/amount/reference inputs
   scattered across a 2-column .staff-editor-grid. Same specificity
   technique as .event-address-fields__confirm-toggle above: matching
   `form.stacked-form` in the selector outranks the broad
   `form.stacked-form label`/`input` rules (two classes beat one class
   plus one type), so these compact rows win regardless of source order. */
.staff-verify-rows { margin: 0.5rem 0 1rem; }
.staff-verify-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); }
.staff-verify-row:last-child { border-bottom: none; }
.staff-verify-row--done { color: var(--color-text-muted); font-size: 0.88rem; }
form.stacked-form .staff-verify-row__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 12rem;
  margin-bottom: 0;
  cursor: pointer;
}
form.stacked-form .staff-verify-row__check input {
  display: inline-block;
  width: auto;
  margin: 0;
  flex: none;
}
form.stacked-form .staff-verify-row__field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 13rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  white-space: nowrap;
}
form.stacked-form .staff-verify-row__field input {
  display: inline-block;
  width: 7rem;
  margin: 0;
}

/* Balanced breathing room around the Availability heading specifically —
   scoped to this one wrapper (not .section__title/.section__eyebrow
   globally, which are shared by every other page's heading) so the
   compact rental-picker/edit-controls/submit-button below are untouched. */
.availability-intro { padding: 0.5rem 0 2rem; }

.availability-form-wrap { max-width: 32rem; margin: 0 auto; text-align: center; }
.availability-form-wrap .stacked-form { text-align: center; }
.availability-form-wrap .stacked-form input,
.availability-form-wrap .stacked-form select { text-align: center; }

/* Check Your Date: one step visible at a time (date -> rentals -> result),
   each sized to the same centered availability-form-wrap column so the
   whole flow feels like a single consistent panel. */

.availability-step { width: 100%; }
.availability-step[hidden] { display: none; }
/* Gate 4 acceptance (real iPhone): the native date field. iOS Safari ignores
   the column's centered text and renders an empty date control as a blank
   box of its own height, so give it an explicit, touch-sized height, keep it
   inside the column, and centre its value. Still the browser's own picker. */
.availability-date-label { display: block; margin-bottom: 0.35rem; font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
form.stacked-form #availability-date {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 20rem;
  min-width: 0;
  min-height: 2.9rem;
  margin: 0 auto 0.75rem;
  line-height: 1.4;
  font-size: 1rem;
  text-align: center;
}
#availability-date::-webkit-date-and-time-value { text-align: center; }
.availability-step--enter { animation: availability-step-in 0.28s ease; }
@keyframes availability-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-edit-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne);
  text-decoration: underline;
  cursor: pointer;
}
.step-edit-link:hover, .step-edit-link:focus-visible { color: var(--color-champagne-light); }
.step-edit-row { display: flex; justify-content: center; gap: 1.5rem; }

.rental-picker__hint { color: var(--color-text-muted); font-size: 0.85rem; margin: 0 0 1.25rem; }

/* §5 compact availability selector: Packages/Individual Rentals are
   collapsible <details> groups (native, no JS required to open/close)
   with a running selection count in the summary and thumbnails per row. */
.rental-picker__group { border: 1px solid var(--color-border); padding: 0.75rem 1rem; margin: 0 0 0.85rem; text-align: left; }
.rental-picker__legend {
  width: 100%;
  padding: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 0.75rem;
}
.rental-picker__legend--toggle {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0;
}
.rental-picker__group[open] .rental-picker__legend--toggle { margin-bottom: 0.75rem; }
.rental-picker__legend--toggle::-webkit-details-marker { display: none; }
.rental-picker__legend--toggle::marker { display: none; content: ''; }
.rental-picker__count {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-muted);
}

.rental-picker__options { display: flex; flex-direction: column; gap: 0.6rem; }

/* Shared Packages/Individual Rentals modal (rental-picker-modal.js): same
   native <dialog>.showModal() top-layer pattern as .offer-reveal-modal
   and .expo-category-modal above — above every header/section
   regardless of ancestor stacking context, applied at every viewport
   width (this component has no separate mobile interaction to
   preserve, unlike the bridal-show category drawer). */
.rental-picker__modal {
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  width: min(28rem, calc(100vw - 2rem));
  margin: auto;
  overflow: hidden; /* header stays put; __body below scrolls independently */
  max-height: 90vh; /* static-viewport fallback, kept even where dvh is supported */
  max-height: 90dvh;
}
.rental-picker__modal[open] { display: flex; flex-direction: column; }
.rental-picker__modal::backdrop { background: rgba(20, 17, 16, 0.6); }

.rental-picker__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 3px solid var(--color-champagne);
  flex: 0 0 auto;
}
.rental-picker__modal-title { font-family: var(--font-display); font-size: 1.2rem; margin: 0; text-transform: none; }
.rental-picker__modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -0.5rem -0.5rem -0.5rem 0;
}
.rental-picker__modal-body {
  flex: 1 1 auto;
  min-height: 0; /* required for a flex child's own overflow-y:auto to actually scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.rental-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--color-border);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rental-option:hover { border-color: var(--color-champagne); }
.rental-option:has(input:checked) { border-color: var(--color-champagne); background: rgba(201, 161, 90, 0.08); }
.rental-option input { flex: none; margin: 0; accent-color: var(--color-champagne); }
.rental-option__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-border);
}
.rental-option__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rental-option__body { display: flex; flex: 1; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rental-option__name { font-family: var(--font-body); }
.rental-option__price { color: var(--color-champagne); font-weight: bold; font-size: 0.85rem; white-space: nowrap; }

.rental-option--fixed { cursor: default; }
.rental-option--fixed:hover { border-color: var(--color-border); }
.rental-option__included-tag {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.package-fixed-items { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

/* Aggregated package-selection modal (LB-048 Slice 2) — reuses
   .rental-picker__modal's shell (header/backdrop/sizing) entirely; these
   rules only style what's unique to this modal's body content. */
.package-selection-modal__fixed { margin-bottom: 1.25rem; }
.package-selection-modal__fixed-heading {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 0.5rem;
}
.package-selection-modal__group { margin-bottom: 1.5rem; }
.package-selection-modal__group:last-child { margin-bottom: 0; }
.package-selection-modal__group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.package-selection-modal__group-header h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0;
  text-transform: none;
}
.package-selection-modal__progress {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.package-selection-modal__summary {
  margin: 0.5rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.package-selection-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  flex: 0 0 auto;
}

.rental-picker__summary { border: 1px solid var(--color-border); padding: 0.75rem 1rem; margin-bottom: 1.25rem; text-align: left; }
.rental-picker__summary-title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 0.5rem;
}
.rental-picker__summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.rental-picker__summary-list li { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.rental-picker__summary-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
/* A package's own fixed/chosen components, shown read-only under its
   summary row — informational only, never a checkable/removable input
   and never submitted as its own field (see rental-picker.js) — this is
   display of what the resolver already includes via packageId alone, not
   a second copy of it. */
.rental-picker__summary-includes { font-size: 0.75rem; color: var(--color-text-muted); }
.rental-picker__summary-remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.rental-picker__summary-remove:hover, .rental-picker__summary-remove:focus-visible { color: var(--color-champagne); }

.availability-form-wrap .status-banner { text-align: center; }
.availability-form-wrap .status-banner ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.availability-form-wrap .status-banner li { margin-bottom: 0.5rem; }
.availability-form-wrap .status-banner form { margin-top: 0.5rem; }

table.staff-table { width: 100%; border-collapse: collapse; }
table.staff-table th,
table.staff-table td { padding: 0.5rem; border-bottom: 1px solid var(--color-border); text-align: left; }

@media (max-width: 640px) {
  /* staff-table--stack: at phone width a list table becomes one labelled
     card per row, so the page never scrolls sideways and no column or
     action is dropped. The views give every cell a data-label and explicit
     ARIA table roles, since display:block strips table semantics in some
     browsers. The header row is visually hidden, never display:none. */
  table.staff-table--stack,
  table.staff-table--stack tbody,
  table.staff-table--stack tr,
  table.staff-table--stack td { display: block; width: 100%; }
  table.staff-table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  table.staff-table--stack tr { border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: 0.6rem; padding: 0.35rem 0.6rem; }
  table.staff-table--stack td {
    display: flex; gap: 0.75rem; justify-content: space-between; align-items: baseline;
    padding: 0.3rem 0; border-bottom: 0; min-width: 0; overflow-wrap: anywhere;
  }
  table.staff-table--stack td::before {
    content: attr(data-label); flex: 0 0 auto; font-weight: 600; color: var(--color-text-muted);
  }
  table.staff-table--stack td:first-child { font-weight: 600; }
  table.staff-table--stack td[data-label="Actions"]::before { content: none; }
  table.staff-table--stack td[data-label="Actions"] { justify-content: flex-start; padding-top: 0.45rem; }
}

.category-accordion { border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: 0.75rem; padding: 0 0.75rem; }
.category-accordion > summary { padding: 0.75rem 0; font-weight: 600; cursor: pointer; }

.staff-contact-box,
.staff-location-box,
.staff-delivery-review { border: 1px solid var(--color-border); padding: 1rem; margin: 1rem 0; }
/* LB-066: Stage 1 same-date warning — the amber of .status-banner--limited
   with a stronger edge so it is noticed, but informational (no controls). */
.staff-same-date { background: #f7ecd6; border-left: 4px solid var(--color-champagne); padding: 0.85rem 1rem; margin: 1rem 0; }
.staff-same-date__title { margin: 0 0 0.35rem; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.staff-same-date__summary { margin: 0 0 0.5rem; }
.staff-same-date__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.staff-same-date__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; overflow-wrap: anywhere; }
.staff-same-date__items { flex-basis: 100%; font-size: 0.9rem; color: var(--color-text-muted); }
.staff-same-date__shared { color: var(--color-text); font-weight: 600; }
.staff-contact-box__list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0 0; }
.staff-contact-box__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.staff-contact-box__row dt { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); min-width: 4.5rem; }
.staff-contact-box__row dd { margin: 0; }
.staff-contact-box__value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 100%; }
.staff-contact-box__link { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.staff-location-box__figure { margin: 0.75rem 0; max-width: 36rem; }
.staff-location-box__map { display: block; width: 100%; height: 240px; border: 1px solid var(--color-border); background: var(--color-bg); }
.staff-location-box__figure figcaption { margin-top: 0.3rem; }
@media (max-width: 600px) { .staff-location-box__map { height: 220px; } }
/* The same-origin "unavailable" page rendered inside that frame. */
.map-preview-fallback { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); }
.map-preview-fallback__text { margin: 0; padding: 1rem; text-align: center; font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-text-muted); }
.staff-delivery-review__breakdown { max-width: 30rem; margin: 0.75rem 0; }
.staff-delivery-review__breakdown th { text-align: left; font-weight: 400; color: var(--color-text-muted); padding-right: 1rem; }

.staff-past-rentals__tabs, .staff-leads__tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; border-bottom: 1px solid var(--color-border); }
.staff-past-rentals__tabs a, .staff-leads__tabs a { padding: 0.5rem 0; text-decoration: none; color: var(--color-text-muted); }
.staff-past-rentals__tabs a.is-active, .staff-leads__tabs a.is-active { color: var(--color-text); border-bottom: 2px solid var(--color-champagne); font-weight: 600; }
.staff-past-rentals__filters, .staff-leads__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.staff-past-rentals__filters label, .staff-leads__filters label { margin-bottom: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.staff-leads__table .staff-status-badge { white-space: nowrap; }
/* A lead's email is one unbreakable string, so let it wrap rather than force the page wider. */
.staff-leads__title, .staff-leads__table td, .staff-leads__history li { overflow-wrap: anywhere; }
.staff-leads__export { margin-left: auto; }
.staff-leads__actions { white-space: nowrap; }
.staff-leads__actions form { display: inline; margin-right: 0.5rem; }
.staff-leads__history { margin: 0; padding-left: 1.1rem; }
.staff-leads__history li { margin-bottom: 0.4rem; }
@media (max-width: 640px) {
  /* Stack each lead into its own block instead of a wide table, so a phone
     never has to scroll sideways to reach the next action or the buttons. */
  table.staff-leads__table, table.staff-leads__table tbody, table.staff-leads__table tr, table.staff-leads__table td { display: block; }
  table.staff-leads__table thead { display: none; }
  table.staff-leads__table tr { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
  table.staff-leads__table td { padding: 0.25rem 0; border-bottom: 0; }
  .staff-leads__export { margin-left: 0; }
}
.staff-pagination { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }

/* Motion: scroll reveal + reduced-motion support */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--stagger-1 { transition-delay: 0.08s; }
.reveal--stagger-2 { transition-delay: 0.16s; }
.reveal--stagger-3 { transition-delay: 0.24s; }
.reveal--stagger-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* §9: if scroll-reveal.js fails to load/run, .reveal content (including
   the Bridal Show Exclusive section) must never stay permanently
   invisible — this is the one site-wide fallback for that, rather than
   a one-off fix scoped to a single section. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* Floating navigation widget: rentals back-to-top */

.back-to-top-widget {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 20;
}
.back-to-top-widget.is-visible { opacity: 1; pointer-events: auto; }
.back-to-top-widget__arrow {
  width: 16px;
  height: 16px;
  color: var(--color-black);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 18px;
  border: 1.5px solid var(--color-black);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.back-to-top:hover, .back-to-top:focus-visible { border-color: var(--color-black-surface); }
/* The SVG itself has ~0% internal whitespace (its content already fills
   its own viewBox edge to edge) — the gap around the mark was purely the
   button being much bigger than a small fixed image size. Sized here to
   leave a small, balanced margin inside the button instead. */
.back-to-top img { width: 40px; height: auto; display: block; }

@media (max-width: 900px) {
  .back-to-top-widget { left: 1rem; }
  .back-to-top { width: 46px; height: 46px; }
  .back-to-top img { width: 34px; }
}

/* Responsive */

@media (max-width: 900px) {
  .category-cards, .package-cards, .gallery-grid, .process-grid { grid-template-columns: 1fr; }
  .event-details { grid-template-columns: 1fr; }
  .item-detail { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__spacer { display: none; }
  .site-header { padding: 1rem 1.25rem; }
  /* Header padding grows to 1rem * 2 = 32px here; the logo (43px) is
     still the tallest child of the full header (see the base
     breakpoint above), so full header = 32 + 43 = 75px. */
  main.site-main:has(> .hero) { margin-top: -75px; }
  /* Same 43px logo, same math as .hero above at this breakpoint. */
  main.site-main:has(> .bridal-hero) { margin-top: -75px; }
  .site-header--simple-no-logo { min-height: 75px; }
  .section { padding: 3rem 1.25rem; }
  .site-menu { width: 100%; }

  /* §3 overall mobile presentation: center intro copy/CTAs on inner
     pages that are left-aligned at desktop. Header/nav alignment above
     is untouched. */
  .page-content .section__title, .page-content .section__eyebrow, .page-content .section__lede,
  .event-details__title, .event-details__lede, .event-details .section__eyebrow,
  .rentals-category .section__title { text-align: center; }
  .event-details { text-align: center; justify-items: center; }
  /* Gate 2F (D15): the image frame has no in-flow content (its image is
     absolutely positioned), so centring it shrank it to 0 x 0 and the
     Personalized Details / feature-image picture vanished on phones. */
  .event-details > .media-frame { justify-self: stretch; width: 100%; }
  .site-footer__grid, .site-footer__bottom { text-align: center; }

  /* Compact mobile footer: smaller logo, tighter gaps/padding.
     Top padding doubled (0.6rem -> 1.2rem) per explicit request. */
  .site-footer__grid { padding: 1.2rem 1.25rem 0.25rem; gap: 0.6rem; }
  .site-footer__brand { justify-content: center; }
  .site-footer__brand img { height: 43px; }
  .site-footer__social { justify-content: center; gap: 0.5rem; }
  .site-footer__social a { width: 30px; height: 30px; }
  .footer-newsletter__form { gap: 0.4rem; }
  .site-footer__bottom { padding: 0.25rem 1.25rem 0.4rem; font-size: 0.7rem; }
}

/* Compact single-page staff create/edit forms (rentals/packages, catalog
   save-model pass) — short fields in two desktop columns, collapsing to
   one column on mobile (see the final @media block below, appended
   there rather than here for the same cascade-ordering reason documented
   just below: a same-specificity mobile override written near its
   desktop counterpart loses to later rules further down the file). */
.staff-compact-editor { max-width: 56rem; }
.staff-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin-bottom: 0.75rem; }
.staff-editor-grid label { display: flex; flex-direction: column; gap: 0.25rem; }
.staff-editor-collapsible { border: 1px solid var(--color-border); border-radius: 4px; padding: 0 0.9rem 0.9rem; margin-bottom: 0.75rem; }
.staff-editor-collapsible > summary { padding: 0.75rem 0; font-weight: 600; cursor: pointer; list-style: revert; }
.staff-editor-actionbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.75rem 0 1.25rem; }

/* §3 overall mobile presentation: reduce oversized phone typography and
   card/section padding. A narrower cutoff than the 900px tablet
   breakpoint above so tablets keep the roomier desktop-like spacing.

   This is also the single, consolidated place for every mobile card
   correction (grid columns, image-first proportions, compact captions) —
   deliberately kept in one block, appended last, rather than scattered
   across the file: two-column-grid overrides for .category-cards/
   .package-cards/.gallery-grid written earlier (near the desktop grid
   definitions, or before .item-grid's own unconditional base rule) were
   silently losing the cascade to later same-specificity rules further
   down the file — including the very .grid-template-columns:1fr fallback
   two lines above — regardless of the max-width:640px condition matching.
   Putting the real mobile-card rules last, after every rule they need to
   beat, is what actually makes them win. */
/* Persistent horizontal top navigation (calendar-dashboard pass —
   replaces the sidebar/rail/drawer chrome from every prior pass:
   cream/black/gold, matching the rest of the site's palette exactly,
   never a new color). Sticky at the top so the mobile toggle stays
   reachable at any scroll position. Desktop: every link already
   visible, all the time — no collapse/rail state to manage. Mobile:
   the link list is a plain in-flow dropdown that pushes content down
   when open (no fixed positioning, no overlay, no body scroll lock,
   nothing that can ever get "stuck" — the browser's native scrolling
   just handles it). With no JavaScript the link list stays plain,
   always-visible, in-flow markup at every width — fully usable. Only
   .js-enabled (added by staff-nav.js once it actually runs) turns the
   mobile toggle into a real collapse control. */
.staff-topnav { background: var(--color-black); color: var(--color-text-inverse); position: sticky; top: 0; z-index: 30; }
.staff-topnav__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1.25rem; }
.staff-topnav__brand { display: flex; align-items: center; color: var(--color-champagne-light); text-decoration: none; }
.staff-topnav__brand img { display: block; height: 31px; width: auto; }
.staff-topnav__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; padding: 0; background: transparent; border: none; cursor: pointer; flex-shrink: 0; }
.staff-topnav__toggle:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.staff-topnav__toggle-bar { display: block; width: 20px; height: 2px; background: var(--color-text-inverse); transition: transform 0.25s ease, opacity 0.25s ease; }
.staff-topnav__toggle[aria-expanded="true"] .staff-topnav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.staff-topnav__toggle[aria-expanded="true"] .staff-topnav__toggle-bar:nth-child(2) { opacity: 0; }
.staff-topnav__toggle[aria-expanded="true"] .staff-topnav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Grouped navigation (Operational Workflow Polish). Baseline (no JS, any
   width): every group's links are visible in normal flow — nothing is
   hidden behind a control that might not work. staff-nav.js adds
   .js-enabled, and only then do the desktop dropdowns / mobile menu
   collapse (rules below). Never position: fixed, never a backdrop or
   body scroll-lock. */
.staff-topnav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; padding: 0 1.25rem 0.65rem; }
.staff-topnav__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.staff-topnav__item, .staff-topnav__group { margin: 0; }
.staff-topnav__submenu { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.staff-topnav__links a { display: inline-block; padding: 0.4rem 0.6rem; color: var(--color-text-inverse); text-decoration: none; border-radius: 4px; font-size: 0.85rem; white-space: nowrap; }
.staff-topnav__links a:hover, .staff-topnav__links a:focus-visible { background: var(--color-black-surface); }
.staff-topnav__links a:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 1px; }
.staff-topnav__links a.is-active { background: var(--color-champagne); color: var(--color-black); font-weight: 600; }
.staff-topnav__group-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.6rem; background: transparent; border: none; border-radius: 4px; color: var(--color-text-muted-inverse); font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.staff-topnav__group-toggle:hover { background: var(--color-black-surface); color: var(--color-text-inverse); }
.staff-topnav__group-toggle:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 1px; }
.staff-topnav__group.is-current > .staff-topnav__group-toggle { color: var(--color-champagne-light); box-shadow: inset 0 -2px 0 var(--color-champagne); }
.staff-topnav__caret { display: none; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.staff-topnav.js-enabled .staff-topnav__caret { display: inline-block; }
.staff-topnav__group-toggle[aria-expanded="true"] .staff-topnav__caret { transform: translateY(1px) rotate(-135deg); }
.staff-topnav__logout { margin-left: auto; }

@media (min-width: 851px) {
  .staff-topnav.js-enabled { display: flex; align-items: center; }
  .staff-topnav.js-enabled .staff-topnav__bar { flex: 0 0 auto; }
  .staff-topnav.js-enabled .staff-topnav__links { flex: 1 1 auto; flex-wrap: nowrap; padding: 0 1.25rem 0 0; }
  .staff-topnav.js-enabled .staff-topnav__group { position: relative; }
  .staff-topnav.js-enabled .staff-topnav__submenu {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 40;
    flex-direction: column;
    min-width: 13rem;
    padding: 0.35rem;
    background: var(--color-black-surface);
    border: 1px solid var(--color-border-dark);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
  .staff-topnav.js-enabled .staff-topnav__group.is-open > .staff-topnav__submenu { display: flex; }
  .staff-topnav.js-enabled .staff-topnav__submenu a { display: block; }
  .staff-topnav.js-enabled .staff-topnav__submenu a:hover, .staff-topnav.js-enabled .staff-topnav__submenu a:focus-visible { background: var(--color-black); }
  .staff-topnav.js-enabled .staff-topnav__submenu a.is-active { background: var(--color-champagne); color: var(--color-black); }
}
/* main.site-main:not(:has(.section, .page-content)) (fallback container
   for JS-less staff/error pages, defined earlier) still matches
   .staff-main since it has neither child — its max-width/centering must
   not apply here, so this selector matches its specificity (two classes
   vs one type + :not()) and comes later in the file to win. */
main.site-main.staff-main { max-width: none; margin: 0; padding: 1.25rem; }

/* Compact booking-detail summary bar (guided workflow) — left-aligned,
   like every other staff table/label, never centered (the customer-page
   centered style is deliberately NOT reused here). */
.staff-summary-bar { display: flex; flex-wrap: wrap; gap: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.85rem 1rem; margin: 1rem 0 1.25rem; }
.staff-summary-bar__item { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
.staff-summary-bar__label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.staff-summary-bar__value { font-size: 0.92rem; }

/* Staff dashboard — calendar/timeline pass. Cream/black/gold throughout
   (var(--color-*)), reusing the site's existing status-banner palette
   (--available green / --limited gold / --unavailable red) so pending/
   confirmed/overdue read consistently with every other staff screen,
   never a new color scheme invented for just this page. */
.staff-needs-attention { margin: 1rem 0 1.25rem; }
.staff-needs-attention__title { font-size: 1rem; margin: 0 0 0.5rem; }
.staff-needs-attention__empty { color: var(--color-text-muted); font-size: 0.9rem; }
.staff-needs-attention__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.staff-needs-attention__item { border-radius: 6px; }
.staff-needs-attention__item a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.7rem; border-radius: 6px; text-decoration: none; color: var(--color-text); font-size: 0.82rem; }
.staff-needs-attention__item--urgent a { background: #f5e2df; }
.staff-needs-attention__item--soon a { background: #f7ecd6; }
.staff-needs-attention__label { font-weight: 600; }
.staff-needs-attention__customer { color: var(--color-text-muted); font-size: 0.78rem; }

/* Rental Closeouts (LB-022) — its own compact, "screams at staff" area,
   deliberately separate from Needs Attention above (a different workflow,
   its own gold/red/green urgency model). Same three-color palette as
   status-banner/Needs Attention — never a new color scheme invented for
   this. */
.staff-closeouts { margin: 1rem 0 1.25rem; }
.staff-closeouts__title { font-size: 1rem; margin: 0 0 0.5rem; }
.staff-closeouts__empty { color: var(--color-text-muted); font-size: 0.9rem; }
.staff-closeouts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.staff-closeouts__item { border-radius: 6px; }
.staff-closeouts__item a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.7rem; border-radius: 6px; text-decoration: none; color: var(--color-text); font-size: 0.82rem; }
.staff-closeouts__item--red a { background: #f5e2df; }
.staff-closeouts__item--gold a { background: #f7ecd6; }
.staff-closeouts__item--green a { background: #e5f0e2; }
.staff-closeouts__label { font-weight: 600; }
.staff-closeouts__customer { color: var(--color-text-muted); font-size: 0.78rem; }

.staff-dashboard-viewtabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.staff-dashboard-viewtabs a { padding: 0.4rem 0.8rem; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; color: var(--color-text); font-size: 0.85rem; }
.staff-dashboard-viewtabs a.is-active { background: var(--color-black); color: var(--color-text-inverse); border-color: var(--color-black); }

.staff-dashboard-calendar-layout { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.staff-calendar { flex: 1 1 auto; min-width: 0; width: 100%; }
.staff-calendar__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.staff-calendar__modes, .staff-calendar__nav { display: flex; gap: 0.3rem; }
.staff-calendar__modes a { padding: 0.35rem 0.65rem; border: 1px solid var(--color-border); border-radius: 4px; text-decoration: none; color: var(--color-text); font-size: 0.8rem; }
.staff-calendar__modes a.is-active { background: var(--color-champagne); color: var(--color-black); font-weight: 600; }
.staff-calendar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-bottom: 0.75rem; font-size: 0.8rem; }
.staff-calendar__filters label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; margin: 0; }
.staff-calendar__deadline-toggle { padding-left: 0.5rem; border-left: 1px solid var(--color-border); }
.staff-calendar__heading { font-weight: 600; margin: 0 0 0.5rem; }

/* Calendar date navigation (owner-feedback pass, item 1) — compact on
   any width: both forms wrap onto their own line if the viewport is
   too narrow to fit side by side, and every control stays a normal
   touch-sized tap target. */
.staff-calendar__jump-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.6rem; }
.staff-calendar__monthyear-jump, .staff-calendar__date-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.staff-calendar__monthyear-jump select, .staff-calendar__date-jump input[type="date"] { font-size: 0.8rem; padding: 0.25rem 0.35rem; }
.staff-calendar__year-input { width: 5.5em; font-size: 0.8rem; padding: 0.25rem 0.35rem; }

.staff-calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.staff-calendar__grid th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding: 0.3rem; text-align: left; }
.staff-calendar__cell { border: 1px solid var(--color-border); vertical-align: top; padding: 0.3rem; height: 5.5rem; overflow: hidden; }
.staff-calendar__cell--outside { background: var(--color-bg); color: var(--color-text-muted); }
.staff-calendar__cell--today { background: var(--color-champagne-light); }
/* The date a staff member just jumped to via month/year or "Jump to
   date" (never applied when it's also today, which already has its own
   highlight above) — a distinct outline rather than a fill, so it
   never gets confused with Today's own color. */
.staff-calendar__cell--selected { outline: 2px solid var(--color-black); outline-offset: -2px; }
.staff-calendar__daynum { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.2rem; }
.staff-calendar__chips { display: flex; flex-direction: column; gap: 0.15rem; }

/* Owner-feedback pass, item 2: chips wrap instead of clipping (a status
   + a separate outstanding-action indicator + the customer name can
   need more than one line) — never widens the cell itself, since the
   chip still fills the cell's own fixed width (100%) and only grows
   taller. */
.staff-calendar-chip { display: block; width: 100%; text-align: left; border: none; border-radius: 3px; padding: 0.15rem 0.3rem; font-size: 0.68rem; line-height: 1.25; cursor: pointer; overflow: hidden; white-space: normal; word-break: break-word; }
.staff-calendar-chip__status { font-weight: 700; display: block; }
/* The separate, concise "still needs action" indicator for an
   otherwise-Confirmed booking — never replaces the status line above
   it, per "keep the green Confirmed label and show a separate concise
   action indicator." */
.staff-calendar-chip__action { display: block; font-style: italic; }
/* One accessible color per status category (dashboardService.STATUS_CATEGORIES) —
   every chip still carries its own text label too, never color alone. */
.staff-calendar-chip--requested { background: #d7e6f7; color: var(--color-text); }
.staff-calendar-chip--published { background: #e1d6f2; color: var(--color-text); }
.staff-calendar-chip--needs-verification { background: #f7dd9b; color: var(--color-text); }
.staff-calendar-chip--confirmed { background: #dcefda; color: var(--color-text); }
.staff-calendar-chip--completed { background: var(--color-border); color: var(--color-text); }
.staff-calendar-chip--canceled, .staff-calendar-chip--expired { background: #e8e4de; color: var(--color-text-muted); }
.staff-calendar-chip--deadline { background: transparent; border: 1px dashed var(--color-black); color: var(--color-text); }
.staff-calendar-chip--blocked { background: #f5e2df; color: var(--color-text); }
.staff-calendar-chip--more { background: transparent; color: var(--color-text-muted); text-decoration: underline; }
.staff-calendar-chip--holiday { background: #e9e3f5; color: var(--color-text); text-decoration: none; }

/* Same color-by-category convention, reusable outside the calendar grid
   (Upcoming, the booking-preview modal) as a small inline badge rather
   than a full-width chip. */
.staff-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.staff-status-badge--requested { background: #d7e6f7; color: var(--color-text); }
.staff-status-badge--published { background: #e1d6f2; color: var(--color-text); }
.staff-status-badge--needs-verification { background: #f7dd9b; color: var(--color-text); }
.staff-status-badge--confirmed { background: #dcefda; color: var(--color-text); }
.staff-status-badge--completed { background: var(--color-border); color: var(--color-text); }
.staff-status-badge--canceled, .staff-status-badge--expired { background: #e8e4de; color: var(--color-text-muted); }
.staff-status-badge--lead-new, .staff-status-badge--temp-cold { background: #d7e6f7; color: var(--color-text); }
.staff-status-badge--lead-follow_up, .staff-status-badge--temp-warm { background: #f7dd9b; color: var(--color-text); }
.staff-status-badge--lead-converted { background: #dcefda; color: var(--color-text); }
.staff-status-badge--lead-closed { background: #e8e4de; color: var(--color-text-muted); }
.staff-status-badge--temp-hot, .staff-status-badge--lead-overdue { background: #f5e2df; color: var(--color-text); }
.staff-status-action { font-size: 0.78rem; font-style: italic; color: var(--color-text-muted); margin-left: 0.4rem; }

.staff-calendar__week { display: flex; gap: 0.4rem; overflow-x: auto; }
.staff-calendar__cell--week { flex: 1 0 8rem; min-width: 8rem; height: auto; min-height: 8rem; }
.staff-calendar__agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.staff-calendar__agenda-day { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.7rem; }
.staff-calendar__agenda-empty { color: var(--color-text-muted); font-size: 0.9rem; }

.staff-timeline { flex: 0 0 auto; width: 100%; border: 1px solid var(--color-border); border-radius: 6px; padding: 0.75rem 1rem; background: var(--color-surface); }
.staff-timeline h2 { font-size: 0.95rem; margin: 0; }
.staff-timeline__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.5rem; }
.staff-upcoming-range { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.staff-upcoming-range a { padding: 0.2rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; color: var(--color-text); font-size: 0.72rem; }
.staff-upcoming-range a.is-active { background: var(--color-black); color: var(--color-text-inverse); border-color: var(--color-black); }
.staff-timeline__empty { color: var(--color-text-muted); font-size: 0.85rem; }
.staff-timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.staff-timeline__item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.5rem; align-items: baseline; font-size: 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); }
.staff-timeline__item:last-child { border-bottom: none; }
.staff-timeline__item--overdue .staff-timeline__kind { color: #a4342c; font-weight: 600; }
.staff-timeline__item--task .staff-timeline__kind { color: #6b4fa0; }
.staff-timeline__date { font-weight: 600; grid-column: 1; }
.staff-timeline__kind { grid-column: 2; }
.staff-timeline__customer { grid-column: 2; color: var(--color-text-muted); font-size: 0.75rem; }
.staff-timeline__action { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 0.78rem; }

.staff-modal-overlay { position: fixed; inset: 0; background: rgba(20, 17, 16, 0.55); z-index: 60; }
.staff-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); max-height: 85vh; overflow-y: auto; background: var(--color-surface); border-radius: 8px; padding: 1.5rem; z-index: 61; box-shadow: 0 20px 40px rgba(20, 17, 16, 0.3); }
.staff-modal__close { position: absolute; top: 0.75rem; right: 0.9rem; background: transparent; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--color-text); }
.staff-modal__facts { margin: 0.75rem 0; font-size: 0.88rem; }
.staff-modal__facts dt { font-weight: 600; margin-top: 0.4rem; }
.staff-modal__facts dd { margin: 0 0 0.2rem; }
.staff-modal__next-action { font-style: italic; font-size: 0.85rem; }
.staff-modal__status-detail { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--color-text-muted); }

.staff-manual-tasks { margin: 1.5rem 0; }
.staff-task-add { margin-bottom: 0.75rem; }
.staff-task-add summary { cursor: pointer; font-weight: 600; }
.staff-task-add form { margin-top: 0.6rem; max-width: 26rem; }
.staff-task-filter { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.staff-task-filter a { padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; color: var(--color-text); font-size: 0.8rem; }
.staff-task-filter a.is-active { background: var(--color-black); color: var(--color-text-inverse); border-color: var(--color-black); }
.staff-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.staff-task-item { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.6rem 0.8rem; }
.staff-task-item summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; list-style: none; }
.staff-task-item summary::-webkit-details-marker { display: none; }
.staff-task-item__title { font-weight: 600; }
.staff-task-item__due { color: var(--color-text-muted); font-size: 0.82rem; }
.staff-task-item__notes { margin: 0.5rem 0; font-size: 0.85rem; color: var(--color-text-muted); }
.staff-task-item form.stacked-form { margin: 0.6rem 0; max-width: 26rem; }
.staff-task-item__actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

@media (min-width: 901px) {
  .staff-dashboard-calendar-layout { flex-direction: row; align-items: flex-start; }
  .staff-calendar { flex: 1 1 68%; }
  .staff-timeline { flex: 0 0 28%; width: auto; position: sticky; top: 5.5rem; }
}

/* Below the desktop threshold (not the file's usual 640px/900px cutoffs
   — nothing else in the file touches .staff-topnav, so no cascade-
   ordering conflict requires appending this to the final block),
   collapse the link list behind the toggle — but only once
   staff-nav.js has actually added .js-enabled; see the plain (no media
   query) rules above for the JS-less baseline, which stays fully
   visible, in normal document flow. */
@media (max-width: 850px) {
  .staff-topnav.js-enabled .staff-topnav__toggle { display: flex; }
  .staff-topnav.js-enabled .staff-topnav__links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.4rem 1.25rem 0.9rem;
  }
  .staff-topnav.js-enabled .staff-topnav__links.is-open { display: flex; }
  .staff-topnav.js-enabled .staff-topnav__logout { margin-left: 0; margin-top: 0.4rem; }
  /* Mobile groups: in-flow accordion sections inside the one menu. */
  .staff-topnav.js-enabled .staff-topnav__menu { flex-direction: column; align-items: stretch; }
  .staff-topnav.js-enabled .staff-topnav__group-toggle { width: 100%; justify-content: space-between; padding: 0.6rem; font-size: 0.95rem; }
  .staff-topnav.js-enabled .staff-topnav__links a { display: block; padding: 0.55rem 0.6rem; font-size: 0.95rem; }
  .staff-topnav.js-enabled .staff-topnav__submenu { display: none; flex-direction: column; padding: 0 0 0.35rem 0.9rem; border-left: 2px solid var(--color-border-dark); margin-left: 0.6rem; }
  .staff-topnav.js-enabled .staff-topnav__group.is-open > .staff-topnav__submenu { display: flex; }
  .staff-topnav.js-enabled .staff-topnav__links.is-open { max-height: calc(100vh - 4rem); overflow-y: auto; }
}

/* Horizontal guided-stage selector (owner-test fix, second pass) —
   replaces the prior long vertical stack of six <details> panels. No
   JS: .staff-stage-tabs is still a real, clickable row of in-page links
   (native fragment-jump works), and every .staff-stage-panel stays
   visible/stacked (no rule here hides them) — fully inspectable with no
   JavaScript. Only once staff-stage-tabs.js adds .js-enabled to the tab
   row does the general-sibling rule below collapse the six panels down
   to whichever one is .is-selected; see that script for the real ARIA
   tab semantics (aria-selected/roving tabindex) and stage-position
   preservation this class alone doesn't provide. */
.staff-stage-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; padding: 0; }
.staff-stage-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-black);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  white-space: nowrap;
}
.staff-stage-tab:hover, .staff-stage-tab:focus-visible { border-color: var(--color-champagne); }
.staff-stage-tab__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--color-border);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.staff-stage-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-text-inverse);
  font-size: 0.68rem;
  font-weight: 700;
}
/* Statuses: done (already passed — a real, distinct green, not just a
   gold tint on the number badge; never color-alone, since the badge is
   always a checkmark glyph plus an sr-only " — completed" suffix on the
   tab's accessible name), current (what to do next, or being
   inspected — the existing gold treatment), upcoming (not reached yet
   — neutral), attention (current AND something needs urgent review —
   see stageStatus() in the view). */
.staff-stage-tab--done { background: #3f8752; border-color: #3f8752; color: #ffffff; }
.staff-stage-tab--done .staff-stage-tab__num { background: #ffffff; color: #3f8752; }
.staff-stage-tab--done:hover, .staff-stage-tab--done:focus-visible { border-color: #2c6a3d; }
.staff-stage-tab--upcoming { opacity: 0.65; }
.staff-stage-tab--current, .staff-stage-tab--attention { border-color: var(--color-champagne); background: var(--color-champagne-light); }
.staff-stage-tab--attention .staff-stage-tab__num { background: var(--color-black); color: var(--color-text-inverse); }
/* Other Actions (owner-approved): deliberately neutral, same as an
   upcoming stage — never green/gold, since it has no completion
   status and is never a workflow stage. */
.staff-stage-tab--other { opacity: 0.85; }
/* Linked SFG: neutral like Other Actions with none linked; blue (white
   text, about 6:1 contrast) once one or more are linked. The count in the
   label carries the same meaning without colour. */
.staff-stage-tab--has-linked { background: #1f5fa8; border-color: #1f5fa8; color: #ffffff; }
.staff-stage-tab--has-linked:hover, .staff-stage-tab--has-linked:focus-visible { border-color: #143f70; }
.staff-linked-sfg__confirm { margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--color-border); }
/* Real ARIA-tab selected state, once JS is managing it — a plain hover
   border isn't enough once one tab is genuinely "selected" among many.
   Combines with --done's green fill (this rule only overrides the
   border/spacing/weight, not background/color) so a selected completed
   stage stays green with its own distinct black outline, never just a
   plain highlighted green square indistinguishable from an unselected
   one. */
.staff-stage-tab.is-selected { border-color: var(--color-black); border-width: 2px; padding: 0.4rem 0.7rem; font-weight: 600; }
.staff-stage-tab--done.is-selected { border-color: var(--color-black); box-shadow: 0 0 0 1px #ffffff inset; }
.staff-stage-tab--has-linked.is-selected { border-color: var(--color-black); box-shadow: 0 0 0 1px #ffffff inset; }

.staff-stage-panel { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 6px; }
.staff-stage-panel h2 { margin-top: 0; font-size: 1.05rem; }
/* Review & Publish's plain listing summary (owner-approved catalog-
   editor extension) — compact, left-aligned, matching every other
   staff list/label. */
.staff-stage-summary { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.staff-stage-summary__blocker { color: var(--color-black); }
.staff-stage-summary__thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; margin-right: 0.4rem; vertical-align: middle; }
.staff-stage-tabs.js-enabled ~ .staff-stage-panel { display: none; }
.staff-stage-tabs.js-enabled ~ .staff-stage-panel.is-selected { display: block; }

@media (max-width: 640px) {
  .section__title { font-size: 1.5rem; }
  .section__lede { font-size: 0.92rem; margin-bottom: 1.75rem; }
  .section { padding: 2.25rem 1.25rem; }

  .category-cards,
  .package-cards,
  .item-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Image-first: a compact caption strip, not a description block. */
  .category-card__body, .package-card__body, .item-card__body { padding: 0.6rem 0.65rem; }
  .category-card__title, .package-card__title { font-size: 0.95rem; }
  .item-card__name { font-size: 0.92rem; }

  /* Compact staff create/edit forms collapse to one column — appended
     here (last) so it actually wins the cascade over .staff-editor-grid's
     two-column base rule, same reasoning as every other mobile override
     in this block. */
  .staff-editor-grid { grid-template-columns: 1fr; }

  /* Compact verification rows (owner-test fix pass): stack the checkbox
     and each amount/reference field on their own line instead of trying
     to fit three items across a narrow row — appended here (last), same
     cascade-ordering reason as every other mobile override in this
     block, so it wins over the desktop .staff-verify-row__field rule
     above regardless of specificity. The checkbox stays beside its own
     label either way, since .staff-verify-row__check is already a flex
     row. */
  form.stacked-form .staff-verify-row__check,
  form.stacked-form .staff-verify-row__field {
    flex: 1 1 100%;
  }
  form.stacked-form .staff-verify-row__field input {
    width: 100%;
  }

  /* Horizontal guided-stage selector, mobile (owner-test fix, second
     pass): a contained, horizontally-scrolling strip — never full
     page-width overflow. Appended here (last), same cascade-ordering
     reason as every other mobile override in this block. */
  .staff-stage-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
  }
  .staff-stage-tab { flex-shrink: 0; }
  /* Only once JS is managing selection does collapsing every
     non-selected label to just its numbered circle make sense — a
     no-JS visitor still needs every label readable to use these as
     plain links at all. Other Actions has no numbered circle to fall
     back to, so its label always stays visible, selected or not —
     otherwise it would collapse to a bare, unlabeled pill. */
  .staff-stage-tabs.js-enabled .staff-stage-tab__label { display: none; }
  .staff-stage-tabs.js-enabled .staff-stage-tab.is-selected .staff-stage-tab__label,
  .staff-stage-tabs.js-enabled .staff-stage-tab--other .staff-stage-tab__label,
  .staff-stage-tabs.js-enabled .staff-stage-tab--linked .staff-stage-tab__label {
    display: inline;
  }

  /* Package-selection modal footer (LB-048 Slice 2): stacked, full-width
     buttons on a narrow viewport — appended here (last), same
     cascade-ordering reason as every other mobile override in this
     block. */
  .package-selection-modal__footer { flex-direction: column-reverse; }
  .package-selection-modal__footer .button { width: 100%; }
}

/* Sales Slice 2 (LB-038 §A): customer offer cards. One compact section, used
   on the request form (before submission) and the magic-link page (after
   reservation). Cream/black/gold, same tokens as the price summary. */
.offer-section { margin: 0 0 1.75rem; padding: 1.25rem 1.25rem 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-champagne); }
.offer-section__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 0.25rem; }
.offer-section__intro { margin: 0 0 1rem; font-size: 0.88rem; color: var(--color-text-muted); }
.offer-list { list-style: none; margin: 0; padding: 0; }
.offer-card { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--color-border); }
.offer-card:not(:has(.offer-card__photo)) { grid-template-columns: 1fr; }
.offer-card__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--color-blush); }
.offer-card__headline { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.1rem; }
.offer-card__destination { margin: 0 0 0.4rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.offer-card__description { margin: 0 0 0.4rem; font-size: 0.92rem; }
.offer-card__price { margin: 0 0 0.25rem; font-weight: bold; color: var(--color-black); }
.offer-card__price-note { font-weight: normal; font-size: 0.78rem; color: var(--color-text-muted); }
.offer-card__note { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--color-text-muted); }
.offer-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.offer-card__cta { margin: 0; }
.offer-card__link { background: none; border: none; padding: 0.25rem 0; font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; }
.offer-card__link:hover { color: var(--color-black); }
.offer-card__badge { display: inline-block; padding: 0.3rem 0.7rem; font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-black); color: var(--color-champagne-light); }
.offer-card__badge--muted { background: var(--color-blush); color: var(--color-text-muted); }
.offer-card--accepted { background: linear-gradient(90deg, rgba(201, 161, 90, 0.10), transparent 60%); }
.offer-card--declined { opacity: 0.7; }
.offer-pending { margin: 0 0 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.offer-pending h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.5rem; }
.offer-pending ul { margin: 0; padding-left: 1.1rem; }
.offer-pending li { margin-bottom: 0.4rem; font-size: 0.92rem; }
.offer-pending__status { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.offer-continue { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--color-champagne); background: var(--color-surface); text-align: left; }
.offer-continue ul { list-style: none; margin: 0; padding: 0; }
.offer-continue h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.5rem; }
@media (max-width: 640px) {
  .offer-card { grid-template-columns: 4.5rem 1fr; gap: 0.75rem; }
  .offer-card__cta { width: 100%; text-align: center; }
}

.offer-pending__cancel { display: inline; margin-left: 0.5rem; }
.customer-line--replaced { text-decoration: line-through; opacity: 0.65; }
.customer-line--replaced em { text-decoration: none; display: inline-block; }
.staff-change-requests { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--color-champagne); background: #fffdf7; }
.staff-change-request { border-top: 1px solid var(--color-border); padding: 0.75rem 0; }
.staff-change-request__preview { margin: 0.4rem 0 0.75rem; padding-left: 1.1rem; }
.staff-change-request__actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; }
.staff-change-request__form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.staff-change-request__form label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 0.2rem; }
.staff-line--replaced td { text-decoration: line-through; opacity: 0.6; }
.staff-line--replaced td em { text-decoration: none; }
.offer-pending ul { list-style: none; padding: 0; }
.staff-change-requests { scroll-margin-top: 5rem; }

/* LB-049 (Operational Workflow Polish): rental editor Inventory stage —
   compact active-unit total, an "Add Quantity" row, and the per-unit list
   collapsed in a <details> (each unit is still its own record). */
.inventory-total { margin: 0.75rem 0 1rem; font-size: 1rem; }
.inventory-total strong { font-size: 1.35rem; }
.inventory-add-quantity fieldset { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.inventory-add-quantity legend { font-weight: 600; padding: 0 0.35rem; }
.inventory-add-quantity__row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
.inventory-add-quantity__row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.inventory-add-quantity__row input[type="number"] { width: 6rem; }
.inventory-units { margin: 0 0 1rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.inventory-units > summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; }
.inventory-units > summary:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.inventory-units[open] > summary { border-bottom: 1px solid var(--color-border); }
.inventory-units > .staff-table, .inventory-units > .stacked-form, .inventory-units > .field-help { margin: 0.75rem 1rem; }
table.staff-table.inventory-units__table { width: calc(100% - 2rem); }
/* Gate 4 / LB-071 4C: counts per state, Remove from Inventory beside Add
   Quantity, and server-rendered unit filters (All / Active / Unavailable /
   Retired) inside the collapsed list. */
.inventory-total { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.inventory-total__heading { font-weight: 600; }
.inventory-actions { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.inventory-units__filters { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.75rem 1rem 0; }
.inventory-units__filters a { padding: 0.2rem 0; }
.inventory-units__filters a[aria-current="page"] { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--color-champagne); }
.inventory-unit__retired { display: block; margin-top: 0.2rem; }
.inventory-unit__action { display: inline; }
.inventory-unit-remove { display: inline-block; margin-left: 0.5rem; }
.inventory-unit-remove > summary { cursor: pointer; font-size: 0.85rem; }
.inventory-unit-remove > summary:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.inventory-unit-remove__form { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: flex-end; margin-top: 0.5rem; }
.inventory-unit-remove__form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
@media (max-width: 640px) {
  .inventory-actions { grid-template-columns: 1fr; }
  .inventory-unit-remove { display: block; margin: 0.5rem 0 0; }
  .inventory-add-quantity__row { flex-direction: column; align-items: stretch; }
  .inventory-add-quantity__row input[type="number"] { width: 100%; }
  .inventory-units { overflow-x: auto; }
}

/* LB-050 (Operational Workflow Polish): customer booking-journey stages.
   Presentation only. Without JS every stage is visible and stacked; the
   progress indicator is plain text/links. booking-stages.js adds
   .booking-stages--enhanced and shows one stage at a time. */
.booking-progress-nav { margin: 0 auto 1.25rem; max-width: 40rem; }
.booking-progress { display: flex; justify-content: space-between; gap: 0.25rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.booking-progress__step { flex: 1 1 0; min-width: 0; position: relative; text-align: center; }
.booking-progress__step::before { content: ''; position: absolute; top: 0.95rem; left: -50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.booking-progress__step:first-child::before { display: none; }
.booking-progress__step--done::before, .booking-progress__step--current::before { background: var(--color-champagne); }
.booking-progress__link { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--color-text-muted); text-decoration: none; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.2; }
a.booking-progress__link:hover .booking-progress__label, a.booking-progress__link:focus-visible .booking-progress__label { text-decoration: underline; }
a.booking-progress__link:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 3px; border-radius: 4px; }
.booking-progress__num { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-bg); font-weight: 600; }
.booking-progress__step--done .booking-progress__num { border-color: var(--color-champagne); background: var(--color-champagne-light); color: var(--color-text); }
.booking-progress__step--current .booking-progress__num { border-color: var(--color-black); background: var(--color-black); color: var(--color-text-inverse); }
.booking-progress__step--current .booking-progress__link, .booking-progress__step--done .booking-progress__link { color: var(--color-text); }
.booking-progress__step--current .booking-progress__label { font-weight: 600; }
@media (max-width: 640px) {
  /* Compact on phones: numbers only, plus the current step's label. */
  .booking-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .booking-progress__step--current .booking-progress__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

.booking-stage { margin: 0 0 1.5rem; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); scroll-margin-top: 5rem; }
.booking-stage:focus { outline: none; }
.booking-stage:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.booking-stage__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 1rem; text-align: left; }
.booking-stage__num { color: var(--color-champagne); }
.booking-stage__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.booking-stage__nav:empty { display: none; }
.booking-stage__nav [data-stage-next] { margin-left: auto; }
.booking-stages--enhanced .booking-stage[hidden] { display: none; }
.booking-stages__back-note { margin: 0.5rem 0 1.25rem; text-align: center; }
.booking-error-summary:focus { outline: 2px solid #a3312a; outline-offset: 2px; }
.booking-error-summary__link { margin: 0.35rem 0 0; }
.booking-error-summary__link a { font-weight: 600; }
/* The form's default (Enter-key) submit — visually hidden, never display:none,
   so implicit submission still targets it. */
.booking-default-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.booking-review-details { margin: 0 0 1.25rem; padding: 0.75rem 1rem; background: var(--color-bg); text-align: left; font-size: 0.92rem; }
.booking-review-details > div { display: flex; gap: 0.75rem; padding: 0.2rem 0; }
.booking-review-details dt { flex: 0 0 7.5rem; color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.8rem; }
.booking-review-details dd { margin: 0; overflow-wrap: anywhere; }
.booking-review-details p { margin: 0.5rem 0 0; }
.booking-review-details__edit { padding: 0; background: none; border: none; color: var(--color-text); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; }
/* The coupon controls now live inside the request form (they post the whole
   form), so undo the form-wide full-width input/label rules for them. */
form.stacked-form .coupon-panel__form label { margin-bottom: 0; }
form.stacked-form .coupon-panel__form input[type="text"] { width: auto; display: inline-block; flex: 1 1 10rem; max-width: 14rem; }
/* Step 5: Submit Request is the row's primary action, right-aligned like Continue in steps 3-4. */
.booking-stage__nav--submit #submit-button { margin: 0 0 0 auto; }
@media (max-width: 640px) {
  .booking-stage { padding: 0.9rem 0.9rem 1rem; }
  .booking-review-details > div { flex-direction: column; gap: 0; }
  .booking-review-details dt { flex-basis: auto; }
}

/* MFA setup/replace: the otpauth:// link and manual key are one long word; let them wrap at phone width. */
.mfa-key-line { overflow-wrap: anywhere; }

/* LB-068: staff sign-in, password and MFA screens — one bounded card on the
   site background (visual only; see partials/staff-auth-start.ejs). The
   champagne top edge is the single accent, echoing the gold wordmark. */
.staff-auth-page { background: var(--color-bg); }
/* Same specificity as, and later than, the main.site-main:not(:has(...))
   fallback container, whose `margin: 0 auto` would otherwise shrink-wrap
   this flex column and the card with it. */
main.site-main.staff-auth {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(2rem, 8vh, 5rem) 1rem 3rem;
}
.staff-auth__brand { text-align: center; margin-bottom: 1.25rem; }
.staff-auth__brand img { display: block; margin: 0 auto; height: auto; }
.staff-auth__context { margin: 0.6rem 0 0; font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-text-muted); }
.staff-auth__card {
  width: 100%;
  max-width: 26rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-champagne);
  padding: 1.75rem 1.75rem 1.5rem;
}
.staff-auth__card--wide { max-width: 38rem; }
.staff-auth__title { margin: 0 0 1.1rem; font-size: 1.6rem; }
.staff-auth__subtitle { margin: 0 0 0.5rem; font-size: 1.1rem; }
.staff-auth__lede { margin-top: 0; }
.staff-auth__card p { line-height: 1.55; }
.staff-auth__card .status-banner { margin-bottom: 1.1rem; padding: 0.75rem 0.9rem; }
.staff-auth__card form.stacked-form label { margin-bottom: 0.9rem; }
.staff-auth__card form.stacked-form input:focus-visible,
.staff-auth__card .staff-auth__submit:focus-visible,
.staff-auth__link-button:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.staff-auth__submit { display: block; width: 100%; text-align: center; margin-top: 0.25rem; }
.staff-auth__section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.staff-auth__section:first-of-type { margin-top: 1.25rem; }
.staff-auth__aside { margin: 1rem 0 0; text-align: center; font-family: var(--font-sans); font-size: 0.88rem; }
.staff-auth__logout { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border); text-align: center; }
.staff-auth__link-button {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.staff-auth__link-button:hover { color: var(--color-text); }
.staff-auth__card .recovery-code-list { columns: 2; column-gap: 1.5rem; padding-left: 1.2rem; }
@media (max-width: 480px) {
  .staff-auth__card { padding: 1.35rem 1.1rem 1.2rem; }
  .staff-auth__title { font-size: 1.4rem; }
  .staff-auth__card .recovery-code-list { columns: 1; }
}

/* Owner walkthrough fix: per-field Customer Details errors (request form). */
.field-error { display: block; margin-top: 0.3rem; color: #a3312a; font-size: 0.88rem; font-weight: 600; }
.stacked-form input[aria-invalid="true"] { border-color: #a3312a; }
.booking-error-summary__fields { margin: 0.35rem 0 0; padding-left: 1.1rem; text-align: left; }
.booking-error-summary__fields a { font-weight: 600; }

/* Owner walkthrough fix: the visitor's own hold, shown on the availability page (same width as its form). */
.hold-return-notice-region { max-width: 32rem; margin: 0 auto; }
.hold-return-notice { margin: 0 0 1rem; text-align: center; }
.hold-return-notice p { margin: 0.2rem 0; }

/* ------------------------------------------------------------------
   LB-055 final customer-journey pass: Your Event, shared action rows,
   compact summaries and deliberate narrow-width button layout.
   ------------------------------------------------------------------ */

/* Shared: a row of actions. Wraps on wide screens; at phone width every
   button is full width and stacked, primary first, never staggered. */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0 0; }
.action-row--end { justify-content: flex-end; }
.page-content--centered .action-row { justify-content: center; }
.text-button { display: inline-block; padding: 0.35rem 0; background: none; border: none; color: var(--color-text); font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-button:hover, .text-button:focus-visible { color: var(--color-champagne); }
/* Gate 4 acceptance: the SFG items the delivery question is for, listed beside it. */
.sfg-fulfillment-items { margin: 0 0 0.75rem; text-align: left; }
.sfg-fulfillment-items__list { margin: 0.25rem 0 0.35rem; padding-left: 1.1rem; }
.inventory-total__retired { font-size: 0.9rem; }
.page-card { max-width: 40rem; }
.notice-list { max-width: 34rem; margin: 1rem auto; padding-left: 1.2rem; text-align: left; }
.notice-list li { margin-bottom: 0.4rem; }

/* Your Event in the menu (and no-JS fallback): a small line cart icon
   beside the label, inheriting the link colour (so hover/focus gold
   applies to both). */
.nav-event-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.nav-cart-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-event-link__count { letter-spacing: 0.02em; }

/* Your Event page */
.event-page { max-width: 44rem; }
.event-page__lede { max-width: 34rem; color: var(--color-text-muted); }
.event-panel { margin: 1.5rem 0 0; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--color-border); background: var(--color-surface); text-align: left; }
.event-panel__title { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: 1.25rem; }
.event-panel--next { border-color: var(--color-champagne); }
.event-panel .status-banner p { margin: 0 0 0.5rem; }
.event-panel .status-banner form { margin: 0; }
.event-partial p { margin: 0 0 0.6rem; }
.event-inline-form { display: inline; margin: 0; }
.hold-countdown--compact { margin: 1rem 0 0; padding: 0.9rem 1rem; background: var(--color-bg); }
.hold-countdown__note { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); }

/* One summary style for a selection: label column + value, wrapping cleanly. */
.requested-summary__list { margin: 0 0 0.75rem; text-align: left; }
.requested-summary__row { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); }
.requested-summary__row:last-child { border-bottom: none; }
.requested-summary__row--unlabelled { grid-template-columns: 1fr; }
.requested-summary__row dt { color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.8rem; padding-top: 0.15rem; }
.requested-summary__row dd { margin: 0; overflow-wrap: anywhere; }
.requested-summary h2 { text-align: center; }

/* Signs, Favors & Gifts lines (Your Event, request review, confirmations) */
.event-lines { list-style: none; margin: 0; padding: 0; }
.event-line { padding: 0.8rem 0; border-bottom: 1px solid var(--color-border); }
.event-line:first-child { padding-top: 0; }
.event-line--problem .event-line__name { color: var(--color-text-muted); }
.event-line__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.event-line__name { font-weight: 600; overflow-wrap: anywhere; }
.event-line__name a { color: inherit; }
.event-line__price { text-align: right; white-space: nowrap; }
.event-line__meta { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); }
.event-line__notice { margin: 0.35rem 0 0; font-size: 0.85rem; color: #7a5a17; }
.event-line__notice--problem { color: #a3312a; }
.event-line__contents { margin: 0.4rem 0 0; font-size: 0.88rem; }
.event-line__contents summary, .item-detail__contents summary { cursor: pointer; color: var(--color-text); font-family: var(--font-sans); font-size: 0.82rem; }
.event-line__contents ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.event-line__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin-top: 0.6rem; }
.quantity-form { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0; }
.quantity-form__label { font-family: var(--font-sans); font-size: 0.78rem; color: var(--color-text-muted); align-self: center; }
.quantity-form__input { width: 4.5rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); font: inherit; background: var(--color-surface); }
.button--small { padding: 0.5rem 1rem; font-size: 0.68rem; }
.event-sfg-summary { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--color-border); text-align: left; }
.event-sfg-summary__title { margin: 0 0 0.75rem; font-size: 1.05rem; }
.event-sfg-summary__total { margin: 0.75rem 0 0.25rem; text-align: right; }

/* Request form: the Your Event actions and the SFG delivery fields */
.your-event-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.25rem; margin: 0 0 1.5rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.25rem 0 0.75rem; }
.choice-row--stacked { flex-direction: column; gap: 0.35rem; }
form.stacked-form .choice-row__option { display: flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; }
form.stacked-form .choice-row__option input { display: inline-block; width: auto; margin: 0; }
.sfg-address-other[hidden] { display: none; }
.address-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 641px) {
  .address-row { grid-template-columns: 2fr 0.8fr 1.2fr; }
}

/* SFG product detail: one aligned column of actions */
.pricing__unit { font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-sans); letter-spacing: 0.04em; }
.item-detail__contents { margin: 1rem 0 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.item-detail__contents ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.add-to-event { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 1.25rem 0 0.5rem; }
form.add-to-event .add-to-event__qty { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; font-family: var(--font-sans); font-size: 0.8rem; }
.add-to-event__qty input { width: 6rem; padding: 0.7rem 0.6rem; border: 1px solid var(--color-border); font: inherit; background: var(--color-surface); }
.item-detail__secondary { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.item-detail__secondary .action-row { margin-top: 0.5rem; }
.item-detail__body .status-banner p { margin: 0; }

/* Narrow screens: deliberate full-width stacked actions (primary on top),
   replacing the staggered wrap of mixed-width buttons. */
@media (max-width: 640px) {
  .action-row, .booking-stage__nav, .booking-stage__nav--submit, .your-event-actions { flex-direction: column-reverse; align-items: stretch; }
  .action-row > .button, .action-row > form, .action-row > a, .booking-stage__nav > .button, .your-event-actions > .button { width: 100%; margin: 0; text-align: center; }
  .action-row > form .button { width: 100%; }
  .booking-stage__nav [data-stage-next], .booking-stage__nav--submit #submit-button { margin: 0; }
  .your-event-actions { flex-direction: column; }
  .your-event-actions .text-button { align-self: center; }
  .add-to-event { flex-direction: column; align-items: stretch; }
  .add-to-event__qty input { width: 100%; }
  .add-to-event__button { width: 100%; }
  .event-panel { padding: 1rem 0.9rem; }
  .requested-summary__row { grid-template-columns: 1fr; gap: 0.1rem; }
  .event-line__row { flex-direction: column; gap: 0.15rem; }
  .event-line__price { text-align: left; white-space: normal; }
}

/* LB-055: `.button { display: inline-block }` outranked the hidden attribute,
   so script-only controls (stage Continue/Back, the date-step Continue)
   showed, inert, without JavaScript. */
.button[hidden], .text-button[hidden] { display: none; }

/* LB-055: staff package editor — compact, aligned customer-choice cards. */
.pkg-group { margin: 0 0 1rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); max-width: 52rem; }
.pkg-group__head { margin: 0 0 0.6rem; }
.pkg-group__title { margin: 0; font-size: 1.05rem; }
.pkg-group__summary { margin: 0.2rem 0 0; font-family: var(--font-sans); font-size: 0.82rem; color: var(--color-text-muted); }
.pkg-group__warning { margin: 0.4rem 0 0; font-family: var(--font-sans); font-size: 0.82rem; color: #a3312a; }
.pkg-group__form { display: grid; grid-template-columns: minmax(12rem, 2fr) repeat(auto-fit, minmax(8rem, 10rem)); gap: 0.6rem 0.9rem; align-items: end; margin: 0 0 0.6rem; }
.pkg-group__field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-family: var(--font-sans); font-size: 0.8rem; }
.pkg-group__field input { width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--color-border); font: inherit; font-family: var(--font-body); font-size: 0.95rem; background: var(--color-surface); box-sizing: border-box; }
.pkg-group__field--wide { grid-column: 1 / -1; }
.pkg-group__save { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.pkg-group__eligible { margin: 0.25rem 0 0; }
.pkg-group__eligible > summary { cursor: pointer; font-family: var(--font-sans); font-size: 0.82rem; padding: 0.3rem 0; }
.pkg-group__items { list-style: none; margin: 0.3rem 0 0.5rem; padding: 0; }
.pkg-group__item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); }
.pkg-group__item:last-child { border-bottom: none; }
.pkg-group__item form { margin: 0; flex: none; }
.pkg-group__foot { display: flex; justify-content: flex-end; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); }
.pkg-group__foot form { margin: 0; }
.text-button--danger { color: #a3312a; }
.pkg-add { margin: 1.5rem 0 0; max-width: 52rem; }
.pkg-add__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.pkg-add__form { padding: 0.9rem 1rem; border: 1px dashed var(--color-border-dark); }
.pkg-add__title { margin: 0 0 0.75rem; font-size: 0.98rem; }
.pkg-add__help { margin-top: 0.75rem; }
.pkg-add__help summary { cursor: pointer; font-family: var(--font-sans); font-size: 0.8rem; }

/* LB-055: customer package selection — required choices vs optional extras. */
.rental-picker__required-tag { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border: 1px solid var(--color-champagne); color: #7a5a17; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.rental-picker__count--done { color: #2f6b2a; }
.rental-picker__hint--extras { margin: 0.25rem 0 0.9rem; }
.rental-picker__summary-list li.rental-picker__summary-heading { margin-top: 0.4rem; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.rental-picker__summary-list li.rental-picker__summary-heading:first-child { margin-top: 0; }
.rental-picker__summary-package { font-weight: 600; }
.rental-picker__summary-group { padding: 0.4rem 0.6rem; border-left: 3px solid var(--color-champagne); background: var(--color-bg); }
.rental-picker__summary-group--done { border-left-color: #6a9a5f; }
.rental-picker__summary-group-title { display: flex; justify-content: space-between; gap: 0.75rem; font-weight: 600; }
.rental-picker__summary-status { font-weight: normal; font-family: var(--font-sans); font-size: 0.75rem; white-space: nowrap; }
.rental-picker__summary-choices { color: var(--color-text-muted); }
.rental-picker__summary-choose, .choice-group-error__go { align-self: flex-start; }

/* LB-055 sweep: a long price text ("Starting at $2.50/item or Custom Quote")
   was white-space: nowrap and ran past the right edge at phone widths once
   its group opened. Let it wrap under the name on narrow screens. */
.rental-option__body { min-width: 0; }
@media (max-width: 640px) {
  .rental-option__body { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .rental-option__price { white-space: normal; }
}
/* Only rows whose primary action comes LAST in the markup (Back … Continue)
   are reversed on phones; ordinary action rows keep their reading order. */
@media (max-width: 640px) {
  .action-row { flex-direction: column; }
  .action-row--end { flex-direction: column-reverse; }
}

/* LB-055 sweep: the text-style step controls (Edit date / Edit rentals /
   Edit Date / Edit Rentals / text buttons) measured under 24px tall; give
   them a comfortable tap target without changing their look. */
.edit-selection-link a, .step-edit-link, .text-button, .booking-review-details__edit { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* LB-055 sweep: a product without photos no longer leaves an empty left
   column; its details sit in one centred, readable column. */
.item-detail--no-media { grid-template-columns: minmax(0, 40rem); justify-content: center; }
.status-banner .choice-group-error__go { display: flex; margin: 0.25rem auto 0; }

/* LB-057 — customer cards (thank-you page, My Booking, My Purchase, the
   access-link request). One card style everywhere: the white surface and
   subtle border the Your Event SFG card already used, left-aligned text,
   compact label/value rows. Desktop My Booking is two explicit columns
   (actions and money first, event and selections beside), never masonry,
   so the DOM (reading and keyboard) order is the visual order on phones. */
.customer-page { max-width: 66rem; }
.customer-page--narrow { max-width: 42rem; }
.customer-page--form { max-width: 30rem; }
.customer-page__intro { max-width: 36rem; }
.customer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.35rem;
  text-align: left;
  min-width: 0;
}
.customer-card + .customer-card { margin-top: 1rem; }
.customer-card__title { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; }
.customer-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.customer-card__head .customer-card__title { margin: 0; }
.customer-card__ref { margin: 0; font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-text-muted); }
.customer-card__ref strong { color: var(--color-text); }
.customer-card__label { display: block; margin: 0 0 0.3rem; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.customer-card__hint { margin: 0 0 0.85rem; font-size: 0.88rem; color: var(--color-text-muted); }
.customer-card p { margin: 0 0 0.6rem; }
.customer-card > :last-child, .customer-card p:last-child { margin-bottom: 0; }
.customer-card ul.customer-card__list { list-style: none; margin: 0; padding: 0; }
.customer-card__list li { padding: 0.35rem 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }
.customer-card__list li:first-child { border-top: none; padding-top: 0; }
.customer-card__divider { border: 0; border-top: 1px solid var(--color-border); margin: 1rem 0; }
.customer-alert { margin: 1rem 0 0; text-align: left; }
.customer-alert + .customer-card, .customer-card + .customer-alert { margin-top: 1rem; }

/* Disclosures ("What happens next?", "About your access link") */
.customer-disclosure { margin: 0; text-align: left; }
.customer-disclosure > summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.customer-disclosure > summary:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.customer-disclosure > :not(summary) { margin: 0.25rem 0 0.5rem; font-size: 0.92rem; }
.customer-disclosure ul { padding-left: 1.2rem; }
.customer-disclosure li { margin-bottom: 0.3rem; }
.customer-intro-disclosure { margin: 0 0 1rem; padding: 0.25rem 1.1rem 0.4rem; border: 1px solid var(--color-border); background: var(--color-surface); }

/* Label/value rows (event and contact details) */
.detail-rows { margin: 0; }
.detail-rows__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.2rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--color-border); }
.detail-rows__row:first-child { border-top: none; padding-top: 0; }
.detail-rows dt { margin: 0; padding-top: 0.15rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.detail-rows dd { margin: 0; overflow-wrap: anywhere; }
.detail-rows__status { text-transform: capitalize; }

/* The rental itself, leading the thank-you card */
.rental-summary { margin: 0 0 0.25rem; }
.rental-summary__name { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.rental-summary__contents { list-style: none; margin: 0.3rem 0 0; padding: 0; color: var(--color-text-muted); font-size: 0.92rem; }
.rental-summary__contents li { margin: 0.1rem 0; overflow-wrap: anywhere; }
.rental-summary__group + .rental-summary__group { margin-top: 0.85rem; }

/* Amounts & Payments rows: label left, amount right, tabular figures */
.amount-rows { margin: 0; }
.amount-rows__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding: 0.4rem 0; border-top: 1px solid var(--color-border); }
.amount-rows__row:first-child { border-top: none; padding-top: 0; }
.amount-rows dt { flex: 1 1 auto; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.amount-rows dd { flex: 0 1 auto; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.amount-rows__due { display: block; font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--color-text-muted); }
.amount-rows__row--sub { border-top: none; padding: 0 0 0.4rem 1rem; font-size: 0.88rem; color: var(--color-text-muted); }
.amount-rows__row--sub dd { color: var(--color-text); }
.amount-rows__row--total { margin-top: 0.3rem; padding-top: 0.6rem; border-top: 2px solid var(--color-text); font-size: 1.1rem; }
.amount-rows__row--total dt, .amount-rows__row--total dd { font-weight: 700; }
.amount-rows__note { margin: 0 0 0.5rem 1rem; font-size: 0.82rem; color: #7a5a17; }
.amount-rows + .customer-card__label { margin-top: 1rem; }
.amount-deadline { margin: 0 0 0.85rem; padding: 0.6rem 0.8rem; background: #f7ecd6; font-size: 0.92rem; }
.amount-deadline p { margin: 0; }
.amount-deadline p + p { margin-top: 0.3rem; }

/* Contract & Payments: each external action grouped with its report and status */
.pay-actions { list-style: none; margin: 0; padding: 0; }
.pay-action { padding: 0.85rem 0; border-top: 1px solid var(--color-border); }
.pay-action:first-child { border-top: none; padding-top: 0; }
.pay-action:last-child { padding-bottom: 0; }
.pay-action__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; }
.pay-action__label { font-weight: 600; }
.pay-action__head .availability-badge { margin: 0; }
.pay-action__meta { display: block; margin: -0.2rem 0 0.5rem; font-size: 0.8rem; color: var(--color-text-muted); }
.pay-action__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.pay-action__buttons form { display: flex; margin: 0; }
.button--compact { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.72rem; text-align: center; }
.button--report { background: var(--color-surface); color: var(--color-black); border-color: var(--color-champagne); box-shadow: inset 0 0 0 1px var(--color-champagne); }
.button--report:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; border-color: var(--color-border); }
.button:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
.availability-badge--pending { background: #f7ecd6; border-color: #f7ecd6; color: #5c4312; }

/* My Booking top: status, then compact next steps and access guidance */
.customer-page .status-banner { margin-bottom: 1rem; }
.customer-guidance { margin: 0; }
.customer-guidance ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.customer-guidance li { margin-bottom: 0.3rem; }
.customer-guidance__refresh { font-size: 0.9rem; color: var(--color-text-muted); }

/* My Booking layout */
.customer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.customer-layout__col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.customer-layout__col > .customer-card + .customer-card { margin-top: 0; }
.customer-after { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.customer-after > .offer-section, .customer-after > .offer-pending { margin: 0; }
.customer-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.customer-pair > .customer-card + .customer-card { margin-top: 0; }
.customer-card ul.customer-card__bullets { margin: 0; padding-left: 1.2rem; }
.customer-card__bullets li { margin-bottom: 0.45rem; }
.customer-card .customer-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.85rem; margin: 0; }
.customer-card .customer-selection-card { width: auto; }
.customer-links { list-style: none; margin: 0; padding: 0; }
.customer-links li { padding: 0.3rem 0; }
.customer-links a { color: var(--color-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.sfg-entry + .sfg-entry { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); }
.sfg-entry .event-sfg-summary__total { margin: 0.5rem 0 0.6rem; }
.sfg-entry__lines { list-style: none; margin: 0; padding: 0; }
.sfg-entry__lines li { padding: 0.2rem 0; overflow-wrap: anywhere; }

/* Access-link request */
.request-link-card h1.customer-card__title { font-size: 1.6rem; }
.request-link-card form.stacked-form { margin: 0; }
.request-link-card form.stacked-form .button { width: 100%; }

@media (min-width: 900px) {
  .customer-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; }
  .customer-layout__col, .customer-after { gap: 1.25rem; }
  .customer-after { margin-top: 1.25rem; }
  .customer-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 640px) {
  .customer-page.page-content { padding: 2rem 1rem 2.5rem; }
  .customer-card { padding: 1rem; }
  .detail-rows__row { grid-template-columns: minmax(0, 1fr); gap: 0.05rem; }
  .pay-action__buttons > .button, .pay-action__buttons > form { flex: 1 1 10rem; }
  .pay-action__buttons > form .button { width: 100%; }
}

/* LB-057 follow-up (owner-requested alignment). */
/* Disclosure indicator: the flex summary drops the native marker, so draw
   one (decorative, rotates when open) and hide Safari's own. */
.customer-disclosure > summary { list-style: none; gap: 0.6rem; text-decoration: none; }
.customer-disclosure > summary > span { text-decoration: underline; text-underline-offset: 3px; }
.customer-disclosure > summary::-webkit-details-marker { display: none; }
.customer-disclosure > summary::before { content: ""; flex: none; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.customer-disclosure[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .customer-disclosure > summary::before { transition: none; } }
/* "What happens next?": heading and indicator centred; the steps stay left-aligned. */
.customer-intro-disclosure > summary { display: flex; justify-content: center; }

/* Package and rental detail pages on phones/tablets: one centred, bounded
   column whose track can never grow past the container (text stays left). */
@media (max-width: 900px) {
  .page-content.item-detail { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .item-detail > * { min-width: 0; }
}

/* My Booking: post-reservation offers and Requested Changes as regular cards,
   with secondary (outline) compact buttons. */
.customer-page .offer-section--post { margin: 0; padding: 1.25rem 1.35rem 0.35rem; border-top: 1px solid var(--color-border); }
.customer-page .offer-section--post .offer-section__title { margin: 0 0 0.35rem; font-size: 1.2rem; line-height: 1.25; }
.customer-page .offer-section--post .offer-card__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.72rem; text-align: center; background: transparent; color: var(--color-black); border-color: var(--color-black); }
.customer-page .offer-section--post .offer-card__actions form { margin: 0; }
@media (min-width: 900px) { .customer-page .offer-section--post .offer-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; } }
.customer-layout .offer-pending { margin: 0; }
.customer-layout .offer-pending h2 { margin: 0 0 0.75rem; font-size: 1.2rem; line-height: 1.25; }
.customer-layout .offer-pending ul { margin: 0; padding: 0; }
.customer-layout .offer-pending li { margin: 0; padding: 0.55rem 0; border-top: 1px solid var(--color-border); font-size: 0.95rem; }
.customer-layout .offer-pending li:first-child { border-top: none; padding-top: 0; }
.customer-layout .offer-pending .offer-card__link { min-height: 2.75rem; }
.customer-layout .offer-pending strong { display: block; overflow-wrap: anywhere; }
.customer-layout .offer-pending__status { display: block; margin-top: 0.15rem; }
.customer-layout .offer-pending__cancel { margin-left: 0; }

@media (max-width: 640px) {
  /* SFG cards: the whole "Items subtotal" row reads left on phones. */
  .customer-card .event-sfg-summary__total { text-align: left; }
  .customer-page .offer-section--post { padding: 1rem 1rem 0.25rem; }
}

/* Gate 2F (D13): the one ordered-selection control for Website Manager
   choices (src/views/partials/staff-ordered-picker.ejs). Compact rows, the
   arrows stay on the row at phone width (the name wraps instead). */
.staff-ordered-picker { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.75rem 1rem; margin: 0.75rem 0; }
.staff-ordered-picker legend { font-weight: 600; padding: 0 0.35rem; }
.staff-ordered-picker__list { list-style: decimal; margin: 0.25rem 0 0.75rem; padding-left: 1.5rem; }
.staff-ordered-picker__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); }
.staff-ordered-picker__row:last-child { border-bottom: 0; }
.staff-ordered-picker__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.staff-ordered-picker__actions { display: flex; gap: 0.3rem; flex: 0 0 auto; }
.staff-ordered-picker__add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.staff-ordered-picker__add select { max-width: 100%; }
.staff-link-context { display: block; margin-top: -0.35rem; }

/* Gate 2F (D14): the compact, section-oriented page editor. */
.staff-editor-heading { font-size: 1.15rem; margin: 0.5rem 0; }
.staff-section-list { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0 1rem; }
.staff-section-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); }
.staff-section-row.is-selected { background: var(--color-surface, #f7f3ee); }
.staff-section-row__name { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.staff-section-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.staff-section-row__actions form { display: inline; margin: 0; }
.staff-section-editor { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.75rem 1rem; margin: 1rem 0; scroll-margin-top: 5rem; }
.staff-step { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
/* Gate 2F (D14): an optional image per Sequential Steps step. */
.process-step__image { display: block; width: 100%; max-width: 12rem; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 auto 0.6rem; border-radius: 4px; }

/* Gate 2F (D16): the sales builder's saved / unsaved state. */
.staff-save-state.is-unsaved { color: var(--color-text); font-weight: 600; }
[data-show-when][hidden] { display: none; }

/* Gate 4 / LB-071 4B.2: blocked-date notice and the explicit Admin override
   inside the Request Detail forms that can move a booking into a status that
   holds inventory. */
.blocked-date-override { margin: 0.5rem 0 0.75rem; }
.blocked-date-override__fields { margin: 0.5rem 0 0; padding: 0.75rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.blocked-date-override__fields legend { font-weight: 600; padding: 0 0.35rem; }
.blocked-date-override__confirm { display: flex; gap: 0.5rem; align-items: flex-start; }
.blocked-date-override__confirm input { margin-top: 0.2rem; }

/* Gate 4 / LB-071 4D: the per-rental Request Anyway setting on the rental
   editor's Inventory stage. */
.inventory-request-anyway fieldset { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.inventory-request-anyway legend { font-weight: 600; padding: 0 0.35rem; }
.inventory-request-anyway__option { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 600; }
.inventory-request-anyway__option input { margin-top: 0.2rem; }

/* Gate 4 / LB-071 4E: Request Anyway — available items are held, unavailable
   ones the customer chose are shown apart as "awaiting availability review",
   never styled as reserved. */
.request-anyway { margin-top: 0.75rem; }
.request-anyway__fieldset { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.request-anyway__fieldset legend { font-weight: 600; padding: 0 0.35rem; }
.request-anyway__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.request-anyway__item { display: grid; gap: 0.25rem; }
.request-anyway__name { font-weight: 600; }
.request-anyway__state--available { color: inherit; }
.request-anyway__choice { display: flex; gap: 0.5rem; align-items: flex-start; }
.request-anyway__choice input { margin-top: 0.2rem; }
.requested-summary--review { border-style: dashed; }
.price-summary--requested { border-style: dashed; margin-top: 0.75rem; }
.price-summary__heading { font-weight: 600; margin: 0 0 0.5rem; }
.customer-selection-card--requested { border-style: dashed; }
.customer-selection-card__status { display: block; font-size: 0.85rem; margin-top: 0.25rem; }
.rental-summary__group--review { margin-top: 0.75rem; }

/* Gate 4 / LB-071 4F: Staff Accept / Decline of a requested item. */
.requested-resolve > summary { cursor: pointer; font-weight: 600; }
.requested-resolve > summary:focus-visible { outline: 2px solid var(--color-champagne); outline-offset: 2px; }
/* Gate 4 acceptance: Staff "+ Rental" / "+ Package" entry actions (Request Detail). */
.staff-add-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-start; margin: 0.75rem 0 1rem; }
.staff-add-controls__action > summary { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); background: var(--color-surface); list-style: none; }
.staff-add-controls__action > summary::-webkit-details-marker { display: none; }
.staff-add-controls__action[open] { flex: 1 1 100%; order: 1; }
.staff-add-controls__action[open] > summary { border-color: var(--color-text); }
.requested-resolve__form { margin: 0.5rem 0; }

/* Gate 5 / LB-072 (5B): Staff Order Builder. Laptop and iPad first (large
   tap targets, no deep navigation), phone still usable; the summary bar stays
   within reach at the bottom of the screen. */
.order-builder { padding-bottom: 5rem; }
.order-builder__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.order-builder__home { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; align-items: start; }
.order-builder__panel { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1rem 1.25rem; margin: 1rem 0; }
.order-builder__panel h2 { margin-top: 0; }
.order-builder__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0 1rem; }
.order-builder__form input, .order-builder__form select, .order-builder__form textarea, .order-builder__search input { min-height: 2.75rem; font-size: 1rem; }
/* A select sizes itself to its longest option and grid items to their
   content; let both shrink to the phone width instead of widening the page. */
.order-builder__home > *, .order-builder__row > * { min-width: 0; }
.order-builder__form input, .order-builder__form select, .order-builder__form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.order-builder__primary { min-height: 2.75rem; min-width: 10rem; }
/* Gate 5 / LB-072 (5D): Proceed to Booking — short fields side by side from
   tablet width up (name / contact, city / state / ZIP); one column on phones. */
.order-builder__proceed-grid { display: grid; gap: 0 1rem; }
.order-builder__proceed-grid > * { min-width: 0; }
@media (min-width: 700px) {
  .order-builder__proceed-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.order-builder__search { display: flex; gap: 0.5rem; }
.order-builder__search input { flex: 1; min-width: 0; }
.order-builder__results { list-style: none; padding: 0; margin: 1rem 0; }
.order-builder__result { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.order-builder__start { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.order-builder__context { margin: 0.5rem 0 1rem; }
.order-builder__customer { margin: 0; }
.order-builder__meta { margin: 0.25rem 0; }
.order-builder__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.order-builder__action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 5.5rem; padding: 0.75rem; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: 1.15rem; text-align: center; }
.order-builder__action--live { cursor: pointer; border-color: var(--color-champagne); }
.order-builder__action--live:hover, .order-builder__action--live:focus-visible { background: rgba(201, 161, 90, 0.1); }
.order-builder__action--off { color: var(--color-text-muted); background: var(--color-bg); }
.order-builder__action-plus { font-size: 1.6rem; line-height: 1; }
.order-builder__action-note { font-size: 0.8rem; }
.order-builder__lines { list-style: none; padding: 0; margin: 0; }
.order-builder__line { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.order-builder__line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.order-builder__line-price { white-space: nowrap; font-weight: bold; }
.order-builder__line--flagged { background: #f7ecd6; }
.order-builder__flag { color: #8a4b12; font-size: 0.9rem; font-weight: bold; }
.order-builder__remove-button { min-height: 2.75rem; min-width: 5.5rem; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; cursor: pointer; }
.order-builder__decision-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.order-builder__summary th { text-align: left; white-space: nowrap; vertical-align: top; }
.order-builder__summary-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; min-height: 3.25rem; background: var(--color-black); color: var(--color-text-inverse); text-decoration: none; }
.order-builder__summary-bar-link { color: var(--color-champagne-light); font-weight: bold; }
.staff-topnav__link--build { font-weight: bold; }
.staff-dashboard__build-order { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.staff-picker-filter { display: block; margin-bottom: 0.75rem; }
.staff-picker-filter input { width: 100%; min-height: 2.75rem; font-size: 1rem; }
.rental-option--disabled { opacity: 0.55; cursor: not-allowed; }
.rental-option--disabled:hover { border-color: var(--color-border); }
.rental-option__status { display: block; font-size: 0.8rem; color: var(--color-text-muted); }
.rental-option__status--available { color: #2f6b2f; }
.rental-option__status--conflicted, .rental-option__status--blocked, .rental-option__status--unknown, .rental-option__status--archived { color: #8a4b12; }
#staff-item-picker-form .rental-option { min-height: 3.5rem; }
/* Gate 5C: + Package / package add-on / + SFG dialogs and grouped order lines. */
.order-builder__dialog { width: min(36rem, calc(100vw - 2rem)); }
.order-builder__dialog .rental-option { min-height: 3.5rem; }
.order-builder__group + .order-builder__group { margin-top: 1rem; }
.order-builder__group-title { font-size: 1rem; margin: 0 0 0.25rem; }
.order-builder__tag { display: inline-block; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.order-builder__tag--addon { color: #6b4e16; font-weight: bold; }
.order-builder__included { margin: 0.15rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.order-builder__line--addon { padding-left: 1rem; border-left: 3px solid var(--color-champagne); }
.order-builder__addon-button { margin-top: 0.75rem; min-height: 2.75rem; }
.order-builder__qty { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.35rem; flex-wrap: wrap; }
.order-builder__qty input { width: 4.5rem; min-height: 2.75rem; font-size: 1rem; }
.order-builder__summary-sfg th, .order-builder__summary-sfg td { border-top: 2px solid var(--color-border); }
.order-package-card, .order-sfg-card { border: 1px solid var(--color-border); padding: 0.75rem; margin-bottom: 0.75rem; min-width: 0; }
.order-package-card--available { border-color: var(--color-champagne); }
.order-package-card--conflicted, .order-package-card--blocked, .order-package-card--archived, .order-package-card--unknown { opacity: 0.75; }
.order-package-card__head { display: flex; gap: 0.75rem; align-items: flex-start; }
.order-package-card__thumb { width: 64px; height: 64px; }
.order-package-card__title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.order-package-card__includes { margin: 0.5rem 0 0; font-size: 0.9rem; }
.order-package-card__form { margin-top: 0.5rem; }
.order-package-card__group { border: none; padding: 0; margin: 0 0 0.75rem; min-width: 0; }
.order-package-card__group legend { font-weight: bold; padding: 0; margin-bottom: 0.35rem; }
.order-package-card__group .rental-option + .rental-option { margin-top: 0.4rem; }
.order-package-card__form .button, .order-sfg-card__form .button { min-height: 2.75rem; }
.order-sfg-card__form { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.5rem; }
.order-sfg-card__qty input { width: 4.5rem; min-height: 2.75rem; font-size: 1rem; }
.order-sfg-card__later { display: flex; gap: 0.4rem; align-items: center; min-height: 2.75rem; }
.package-addons__rates td input { width: 7rem; min-height: 2.75rem; font-size: 1rem; }
.package-addons__inline { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.package-addons__inline label { min-width: 0; flex: 1 1 8rem; }
.package-addons__inline select { min-height: 2.75rem; width: 100%; max-width: 100%; }
.package-addons__table-wrap { overflow-x: auto; }
/* Stacked at phone width: a long column label and its form share one line
   only when they fit, otherwise the form wraps below the label. */
.package-addons__table-wrap table.staff-table--stack td { flex-wrap: wrap; }
@media (max-width: 640px) {
  .order-builder__actions { grid-template-columns: 1fr; }
  .order-builder__action { min-height: 3.5rem; flex-direction: row; }
  .order-builder__line { flex-wrap: wrap; }
  /* 5C: the longer money labels must wrap, or the summary table sets a
     minimum width wider than a phone. */
  .order-builder__summary th { white-space: normal; width: 40%; }
  /* 5C: a line's name and package contents get the full width; its price
     and Remove sit on the row below. */
  .order-builder__line-main { flex-basis: 100%; }
  .order-builder__line-price { margin-right: auto; }
}

/* Gate 5 / LB-072 (5D): external transaction progress on Request Detail —
   done steps ticked, open steps hollow; readable at a glance on an iPad. */
.external-transaction { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.external-transaction h3 { margin-top: 0; }
.external-transaction__steps { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.external-transaction__steps li { padding: 0.25rem 0 0.25rem 1.75rem; position: relative; overflow-wrap: anywhere; }
.external-transaction__steps li::before { position: absolute; left: 0; width: 1.25rem; text-align: center; }
.external-transaction__steps li.is-done::before { content: "\2713"; color: #2f6b3a; font-weight: 700; }
.external-transaction__steps li.is-open::before { content: "\25CB"; color: #8a6d3b; }
.external-transaction-record { margin: 0.75rem 0; }

/* Gate 5 / LB-072 (5E): the Finish Checklist on a booked order. Read-only;
   the state is always written out (badge text), colour only reinforces it.
   Laptop / iPad: badge | label + detail | link in one row; phones: the link
   drops below the text and every line wraps inside the screen width. */
.finish-checklist { margin: 1rem 0 0; }
.finish-checklist h3 { margin: 0 0 0.25rem; }
.finish-checklist__items { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.finish-checklist__item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: start; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.finish-checklist__item:last-child { border-bottom: 0; }
.finish-checklist__state { display: inline-block; justify-self: start; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.finish-checklist__item--done .finish-checklist__state { background: #dcefda; color: var(--color-text); }
.finish-checklist__item--pending .finish-checklist__state { background: #d7e6f7; color: var(--color-text); }
.finish-checklist__item--action_required .finish-checklist__state { background: #f5e2df; color: #7a2e22; }
.finish-checklist__item--not_applicable .finish-checklist__state { background: #e8e4de; color: var(--color-text-muted); }
.finish-checklist__item--not_applicable .finish-checklist__label { color: var(--color-text-muted); }
.finish-checklist__body { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.finish-checklist__detail { font-size: 0.9rem; color: var(--color-text-muted); }
.finish-checklist__link { display: inline-flex; align-items: center; min-height: 2.75rem; white-space: nowrap; }
@media (max-width: 640px) {
  .finish-checklist__item { grid-template-columns: minmax(0, 1fr); }
  .finish-checklist__link { white-space: normal; }
}

/* LB-074 (Expo QR System V1): Marketing → QR Codes. Laptop / iPad first;
   at phone width the tables become labelled cards (staff-table--stack) and
   long addresses wrap instead of widening the page. */
.qr-manager__table-wrap { overflow-x: auto; }
.qr-manager__url { display: block; overflow-wrap: anywhere; }
.qr-manager__address code { font-size: 1.05rem; overflow-wrap: anywhere; word-break: break-all; }
.qr-manager__status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.qr-manager__status--on { background: #dcefda; color: var(--color-text); }
.qr-manager__status--off { background: #e8e4de; color: var(--color-text-muted); }
.qr-manager__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.75rem 1rem; margin: 0 0 0.75rem; }
.qr-manager__metrics div { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.75rem; min-width: 0; }
.qr-manager__metrics dt { font-size: 0.85rem; color: var(--color-text-muted); }
.qr-manager__metrics dd { margin: 0.2rem 0 0; font-size: 1.35rem; font-weight: 600; }
.qr-manager__daily { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-left: 1.1rem; }
.qr-manager__toggle { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-top: 1rem; }
.qr-manager__toggle .button { min-height: 2.75rem; }
.qr-manager__domain-note { overflow-wrap: anywhere; }
.qr-manager__preview { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.qr-manager__preview img { width: min(100%, 240px); height: auto; background: #fff; border: 1px solid var(--color-border); image-rendering: pixelated; }
.qr-manager__preview-actions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.qr-manager__preview-actions .button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }