/* Builder-only layout rules. Loaded after the shared storefront styles. */
.saas-template-builder,
.builder-chooser,
.builder-share-dialog {
  --builder-paper: #fbf6ee;
  --builder-accent: #765050;
  --builder-surface: #f5e9e1;
  --builder-ink: #342a26;
  --builder-muted: #6b5d52;
  --builder-border: #dfd0be;
  color: var(--builder-ink);
  font-family: 'Inter Tight', sans-serif;
}
.saas-template-builder { background: var(--builder-surface); }
.saas-template-builder .saas-builder-side { background: var(--builder-paper); border-right: 1px solid var(--builder-border); }
.saas-template-builder .saas-builder-preview { background: var(--builder-surface); }
.saas-template-builder .saas-template-switch { border-color: var(--builder-border); gap: 16px; }
.saas-template-builder .saas-template-switch > div { min-width: 0; }
.saas-template-builder .saas-template-switch span { color: var(--builder-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.saas-template-builder .saas-template-switch strong { color: var(--builder-ink); margin-top: 5px; font: 500 28px/1.15 'Cormorant Garamond', serif; overflow-wrap: anywhere; }
.saas-template-builder :is(.saas-template-switch, .builder-inline-row) button { flex-shrink: 0; color: var(--builder-accent); border-color: var(--builder-border); border-radius: 6px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.saas-template-builder .saas-builder-tabs { border-color: var(--builder-border); }
.saas-template-builder .saas-builder-tabs button { color: var(--builder-muted); font-weight: 500; }
.saas-template-builder .saas-builder-tabs button.active { color: var(--builder-accent); border-color: var(--builder-accent); }
.saas-template-builder .builder-panel { background: none; border: 0; border-radius: 0; box-shadow: none; }
.saas-template-builder .builder-panel-title { border-color: var(--builder-border); padding-bottom: 12px; }
.saas-template-builder .builder-panel-title h3 { color: var(--builder-ink); font: 500 28px/1.15 'Cormorant Garamond', serif; }
.saas-template-builder .builder-panel > p { color: var(--builder-muted); font-size: 14px; line-height: 1.65; }
.saas-template-builder .builder-fields { gap: 18px; margin-top: 20px; }
.saas-template-builder :is(.builder-field > span, .builder-photo-field > label, .builder-toggle span) { color: var(--builder-ink); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.saas-template-builder .builder-field :is(input, textarea, select) { background: var(--builder-paper); border-color: var(--builder-border); color: var(--builder-ink); border-radius: 6px; font-size: 14px; }
.saas-template-builder .builder-field :is(input, textarea)::placeholder { color: #7f7063; opacity: 1; }
.saas-template-builder .builder-field :is(input, textarea, select):focus { border-color: var(--builder-accent); box-shadow: 0 0 0 3px var(--builder-surface); }
.saas-template-builder .builder-toggle { padding-block: 8px; border-color: var(--builder-border); }
.saas-template-builder .builder-toggle input { accent-color: var(--builder-accent); }
.saas-template-builder .builder-repeat { background: var(--builder-paper); border: 1px solid var(--builder-border); border-radius: 8px; padding: 16px; }
.saas-template-builder .builder-repeat-head strong { font-size: 14px; color: var(--builder-ink); }
.saas-template-builder :is(.builder-photo-controls, .builder-repeat-head, .builder-repeat) button,
.saas-template-builder .builder-add-btn { color: var(--builder-accent); background: var(--builder-paper); border: 1px solid var(--builder-border); border-radius: 6px; padding: 10px 12px; font: 500 13px/1.4 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.saas-template-builder .builder-add-btn { width: 100%; border-style: dashed; background: var(--builder-surface); }
.saas-template-builder .builder-icon-option.active { border-color: var(--builder-accent); background: var(--builder-surface); }
.saas-template-builder .builder-upload-placeholder { color: var(--builder-muted); background: var(--builder-surface); border-color: var(--builder-border); }
.saas-template-builder .saas-builder-topbar { background: var(--builder-paper); border-color: var(--builder-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.saas-template-builder .saas-builder-topbar > .builder-save-status { padding: 0; background: none; border: 0; border-radius: 0; }
.saas-template-builder .builder-save-status strong { color: var(--builder-ink); font-weight: 600; }
.saas-template-builder .builder-save-status small { color: var(--builder-muted); font-size: 12px; }
.saas-template-builder .builder-status-dot { background: var(--builder-accent); box-shadow: none; }
.saas-template-builder .saas-builder-actions button { background: var(--builder-paper); color: var(--builder-accent); border-color: var(--builder-border); border-radius: 6px; box-shadow: none; font-weight: 600; }
.saas-template-builder .saas-builder-actions button:is(:hover, .primary) { background: var(--builder-surface); color: var(--builder-accent); border-color: var(--builder-accent); transform: none; box-shadow: none; }
.saas-template-builder .saas-builder-actions button.publish,
.saas-template-builder .saas-publish-bar button { background: var(--builder-accent); color: var(--builder-paper); border-color: var(--builder-accent); box-shadow: none; border-radius: 6px; text-transform: none; letter-spacing: 0; }
.saas-template-builder .saas-builder-actions button.publish:hover:not(:disabled),
.saas-template-builder .saas-publish-bar button:hover:not(:disabled) { background: #4a3c31; border-color: #4a3c31; box-shadow: none; }
.saas-template-builder button:disabled { cursor: not-allowed; opacity: .55; }
.saas-template-builder .saas-preview-label { color: var(--builder-muted); background: none; border: 0; padding-block: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.saas-template-builder .saas-preview-label::before { display: none; }
.saas-template-builder .saas-preview-workspace { background: none; perspective: none !important; }
.saas-template-builder .saas-preview-workspace::before { display: none; }
.saas-template-builder .builder-phone-emu .phone-emu-frame { filter: drop-shadow(0 10px 20px rgba(41,35,41,.13)) !important; }
.saas-template-builder .saas-preview-mode-bar { grid-template-columns: auto minmax(0, 1fr) auto; color: var(--builder-muted); }
.saas-template-builder .saas-preview-mode-bar > span { font-size: 13px; letter-spacing: 0; text-transform: none; }
.saas-template-builder .saas-preview-mode-bar > button { border-color: var(--builder-border); border-radius: 6px; color: var(--builder-accent); background: var(--builder-paper); letter-spacing: 0; text-transform: none; }
.saas-template-builder .saas-publish-bar { background: var(--builder-paper); border-color: var(--builder-border); box-shadow: none; }
.saas-template-builder .saas-publish-template strong { color: var(--builder-ink); }
.saas-template-builder .saas-publish-template span { color: var(--builder-muted); }
.builder-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: #fbf6f1; color: #6b5d52; font: 400 15px/1.5 'Inter Tight', sans-serif; text-align: center; pointer-events: none; }
.builder-load-state { min-height: 60vh; padding: clamp(32px, 7vh, 80px) 20px; background: #fbf6ee; color: #342a26; }
.builder-load-state .wrap { width: 100%; max-width: 720px; margin-inline: auto; padding: 0; }
.builder-load-state h1 { font: 500 42px/1.1 'Cormorant Garamond', serif; }
.builder-recovery-notice { max-width: 560px; }
.builder-recovery-notice h2 { margin: 20px 0 12px; font: 500 30px/1.15 'Cormorant Garamond', serif; }
.builder-recovery-notice p { margin: 0 0 22px; color: #6b5d52; font: 400 16px/1.65 'Inter Tight', sans-serif; }
.builder-recovery-notice .btn { min-height: 48px; padding: 12px 18px; border: 1px solid #765050; border-radius: 6px; background: #fbf6ee; color: #765050; font: 600 14px/1.4 'Inter Tight', sans-serif; }
.builder-recovery-notice .btn-primary { background: #765050; color: #fbf6ee; }
.builder-recovery-notice .btn:focus-visible { outline: 3px solid #342a26; outline-offset: 3px; }
.builder-ui-preview-note { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #dfd0be; border-radius: 6px; background: #f5ebe0; color: #2a2520; font: 400 13px/1.5 'Inter Tight', sans-serif; text-align: left; }
.builder-ui-preview-note.is-compact { flex-basis: 100%; order: 3; margin: 0; padding: 8px 10px; font-size: 12px; }
.saas-template-builder .builder-ui-preview-upload-note { color: #6b5d52; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.saas-template-builder .saas-builder-side,
.saas-template-builder .saas-builder-preview,
.saas-template-builder .builder-panel,
.saas-template-builder .builder-fields,
.saas-template-builder .builder-field,
.saas-template-builder .builder-photo-controls,
.saas-template-builder .builder-repeat-head > :first-child {
  min-width: 0;
}

.saas-template-builder .saas-builder-topbar {
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
}

.saas-template-builder .builder-save-status {
  min-width: 0;
  max-width: 100%;
}

.saas-template-builder .builder-save-status small {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.saas-template-builder .saas-builder-actions {
  min-width: 0;
  gap: 8px;
}

.saas-template-builder .saas-builder-actions button,
.saas-template-builder .saas-template-switch button,
.saas-template-builder .saas-builder-form button,
.saas-template-builder .saas-builder-tabs button,
.saas-template-builder .saas-preview-mode-bar button {
  min-height: 44px;
  touch-action: manipulation;
}

.saas-template-builder .saas-builder-actions button {
  padding-inline: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

.saas-template-builder :is(button, input, textarea, select):focus-visible,
.builder-share-dialog :is(button, input, a):focus-visible {
  outline: 3px solid #2a2520;
  outline-offset: 3px;
}

.saas-template-builder .builder-field :is(input, textarea, select) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}

.saas-template-builder .builder-field :is(input:not([type="file"]), select) {
  min-height: 44px;
}

.saas-template-builder .builder-field textarea {
  resize: vertical;
}

.saas-template-builder .builder-photo-field > label {
  color: #2a2520;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.saas-template-builder .builder-toggle {
  min-height: 48px;
  cursor: pointer;
  line-height: 1.4;
}

.saas-template-builder .builder-toggle input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.saas-template-builder .builder-repeat-head > :first-child,
.saas-template-builder .builder-inline-row strong {
  overflow-wrap: anywhere;
}

.saas-template-builder .builder-repeat-head button,
.saas-template-builder .builder-inline-row button {
  flex-shrink: 0;
}

.builder-section-picker { display: none; }

/* Keep the current draft preview beside the next editing step. This footer is
   outside the scrolling form on desktop and pinned above mobile safe areas. */
.saas-template-builder .saas-builder-form { flex: 1 1 auto; scroll-margin-top: 90px; }
.saas-template-builder .builder-progress-actions { flex: 0 0 auto; padding: 12px 20px 16px; border-top: 1px solid var(--builder-border); background: var(--builder-paper); }
.saas-template-builder .builder-progress-actions > p { margin: 0 0 8px; color: var(--builder-muted); font: 500 12px/1.4 'Inter Tight', sans-serif; }
.saas-template-builder .builder-progress-buttons { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.saas-template-builder .builder-progress-buttons button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--builder-accent); border-radius: 6px; color: var(--builder-accent); background: var(--builder-paper); font: 600 14px/1.3 'Inter Tight', sans-serif; cursor: pointer; touch-action: manipulation; }
.saas-template-builder .builder-progress-buttons svg { flex-shrink: 0; }
.saas-template-builder .builder-progress-buttons .builder-next-section { color: var(--builder-paper); background: var(--builder-accent); }
.saas-template-builder .builder-next-section span { font-size: 19px; line-height: 1; }
.saas-template-builder .builder-preview-so-far:hover:not(:disabled) { background: var(--builder-surface); }
.saas-template-builder .builder-next-section:hover:not(:disabled) { background: #614141; }
.saas-template-builder .builder-progress-actions.is-last-section .builder-progress-buttons { grid-template-columns: minmax(0, 1fr); }

.builder-share-overlay { overflow-y: auto; }
.builder-share-dialog {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.builder-share-dialog button { min-height: 44px; }
.builder-share-dialog .builder-share-close { width: 44px !important; height: 44px !important; }
.builder-share-dialog .builder-share-link { min-width: 0; }
.builder-share-dialog .builder-share-link input { min-width: 0; width: 100%; box-sizing: border-box; }
.builder-share-dialog .builder-share-dashboard { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 821px) {
  .saas-template-builder {
    min-height: 520px;
    height: calc(100dvh - 77px) !important;
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  }
  .saas-template-builder.is-previewing { grid-template-columns: 1fr; }
  .saas-template-builder .saas-builder-form { padding: 22px 20px 40px; }
  .saas-template-builder .saas-builder-tabs { padding-inline: 10px; }
  .saas-template-builder .saas-builder-tabs button {
    min-width: 0;
    padding-inline: 12px;
    letter-spacing: .02em;
    font-size: 12px;
    text-transform: none;
  }
  .saas-template-builder .saas-preview-workspace { overflow: auto !important; }
  .saas-template-builder .builder-phone-emu {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    min-width: 0;
    container-type: size;
    align-items: start;
  }
  .saas-template-builder .builder-phone-emu .phone-emu-frame {
    width: min(360px, 100%, calc((100dvh - 280px) * 390 / 844)) !important;
    width: min(360px, 100cqw, calc(100cqh * 390 / 844)) !important;
    height: auto !important;
    aspect-ratio: 390 / 844 !important;
    max-height: 100% !important;
    align-self: start;
  }
  .saas-template-builder .builder-phone-emu .phone-emu-bezel {
    padding: 3px !important;
    border-radius: 34px !important;
    background: #34302d !important;
    box-shadow: inset 0 0 0 1px #827b72 !important;
  }
  .saas-template-builder .builder-phone-emu .phone-emu-screen {
    inset: 3px !important;
    border-radius: 31px !important;
  }
  .saas-template-builder .builder-phone-emu .phone-emu-island {
    top: 10px !important;
    width: 62px !important;
    height: 16px !important;
    background: #151413 !important;
    box-shadow: none !important;
  }
  .saas-template-builder .builder-phone-emu :is(.phone-emu-island-dot, .phone-emu-island-bar, .phone-emu-btn) {
    display: none !important;
  }
  .saas-template-builder .saas-publish-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-inline: 18px; }
  .saas-template-builder .saas-publish-template { min-width: 0; }
}

@media (max-width: 820px) {
  .saas-template-builder:has(.builder-ui-preview-note) { padding-bottom: calc(184px + env(safe-area-inset-bottom, 0px)) !important; }
  .saas-template-builder:has(.builder-ui-preview-note) .builder-phone-emu { height: max(240px, calc(100svh - 286px)) !important; }
  .saas-template-builder .builder-ui-preview-note.is-compact { flex-basis: auto; padding: 6px 8px; }
  .saas-template-builder,
  .saas-template-builder:not(.is-previewing) {
    min-height: calc(100svh - 59px) !important;
    padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  }
  .saas-template-builder:not(.is-previewing) .saas-builder-side {
    min-height: 0 !important;
  }
  /* The action bar is inside this main element. Hiding the main element also
     hides fixed descendants, so hide only its live-preview content in edit mode. */
  .saas-template-builder:not(.is-previewing) .saas-builder-preview {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none;
  }
  .saas-template-builder:not(.is-previewing) .saas-builder-preview > :not(.saas-builder-topbar) { display: none !important; }
  .saas-template-builder .saas-builder-topbar {
    position: fixed !important;
    inset: auto 0 0;
    z-index: 80;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(41, 35, 41, .16);
    background: #fbf6f1;
    box-shadow: 0 -8px 24px rgba(41, 35, 41, .08);
  }
  .saas-template-builder .saas-builder-topbar .builder-save-status {
    display: flex !important;
    width: auto;
    min-width: 0 !important;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .saas-template-builder .builder-save-status strong { display: none; }
  .saas-template-builder .builder-save-status small { font-size: 12px; max-height: 3.5em; overflow: auto; }
  .saas-template-builder .builder-status-dot { flex: 0 0 6px; width: 6px; height: 6px; box-shadow: none; }
  .saas-template-builder .saas-builder-actions,
  .saas-template-builder:not(.is-previewing) .saas-builder-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0;
    box-shadow: none;
    background: none;
    backdrop-filter: none;
  }
  .saas-template-builder .saas-builder-actions button,
  .saas-template-builder:not(.is-previewing) .saas-builder-actions button {
    min-height: 46px !important;
    padding: 0 6px !important;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 10px;
    overflow-wrap: normal;
  }
  .saas-template-builder .mobile-edit-action { display: none !important; }
  .saas-template-builder .desktop-reset-action { display: inline-block !important; }
  .saas-template-builder .saas-builder-tabs { display: none; }
  .saas-template-builder .builder-section-picker {
    display: grid;
    gap: 7px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(41, 35, 41, .1);
    color: #6b5d52;
    font: 600 13px/1.4 var(--font-sans);
  }
  .saas-template-builder .builder-section-picker select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(41, 35, 41, .24);
    border-radius: 8px;
    background: #fbf6f1;
    color: #2a2520;
    font: 500 16px/1.4 var(--font-sans);
  }
  .saas-template-builder:not(.is-previewing) .saas-builder-form { padding: 18px 12px 24px !important; }
  .saas-template-builder .builder-panel { padding: 16px; }
  .saas-template-builder .builder-field :is(input, textarea, select) { font-size: 16px; }
  .saas-template-builder .builder-field > span,
  .saas-template-builder .builder-photo-field > label { font-size: 13px; line-height: 1.4; }
  .saas-template-builder .builder-two-col { grid-template-columns: minmax(0, 1fr); }
  .saas-template-builder .builder-repeat { padding: 12px; }
  .saas-template-builder.is-previewing .saas-builder-preview { min-height: 0 !important; display: block; padding: 12px !important; }
  .saas-template-builder .saas-preview-mode-bar { margin: 0 !important; padding: 0 0 12px; }
  .saas-template-builder .saas-preview-mode-bar > button,
  .saas-template-builder .saas-preview-mode-bar > select { display: none; }
  .saas-template-builder .saas-preview-mode-bar span { font-size: 12px; letter-spacing: 0; text-transform: none; color: #6b5d52; }
  .saas-template-builder .saas-preview-label { margin: 0 0 8px; }
  .saas-template-builder .saas-preview-workspace { height: auto !important; padding: 0 !important; overflow: visible !important; }
  .saas-template-builder .builder-phone-emu {
    height: max(280px, calc(100svh - 240px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .saas-template-builder .saas-publish-bar { display: none; }
  .builder-share-dialog { padding: 56px 20px 20px !important; }
  .builder-share-dialog .builder-share-link { flex-direction: column; }
  .builder-share-dialog .builder-share-link input { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .saas-template-builder *, .builder-share-dialog * { scroll-behavior: auto !important; transition: none !important; }
}

.builder-chooser { --chooser-phone-width: 132px; --chooser-phone-height: 281.12px; --chooser-phone-scale: .32; --chooser-phone-radius: 18px; min-height: 70vh; padding-block: 48px 64px; background: var(--builder-paper); }
.builder-chooser .wrap { max-width: 1160px; }
.builder-chooser-heading { max-width: 650px; margin: 0 auto 28px; text-align: center; }
.builder-chooser-heading h1 { margin: 0 0 14px; font: 500 clamp(34px, 5vw, 48px)/1.1 'Cormorant Garamond', serif; color: var(--builder-ink); }
.builder-chooser-heading .muted { font-size: 16px; line-height: 1.6; color: var(--builder-muted); }
.builder-chooser-note { color: var(--builder-muted); font-size: 13px; line-height: 1.6; margin-top: 12px; }
.builder-chooser .template-category-wrap { margin: 0; max-width: 100%; }
.builder-chooser .template-category-scroll { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 4px; max-width: 100%; overflow: visible; white-space: normal; }
.builder-chooser .template-category-pill { min-height: 44px; padding: 10px 18px; border: 1px solid var(--builder-border); border-radius: 999px; background: var(--builder-paper); color: var(--builder-ink); box-shadow: none; font: 500 14px/1.4 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; touch-action: manipulation; }
.builder-chooser .template-category-pill:hover:not(.is-active) { background: var(--builder-surface); border-color: var(--builder-accent); }
.builder-chooser .template-category-pill.is-active { background: var(--builder-accent); border-color: var(--builder-accent); color: var(--builder-paper); }
.builder-chooser .template-category-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin-top: 12px; color: var(--builder-muted); font: 400 12px/1.6 'Inter Tight', sans-serif; letter-spacing: 0; text-align: center; }
.builder-chooser .template-category-note span::before { content: '·'; margin-right: 8px; }
.builder-chooser-count { margin: 24px 0 18px; color: var(--builder-muted); font-size: 13px; }
.builder-chooser .showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.builder-chooser .showcase-card { display: grid !important; grid-template-columns: var(--chooser-phone-width) minmax(0, 1fr) !important; gap: 20px !important; align-items: center; padding: 22px !important; background: var(--builder-paper); border: 1px solid var(--builder-border); border-radius: 12px; box-shadow: none; cursor: default; transform: none !important; }
.builder-chooser .showcase-card::before,
.builder-chooser .showcase-card::after,
.builder-chooser .sc-phone-stage::before { display: none; }
.builder-chooser .showcase-card .sc-phone-stage { width: var(--chooser-phone-width) !important; height: var(--chooser-phone-height) !important; min-height: 0 !important; padding: 0 !important; overflow: visible; background: none !important; perspective: none; }
.builder-chooser .sc-phone-stage .tphone { width: var(--chooser-phone-width) !important; max-width: none !important; height: var(--chooser-phone-height) !important; aspect-ratio: auto !important; flex: 0 0 var(--chooser-phone-width); animation: none !important; transform: none !important; will-change: auto; filter: none !important; }
.builder-chooser :is(.showcase-card, .tphone, .tphone-screen, .tphone-bezel, .tphone-shadow) { animation: none !important; transition: none !important; will-change: auto; }
.builder-chooser .showcase-card .sc-phone-stage .tphone-shadow,
.builder-chooser .tphone-btn,
.builder-chooser .tphone-screen::after { display: none !important; }
.builder-chooser .showcase-card .sc-phone-stage .tphone-bezel { inset: 0 !important; padding: 0 !important; border-radius: var(--chooser-phone-radius) !important; background: #353331 !important; box-shadow: 0 0 0 .5px #9d978e !important; }
.builder-chooser .showcase-card .sc-phone-stage .tphone-screen { inset: 2px !important; border-radius: calc(var(--chooser-phone-radius) - 2px) !important; box-shadow: none !important; }
/* Each screen is the 400 × 866 invitation viewport, plus a 2px frame. */
.builder-chooser .sc-phone-stage .tphone-live-frame { width: 400px !important; height: 866px !important; top: 0 !important; left: 0 !important; transform: scale(var(--chooser-phone-scale)) !important; transform-origin: top left; }
.builder-chooser-card-copy { min-width: 0; display: grid; gap: 12px; }
.builder-chooser .sc-title { font: 500 28px/1.1 'Cormorant Garamond', serif !important; color: var(--builder-ink); margin: 0; }
.builder-chooser .sc-desc { min-height: 0; margin: 0; color: var(--builder-muted); font-size: 14px; line-height: 1.6; }
.builder-chooser .sc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0; }
.builder-chooser .sc-price-now { font-size: 22px !important; font-weight: 600; color: var(--builder-ink); }
.builder-chooser-price-note { font-size: 12px; color: var(--builder-muted); }
.builder-chooser .sc-cta-btn,
.builder-chooser-demo { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px !important; border: 1px solid var(--builder-accent); border-radius: 6px; box-shadow: none; font: 500 14px/1.4 'Inter Tight', sans-serif !important; letter-spacing: 0; text-transform: none; text-decoration: none; }
.builder-chooser .sc-cta-btn { background: var(--builder-accent); color: var(--builder-paper); }
.builder-chooser-demo { background: var(--builder-paper); color: var(--builder-accent); border-color: var(--builder-border); }
.builder-chooser :is(button, a):focus-visible { outline: 3px solid var(--builder-accent); outline-offset: 3px; }

@media (max-width: 960px) {
  .builder-chooser .showcase-grid { grid-template-columns: minmax(0, 1fr); max-width: 660px; margin-inline: auto; }
}
@media (max-width: 820px) {
  .saas-template-builder .builder-section-picker { background: var(--builder-paper); color: var(--builder-muted); border-color: var(--builder-border); }
  .saas-template-builder .builder-section-picker select { background: var(--builder-paper); color: var(--builder-ink); border-color: var(--builder-border); }
  .saas-template-builder .saas-builder-topbar { box-shadow: 0 -4px 16px rgba(41,35,41,.06); }
  .saas-template-builder .saas-builder-actions button { border-radius: 6px; }
  .saas-template-builder .saas-preview-mode-bar { display: block; }
  .saas-template-builder .saas-preview-mode-bar .builder-preview-design { display: none; }
  .saas-template-builder:not(.is-previewing),
  .saas-template-builder:not(.is-previewing) .saas-builder-side { background: var(--builder-paper) !important; }
  .saas-template-builder:not(.is-previewing) { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
  .saas-template-builder:not(.is-previewing) .saas-builder-side { min-height: 0 !important; }
  .saas-template-builder:not(.is-previewing) .saas-builder-topbar { position: static !important; inset: auto; padding: 16px 16px 20px !important; background: var(--builder-paper); box-shadow: none; }
  .saas-template-builder:not(.is-previewing) .saas-builder-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .saas-template-builder:not(.is-previewing) .saas-builder-actions .primary { display: none; }
  .saas-template-builder .builder-progress-actions { position: fixed; inset: auto 0 0; z-index: 85; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(52,42,38,.06); }
  .saas-template-builder .builder-progress-buttons { gap: 10px; }
  .saas-template-builder .builder-progress-buttons button { min-height: 48px; font-size: 14px; padding-inline: 8px; }
  .saas-template-builder .saas-builder-topbar { background: var(--builder-paper); }
  .saas-template-builder .saas-preview-mode-bar span { color: var(--builder-muted); }
}
@media (max-width: 560px) {
  .builder-chooser { --chooser-phone-width: 112px; --chooser-phone-height: 237.82px; --chooser-phone-scale: .27; --chooser-phone-radius: 16px; padding-block: 32px 48px; }
  .builder-chooser .wrap { padding-inline: 16px; }
  .builder-chooser-heading { text-align: left; margin-bottom: 24px; }
  .builder-chooser .template-category-scroll,
  .builder-chooser .template-category-note { justify-content: flex-start; text-align: left; }
  .builder-chooser .showcase-card { padding: 16px !important; gap: 16px !important; }
  .builder-chooser .sc-title { font-size: 25px !important; }
  .builder-chooser-card-copy { gap: 10px; }
  .builder-chooser .sc-desc { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 380px) {
  .builder-chooser { --chooser-phone-width: 96px; --chooser-phone-height: 203.18px; --chooser-phone-scale: .23; --chooser-phone-radius: 14px; }
  .builder-chooser .showcase-card { padding: 12px !important; gap: 12px !important; }
  .builder-chooser .sc-title { font-size: 23px !important; }
  .builder-chooser .sc-price-now { font-size: 20px !important; }
}

/* A separate guest preview rises over the editor; the form keeps its place. */
.saas-template-builder .builder-preview-sheet {
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  width: min(680px, calc(100% - 48px));
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--builder-border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--builder-paper);
  color: var(--builder-ink);
  box-shadow: 0 -12px 60px rgba(52, 42, 38, .2);
  overscroll-behavior: contain;
}
.saas-template-builder .builder-preview-sheet[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: builder-sheet-rise 280ms cubic-bezier(.2, .75, .25, 1) both;
}
.builder-preview-sheet::backdrop {
  background: rgba(43, 33, 30, .38);
  animation: builder-sheet-dim 220ms ease-out both;
}
.builder-preview-sheet-header { position: relative; z-index: 1; border-bottom: 1px solid #dfd0be; background: #fbf6ee; }
.builder-preview-sheet-handle { position: absolute; top: 4px; left: 50%; display: block; width: 32px; height: 3px; margin: 0; border-radius: 4px; background: #c8b3a5; transform: translateX(-50%); }
.builder-preview-sheet-toolbar { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px 16px; }
.builder-preview-sheet-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid #dfd0be; border-radius: 7px; background: transparent; color: #765050; font: 600 14px/1.35 'Inter Tight', sans-serif; cursor: pointer; touch-action: manipulation; }
.builder-preview-sheet-toolbar button:hover { background: #f5e9e1; border-color: #c8b3a5; }
.builder-preview-sheet-toolbar button:focus-visible { outline: 3px solid #765050; outline-offset: 3px; }
.builder-preview-sheet-heading { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.builder-preview-sheet-heading > span { display: none; }
.builder-preview-sheet-heading h2 { margin: 0; color: #342a26; font: 500 22px/1.15 'Cormorant Garamond', serif; }
.builder-preview-sheet-toolbar .builder-preview-sheet-close { flex: 0 0 44px; width: 44px; padding: 0; border-color: transparent; font-size: 25px; font-weight: 400; }
.builder-preview-sheet-body { min-width: 0; min-height: 0; overflow: hidden; padding: 18px 24px max(18px, env(safe-area-inset-bottom, 0px)); background: #f5e9e1; }
.saas-template-builder .builder-preview-sheet .builder-phone-emu { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; container-type: size; }
.saas-template-builder .builder-preview-sheet .phone-emu-frame { width: min(390px, 100cqw, calc(100cqh * 390 / 844)) !important; height: auto !important; aspect-ratio: 390 / 844 !important; align-self: center !important; cursor: auto !important; }
.saas-template-builder .builder-preview-sheet :is(.phone-emu-island, .phone-emu-btn) { display: none !important; }
@keyframes builder-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes builder-sheet-dim { from { background: rgba(43,33,30,0); } to { background: rgba(43,33,30,.38); } }
@media (max-width: 820px) {
  .saas-template-builder .builder-preview-sheet { width: 100%; height: calc(100dvh - 8px); max-height: calc(100dvh - 8px); border-inline: 0; border-radius: 14px 14px 0 0; }
  .builder-preview-sheet-toolbar { gap: 6px; padding: 4px 8px; }
  .builder-preview-sheet-toolbar button { padding-inline: 8px; font-size: 13px; }
  .builder-preview-sheet-toolbar .builder-return-action { border-color: transparent; }
  .builder-preview-sheet-heading h2 { font-size: 20px; line-height: 1.1; }
  .builder-preview-sheet-body { padding: 0 0 env(safe-area-inset-bottom, 0px); background: #fbf6ee; }
  .saas-template-builder .builder-preview-sheet .phone-emu-frame { width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: auto !important; filter: none !important; }
  .saas-template-builder .builder-preview-sheet .phone-emu-bezel { inset: 0 !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .saas-template-builder .builder-preview-sheet .phone-emu-screen { inset: 0 !important; border-radius: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .saas-template-builder .builder-preview-sheet[open], .builder-preview-sheet::backdrop { animation: none !important; }
}