.banner-panel .field-note { margin: 12px 0 22px; }
.banner-table {
  max-height: min(69dvh, 760px);
  overflow: auto;
  border: 1px solid var(--line, #e6ebf2);
}
.banner-table .console-table { min-width: 880px; }
.banner-table th { position: sticky; top: 0; z-index: 1; }
.banner-table td { height: 104px; vertical-align: middle; }
.banner-thumbnail { display: block; width: min(185px, 18vw); aspect-ratio: 600/190; object-fit: contain; }
.banner-sort.button { min-width: 36px; color: #159652; background: #f0fbf4; border-color: #cff0dc; }
[data-order-dialog] input { width: 100%; margin-top: 12px; }
.banner-table .banner-path { max-width: 270px; overflow-wrap: anywhere; }
.banner-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.banner-actions .banner-delete { padding: 0; color: #c23b45; }
.banner-pagination { margin-top: 18px; }
.banner-editor form { display: grid; gap: 24px; padding-block: 14px; max-width: 920px; }
.banner-field { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 16px; }
.banner-label { text-align: right; padding-top: 8px; }
.banner-label .required { color: #d34047; }
.banner-fieldset { border: 0; min-width: 0; padding: 0; margin: 0; }
.banner-fieldset legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.banner-scope { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 8px 0; }
.banner-scope label, .banner-store-list label { display: flex; align-items: center; gap: 7px; }
.banner-upload { position: relative; display: grid; place-items: center; width: min(310px, 100%); aspect-ratio: 600/190;
  border: 1px dashed #c4ceda; border-radius: 6px; background: #fafbfc; cursor: pointer; overflow: hidden; }
.banner-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.banner-upload:focus-within { outline: 2px solid var(--green, #18b875); outline-offset: 2px; }
.banner-upload span { color: #8b9aad; font-size: 24px; }
.banner-upload img { width: 100%; height: 100%; object-fit: contain; }
.banner-field select, .banner-store-picker { width: min(250px, 100%); }
.banner-store-picker { border: 1px solid #dbe1e9; border-radius: 5px; }
.banner-store-picker summary { padding: 9px 11px; cursor: pointer; }
.banner-store-list { max-height: min(32dvh, 240px); overflow: auto; padding: 0 10px 8px; }
.banner-store-list label { min-height: 34px; cursor: pointer; }
.banner-switch { position: relative; display: inline-flex; margin: 5px 0; width: 42px; height: 23px; }
.banner-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.banner-switch span { width: 100%; border-radius: 20px; background: #ccd3df; pointer-events: none; }
.banner-switch span::before { display: block; content: ''; width: 17px; height: 17px; margin: 3px; border-radius: 50%; background: white; }
.banner-switch input:checked + span { background: var(--green, #17b76b); }
.banner-switch input:checked + span::before { transform: translateX(19px); }
.banner-switch input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.banner-legacy, .banner-editor-actions, .banner-editor .form-error { margin-left: 120px; }
.banner-legacy summary { cursor: pointer; }
.banner-legacy label { display: grid; gap: 5px; margin-block: 12px; max-width: 600px; }
@media (max-width: 620px) {
  .banner-field { grid-template-columns: 1fr; gap: 5px; }
  .banner-label { text-align: left; padding-top: 0; }
  .banner-legacy, .banner-editor-actions, .banner-editor .form-error { margin-left: 0; }
  .banner-thumbnail { width: 134px; }
}