/* Banners screen: the list, the editor, the live preview frame. The banner itself is drawn by css/vendor/hero-banner.css (the shop's own stylesheet). */
.bn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.bn-row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bn-row.dragging { opacity: 0.5; }
.bn-row.drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.bn-row.is-deleted { opacity: 0.75; }
.bn-handle { cursor: grab; }
.bn-handle:disabled { cursor: not-allowed; opacity: 0.4; }
.bn-thumb { inline-size: 96px; block-size: 72px; object-fit: contain; border-radius: var(--r-md); background: var(--surface-2); }
.bn-thumb.empty { display: grid; place-items: center; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.bn-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bn-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-block-start: 4px; font-size: var(--fs-xs); }
.bn-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: flex-end; }
@media (max-width: 760px) {
  .bn-row { grid-template-columns: auto 72px minmax(0, 1fr); }
  .bn-thumb { inline-size: 72px; block-size: 56px; }
  .bn-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* editor: form on one side, a sticky live preview on the other (stacked on narrow screens, preview first) */
.wide-edit { max-inline-size: 1400px; }
.bn-edit { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.bn-col-preview { order: -1; }
@media (min-width: 1180px) {
  .bn-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .bn-col-preview { order: 0; position: sticky; inset-block-start: calc(var(--topbar-h) + var(--s-4)); }
}
.bn-form .card-head h2, .bn-preview .card-head h2 { font-size: var(--fs-md); }
.bn-h3 { margin: var(--s-3) 0 0; font-size: var(--fs-base); }
.pv-box { position: relative; inline-size: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); direction: ltr; }
.pv-frame { transform: scale(var(--pv-scale, 1)); transform-origin: top left; }
[dir='rtl'] .pv-box { direction: ltr; }
.bn-pv-tools { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.bn-pv-tools .seg { flex: 0 0 auto; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.seg-btn { flex: none; white-space: nowrap; min-block-size: 36px; padding: 0 var(--s-3); border: 0; background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.seg-btn + .seg-btn { border-inline-start: 1px solid var(--line-strong); }
.seg-btn[aria-pressed='true'] { background: var(--accent-fill); color: var(--on-accent); }
/* these buttons hold words: the 38 px icon-button width of `.seg button` (components.css, specificity 0,1,1) must not apply to them */
.seg .seg-btn { inline-size: auto; }
.bn-contrast { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.bn-contrast li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); }
.bn-contrast .warn { color: var(--warn); }
.bn-contrast .ok { color: var(--success); }

.theme-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.theme-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 44px; padding: 4px var(--s-3) 4px 4px; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.theme-chip.on { border-color: var(--accent); }
.theme-swatch { inline-size: 34px; block-size: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--hb-bg-1), var(--hb-bg-3)); border: 1px solid var(--line-strong); }
.field .lbl { font-weight: 700; font-size: var(--fs-sm); }
.colors-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bn-colors summary { cursor: pointer; font-weight: 700; padding-block: var(--s-2); }

.bn-pic { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.bn-pic-img { inline-size: 120px; block-size: 120px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); overflow: hidden; }
.bn-pic-img img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.bn-pos { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); display: grid; gap: var(--s-3); }
.bn-pos legend { font-weight: 700; padding-inline: var(--s-2); }
.sl label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-block-end: 2px; }
.sl-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: var(--s-3); align-items: center; }
.sl-row input[type='range'] { inline-size: 100%; accent-color: var(--accent); min-block-size: 32px; }
.sl-num { min-block-size: 40px; }
.link-results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card.bad { outline: 2px solid var(--danger); }
@media (max-width: 480px) { .bn-pic { grid-template-columns: 1fr; } .sl-row { grid-template-columns: minmax(0, 1fr) 72px; } }
.link-results .btn { white-space: normal; text-align: start; block-size: auto; min-block-size: 32px; padding-block: 6px; line-height: 1.3; max-inline-size: 100%; }