/* WBA Product Database 0.1.52 — root-level detail overlay, soft detail motion, aligned mobile quick filters, and geometry-safe uniform product cards. */
.wba-db-app.wba-db-overlay-portal {
  --wba-detail-open-shift: 36px;
  --wba-detail-close-shift: 22px;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: var(--wba-layer-detail-drawer, 2147483000) !important;
  pointer-events: none;
}

.wba-db-app.wba-db-overlay-portal.is-open {
  pointer-events: auto;
}

.wba-db-app.wba-db-overlay-portal.is-closing {
  pointer-events: none;
}

/* Keep the database detail UI completely independent from the page/header layout. */
.wba-db-overlay-portal .overlay {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  background: rgba(2, 16, 28, .48) !important;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms;
  will-change: opacity;
}

.wba-db-overlay-portal.is-open .overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease-out, visibility 0s linear 0s;
}

.wba-db-overlay-portal.is-closing .overlay {
  opacity: 0;
  visibility: visible;
  transition: opacity 170ms ease-out;
}

.wba-db-overlay-portal .drawer {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset-block-start: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: min(780px, 100vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: contain;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  z-index: 2 !important;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(var(--wba-detail-open-shift), 0, 0) !important;
  transition: none;
  will-change: transform, opacity;
}

.wba-db-overlay-portal.is-open .drawer,
.wba-db-overlay-portal.is-open .drawer.open {
  top: 0 !important;
  margin-top: 0 !important;
  visibility: visible;
  opacity: 1;
  transform: none !important;
  transition:
    transform 270ms cubic-bezier(.22, 1, .36, 1),
    opacity 160ms ease-out,
    visibility 0s linear 0s;
}

.wba-db-overlay-portal.is-closing .drawer {
  visibility: visible;
  opacity: 0;
  transform: translate3d(var(--wba-detail-close-shift), 0, 0) !important;
  transition:
    transform 190ms cubic-bezier(.4, 0, 1, 1),
    opacity 150ms ease-out;
}

.wba-db-overlay-portal #drawerContent,
.wba-db-overlay-portal .drawer-hero {
  margin-top: 0 !important;
}

/* WordPress shortcode formatting must never create flow space before drawerContent. */
.wba-db-overlay-portal .drawer > br,
.wba-db-overlay-portal .drawer > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The site header must never sit above or reserve visible space over the detail drawer. */
html.wba-db-detail-open .wba-sticky-header-shell,
body.wba-db-detail-open .wba-sticky-header-shell,
html.wba-db-detail-open .wba-site-header,
body.wba-db-detail-open .wba-site-header,
body.wba-db-detail-open .wp-site-blocks > header {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.wba-db-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Product-card normalization: every card uses the same content skeleton. */
.wba-db-app #cardsGrid.grid {
  align-items: stretch;
}

.wba-db-app #cardsGrid .card.premium-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wba-db-app #cardsGrid .card.premium-card > .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wba-db-app #cardsGrid .card-heading {
  height: 78px;
  min-height: 78px;
  max-height: 78px;
  overflow: hidden;
}

.wba-db-app #cardsGrid .brandline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wba-db-app #cardsGrid .card-heading > div:first-child {
  min-width: 0;
}

.wba-db-app #cardsGrid .body h3 {
  box-sizing: border-box;
  min-width: 0;
  line-height: 1.35;
  height: 2.7em;
  min-height: 2.7em;
  max-height: 2.7em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  contain: paint;
}

.wba-db-app #cardsGrid .card-config-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wba-db-app #cardsGrid .card-config-area > .option-label,
.wba-db-app #cardsGrid .card-config-area > .size-pills {
  /* Safeguard while JS wraps legacy renderer output into normalized slots. */
  margin: 0;
}

.wba-db-app #cardsGrid .wba-card-slot {
  width: 100%;
  min-width: 0;
}

/* Size uses a fixed geometry contract: 16px label + 5px gap + 36px pill row. */
.wba-db-app #cardsGrid .wba-card-size-slot {
  height: 57px;
  min-height: 57px;
  max-height: 57px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 16px 36px;
  column-gap: 6px;
  row-gap: 5px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Lid/cap uses the same outer slot for both single-lid and dropdown cards. */
.wba-db-app #cardsGrid .wba-card-lid-slot {
  height: 79px;
  min-height: 79px;
  max-height: 79px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 !important;
}

.wba-db-app #cardsGrid .wba-card-size-slot .option-label,
.wba-db-app #cardsGrid .wba-card-lid-slot .option-label {
  display: block;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  line-height: 16px;
  margin: 0;
}

.wba-db-app #cardsGrid .wba-card-size-slot .option-label {
  grid-column: 1 / -1;
  grid-row: 1;
}

.wba-db-app #cardsGrid .wba-card-size-slot .size-pills {
  grid-column: 1;
  grid-row: 2;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0;
  scroll-padding-inline: 0;
  overflow-x: auto !important;
  scroll-snap-type: x proximity;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.wba-db-app #cardsGrid .wba-card-size-slot .size-pills::-webkit-scrollbar {
  display: none;
}

.wba-db-app #cardsGrid .wba-card-size-slot .size-pills button {
  flex: 0 0 auto;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  scroll-snap-align: start;
}

/* Scroll controls occupy a dedicated grid column; they never cover or clip a Size pill. */
.wba-db-app #cardsGrid .wba-size-scroll-nav {
  grid-column: 2;
  grid-row: 2;
  display: none;
  position: static;
  align-self: center;
  gap: 3px;
  padding: 0;
  background: none;
  z-index: 2;
}

.wba-db-app #cardsGrid .wba-card-size-slot.is-scrollable .wba-size-scroll-nav {
  display: flex;
}

.wba-db-app #cardsGrid .wba-size-scroll-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #526a7c;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.wba-db-app #cardsGrid .wba-size-scroll-btn:disabled {
  opacity: .28;
  cursor: default;
}

/* A one-size product uses the exact same visual language as an active selectable size. */
.wba-db-app #cardsGrid .wba-single-size-pill:disabled {
  opacity: 1 !important;
  cursor: default;
  pointer-events: none;
}

.wba-db-app #cardsGrid .wba-card-static-control {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
  color: #61798b;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
}

/* Single-lid and dropdown controls are intentionally the exact same height. */
.wba-db-app #cardsGrid .wba-card-lid-slot--single .wba-card-static-control,
.wba-db-app #cardsGrid .wba-card-lid-slot .lid-trigger {
  height: 58px;
  min-height: 58px;
  max-height: 58px;
}

.wba-db-app #cardsGrid .wba-card-lid-slot--single .wba-card-static-control {
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
  gap: 8px;
  padding-inline: 8px;
}

.wba-db-app #cardsGrid .wba-card-lid-image {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* Keep selector thumbnails free of the generic image tile behind them. */
.wba-db-app #cardsGrid .lid-thumb {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wba-db-app #cardsGrid .wba-card-lid-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.wba-db-app #cardsGrid .wba-card-lid-name {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 2.5em;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wba-db-app #cardsGrid .lid-trigger.no-lid-image {
  grid-template-columns: minmax(0, 1fr) 22px;
  padding-left: 12px;
}

.wba-db-app #cardsGrid .lid-option.no-lid-image {
  grid-template-columns: minmax(0, 1fr) 20px;
}

.wba-db-app #cardsGrid .lid-option.no-lid-image > span:first-of-type {
  min-width: 0;
}

/* Quick info is invariant: four cells are always retained in the 2x2 metrics grid. */
.wba-db-app #cardsGrid .metrics {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  margin-top: 0;
  margin-bottom: 0;
}

.wba-db-app #cardsGrid .metrics > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Quick Facts are intentionally removed from product cards. */
.wba-db-app #cardsGrid .tags {
  display: none !important;
}

.wba-db-app #cardsGrid .card-cta-stack {
  margin-top: auto;
  padding-top: 12px;
}

.wba-db-app #cardsGrid .card-cta-stack .actions {
  margin-top: 0;
}

.wba-db-app #cardsGrid .card-price-link {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wba-db-app #cardsGrid .card-price-link.is-unavailable {
  color: #8a9ba8;
  text-decoration: none;
  cursor: default;
}

@media (max-width: 900px) {
  .wba-db-app.wba-db-overlay-portal {
    --wba-detail-open-shift: 18px;
    --wba-detail-close-shift: 12px;
  }

  .wba-db-overlay-portal .drawer {
    width: 100vw !important;
  }

  /* <=900px is already the database's mobile breakpoint, so quick filters must align here too. */
  .wba-db-app .wba-showroom-quick {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* WordPress formatting can inject <br> nodes between shortcode buttons. In a grid they become real grid items. */
  .wba-db-app .wba-showroom-quick > br {
    display: none !important;
  }

  .wba-db-app .wba-showroom-quick button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 7px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal;
    line-height: 1.15 !important;
    font-size: 9.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wba-db-overlay-portal .overlay,
  .wba-db-overlay-portal .drawer {
    transition: none !important;
    will-change: auto;
  }

  .wba-db-overlay-portal .drawer,
  .wba-db-overlay-portal.is-closing .drawer,
  .wba-db-overlay-portal.is-open .drawer {
    transform: none !important;
  }

  .wba-db-overlay-portal.is-open .drawer {
    visibility: visible;
    opacity: 1;
  }
}

/* Keep the document root as the sticky scroll container before and after the
   drawer too. The modal lock can then change root overflow without changing
   the scroll container used by sticky descendants. */
html:has(#wbaBottleDatabaseApp) {
  overflow-y: scroll;
}

html.wba-db-modal-open,
body.wba-db-modal-open {
  overflow: hidden !important;
}

/* Keep the locked page from reserving space beside the full-width detail overlay. */
/* Keep one drawer scrollport so the hero leaves naturally and tabs can stick. */
.wba-db-app #detailDrawer.drawer {
  height: 100vh;
  height: 100dvh;
  bottom: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
}

.wba-db-app #detailDrawer #drawerContent {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #aebbc4 transparent;
}

.wba-db-app #detailDrawer .drawer-header,
.wba-db-app #detailDrawer .drawer-tabs {
  flex: 0 0 auto;
}

.wba-db-app #detailDrawer .drawer-header {
  position: relative;
}

.wba-db-app #detailDrawer .drawer-body {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.wba-db-app #detailDrawer .drawer-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
}

.wba-db-app #detailDrawer #drawerClose {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 5;
}

.wba-db-app #detailDrawer #drawerContent::-webkit-scrollbar {
  width: 8px;
}

.wba-db-app #detailDrawer #drawerContent::-webkit-scrollbar-track {
  background: transparent;
}

.wba-db-app #detailDrawer #drawerContent::-webkit-scrollbar-thumb {
  border: 2px solid #fff;
  border-radius: 8px;
  background: #aebbc4;
}

.wba-db-app #detailDrawer #drawerContent::-webkit-scrollbar-thumb:hover {
  background: #8194a1;
}

.wba-db-app .wba-schema-sections {
  display: grid;
  gap: 24px;
}

.wba-db-app .wba-schema-section {
  overflow: hidden;
  border: 1px solid #dce7ef;
  border-radius: 16px;
  background: #fff;
}

.wba-db-app .wba-schema-section > h3 {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #dce7ef;
  background: #f7fafc;
  color: #071a2e;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.wba-db-app .wba-schema-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: 24px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.5;
}

.wba-db-app .wba-schema-row + .wba-schema-row {
  border-top: 1px solid #edf1f4;
}

.wba-db-app .wba-schema-label {
  min-width: 0;
  color: #536b7c;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.wba-db-app .wba-schema-value {
  min-width: 0;
  color: #193c54;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: normal;
}

.wba-db-app .wba-schema-value.is-missing {
  color: #7b8d99;
  font-weight: 500;
}

@media (max-width: 650px) {
  .wba-db-app #detailDrawer.drawer {
    width: 100vw;
    touch-action: pan-y;
  }

  .wba-db-app .drawer-body {
    padding: 20px 18px 32px;
  }

  .wba-db-app .wba-schema-sections {
    gap: 18px;
  }

  .wba-db-app .wba-schema-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 16px;
  }

  .wba-db-app .wba-schema-value {
    text-align: left;
  }
}

/* Phase 1 visual refresh: structured surfaces, visible boundaries, and square controls. */
.wba-db-app {
  --wba-interactive-border: #879eac;
  --wba-interactive-border-hover: #536f80;
  --wba-structural-border: #b7c6d0;
  --wba-internal-divider: #dbe3e8;
  --wba-focus-ring: #087fae;
}

/* Functional controls and containers use square corners; photographic decoration stays untouched. */
.wba-db-app .filters,
.wba-db-app .rangebox,
.wba-db-app .filter-content select,
.wba-db-app .apply-wrap button,
.wba-db-app .saved-btn,
.wba-db-app .saved-btn b,
.wba-db-app .seg,
.wba-db-app .seg button,
.wba-db-app .sortbox,
.wba-db-app .view-options summary,
.wba-db-app .view-options-panel,
.wba-db-app .view-options-panel button,
.wba-db-app .active-filters .chip,
.wba-db-app .quick button,
.wba-db-app #cardsGrid .card,
.wba-db-app #cardsGrid .status,
.wba-db-app #cardsGrid .size-pills button,
.wba-db-app #cardsGrid .wba-size-scroll-btn,
.wba-db-app #cardsGrid .wba-card-static-control,
.wba-db-app #cardsGrid .lid-trigger,
.wba-db-app #cardsGrid .lid-menu,
.wba-db-app #cardsGrid .lid-option,
.wba-db-app #cardsGrid .metrics,
.wba-db-app #cardsGrid .tag,
.wba-db-app #cardsGrid .details,
.wba-db-app #cardsGrid .compare,
.wba-db-app #cardsGrid .card-price-link,
.wba-db-app .load-more,
.wba-db-app .compare-bar,
.wba-db-app .compare-bar button,
.wba-db-app .drawer-section,
.wba-db-app .configuration-card,
.wba-db-app .measurement-group,
.wba-db-app .wba-schema-section,
.wba-db-app .drawer-tabs button,
.wba-db-app .drawer .cta a,
.wba-db-app .drawer .cta button,
.wba-db-app .modal,
.wba-db-app .modal-head button,
.wba-db-app .compare-controls button,
.wba-db-app .switch,
.wba-db-app .table-wrap,
.wba-db-app .compare-table,
.wba-db-app .compare-table th,
.wba-db-app .compare-table td,
.wba-db-app .mobile-sheet,
.wba-db-app .mobile-actions button,
.wba-db-app #filters.open,
.wba-db-app #filters .apply-wrap button,
.wba-db-app .toast {
  border-radius: 0 !important;
}

/* Preserve the intentionally circular favorite affordance and decorative status dots. */
.wba-db-app #cardsGrid .fav {
  border-radius: 50% !important;
}
.wba-db-app .dot,
.wba-db-app .drawer-status-dot,
.wba-db-app .wba-showroom-card-led {
  border-radius: 50% !important;
}

/* Outer surfaces carry the strongest edge; internal rules remain quieter. */
.wba-db-app #cardsGrid .card.premium-card {
  border: 1px solid var(--wba-interactive-border) !important;
  box-shadow: none !important;
  transition: border-color .16s ease !important;
}
.wba-db-app #cardsGrid .card.premium-card:hover {
  transform: none !important;
  border-color: var(--wba-interactive-border-hover) !important;
  box-shadow: none !important;
}
.wba-db-app .filters {
  border: 1px solid #536f80 !important;
  box-shadow: none !important;
}
.wba-db-app .filter-group {
  border-top-color: rgba(210, 226, 236, .22) !important;
}
.wba-db-app .filters-head {
  border-bottom-color: rgba(210, 226, 236, .30) !important;
}
.wba-db-app .rangebox,
.wba-db-app .filter-content select {
  border: 1px solid rgba(202, 221, 232, .62) !important;
}
.wba-db-app .rangebox:focus-within,
.wba-db-app .filter-content select:focus-visible {
  border-color: #8edbff !important;
}
.wba-db-app .metrics,
.wba-db-app .drawer-section,
.wba-db-app .measurement-group,
.wba-db-app .wba-schema-section,
.wba-db-app .configuration-card,
.wba-db-app .table-wrap {
  border: 1px solid var(--wba-structural-border) !important;
  box-shadow: none !important;
}
.wba-db-app .metrics > div,
.wba-db-app .measurement-row,
.wba-db-app .wba-schema-row + .wba-schema-row,
.wba-db-app .compare-table th,
.wba-db-app .compare-table td {
  border-color: var(--wba-internal-divider) !important;
}

/* Default controls are visibly bounded; hover and keyboard focus do not depend on shadow. */
.wba-db-app .saved-btn,
.wba-db-app .seg,
.wba-db-app .sortbox,
.wba-db-app .view-options summary,
.wba-db-app .active-filters .chip,
.wba-db-app .quick button,
.wba-db-app #cardsGrid .size-pills button,
.wba-db-app #cardsGrid .wba-size-scroll-btn,
.wba-db-app #cardsGrid .wba-card-static-control,
.wba-db-app #cardsGrid .lid-trigger,
.wba-db-app #cardsGrid .compare,
.wba-db-app .load-more,
.wba-db-app .mobile-actions button,
.wba-db-app .compare-bar button,
.wba-db-app .compare-controls button,
.wba-db-app .modal-head button {
  border: 1px solid var(--wba-interactive-border) !important;
  box-shadow: none !important;
}
.wba-db-app .saved-btn:hover,
.wba-db-app .seg:hover,
.wba-db-app .sortbox:hover,
.wba-db-app .view-options summary:hover,
.wba-db-app .active-filters .chip:hover,
.wba-db-app .quick button:hover,
.wba-db-app #cardsGrid .size-pills button:hover,
.wba-db-app #cardsGrid .wba-size-scroll-btn:not(:disabled):hover,
.wba-db-app #cardsGrid .wba-card-static-control:hover,
.wba-db-app #cardsGrid .lid-trigger:hover,
.wba-db-app #cardsGrid .compare:hover,
.wba-db-app .load-more:hover,
.wba-db-app .mobile-actions button:hover,
.wba-db-app .compare-bar button:hover,
.wba-db-app .compare-controls button:hover,
.wba-db-app .modal-head button:hover {
  border-color: var(--wba-interactive-border-hover) !important;
}
.wba-db-app .saved-btn[aria-pressed="true"],
.wba-db-app .seg button.active,
.wba-db-app #cardsGrid .size-pills button.active,
.wba-db-app #cardsGrid .lid-option.active,
.wba-db-app .drawer-tabs button[aria-selected="true"],
.wba-db-app .switch:has(input:checked) {
  border-color: var(--wba-interactive-border-hover) !important;
}
.wba-db-app button:focus-visible,
.wba-db-app input:focus-visible,
.wba-db-app select:focus-visible,
.wba-db-app a:focus-visible,
.wba-db-app summary:focus-visible,
.wba-db-app .check input:focus-visible + .box {
  outline: 2px solid var(--wba-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.wba-db-app .check input:focus-visible + .box {
  outline-color: #fff !important;
}

/* Keep normal Details values visually consistent regardless of data provenance. */
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.wba,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.derived,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.mfr,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.unknown,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.wba > a,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.derived > a,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.mfr > a,
.wba-db-app #drawerDetailsScorePanel .measurement-row > strong.unknown > a {
  color: #304c60 !important;
}

.wba-db-app #drawerDetailsScorePanel .measurement-row > .measurement-label-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.wba-db-app #drawerDetailsScorePanel .measurement-label-text {
  min-width: 0;
}

/* Provenance remains in source metadata/classes, while public values use neutral text hierarchy. */
.wba-db-app .metrics strong.wba,
.wba-db-app .metrics strong.derived,
.wba-db-app .metrics strong.mfr,
.wba-db-app .metrics strong.unknown,
.wba-db-app .measurement-row strong.wba,
.wba-db-app .measurement-row strong.derived,
.wba-db-app .measurement-row strong.mfr,
.wba-db-app .measurement-row strong.unknown,
.wba-db-app .drawer-metrics strong.wba,
.wba-db-app .drawer-metrics strong.derived,
.wba-db-app .drawer-metrics strong.mfr,
.wba-db-app .drawer-metrics strong.unknown,
.wba-db-app .compare-value.wba,
.wba-db-app .compare-value.derived,
.wba-db-app .compare-value.mfr,
.wba-db-app .compare-value.unknown,
.wba-db-app .quick-features strong.wba,
.wba-db-app .quick-features strong.derived,
.wba-db-app .quick-features strong.mfr,
.wba-db-app .quick-features strong.unknown {
  color: #425a6a !important;
}

.wba-db-app .view-options-panel,
.wba-db-app #cardsGrid .lid-menu,
.wba-db-app .modal-overlay .modal,
.wba-db-app .drawer,
.wba-db-app .mobile-sheet {
  box-shadow: 0 14px 34px rgba(7, 26, 46, .16) !important;
}
.wba-db-app #cardsGrid .lid-menu {
  border: 1px solid var(--wba-structural-border) !important;
}
.wba-db-app .drawer {
  box-shadow: -18px 0 44px rgba(7, 26, 46, .22) !important;
}
.wba-db-app .toast {
  box-shadow: 0 8px 24px rgba(7, 26, 46, .16) !important;
}

/* Complete the square system for the database's remaining utility controls. */
.wba-db-app button,
.wba-db-app input,
.wba-db-app select,
.wba-db-app summary,
.wba-db-app .wba-showroom-search,
.wba-db-app .drawer-status-line,
.wba-db-app .unknown-data > div span,
.wba-db-app .sort-option,
.wba-db-app .empty button,
.wba-db-app .filters-head button,
.wba-db-app .filter-heading .chev {
  border-radius: 0 !important;
}
.wba-db-app #cardsGrid .fav {
  border-radius: 50% !important;
}
.wba-db-app .wba-showroom-search {
  border: 1px solid #9aafbc !important;
}
.wba-db-app .wba-showroom-search:focus-within {
  border-color: #d7f4ff !important;
}
.wba-db-app .wba-showroom-quick button {
  border: 1px solid rgba(184, 212, 229, .65) !important;
  box-shadow: none !important;
}
.wba-db-app .wba-showroom-quick button:hover {
  border-color: #d7f4ff !important;
}
.wba-db-app .filter-heading .chev {
  border: 1px solid var(--wba-structural-border) !important;
  box-shadow: none !important;
}
.wba-db-app .filters .apply-wrap button,
.wba-db-app #cardsGrid .details,
.wba-db-app .compare-go,
.wba-db-app .cta a,
.wba-db-app .cta button,
.wba-db-app .empty button {
  border: 1px solid var(--navy) !important;
  box-shadow: none !important;
}
.wba-db-app .filters .apply-wrap button:focus-visible,
.wba-db-app #cardsGrid .details:focus-visible,
.wba-db-app .compare-go:focus-visible,
.wba-db-app .cta a:focus-visible,
.wba-db-app .cta button:focus-visible,
.wba-db-app .empty button:focus-visible {
  outline-color: #38b6ff !important;
}
@media (max-width: 900px) {
  .wba-db-app .filters {
    border-radius: 0 !important;
    box-shadow: 0 -14px 32px rgba(7, 26, 46, .18) !important;
  }
  .wba-db-app .filters.open {
    z-index: 86 !important;
  }
}
.wba-db-app .compare-bar,
.wba-db-app .modal,
.wba-db-app .compare-table {
  border: 1px solid var(--wba-interactive-border) !important;
}
.wba-db-app .compare-table th,
.wba-db-app .compare-table td {
  border-width: 1px !important;
}
.wba-db-app .metrics strong.unknown,
.wba-db-app .measurement-row strong.unknown,
.wba-db-app .drawer-metrics strong.unknown,
.wba-db-app .compare-value.unknown,
.wba-db-app .quick-features strong.unknown {
  color: #75838d !important;
}
/* Squared refinements for compact count labels, custom checkboxes, and the drawer overview grid. */
.wba-db-app .check .box,
.wba-db-app .check em,
.wba-db-app .wba-showroom-labels span,
.wba-db-app #wbaShowroomLabel1,
.wba-db-app #wbaShowroomLabel2,
.wba-db-app .quick-features {
  border-radius: 0 !important;
}

/* UX controls follow-up: keep filters sticky only while the results layout is two-column. */
@media (min-width: 901px) {
  .wba-db-app {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .wba-db-app .layout {
    align-items: start;
  }
  .wba-db-app #filters {
    position: sticky !important;
    align-self: start;
    top: calc(var(--wba-db-admin-offset, 0px) + var(--wba-db-header-offset, 72px) + 16px) !important;
    height: max-content;
    max-height: calc(100vh - var(--wba-db-admin-offset, 0px) - var(--wba-db-header-offset, 72px) - 40px) !important;
    max-height: calc(100dvh - var(--wba-db-admin-offset, 0px) - var(--wba-db-header-offset, 72px) - 40px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #8297a5 transparent;
  }
}

/* Saved, Sort, and View share one sizing rule at desktop and mobile widths. */
.wba-db-app .top {
  flex-wrap: wrap;
}
.wba-db-app .toolbar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px !important;
  width: min(492px, 100%);
  min-width: 0;
}
.wba-db-app .toolbar p:empty {
  display: none !important;
}
.wba-db-app .toolbar > .saved-btn,
.wba-db-app .toolbar > .sortbox,
.wba-db-app .toolbar > .view-options > summary,
.wba-db-app .toolbar > #mobileSortBtn {
  box-sizing: border-box;
  width: 100%;
  height: 44px !important;
  min-width: 0;
  margin: 0;
  justify-content: center;
  padding: 0 10px !important;
  border: 1px solid var(--wba-interactive-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wba-db-app .toolbar > .sortbox {
  gap: 5px;
}
.wba-db-app .toolbar > .sortbox select {
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
}
.wba-db-app .toolbar > .view-options {
  min-width: 0;
}
.wba-db-app .toolbar > .view-options > summary {
  white-space: nowrap;
  gap: 5px;
}
.wba-db-app .toolbar > .view-options > summary::after {
  margin-left: auto;
  flex: 0 0 7px;
}
.wba-db-app .toolbar > #mobileSortBtn,
.wba-db-app .toolbar > .mobile-actions {
  display: none;
}

/* Comparison bar: summary, selectable mini-cards, and a deliberate action group. */
.wba-db-app .compare-bar {
  display: grid !important;
  grid-template-columns: minmax(170px, 205px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(1400px, calc(100% - 24px));
  min-height: 86px;
  padding: 12px 14px;
  border-radius: 0 !important;
}
.wba-db-app .compare-summary {
  min-width: 0;
}
.wba-db-app .compare-summary strong {
  font-size: 13px;
  line-height: 1.25;
}
.wba-db-app .compare-summary small {
  display: block;
  max-width: 190px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
}
.wba-db-app .compare-items {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #8297a5 transparent;
  padding: 2px 0 5px;
}
.wba-db-app .compare-chip {
  position: relative;
  display: flex;
  flex: 1 1 190px;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-width: 160px;
  max-width: 240px;
  height: 56px;
  padding: 7px 42px 7px 10px;
  border: 1px solid rgba(202, 221, 232, .55) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .06);
}
.wba-db-app .compare-chip strong,
.wba-db-app .compare-chip small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wba-db-app .compare-chip strong {
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
}
.wba-db-app .compare-chip small {
  margin-top: 3px;
  color: #b4c6d3;
  font-size: 10px;
  line-height: 1.2;
}
.wba-db-app .compare-chip button {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 28px;
  height: 32px;
  transform: translateY(-50%);
  border: 0 !important;
  border-left: 1px solid rgba(202, 221, 232, .4) !important;
  border-radius: 0 !important;
  background: transparent;
  color: #e6f3fa;
  font-size: 20px;
}
.wba-db-app .compare-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wba-db-app .compare-actions button {
  box-sizing: border-box;
  height: 44px;
  min-width: 84px;
  border-radius: 0 !important;
  font-size: 12px;
  font-weight: 800;
}
.wba-db-app .compare-actions .clear {
  border: 1px solid #a9bdca !important;
  background: transparent;
  color: #e2edf3;
}
.wba-db-app .compare-actions .compare-go {
  border: 1px solid #38b6ff !important;
  background: #38b6ff;
  color: #052139;
}
.wba-db-app .compare-actions .compare-go:disabled {
  opacity: .5;
}

@media (min-width: 651px) and (max-width: 1100px) {
  .wba-db-app .compare-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .wba-db-app .compare-items {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 900px) {
  .wba-db-app .toolbar {
    width: 100%;
    max-width: 492px;
  }
  .wba-db-app .toolbar > .saved-btn {
    display: flex !important;
  }
  .wba-db-app .toolbar > .sortbox {
    display: none !important;
  }
  .wba-db-app .toolbar > .view-options {
    display: block !important;
    min-width: 0;
  }
  .wba-db-app .toolbar > #mobileSortBtn {
    display: inline-flex !important;
    align-items: center;
    background: #fff;
    color: #375166;
    font-size: 12px;
    font-weight: 750;
  }
  .wba-db-app .toolbar > .mobile-actions {
    display: grid !important;
    grid-column: 1 / -1;
    width: 100%;
  }
  .wba-db-app .toolbar > .mobile-actions #mobileSavedBtn {
    display: none !important;
  }
  .wba-db-app .toolbar > .mobile-actions button {
    width: 100%;
    height: 40px;
    border-radius: 0 !important;
  }
  .wba-db-app .toolbar > .view-options > summary {
    font-size: 11px;
  }
  .wba-db-app .top {
    align-items: flex-start !important;
  }
  .wba-db-app .compare-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    width: calc(100% - 24px);
  }
  .wba-db-app .compare-items {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .wba-db-app .compare-chip {
    flex-basis: 210px;
  }
}
@media (max-width: 650px) {
  .wba-db-app .toolbar {
    max-width: none;
    gap: 8px !important;
  }
  .wba-db-app .toolbar > .saved-btn,
  .wba-db-app .toolbar > #mobileSortBtn,
  .wba-db-app .toolbar > .view-options > summary {
    height: 42px !important;
    padding: 0 5px !important;
    font-size: 11px;
  }
  .wba-db-app .toolbar > .saved-btn {
    gap: 4px;
  }
  .wba-db-app .toolbar > .saved-btn b {
    min-width: 18px;
    height: 18px;
  }
  .wba-db-app .toolbar > .view-options > summary::after {
    flex-basis: 6px;
    width: 6px;
    height: 6px;
  }
  .wba-db-app .compare-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: calc(100% - 18px);
    min-height: 0;
    padding: 10px;
    gap: 8px;
  }
  .wba-db-app .compare-summary strong {
    font-size: 12px;
  }
  .wba-db-app .compare-summary small {
    max-width: 180px;
    font-size: 9px;
  }
  .wba-db-app .compare-items {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    gap: 7px;
  }
  .wba-db-app .compare-chip {
    flex-basis: min(210px, 68vw);
    min-width: min(190px, 62vw);
  }
  .wba-db-app .compare-actions {
    gap: 6px;
  }
  .wba-db-app .compare-actions button {
    height: 40px;
    min-width: 66px;
    padding: 0 9px;
    font-size: 11px;
  }
}
.wba-db-app .drawer-overview{position:relative;display:grid;grid-template-columns:minmax(0,1fr);max-width:72ch;margin:0;padding:28px 34px;background:#f1f7fa;color:#344d5e;font-size:15px;line-height:1.7;overflow:hidden}.wba-db-app .drawer-overview__content{position:relative;z-index:1;max-width:64ch;margin-top:26px}.wba-db-app .drawer-overview__author{display:flex;align-items:center;gap:16px;margin-bottom:20px}.wba-db-app .drawer-overview__portrait{display:block;flex:0 0 68px;width:68px;height:68px;margin:0;border-radius:50%;object-fit:cover;object-position:center center}.wba-db-app .drawer-overview__headline{flex:1;min-width:0;margin:0;color:#17374c;font-size:clamp(21px,2.2vw,27px);line-height:1.2;letter-spacing:-.02em}.wba-db-app .drawer-overview__copy p{margin:0}.wba-db-app .drawer-overview__copy p+p{margin-top:1.1em}.wba-db-app .drawer-overview__signature{margin:20px 0 0;color:#31566c;font-size:13px;font-weight:600;letter-spacing:.01em}.wba-db-app .drawer-overview__quote{position:absolute;color:#c6dce8;font-family:Georgia,serif;font-size:56px;line-height:.8;pointer-events:none;z-index:0}.wba-db-app .drawer-overview__quote--open{top:8px;left:13px}.wba-db-app .drawer-overview__quote--close{right:13px;bottom:8px}@media(min-width:651px){.wba-db-app .drawer-overview__headline{white-space:nowrap}}@media(max-width:650px){.wba-db-app .drawer-overview{padding:22px 20px}.wba-db-app .drawer-overview__content{margin-top:20px}.wba-db-app .drawer-overview__author{gap:12px;margin-bottom:18px}.wba-db-app .drawer-overview__portrait{flex-basis:60px;width:60px;height:60px}.wba-db-app .drawer-overview__headline{font-size:22px}.wba-db-app .drawer-overview__quote{font-size:44px}.wba-db-app .drawer-overview__quote--open{top:5px;left:6px}.wba-db-app .drawer-overview__quote--close{right:5px;bottom:5px}}
.wba-db-app .measurement-group h3{padding:0}
.wba-db-app .measurement-group-toggle{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border:0;background:#f7fafc;color:var(--navy);font:inherit;font-size:14px;font-weight:800;text-align:left;cursor:pointer}
.wba-db-app .measurement-group-toggle:focus-visible{outline:3px solid #168dc6;outline-offset:-4px}
.wba-db-app .measurement-group-chevron{width:10px;height:10px;flex:0 0 10px;border-right:2px solid #7690a2;border-bottom:2px solid #7690a2;transform:rotate(45deg);transition:transform .16s ease}
.wba-db-app .measurement-group-toggle[aria-expanded="true"] .measurement-group-chevron{transform:rotate(225deg)}
.wba-db-app .measurement-group-panel[hidden]{display:none!important}