/* Shop admin styles.
 *
 * Kept out of the :app bundle so the customer-facing storefront doesn't carry
 * admin-only CSS — the same split storefront.css uses.
 */

/* ── Theme editor: live preview panel ─────────────────────────────────────── */

/* The stage is a fixed-height window onto the real storefront. The frame is
   deliberately WIDER than the stage and scaled down, so the preview shows a
   desktop-shaped page rather than the mobile layout the storefront's own
   responsive CSS would (correctly) serve at panel width. */
/* 1100px is the narrowest width that still gets the storefront's DESKTOP layout
   (its breakpoint is 1024px), so the scale factor stays as large as possible and
   the preview text stays legible. The scale is a variable because the same stage
   is used in two places at different widths — the editor's 26rem side panel and
   the wizard's wider review column. Frame height is stage ÷ scale, so the scaled
   page fills the stage rather than leaving a band of dead grey beneath it. */
.sf-preview-stage {
  --preview-scale: 0.378; /* 416px panel ÷ 1100 */
  --preview-frame-height: 1355px; /* 512px stage ÷ scale */
  position: relative;
  height: 32rem;
  overflow: hidden;
}
.sf-preview-stage--wide {
  --preview-scale: 0.58; /* the wizard's wider column */
  --preview-frame-height: 885px;
}
.sf-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1100px;
  height: var(--preview-frame-height);
  border: 0;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
}

/* Phone: a real 390px viewport, so the storefront serves its genuine mobile
   layout (category chips, sticky basket) rather than a shrunken desktop one. */
.sf-preview-stage--phone {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}
.sf-preview-stage--phone .sf-preview-frame {
  position: relative;
  width: 390px;
  height: 1500px;
  transform: scale(0.62);
  border-radius: 1.25rem;
  box-shadow: 0 6px 24px -12px rgb(0 0 0 / 0.5);
}

/* ── Narrow screens: dock the preview to the bottom ───────────────────────── */
/* Above xl the panel sits beside the form and this all switches off. */
@media (max-width: 1279px) {
  .sf-preview-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    padding: 0 0.75rem 0.75rem;
    /* Collapsed: only the title bar shows, so feedback is always to hand
       without stealing the form's width. */
    max-height: 3.25rem;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .sf-preview-dock--open { max-height: 75vh; }
  .sf-preview-dock .sf-preview-stage { height: 22rem; }

  /* Reserve room so the Save button can't hide behind the collapsed dock. */
  .sf-preview-host { padding-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-preview-dock { transition: none; }
}

/* ── Theme editor: option tiles ───────────────────────────────────────────── */
/* The tiles are diagrams — their job is showing how options DIFFER at a glance,
   which a single preview can't do without clicking each in turn. They're drawn
   from these vars so they repaint with the shop's own colours as you edit
   (theme_preview_controller#tintSamples); the fallbacks only apply before the
   controller connects. */
.sf-sample {
  --sample-primary: var(--storefront-preview-primary, #1a1a2e);
  --sample-text: var(--storefront-preview-text, #ffffff);
  --sample-bg: var(--storefront-preview-bg, #f8f8f8);
  --sample-accent: var(--storefront-preview-accent, var(--sample-primary));
  --sample-radius: var(--storefront-preview-radius, 0.6rem);
}
.sf-sample-band { background: var(--sample-primary); }
.sf-sample-page { background: var(--sample-bg); }
.sf-sample-ink { background: var(--sample-text); opacity: 0.9; }
.sf-sample-ink-soft { background: var(--sample-text); opacity: 0.6; }
.sf-sample-accent { background: var(--sample-accent); }
.sf-sample-card { border-radius: min(var(--sample-radius), 0.375rem); }