/* Storefront controls stay neutral; the customer's palette lives in the iframe. */
.i-palette { --i: url('/assets/icons/palette.svg'); }
.appearance-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 25rem); gap: clamp(1rem, 2.4vw, 2.5rem); align-items: start; }
.appearance-controls { min-width: 0; padding: 0 clamp(1rem, 2vw, 1.75rem); }
.appearance-section { display: grid; min-width: 0; gap: .875rem; border: 0; padding: 1.5rem 0; margin: 0; }
.appearance-section + .appearance-section { border-top: 1px solid var(--line-200); }
.appearance-section legend { padding: 1.5rem 0 0; font-size: var(--text-lg); font-weight: 600; }
.appearance-section:first-of-type { padding-top: .75rem; }
.appearance-branding-section { gap: 1.125rem; }
.appearance-branding-pair { display: grid; gap: .625rem; min-width: 0; }
.appearance-branding-pair h3 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.appearance-branding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.appearance-branding-field { display: grid; align-content: start; gap: .375rem; min-width: 0; }
.appearance-branding-field label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; color: var(--ink-600); font-size: var(--text-sm); }
.appearance-branding-field label span { color: var(--ink-600); font-size: var(--text-xs); font-weight: 400; }
.appearance-branding-field input, .appearance-branding-field textarea { width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: var(--text-sm); line-height: 1.5; }
.appearance-branding-field textarea { resize: vertical; min-height: 5rem; max-height: 15rem; }
.appearance-branding-field .field-error { margin: 0; overflow-wrap: anywhere; }
.appearance-branding-field [aria-invalid="true"] { border-color: var(--danger-600, #b91c1c); }
.appearance-logo-row { display: flex; align-items: flex-start; gap: .875rem; min-width: 0; }
.appearance-logo-sample { display: grid; place-items: center; flex: 0 0 4rem; width: 4rem; height: 4rem; overflow: hidden; border-radius: .875rem; background: var(--appearance-local-accent, #B53A32); color: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .04); }
.appearance-logo-sample span { padding: .375rem; font-size: 1.125rem; font-weight: 700; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.appearance-logo-sample img { width: 100%; height: 100%; object-fit: cover; }
.appearance-logo-sample [hidden], .appearance-logo-controls [hidden] { display: none; }
.appearance-logo-controls { display: grid; gap: .5rem; min-width: 0; }
.appearance-logo-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; }
.appearance-logo-buttons .button, .appearance-logo-buttons .text-button { min-height: 44px; }
.appearance-logo-buttons .text-button { padding-inline: 0; font-size: var(--text-sm); }
.appearance-logo-controls .hint, .appearance-logo-controls .field-error { margin: 0; overflow-wrap: anywhere; }
.appearance-logo-text-field { display: grid; gap: .375rem; min-width: 0; }
.appearance-logo-text-field .appearance-branding-field { max-width: 15rem; }
.appearance-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.appearance-swatch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 5rem; padding: .625rem .25rem; border: 1px solid var(--line-200); border-radius: var(--radius); background: transparent; font-size: var(--text-sm); }
.appearance-swatch:hover { background: var(--paper-100); }
.appearance-swatch[aria-pressed="true"] { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.appearance-swatch-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--appearance-swatch); }
.appearance-custom-color { display: grid; gap: .5rem; }
.appearance-custom-color > label { font-size: var(--text-sm); font-weight: 600; }
.appearance-color-inputs { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .625rem; max-width: 17rem; }
.appearance-color-inputs input[type="color"] { min-width: 44px; width: 3rem; height: 44px; padding: .25rem; cursor: pointer; }
.appearance-color-inputs input[name="accentColor"] { min-width: 0; width: 100%; min-height: 44px; font-family: var(--mono); }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.appearance-option { position: relative; display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; min-height: 44px; padding: .625rem .5rem; border: 1px solid var(--line-200); border-radius: var(--radius); cursor: pointer; overflow-wrap: anywhere; text-align: center; font-size: var(--text-sm); }
.appearance-option:has(input:checked) { border-color: var(--ink-900); background: var(--paper-100); font-weight: 600; }
.appearance-option input { width: 1rem; height: 1rem; flex: none; accent-color: var(--ink-900); }
.appearance-option:has(input:focus-visible) { outline: 2px solid var(--ink-900); outline-offset: 3px; }
.appearance-section:disabled .appearance-option, .appearance-section:disabled .appearance-swatch { cursor: default; }
.appearance-readonly { display: flex; gap: .5rem; align-items: flex-start; padding: 1rem 0 0; color: var(--ink-600); font-size: var(--text-sm); }
.appearance-actions { display: grid; gap: .875rem; padding: 1.25rem 0; border-top: 1px solid var(--line-200); }
.appearance-save-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.appearance-actions > .text-button { justify-self: start; padding-inline: 0; }
.appearance-feedback { display: grid; gap: .5rem; padding: .875rem; margin-bottom: 1rem; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-50); font-size: var(--text-sm); }
.appearance-feedback .text-button { justify-self: start; padding-inline: 0; }
.appearance-preview { display: grid; gap: .75rem; min-width: 0; position: sticky; top: calc(var(--topbar-height, 64px) + 1.5rem); }
.appearance-preview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.appearance-preview-heading h2 { font-size: var(--text-lg); }
.appearance-live-dot { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink-600); font-size: var(--text-xs); }
.appearance-live-dot::before { content: ''; width: .375rem; height: .375rem; background: currentColor; border-radius: 50%; }
.appearance-live-dot[data-preview-status="error"] { color: var(--warning-600); }
.appearance-preview-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.appearance-preview-switch { display: inline-flex; flex-wrap: wrap; gap: .125rem; max-width: 100%; padding: .125rem; border: 1px solid var(--line-200); border-radius: .5rem; background: var(--paper-50); }
.appearance-preview-switch button { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 44px; min-width: 44px; padding: .375rem .625rem; border: 0; border-radius: .375rem; background: transparent; color: var(--ink-600); font: inherit; font-size: var(--text-sm); }
.appearance-preview-switch button:hover { background: var(--paper-100); }
.appearance-preview-switch button[aria-pressed="true"] { background: var(--ink-900); color: var(--paper-50); }
.appearance-preview-switch button:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.appearance-preview-switch .i-smartphone { --i: url('/assets/icons/smartphone.svg'); }
.appearance-preview-switch .i-monitor { --i: url('/assets/icons/monitor.svg'); }
.appearance-preview-tools [data-expand-preview] { align-self: center; margin-left: auto; min-width: 44px; min-height: 44px; }
.appearance-preview-tools .i-maximize-2 { --i: url('/assets/icons/maximize-2.svg'); }
.dialog[data-key="appearance-preview-expanded"] { --dialog-w: 1280px; }
.dialog[data-key="appearance-preview-expanded"] .dialog-body { padding: .75rem; }
.appearance-expanded-stage { position: relative; overflow: auto; }
.appearance-expanded-stage iframe { display: block; width: 100%; min-width: 1024px; height: min(75dvh, 760px); border: 0; background: white; }
.appearance-expanded-stage[data-device="phone"] iframe { min-width: 0; max-width: 390px; margin-inline: auto; }
.appearance-expanded-stage iframe[hidden], .appearance-expanded-status[hidden] { display: none; }
.appearance-expanded-status { display: grid; justify-items: center; align-content: center; gap: .75rem; min-height: 16rem; padding: 1rem; text-align: center; color: var(--ink-600); }
.appearance-phone { position: relative; width: 100%; max-width: 390px; margin-inline: auto; border: 1px solid var(--line-300); border-radius: 1.5rem; padding: .375rem; background: var(--paper-200); overflow: hidden; }
.appearance-phone iframe { display: block; width: 100%; height: min(44rem, 76dvh); min-height: 28rem; border: 0; border-radius: 1.125rem; background: white; }
.appearance-phone[data-device="desktop"] { max-width: 100%; height: calc(900px * var(--appearance-preview-scale, .35) + .75rem + 2px); border-radius: .5rem; }
.appearance-phone[data-device="desktop"] iframe { width: 1024px; height: 900px; min-height: 0; border-radius: 0; transform: scale(var(--appearance-preview-scale, .35)); transform-origin: top left; }
.appearance-preview-placeholder { position: absolute; inset: .375rem; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; border-radius: 1.125rem; color: var(--ink-600); background: var(--paper-50); text-align: center; font-size: var(--text-sm); line-height: 1.6; }
.appearance-preview-placeholder p { max-width: 26ch; overflow-wrap: anywhere; }
.appearance-preview-placeholder .button { min-width: 44px; min-height: 44px; }
@media (max-width: 899px) {
  .appearance-layout { grid-template-columns: minmax(0, 1fr); }
  .appearance-preview { position: static; }
  .appearance-phone { max-width: 390px; }
}
@media (max-width: 599px) {
  .appearance-branding-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .appearance-branding-field input, .appearance-branding-field textarea { font-size: max(1rem, var(--text-sm)); }
  .appearance-logo-row { gap: .625rem; }
  .appearance-logo-sample { flex-basis: 3.25rem; width: 3.25rem; height: 3.25rem; border-radius: .75rem; }
}
@media (max-width: 389px) {
  .appearance-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appearance-options { gap: .375rem; }
  .appearance-option { flex-direction: column; }
}
.appearance-cover-sample { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: .5rem; min-height: 120px; padding: 1.25rem; margin-block: .75rem; overflow: hidden; border: 1px solid var(--line-200); border-radius: .75rem; background: white; }
.appearance-cover-sample img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.appearance-cover-sample img[hidden] { display: none; }
.appearance-cover-sample::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 60%, white 100%); }
.appearance-cover-opacity { display: grid; gap: .5rem; margin-block: .75rem; color: var(--ink-900); font-size: var(--text-sm); }
.appearance-cover-opacity > span { display: flex; justify-content: space-between; gap: 1rem; }
.appearance-cover-opacity output { font-variant-numeric: tabular-nums; }
.appearance-cover-opacity input[type="range"] { width: 100%; min-height: 44px; padding: 0; border: 0; accent-color: var(--ink-900); cursor: pointer; }
.appearance-cover-sample strong { color: #222; font-size: var(--text-lg); overflow-wrap: anywhere; }
.appearance-cover-sample span { color: #454545; font-size: var(--text-sm); }
.appearance-cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.appearance-cover-position { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr); align-items: center; gap: 1rem; margin-block: 1rem; font-size: var(--text-sm); }
.appearance-cover-position select { width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--line-300); border-radius: var(--radius); background: white; color: var(--ink-900); font: inherit; }

/* Opacity is applied once, directly to the photo. */
.appearance-cover-sample.has-cover-photo { background: white; }
.appearance-cover-sample :is(strong, span) { width: fit-content; max-width: 100%; padding: 3px 7px; background: transparent; text-shadow: 0 1px 2px rgb(255 255 255 / 85%), 0 0 6px rgb(255 255 255 / 45%); }