/* Boat Listings — shared by the board and editor templates.
   Everything is scoped under .bl-page so it can't leak into the Astra theme. */

.bl-page, .bl-page * { box-sizing: border-box; }
.bl-page [hidden] { display: none !important; }

.bl-page {
  --bl-bg: #f6f8fb;
  --bl-surface: #ffffff;
  --bl-text: #0f1e30;
  --bl-muted: #5a6b7e;
  --bl-border: #e6ecf2;
  --bl-border-hover: #c7d3e1;

  /* Channels, not a hex, because the focus rings and the slider thumb shadow
     need the accent at partial alpha. Deriving --bl-accent from them keeps one
     source of truth — set --bl-accent-rgb and every accented surface, ring and
     shadow follows. */
  --bl-accent-rgb: 11, 107, 203;
  --bl-accent: rgb(var(--bl-accent-rgb));
  --bl-accent-dark: #084e96;

  --bl-chip: #eef4fb;
  --bl-danger: #c0392b;
  --bl-placeholder: linear-gradient(135deg, #dbe6f2 0%, #c7d6e8 100%);
  --bl-shadow-sm: 0 1px 2px rgba(15, 30, 48, 0.04), 0 1px 3px rgba(15, 30, 48, 0.06);
  --bl-shadow-md: 0 6px 16px rgba(15, 30, 48, 0.08);
  --bl-shadow-lg: 0 18px 40px rgba(15, 30, 48, 0.14);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bl-bg);
  color: var(--bl-text);
  -webkit-font-smoothing: antialiased;
  padding: 56px 24px 80px;
  min-height: 80vh;

  /* Astra's .ast-container is a flex row, so without this we'd size to our
     content instead of filling the page — which silently collapses the editor
     back to one column. min-width:0 keeps long words from blowing it out. */
  width: 100%;
  min-width: 0;
}

.bl-page .bl-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.bl-page .bl-header {
  text-align: center;
  margin-bottom: 36px;
}

.bl-page .bl-header h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bl-text);
  margin: 0;
}

.bl-page .bl-header p {
  margin-top: 10px;
  color: var(--bl-muted);
  font-size: 1rem;
}

/* Seller filter row. Each logo is a toggle (aria-pressed); once one is picked
   the rest fade to grey so the selection reads at a glance. */
.bl-page .bl-sellers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: -12px 0 32px;
}

/* Fixed-height logo box. The logo scales to fit the box on whichever
   side hits first: wide marks are capped by width, squarish ones by height —
   so the box is tall and the vertical padding tight, or a square logo next to
   a wordmark ends up looking tiny. */
.bl-page .bl-seller {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 8px 20px;
  background: var(--bl-surface);
  border: 2px solid var(--bl-border);
  border-radius: 14px;
  box-shadow: var(--bl-shadow-sm);
  cursor: pointer;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--bl-text);
  transition: border-color .15s, box-shadow .15s, opacity .15s, filter .15s, transform .15s;
}

.bl-page .bl-seller:hover {
  border-color: var(--bl-border-hover);
  box-shadow: var(--bl-shadow-md);
  transform: translateY(-1px);
}

.bl-page .bl-seller:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--bl-accent-rgb), 0.25);
}

.bl-page .bl-seller-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
}

.bl-page .bl-seller-logo img {
  display: block;
  max-height: 68px;
  max-width: 210px;
  width: auto;
  height: auto;
}

/* No logo uploaded: the name stands in for it. */
.bl-page .bl-seller-fallback {
  font-weight: 700;
  font-size: 1rem;
}

.bl-page .bl-sellers.bl-has-selection .bl-seller:not([aria-pressed="true"]) {
  opacity: 0.4;
  filter: grayscale(1);
}

.bl-page .bl-sellers.bl-has-selection .bl-seller:not([aria-pressed="true"]):hover {
  opacity: 0.75;
}

.bl-page .bl-seller[aria-pressed="true"] {
  border-color: var(--bl-accent);
  background: var(--bl-chip);
  box-shadow: 0 0 0 4px rgba(var(--bl-accent-rgb), 0.18), var(--bl-shadow-md);
}

/* Check badge on the selected logo. */
.bl-page .bl-seller[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bl-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 3px var(--bl-bg);
}

/* Cross-link between the board and the editor. Lives in the board's toolbar and
   beside the editor's "Your listings" heading, so it carries no margins itself. */
.bl-page .bl-cross-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* The ghost variant is transparent by design; on the page's grey ground it
   needs a surface behind it to read as a button. */
.bl-page .bl-cross-link.bl-btn-ghost {
  background: var(--bl-surface);
}

/* ---------- Search / Filter bar ---------- */
.bl-page .bl-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto 40px;
}

/* Anchor for the filter popover. */
.bl-page .bl-filter-wrap {
  position: relative;
  display: flex;
}

.bl-page .bl-toolbar-divider {
  flex: none;
  width: 1px;
  margin: 4px 2px;
  background: var(--bl-border);
}

/* Match the search field and Filters button rather than the default .bl-btn. */
.bl-page .bl-toolbar .bl-cross-link {
  padding: 0 20px;
  border-radius: 14px;
  box-shadow: var(--bl-shadow-sm);
}

.bl-page .bl-search {
  flex: 1;
  position: relative;
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 14px;
  box-shadow: var(--bl-shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.bl-page .bl-search:focus-within {
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 4px rgba(var(--bl-accent-rgb), 0.12);
}

.bl-page .bl-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bl-muted);
}

/* The theme sets border-radius:0 !important on form controls, so our inputs
   render square no matter what we declare normally — and the focus ring the
   browser paints around this one then juts out past the rounded wrapper,
   looking like the blue border is clipped at the corners. Matching !important
   is the only thing that wins; scoped under .bl-page so nothing else moves.
   `inherit` keeps it pinned to whatever radius the wrapper uses. */
.bl-page .bl-search input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 16px 18px 16px 50px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--bl-text);
  outline: none;
  border-radius: inherit !important;
}

.bl-page .bl-search input::placeholder { color: #94a3b6; }

.bl-page .bl-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 14px;
  box-shadow: var(--bl-shadow-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bl-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.bl-page .bl-filter-btn:hover { border-color: var(--bl-border-hover); }

.bl-page .bl-filter-btn.active {
  background: var(--bl-accent);
  border-color: var(--bl-accent);
  color: #fff;
}

.bl-page .bl-filter-btn .bl-badge {
  background: var(--bl-chip);
  color: var(--bl-accent);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.bl-page .bl-filter-btn.active .bl-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* ---------- Filter popover ---------- */
.bl-page .bl-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 16px;
  box-shadow: var(--bl-shadow-lg);
  padding: 22px 22px 18px;
  z-index: 20;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bl-page .bl-popover.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bl-page .bl-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 38px;
  width: 14px;
  height: 14px;
  background: var(--bl-surface);
  border-left: 1px solid var(--bl-border);
  border-top: 1px solid var(--bl-border);
  transform: rotate(45deg);
}

.bl-page .bl-popover h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.bl-page .bl-popover .bl-sub {
  color: var(--bl-muted);
  font-size: 0.85rem;
  margin-bottom: 18px;
}

.bl-page .bl-filter-group { margin-bottom: 22px; }
.bl-page .bl-filter-group:last-of-type { margin-bottom: 14px; }

.bl-page .bl-filter-group .bl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.bl-page .bl-filter-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bl-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bl-page .bl-filter-group .bl-value {
  font-size: 0.85rem;
  color: var(--bl-muted);
  font-variant-numeric: tabular-nums;
}

/* Dual-range slider */
.bl-page .bl-range {
  position: relative;
  height: 28px;
}

.bl-page .bl-range .bl-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #e3e9f1;
  border-radius: 999px;
  transform: translateY(-50%);
}

.bl-page .bl-range .bl-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--bl-accent);
  border-radius: 999px;
  transform: translateY(-50%);
}

.bl-page .bl-range input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* The two inputs are invisible carriers for their thumbs — .bl-track and
   .bl-fill draw the bar. Without this each input still paints its own native
   track, and because the max input sits after the min input in the DOM, its
   track painted straight over the min thumb (the max thumb, drawn above its
   own track, looked fine — hence only the left circle appeared clipped).
   !important because the theme styles these tracks with !important too. */
.bl-page .bl-range input[type="range"]::-webkit-slider-runnable-track {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.bl-page .bl-range input[type="range"]::-moz-range-track {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.bl-page .bl-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bl-accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--bl-accent-rgb), 0.3);
  transition: transform 0.1s;
}

.bl-page .bl-range input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.bl-page .bl-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bl-accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--bl-accent-rgb), 0.3);
}

.bl-page .bl-popover-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--bl-border);
}

/* The popover's two buttons are plain .bl-btn / .bl-btn-primary; only Reset's
   muted colouring is specific to it. */
.bl-page .bl-btn-reset { color: var(--bl-muted); }
.bl-page .bl-btn-reset:hover { color: var(--bl-text); }

/* ---------- Grid ---------- */
.bl-page .bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.bl-page .bl-card {
  background: var(--bl-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--bl-shadow-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--bl-border);
}

.bl-page a.bl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bl-shadow-md);
}

.bl-page .bl-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bl-placeholder);
}

.bl-page .bl-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.bl-page a.bl-card:hover .bl-image { transform: scale(1.04); }

.bl-page .bl-specs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.bl-page .bl-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bl-chip);
  color: var(--bl-accent-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
}

.bl-page .bl-spec-pill svg { opacity: 0.8; }

.bl-page .bl-info {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bl-page .bl-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.bl-page .bl-make {
  font-size: 0.8rem;
  color: var(--bl-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bl-page .bl-desc {
  font-size: 0.9rem;
  color: var(--bl-muted);
  line-height: 1.55;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-page .bl-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bl-muted);
  font-size: 0.85rem;
  margin-top: auto;
  padding-top: 12px;
}

.bl-page .bl-meta svg { flex-shrink: 0; }

/* ---------- Listing detail modal ---------- */

/* Native <dialog>: focus trapping, Esc-to-close and the backdrop come free. */
.bl-page .bl-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--bl-border);
  border-radius: 18px;
  background: var(--bl-surface);
  color: var(--bl-text);
  box-shadow: var(--bl-shadow-lg);
  overflow: hidden;
}

/* Scoped to [open] on purpose: an unconditional display would override the UA's
   dialog:not([open]){display:none} and leave the modal on screen when closed.
   Column layout so .bl-modal-body scrolls and the close button stays put. */
.bl-page .bl-modal[open] {
  display: flex;
  flex-direction: column;
}

/* ::backdrop doesn't inherit our custom properties, so this is a literal. */
.bl-page .bl-modal::backdrop {
  background: rgba(15, 30, 48, 0.55);
}

.bl-page .bl-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bl-text);
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--bl-shadow-sm);
  z-index: 2;
}

.bl-page .bl-modal-close:hover { background: #fff; }

.bl-page .bl-modal-image-wrap {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 30vh; /* the description is the point of this modal — give it the room */
  overflow: hidden;
  background: var(--bl-placeholder);
}

.bl-page .bl-modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Everything here is fixed except .bl-modal-desc — the header stays put and the
   CTA stays reachable without scrolling. min-height:0 on both this and the
   description defeats the default min-height:auto, which would otherwise refuse
   to shrink a flex item below its content and kill the scroll. */
.bl-page .bl-modal-body {
  padding: 24px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.bl-page .bl-modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

/* Sellers type these with line breaks, and the card clamps them to two lines —
   this is the one place the whole thing is readable, so keep the breaks. */
.bl-page .bl-modal-desc {
  margin: 6px 0 0;
  color: var(--bl-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  white-space: pre-wrap;

  /* The one scrollable region. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.bl-page .bl-modal-foot {
  flex: none;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--bl-border);
}

.bl-page .bl-modal-cta {
  display: block;
  padding: 13px 18px;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
}

.bl-page .bl-modal-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--bl-muted);
}

.bl-page .bl-modal-url {
  display: block;
  margin-top: 2px;
  color: var(--bl-accent);
  word-break: break-all;
}

/* ---------- Empty states / notices ---------- */
.bl-page .bl-empty,
.bl-page .bl-notice {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 16px;
  box-shadow: var(--bl-shadow-sm);
  padding: 40px 24px;
  text-align: center;
  color: var(--bl-muted);
  font-size: 0.95rem;
}

.bl-page .bl-notice a { color: var(--bl-accent); }

.bl-page .bl-empty p { margin: 0; }
.bl-page .bl-empty .bl-cross-link { margin-top: 16px; }

/* ---------- Pager ---------- */
.bl-page .bl-pager {
  margin-top: 32px;
  text-align: center;
}

.bl-page .bl-pager-summary {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--bl-muted);
}

.bl-page .bl-pager-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.bl-page .bl-pager-links .bl-btn {
  min-width: 40px;
  padding: 8px 12px;
  color: var(--bl-muted);
  border-color: var(--bl-border);
}
.bl-page .bl-pager-links .bl-btn:hover:not(:disabled) { color: var(--bl-text); border-color: var(--bl-border-hover); }
.bl-page .bl-pager-links .bl-btn:disabled { opacity: 0.4; cursor: default; }
.bl-page .bl-pager-links .bl-btn[aria-current="page"] { background: var(--bl-accent); color: #fff; border-color: var(--bl-accent); }
.bl-page .bl-pager-gap { align-self: center; padding: 0 4px; color: var(--bl-muted); }

/* ---------- Limits ---------- */

/* Editor: quota sits at the far end of the section head, opposite the title. */
.bl-page .bl-quota {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--bl-muted);
}

.bl-page .bl-quota-notice {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--bl-muted);
}

/* ---------- Editor: two columns ---------- */

/* auto-fit on the CONTAINER width, so the columns stack whenever there isn't
   room for two comfortable ones — on a phone, but equally inside a narrow
   theme container. min(100%, …) keeps the single column from overflowing. */
.bl-page .bl-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 32px;
  align-items: start;
}

/* Tighter cards in the editor's column — at full board width one card would
   eat the whole column and you'd scroll past two listings to see a third. */
.bl-page .bl-split .bl-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 18px;
}

/* ---------- Editor form ---------- */
.bl-page .bl-panel {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: 16px;
  box-shadow: var(--bl-shadow-sm);
  padding: 28px;
}

.bl-page .bl-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.bl-page .bl-field { display: flex; flex-direction: column; gap: 6px; }
.bl-page .bl-field.bl-wide { grid-column: 1 / -1; }

.bl-page .bl-field label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bl-muted);
}

.bl-page .bl-field input,
.bl-page .bl-field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--bl-text);
  background: var(--bl-bg);
  border: 1px solid var(--bl-border);
  border-radius: 10px !important; /* see .bl-search input — theme forces 0 */
  padding: 11px 13px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bl-page .bl-field textarea { resize: vertical; min-height: 92px; }

.bl-page .bl-field input:focus,
.bl-page .bl-field textarea:focus {
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 3px rgba(var(--bl-accent-rgb), 0.12);
}

.bl-page .bl-hint { font-size: 0.78rem; color: var(--bl-muted); }

.bl-page .bl-preview {
  margin-top: 8px;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--bl-border);
  background: var(--bl-placeholder);
}

.bl-page .bl-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bl-border);
}

.bl-page .bl-btn {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  /* Explicit, because the theme gives bare <button>s its own blue background —
     a variant-less .bl-btn would otherwise inherit it. Variants below override. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bl-page .bl-btn-primary { background: var(--bl-accent); color: #fff; }
.bl-page .bl-btn-primary:hover { background: var(--bl-accent-dark); }
.bl-page .bl-btn-primary:disabled { opacity: 0.6; cursor: default; }

.bl-page .bl-btn-ghost {
  background: transparent;
  color: var(--bl-muted);
  border-color: var(--bl-border);
}
.bl-page .bl-btn-ghost:hover { color: var(--bl-text); border-color: var(--bl-border-hover); }

.bl-page .bl-btn-danger { background: transparent; color: var(--bl-danger); border-color: #f0d3cf; }
.bl-page .bl-btn-danger:hover { background: #fdf2f1; }

.bl-page .bl-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

/* Heading row for each editor column. Both columns use it — including the one
   with no button — so the two panels below stay top-aligned. min-height is the
   button's height for the same reason. */
.bl-page .bl-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  min-height: 40px;
  margin-bottom: 20px;
}

.bl-page .bl-section-head .bl-section-title {
  margin: 0;
}

/* Deliberately smaller than a normal .bl-btn — it sits beside the section
   heading and shouldn't compete with it. */
.bl-page .bl-section-head .bl-cross-link {
  padding: 7px 14px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.bl-page .bl-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 20px 20px;
}

.bl-page .bl-card-actions .bl-btn { flex: 1; font-size: 0.85rem; padding: 8px 12px; }

/* Tablet and below: give the CTA its own row instead of letting it squeeze the
   search field, which has flex:1 and would otherwise shrink indefinitely. The
   divider only earns its place while the two share a line. 900px rather than a
   round 768 because that's the point where the search field stops being wide
   enough to show its full placeholder. */
@media (max-width: 900px) {
  .bl-page .bl-toolbar-divider {
    display: none;
  }

  .bl-page .bl-toolbar .bl-cross-link {
    flex-basis: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .bl-page { padding: 32px 16px 64px; }
  .bl-page .bl-header h1 { font-size: 1.8rem; }
  .bl-page .bl-sellers { gap: 10px; }
  .bl-page .bl-seller { min-width: 0; padding: 6px 14px; }
  .bl-page .bl-seller-logo { height: 48px; }
  .bl-page .bl-seller-logo img { max-height: 48px; max-width: 140px; }
  .bl-page .bl-popover { right: -8px; }
  .bl-page .bl-filter-btn .bl-label { display: none; }
  .bl-page .bl-panel { padding: 20px; }
}