/* =============================================================================
   Bluefin Design System - Layout primitives  (Phase 2 / Workstream 1)
   -----------------------------------------------------------------------------
   Page-structure primitives consumed by the layout partials in bluefin/layout/.
   All bf- prefixed, tokens-only, additive. They express column structure with
   CSS (flex), NOT with the STORE_TYPE-driven BOX_WIDTH / LEFT_WIDTH / RIGHT_WIDTH
   math in application_top.php - retiring that branching is WS2. Breakpoints are
   fixed constants here (custom properties cannot be used in @media conditions),
   aligned to Bootstrap 3's grid (md >=768).

   No em dash (U+2014) anywhere (CI style guard).
   ============================================================================= */

/* Page shell: the outermost wrapper a rebuilt page opts into. */
.bf-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Match the Open Market main canvas (home-open-market.css redefines
     --bf-color-surface-alt to #f5f7fa inside .bf-om). The footer wave rises out of
     the page by revealing the shell through its transparent top; if the shell kept
     the base surface-alt (#f2f3f4) it would peek through a hair cooler than the
     .bf-om main above and leave a faint seam. Keep this in sync with that redefine. */
  background-color: #f5f7fa;
  color: var(--bf-color-text);
  font-family: var(--bf-font-body);
}

.bf-shell__main {
  flex: 1 0 auto;
}

/* Centered content container with a max width and gutters. */
.bf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--bf-space-4);
}

.bf-container--narrow {
  max-width: 720px;
}

/* Page heading for redesigned content pages (the .bf-scope h1 carries the type;
   this only adds vertical rhythm). */
.bf-page-head {
  padding: var(--bf-space-5) 0 var(--bf-space-2);
}

.bf-page-head h1,
.bf-page-head h2 {
  margin: 0;
  font-family: var(--bf-font-display);
}

/* Region: main content + optional sidebar. Single column on small screens,
   two columns from md up. The sidebar side is chosen by a modifier. */
.bf-region {
  display: flex;
  /* Force full width: in some page contexts the flex container was landing in a
     shrink-to-fit sizing context and collapsing to its content width (which
     starved the flex-1 main column down to a few px). width:100% pins it to its
     parent regardless. */
  width: 100%;
  flex-direction: column;
  gap: var(--bf-space-5);
  padding: var(--bf-space-5) 0;
}

.bf-region__main {
  min-width: 0;
}

.bf-region__sidebar {
  min-width: 0;
}

@media (min-width: 768px) {
  .bf-region {
    flex-direction: row;
  }

  .bf-region__main {
    flex: 1 1 auto;
  }

  /* 360px (not the original 280px) so the legacy rail widgets fit: the
     previously-viewed / featured-results fragments carry hard-coded fixed widths
     (e.g. a width:360px carousel + min-width:300px cards) built for the old
     ~380px col-md-4 column; a narrower rail makes them overflow off-screen to the
     right. Revisit (narrow this back) when those sidebar widgets are restyled. */
  .bf-region__sidebar {
    flex: 0 0 360px;
  }

  /* Sidebar-first variant places the aside on the left. */
  .bf-region--sidebar-left {
    flex-direction: row-reverse;
  }
}

/* Stack: vertical rhythm helper for a column of elements. */
.bf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

/* Header / footer shells. The header is the editorial masthead: a light "paper"
   surface with charcoal ink, framed by a brand-color accent rule on the top edge
   and a hairline base. The brand color is used as an ACCENT (the top rule, the
   active-link underline, the CTA) rather than filling the bar, so it recolors
   safely for any storefront hue. The footer is the secondary (charcoal) bar. */
.bf-header {
  position: sticky;
  top: 0;
  z-index: var(--bf-z-sticky);
  color: var(--bf-color-text);
  /* Aurora "Lantern" masthead: the light white surface (same as the homepage cards)
     lifts off the page with a soft borderless drop shadow, dressed with a faint brand
     BLOOM - a soft primary glow from the top-left and an accent glow from the bottom-right
     (the footer's aurora, transposed and kept low-alpha so the bar still reads white).
     The crisp gradient EDGE lives in ::after; the buttons carry a matching inner glow. */
  background-color: var(--bf-color-surface);
  /* Three brand glows so the bloom carries ALL the storefront's colors, not just the
     warm ones: primary from the left, secondary through the center, accent from the
     right (a storefront usually configures primary + secondary, with accent falling
     back to the default, so primary->accent alone can read monochrome). Centered
     vertically on the short bar so the glow actually lands on it. */
  background-image:
    radial-gradient(600px 240px at 0% 50%,
        color-mix(in srgb, var(--bf-brand-primary) 22%, transparent), transparent 72%),
    radial-gradient(560px 220px at 50% 116%,
        color-mix(in srgb, var(--bf-brand-secondary) 24%, transparent), transparent 68%),
    radial-gradient(640px 240px at 100% 50%,
        color-mix(in srgb, var(--bf-brand-accent) 20%, transparent), transparent 72%);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.16);
}

/* Aurora "edge" signature on the light masthead: a thin brand primary-to-accent rule
   along the bottom of the bar. Brand as an EDGE, not a fill - the same flare the
   footer/CTA use, kept light. Rides the bottom edge over the soft drop shadow. */
.bf-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent));
}

.bf-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-3) var(--bf-space-4);
  padding: var(--bf-space-3) 0;
}

/* Header chrome (WS3): a masthead brand, the account-avatar trigger, and a
   responsive nav - inline from md up, a CSS-only hamburger drawer below md (a
   visually-hidden checkbox toggles .bf-header__nav; no JS, works JS-off). */
.bf-header__brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

.bf-header__logo {
  display: block;
  max-width: 280px;
  max-height: 54px;
  width: auto;
  height: auto;
}

/* SVG masthead logos: a viewBox-only SVG carries no intrinsic pixel size, so
   width/height:auto collapses it to nothing (the image simply does not appear).
   Give SVG logos a definite height and use object-fit so wide newspaper
   wordmarks scale down to the bar without distortion. Matches the .svg src that
   hozi.main.js sets on the masthead from the storefront's portal image. */
.bf-header__logo[src*=".svg"] {
  width: auto;
  height: 54px;
  max-width: 280px;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

/* Inlined SVG masthead: hozi.main.js inlines an SVG logo (instead of using <img>)
   so it inherits the storefront brand tokens and recolors. Size the inline <svg>
   like the logo; its viewBox preserves the aspect ratio. */
.bf-masthead-svg {
  display: inline-flex;
  align-items: center;
}
.bf-masthead-svg svg {
  display: block;
  width: auto;
  height: 54px;
  max-width: 280px;
  max-height: 54px;
}

.bf-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding: var(--bf-space-1) var(--bf-space-2);
  color: var(--bf-color-text);
  cursor: pointer;
}

.bf-header__toggle-icon {
  font-size: var(--bf-text-2xl);
  line-height: 1;
}

.bf-header__nav {
  display: none;
  flex-basis: 100%;
}

.bf-header__toggle-input:checked ~ .bf-header__nav {
  display: block;
}

.bf-header__nav .bf-nav--inline {
  flex-direction: column;
  align-items: stretch;
  gap: var(--bf-space-1);
}

.bf-header__nav .bf-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding-bottom: var(--bf-space-1);
  color: var(--bf-color-text);
  font-family: "Inter", var(--bf-font-body);
  font-weight: var(--bf-weight-medium);
  font-size: var(--bf-text-sm);
  text-transform: none;
  font-variant: normal;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Animated underline on hover/active (skipped for the CTA button), in the
   storefront brand color (the accent against the paper masthead). */
.bf-header__nav .bf-nav__link:not(.bf-header__cta)::after {
  content: "";
  position: absolute;
  left: var(--bf-space-2);
  right: var(--bf-space-2);
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bf-transition-fast);
}

.bf-header__nav .bf-nav__link:hover {
  background-color: transparent;
  color: var(--bf-color-text);
  text-decoration: none;
}

.bf-header__nav .bf-nav__link:not(.bf-header__cta):hover::after,
.bf-header__nav .bf-nav__link.is-active:not(.bf-header__cta)::after {
  transform: scaleX(1);
}

/* "Place an Ad" CTA (Aurora edge): a LIGHT pill whose border is the brand
   primary-to-accent gradient (the double-background trick - a surface fill clipped to
   the padding box, over the gradient clipped to the border box), with dark ink and
   a small brand "+". It reads as the primary action through the gradient EDGE, not
   a heavy secondary-color fill; hover lifts it with a soft brand glow. */
.bf-header__nav .bf-nav__link.bf-header__cta {
  color: var(--bf-color-text);
  font-weight: var(--bf-weight-bold);
  border-radius: var(--bf-radius-pill);
  padding: var(--bf-space-2) var(--bf-space-4);
  border: 1.6px solid transparent;
  background-image:
    linear-gradient(var(--bf-color-surface), var(--bf-color-surface)),
    linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* Lantern: a faint brand inner glow so the pill reads as lit from within. */
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--bf-brand-primary) 15%, transparent);
  transition: var(--bf-transition-lift);
}

.bf-header__nav .bf-nav__link.bf-header__cta::before {
  content: "+";
  font-weight: 800;
  color: var(--bf-brand-primary);
}

.bf-header__nav .bf-nav__link.bf-header__cta:hover {
  transform: translateY(var(--bf-lift-1));
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent),
    0 6px 16px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent);
}

.bf-header__actions {
  display: inline-flex;
  align-items: center;
}

/* Account trigger. The link is the focus target, so its focus ring is round
   (matching the avatar) instead of the browser's square outline; focus-visible
   means a mouse click shows no ring at all, only keyboard focus does. */
.bf-header__account {
  display: inline-flex;
  border-radius: var(--bf-radius-pill);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Avatar chip on the paper masthead: a hairline ring on a surface fill, framing
   either the default (charcoal) glyph or, when logged in, the customer photo. */
.bf-header__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--bf-radius-pill);
  object-fit: cover;
  /* The account pill carries the brand gradient edge, so the avatar stays a clean
     disc with a light hairline (no competing ring). Lantern: a soft brand-tinted
     disc shows behind the default marker glyph (a real photo covers it). */
  background: radial-gradient(circle at 32% 30%,
      color-mix(in srgb, var(--bf-brand-primary) 16%, var(--bf-color-surface)),
      var(--bf-color-surface-alt));
  box-shadow: inset 0 0 0 1px var(--bf-color-border);
  transition: box-shadow var(--bf-transition-fast);
}

.bf-header__account:hover .bf-header__avatar {
  box-shadow: inset 0 0 0 1px var(--bf-color-border-strong);
}

.bf-header__account:focus-visible .bf-header__avatar {
  box-shadow: inset 0 0 0 1px var(--bf-color-border-strong),
    0 0 0 3px var(--bf-color-focus-ring);
}

/* WS4: state-aware account trigger. Signed out = a brand-plate "Sign in" pill
   (figure glyph + label); signed in = avatar + first name + caret. The
   #customer-profile-thumb <img> stays in the DOM in both states so the login JS
   can swap its src; on in-place (place_ad) login the script flips --out to --in. */
.bf-header__account--out {
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  color: var(--bf-color-text);
  font-family: "Inter", var(--bf-font-body);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-sm);
  text-decoration: none;
  /* Light gradient-edge pill matching the CTA (was a solid secondary-color block) */
  border: 1.6px solid transparent;
  background-image:
    linear-gradient(var(--bf-color-surface), var(--bf-color-surface)),
    linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--bf-brand-primary) 15%, transparent);
  transition: var(--bf-transition-lift);
}
.bf-header__account--out:hover {
  transform: translateY(var(--bf-lift-1));
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent),
    0 6px 16px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent);
}
.bf-header__account--out:focus-visible {
  outline: 3px solid var(--bf-color-focus-ring);
  outline-offset: 2px;
}
.bf-header__account-figure {
  width: 17px;
  height: 17px;
  fill: currentColor;
  color: var(--bf-brand-primary);
}
.bf-header__account-label {
  line-height: 1;
}
.bf-header__account--out .bf-header__avatar {
  display: none;
}

.bf-header__account--in {
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 6px;
  color: var(--bf-color-text);
  font-family: "Inter", var(--bf-font-body);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-sm);
  text-decoration: none;
  /* Same light gradient-edge pill as the CTA / Sign-in trigger (was a flat gray
     border, which read as out of place next to the aurora edges). */
  border: 1.6px solid transparent;
  background-image:
    linear-gradient(var(--bf-color-surface), var(--bf-color-surface)),
    linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--bf-brand-primary) 15%, transparent);
  transition: var(--bf-transition-lift);
}
.bf-header__account--in:hover {
  transform: translateY(var(--bf-lift-1));
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent),
    0 6px 16px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent);
}
.bf-header__account--in:focus-visible {
  outline: 3px solid var(--bf-color-focus-ring);
  outline-offset: 2px;
}
.bf-header__account--in .bf-header__avatar {
  width: 30px;
  height: 30px;
}
.bf-header__account-name {
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-header__account-caret {
  color: var(--bf-color-text-muted);
  font-size: 13px;
}
.bf-header__account--in .bf-header__account-figure,
.bf-header__account--in .bf-header__account-label {
  display: none;
}

/* The base `.bf-scope a { color: teal }` (0,1,1) outranks a single trigger class,
   which tinted the trigger label/name teal. Pin the trigger text with a .bf-scope
   compound (0,2,0) so it wins in every state (including :hover). */
.bf-scope .bf-header__account--out {
  color: var(--bf-color-text);
}
.bf-scope .bf-header__account--in {
  color: var(--bf-color-text);
}

/* Click feedback on the masthead: kill the ugly default dark tap/click highlight
   box on the logo + nav links + hamburger, and show a clean press (a quick dim)
   instead. Keyboard focus still gets the bf-scope focus-visible ring, so
   accessibility is preserved. */
.bf-header a,
.bf-header__toggle {
  -webkit-tap-highlight-color: transparent;
}

.bf-header a:focus:not(:focus-visible),
.bf-header__toggle:focus:not(:focus-visible) {
  outline: none;
}

.bf-header a:active,
.bf-header__toggle:active {
  opacity: 0.6;
}

@media (min-width: 768px) {
  /* Condensed single-row chrome (Open Market): logo on the left, the inline nav
     and the account avatar pushed to the right. The avatar takes layout width on
     this row (no absolute float), so the bar stays a compact single line on every
     page. */
  .bf-header__inner {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--bf-space-4);
  }

  .bf-header__brand {
    margin-right: auto;
    padding-bottom: 0;
  }

  .bf-header__actions {
    position: static;
    margin-left: var(--bf-space-2);
  }

  .bf-header__toggle {
    display: none;
  }

  .bf-header__nav,
  .bf-header__toggle-input:checked ~ .bf-header__nav {
    display: flex;
    flex-basis: auto;
    justify-content: flex-end;
    width: auto;
    padding-top: 0;
    border-top: 0;
  }

  .bf-header__nav .bf-nav--inline {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bf-space-4);
  }
}

.bf-footer {
  /* Aurora footer band: a GUARANTEED-DARK neutral base (derived from the text token,
     never the raw brand) so white text is legible on ANY storefront brand - the same
     neutral-housing + brand-accent convention the Open Market dark consoles use. Static
     fallback first, then the text-derived charcoal where color-mix is supported. Depth
     comes from two soft brand "aurora" glows (primary + accent, low alpha; see the
     background-image below, which this comment used to miscount as three);
     brand shows only as ACCENTS (wordmark rule, column titles, link hovers, crest rim). */
  --bf-footer-base: #14161a;
  --bf-footer-base: color-mix(in srgb, var(--bf-color-text) 86%, #000);
  --bf-footer-wave-h: 96px;
  /* The page tone the wave is carved from. MUST match the shell / .bf-om main canvas
     above the footer (see .bf-shell, #f5f7fa) so the cutout is invisible against it. */
  --bf-footer-canvas: #f5f7fa;
  position: relative;
  overflow: hidden;
  margin-top: var(--bf-space-5);
  /* Padding clears the wave; content sits above it via .bf-footer__inner. Entirely in
     flow: the wave SVG (top:0 inside the footer) carves the page color out of the band's
     TOP (a cutout), so nothing overlays the previous section (the csr_home regression),
     and the only edge is the wave crest (page meeting band). */
  padding: calc(var(--bf-footer-wave-h) + var(--bf-space-6)) 0 0;
  color: #ffffff;
  background-color: var(--bf-footer-base);
  /* Two broad brand glows blooming in from opposite corners (primary high-left, accent
     low-right) for the aurora depth. Large + soft so they read as atmospheric washes
     across the band, not tight spotlights; their peaks sit in the corners and fade
     toward the middle, so the surface stays a calm dark and no hard-edged wrong-color
     band forms under the wave (that was the old parallax ribbon, now removed). */
  background-image:
    radial-gradient(1200px 640px at 0% 2%,
        color-mix(in srgb, var(--bf-brand-primary) 24%, transparent), transparent 68%),
    radial-gradient(1200px 660px at 100% 116%,
        color-mix(in srgb, var(--bf-brand-accent) 20%, transparent), transparent 66%);
}

/* Sculpted divider: a SINGLE clean crest. The SVG carves the wave from the top of the
   band by painting the page color above the curve (.bf-footer__wave-fill); below the
   curve it is transparent so the dark band shows through with no seam. A soft lit rim
   (.bf-footer__wave-edge) traces the crest. There is deliberately NO second filled
   layer: an earlier brand-tinted "parallax" band had a straight bottom edge inside the
   SVG that read as a hard horizontal line under the wave. preserveAspectRatio="none"
   stretches it full width; the edge uses vector-effect:non-scaling-stroke so it stays an
   even hairline at any width. */
.bf-footer__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--bf-footer-wave-h);
  display: block;
  pointer-events: none;
}

.bf-footer__wave-fill {
  /* the page-colored cutout above the crest (NOT the dark band) */
  fill: var(--bf-footer-canvas);
}

.bf-footer__wave-edge {
  fill: none;
  /* soft, brand-independent lit crest rim; a low-alpha white keeps it subtle on any
     palette (warm or cool) rather than reading as a hard colored line. */
  stroke: color-mix(in srgb, #ffffff 22%, transparent);
  stroke-width: 1.5;
}

.bf-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: 40px var(--bf-space-6);
  padding-bottom: var(--bf-space-6);
}

.bf-footer__brand {
  max-width: 34ch;
}

/* NOTE on specificity: every text element below is prefixed with `.bf-footer ` so it
   reaches (0,2,0)/(0,3,0) and beats the light-surface base rules `.bf-scope a` and
   `.bf-scope h1..h6` (both 0,1,1). Without the prefix the anchors inherited the deep
   "readable-on-paper" teal (#00737f) and the h3 titles inherited charcoal (#222222) -
   both unreadable on this dark band. Text is white / translucent-white; brand shows
   only as accents (wordmark underline, hovers). */
.bf-footer .bf-footer__mark {
  display: inline-block;
  font-family: var(--bf-font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 10px;
  position: relative;
}

.bf-footer__mark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-accent));
}

.bf-footer__tagline {
  margin: var(--bf-space-4) 0 0;
  font-family: "Inter", var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.6;
  color: color-mix(in srgb, #ffffff 74%, transparent);
}

.bf-footer__glowdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--bf-brand-primary);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--bf-brand-primary) 70%, transparent);
}

.bf-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bf-space-6);
}

.bf-footer .bf-footer__coltitle {
  margin: 0 0 var(--bf-space-4);
  font-family: "Inter", var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* mostly-white label with a light brand tint: legible on the dark band, still on-brand */
  color: color-mix(in srgb, #ffffff 68%, var(--bf-brand-primary));
}

.bf-footer__collist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.bf-footer .bf-footer__link {
  font-family: "Inter", var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: color-mix(in srgb, #ffffff 82%, transparent);
  text-decoration: none;
  display: inline-block;
  transition: color var(--bf-transition-fast), transform var(--bf-transition-base);
}

.bf-footer .bf-footer__link:hover,
.bf-footer .bf-footer__link:focus-visible {
  color: #ffffff;
  transform: translateX(3px);
  text-decoration: none;
}

.bf-footer__baseline {
  position: relative;
  z-index: 1;
}

.bf-footer__baseinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bf-space-3);
  padding-top: var(--bf-space-4);
  padding-bottom: var(--bf-space-5);
}

.bf-footer__copyright {
  margin: 0;
  font-family: "Inter", var(--bf-font-body);
  font-size: var(--bf-text-sm);
  color: color-mix(in srgb, #ffffff 60%, transparent);
}

.bf-footer .bf-footer__copyright a {
  color: color-mix(in srgb, #ffffff 78%, transparent);
}

.bf-footer .bf-footer__copyright a:hover,
.bf-footer .bf-footer__copyright a:focus-visible {
  color: #ffffff;
}

.bf-footer .bf-footer__toplink {
  font-family: "Inter", var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff 72%, transparent);
  text-decoration: none;
}

.bf-footer .bf-footer__toplink:hover,
.bf-footer .bf-footer__toplink:focus-visible {
  color: #ffffff;
}

@media (max-width: 760px) {
  .bf-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .bf-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================================================
   Account rail (WS4 Open Market "Split Concierge"): the two-pane content of the
   #panel-my-account slide-out (bluefin/layout/site_account_panel.php). A charcoal
   brand / identity pane beside a light form / actions pane. The panel GEOMETRY
   (fixed position, widened width, off-screen rest, backdrop) is a scoped override
   in sandbox/css/override.main.css; this file styles the CONTENT. It is NOT scoped
   to .bf-om (the panel is body-level chrome), so all colors come straight from the
   :root brand tokens. The Bootstrap password modals keep their own light frame;
   .bf-account-panel__error (kept at the end) still styles their inline errors.
   ============================================================================= */
.bf-account {
  /* Containing block for .bf-account__close, which is a child of THIS wrapper and
     not of a pane: it has to stay at the panel's top-right whichever pane layout
     is in play, and must not scroll with a pane's own overflow. */
  position: relative;
  height: 100%;
  font-family: "Inter", var(--bf-font-body);
}

.bf-account__grid {
  display: grid;
  grid-template-columns: 244px 1fr;
  height: 100%;
}
.bf-account__grid--in {
  grid-template-columns: 268px 1fr;
}

/* ---- charcoal brand / identity pane ---- */
.bf-account__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--bf-space-5);
  color: var(--bf-brand-primary-ink);
  background:
    radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--bf-brand-primary) 22%, transparent), transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--bf-brand-secondary) 88%, #000), var(--bf-brand-secondary) 60%);
  overflow-y: auto;
}
.bf-account__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(color-mix(in srgb, var(--bf-brand-primary-ink) 9%, transparent) 1px, transparent 1.3px);
  background-size: 13px 13px;
}
.bf-account__brand > * {
  position: relative;
}

.bf-account__mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bf-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--bf-brand-primary-ink);
}
.bf-account__mark b {
  color: var(--bf-brand-primary);
}
.bf-account__figure {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  color: var(--bf-brand-primary);
}

.bf-account__welcome {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: var(--bf-text-2xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: var(--bf-space-6) 0 var(--bf-space-3);
  color: var(--bf-brand-primary-ink);
}
.bf-account__welcome-sub {
  font-size: var(--bf-text-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 74%, transparent);
  margin: 0 0 var(--bf-space-6);
}
.bf-account__trust {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}
.bf-account__trust li {
  display: flex;
  gap: var(--bf-space-3);
  align-items: center;
  font-size: var(--bf-text-sm);
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 88%, transparent);
  margin-bottom: var(--bf-space-4);
}
.bf-account__chip {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--bf-radius-pill);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bf-brand-primary) 18%, transparent);
  color: var(--bf-brand-primary);
  font-size: 14px;
}

/* identity (signed in) */
.bf-account__avatar {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin: var(--bf-space-5) 0 var(--bf-space-3);
  overflow: hidden;
}
.bf-account__avatar a {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.bf-account__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: var(--bf-radius-pill);
}
.bf-account__idname {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: var(--bf-text-xl);
  margin: 0;
  color: var(--bf-brand-primary-ink);
}
.bf-account__idrole {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: var(--bf-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: var(--bf-radius-pill);
  background: color-mix(in srgb, var(--bf-brand-primary) 20%, transparent);
  color: var(--bf-brand-primary-ink);
}
.bf-account__photolink {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--bf-text-xs);
  color: var(--bf-brand-primary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.bf-account__photo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-3);
  margin-top: 10px;
}
.bf-account__photo-controls .bf-account__photolink {
  margin-top: 0;
}
.bf-account__photolink--danger {
  color: color-mix(in srgb, var(--bf-color-danger) 55%, #fff);
}

/* Profile photo crop dialog (Cropper.js). Bootstrap modal frame; cropper.css is
   lazy-loaded on first use, so the .cropper-* rules only take effect once present. */
.bf-cropmodal .modal-dialog {
  max-width: 460px;
}
.bf-cropmodal__hint {
  margin: 0 0 var(--bf-space-4);
  text-align: center;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}
.bf-cropmodal__stage {
  background: var(--bf-color-surface-sunken);
  border-radius: var(--bf-radius-md);
  overflow: hidden;
}
.bf-cropmodal__stage .img-container {
  max-height: 58vh;
}
.bf-cropmodal__stage .img-container > img {
  display: block;
  max-width: 100%;
}
.bf-cropmodal__toolbar {
  display: flex;
  justify-content: center;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-4);
}
/* Preview the circular avatar: round the crop view while the crop box stays square. */
.bf-cropmodal .cropper-view-box,
.bf-cropmodal .cropper-face {
  border-radius: 50%;
}
.bf-account #upload-profile-pic {
  display: block;
  margin: var(--bf-space-3) 0 0;
  padding: var(--bf-space-3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bf-radius-md);
  background: color-mix(in srgb, var(--bf-brand-primary-ink) 6%, transparent);
  color: var(--bf-brand-primary-ink);
  font-size: var(--bf-text-sm);
}
.bf-account #upload-profile-pic-text {
  display: block;
  font-size: var(--bf-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 72%, transparent);
  margin-bottom: var(--bf-space-2);
}
.bf-account #upload-profile-pic-file {
  margin: 0;
}
.bf-account #profileUpload {
  width: 100%;
  font-size: var(--bf-text-xs);
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 82%, transparent);
}
.bf-account #profileUpload::file-selector-button {
  margin-right: var(--bf-space-2);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--bf-radius-sm);
  background: transparent;
  color: var(--bf-brand-primary-ink);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xs);
  cursor: pointer;
}
.bf-account #upload-profile-pic-actions {
  display: flex;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-3);
}
.bf-account #upload-profile-pic-actions .bf-btn {
  flex: 1;
}
.bf-account__stats {
  list-style: none;
  margin: var(--bf-space-6) 0 0;
  padding: 0;
}
.bf-account__stats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--bf-space-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--bf-transition-fast);
}
.bf-account__stats li:last-child a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.bf-account__stats a:hover {
  padding-left: 4px;
}
.bf-account__stat-k {
  font-size: var(--bf-text-sm);
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 74%, transparent);
}
.bf-account__stat-v {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: var(--bf-text-lg);
  color: var(--bf-brand-primary-ink);
}

/* ---- light form / actions pane ---- */
.bf-account__form {
  position: relative;
  /* No top padding: .bf-account__head supplies it, because that row is sticky and
     has to be able to reach the top of the scrollport. */
  padding: 0 var(--bf-space-5) var(--bf-space-5);
  background: var(--bf-color-surface);
  overflow-y: auto;
}
/* The head row: whatever titles the pane (the tab switch, or the "Your account"
   heading) beside the close control, on one line. Stacking them cost ~46px of a
   panel that has to hold a whole form. Sticky so the close cannot scroll out of
   the pane, which is what it did when it was an absolute child of that pane. */
.bf-account__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: var(--bf-space-4) 0 var(--bf-space-4);
  background: var(--bf-color-surface);
}
.bf-account__head > .bf-account__tabs,
.bf-account__head > .bf-account__formhead {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Specificity is deliberate. The button also carries .close-account-panel, the JS
   hook the other slide-outs share, and the legacy rules for those live in sheets
   loaded AFTER this one, so a single-class selector here loses on source order. */
.bf-account .bf-account__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface);
  color: var(--bf-color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--bf-transition-fast), color var(--bf-transition-fast), transform var(--bf-transition-fast);
}
.bf-account .bf-account__close:hover {
  background: var(--bf-color-surface-alt);
  color: var(--bf-color-text);
  transform: rotate(90deg);
}
.bf-account .bf-account__close:focus-visible {
  outline: 3px solid var(--bf-color-focus-ring);
  outline-offset: 2px;
}

.bf-account__reminder {
  margin-bottom: var(--bf-space-4);
  padding: var(--bf-space-3) var(--bf-space-4);
  border-radius: var(--bf-radius-md);
  background: color-mix(in srgb, var(--bf-color-warning) 12%, #fff);
  color: var(--bf-color-text);
  font-size: var(--bf-text-sm);
}
.bf-account__reminder p {
  margin: 0;
}

.bf-account__formhead {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: var(--bf-text-xl);
  letter-spacing: -0.01em;
  margin: 0 0 var(--bf-space-4);
  color: var(--bf-color-text);
}

.bf-account__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  gap: 4px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface-sunken);
  margin: 0 0 var(--bf-space-5);
}
.bf-account__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 9px 0;
  border-radius: var(--bf-radius-pill);
  font-family: "Inter", var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text-muted);
  transition: color var(--bf-transition-base);
}
.bf-account__tab[aria-selected="true"] {
  color: var(--bf-color-text);
}
.bf-account__tab:focus-visible {
  outline: 3px solid var(--bf-color-focus-ring);
  outline-offset: 1px;
}
.bf-account__glider {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 6px);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface);
  box-shadow: var(--bf-shadow-sm);
  transition: transform var(--bf-transition-base);
}
.bf-account__form[data-tab="register"] .bf-account__glider {
  transform: translateX(calc(100% + 4px));
}

.bf-account__tabpane {
  display: none;
}
.bf-account__form[data-tab="login"] .bf-account__pane-login,
.bf-account__form[data-tab="register"] .bf-account__pane-register {
  display: block;
  animation: bf-account-fade var(--bf-transition-base) both;
}

.bf-account__label {
  display: block;
  font-size: var(--bf-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bf-color-text-muted);
  margin-bottom: 6px;
  font-weight: var(--bf-weight-medium);
}
.bf-account__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bf-space-3);
}
.bf-account__inputwrap {
  position: relative;
}
.bf-account__input--pw {
  padding-right: 44px;
}
.bf-account__reveal {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--bf-color-text-muted);
  font-size: 14px;
  border-radius: 0 var(--bf-radius-md) var(--bf-radius-md) 0;
}
.bf-account__reveal:hover {
  color: var(--bf-color-primary-text);
}
.bf-account__reveal:focus-visible {
  outline: 3px solid var(--bf-color-focus-ring);
  outline-offset: -3px;
}

.bf-account__error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--bf-space-3);
  padding: 9px 12px;
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-sm);
  background: var(--bf-color-danger-bg);
  color: var(--bf-color-danger);
}
.bf-account__check {
  display: flex;
  gap: var(--bf-space-2);
  align-items: flex-start;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text);
}

.bf-account__rowend {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 var(--bf-space-4);
}
.bf-account__link {
  font-size: var(--bf-text-sm);
  color: var(--bf-color-primary-text);
  text-decoration: none;
}
.bf-account__link:hover {
  text-decoration: underline;
}

.bf-account__cta {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--bf-radius-md);
  cursor: pointer;
  font-family: "Inter", var(--bf-font-body);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-base);
  background: var(--bf-brand-secondary);
  color: var(--bf-brand-primary-ink);
  transition: background var(--bf-transition-fast), box-shadow var(--bf-transition-fast), transform var(--bf-transition-fast);
}
.bf-account__cta:hover {
  background: color-mix(in srgb, var(--bf-brand-secondary) 82%, #000);
  box-shadow: var(--bf-shadow-md);
}
.bf-account__cta:active {
  transform: translateY(1px);
}
.bf-account__cta:focus-visible {
  outline: 3px solid var(--bf-color-focus-ring);
  outline-offset: 2px;
}
.bf-account__cta--ghost {
  background: transparent;
  border: 1px solid var(--bf-color-border-strong);
  color: var(--bf-color-text);
}
.bf-account__cta--ghost:hover {
  background: var(--bf-color-surface-alt);
  box-shadow: none;
}

.bf-account__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: var(--bf-space-4) 0 0;
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
}
.bf-account__secure .fa {
  color: var(--bf-color-success);
}
.bf-account__notice {
  margin: var(--bf-space-4) 0 0;
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
  line-height: 1.6;
}

/* actions list (signed in) */
.bf-account__actions {
  list-style: none;
  margin: 0 0 var(--bf-space-4);
  padding: 0;
}
.bf-account__actions li {
  border-bottom: 1px solid var(--bf-color-border);
}
.bf-account__actions li:first-child {
  border-top: 1px solid var(--bf-color-border);
}
.bf-account__actions a,
.bf-account__actions button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: 15px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--bf-color-text);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  transition: padding-left var(--bf-transition-fast), color var(--bf-transition-fast);
}
.bf-account__actions a:hover,
.bf-account__actions button:hover {
  padding-left: 12px;
  color: var(--bf-color-primary-text);
}
.bf-account__lead {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--bf-radius-md);
  display: grid;
  place-items: center;
  background: var(--bf-color-surface-alt);
  color: var(--bf-color-primary-text);
  font-size: 15px;
  transition: background var(--bf-transition-fast);
}
.bf-account__actions a:hover .bf-account__lead,
.bf-account__actions button:hover .bf-account__lead,
.bf-account__disclosure button:hover .bf-account__lead {
  background: color-mix(in srgb, var(--bf-brand-primary) 12%, transparent);
}
.bf-account__chev {
  margin-left: auto;
  color: var(--bf-color-border-strong);
}
.bf-account__count {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-brand-accent);
  color: #fff;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bf-account__disclosure button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: 15px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--bf-color-text);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
}
.bf-account__editform {
  padding: var(--bf-space-4) 6px 0;
}
.bf-account__logout {
  margin-top: var(--bf-space-5);
}

@keyframes bf-account-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 660px) {
  .bf-account__grid,
  .bf-account__grid--in {
    grid-template-columns: 1fr;
  }
  /* Stacked: the form pane is the SECOND row, so a close control inside it sits
     halfway down the screen. Pin it to the panel instead, where it lands over the
     brand pane's top-right.
     BOTH ancestors have to drop out of positioning for that to work, and each
     one caught this in turn: `position: sticky` on the head row makes it a
     containing block, so the button anchored to the ROW and landed back on the
     tabs; with that fixed it anchored to .bf-account__form and landed on the
     reminder banner. Nothing else needs either anchor (the glider and the
     password reveal anchor to .bf-account__tabs and .bf-account__inputwrap,
     which carry their own `position: relative`), and sticky buys nothing here
     because the button it was pinning is no longer inside the row. */
  .bf-account__head,
  .bf-account__form {
    position: static;
  }
  .bf-account .bf-account__close {
    position: absolute;
    z-index: 3;
    top: var(--bf-space-4);
    right: var(--bf-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-account__glider,
  .bf-account .bf-account__close,
  .bf-account__cta,
  .bf-account__actions a,
  .bf-account__actions button,
  .bf-account__stats a,
  .bf-account__form[data-tab] .bf-account__tabpane {
    transition: none;
    animation: none;
  }
}

/* Password-reset / change modals keep their light Bootstrap frame; this still
   styles their inline error text. */
.bf-account-panel__error {
  display: block;
  margin: var(--bf-space-2) 0;
  color: var(--bf-color-danger);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
}

/* Cookie notice  .bf-cookienote

   A disclosure, not a consent gate: every cookie this app sets is first-party
   and either strictly necessary or a UI preference, and none of it feeds
   advertising or tracking. So this is a quiet corner card, not an alert. It
   replaced a full-bleed .bf-alert--warning bar, which painted an amber "something
   is wrong" band across the bottom of every page for a message that is not a
   warning.

   Visibility is decided server-side now (bfCookieNoticeDismissed() in
   includes/functions/bf_chrome.php): a visitor who has closed it is sent no
   markup at all, so there is no legacy .hide class and no post-paint reveal. */
/* The gap lives ON the card, so its position never depends on a :has() rule
   resolving. There is deliberately NO reserved space at the end of the page: an
   earlier version padded the body (and then the footer) by the card's height so
   the footer copyright link underneath stayed clickable, and the cure was worse
   than the disease. It left a large empty band at the bottom of every page for
   every visitor who had not yet dismissed the notice, first as a white strip and
   then, once moved into the footer, as dead space in the band. The card is
   dismissed in one click and then never returns for a year, so a briefly covered
   copyright link is the cheaper trade. Occlusion checks will flag that link while
   the notice is up: that is the accepted cost, not a regression to chase. */
.bf-cookienote {
  --bf-cookienote-gap: var(--bf-space-5);

  position: fixed;
  bottom: calc(var(--bf-cookienote-gap) + var(--bf-cookienote-lift, 0px));
  left: var(--bf-cookienote-gap);
  z-index: var(--bf-z-toast);
  width: min(360px, calc(100vw - var(--bf-space-8)));
  padding: var(--bf-space-4);
  background-color: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-lg);
  animation: bf-cookienote-in var(--bf-dur-slow) var(--bf-ease) both;
}

/* The kicker carries the label, so the copy itself never has to say "cookies"
   twice. Same idiom as the .bf-om-dlg header kicker. */
.bf-cookienote__kicker {
  display: block;
  margin-bottom: var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bf-brand-accent);
}

.bf-cookienote__text {
  margin: 0 0 var(--bf-space-4);
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text);
}

.bf-cookienote__actions {
  display: flex;
  align-items: center;
  gap: var(--bf-space-4);
}

/* (0,2,0) so it beats the .bf-scope a color at (0,1,1) on this light surface. */
.bf-cookienote .bf-cookienote__link {
  font-size: var(--bf-text-sm);
  color: var(--bf-color-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes bf-cookienote-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Narrow screens: a floating card would eat a thumb-sized corner of a small
   viewport, so span the width and sit closer to the edge. */
@media (max-width: 599px) {
  .bf-cookienote {
    --bf-cookienote-gap: var(--bf-space-3);

    right: var(--bf-cookienote-gap);
    width: auto;
  }
}

/* Never sit on top of the place-ad running-price bar. That bar is fixed to the
   same edge at z-index 900 (.bf-om-studio__proofbar in home-open-market.css) and
   carries the running order total plus the See preview link, which while composing
   an ad is the only place the price appears. This moves the card, it does not
   reserve anything.

   BOTH conditions gate on #build.active. The bar's own display rules can rely on
   .is-detached alone because the bar lives inside the #build pane and Bootstrap
   hides it with the pane, but this moves an element OUTSIDE that pane, so it has
   to re-state the gate. .is-detached is not a proxy for it: proof-bar.js observes
   .bf-om-studio__proofbox with an IntersectionObserver, a display:none target
   reports isIntersecting false, and #category is the active pane at first paint,
   so the class is on from DOMContentLoaded until the advertiser reaches Build. */
@media (max-width: 899px) {
  body:has(#build.active .bf-om-studio__proofbar) {
    --bf-cookienote-lift: 92px;
  }
}

@media (min-width: 900px) {
  body:has(#build.active .bf-om-studio__proofbar.is-detached) {
    --bf-cookienote-lift: 92px;
  }
}

/* It is chrome, not content: never spend ink on it. payment_receipt.php is a print
   page and renders this partial like every other page. */
@media print {
  .bf-cookienote {
    display: none;
  }
}

/* Payment page (WS3 chunk-3): centered sheet + mobile button stack. */
.bf-scope #payment-form {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 599px) {
  .bf-scope .place-ad_button-row .col-xs-12 {
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-2);
  }

  .bf-scope .place-ad_button-row .bf-btn {
    float: none;
    width: 100%;
    margin-right: 0 !important; /* overrides the inline margin-right:10px */
  }

  .bf-scope .place-ad_button-row #next-button-payment {
    order: -1; /* primary action first */
  }

  .bf-scope .place-ad_button-row #payment-validation-error {
    float: none;
    width: 100%;
  }
}