/*
 * BeginThings shared shell — 2026-09-19. No document/content styles.
 *
 * Integration contract:
 * - Theme: html[data-bt-theme="dark|light"] (default: dark).
 * - Accent: html[data-bt-accent="blue|teal|violet|rose"] (default: blue).
 * - Contrast: html[data-bt-contrast="high"] or the OS contrast preference.
 * - Embedded tools: html[data-bts-embed="true"] hides the complete shell.
 * - Add html.bts-enhanced only after the shell's event handlers are ready.
 *   Toggle the mobile nav's hidden attribute and the menu's aria-expanded
 *   together; no overlay, focus trap, or body scroll lock is required.
 * - Give every button type="button" and decorative SVGs aria-hidden="true".
 *   Use aria-current="page" on the active link. Keep the mobile nav inside
 *   #bts-header, immediately after .bts-header-inner.
 * - Brand uses img.bts-logo (the existing /assets/bt-logo-white.svg, alt="",
 *   width="30", height="24") followed by the visible text wordmark.
 * - Optional footer hooks: .bts-tagline and .bts-legal. Direct p/span children
 *   of .bts-legal form separate lines; details/summary may hold verified IDs.
 * - DM Sans is used if already loaded; this file makes no network requests.
 *
 * Header/footer rules are ID-scoped; #btAppearanceDialog receives tokens only.
 * #bts-skip is a separate, focus-only skip link to the parent's main target.
 * Important declarations in this layer beat unlayered legacy !important rules,
 * even those loaded later.
 * If the host uses important rules in OTHER layers, declare bts-shell first in
 * its layer order. Inline !important and user-origin overrides can still win.
 * Never move these rules out of their layer or add content/app selectors here.
 */
@layer bts-shell {
  #bts-skip {
    all: revert !important;
    box-sizing: border-box !important;
    display: block !important;
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    left: max(16px, env(safe-area-inset-left, 0px)) !important;
    z-index: 10000 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 solid #8cc8ff !important;
    border-radius: 8px !important;
    background: #10151f !important;
    color: #eef3fa !important;
    font: 600 14px/1.5 "DM Sans", ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    -webkit-text-fill-color: currentColor !important;
    pointer-events: none !important;
  }

  #bts-skip::before,
  #bts-skip::after {
    all: initial !important;
    content: none !important;
  }

  #bts-skip:focus {
    width: max-content !important;
    max-width: calc(100% - max(16px, env(safe-area-inset-left, 0px)) - max(16px, env(safe-area-inset-right, 0px))) !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: normal !important;
    border-width: 1px !important;
    outline: 3px solid #8cc8ff !important;
    outline-offset: 3px !important;
    pointer-events: auto !important;
  }

  html[data-bt-theme="light"] #bts-skip {
    border-color: #155ca8 !important;
    background: #f8faff !important;
    color: #192438 !important;
    outline-color: #155ca8 !important;
  }

  html[data-bt-contrast="high"] #bts-skip:focus {
    border-color: currentColor !important;
    outline-color: currentColor !important;
  }

  /* Revert author styles while retaining native HTML semantics. Exclude SVG
     geometry: resetting `all` on paths also resets their presentation data. */
  :is(#bts-header, #bts-footer),
  :is(#bts-header, #bts-footer) :where(*):not(:where(svg, svg *)) {
    all: revert !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 solid transparent !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: normal !important;
    text-align: start !important;
    text-decoration: none !important;
    text-transform: none !important;
    vertical-align: baseline !important;
    -webkit-text-fill-color: currentColor !important;
  }

  :is(#bts-header, #bts-footer)::before,
  :is(#bts-header, #bts-footer)::after,
  :is(#bts-header, #bts-footer) :where(*)::before,
  :is(#bts-header, #bts-footer) :where(*)::after {
    all: initial !important;
    content: none !important;
  }

  :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-bg: #10151f;
    --bts-surface: #1b2637;
    --bts-fg: #eef3fa;
    --bts-muted: #aebdd1;
    --bts-border: #34445b;
    --bts-control-border: #71829d;
    --bts-blue: #8cc8ff;
    --bts-teal: #72dfd2;
    --bts-violet: #c5b5ff;
    --bts-rose: #ffafc7;
    --bts-accent: var(--bts-blue);
    --bts-focus: var(--bts-accent);
    --bts-on-accent: #10151f;
  }

  :is(#bts-header, #bts-footer) {
    --bts-gutter: clamp(16px, 3.5vw, 48px);
    --bts-header-height: 76px;
    display: block !important;
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    background: var(--bts-bg) !important;
    color: var(--bts-fg) !important;
    color-scheme: dark !important;
    font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }

  html[data-bt-theme="light"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-bg: #f8faff;
    --bts-surface: #e8eef7;
    --bts-fg: #192438;
    --bts-muted: #506179;
    --bts-border: #b8c7db;
    --bts-control-border: #687a93;
    --bts-blue: #155ca8;
    --bts-teal: #086f68;
    --bts-violet: #6945bc;
    --bts-rose: #a93360;
    --bts-on-accent: #ffffff;
  }

  html[data-bt-theme="light"] :is(#bts-header, #bts-footer) {
    color-scheme: light !important;
  }

  html[data-bt-accent="blue"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-accent: var(--bts-blue);
  }

  html[data-bt-accent="teal"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-accent: var(--bts-teal);
  }

  html[data-bt-accent="violet"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-accent: var(--bts-violet);
  }

  html[data-bt-accent="rose"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-accent: var(--bts-rose);
  }

  :is(#bts-header, #bts-footer) :where(a, button, summary) {
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
    outline-offset: 3px !important;
  }

  :is(#bts-header, #bts-footer) :where(a, button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 100% !important;
    color: var(--bts-fg) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 5px !important;
    transition: background-color 120ms ease, color 120ms ease !important;
  }

  :is(#bts-header, #bts-footer) :where(a, button, summary):focus-visible {
    outline: 3px solid var(--bts-focus) !important;
  }

  :is(#bts-header, #bts-footer) :where(a)[aria-current="page"] {
    color: var(--bts-accent) !important;
    text-decoration-line: underline !important;
    font-weight: 650 !important;
  }

  @media (hover: hover) {
    :is(#bts-header, #bts-footer) :where(a, button, summary):hover {
      background-color: var(--bts-surface) !important;
      color: var(--bts-accent) !important;
    }

    :is(#bts-header, #bts-footer) a:hover {
      text-decoration-line: underline !important;
    }
  }

  :is(#bts-header, #bts-footer) :where(button:disabled, [aria-disabled="true"]) {
    cursor: not-allowed !important;
    color: var(--bts-muted) !important;
    text-decoration-line: none !important;
  }

  :is(#bts-header, #bts-footer) svg {
    all: revert !important;
    display: block !important;
    box-sizing: border-box !important;
    position: static !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  :is(#bts-header, #bts-footer) svg :where(*) {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  :is(#bts-header, #bts-footer) img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  :is(#bts-header, #bts-footer) .bts-brand {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    color: var(--bts-fg) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  :is(#bts-header, #bts-footer) img.bts-logo {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 24px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  html[data-bt-theme="light"] :is(#bts-header, #bts-footer) img.bts-logo {
    filter: brightness(0) !important;
  }

  #bts-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    border-bottom: 1px solid var(--bts-border) !important;
  }

  #bts-header .bts-header-inner,
  #bts-footer .bts-footer-inner {
    width: 100% !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-left: max(var(--bts-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--bts-gutter), env(safe-area-inset-right, 0px)) !important;
  }

  #bts-header .bts-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: calc(var(--bts-header-height) - 1px) !important;
    padding-block: 10px !important;
  }

  #bts-header .bts-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  #bts-header .bts-nav a {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  #bts-header .bts-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #bts-header .bts-signin,
  #bts-header .bts-menu {
    justify-content: center !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  #bts-header .bts-appearance {
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--bts-control-border) !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  #bts-header .bts-menu {
    display: none !important;
    border: 1px solid var(--bts-control-border) !important;
  }

  #bts-header .bts-menu[aria-expanded="true"] {
    background: var(--bts-surface) !important;
    border-color: var(--bts-accent) !important;
    color: var(--bts-accent) !important;
  }

  #bts-header .bts-mobile-nav {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding: 8px var(--bts-gutter) 16px !important;
    padding-left: max(var(--bts-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--bts-gutter), env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--bts-border) !important;
    gap: 2px 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    scroll-padding-block: 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--bts-muted) var(--bts-bg) !important;
  }

  #bts-header .bts-mobile-nav a {
    display: flex !important;
    width: 100% !important;
    padding: 10px 12px !important;
  }

  #bts-footer {
    border-top: 1px solid var(--bts-border) !important;
  }

  #bts-footer .bts-footer-inner {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #bts-footer .bts-footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 24px clamp(20px, 3vw, 40px) !important;
    padding-block: 32px 24px !important;
  }

  #bts-footer .bts-footer-grid > * {
    min-width: 0 !important;
  }

  #bts-footer h2 {
    margin-bottom: 8px !important;
    color: var(--bts-fg) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
  }

  #bts-footer ul,
  #bts-footer li {
    display: block !important;
    list-style: none !important;
  }

  #bts-footer li a {
    color: var(--bts-muted) !important;
    padding-block: 8px !important;
  }

  #bts-footer p,
  #bts-footer .bts-tagline {
    color: var(--bts-muted) !important;
  }

  #bts-footer .bts-footer-grid > :first-child > p,
  #bts-footer .bts-tagline {
    margin-top: 8px !important;
  }

  #bts-footer .bts-legal {
    margin-top: 12px !important;
    color: var(--bts-muted) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  #bts-footer .bts-legal > :is(p, span) {
    display: block !important;
  }

  #bts-footer .bts-legal summary {
    display: list-item !important;
    min-height: 44px !important;
    padding-block: 12px !important;
    list-style: disclosure-closed inside !important;
  }

  #bts-footer .bts-legal details[open] > summary {
    list-style-type: disclosure-open !important;
  }

  #bts-footer .bts-footer-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 24px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--bts-border) !important;
  }

  #bts-footer .bts-footer-bottom > :not(.bts-footer-controls) {
    color: var(--bts-muted) !important;
    font-size: 12px !important;
  }

  #bts-footer .bts-footer-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
  }

  #bts-footer .bts-footer-controls :is(a, button) {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  #bts-footer .bt-lang-wrap {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Never expose an inoperative JS-only control in the unenhanced shell. */
  html:not(.bts-enhanced) :is(#bts-header, #bts-footer)
    :is([data-bts-appearance], [data-bt-consent-settings]) {
    display: none !important;
  }

  /* Explicitly restore hidden, since author display rules beat the UA rule. */
  :is(#bts-header, #bts-footer) [hidden],
  #bts-header .bts-mobile-nav[hidden] {
    display: none !important;
  }

  @media (max-width: 1050px) {
    #bts-header {
      --bts-header-height: 64px;
    }

    #bts-header .bts-header-inner {
      flex-wrap: wrap !important;
      column-gap: 12px !important;
      row-gap: 4px !important;
      padding-block: 9px !important;
    }

    #bts-header .bts-nav {
      display: none !important;
    }

    #bts-header .bts-mobile-nav {
      display: grid !important;
    }

    html.bts-enhanced #bts-header .bts-menu {
      display: inline-flex !important;
    }

    html.bts-enhanced #bts-header .bts-mobile-nav {
      max-height: min(560px, calc(100vh - var(--bts-header-height) - env(safe-area-inset-top, 0px) - 16px)) !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    @supports (height: 100dvh) {
      html.bts-enhanced #bts-header .bts-mobile-nav {
        max-height: min(560px, calc(100dvh - var(--bts-header-height) - env(safe-area-inset-top, 0px) - 16px)) !important;
      }
    }

    /* An expanded fallback belongs in document flow, including when [hidden]
       was rendered by the server. This rule intentionally overrides it. */
    html:not(.bts-enhanced) #bts-header {
      position: static !important;
    }

    html:not(.bts-enhanced) #bts-header .bts-mobile-nav,
    html:not(.bts-enhanced) #bts-header .bts-mobile-nav[hidden] {
      display: grid !important;
      max-height: none !important;
      overflow: visible !important;
    }

    #bts-footer .bts-footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 640px) {
    #bts-header .bts-brand {
      gap: 8px !important;
      font-size: 18px !important;
    }

    /* My account remains in the expanded mobile nav at small widths. */
    #bts-header .bts-signin {
      display: none !important;
    }

    #bts-header .bts-mobile-nav {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #bts-footer .bts-footer-grid {
      gap: 20px 16px !important;
      padding-block: 24px 20px !important;
    }

    #bts-footer .bts-footer-grid > :first-child {
      grid-column: 1 / -1 !important;
    }

    #bts-footer .bts-footer-grid > section:last-child {
      grid-column: 1 / -1 !important;
    }

    #bts-footer .bts-footer-grid > section:last-child > ul {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0 16px !important;
    }

    #bts-footer .bts-footer-bottom {
      align-items: flex-start !important;
      flex-direction: column !important;
      gap: 4px !important;
    }
  }

  @media (max-width: 400px) {
    #bts-header .bts-brand {
      gap: 6px !important;
      font-size: 16px !important;
    }

    :is(#bts-header, #bts-footer) img.bts-logo {
      flex-basis: 26px !important;
      width: 26px !important;
      height: 22px !important;
    }

    #bts-header .bts-menu {
      padding-inline: 8px !important;
    }
  }

  html[data-bt-contrast="high"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
    --bts-muted: var(--bts-fg);
    --bts-border: var(--bts-fg);
    --bts-focus: var(--bts-fg);
  }

  @media (prefers-contrast: more) {
    #bts-skip:focus {
      border-color: currentColor !important;
      outline-color: currentColor !important;
    }

    :is(#bts-header, #bts-footer, #btAppearanceDialog) {
      --bts-muted: var(--bts-fg);
      --bts-border: var(--bts-fg);
      --bts-focus: var(--bts-fg);
    }

    html[data-bt-theme="light"] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
      --bts-muted: var(--bts-fg);
      --bts-border: var(--bts-fg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(#bts-header, #bts-footer),
    :is(#bts-header, #bts-footer) * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }

  @media (forced-colors: active) {
    #bts-skip,
    html[data-bt-theme] #bts-skip,
    html[data-bt-contrast] #bts-skip:focus {
      border-color: CanvasText !important;
      background: Canvas !important;
      color: LinkText !important;
      outline-color: Highlight !important;
      forced-color-adjust: auto !important;
    }

    :is(#bts-header, #bts-footer, #btAppearanceDialog),
    html[data-bt-theme] :is(#bts-header, #bts-footer, #btAppearanceDialog),
    html[data-bt-accent] :is(#bts-header, #bts-footer, #btAppearanceDialog),
    html[data-bt-contrast] :is(#bts-header, #bts-footer, #btAppearanceDialog) {
      --bts-bg: Canvas;
      --bts-surface: Canvas;
      --bts-fg: CanvasText;
      --bts-muted: CanvasText;
      --bts-border: CanvasText;
      --bts-accent: LinkText;
      --bts-focus: Highlight;
      --bts-on-accent: Canvas;
    }

    :is(#bts-header, #bts-footer) {
      forced-color-adjust: auto !important;
    }

    :is(#bts-header, #bts-footer) :where(a, button, summary):focus-visible {
      outline-color: Highlight !important;
    }

    :is(#bts-header, #bts-footer) img.bts-logo,
    html[data-bt-theme] :is(#bts-header, #bts-footer) img.bts-logo {
      filter: brightness(0) !important;
    }

    @media (prefers-color-scheme: dark) {
      :is(#bts-header, #bts-footer) img.bts-logo,
      html[data-bt-theme] :is(#bts-header, #bts-footer) img.bts-logo {
        filter: none !important;
      }
    }
  }

  html[data-bts-embed="true"] :is(#bts-header, #bts-footer, #bts-skip) {
    display: none !important;
  }

  @media print {
    #bts-skip,
    :is(#bts-header, #bts-footer) {
      display: none !important;
    }
  }
}

#btAppearanceDialog{--bg:var(--bts-bg);--surface:var(--bts-surface);--ink:var(--bts-fg);--muted:var(--bts-muted);--line:var(--bts-control-border);--accent:var(--bts-accent);--bt-on-accent:var(--bts-on-accent);box-sizing:border-box}#btAppearanceDialog *{box-sizing:border-box}.bt-appearance-launch{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;min-width:44px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:500 14px/1.4 system-ui;cursor:pointer}
.bt-appearance-launch:hover{border-color:var(--accent)}.bt-appearance-icon{width:44px;padding:8px;font-size:24px}.bt-appearance-launch:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
dialog.bt-appearance{position:fixed;inset:0;margin:auto;width:min(560px,calc(100% - 24px));max-width:560px;max-height:calc(100dvh - 24px);height:auto;overflow:auto;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 24px 90px #0005;font:400 16px/1.55 system-ui;z-index:10000;text-align:left}
.bt-appearance::backdrop{background:#03071399;backdrop-filter:blur(4px)}.bt-appearance form{margin:0}.bt-appearance-heading{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}.bt-appearance h2{font:650 24px/1.3 system-ui;letter-spacing:-.025em;margin:0}.bt-appearance p{margin:14px 0;color:var(--muted);font:400 14px/1.6 system-ui;max-width:none}.bt-appearance button,.bt-appearance select{font:500 15px/1.4 system-ui;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;max-width:100%;box-sizing:border-box}.bt-appearance button:hover{border-color:var(--accent)}.bt-appearance .bt-appearance-close{width:44px;flex:none;font-size:22px;padding:6px}.bt-appearance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin:24px 0}.bt-appearance-fields label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;font-weight:550}.bt-appearance-fields select{width:100%;font-weight:400}.bt-appearance :is(select,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.bt-appearance-preview{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:20px;background:var(--bg)}.bt-appearance-preview>span{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}.bt-appearance-preview>strong{font-size:19px;line-height:1.4;color:var(--ink)}.bt-appearance-preview p{margin:8px 0 0}.bt-appearance .bt-appearance-status{min-height:23px;margin:12px 0;font-size:12px}.bt-appearance-actions{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.bt-appearance .bt-appearance-done{background:var(--accent);color:var(--bt-on-accent,#080d15);border-color:var(--accent);min-width:100px}@media(max-width:600px){dialog.bt-appearance{padding:20px}.bt-appearance-fields{grid-template-columns:1fr;gap:14px;margin:18px 0}.bt-appearance h2{font-size:21px}.bt-appearance-actions button{flex:1}.bt-appearance-preview{padding:16px}.bt-appearance .bt-appearance-status{min-height:0}}
@media(forced-colors:active){.bt-appearance-launch,.bt-appearance button,.bt-appearance select,.bt-appearance-preview{border-color:ButtonText}.bt-appearance .bt-appearance-done{background:ButtonFace;color:ButtonText}}

:root.bts-enhanced :is(.product-nav,.cl-header){top:var(--bts-header-height,76px)}
    :root.bts-enhanced main[id],#bts-content-start{scroll-margin-top:calc(var(--bts-header-height,76px) + 16px)}
    .availability-art{--ink:#f1f5fb;--muted:#b4c0d2;--accent:#a3bfff;--line:#71829d;color:var(--ink);color-scheme:dark}
    #bts-product-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:10px max(16px,calc((100vw - 1224px)/2));border-bottom:1px solid var(--line,#34445b);background:var(--bg,#080d15);color:var(--ink,#eef3fa);font:500 14px/1.5 system-ui}
    #bts-product-nav a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;padding:4px 0}
    #bts-product-nav .bts-product-open{margin-left:auto;color:var(--accent,#8cc8ff);font-weight:700}
    #bts-product-nav a:focus-visible{outline:3px solid var(--accent,#8cc8ff);outline-offset:3px}
    @media(max-width:480px){#bts-product-nav{gap:4px 16px}#bts-product-nav .bts-product-open{margin-left:0}}
    @media print{#bts-product-nav{display:none}}