/* Local Website � shell + editor (tokens from corporate-user-management.css) */

.lws-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(100vh - var(--cum-layout-offset));
  max-height: calc(100vh - var(--cum-layout-offset));
  overflow: hidden;
  background: var(--cum-background, #fafafa);
  font-family: var(--cum-font, var(--font-overpass, 'Overpass', sans-serif));
  color: var(--cum-foreground, #021922);
}

@supports (height: 100dvh) {
  .lws-page {
    min-height: calc(100dvh - var(--cum-layout-offset));
    max-height: calc(100dvh - var(--cum-layout-offset));
  }
}

/* Top bar � matches .jbf-header rhythm */
.lws-shell-header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lws-shell-header-text {
  min-width: 0;
  flex: 1 1 280px;
}

.lws-shell-header h1 {
  margin: 0 0 8px 0;
}

.lws-shell-subtitle {
  margin: 0;
  max-width: 52rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cum-muted-foreground, #808c91);
}

.lws-split {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  border-top: 1px solid var(--cum-border, #e6e8e9);
}

.lws-interior-nav {
  flex: 0 0 260px;
  width: 260px;
  max-width: 100%;
  border-right: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
  padding: 16px 0 24px 0;
  overflow-y: auto;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.02);
}

.lws-nav-label {
  padding: 0 20px 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
}

a.lws-nav-item,
button.lws-nav-item {
  display: block;
  width: calc(100% - 24px);
  margin: 2px 12px;
  padding: 10px 14px;
  box-sizing: border-box;
  border: none;
  border-radius: var(--cum-radius, 8px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--cum-foreground, #021922);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.lws-nav-item:hover,
button.lws-nav-item:hover {
  background: var(--cum-muted, rgba(242, 235, 243, 1));
  color: var(--cum-foreground, #021922);
}

a.lws-nav-item.active,
button.lws-nav-item.active {
  background: rgba(125, 91, 129, 0.12);
  color: var(--cum-primary, #7d5b81);
  border-left-color: var(--cum-primary, #7d5b81);
}

/* Desktop navigation - shown on lg+ */
.lws-nav--desktop {
  display: block;
}

/* Mobile navigation - hidden on lg+ */
.lws-nav--mobile {
  display: none;
}

.lws-main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cum-background, #fafafa);
}

/* -------------------------------------------------------------------------- */
/* Section editor (aligned with .cum-preview-* )                              */
/* -------------------------------------------------------------------------- */

.lws-editor-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.lws-editor-toolbar.cum-preview-header {
  flex-shrink: 0;
  margin: 0;
  padding: 20px 28px 18px 28px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
}

.lws-editor-actions.cum-preview-actions {
  gap: 10px;
}

.lws-editor-actions .rz-button {
  min-height: 40px;
}

.lws-panel-footer-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}

.lws-editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 32px 28px;
}

.lws-editor-card {
  max-width: 920px;
  background: var(--cum-card, #fff);
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  box-shadow: rgba(60, 64, 67, 0.06) 0 1px 2px 0, rgba(60, 64, 67, 0.04) 0 1px 3px 1px;
}
/* Horizontal flex wrapper so JbfRightPanel can sit alongside the editor body */
.lws-editor-body-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.lws-editor-body-row > .lws-editor-body {
  flex: 1;
  min-width: 0;
}


.lws-editor-card-body.cum-preview-body {
  margin: 0;
  padding: 24px 28px 28px 28px;
}

.lws-editor-card-body .cum-preview-field:last-child {
  margin-bottom: 0;
}

.lws-subsection-title {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
}

.lws-subsection-title--spaced {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
}

.lws-field-hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--cum-muted-foreground, #808c91);
}

/* Row that pairs the "Current public-site event" dropdown with the
   "Edit Shopping Schedule" deep-link to Event Management. The dropdown is
   constrained so the link can sit beside it on desktop; the row wraps on
   narrow screens so neither control collapses below its readable width.
   stretch + per-child align-self:center gives the link a box that matches
   the dropdown's full rendered height so its text sits on the dropdown's
   vertical midline regardless of Radzen padding tweaks. */
.lws-public-event-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.lws-public-event-dropdown {
  flex: 0 1 320px;
  max-width: 320px;
  min-width: 0;
  align-self: center;
}

/* The link is rendered as an inline-flex box so its text is centered along
   the cross axis of its own box; align-self: stretch then expands that box
   to the row's full height, perfectly matching the dropdown's vertical mass.
   Without inline-flex centering, a bare anchor would sit on its text
   baseline and read as slightly low next to the dropdown's interior text. */
.lws-public-event-edit-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--jbf-plum, #7d5b81);
  text-decoration: underline;
  white-space: nowrap;
}

.lws-public-event-edit-link:hover,
.lws-public-event-edit-link:focus {
  text-decoration: underline;
  filter: brightness(0.92);
}

.lws-public-event-edit-link--disabled {
  color: var(--cum-muted-foreground, #808c91);
  text-decoration: none;
  cursor: not-allowed;
  font-weight: 500;
}

/* Brand-consistency callout: shown above the picker on hero panel 1 to
   explain why upload + location-only folders are unavailable and why the
   row is anchored. Slightly stronger than a regular field hint so
   franchisees notice the rule. */
.lws-ci-fsc-only-hint {
  margin: 0 0 10px 0;
  padding: 10px 12px;
  background: var(--cum-info-bg, #f4f1f7);
  border-left: 3px solid var(--jbf-plum, #7d5b81);
  border-radius: 4px;
  color: var(--cum-foreground, #2b2731);
  font-size: 12.5px;
}

/* Read-only field value, used to display values that are managed elsewhere
   (e.g. the Seller registration link mirrored from the selected event's
   external_registration_url). Visually mirrors a disabled input so the user
   still recognises the row as a field, just non-editable. */
.lws-field-readonly {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 6px;
  background: var(--cum-secondary, #f6f5f8);
  color: var(--cum-foreground, #021922);
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
}

.lws-field-readonly a {
  color: var(--cum-primary, #7d5b81);
  text-decoration: none;
}

.lws-field-readonly a:hover {
  text-decoration: underline;
}

/* Invalid-field highlight. The wrapper class `lws-field--invalid` is set on
   the .cum-preview-field div from the .razor page when validation fails. We
   target the wrapper (not aria-invalid directly) because Radzen's stock
   border styles win the specificity battle on `.rz-textbox`, but we already
   own the wrapper, so descendant selectors land cleanly with !important on
   the border alone. The label tints red and a thin red shadow surrounds the
   input so the user can locate the failing field at a glance. Per
   field-validation-requirements.mdc the inline error span (rendered below
   the input) carries role="alert" + aria-live="assertive". */
.lws-field--invalid > .cum-preview-label {
  color: var(--rz-danger);
}
.lws-field--invalid .rz-textbox,
.lws-field--invalid .rz-textarea,
.lws-field--invalid .rz-dropdown,
.lws-field--invalid .rz-numeric,
.lws-field--invalid .rz-datepicker {
  border-color: var(--rz-danger) !important;
  box-shadow: 0 0 0 3px var(--rz-danger-lighter);
}
.lws-field--invalid .rz-textbox:focus,
.lws-field--invalid .rz-textarea:focus,
.lws-field--invalid .rz-dropdown:focus,
.lws-field--invalid .rz-numeric:focus,
.lws-field--invalid .rz-datepicker:focus {
  outline-color: var(--rz-danger);
}

/* Checkbox + label row */
.cum-preview-field--row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.cum-preview-label--inline {
  display: inline;
  margin-bottom: 0 !important;
  padding-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  line-height: 1.4;
}

/* Radzen inputs: match CUM density inside card */
.lws-editor-card .rz-textbox,
.lws-editor-card .rz-textarea {
  font-size: 15px;
}

/* Empty / loading states */
.lws-empty-state {
  margin: 0;
  padding: 40px 28px;
  text-align: center;
}

.lws-empty-state--bordered {
  max-width: 920px;
  padding: 48px 32px;
  border: 1px dashed var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  background: var(--cum-card, #fff);
}

.lws-empty-state--in-card {
  padding: 48px 28px;
}

.lws-empty-state-title {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.lws-empty-state-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cum-muted-foreground, #808c91);
}

/* -------------------------------------------------------------------------- */
/* Legacy blocks (Event checklist dialog + older panels)                      */
/* -------------------------------------------------------------------------- */

.lws-section-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 16px 28px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
}

.lws-section-toolbar h2 {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.lws-section-desc {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  color: var(--cum-muted-foreground, #808c91);
  line-height: 1.45;
}

.lws-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lws-section-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 28px 28px;
}

.lws-placeholder {
  padding: 28px;
  border: 1px dashed var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  background: var(--cum-card, #fff);
  color: var(--cum-muted-foreground, #808c91);
  font-size: 15px;
  line-height: 1.5;
}

.lws-form-card {
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  background: var(--cum-card, #fff);
  overflow: hidden;
  max-width: 920px;
  box-shadow: rgba(60, 64, 67, 0.06) 0 1px 2px 0;
}

.lws-form-card-title {
  margin: 0;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-secondary, #f6f5f8);
}

.lws-form-fields {
  padding: 20px 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lws-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* xs/sm tier (<= --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
  .lws-form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.lws-field-span-2 {
  grid-column: 1 / -1;
}

.lws-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.lws-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.lws-field-label {
  font-size: var(--cum-text-label, 12px);
  font-weight: 600;
  color: var(--cum-muted-foreground, #808c91);
}

/* Hero � carousel (retained if reused) */
.lws-carousel-card {
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  background: var(--cum-card, #fff);
  overflow: hidden;
}

.lws-carousel-card-title {
  margin: 0;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-secondary, #f6f5f8);
}

.lws-carousel-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.lws-carousel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.lws-carousel-row:last-child {
  border-bottom: none;
}

.lws-drag-handle {
  flex-shrink: 0;
  width: 22px;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  color: var(--cum-muted-foreground, #a8b0b4);
  cursor: grab;
}

.lws-drag-dot {
  display: flex;
  gap: 3px;
}

.lws-drag-dot span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.lws-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 60px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e8e0ec 0%, #d4c8dc 100%);
  object-fit: cover;
}

.lws-carousel-meta {
  flex: 1;
  min-width: 0;
}

.lws-carousel-meta .lws-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
}

.lws-carousel-meta .lws-dim {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: var(--cum-muted-foreground, #808c91);
}

.lws-carousel-meta .lws-when {
  margin: 0;
  font-size: 12px;
  color: var(--cum-muted-foreground, #9aa3a7);
}

.lws-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.lws-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.lws-pill-source-gallery {
  background: var(--jbf-status-info-bg);
  color: var(--jbf-status-info-fg);
}

.lws-pill-source-custom {
  background: var(--jbf-status-warning-bg);
  color: var(--jbf-status-warning-fg);
}

.lws-add-row {
  padding: 16px 20px 20px 20px;
}

.lws-add-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cum-primary, #7d5b81);
  cursor: pointer;
  font-family: inherit;
}

.lws-add-link:hover {
  text-decoration: underline;
}

/* xs/sm/md tiers (<= --bp-lg = 1024). 1023.98 mirrors --bp-lg; @media can't deref vars. */
@media (max-width: 1023.98px) {
  .lws-split {
    flex-direction: column;
  }

  /* HIDE the sticky nav completely on mobile - dropdown moves into page */
  .lws-interior-nav {
    display: none;
  }

  /* Hide desktop nav */
  .lws-nav--desktop,
  .lws-nav--mobile {
    display: none;
  }

  /* Page content takes full width */
  .lws-main-column {
    width: 100%;
  }

  /* MOBILE: Section dropdown appears in page header */
  .lws-editor-toolbar.cum-preview-header {
    padding: 0;
    gap: 0;
    flex-direction: column;
    background: transparent;
  }

  /* Mobile header card - rounded card effect WITHOUT overflow:hidden
     (overflow:hidden would clip the section dropdown and action dropdown menus).
     Border-radius is applied to the first and last child blocks instead. */
  .lws-editor-toolbar.cum-preview-header {
    margin: 0 12px 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    background: var(--cum-card, #fff);
    border-radius: 12px;
    position: relative;
  }

  /* Section navigation area - top of card */
  .cum-preview-title-block {
    width: 100%;
    padding: 10px 14px 8px;
    background: transparent;
    border-bottom: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 12px 12px 0 0;
  }

  .cum-preview-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
  }

  /* Section dropdown in page */
  .lws-mobile-section-nav {
    margin-bottom: 0;
  }

  /* Cap section nav dropdown so it doesn't fill the whole screen on mobile */
  .lws-mobile-section-nav .dropdown-items {
    max-height: 40vh !important;
    overflow-y: auto !important;
  }



  /* ACTION BUTTONS - 2×2 grid - bottom of card */
  .lws-editor-actions.cum-preview-actions {
    width: 100%;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: transparent;
    border-radius: 0 0 12px 12px;
    margin: 0;
    position: relative;
    z-index: 1;
  }

  /* Base button sizing - each cell fills its grid column */
  .lws-editor-actions.cum-preview-actions .rz-button,
  .lws-editor-actions.cum-preview-actions .lws-action-dropdown,
  .lws-editor-actions.cum-preview-actions .lws-busy-btn {
    width: 100%;
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: 0 8px;
    justify-content: center;
    white-space: nowrap;
  }

  /* Preview/Public triggers fill their column - match Radzen button height exactly */
  .lws-editor-actions.cum-preview-actions .lws-action-dropdown-trigger {
    width: 100%;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 8px;
    line-height: 40px;
  }

  /* Action dropdown menus - always open left-anchored so they stay in-viewport.
     Preview sits in the LEFT grid column; right:0 would push it off-screen left. */
  .lws-editor-actions.cum-preview-actions .lws-action-dropdown-menu {
    left: 0;
    right: auto;
    min-width: 200px;
    max-width: calc(100vw - 28px);
    z-index: 1050;
  }

  /* Page content spacing */
  .lws-editor-body {
    padding: 20px 16px 32px 16px;
  }

  /* FORM INPUTS */
  .cum-preview-field {
    margin-bottom: 24px;
  }

  .cum-preview-label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .rz-textbox,
  .rz-textarea,
  .rz-dropdown {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 10px;
  }

  /* Touch-friendly component sizing */
  .lws-ci-delete {
    opacity: 1;
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .wdre-drag-handle {
    font-size: 26px;
    padding: 10px;
  }

  .lws-faq-drag-handle {
    padding: 10px;
  }

  .lws-faq-item-toggle {
    padding: 18px 16px;
    margin: -14px -18px;
  }

  .lws-faq-chevron {
    width: 22px;
    height: 22px;
  }

  /* Form Field Stacking */
  .cum-preview-grid-2,
  .cum-preview-grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lcp-cat-grid-2col {
    grid-template-columns: 1fr;
  }

  /* Upload zones */
  .iuwc-upload-content {
    padding: 48px 24px;
    border-radius: 14px;
  }

  .iuwc-upload-icon {
    width: 56px;
    height: 56px;
  }

  .iuwc-upload-label {
    font-size: 16px;
  }

  /* Natural scroll */
  .lws-page {
    min-height: auto;
    max-height: none;
    height: auto;
  }

  .lws-editor-body {
    max-height: none;
    overflow-y: visible;
  }

  /* Dropdown items */
  .lws-action-dropdown-item {
    padding: 16px 20px;
    font-size: 16px;
    min-height: 56px;
  }

  /* Card spacing */
  .wdre-item {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 12px;
  }

  .lws-field-hint {
    font-size: 14px;
    margin-top: 8px;
  }
}

body[data-tier="xs"] .lws-editor-stack--compact .lws-editor-toolbar.cum-preview-header,
body[data-tier="sm"] .lws-editor-stack--compact .lws-editor-toolbar.cum-preview-header,
body[data-tier="md"] .lws-editor-stack--compact .lws-editor-toolbar.cum-preview-header {
  gap: 16px;
  flex-direction: column;
}

body[data-tier="xs"] .lws-editor-stack--compact .cum-preview-title-block,
body[data-tier="sm"] .lws-editor-stack--compact .cum-preview-title-block,
body[data-tier="md"] .lws-editor-stack--compact .cum-preview-title-block {
  flex-basis: 100%;
  width: 100%;
}

body[data-tier="xs"] .lws-editor-stack--compact .lws-editor-actions--compact.cum-preview-actions,
body[data-tier="sm"] .lws-editor-stack--compact .lws-editor-actions--compact.cum-preview-actions,
body[data-tier="md"] .lws-editor-stack--compact .lws-editor-actions--compact.cum-preview-actions {
  width: 100%;
  margin-left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px;
}

body[data-tier="xs"] .lws-editor-stack--compact .lws-editor-actions--compact .rz-button,
body[data-tier="xs"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-action-dropdown,
body[data-tier="xs"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-busy-btn,
body[data-tier="sm"] .lws-editor-stack--compact .lws-editor-actions--compact .rz-button,
body[data-tier="sm"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-action-dropdown,
body[data-tier="sm"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-busy-btn,
body[data-tier="md"] .lws-editor-stack--compact .lws-editor-actions--compact .rz-button,
body[data-tier="md"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-action-dropdown,
body[data-tier="md"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-busy-btn {
  width: 100%;
  height: 40px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 0 8px;
  justify-content: center;
  white-space: nowrap;
}

body[data-tier="xs"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-action-dropdown-trigger,
body[data-tier="sm"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-action-dropdown-trigger,
body[data-tier="md"] .lws-editor-stack--compact .lws-editor-actions--compact .lws-action-dropdown-trigger {
  width: 100%;
  height: 40px;
  min-height: 40px;
  justify-content: center;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 8px;
  line-height: 40px;
}
  font-size: 13px;
}

body[data-tier="xs"] .lws-editor-stack--compact .lws-panel-footer-actions--compact,
body[data-tier="sm"] .lws-editor-stack--compact .lws-panel-footer-actions--compact,
body[data-tier="md"] .lws-editor-stack--compact .lws-panel-footer-actions--compact {
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

body[data-tier="xs"] .lws-editor-stack--compact .lws-panel-footer-actions--compact .rz-button,
body[data-tier="sm"] .lws-editor-stack--compact .lws-panel-footer-actions--compact .rz-button,
body[data-tier="md"] .lws-editor-stack--compact .lws-panel-footer-actions--compact .rz-button {
  flex: none;
  width: 100%;
  height: 52px;
}

/* xs/sm tier (<= --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
  /* Override viewport height - use natural scroll on small screens */
  .lws-page {
    min-height: auto;
    max-height: none;
    height: auto;
  }

  /* Even more generous spacing on phones */
  .lws-editor-toolbar.cum-preview-header {
    padding: 24px 20px 20px 20px;
  }

  .lws-editor-body {
    padding: 24px 20px 40px 20px;
  }

  /* Make page title bigger and bolder on phones */
  .cum-preview-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
  }
}

/* ============================================================
   ImageUploadWithCrop Component (.iuwc-*)
   ============================================================ */

.iuwc-root {
  width: 100%;
}

.iuwc-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.iuwc-current-preview {
  max-width: 240px;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--cum-border, #e2e8f0);
}

.iuwc-preview-actions {
  display: flex;
  gap: 8px;
}

.iuwc-cropper-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iuwc-cropper-container {
  position: relative;
  max-height: 360px;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 8px;
  border: 1px solid var(--cum-border, #e2e8f0);
}

.iuwc-crop-img {
  display: block;
  max-width: 100%;
}

.iuwc-cropper-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.iuwc-status {
  font-size: 13px;
  color: var(--cum-muted-text, #718096);
  margin: 0;
}

.iuwc-upload-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iuwc-file-label {
  display: inline-flex;
  cursor: pointer;
}

.iuwc-file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.iuwc-hint {
  font-size: 12px;
  color: var(--cum-muted-text, #718096);
  margin: 0;
}

/* ============================================================
   WebsiteDetailsRepeaterEditor Component (.wdre-*)
   ============================================================ */

.wdre-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wdre-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wdre-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cum-card-bg, #fff);
  border: 1px solid var(--cum-border, #e2e8f0);
  border-radius: 8px;
  padding: 12px;
  transition: box-shadow 0.15s, opacity 0.15s;
  cursor: default;
}

.wdre-item.wdre-dragging {
  opacity: 0.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.wdre-drag-handle {
  cursor: grab;
  font-size: 18px;
  line-height: 1;
  color: var(--cum-muted-text, #718096);
  padding-top: 2px;
  flex-shrink: 0;
  user-select: none;
}

.wdre-drag-handle:active {
  cursor: grabbing;
}

.wdre-item-body {
  flex: 1;
  min-width: 0;
}

.wdre-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.wdre-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--cum-border, #e2e8f0);
  border-radius: 8px;
}

.wdre-empty-text {
  font-size: 14px;
  color: var(--cum-muted-text, #718096);
  margin: 0;
}

.wdre-add-form {
  border: 1px solid var(--rz-primary, #7d5b81);
  border-radius: 8px;
  overflow: hidden;
}

.wdre-add-form-header {
  background: var(--rz-primary, #7d5b81);
  padding: 8px 12px;
}

.wdre-add-form-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.wdre-add-form-body {
  padding: 12px;
  background: var(--cum-card-bg, #fff);
}

.wdre-add-form-actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cum-background, #fafafa);
  border-top: 1px solid var(--cum-border, #e2e8f0);
}

.wdre-add-row {
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   Local Website section-specific helpers
   ============================================================ */

/* Seller Info optional label */
.lws-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--cum-muted-text, #718096);
  font-style: italic;
  margin-left: 4px;
}

/* Shared checkbox row - e.g. Event Info "Display JBF Video" */
.lws-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.lws-checkbox-label {
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.lws-label-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--cum-muted-foreground, #808c91);
}

/* Hero item form inside repeater */
.lws-hero-item-form {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.lws-hero-preview-thumb {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--cum-border, #e2e8f0);
  flex-shrink: 0;
}

.lws-hero-item-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Charity item form inside repeater */
.lws-charity-item-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Empty state variants */
.lws-empty-state--in-card {
  padding: 32px 16px;
  text-align: center;
}

/* ============================================================
   Hero Carousel Section (.lws-carousel-*)
   ============================================================ */

.lws-carousel-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lws-carousel-section--has-overlay {
  position: relative;
}

.lws-carousel-section-header {
  padding: 20px 20px 12px 20px;
  border-bottom: 1px solid var(--cum-border, #e2e8f0);
}

.lws-carousel-section-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  letter-spacing: -0.01em;
}

.lws-carousel-section-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cum-muted-text, #718096);
}

/* ?? Carousel item card (.lws-ci) ??????????????????????????? */

.wdre-list {
  padding: 8px 0;
}

.wdre-list .wdre-item {
  border: none;
  border-bottom: 1px solid var(--cum-border, #e2e8f0);
  border-radius: 0;
  padding: 14px 16px;
  background: transparent;
  align-items: center;
}

.wdre-list .wdre-item:last-child {
  border-bottom: none;
}

.wdre-list .wdre-item:hover {
  background: var(--cum-hover-bg, #f7f8fc);
}

/* The host page's ItemTemplate body fills the whole row */
.wdre-item-body {
  flex: 1;
  min-width: 0;
}

/* Carousel item layout inside the ItemTemplate body */
.lws-ci {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/* Thumbnail */
.lws-ci-thumb-wrap {
  flex-shrink: 0;
  width: 84px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--cum-border, #e2e8f0);
  background: var(--cum-background, #f5f5f5);
}

.lws-ci-thumb {
  width: 84px;
  height: 54px;
  object-fit: cover;
  display: block;
}

.lws-ci-thumb--empty {
  width: 84px;
  height: 54px;
  background: linear-gradient(135deg, #eef0f4 0%, #e2e8f0 100%);
}

/* Meta block */
.lws-ci-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lws-ci-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  line-height: 1.3;
}

.lws-ci-dims {
  font-size: 12px;
  color: var(--cum-muted-text, #718096);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Source badge */
.lws-ci-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  line-height: 1.5;
  width: fit-content;
}

.lws-ci-badge--approved {
  background: #dcfce7;
  color: #15803d;
}

.lws-ci-badge--pending {
  background: #fff7ed;
  color: #c2410c;
}

/* Delete button � only visible on hover */
.lws-ci-delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cum-muted-text, #718096);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  padding: 0;
  outline: none;
}

.wdre-item:hover .lws-ci-delete,
.lws-ci-delete:focus-visible {
  opacity: 1;
}

.lws-ci-delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Disabled delete: shown on the locked panel 1 row while other panels still
   exist. Stays at low opacity even on row hover, refuses pointer events, and
   loses the red destructive hover so the user can't even visually rehearse
   the action. The native title= attribute carries the explanation. */
.lws-ci-delete--disabled,
.lws-ci-delete--disabled:hover,
.wdre-item:hover .lws-ci-delete--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
  color: var(--cum-muted-text, #718096);
}


/* Edit button � mirrors lws-ci-delete but uses a neutral hover */
.lws-ci-edit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cum-muted-text, #718096);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.wdre-item:hover .lws-ci-edit,
.lws-ci-edit:focus-visible {
  opacity: 1;
}

.lws-ci-edit:hover {
  background: var(--cum-hover-bg, #f0f4ff);
  color: var(--rz-primary, #7d5b81);
}

/* Validation error message */
.lws-validation-error {
  display: block;
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
}

/* Clickable carousel/charity item row */
.lws-ci--clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.lws-ci--clickable:hover {
  background: var(--cum-hover-bg, #f7f8fc);
}
/* ?? Add form for hero images ??????????????????????????????? */

.lws-ci-add-form {
  padding: 16px;
  border-top: 1px solid var(--cum-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lws-ci-add-form-actions {
  display: flex;
  justify-content: flex-end;
}

.lws-ci-cancel-btn {
  background: none;
  border: 1px solid var(--cum-border, #e2e8f0);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.5;
}

.lws-ci-cancel-btn:hover {
  background: var(--cum-hover-bg, #f7f8fc);
  border-color: #a0aec0;
}

/* ?? Generic add button (.wdre-add-btn) ????????????????????? */

.wdre-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rz-primary, #7d5b81);
  background: none;
  border: 1.5px dashed var(--cum-border, #cbd5e0);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  margin: 12px 0 4px;
  letter-spacing: 0.01em;
}

.wdre-add-btn:hover:not(:disabled) {
  border-color: var(--rz-primary, #7d5b81);
  background: var(--rz-primary-lighter, #f5f0f6);
  color: var(--rz-primary-dark, #5e4163);
}

.wdre-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wdre-add-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ?? Error banner (.wdre-error) ????????????????????????????? */

.wdre-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
  margin: 8px 0;
}

.wdre-error-icon {
  flex-shrink: 0;
  color: #dc2626;
}

.wdre-error span {
  flex: 1;
}

.wdre-error-close {
  background: none;
  border: none;
  color: #b91c1c;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
  transition: opacity 0.12s;
}

.wdre-error-close:hover {
  opacity: 1;
}

/* ?? Charity item actions ??????????????????????????????????? */

.lws-charity-item-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.lws-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1.5;
}

.lws-action-btn--save {
  background: var(--rz-primary, #7d5b81);
  color: #fff;
  border-color: var(--rz-primary, #7d5b81);
}

.lws-action-btn--save:hover {
  background: var(--rz-primary-dark, #5e4163);
  border-color: var(--rz-primary-dark, #5e4163);
}

.lws-action-btn--delete {
  background: transparent;
  color: #dc2626;
  border-color: #fecaca;
}

.lws-action-btn--delete:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.lws-action-btn--cancel {
  background: transparent;
  color: var(--cum-foreground, #021922);
  border-color: var(--cum-border, #e2e8f0);
}

.lws-action-btn--cancel:hover {
  background: var(--cum-hover-bg, #f7f8fc);
}

/* ?? Drag handle overrides for carousel ????????????????????? */

.wdre-drag-handle {
  color: #a0aec0;
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.12s;
}

.wdre-drag-handle:hover {
  color: var(--cum-foreground, #021922);
}

/* Locked-row drag handle: shown on the row at index 0 when the host page
   passes LockFirstItem="true" (e.g. Local Website hero panel 1). The native
   6-dot grab handle is replaced with a lock icon and the cursor is
   not-allowed so the user gets immediate "this row can't be moved" feedback. */
.wdre-drag-handle--locked {
  color: var(--cum-muted-foreground, #808c91);
  cursor: not-allowed;
  opacity: 0.7;
}

.wdre-drag-handle--locked:hover {
  color: var(--cum-muted-foreground, #808c91);
}

.wdre-item.wdre-locked {
  /* Visually identical to a regular row at rest - the lock icon alone signals
     the constraint. We avoid a background tint here so the locked row doesn't
     compete with the rest of the carousel visually. */
}

.wdre-item.wdre-dragging {
  background: var(--rz-primary-lighter, #f5f0f6) !important;
  box-shadow: 0 4px 16px rgba(125, 91, 129, 0.15);
}

/* ============================================================
   ImageUploadWithCrop component (.iuwc-*)  � v2 native HTML
   ============================================================ */

/* Upload zone */
.iuwc-upload-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Upload zone while file is being read ? overlay keeps InputFile mounted in DOM */
.iuwc-upload-zone--processing {
  position: relative;
  pointer-events: none;
  user-select: none;
}

.iuwc-processing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  z-index: 2;
  min-height: 120px;
}

.iuwc-file-label {
  display: block;
  cursor: pointer;
}

.iuwc-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.iuwc-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px;
  border: 2px dashed var(--cum-border, #cbd5e0);
  border-radius: 10px;
  background: var(--cum-background, #fafafa);
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}

.iuwc-file-label:hover .iuwc-upload-content,
.iuwc-file-label:focus-within .iuwc-upload-content {
  border-color: var(--rz-primary, #7d5b81);
  background: var(--rz-primary-lighter, #f5f0f6);
}
/* Drag-over visual highlight for drop zone */
.iuwc-upload-zone.drag-over .iuwc-upload-content {
  border-color: var(--rz-primary, #7d5b81);
  background: var(--rz-primary-lighter, #f5f0f6);
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.15);
}

.iuwc-upload-icon {
  width: 36px;
  height: 36px;
  color: var(--cum-muted-text, #a0aec0);
}

.iuwc-upload-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.iuwc-upload-hint {
  font-size: 12px;
  color: var(--cum-muted-text, #718096);
}

/* Preview (existing image) */
.iuwc-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iuwc-current-preview {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--cum-border, #e2e8f0);
  display: block;
}

.iuwc-preview-actions {
  display: flex;
  gap: 8px;
}

.iuwc-replace-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  background: transparent;
  border: 1px solid var(--cum-border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.iuwc-replace-btn:hover {
  background: var(--cum-hover-bg, #f7f8fc);
  border-color: #a0aec0;
}

/* Cropper container */
.iuwc-cropper-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iuwc-crop-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rz-primary, #7d5b81);
  background: var(--rz-primary-lighter, #f5f0f6);
  border: 1px solid var(--rz-primary-light, #c9b7cc);
  border-radius: 100px;
  padding: 3px 10px;
  width: fit-content;
}

/* Aspect-ratio bar above the cropper. Hosts either the locked-mode badge
   or the free-crop preset dropdown (GenericDropdown). The dropdown brings
   its own visual styling, so this bar only owns layout and z-index. */
.iuwc-crop-mode-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0 0 4px;
  position: relative;
  z-index: 5;
}

/* Tighten GenericDropdown inside the cropper toolbar so it doesn't dwarf
   the crop frame on narrow dialogs. */
.iuwc-crop-mode-bar .generic-dropdown {
  min-width: 200px;
}

.iuwc-crop-mode-bar .dropdown-control {
  padding: 0.45rem 0.75rem;
}

.iuwc-cropper-container {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--cum-border, #e2e8f0);
  background: #111;
}

.iuwc-crop-img {
  display: block;
  max-width: 100%;
}

/* Cropper action buttons */
.iuwc-cropper-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.iuwc-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--rz-primary, #7d5b81);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  line-height: 1.5;
}

.iuwc-apply-btn:hover:not(:disabled) {
  background: var(--rz-primary-dark, #5e4163);
}

.iuwc-apply-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.iuwc-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  background: transparent;
  border: 1px solid var(--cum-border, #e2e8f0);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.5;
}

.iuwc-cancel-btn:hover:not(:disabled) {
  background: var(--cum-hover-bg, #f7f8fc);
  border-color: #a0aec0;
}

.iuwc-cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner (inline uploading indicator) */
.iuwc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: iuwc-spin 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes iuwc-spin {
  to { transform: rotate(360deg); }
}

/* Error banner */
.iuwc-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
}

.iuwc-error--top {
  margin-bottom: 4px;
}

.iuwc-error-icon {
  flex-shrink: 0;
  color: #dc2626;
}

.iuwc-error span {
  flex: 1;
}

.iuwc-error-close {
  background: none;
  border: none;
  color: #b91c1c;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
  transition: opacity 0.12s;
}

.iuwc-error-close:hover {
  opacity: 1;
}

/* -- Charity Partners carousel rows ----------------------------------------
 * Charity cards reuse the .lws-ci (carousel item) base style shared with
 * hero + photo gallery. The -row / -desc modifiers add the second line
 * (description preview) beneath the charity name.
 * -------------------------------------------------------------------------- */
.lws-charity-row .lws-ci-meta {
    gap: 4px;
}

.lws-charity-row-desc {
    font-size: 13px;
    color: var(--cum-muted-text, #718096);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lws-charity-add-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* -- Legacy section-group helper (used by multiple preview panels) --------- */
.lws-section-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--cum-border, #e6e8e9);
}
.lws-section-group:last-child {
    border-bottom: none;
}
.lws-section-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cum-muted-text, #718096);
}

/* JbfImg skeleton loader */
.jbf-img-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.jbf-img--hidden { opacity: 0; position: absolute; pointer-events: none; }
.jbf-img-skeleton { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 48px; min-height: 48px; border-radius: 6px; background: linear-gradient(90deg, var(--cum-border,#e8e8e8) 25%, #f5f5f5 50%, var(--cum-border,#e8e8e8) 75%); background-size: 200% 100%; animation: jbfImgShimmer 1.4s ease-in-out infinite; overflow: hidden; position: relative; }
.jbf-img-skeleton-shine { display: block; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%); }
@keyframes jbfImgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.jbf-img-empty { background: var(--cum-border,#e8e8e8); border-radius: 6px; }

/* ImageUploadWithCrop resolving state */
.iuwc-resolving-skeleton { display: flex; align-items: center; justify-content: center; min-height: 80px; width: 100%; max-width: 240px; border-radius: 8px; border: 1px solid var(--cum-border,#e2e8f0); background: linear-gradient(90deg, var(--cum-border,#e8e8e8) 25%, #f5f5f5 50%, var(--cum-border,#e8e8e8) 75%); background-size: 200% 100%; animation: jbfImgShimmer 1.4s ease-in-out infinite; }
.iuwc-img-wrap { display: block; }

/* Carousel row thumbnail wrapper */
.lws-ci-thumb-img-wrap { width: 64px; height: 64px; border-radius: 6px; flex-shrink: 0; }
.lws-ci-thumb-img-wrap .jbf-img-skeleton { width: 64px; height: 64px; min-width: unset; min-height: unset; }

/* Hero carousel thumbnail loading state */
.lws-ci-thumb--loading { display: flex; align-items: center; justify-content: center; background: var(--cum-border,#f0f0f0); border-radius: 6px; }

/* ?? FAQ editor ??????????????????????????????????????????????????????????? */
.lws-faq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.lws-faq-header .lws-field-hint {
    margin: 0;
    flex: 1;
}
.lws-faq-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--rz-primary, #7c3aed);
    border-radius: 6px;
    background: #fff;
    color: var(--rz-primary, #7c3aed);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.lws-faq-add-btn:hover {
    background: var(--rz-primary, #7c3aed);
    color: #fff;
}

/* FSC Folders tab - right-align the "Add Folder" toolbar action so it
   sits flush with the card edge, matching the Gallery/Content tabs. */
.fsc-folders-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
}

/* ── FSC Folders tab - folder card layout ──────────────────────────────────
   The card itself reuses .lws-faq-item from the FAQ section. These rules add
   structure for the folder-specific bits (drag handle, name/slug pair, status
   meta, "Available in" chips) without forking a whole new component. */
.fsc-folder-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}
.fsc-folder-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: grab;
    padding: 4px;
    margin-top: 2px;
    flex-shrink: 0;
}
.fsc-folder-drag-handle:hover { color: #475569; }
.fsc-folder-drag-handle--disabled { cursor: not-allowed; opacity: 0.4; }
.fsc-folder-dragging { opacity: 0.55; }

.fsc-folder-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.fsc-folder-name {
    font-weight: 600;
    color: var(--cum-foreground, #0f172a);
    cursor: pointer;
}
.fsc-folder-name:hover { color: #2563eb; }
.fsc-folder-slug {
    font-size: 12px;
    color: var(--cum-muted-text, #64748b);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fsc-folder-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.fsc-folder-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}
.fsc-folder-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.fsc-folder-status--active   { background: #dcfce7; color: #166534; }
.fsc-folder-status--inactive { background: #fee2e2; color: #991b1b; }
.fsc-folder-item--inactive   { opacity: 0.7; }

.fsc-folder-active-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cum-muted-text, #64748b);
}

.fsc-folder-edit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    flex: 1 1 auto;
    min-width: 0;
}
.fsc-folder-field { display: flex; flex-direction: column; gap: 4px; }
.fsc-folder-field--full { grid-column: 1 / -1; }
.fsc-folder-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cum-foreground, #0f172a);
    display: flex;
    gap: 2px;
}
.fsc-folder-field-label small {
    font-weight: 400;
    color: var(--cum-muted-text, #64748b);
    font-size: 11px;
}

.fsc-folder-error {
    margin-top: 6px;
    font-size: 12px;
    color: #b91c1c;
    background: #fef2f2;
    padding: 6px 10px;
    border-radius: 6px;
}

/* "Available in" multi-select - chip checkboxes. Wraps freely so the form
   stays compact at 5 contexts and gracefully grows when the catalog does.
   Colors follow the system theme (--cum-primary family) so chips read as
   the same "selected" affordance used elsewhere (team-scheduling, etc.). */
.fsc-folder-context-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fsc-folder-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 999px;
    background: var(--cum-card, #fff);
    color: var(--cum-muted-foreground, #808c91);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fsc-folder-context-chip:hover {
    border-color: var(--cum-primary, #7d5b81);
    color: var(--cum-foreground, #021922);
}
.fsc-folder-context-chip input { accent-color: var(--cum-primary, #7d5b81); }
.fsc-folder-context-chip--on {
    background: var(--cum-primary-soft, #ede6f5);
    border-color: var(--cum-primary, #7d5b81);
    color: var(--cum-primary, #7d5b81);
}
/* When "Show everywhere" is ticked, the specific-context chips become
   redundant - we leave them visibly checked but lock interaction so admins
   can't fiddle with them while the wildcard is on. */
.fsc-folder-context-chip--locked {
    cursor: not-allowed;
    opacity: 0.55;
}
.fsc-folder-context-chip--locked:hover {
    border-color: var(--cum-border, #e6e8e9);
    color: var(--cum-muted-foreground, #808c91);
}
.fsc-folder-context-chip--locked.fsc-folder-context-chip--on:hover {
    border-color: var(--cum-primary, #7d5b81);
    color: var(--cum-primary, #7d5b81);
}
.fsc-folder-context-chip--locked input { cursor: not-allowed; }

/* Read-only context tags shown on the collapsed folder row so admins can
   eyeball routing at a glance without expanding the editor. */
.fsc-folder-context-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.fsc-folder-context-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--cum-primary-soft, #ede6f5);
    color: var(--cum-primary, #7d5b81);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.fsc-folder-context-tag--muted {
    background: transparent;
    color: var(--cum-muted-foreground, #808c91);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    font-style: italic;
}
/* Wildcard summary - same token colors; ring signals "all pickers" without repeating each surface. */
.fsc-folder-context-tag--everywhere {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cum-primary, #7d5b81) 45%, transparent);
}

.lws-faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lws-faq-item {
    border: 1px solid var(--cum-border, #e2e8f0);
    border-radius: 10px;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lws-faq-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* FAQ drag handle - reuses the six-dot SVG from the hero/photo repeater
   (.wdre-drag-handle) so the affordance reads identically across the local
   website editor. Positioned to the LEFT of the expander chevron via DOM
   order; flex-shrink:0 keeps it pinned even when the FAQ summary text
   stretches the toggle button. */
.lws-faq-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 4px;
    color: #a0aec0;
    cursor: grab;
    transition: color 0.12s;
}

.lws-faq-drag-handle:hover {
    color: var(--cum-foreground, #021922);
}

.lws-faq-drag-handle:active {
    cursor: grabbing;
}

/* Drag-in-flight feedback. Mirrors WebsiteDetailsRepeaterEditor's
   `.wdre-item.wdre-dragging` so reorder feels the same on FAQs as it does
   on hero/photo/charity rows. */
.lws-faq-item.is-dragging {
    opacity: 0.55;
    background: var(--rz-primary-lighter, #f5f0f6);
    box-shadow: 0 4px 16px rgba(125, 91, 129, 0.15);
}
.lws-faq-item-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cum-muted-text, #718096);
}
.lws-faq-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--cum-border, #e2e8f0);
    border-radius: 5px;
    background: #fff;
    color: var(--cum-muted-text, #718096);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lws-faq-delete-btn:hover {
    border-color: #fca5a5;
    color: #dc2626;
    background: #fef2f2;
}

/* ?? Action dropdown buttons (Preview / Public) ??????????????????????????? */
.lws-action-dropdown {
    position: relative;
    display: inline-block;
}

.lws-action-dropdown-trigger {
    list-style: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    height: 36px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border: 1px solid var(--rz-base-400, #d1d5db);
    background: #fff;
    color: var(--cum-foreground, #021922);
    transition: background 0.15s, border-color 0.15s;
    outline: none;
    font-family: inherit;
}

.lws-action-dropdown-trigger .rzi {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.54);
    transition: transform 0.2s ease;
    line-height: 1;
}

.lws-action-dropdown--open .lws-action-dropdown-trigger .rzi {
    transform: rotate(180deg);
}

.lws-action-dropdown-trigger:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: #9ca3af;
}

/* Primary variant (Public button) */
.lws-action-dropdown--primary .lws-action-dropdown-trigger {
    background: var(--rz-primary, #7d5b81);
    color: #fff;
    border-color: var(--rz-primary, #7d5b81);
}

.lws-action-dropdown--primary .lws-action-dropdown-trigger .rzi {
    color: rgba(255, 255, 255, 0.8);
}

/* Inverted hover: white background + primary text/border. The prior
   darker-purple hover (#6a4d6e) was retired app-wide - see the matching
   rule in event-landing.css. */
.lws-action-dropdown--primary .lws-action-dropdown-trigger:hover {
    background: #ffffff;
    color: var(--rz-primary, #7d5b81);
    border-color: var(--rz-primary, #7d5b81);
}

.lws-action-dropdown--primary .lws-action-dropdown-trigger:hover .rzi {
    color: var(--rz-primary, #7d5b81);
}

/* Disabled state */
.lws-action-dropdown--disabled .lws-action-dropdown-trigger {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* In-progress trigger � keep full opacity so the spinner is readable. */
.lws-action-dropdown-trigger:disabled {
    cursor: progress;
    opacity: 1;
}

/* Inline spinner used by Save draft, Preview, and Public buttons. Reuses the
   iuwc-spin keyframe so we don't ship a second animation. */
.lws-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: iuwc-spin 0.65s linear infinite;
    flex-shrink: 0;
    vertical-align: -2px;
}

.lws-btn-spinner--dark {
    color: var(--rz-primary, #7d5b81);
}

.lws-btn-spinner--light {
    color: rgba(255, 255, 255, 0.95);
}

/* Stand-in button that replaces the Radzen "Save draft" while saving so we
   can render a spinner inline. Mirrors the visual weight of ButtonStyle.Light
   so the toolbar doesn't reflow. */
.lws-busy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: progress;
    user-select: none;
}

.lws-busy-btn--light {
    background: #f3f4f6;
    color: var(--rz-primary, #7d5b81);
}

.lws-busy-btn:disabled {
    opacity: 1;
}

/* Transparent backdrop � closes menus on outside click */
.lws-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* Dropdown menu � z-index above the backdrop (999) */
.lws-action-dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 4px 0;
    animation: lwsDropdownFadeIn 0.12s ease;
}

@keyframes lwsDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Menu items */
.lws-action-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--cum-foreground, #021922);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    box-sizing: border-box;
}

.lws-action-dropdown-item:hover {
    background: rgba(125, 91, 129, 0.08);
    color: var(--cum-primary, #7d5b81);
    text-decoration: none;
}

.lws-action-dropdown-item:disabled,
.lws-action-dropdown-item--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Inline preview-password hint pinned to the right of "View Preview Site"
   so editors copy the JBFpreview password at a glance without hovering for
   the title attribute. */
.lws-action-dropdown-item-hint {
    margin-left: auto;
    padding-left: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--cum-muted-foreground, #808c91);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.lws-action-dropdown-item:hover .lws-action-dropdown-item-hint {
    color: var(--cum-primary, #7d5b81);
}

/* ?? ImageUploadWithCrop ? Gallery picker option ??????????????????????????? */

.iuwc-gallery-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    color: var(--cum-muted-foreground, #808c91);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.iuwc-gallery-divider::before,
.iuwc-gallery-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cum-border, #e6e8e9);
}

.iuwc-gallery-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 14px;
    border: 1.5px solid var(--rz-primary, #7d5b81);
    border-radius: 6px;
    background: transparent;
    color: var(--rz-primary, #7d5b81);
    font-family: var(--cum-font, var(--font-overpass, sans-serif));
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.iuwc-gallery-btn:hover {
    background: var(--rz-primary, #7d5b81);
    color: #fff;
}


/* ===========================================================
   "What To Sell" (Category Profile) editor + preview
   - 2-column category checkbox grid (Add / Edit / Add Categories)
   - Preview panel header card + per-category cards (qty pill, size chips, action icons)
   - Per-category line edit panel (radios, sizes grid)
   =========================================================== */

.lcp-edit-body,
.lcp-line-edit-body,
.lcp-preview-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Add / Edit form: 2-column category grid ------- */

.lcp-hint {
    margin: 4px 0 8px;
    color: var(--cum-muted-foreground, #808c91);
    font-size: 13px;
}

.lcp-select-actions {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
}

.lcp-cat-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
    max-height: 360px;
    overflow-y: auto;
}

.lcp-cat-grid-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
}

.lcp-cat-name {
    font-size: 14px;
    line-height: 1.3;
    color: var(--cum-foreground, #021922);
}

/* ---------- Preview header card --------------------------- */

.lcp-preview-header-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
}

.lcp-preview-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcp-preview-season {
    font-size: 14px;
    color: #2c333a;
}

.lcp-preview-section-label {
    font-size: var(--cum-text-label, 12px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cum-muted-foreground, #808c91);
    margin-bottom: 4px;
}

.lcp-preview-guidelines-block .ecm-html-preview {
    font-size: 13.5px;
    line-height: 1.45;
    color: #2c333a;
}

.lcp-preview-edit-icon {
    flex: 0 0 auto;
}

/* ---------- Categories list header + add btn ------------- */

.lcp-preview-cats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.lcp-preview-add-cat-btn {
    flex: 0 0 auto;
}

.lcp-preview-empty {
    padding: 14px 16px;
    border: 1px dashed var(--cum-border, #e6e8e9);
    border-radius: 8px;
    color: var(--cum-muted-foreground, #808c91);
    font-size: 13px;
    background: #fafbfc;
}

/* ---------- Per-category cards --------------------------- */

.lcp-preview-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcp-preview-cat-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

.lcp-preview-cat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcp-preview-cat-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lcp-preview-cat-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c333a;
}

.lcp-preview-qty-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef1f5;
    color: #2c333a;
    font-size: 12px;
    font-weight: 600;
}

.lcp-preview-sizes-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #2c333a;
    font-size: 13px;
}

.lcp-preview-sizes-label {
    color: var(--cum-muted-foreground, #808c91);
    font-size: var(--cum-text-label, 12px);
    font-weight: 600;
    margin-right: 2px;
}

.lcp-preview-size-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--cum-border, #e0e3e7);
    border-radius: 6px;
    background: #f7f8fa;
    font-size: 12px;
    line-height: 1.4;
    color: #2c333a;
}

.lcp-preview-cat-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Per-category line edit panel ----------------- */

.lcp-line-section {
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

.lcp-line-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2c333a;
}

.lcp-line-radio-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcp-line-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #2c333a;
    font-size: 14px;
    user-select: none;
}

.lcp-line-radio--inline-input {
    flex-wrap: wrap;
}

.lcp-line-limit-numeric {
    width: 90px;
}

.lcp-line-sizes-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: #2c333a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.lcp-line-sizes-toggle .lcp-chevron {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
    font-size: 10px;
    color: var(--cum-muted-foreground, #808c91);
}

.lcp-line-sizes-toggle--open .lcp-chevron {
    transform: rotate(0deg);
}

.lcp-line-sizes-mode {
    color: var(--cum-muted-foreground, #808c91);
    font-weight: 500;
}

.lcp-line-sizes-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lcp-line-all-sizes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f7f8fa;
    border: 1px solid var(--cum-border, #e0e3e7);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #2c333a;
    align-self: flex-start;
}

.lcp-line-all-sizes--on {
    background: #eef1f5;
    border-color: #c8cfd6;
}

.lcp-line-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px 16px;
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    max-height: 280px;
    overflow-y: auto;
}

.lcp-line-size-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13.5px;
    color: #2c333a;
}

.lcp-empty-sizes {
    padding: 8px 4px;
    color: var(--cum-muted-foreground, #808c91);
    font-size: 13px;
}

/* ---------- Per-line edit panel: single-column stack ---------- */

/* Vertical stack of size/type/quantity grouping cards; sits below the
   shared "Additional Content / Guidelines" section in a single column. */
.lcp-line-groups-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lcp-line-group-card {
    /* Re-uses .lcp-line-section box; this hook just gives extra hooks for
       header/qty subsection spacing. */
}

.lcp-line-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}

.lcp-line-group-header .lcp-line-section-title {
    margin-bottom: 0;
}

.lcp-line-section-subtitle {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cum-muted-foreground, #808c91);
}

.lcp-line-group-qty {
    border-top: 1px dashed var(--cum-border, #e6e8e9);
    margin-top: 12px;
    padding-top: 4px;
}

/* Indented "For Grouping | Per Size/Type" sub-radio row, sits under the
   "Limit to" row and above the donate-override checkbox. Dims when the
   parent "No limit" radio is active. */
.lcp-line-scope-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-left: 24px;
    font-size: 13px;
    color: #2c333a;
}

.lcp-line-scope-row .lcp-line-radio {
    font-size: 13px;
}

.lcp-line-scope-row--off {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Donate-override checkbox sits indented under the Limit-to row and dims
   when the parent radio is on No-Limit. */
.lcp-line-donate-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 24px;
    color: #2c333a;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.lcp-line-donate-check--off {
    opacity: 0.55;
    cursor: not-allowed;
}

.lcp-line-group-add-btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* ---------- Preview: per-grouping row inside a category card ----- */

.lcp-preview-group-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-top: 1px dashed var(--cum-border, #e6e8e9);
}

.lcp-preview-group-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.lcp-preview-group-sizes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Single-line meta row shown directly under a grouping's Sizes row.
   For un-capped groupings it just renders "No Limit"; for capped
   groupings it renders three pipe-separated fields:
       Limit: N  |  Applies: For Grouping  |  No Limit if Donate: On
   Allowed to wrap at narrow widths so it never overflows the card. */
.lcp-preview-limit-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--cum-muted-foreground, #5b6770);
    line-height: 1.35;
}

.lcp-preview-limit-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.lcp-preview-limit-meta-label {
    color: var(--cum-muted-foreground, #5b6770);
}

.lcp-preview-limit-meta-value {
    color: #2c333a;
    font-weight: 600;
}

.lcp-preview-limit-meta-value--off {
    color: var(--cum-muted-foreground, #5b6770);
    font-weight: 500;
}

.lcp-preview-limit-meta-divider {
    color: var(--cum-muted-foreground, #b7bdc1);
    user-select: none;
}

/* ── FAQ collapse / expand ─────────────────────────────────────────────────
   Each .lws-faq-item is collapsed by default; the header acts as a toggle
   that reveals the question/answer editors below. When collapsed the
   question text shows next to "FAQ N" so editors can scan the list. */
.lws-faq-item.is-collapsed {
    padding: 12px 16px;
    gap: 0;
}
.lws-faq-item.is-open {
    padding: 20px;
}
.lws-faq-item-toggle {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.lws-faq-item-toggle:focus-visible {
    outline: 2px solid var(--rz-primary, #7c3aed);
    outline-offset: 2px;
    border-radius: 4px;
}
.lws-faq-chevron {
    flex-shrink: 0;
    color: var(--cum-muted-text, #718096);
    transition: transform 0.15s ease;
    transform: rotate(-90deg);
}
.lws-faq-item.is-open .lws-faq-chevron {
    transform: rotate(0deg);
}
.lws-faq-item-toggle .lws-faq-item-number {
    flex-shrink: 0;
}
.lws-faq-item-summary {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #2c333a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Load FSC FAQs dropdown ───────────────────────────────────────────────
   Tiny self-contained menu hung off the existing .lws-faq-add-btn trigger.
   The fixed transparent overlay handles click-outside dismissal without
   any JS interop. Matches the FAQ section's purple/secondary palette. */
.lws-fsc-loader {
    position: relative;
    display: inline-block;
}
.lws-fsc-loader-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.lws-fsc-loader > button[aria-expanded="true"] .lws-fsc-loader-chevron {
    transform: rotate(180deg);
}
.lws-fsc-loader-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 49;
}
.lws-fsc-loader-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--cum-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lws-fsc-loader-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #2c333a;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.lws-fsc-loader-item:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--rz-primary, #7c3aed);
}
.lws-fsc-loader-item:focus-visible {
    outline: 2px solid var(--rz-primary, #7c3aed);
    outline-offset: -2px;
}

/* ── Load FSC FAQs picker dialog ──────────────────────────────────────────
   Multi-select list rendered inside JbfDialogShell. Each row has a checkbox
   plus an inline "Show answer" toggle so the user can preview the corporate
   FAQ HTML before committing it to their draft. */
.lws-fsc-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--cum-border, #e2e8f0);
    margin-bottom: 12px;
}
.lws-fsc-picker-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: #2c333a;
    user-select: none;
}
.lws-fsc-picker-selectall .rz-checkbox,
.lws-fsc-picker-row .rz-checkbox {
    cursor: pointer;
}
.lws-fsc-picker-count {
    font-size: 12px;
    color: var(--cum-muted-text, #718096);
}
.lws-fsc-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lws-fsc-picker-item {
    border: 1px solid var(--cum-border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.lws-fsc-picker-item.is-picked {
    border-color: var(--rz-primary, #7c3aed);
    background: rgba(124, 58, 237, 0.04);
}
.lws-fsc-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.lws-fsc-picker-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #2c333a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lws-fsc-picker-toggle {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--cum-border, #e2e8f0);
    border-radius: 5px;
    background: #fff;
    color: var(--cum-muted-text, #718096);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lws-fsc-picker-toggle:hover {
    border-color: var(--rz-primary, #7c3aed);
    color: var(--rz-primary, #7c3aed);
    background: #fff;
}
.lws-fsc-picker-answer {
    padding: 0 14px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #2c333a;
}
.lws-fsc-picker-answer img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Photo gallery bulk-add loading overlay
   ============================================================ */

.lws-photo-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    pointer-events: all;
}

.lws-photo-loading-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--cum-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}

.lws-photo-loading-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--cum-foreground, #0f172a);
}

/* ============================================================
   Preview-site password "Copied!" flash
   ============================================================ */

.lws-action-dropdown-item-hint--copied {
    color: #15803d;
    font-weight: 600;
    transition: color 0.15s ease;
}

/* ============================================================
   FSC Library Folders Tab: "Available in" UI

   Layout:
     ┌─────────────────────────────────────────────────────────────┐
     │ AVAILABLE IN  · helper text          [☐ Show everywhere]   │  ← header
     │                                                              │
     │ LOCAL WEBSITE  ☐ Heroes  ☐ Badges  ☐ Testimonials …         │  ← group rows
     │ EVENTS         ☐ Photo Gallery                               │
     │ OTHER          ☐ Rich Text Editor  ☐ Email Templates …       │
     └─────────────────────────────────────────────────────────────┘

   "Show everywhere" sits inline with the section header (same row as
   the label), saving vertical space. Each group is a single horizontal
   row: tiny gray group label on the left + flex-wrapped chips on the
   right. Chip labels use the SHORT form because the group header
   already provides the prefix context.
   ============================================================ */

/* Header row: label/hint on left, "Show everywhere" toggle on right */
.fsc-folder-context-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fsc-folder-context-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.fsc-folder-context-hint {
    font-size: 11.5px;
    color: var(--cum-foreground-muted, #5b84a2);
    line-height: 1.2;
}

/* "Show everywhere" pill toggle — compact, sits inline with the section
   header on the right side. Distinct accent so it reads as a global
   override, not just another option. */
.fsc-folder-context-everywhere-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--cum-card, #ffffff);
    border: 1.5px dashed var(--jbf-plum, #7d5b81);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--jbf-plum, #7d5b81);
    cursor: pointer;
    transition: background 0.15s ease, border-style 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

.fsc-folder-context-everywhere-toggle:hover {
    background: rgba(125, 91, 129, 0.06);
}

.fsc-folder-context-everywhere-toggle--on {
    border-style: solid;
    background: rgba(125, 91, 129, 0.14);
}

.fsc-folder-context-everywhere-toggle input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--jbf-plum, #7d5b81);
}

/* Sections wrapper — vertical stack of group rows. Dimmed when
   "Show everywhere" is on so admins see the per-surface picks are
   overridden. */
.fsc-folder-context-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 0.2s ease;
}

.fsc-folder-context-sections--inert {
    opacity: 0.4;
    pointer-events: none;
}

/* Single group row: tiny inline label on the left, chips flow to the
   right and wrap as needed. md-tier+ uses a 2-col grid so the label
   column stays aligned across rows. */
.fsc-folder-context-section {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: start;
    gap: 4px 12px;
    padding: 4px 0;
}

/* xs/sm tier (max-width 767.98px mirrors --bp-md). Stack label above
   chips on narrow screens — 110px label col would force chips into a
   crammed sliver. */
@media (max-width: 767.98px) {
    .fsc-folder-context-section {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.fsc-folder-context-section-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cum-muted-foreground, #808c91);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.fsc-folder-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* Compact pill chip — tight padding, no wasted height. The full
   group-aware label fits without truncation because we're using
   ShortLabel ("Heroes", not "Local Website - Heroes"). */
.fsc-folder-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--cum-card, #ffffff);
    border: 1px solid var(--cum-border, #e6e8e9);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cum-foreground, #021922);
    line-height: 1.2;
    user-select: none;
}

.fsc-folder-context-chip:hover {
    border-color: var(--jbf-plum, #7d5b81);
    background: rgba(125, 91, 129, 0.04);
}

.fsc-folder-context-chip--on {
    border-color: var(--jbf-plum, #7d5b81);
    background: rgba(125, 91, 129, 0.10);
    color: var(--jbf-plum, #7d5b81);
    font-weight: 600;
}

.fsc-folder-context-chip input[type="checkbox"] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--jbf-plum, #7d5b81);
}