/* Public artwork carousel. The uploaded artwork is displayed without text badges. */
.rp-hpb { position:relative; width:100%; aspect-ratio:3 / 1; background:#f8fafc; overflow:hidden; touch-action:pan-y; }
.rp-hpb > .rp-hpb-slide { position:absolute; inset:0; width:100%; height:100%; transform:translate3d(0,0,0); backface-visibility:hidden; will-change:transform; }
@media(max-width:640px) { .rp-hpb { aspect-ratio:4 / 5; } }
.rp-hpb-slide[hidden] { display:none!important; }
.rp-hpb-slide.is-leaving { position:absolute!important; inset:0 auto auto 0!important; width:100%!important; pointer-events:none; }
.rp-hpb[data-transitioning] > .rp-hpb-slide { will-change:transform; }
.rp-hpb-slide picture,.rp-hpb-slide a { display:block; width:100%; height:100%; }
.rp-hpb-slide img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; margin:0; }
.rp-hpb-arrow { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:40px!important; height:40px!important; min-width:0!important; min-height:0!important; border:1px solid #ffffffb3!important; border-radius:50%!important; background:#ffffffd9!important; color:#1e293b!important; font-size:26px!important; padding:0!important; cursor:pointer; z-index:2; box-shadow:0 2px 8px #0f172a15; }
.rp-hpb-prev { left:20px; }.rp-hpb-next { right:20px; }
.rp-hpb-controls { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:20px; background:#0f172a30; z-index:2; }
.rp-hpb-controls button { width:18px!important; height:5px!important; min-width:0!important; min-height:0!important; border:0!important; border-radius:8px!important; background:#ffffff80!important; padding:0!important; cursor:pointer; }
.rp-hpb-controls button[aria-pressed=true] { width:28px!important; background:var(--theme-button-color,#15803d)!important; }
.rp-hpb-controls .rp-hpb-pause { width:auto!important; height:auto!important; background:transparent!important; color:white!important; font-size:11px!important; margin-left:6px; border-radius:0!important; }
.rp-hpb :is(button,a):focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
@media(max-width:640px) { .rp-hpb-arrow { width:32px!important; height:32px!important; font-size:23px!important; }.rp-hpb-prev{left:12px}.rp-hpb-next{right:12px}.rp-hpb-controls{bottom:12px} }

/* Promo editing replaces the content of the existing settings drawer. */
#settings-panel > .rp-hpb-settings-view { width:min(576px,100vw)!important; max-width:576px!important; overflow:hidden!important; }
.rp-hpb-settings-view > [data-settings-main] { display:none!important; }
#rp-header-banner-editor[hidden] { display:none!important; }
#rp-header-banner-editor { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; background:#fff; color:#0f172a; pointer-events:auto; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; text-align:left; }
#rp-header-banner-editor * { box-sizing:border-box; }
#rp-header-banner-editor :is(h2,h3,p) { padding:0; text-transform:none; letter-spacing:normal; background:none; }
#rp-header-banner-editor button { appearance:none; display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; min-height:36px!important; min-width:0!important; margin:0; padding:8px 12px!important; border:1px solid #dbe2ea!important; border-radius:8px!important; background:white!important; color:#334155!important; font-family:inherit!important; font-size:12px!important; font-weight:600; line-height:1.3; text-transform:none; box-shadow:none; cursor:pointer; }
#rp-header-banner-editor button:hover { background:#f1f5f9!important; }
#rp-header-banner-editor button:disabled { opacity:.4; cursor:default; }
#rp-header-banner-editor :is(input,button,summary):focus-visible { outline:2px solid #15803d; outline-offset:3px; }
#rp-header-banner-editor .rp-hpb-editor-head { padding:18px 24px 20px; display:grid; grid-template-columns:1fr auto; gap:16px; border-bottom:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
#rp-header-banner-editor .rp-hpb-editor-head > div { grid-column:1/-1; }
#rp-header-banner-editor .rp-hpb-back { justify-self:start; border:0!important; padding:0!important; min-height:28px!important; background:none!important; gap:6px; }
#rp-header-banner-editor .rp-hpb-close { width:32px; min-height:32px!important; padding:0!important; font-size:16px!important; }
#rp-header-banner-editor .rp-hpb-eyebrow { font-size:10px; font-weight:650; letter-spacing:1.5px; color:#64748b; }
#rp-header-banner-editor h2 { color:#0f172a!important; font-size:24px!important; font-weight:700; margin:3px 0 0; line-height:1.3; }
#rp-header-banner-editor .rp-hpb-editor-head p { margin:4px 0 0; font-size:13px; color:#64748b!important; }
#rp-header-banner-editor .rp-hpb-editor-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:20px 24px 28px; overscroll-behavior:contain; scrollbar-width:thin; }
#rp-header-banner-editor .rp-hpb-enable { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; margin-bottom:22px; }
#rp-header-banner-editor .rp-hpb-enable strong { display:block; font-size:13px; color:#0f172a; }
#rp-header-banner-editor small { display:block; font-size:11px; color:#64748b!important; font-weight:400; line-height:1.5; margin-top:4px; }
#rp-header-banner-editor input[type=checkbox] { appearance:auto!important; width:18px!important; height:18px!important; min-height:0!important; padding:0!important; margin:0!important; flex-shrink:0; accent-color:#15803d; cursor:pointer; }
#rp-header-banner-editor .rp-hpb-preview-header,#rp-header-banner-editor .rp-hpb-list-header { display:flex; gap:12px; justify-content:space-between; align-items:center; margin:0 0 12px; }
#rp-header-banner-editor h3 { margin:0; color:#0f172a!important; font-size:14px!important; font-weight:700; }
#rp-header-banner-editor .rp-hpb-device-tabs { display:flex; padding:3px; gap:2px; background:#f1f5f9; border-radius:8px; }
#rp-header-banner-editor .rp-hpb-device-tabs button { background:transparent!important; border:0!important; min-height:28px!important; font-size:11px!important; padding:4px 9px!important; }
#rp-header-banner-editor .rp-hpb-device-tabs button[aria-pressed=true] { background:#fff!important; color:#0f172a!important; box-shadow:0 1px 3px #0f172a12; }
#rp-header-banner-editor .rp-hpb-editor-preview { position:relative; width:100%; aspect-ratio:3/1; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; transition:max-width .15s; margin:0 auto; }
#rp-header-banner-editor .rp-hpb-editor-preview.is-mobile { max-width:220px; aspect-ratio:4/5; }
#rp-header-banner-editor .rp-hpb-editor-preview > img { width:100%; height:100%; object-fit:contain; display:block; margin:0; padding:0; }
#rp-header-banner-editor .rp-hpb-preview-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; color:#64748b; }
#rp-header-banner-editor .rp-hpb-preview-empty > span { font-size:26px; color:#94a3b8; line-height:1; margin-bottom:8px; }
#rp-header-banner-editor .rp-hpb-preview-empty strong { color:#475569; font-size:12px; }
#rp-header-banner-editor .rp-hpb-preview-empty p { font-size:11px; margin:4px 0 0; color:#64748b!important; }
#rp-header-banner-editor .rp-hpb-preview-arrow { position:absolute; top:50%; transform:translateY(-50%); border-radius:50%!important; width:28px; height:28px; min-height:28px!important; padding:0!important; background:#ffffffd9!important; font-size:20px!important; }
#rp-header-banner-editor .rp-hpb-preview-arrow.is-prev { left:8px; }#rp-header-banner-editor .rp-hpb-preview-arrow.is-next { right:8px; }
#rp-header-banner-editor .rp-hpb-preview-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:4px; padding:4px; background:#0f172a20; border-radius:20px; }
#rp-header-banner-editor .rp-hpb-preview-dots button { width:14px; height:4px; min-height:4px!important; border:0!important; padding:0!important; border-radius:8px!important; background:#fff8!important; }
#rp-header-banner-editor .rp-hpb-preview-dots button[aria-pressed=true] { background:#15803d!important; width:20px; }
#rp-header-banner-editor .rp-hpb-hint { font-size:12px; line-height:1.6; margin:10px 0 24px; color:#64748b!important; }
#rp-header-banner-editor [data-banner-count] { font-size:11px; color:#94a3b8; }
#rp-header-banner-editor .rp-hpb-entry { border:1px solid #e2e8f0; border-radius:12px; padding:16px; margin:0 0 14px; background:white; }
#rp-header-banner-editor .rp-hpb-entry.is-selected { border-color:#9abda6; }
#rp-header-banner-editor .rp-hpb-entry-head { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:14px; }
#rp-header-banner-editor .rp-hpb-select-slide { display:block; min-width:0; flex:1; text-align:left; border:0!important; padding:0!important; background:none!important; }
#rp-header-banner-editor .rp-hpb-select-slide strong { font-size:12px; display:block; color:#0f172a; }
#rp-header-banner-editor .rp-hpb-select-slide span { display:block; color:#64748b; font-size:11px; font-weight:400; white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
#rp-header-banner-editor .rp-hpb-entry-actions { display:flex; gap:5px; flex-shrink:0; }
#rp-header-banner-editor .rp-hpb-entry-actions button { padding:0 9px!important; min-height:30px!important; }
#rp-header-banner-editor .rp-hpb-entry-actions .rp-hpb-remove { color:#b91c1c!important; font-weight:500; font-size:11px!important; }
#rp-header-banner-editor .rp-hpb-entry-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
#rp-header-banner-editor .rp-hpb-upload-field { min-width:0; }
#rp-header-banner-editor .rp-hpb-label { display:block; margin-bottom:6px; font-size:11px; font-weight:600; color:#334155; }
#rp-header-banner-editor .rp-hpb-upload { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; height:96px; border:1px dashed #b8c6d5; border-radius:8px; background:#f8fafc; overflow:hidden; cursor:pointer; }
#rp-header-banner-editor .rp-hpb-upload img { height:100%; width:100%; object-fit:contain; margin:0; }
#rp-header-banner-editor .rp-hpb-upload span { font-size:11px; color:#475569; }
#rp-header-banner-editor .rp-hpb-upload img+span { position:absolute; bottom:0; width:100%; padding:4px; background:#fffffff0; text-align:center; font-size:10px; }
#rp-header-banner-editor .rp-hpb-upload .rp-hpb-upload-plus { font-size:22px; }
#rp-header-banner-editor .rp-hpb-file { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden; clip-path:inset(50%); }
#rp-header-banner-editor .rp-hpb-upload-field:focus-within .rp-hpb-upload { outline:2px solid #15803d; outline-offset:2px; }
#rp-header-banner-editor .rp-hpb-text-field { display:block; font-size:12px; font-weight:600; color:#334155; margin-top:12px; }
#rp-header-banner-editor input:not([type=checkbox]):not([type=file]) { display:block; height:40px; width:100%; min-height:0!important; padding:8px 10px!important; border:1px solid #cbd5e1!important; border-radius:7px!important; background:white!important; color:#0f172a!important; font-family:inherit!important; font-size:13px!important; font-weight:400; margin:6px 0 0; box-shadow:none; }
#rp-header-banner-editor .rp-hpb-link-button { padding:4px 0!important; border:0!important; background:none!important; min-height:28px!important; color:#15803d!important; font-size:11px!important; text-align:left; }
#rp-header-banner-editor .rp-hpb-slide-enabled { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; margin-top:10px; border-top:1px solid #f1f5f9; font-size:12px; font-weight:500; }
#rp-header-banner-editor .rp-hpb-empty-list { padding:20px; text-align:center; border:1px dashed #dbe2ea; border-radius:10px; background:#f8fafc; color:#475569; font-size:12px; margin-bottom:14px; }
#rp-header-banner-editor .rp-hpb-empty-list p { margin:4px 0 0; color:#64748b!important; font-size:12px; }
#rp-header-banner-editor .rp-hpb-add { width:100%; border-style:dashed!important; min-height:40px!important; color:#15803d!important; }
#rp-header-banner-editor .rp-hpb-playback { margin-top:22px; border-top:1px solid #e2e8f0; padding-top:16px; }
#rp-header-banner-editor .rp-hpb-playback summary { font-weight:600; font-size:12px; cursor:pointer; color:#475569; }
#rp-header-banner-editor .rp-hpb-options { margin-top:14px; display:grid; gap:12px; }
#rp-header-banner-editor .rp-hpb-options label { display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:12px; }
#rp-header-banner-editor .rp-hpb-options input[type=number] { width:70px!important; margin:0; }
#rp-header-banner-editor .rp-hpb-editor-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
#rp-header-banner-editor [data-banner-status] { font-size:11px; line-height:1.4; color:#64748b; flex:1; }
#rp-header-banner-editor [data-banner-status].is-error { color:#b91c1c; }
#rp-header-banner-editor .rp-hpb-save { min-height:40px!important; padding:10px 18px!important; background:#15803d!important; color:white!important; border-color:#15803d!important; flex-shrink:0; }
#rp-header-banner-editor .rp-hpb-save:hover { background:#166534!important; }
@media(max-width:420px) {
 #rp-header-banner-editor .rp-hpb-editor-head,#rp-header-banner-editor .rp-hpb-editor-body,#rp-header-banner-editor .rp-hpb-editor-foot { padding-left:16px; padding-right:16px; }
 #rp-header-banner-editor .rp-hpb-entry { padding:12px; }
 #rp-header-banner-editor .rp-hpb-entry-grid { gap:8px; }
 #rp-header-banner-editor .rp-hpb-select-slide span { max-width:120px; }
}

#rp-header-banner-editor select { display:block; width:100%; min-height:40px!important; margin:6px 0 0; padding:8px 10px!important; border:1px solid #cbd5e1!important; border-radius:7px!important; background:#fff!important; color:#0f172a!important; font-family:inherit!important; font-size:13px!important; font-weight:400; }
#rp-header-banner-editor select:focus-visible { outline:2px solid #15803d; outline-offset:3px; }

/* Show mobile artwork in a compact portrait holder within each slide. */
#rp-header-banner-editor .is-mobile-upload .rp-hpb-upload {
  width:min(100%,160px);
  height:auto;
  min-height:200px;
  margin-inline:auto;
  border-radius:14px;
}
#rp-header-banner-editor .is-mobile-upload .rp-hpb-upload img {
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:contain;
  flex:none;
}
#rp-header-banner-editor .is-mobile-upload .rp-hpb-upload img+span {
  position:static;
  display:block;
  padding:7px 4px;
  background:white;
  border-top:1px solid #e2e8f0;
}

/* Let the artwork span the viewport while identity and tabs keep their content rail. */
.rp-ph > .rp-hpb {
  width:var(--rp-hpb-viewport-width,100vw);
  max-width:none;
  margin-inline-start:var(--rp-hpb-viewport-offset,calc(50% - var(--rp-hpb-viewport-width,100vw) / 2));
}

#rp-header-banner-editor .rp-hpb-entry-body[hidden] { display:none!important; }
#rp-header-banner-editor .rp-hpb-entry-head { margin-bottom:0; }
#rp-header-banner-editor .rp-hpb-entry-body { margin-top:16px; }
#rp-header-banner-editor .rp-hpb-select-slide { position:relative; padding-right:20px!important; }
#rp-header-banner-editor .rp-hpb-select-slide .rp-hpb-fold-chevron { position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:18px; color:#64748b; }