/* ============================================================
   HERO VIDEO — welcome.html + index.html (served /static/css/hero-video.css)

   Loaded only when the hero is live (server-injected FS_HERO_HEAD block).
   The boot script sets html[data-hero-mode] (feature | ambient) and
   html[data-hero-autoplay] (1 | 0) before first paint, so every rule below
   is prefixed with html[data-hero-mode...]: specificity, not load order,
   decides against welcome's inline sheet, style.css and site-deslop-v4.css
   (all of which load AFTER this file).

   One <video> per page that never moves in the DOM. Switching modes is CSS
   only. The page declares its layout on <html data-hero-layout>:
     inline (welcome)          feature = an in-flow 16:9 frame above the
                               headline (first visit); ambient = the same
                               element as a dimmed band behind the headline.
     background (marketplace)  always ambient (BOOT); feature = the full
                               video in a fixed lightbox over the page, so the
                               page under it never moves (no CLS).

   No env(safe-area-inset-*) anywhere: neither page sets viewport-fit=cover,
   so every inset is 0 (and fullscreen uses the browser's own chrome).

   Geometry constants (reserves, slab paddings) were measured in Chromium
   and WebKit at the viewports in e2e/tests/hero-video.spec.ts; each one
   names its source.
   ============================================================ */

/* ---------- Fail closed: no mode attribute, no hero ---------- */
html:not([data-hero-mode]) .fs-hv { display: none; }

/* ---------- Shared frame ---------- */
/* Tokens on both roots: the watch-again slot lives outside .fs-hv. */
html[data-hero-mode] :is(.fs-hv, .fs-hv-slot) {
  --hv-ink: #0d140b;
  --hv-cream: var(--text-inverse, #FDFBF7);
  --hv-chip: rgba(18, 24, 16, 0.72);
  --hv-chip-hover: rgba(18, 24, 16, 0.9);
}
html[data-hero-mode] .fs-hv {
  display: block;
  position: relative;
  box-sizing: border-box;
  font-family: var(--font-body);
}
/* Absolutely filled, not height:100%: WebKit resolves the percentage
   against something other than the aspect-ratio height and overflows the
   box by ~1.4px. */
html[data-hero-mode] .fs-hv__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--hv-ink);
}
html[data-hero-mode] .fs-hv__poster,
html[data-hero-mode] .fs-hv__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The poster sits ABOVE the video until playback starts: an attached source
   that has not played (autoplay refused, buffering before the first frame)
   must never show decoded frame 0 in place of the admin's poster frame. */
html[data-hero-mode] .fs-hv__video { z-index: 1; }
html[data-hero-mode] .fs-hv__poster { z-index: 2; transition: opacity 0.2s ease; }
/* "playing" sets data-has-frame: the poster fades out over the video. An
   error restores the still above whatever the decoder left behind. */
html[data-hero-mode] .fs-hv[data-has-frame]:not([data-state="error"]) .fs-hv__poster { opacity: 0; }
/* Poster image failed (same host as the stream): the dark frame keeps its
   size and shows the title instead of a broken-image icon. */
html[data-hero-mode] .fs-hv[data-poster="failed"] .fs-hv__poster { visibility: hidden; }

/* ---------- Controls layer (feature mode only) ---------- */
html[data-hero-mode] .fs-hv__ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: var(--hv-cream);
  /* Frame-width queries for the poster-failed title (.fs-hv__title). */
  container-type: inline-size;
}
html[data-hero-mode="ambient"] .fs-hv__ui { display: none; }
html[data-hero-mode] .fs-hv__ui > * { pointer-events: auto; }
html[data-hero-mode] .fs-hv__ui::before {
  /* bottom scrim behind the sound pill and the right cluster */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(rgba(10, 16, 9, 0), rgba(10, 16, 9, 0.55));
  pointer-events: none;
}

html[data-hero-mode] .fs-hv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 100px);
  background: var(--hv-chip);
  color: var(--hv-cream);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html[data-hero-mode] .fs-hv__btn:hover { background: var(--hv-chip-hover); }
html[data-hero-mode] .fs-hv__btn:focus-visible,
html[data-hero-mode] .fs-hv-slot .fs-hv__btn:focus-visible {
  outline: 2px solid var(--hv-cream);
  outline-offset: 2px;
}
html[data-hero-mode] .fs-hv__btn svg { width: 20px; height: 20px; flex: none; }

html[data-hero-mode] .fs-hv__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
html[data-hero-mode] .fs-hv__bar > * { pointer-events: auto; }
html[data-hero-mode] .fs-hv__spacer { flex: 1; pointer-events: none; }

/* Sound: a labelled pill until the first activation, then a 44px toggle. */
html[data-hero-mode] .fs-hv__btn--sound .fs-hv__icon { display: inline-flex; }
html[data-hero-mode] .fs-hv[data-sound="cta"] .fs-hv__btn--sound { padding: 0 16px; }
html[data-hero-mode] .fs-hv[data-sound="cta"] .fs-hv__btn--sound svg { width: 18px; height: 18px; }
html[data-hero-mode] .fs-hv:not([data-sound="cta"]) .fs-hv__sound-label { display: none; }

html[data-hero-mode] .fs-hv__btn--close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Fullscreen: element fullscreen where the document allows it, else the
   iPhone video player, which needs metadata first. */
html[data-hero-mode] .fs-hv[data-fullscreen="none"] .fs-hv__btn--fullscreen,
html[data-hero-mode] .fs-hv[data-fullscreen="video"]:not([data-metadata]) .fs-hv__btn--fullscreen { display: none; }

html[data-hero-mode] .fs-hv__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
}
html[data-hero-mode] .fs-hv__progress > span {
  display: block;
  height: 100%;
  background: var(--honey-500, #D4A843);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Centered play (poster / NotAllowedError / error) */
html[data-hero-mode] .fs-hv__btn--play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  display: none;
}
html[data-hero-mode] .fs-hv__btn--play svg { width: 28px; height: 28px; margin-left: 3px; }
html[data-hero-mode] .fs-hv:is([data-state="poster"], [data-state="refused"], [data-state="error"]) .fs-hv__btn--play { display: inline-flex; }

/* A chip, not bare text: the still behind it can be any color
   (cream on the .72 chip over white is 7.2:1). */
html[data-hero-mode] .fs-hv__error-msg {
  position: absolute;
  left: 50%;
  top: calc(50% + 44px);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 12px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill, 100px);
  background: var(--hv-chip);
  text-align: center;
  font: 500 14px/1.4 var(--font-body);
  color: var(--hv-cream);
  pointer-events: none;
}
html[data-hero-mode] .fs-hv__error-msg:empty { display: none; }

/* Poster failed: the title stands in for the still. It owns the top-left
   band of the frame and can never reach a control at any frame size:
     right      68px              = Hide video's 12px inset + 44px + 12px gap
     max-height calc(50% - 52px)  = from top 12px to 8px above the centered
                                    Play (its top edge is at 50% - 32px)
   The line clamp ends the last whole line in an ellipsis; max-height plus
   overflow clips anything a too-narrow frame cannot fit. The clamp is the
   most lines that fit at the narrowest frame of each step (room = width *
   9/32 - 52px): 2 x 18px from 313px wide, 3 x 21px from 409px, 4 x 21px
   from 484px, 4 x 24px from 527px. The full title is always the video's
   aria-label. */
html[data-hero-mode] .fs-hv__title {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 68px;
  max-height: calc(50% - 52px);
  margin: 0;
  display: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: left;
  font: 600 14px/18px var(--font-body);
  color: var(--hv-cream);
  overflow-wrap: anywhere;
  pointer-events: none;
}
@container (min-width: 480px) {
  html[data-hero-mode] .fs-hv__title { -webkit-line-clamp: 3; font-size: 16px; line-height: 21px; }
}
@container (min-width: 640px) {
  html[data-hero-mode] .fs-hv__title { -webkit-line-clamp: 4; }
}
@container (min-width: 960px) {
  html[data-hero-mode] .fs-hv__title { font-size: 18px; line-height: 24px; }
}
html[data-hero-mode] .fs-hv[data-poster="failed"]:not([data-has-frame]) .fs-hv__title,
html[data-hero-mode] .fs-hv[data-poster="failed"][data-state="error"] .fs-hv__title { display: -webkit-box; }

/* Buffering / loading spinner */
html[data-hero-mode] .fs-hv__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 3px solid rgba(253, 251, 247, 0.3);
  border-top-color: var(--hv-cream);
  display: none;
  animation: fs-hv-spin 0.9s linear infinite;
  pointer-events: none;
}
html[data-hero-mode] .fs-hv:is([data-state="loading"], [data-state="buffering"]) .fs-hv__spinner { display: block; }
@keyframes fs-hv-spin { to { transform: rotate(360deg); } }

/* End overlay (feature mode; the layout does not change on "ended") */
html[data-hero-mode] .fs-hv__end {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 9, 0.45);
}
html[data-hero-mode] .fs-hv[data-state="ended"] .fs-hv__end { display: flex; }
html[data-hero-mode] .fs-hv__btn--replay { padding: 0 18px; }
html[data-hero-mode] .fs-hv[data-state="ended"] .fs-hv__bar { display: none; }
/* Poster (autoplay off, Low Power Mode, NotAllowedError) and error: the
   still, the centered play button and Hide video; nothing else. */
html[data-hero-mode] .fs-hv:is([data-state="poster"], [data-state="refused"], [data-state="error"], [data-state="unsupported"]) :is(.fs-hv__bar, .fs-hv__progress),
html[data-hero-mode] .fs-hv:is([data-state="poster"], [data-state="refused"], [data-state="error"], [data-state="unsupported"]) .fs-hv__ui::before { display: none; }
/* Unsupported (no HLS engine): the still and Hide video only; the watch
   control keeps its box (no layout shift) but is gone. */
html[data-hero-playable="0"] .fs-hv-slot { visibility: hidden; }

/* Fine pointers: chrome fades while unmuted playback runs untouched. */
html[data-hero-mode] .fs-hv :is(.fs-hv__bar, .fs-hv__btn--close) { transition: opacity 0.2s ease; }
html[data-hero-mode] .fs-hv[data-idle] :is(.fs-hv__bar, .fs-hv__btn--close),
html[data-hero-mode] .fs-hv[data-idle] .fs-hv__ui::before { opacity: 0; }

/* Element fullscreen keeps our controls; the picture letterboxes. */
html[data-hero-mode] .fs-hv__frame:fullscreen { background: #000; }
html[data-hero-mode] .fs-hv__frame:fullscreen .fs-hv__video,
html[data-hero-mode] .fs-hv__frame:fullscreen .fs-hv__poster { object-fit: contain; }
html[data-hero-mode] .fs-hv__frame:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
html[data-hero-mode] .fs-hv__frame:-webkit-full-screen .fs-hv__video,
html[data-hero-mode] .fs-hv__frame:-webkit-full-screen .fs-hv__poster { object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  html[data-hero-mode] .fs-hv__spinner { animation: none; }
  html[data-hero-mode] .fs-hv__poster,
  html[data-hero-mode] .fs-hv :is(.fs-hv__bar, .fs-hv__btn--close) { transition: none; }
}

/* ---------- Watch-again slot ---------- */
html[data-hero-mode="feature"] .fs-hv-slot { display: none; }
html[data-hero-mode="ambient"] .fs-hv-slot {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 1rem;
}
html[data-hero-mode] .fs-hv-slot .fs-hv__btn {
  padding: 0 18px 0 14px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--honey-500, #D4A843);
  color: var(--hv-cream);
}
html[data-hero-mode] .fs-hv-slot .fs-hv__btn svg { width: 16px; height: 16px; }
html[data-hero-mode] .fs-hv-slot .fs-hv__duration { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
html[data-hero-mode] .fs-hv-slot .fs-hv__btn:hover { background: rgba(253, 251, 247, 0.12); }

/* ---------- Ambient: the dimmed band behind the headline ---------- */
html[data-hero-mode="ambient"] [data-fs-hero-stage],
html[data-hero-mode="ambient"] .deslop-marketplace .marketplace-mode-container { isolation: isolate; }
html[data-hero-mode="ambient"] .fs-hv,
html[data-hero-mode="ambient"] .deslop-marketplace .marketplace-mode-container > .fs-hv {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--hv-ambient-h);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent);
}
html[data-hero-mode="ambient"] .fs-hv__frame { background: transparent; }
html[data-hero-mode="ambient"] .fs-hv :is(.fs-hv__poster, .fs-hv__video) { object-position: center 35%; }
html[data-hero-mode="ambient"] .fs-hv__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--hv-scrim);
}
/* No picture at all (poster failed, nothing decoded): no band. */
html[data-hero-mode="ambient"] .fs-hv[data-poster="failed"]:not([data-has-frame]) { visibility: hidden; }

/* Welcome: green-tinted scrim; the headline content rides above the band. */
html[data-hero-mode="ambient"] .deslop-welcome .fs-hv {
  --hv-scrim: rgba(16, 32, 12, 0.62);
  --hv-ambient-h: clamp(260px, 48svh, 420px);
}
html[data-hero-mode="ambient"] .deslop-welcome [data-fs-hero-stage] > .hero { z-index: 1; }
@media (min-width: 769px) {
  html[data-hero-mode="ambient"] .deslop-welcome .fs-hv { --hv-ambient-h: 100%; }
}
/* Welcome phones: .hero-intro is display:contents, so its children are flex
   items of .hero. In both modes the marketplace CTA sits right under the
   subtitle (order 2, after it in the DOM); in ambient Watch again follows it
   (order 3, ahead of the carousel, which is later in the DOM), so headline,
   CTA and Watch again sit together over the band and the CTA keeps its
   first-screen place at 360x640 (it was 51px under the fold after the
   carousel, E2E 2026-11-06). */
@media (max-width: 768px) {
  html[data-hero-mode] .deslop-welcome .hero-ctas {
    order: 2;
    margin: 0 0 1.25rem;
  }
  html[data-hero-mode="ambient"] .deslop-welcome .fs-hv-slot { order: 3; justify-content: center; margin: 0 0 1.25rem; }
}

/* Copy that sits over the band is held to 4.5:1 against the worst case, a
   white frame under the scrim. Welcome's .62 scrim clears that for solid
   cream (4.66:1) but not for its translucent copy (cream at .85 = 3.88:1),
   so that copy goes solid while the band is up. */
html[data-hero-mode="ambient"] .deslop-welcome :is(.hero-sub, .showcase-subtext, .farm-counts) { color: var(--text-inverse, #FDFBF7); }

/* Index: blue-700-tinted scrim inside the slab (the slab clips the band).
   .65, not .62: over white, .62 gives cream 4.26:1 and the subtitle (white
   at .95 opacity) 4.16:1; .65 gives 4.68:1 and 4.55:1. (The green-200
   breadcrumb would need .69; it is replaced by "Watch the video" while the
   hero is live, see MARKETPLACE below.) */
html[data-hero-mode="ambient"] .deslop-marketplace .fs-hv {
  --hv-scrim: rgba(18, 40, 64, 0.65);
  --hv-ambient-h: clamp(240px, 40svh, 340px);
}
@media (min-width: 769px) {
  html[data-hero-mode="ambient"] .deslop-marketplace .fs-hv { --hv-ambient-h: clamp(280px, 42vh, 440px); }
}

/* One moving finish per surface: the slab's lake-light shimmer yields to
   the hero (site-deslop-v4.css .marketplace-mode-container::after). */
html[data-hero-mode] .deslop-marketplace .marketplace-mode-container::after { content: none; }

/* ============================================================
   FEATURE MODE — WELCOME
   ============================================================ */

/* Portrait phones (<=768, not a landscape phone): full-bleed 16:9 frame
   directly under the masthead; the marketplace CTA sits under the subtitle
   (rule above) so it stays in the first viewport (360x640 .. 430x932). */
html[data-hero-mode="feature"] .deslop-welcome .fs-hv {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: none;
}

/* Desktop, tablets >768 and landscape phones: the frame is sized by the
   viewport height and centered; under it a lede row (headline + subtitle |
   marketplace CTA); then the original benefits | farms row and the
   footer. The page scrolls (welcome.html unlocks html/body overflow in
   feature mode). --hv-reserve = masthead + stage padding + frame/lede gap +
   lede row + bottom breathing room, per welcome's own height tiers. */
@media (min-width: 769px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html[data-hero-mode="feature"] .deslop-welcome {
    --hv-reserve: 248px; /* 107 masthead + 24 + 24 + 69 lede + 24 */
    --hv-gutter: 48px;
  }
  /* welcome.html locks html/body to the viewport at >=769px
     (overflow:hidden) and scrolls .hero internally. Feature mode scrolls the
     window instead, as welcome does on phones: html scrolls, body grows
     (body overflow:auto + height:100% would make body a nested scroller and
     leave window.scrollY at 0). */
  html[data-hero-mode="feature"]:has(> body.deslop-welcome) { overflow: auto; }
  html[data-hero-mode="feature"] body.deslop-welcome { overflow: visible; height: auto; }
  html[data-hero-mode="feature"] .deslop-welcome .page-wrapper {
    height: auto;
    min-height: 100vh;
  }
  html[data-hero-mode="feature"] .deslop-welcome [data-fs-hero-stage] {
    flex: none;
    padding-top: 24px;
  }
  html[data-hero-mode="feature"] .deslop-welcome .fs-hv {
    width: min(calc((100vh - var(--hv-reserve)) * 16 / 9), calc(100% - 2 * var(--hv-gutter)), 1600px);
    width: min(calc((100svh - var(--hv-reserve)) * 16 / 9), calc(100% - 2 * var(--hv-gutter)), 1600px);
    margin: 0 auto;
  }
  html[data-hero-mode="feature"] .deslop-welcome .fs-hv__frame { border-radius: 10px; }
  html[data-hero-mode="feature"] .deslop-welcome .hero {
    flex: none;
    display: grid;
    /* right column: the CTA label stays on one line (welcome's own
       .hero-intro column is 470px; the carousel is 330px wide) */
    grid-template-columns: minmax(0, 470px) minmax(0, 380px);
    grid-template-areas:
      "h1 ctas"
      "sub ctas"
      "benefits showcase"
      "disclosure showcase";
    grid-template-rows: auto auto auto 1fr;
    gap: 0 4rem; /* welcome's flex .hero gap:4rem would become a 64px row gap */
    justify-content: center;
    align-items: start;
    padding: 24px 3rem 2.5rem;
    overflow: visible;
  }
  html[data-hero-mode="feature"] .deslop-welcome .hero-intro { display: contents; }
  html[data-hero-mode="feature"] .deslop-welcome .hero-intro h1 { grid-area: h1; text-align: left; }
  html[data-hero-mode="feature"] .deslop-welcome .hero-sub { grid-area: sub; text-align: left; margin: 0; }
  html[data-hero-mode="feature"] .deslop-welcome .hero-ctas {
    grid-area: ctas;
    align-self: center;
    margin: 0;
  }
  html[data-hero-mode="feature"] .deslop-welcome .benefits-grid { grid-area: benefits; margin-top: 2.5rem; }
  html[data-hero-mode="feature"] .deslop-welcome .farm-disclosure { grid-area: disclosure; }
  html[data-hero-mode="feature"] .deslop-welcome .hero-showcase {
    grid-area: showcase;
    width: auto;
    margin: 2.5rem 0 0;
    /* welcome sizes the cards from 100vh to fit its locked one-screen
       layout; the page scrolls in feature mode, so the cards take a fixed
       height instead. */
    --card-img-h: 240px;
  }
}
/* welcome.html's compact tiers shrink the masthead (56px / 44px logo) and
   the CTA; the reserve follows them. */
@media (min-width: 769px) and (max-height: 820px) {
  html[data-hero-mode="feature"] .deslop-welcome { --hv-reserve: 195px; } /* 76 + 16 + 20 + 67 + 16 */
  html[data-hero-mode="feature"] .deslop-welcome [data-fs-hero-stage] { padding-top: 16px; }
  html[data-hero-mode="feature"] .deslop-welcome .hero { padding-top: 20px; }
}
@media (min-width: 769px) and (max-height: 700px) {
  html[data-hero-mode="feature"] .deslop-welcome { --hv-reserve: 163px; } /* 59 + 12 + 16 + 64 + 12 */
  html[data-hero-mode="feature"] .deslop-welcome [data-fs-hero-stage] { padding-top: 12px; }
  html[data-hero-mode="feature"] .deslop-welcome .hero { padding-top: 16px; }
}
/* Landscape phones: the frame is 46% of the viewport height (floor 45%),
   which leaves room for a two-line headline + subtitle beside the CTA
   above the fold (844x390: 59 masthead + 12 + 179 frame + 12 + 107 lede). */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html[data-hero-mode="feature"] .deslop-welcome { --hv-gutter: 20px; }
  html[data-hero-mode="feature"] .deslop-welcome [data-fs-hero-stage] { padding-top: 12px; }
  html[data-hero-mode="feature"] .deslop-welcome .fs-hv {
    width: min(calc(46vh * 16 / 9), calc(100% - 2 * var(--hv-gutter)));
    width: min(calc(46svh * 16 / 9), calc(100% - 2 * var(--hv-gutter)));
  }
  html[data-hero-mode="feature"] .deslop-welcome .hero {
    padding: 12px 1.25rem 1.5rem;
    column-gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  }
}


/* Landscape phones wider than 768px (844x390, 932x430) keep welcome's locked
   desktop layout in ambient mode, whose intro column ran benefits before the
   CTA: the CTA ended below the fold. The column puts the CTA right under the
   subtitle, then Watch again, then the benefit cards. */
@media (min-width: 769px) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html[data-hero-mode="ambient"] .deslop-welcome .hero-intro { display: flex; flex-direction: column; }
  html[data-hero-mode="ambient"] .deslop-welcome .hero-ctas { order: 1; margin: 0 0 0.75rem; }
  html[data-hero-mode="ambient"] .deslop-welcome .fs-hv-slot { order: 2; margin: 0 0 0.75rem; }
  html[data-hero-mode="ambient"] .deslop-welcome :is(.benefits-grid, .farm-disclosure) { order: 3; }
}

/* ============================================================
   MARKETPLACE (index.html, data-hero-layout="background")
   The loop is always the dimmed band behind the headline; it never takes
   room above the search. The full video opens in a lightbox.
   ============================================================ */

/* .mode-content-active carries transform: translateY(0) (style.css), an
   identity transform that still makes it the containing block of fixed
   descendants: the lightbox would scroll with the page and sit inside it.
   Removing an identity transform moves nothing. */
html[data-hero-layout="background"][data-hero-mode] #marketplace-mode-content { transform: none; }

/* "Watch the video" takes the self-referential breadcrumb's row (Home >
   Marketplace on the marketplace itself). The breadcrumb stays in layout,
   invisible (not focusable, not announced), so the row keeps whatever height
   the engine gives it (Chromium 20px, WebKit 44px: a fixed slot height moved
   the search 24px on WebKit) and the headline and search sit exactly where
   they sit with the hero off. The slot lies over the row; the button is
   44px tall (hit target) and hangs 8px into the slab padding above; the
   visible chip is its middle 28px. */
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .mp-header-decor > nav { visibility: hidden; }
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 28px;
  min-height: 0;
  margin: 0;
  pointer-events: none;
}
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn { pointer-events: auto; }
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn {
  isolation: isolate;
  position: relative;
  margin-top: -8px;
  padding: 0 14px 0 10px;
  gap: 6px;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  z-index: -1;
  border-radius: var(--radius-pill, 100px);
  background: rgba(18, 40, 64, 0.55);
  box-shadow: inset 0 0 0 1px var(--honey-500, #D4A843);
}
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn:hover { background: transparent; }
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn:hover::before { background: rgba(18, 40, 64, 0.8); }
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn svg { width: 14px; height: 14px; }
html[data-hero-layout="background"][data-hero-mode] .deslop-marketplace .fs-hv-slot .fs-hv__btn:focus-visible { outline-offset: -6px; }

/* Lightbox: the root leaves the slab for a fixed layer over the page
   (above the header, bottom nav and cart button), the frame centered at the
   largest 16:9 that fits inside the gutter. The page keeps its scroll
   position and layout under it: hero-video.js blocks wheel, touch and key
   scrolling while it is open instead of overflow:hidden, which would drop
   the scrollbar and widen (reflow) the page under the layer. */
html[data-hero-layout="background"][data-hero-mode="feature"] .deslop-marketplace .marketplace-mode-container > .fs-hv {
  --hv-lb-gutter: 16px;
  position: fixed;
  inset: 0;
  z-index: 1100; /* the site's overlay layer: above .fs-bottom-nav (1000) */
  width: auto;
  height: auto;
  margin: 0;
  background: rgba(8, 12, 8, 0.9);
  overscroll-behavior: contain;
  touch-action: none;
}
@media (min-width: 769px) and (min-height: 501px) {
  html[data-hero-layout="background"][data-hero-mode="feature"] .deslop-marketplace .marketplace-mode-container > .fs-hv { --hv-lb-gutter: 48px; }
}
html[data-hero-layout="background"][data-hero-mode="feature"] .deslop-marketplace .fs-hv__frame {
  --hv-lb-w: min(calc(100vw - 2 * var(--hv-lb-gutter)), calc((100vh - 2 * var(--hv-lb-gutter)) * 16 / 9), 1600px);
  --hv-lb-w: min(calc(100vw - 2 * var(--hv-lb-gutter)), calc((100svh - 2 * var(--hv-lb-gutter)) * 16 / 9), 1600px);
  inset: 0;
  margin: auto;
  width: var(--hv-lb-w);
  height: calc(var(--hv-lb-w) * 9 / 16);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}