.shop-preview {
  --sp-ink: #ddd6b9; --sp-muted: #aaa48e; --sp-border: #68644e; --sp-accent: #dfc58f;
  container-type: inline-size; width: 100%; min-width: 0; color: var(--sp-ink); background: #181b15;
  border: 1px solid var(--sp-border); border-radius: 2px; overflow: hidden; font: 13px/1.4 monospace; color-scheme: dark;
}
.shop-preview, .shop-preview *, .shop-preview *::before, .shop-preview *::after { box-sizing: border-box; }
.shop-preview[hidden], .shop-preview [hidden] { display: none !important; }
.shop-preview button { font: inherit; color: inherit; text-transform: none; letter-spacing: normal; cursor: pointer; border: 1px solid var(--sp-border); border-radius: 2px; background: #272b23; padding: 7px 10px; min-height: 40px; box-shadow: none; }
.shop-preview button:hover { background: #35372a; border-color: #a39a79; }
.shop-preview button:focus-visible, .shop-preview canvas:focus-visible, .shop-preview input:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: -3px; }
.shop-preview button[aria-pressed="true"] { border-color: var(--sp-accent); background: #dfc58f18; color: #eadcba; }
.shop-preview .sp-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--sp-border); }
.shop-preview h3 { flex: 1; min-width: 0; margin: 0; font: 26px/1 'Street Terminal', monospace; overflow-wrap: anywhere; }
.shop-preview .sp-close { flex-shrink: 0; width: 40px; padding: 0; font-size: 24px; line-height: 1; }
.shop-preview .sp-badge { display: inline-block; flex-shrink: 0; border: 1px solid #dfc58f60; border-radius: 2px; color: var(--sp-accent); font-size: 10px; padding: 2px 6px; }
.shop-preview .sp-content { display: grid; grid-template-columns: minmax(0, 1fr); }
.shop-preview .sp-canvas-wrap { position: relative; height: clamp(150px, 27dvh, 240px); min-width: 0; background: radial-gradient(ellipse at 50% 40%, #424333, #272b23 60%, #181b15); }
.shop-preview canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.shop-preview .sp-fallback { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; color: var(--sp-muted); }
.shop-preview .sp-controls { min-width: 0; padding: 12px; }
.shop-preview .sp-options-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--sp-muted); font: 20px/1 'Street Terminal', monospace; }
.shop-preview .sp-soon { color: var(--sp-muted); border-color: var(--sp-border); }
.shop-preview .sp-choices { display: grid; gap: 12px; }
.shop-preview .sp-save { width: 100%; margin-top: 16px; background: #dfc58f; color: #181b15; }
.shop-preview .sp-save:disabled { opacity: .55; cursor: default; }
.shop-preview fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.shop-preview legend { padding: 0; margin-bottom: 6px; font: 20px/1 'Street Terminal', monospace; }
.shop-preview .sp-options, .shop-preview .sp-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-preview .sp-options button { font-size: 11px; }
.shop-preview .sp-options .sp-color { display: grid; place-items: center; width: 40px; padding: 6px; }
.shop-preview .sp-swatch { display: block; width: 24px; height: 24px; border-radius: 1px; box-shadow: inset 0 0 0 1px #ffffff50; }
.shop-preview .sp-toggle { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--sp-border); border-radius: 2px; cursor: pointer; font-size: 12px; }
.shop-preview .sp-toggle input { margin: 0; accent-color: var(--sp-accent); width: 16px; height: 16px; }
@container (min-width: 600px) {
  .shop-preview .sp-content { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .shop-preview .sp-canvas-wrap { height: 100%; min-height: 250px; }
  .shop-preview .sp-controls { border-left: 1px solid var(--sp-border); }
}