/* ═══════════════════════════════════════════════════════════════════
   PopShop™ — Frontend / Store Preview Styles (PS-323 FINAL)
   All store preview, modal, theme actions, and item UI.
   PS-323 ADDITIONS:
     - Modal overlay: fixed centering, above footer nav (z-index 10002)
     - Modal card: max-height respects footer, internal scroll
     - psThemeActions: hidden by default, sticky inside preview
     - Blur system: #centerZone.ps-blur-active (defined in core.css,
       referenced here only for store-preview exclusion guard)
     - Deprecated button classes fully killed
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Category Carousel ─── */
.category-carousel {
  display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 8px 4px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.category-carousel::-webkit-scrollbar { display: none; }
.category-pill {
  flex-shrink: 0; padding: 8px 18px;
  background: var(--ps-surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px; color: var(--ps-text-muted);
  font-family: var(--ps-font); font-size: 13px; font-weight: 500;
  cursor: pointer; scroll-snap-align: start;
  transition: all var(--ps-transition); white-space: nowrap;
}
.category-pill.active {
  background: var(--ps-primary); color: #fff;
  border-color: var(--ps-primary); box-shadow: 0 4px 16px var(--ps-primary-glow);
}
.category-pill:active { transform: scale(0.95); }

/* ─── Category Accordion ─── */
.category-section { margin-bottom: 4px; scroll-snap-align: start; }
.category-accordion-header {
  padding: 14px 16px;
  background: var(--ps-surface); border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--ps-radius); margin: 4px 0;
  font-family: var(--ps-font-display); font-size: 15px; font-weight: 600;
  color: var(--ps-primary); cursor: pointer;
  transition: all var(--ps-transition);
  display: flex; align-items: center; justify-content: space-between;
}
.category-accordion-header:active { background: var(--ps-surface-2); }
.category-accordion-header .acc-arrow {
  font-size: 12px; color: var(--ps-text-muted);
  transition: transform var(--ps-transition);
}
.category-accordion-header.expanded .acc-arrow { transform: rotate(180deg); }
.category-accordion-body {
  overflow: hidden; max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-accordion-body.expanded { max-height: 5000px; }

/* ─── Type Row ─── */
.type-tabs { display: flex; gap: 8px; padding: 10px 8px; flex-wrap: wrap; }
.type-tab {
  padding: 6px 14px; background: var(--ps-surface-2);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 20px;
  font-size: 12px; font-weight: 500; color: var(--ps-text-muted);
  cursor: pointer; transition: all var(--ps-transition);
}
.type-tab.active { background: var(--ps-accent); color: #000; border-color: var(--ps-accent); }
.type-tab:active { transform: scale(0.95); }

.type-row { margin-bottom: 8px; }
.type-row-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ps-text-muted); padding: 8px 8px 6px;
}
.type-row-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 10px 4px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.type-row-scroll::-webkit-scrollbar { display: none; }

/* ─── Item Card — canonical definition ─── */
.item-card {
  flex-shrink: 0; width: 140px; min-width: 140px;
  background: var(--ps-surface); border: 1px solid rgba(var(--ps-primary-rgb), 0.1);
  border-radius: var(--ps-radius); overflow: hidden;
  position: relative; cursor: pointer; scroll-snap-align: start;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: cardIn 0.3s ease-out;
}
@keyframes cardIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.item-card:active { transform: scale(0.96); }

/* Image area */
.item-card-image {
  position: relative; width: 100%; height: 110px;
  background: var(--ps-surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.item-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.item-card:active .item-card-image img { transform: scale(1.03); }
.item-card-image .no-image,
.no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px; opacity: .45; }
.item-img-empty { width: 100%; height: 100%; background: rgba(255,255,255,0.04); }

/* Badges */
.item-badge { position: absolute; padding: 3px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 1.2; z-index: 2; }
.item-badge-price { top: 6px; left: 6px; background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); color: var(--ps-on-accent,#06110e); font-size: 11px; }
.item-badge-type  { top: 6px; right: 6px; background: rgba(var(--ps-primary-rgb, 0,230,118), 0.85); color: #000; font-size: 10px; backdrop-filter: blur(4px); }

/* Overlay */
.item-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: var(--ps-text); font-size: 10px; font-weight: 500; text-align: right;
}

/* Card body */
.item-card-body {
  padding: 8px 10px 10px; background: var(--ps-surface);
  border-top: 2px solid rgba(var(--ps-primary-rgb), 0.25);
}
.item-card-name {
  font-family: var(--ps-font-display); font-size: 13px; font-weight: 600;
  margin-bottom: 2px; display: flex; align-items: center; gap: 4px;
}
.item-card-desc { font-size: 11px; color: var(--ps-text-muted); line-height: 1.3; }

/* Mini card size */
.item-card.item-card-mini { width: 140px; }
.item-card-mini .item-card-image { height: 110px; }
.item-card-mini .item-overlay { padding: 6px 8px; font-size: 10px; }

/* Large variant */
.item-card--large { width: 280px; }
.item-card--large .item-card-image { height: 220px; }

/* ─── Delete Button ─── */
.item-delete-btn {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; backdrop-filter: blur(6px); cursor: pointer; z-index: 3;
}
.item-delete-btn.hidden { display: none; }

/* ─── Add Item Card ─── */
.add-item-card {
  flex-shrink: 0; width: 60px; min-height: 120px;
  background: var(--ps-surface); border: 2px dashed rgba(255,255,255,0.08);
  border-radius: var(--ps-radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; scroll-snap-align: start; transition: all var(--ps-transition);
}
.add-item-card:active { border-color: var(--ps-primary); transform: scale(0.95); }
.add-item-card span { font-size: 24px; color: var(--ps-text-muted); transition: color var(--ps-transition); }
.add-item-card:active span { color: var(--ps-primary); }
.add-item-card-mini { width: 60px !important; min-height: 120px !important; }
.add-item-card-mini span { font-size: 24px !important; }

/* ─── Store Empty Card ─── */
.store-empty-card {
  width: calc(100% - 32px); margin: 16px; padding: 30px 20px;
  text-align: center; border-radius: 16px;
  background: var(--ps-surface); border: 2px dashed rgba(255,255,255,0.10);
  box-sizing: border-box; cursor: pointer; transition: all var(--ps-transition);
  animation: emptyPulse 3s ease-in-out infinite;
}
.store-empty-card:active { border-color: var(--ps-primary); transform: scale(0.98); }
@keyframes emptyPulse { 0%, 100% { border-color: rgba(255,255,255,0.10); } 50% { border-color: rgba(255,255,255,0.18); } }
.empty-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
.empty-icon { font-size: 28px; opacity: .6; }
.store-empty-text { display: block; font-size: 18px; font-weight: 600; color: var(--ps-text); }
.store-empty-sub  { display: block; font-size: 13px; color: var(--ps-text-muted); margin-top: 4px; }

/* ─── Ad Space ─── */
.ad-space {
  width: calc(100% - 32px); margin: 12px 16px 16px; padding: 18px;
  border-radius: 14px; border: 1px dashed rgba(255,255,255,0.08);
  background: var(--ps-surface); box-sizing: border-box;
  text-align: center; cursor: pointer; transition: all var(--ps-transition);
}
.ad-space:active { transform: scale(0.98); }
.ad-space-label { font-size: 13px; color: var(--ps-text-muted); opacity: 0.5; }
.ad-space-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px; border:1px dashed rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.02); }
.ad-icon { font-size:20px; opacity:.6; }

/* ─── Item drag reorder ─── */
.item-dragging-source { opacity: 0; height: 0; overflow: hidden; margin: 0; padding: 0; border: none; pointer-events: none; }
.item-drag-clone { box-shadow: 0 12px 40px rgba(0,0,0,.6); min-height: 120px !important; }
.item-drag-placeholder {
  flex-shrink: 0; min-height: 120px !important;
  border: 2px dashed var(--ps-primary); border-radius: var(--ps-radius);
  background: color-mix(in srgb, var(--ps-primary) 8%, transparent);
  box-sizing: border-box; align-self: stretch;
}
.item-drop-cat-target { box-shadow: inset 0 0 0 2px var(--ps-primary); background: var(--ps-primary-glow) !important; }

/* =========================
   PS-323 MODAL SYSTEM
   - Always centered vertically and horizontally
   - Always above footer nav (z-index 10002 > footer z-index 20, drawer z-index 10001)
   - Never clipped by bottom nav
   - Scroll contained inside modal-body, not on overlay
   - iOS safe-area respected
========================= */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  /* Z-index stack: footer=20, drawers=10001, modals=10002 */
  z-index: 10002 !important;
  /* PS-528 — see-through blur. Was rgba(0,0,0,0.65) — too dim, the
     admin behind was nearly invisible. Now lighter tint + heavier blur
     so the frosted-glass effect actually shows the admin context. */
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* When not hidden, display as flex (centering container) */
.modal-overlay:not(.hidden) {
  display: flex !important;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  /* Leave room above footer nav — footer height + safe area + padding */
  max-height: calc(100vh - var(--ps-footer-h, 58px) - env(safe-area-inset-bottom, 0px) - 40px);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 50%, transparent 100%),
    var(--ps-surface-2);
  border-radius: 20px;
  border: 1px solid var(--ps-border-1);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.22s var(--ps-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smaller modal variant */
.modal-card.modal-card-sm {
  max-width: 340px;
}

/* Larger modal variant */
.modal-card.modal-card-lg {
  max-width: 560px;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ps-border-1);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
}
.modal-header h3 {
  font-family: var(--ps-font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
}

/* Modal body must scroll internally — never extends behind footer */
.modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--ps-surface-4) transparent;
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--ps-surface-4); border-radius: 4px; }

.modal-footer {
  display: flex; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--ps-border-1);
  flex-shrink: 0;
  background: linear-gradient(0deg, rgba(255,255,255,0.025) 0%, transparent 100%);
}

.modal-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  color: var(--ps-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all 0.15s;
  min-width: 44px !important; min-height: 44px !important;
}
.modal-close:hover { background: var(--ps-glass-2); color: var(--ps-text); }
.modal-close:active { transform: scale(0.90); }

/* Modal field layout */
.modal-field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.modal-field span {
  font-size: 12px; font-weight: 600; color: var(--ps-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.modal-input {
  width: 100%; padding: 10px 14px;
  background: var(--ps-surface-1);
  border: 1px solid var(--ps-border-1);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text); font-family: var(--ps-font); font-size: 14px;
  outline: none; transition: border-color 0.2s;
}
.modal-input:focus { border-color: var(--ps-accent); }
.modal-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--ps-surface-1);
  border: 1px solid var(--ps-border-1);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text); font-family: var(--ps-font); font-size: 14px;
  resize: vertical; min-height: 80px; outline: none;
  transition: border-color 0.2s;
}
.modal-textarea:focus { border-color: var(--ps-accent); }

/* Light mode modals */
body[data-appearance="light"] .modal-card {
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.20), 0 0 0 1px rgba(0,0,0,0.04);
}
body[data-appearance="light"] .modal-header { border-bottom-color: rgba(0,0,0,0.07); }
body[data-appearance="light"] .modal-footer { border-top-color: rgba(0,0,0,0.07); }
body[data-appearance="light"] .modal-input,
body[data-appearance="light"] .modal-textarea {
  background: #f8f8f8; border-color: rgba(0,0,0,0.10); color: #111;
}

/* Modal tabs */
.modal-tabs { display: flex; flex-shrink: 0; }
.analytics-tab {
  flex: 1; padding: 10px 16px;
  background: var(--ps-surface-2); border: 1px solid var(--ps-border-1);
  color: var(--ps-text-muted); font-family: var(--ps-font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--ps-transition); border-radius: 0;
}
.analytics-tab.active { background: var(--ps-primary); color: #000; border-color: var(--ps-primary); }

/* Radio / checkbox groups */
.radio-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.radio-option {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
}
.radio-option input[type="radio"],
.radio-option input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--ps-primary);
}

/* Preset messages */
.preset-messages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.preset-btn {
  padding: 6px 12px; background: var(--ps-surface-3);
  border: 1px solid var(--ps-border-1); border-radius: 20px;
  color: var(--ps-text); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all var(--ps-transition);
}
.preset-btn:active { background: var(--ps-primary); color: #000; border-color: var(--ps-primary); }

/* PS-528 — REMOVED Epoch 1 PREVIEW HEADER block (was here).
   Removed because:
     - .preview-shop-header was redefined later at line ~3604 with the
       same intent (cascade-order winner).
     - Same for .ps-logo-zone / .ps-logo-wrap / .ps-logo-slot /
       .ps-status-dot / .preview-header-center.
   Kept the canonical block lower in this file (line ~3604+).
   Note: a different .preview-shop-header rule near line ~2192 has
   DIFFERENT styling (flex-start alignment, taller padding) and is
   preserved — it appears to apply in a different DOM context. */
.ps-header-rows { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-header-row {
  font-size: 14px; color: rgba(255,255,255,0.92); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-header-shopName  { font-size: 17px; font-weight: 700; }
.ps-header-greeting  { font-size: 14px; font-weight: 500; opacity: 0.85; }
.ps-header-phone,
.ps-header-website,
.ps-header-get_quote,
.ps-header-instagram,
.ps-header-twitter,
.ps-header-tiktok    { font-size: 12px; opacity: 0.8; }
.ps-header-phone a,
.ps-header-website a,
.ps-header-instagram a,
.ps-header-twitter a,
.ps-header-tiktok a  { color: inherit; text-decoration: none; }
.ps-row-placeholder { opacity: 0.45; font-style: italic; }

/* "+" add button */
.ps-header-add-btn {
  align-self: flex-start; margin-top: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s ease; flex-shrink: 0;
}
.ps-header-add-btn:hover { background: rgba(255,255,255,0.15); border-color: var(--ps-primary); color: var(--ps-primary); }
.ps-header-add-btn:active { transform: scale(0.9); }

/* Right — lock button */
.preview-header-right { flex-shrink: 0; }
.preview-header-lock {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px); font-size: 13px; font-weight: 500;
  letter-spacing: .2px; color: rgba(255,255,255,0.85); cursor: pointer;
  transition: all .2s ease;
}
.preview-header-lock .lock-icon { font-size: 14px; opacity: 0.9; }
.preview-header-lock .lock-label { opacity: 0.85; }
.preview-header-lock:hover { border-color: var(--ps-primary); color: var(--ps-primary); background: color-mix(in srgb, var(--ps-primary) 12%, transparent); }
.preview-header-lock:active { transform: scale(0.95); }

/* Status badges */
.preview-header-status,
.st-open,
.st-closed { font-size: 10px; padding: 3px 10px; border-radius: 14px; display: inline-block; }
.st-open  { background: rgba(0,184,148,.15); color: var(--ps-success, #00b894); }
.st-closed { background: rgba(255,107,107,.15); color: var(--ps-danger, #ff6b6b); }

/* Logo handles */
.ps-logo-resize,
.ps-logo-rotate {
  position: absolute; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 11px; transition: opacity .15s;
}
.ps-logo-resize { bottom: -6px; right: -6px; }
.ps-logo-rotate { top: -6px; right: -6px; }

/* =========================
   PS-302 — 4-ZONE HEADER LAYOUT
   Matches admin preview AND live shop via shared class names.
   Admin adds contentEditable on tap; live shop is static.
========================= */

/* Root zone wrapper — replaces flat ps-header-rows list */
.ps-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Zone 1 — Greeting / Shop Name (large, bold) */
.ps-header-greeting {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ps-header-greeting .header-row,
.ps-header-greeting .ps-header-row {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,0.96);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* shopName gets extra weight */
.ps-header-greeting .ps-header-shopName,
.ps-header-greeting .header-row[data-row-type="shopName"] {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
/* greeting line slightly smaller */
.ps-header-greeting .ps-header-greeting,
.ps-header-greeting .header-row[data-row-type="greeting"] {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.80;
}

/* Zone 2 — Contact: phone, website, location (inline row) */
.ps-header-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 2px;
}
.ps-header-contact .header-row,
.ps-header-contact .ps-header-row {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.ps-header-contact a {
  color: inherit;
  text-decoration: none;
}

/* Zone 3 — Social: instagram, twitter, tiktok (pill row) */
.ps-header-social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 1px;
}
.ps-header-social .header-row,
.ps-header-social .ps-header-row {
  font-size: 12px;
  color: var(--ps-accent, #00cec9);
  white-space: nowrap;
}
.ps-header-social a {
  color: inherit;
  text-decoration: none;
}

/* Zone 4 — CTA: get_quote button */
.ps-header-cta {
  margin-top: 6px;
}
.ps-header-cta button {
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--ps-font, system-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ps-header-cta button:hover {
  background: rgba(var(--ps-primary-rgb, 0,230,118), 0.15);
  border-color: var(--ps-primary,#00e676);
  color: var(--ps-primary,#00e676);
}
.ps-header-cta button:active { transform: scale(0.96); }
.ps-header-cta .header-row {
  /* CTA rows that are NOT buttons (edge case) */
  font-size: 13px;
  color: var(--ps-primary,#00e676);
}

/* Edit outline when row is focused (admin only) */
.header-row[data-editing="true"] .header-row-text,
.header-row .header-row-text:focus {
  outline: 1px solid var(--ps-primary, #c8ff00);
  border-radius: 4px;
  padding: 1px 4px;
}

/* Drag-reorder visual hints */
.header-row.dragging-row { opacity: 0.45; }
.header-row.drop-above   { border-top:    2px solid var(--ps-primary,#00e676); }
.header-row.drop-below   { border-bottom: 2px solid var(--ps-primary,#00e676); }

/* =========================
   PS-302 — LIVE SHOP HEADER
   .shop-header uses same zone classes — no edit chrome.
========================= */
.shop-header .ps-header {
  gap: 6px;
  padding: 0;
}
.shop-header .ps-header-greeting .header-row {
  font-size: 22px;
  font-weight: 700;
}
.shop-header .ps-header-cta button {
  background: var(--ps-primary,#00e676);
  border-color: transparent;
  color: #000;
  font-weight: 700;
  box-shadow: 0 4px 16px var(--ps-primary-glow, color-mix(in srgb,var(--ps-primary,#00e676) 35%,transparent));
}

/* =========================
   CUSTOMER LINK BANNER
========================= */
.customer-link-banner {
  display:block; text-align:center; padding:8px 12px;
  background:var(--ps-surface); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--ps-radius-sm); margin:0 4px 6px;
  color:var(--ps-primary); font-family:var(--ps-font);
  font-size:12px; font-weight:600; text-decoration:none;
  transition:all var(--ps-transition);
}
.customer-link-banner:active { transform:scale(.97); background:var(--ps-surface-2); }

/* =========================
   TOOLBAR / POLISH
========================= */
.live-preview-toolbar button { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px; border: none; color: #fff; cursor: pointer; }
button { cursor: pointer; }
::-webkit-scrollbar { height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

/* =========================
   ITEM ADDER OVERLAY
========================= */
#itemAdder,
.item-adder,
.ps-item-adder {
  position: fixed !important; bottom: 90px !important;
  left: 50%; transform: translateX(-50%);
  z-index: 9999 !important;
  width: calc(100% - 24px); max-width: 520px;
  pointer-events: auto;
}

/* =========================
   PSD HANDLES
========================= */
.psd-handles-layer { position: fixed; inset: 0; z-index: 3000000; pointer-events: none; }
.psd-handle {
  position: absolute; width: 28px; height: 28px; border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: pointer; transition: all 0.15s ease;
}
.psd-handle::before { font-size: 14px; color: rgba(255,255,255,0.85); }
.psd-handle.up::before    { content: "↑"; }
.psd-handle.down::before  { content: "↓"; }
.psd-handle.left::before  { content: "←"; }
.psd-handle.right::before { content: "→"; }
.psd-handle.center::before{ content: "⤢"; }
.psd-handle:active { transform: scale(0.9); background: color-mix(in srgb,var(--ps-primary,#00e676) 15%,transparent); border-color: color-mix(in srgb,var(--ps-primary,#00e676) 50%,transparent); }

/* =========================
   PS-323 THEME ACTION BUTTONS
   Hidden by default — MUST remain hidden on page load.
   JS removes .hidden to show only when dirty state is true.
   The :not(.hidden) flex rule is the ONLY path to visibility.
========================= */
#storePreview { position: relative; }

/* Default hidden state — forced */
#psThemeActions,
#psThemeActions.hidden {
  display: none !important;
}

/* Only visible when JS explicitly removes .hidden.
   PS-491: bar lives on document.body, fixed below #psThemeStrip.
   Top is set dynamically by _psUpdateSaveBarPosition() in JS,
   but we provide a sensible fallback via CSS custom property. */
#psThemeActions:not(.hidden) {
  display: flex !important;
  gap: 10px;
  position: fixed;
  top: var(--ps-save-bar-top, 56px); /* JS overrides this via style.top */
  left: 0;
  right: 0;
  z-index: 9998; /* just below #psThemeStrip (z-index:9999) */
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.60) 100%),
    var(--ps-surface-2, #121212);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.40);
  animation: themeBarIn 0.2s ease both;
  pointer-events: auto;
}

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

#psThemeActions button {
  padding: 10px 14px; border-radius: 12px; border: none;
  background: var(--ps-surface, #222); color: var(--ps-text, #fff);
  font-size: 13px; cursor: pointer;
  font-family: var(--ps-font, -apple-system, sans-serif);
  font-weight: 600;
}
#psThemeSave {
  background: var(--ps-primary);
  color: var(--ps-bg);
  box-shadow: 0 0 12px var(--ps-primary-glow);
}
#psThemeReset {
  background: var(--ps-surface-3);
  color: var(--ps-text-muted);
  border: 1px solid var(--ps-border-1) !important;
}

/* =========================
   LEGENDS FORCE LAYER
========================= */
body[data-ui="legends"] {
  --ps-admin-surface: #0a0a0a;
  --ps-admin-surface-2: #121212;
  --ps-admin-surface-3: #1a1a1a;
  --ps-accent-rgb: 207,175,74;
}

/* ═════════════════════════════════════
   Orders Luxury Layer
   ═════════════════════════════════════ */
.order-card {
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(var(--ps-primary-rgb), 0.06), rgba(0,0,0,0.65)),
    var(--ps-bg);
  border: 1px solid rgba(var(--ps-primary-rgb), 0.2);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.8),
    0 0 0 1px rgba(var(--ps-primary-rgb), 0.12),
    0 0 25px rgba(var(--ps-primary-rgb), 0.08);
  transition: all .25s ease;
}
.order-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); opacity: 0; transition: opacity .3s ease; }
.order-card:hover::after { opacity: 1; }
.order-card.active { box-shadow: 0 18px 45px rgba(0,0,0,0.9), 0 0 0 1px var(--ps-primary), 0 0 35px rgba(var(--ps-primary-rgb), 0.25); }

/* ═════════════════════════════════════
   Section Luxury Gradients
   ═════════════════════════════════════ */
#splitTop, .split-top {
  position: relative;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(var(--ps-primary-rgb), 0.08), transparent 40%),
    radial-gradient(140% 120% at 80% 100%, rgba(0,0,0,0.7), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.95), rgba(0,0,0,1));
  border-bottom: 1px solid rgba(var(--ps-primary-rgb), 0.15);
  box-shadow: inset 0 -20px 40px rgba(0,0,0,0.6);
}
#splitBottom, .split-bottom {
  position: relative;
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(var(--ps-primary-rgb), 0.06), transparent 40%),
    radial-gradient(140% 120% at 20% 100%, rgba(0,0,0,0.8), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,1), rgba(10,10,10,0.95));
  border-top: 1px solid rgba(var(--ps-primary-rgb), 0.12);
  box-shadow: inset 0 20px 40px rgba(0,0,0,0.7);
}
#splitTop::before, #splitBottom::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.03), transparent);
  opacity: 0.4; pointer-events: none;
}

/* ═══════════════════════════════════
   Frontend Layer — token-based
═══════════════════════════════════ */
.ps-shop { background: var(--ps-bg, #ffffff); color: var(--ps-text, #111); min-height: 100%; font-family: 'Inter', sans-serif; }

.ps-header {
  background: linear-gradient(135deg, var(--ps-primary), rgba(var(--ps-primary-rgb), 0.6));
  padding: 16px; border-radius: 16px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 10px 30px rgba(var(--ps-primary-rgb), 0.25);
}
.ps-login-btn { background: rgba(0,0,0,0.25); color: #fff; border: none; padding: 10px 16px; border-radius: 12px; backdrop-filter: blur(8px); }
.ps-content { padding: 16px; }
.ps-item-card { background: var(--ps-surface); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.ps-item-card img { width: 100%; height: 220px; object-fit: cover; }
.ps-price-tag { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; padding: 6px 10px; border-radius: 10px; }
.ps-checkout { position: sticky; bottom: 0; background: var(--ps-surface-2); padding: 14px; box-shadow: 0 -10px 20px rgba(0,0,0,0.3); }

/* ═══════════════════════════════════════════════════════════
   THEME INTEGRATION LAYER — scoped to #storePreview
   ═══════════════════════════════════════════════════════════ */
#storePreview {
  background: var(--ps-bg, #ffffff);
  color: var(--ps-text, #111);
  min-height: 100%;
}

/* Header — primary gradient */
#storePreview .preview-shop-header {
  background: linear-gradient(
    135deg,
    var(--ps-primary),
    rgba(var(--ps-primary-rgb), 0.6)
  ) !important;
  box-shadow: 0 10px 30px rgba(var(--ps-primary-rgb), 0.25);
  color: #fff;
}

#storePreview .ps-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #00ff88; box-shadow: 0 0 7px #00ff88, 0 0 14px rgba(0,255,136,0.5);
  margin-top: 4px; flex-shrink: 0;
}

#storePreview .preview-shop-header .ps-header-row,
#storePreview .preview-shop-header .preview-header-welcome {
  color: rgba(255,255,255,0.92) !important;
}

#storePreview .preview-header-lock {
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(8px); border-radius: 12px;
}

#storePreview .st-open  { background: rgba(0,0,0,0.2);  color: #a8ffcc; }
#storePreview .st-closed { background: rgba(0,0,0,0.2); color: #ffaaaa; }

/* Surfaces */
#storePreview .category-accordion-header,
#storePreview .category-pill,
#storePreview .type-tab,
#storePreview .add-item-card,
#storePreview .customer-link-banner {
  background: var(--ps-surface) !important;
  color: var(--ps-text-muted) !important;
  border-color: rgba(var(--ps-primary-rgb), 0.08) !important;
}
#storePreview .category-accordion-header { color: var(--ps-primary) !important; }
#storePreview .category-pill.active,
#storePreview .type-tab.active {
  background: var(--ps-primary) !important;
  color: var(--ps-bg) !important;
  border-color: var(--ps-primary) !important;
}

/* Item cards */
#storePreview .item-card {
  background: var(--ps-surface) !important;
  border: 1px solid rgba(var(--ps-primary-rgb), 0.10) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--ps-primary-rgb), 0.06) !important;
}
#storePreview .item-card-image { background: var(--ps-surface-2) !important; }
#storePreview .item-card-body { background: var(--ps-surface) !important; border-top: 2px solid rgba(var(--ps-primary-rgb), 0.3) !important; }
#storePreview .item-card-name { color: var(--ps-text) !important; }
#storePreview .item-card-desc { color: var(--ps-text-muted) !important; }
#storePreview .item-overlay {
  background: linear-gradient(transparent, rgba(var(--ps-primary-rgb), 0.15), rgba(0,0,0,0.75)) !important;
  color: #fff !important;
}

/* Add item card */
#storePreview .add-item-card span { color: var(--ps-text-muted) !important; }
#storePreview .add-item-card:active { border-color: var(--ps-primary) !important; }
#storePreview .add-item-card:active span { color: var(--ps-primary) !important; }

/* Empty state */
#storePreview .store-empty-card {
  background: var(--ps-surface) !important;
  border: 2px dashed rgba(var(--ps-primary-rgb), 0.18) !important;
  border-radius: 18px;
}
#storePreview .store-empty-text { color: var(--ps-text) !important; }
#storePreview .store-empty-sub  { color: var(--ps-text-muted) !important; }

/* Ad space */
#storePreview .ad-space {
  border: 1px dashed rgba(var(--ps-primary-rgb), 0.12) !important;
  background: var(--ps-surface) !important;
}
#storePreview .ad-space-label { color: var(--ps-text-muted) !important; }

/* Accordion body */
#storePreview .category-accordion-body { background: transparent; }

/* Drag placeholder */
#storePreview .item-drag-placeholder {
  border-color: var(--ps-primary) !important;
  background: rgba(var(--ps-primary-rgb), 0.07) !important;
}

/* =========================
   PS-323 — DEPRECATED CLASS KILL
   No button using these classes should ever be visible.
   They are all replaced by .ps-btn-primary and .ps-btn-ghost.
========================= */
.pbar-btn,
.pbar-btn-primary,
.pbar-btn-secondary,
.pbar-btn.active,
.pbar-btn.ps-selected,
.pbar-btn-primary.active {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* =========================
   TOGGLE SYSTEM (settings drawer)
========================= */
.toggle {
  position: relative; display: inline-block;
  width: 44px; height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ps-surface-4); border-radius: 24px;
  transition: background var(--ps-transition);
  border: 1px solid var(--ps-border-1);
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ps-text-muted);
  left: 2px; bottom: 2px;
  transition: transform var(--ps-transition), background var(--ps-transition);
}
.toggle input:checked + .toggle-slider { background: var(--ps-primary); border-color: var(--ps-primary); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px); background: #000;
}

/* =========================
   SETTINGS THUMBNAIL (Logo thumb in right drawer)
========================= */
#settingsLogoPreview {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--ps-surface-3); border: 1px dashed var(--ps-border-2);
  overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
#settingsLogoPreview:hover { border-color: var(--ps-primary); }
#settingsLogoPreview .settings-logo-thumb {
  width: 100%; height: 100%; object-fit: cover; display: none;
}

/* Color trio in appearance section */
.color-trio {
  display: flex; gap: 12px; padding: 4px 0;
}
.color-trio-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
}
.color-trio-item label {
  font-size: 10px; font-weight: 600; color: var(--ps-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.color-trio-item input[type="color"] {
  width: 100%; height: 44px; border-radius: 10px;
  border: 1px solid var(--ps-border-1); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.color-trio-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 8px; }
.color-trio-item input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }

/* =========================
   RADIAL MENU
========================= */
.ps-radial-menu {
  animation: radialIn 0.16s var(--ps-ease, cubic-bezier(0.22,1,0.36,1)) both;
}
@keyframes radialIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.ps-radial-wrap {
  display: flex; gap: 8px; padding: 8px 12px;
  background: rgba(12,12,16,0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ps-border-1); border-radius: 14px;
  box-shadow: var(--ps-depth-3);
}
.ps-radial-wrap button {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  color: var(--ps-text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.ps-radial-wrap button:active { transform: scale(0.88); background: var(--ps-primary); color: #000; }

/* =========================
   CLIENT / CUSTOMER DETAIL
========================= */
.client-detail-info { margin-bottom: 16px; }
.client-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--ps-border-1); font-size: 14px;
}
.cdr-label { color: var(--ps-text-muted); font-size: 13px; }
.cdr-value { font-weight: 500; }
.client-stat-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.client-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; background: var(--ps-surface-2);
  border: 1px solid var(--ps-border-1); border-radius: var(--ps-radius-sm); cursor: pointer;
}
.cs-num { font-size: 18px; font-weight: 700; color: var(--ps-primary); }
.cs-label { font-size: 11px; color: var(--ps-text-muted); }
.client-action-bar { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ps-border-1); }
.ca-btn {
  flex: 1; padding: 10px; border-radius: var(--ps-radius-sm);
  border: 1px solid var(--ps-border-1); background: var(--ps-surface-3);
  color: var(--ps-text); font-family: var(--ps-font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--ps-transition);
}
.ca-btn:active { transform: scale(0.95); }
.ca-remove { color: var(--ps-danger); border-color: rgba(255,77,77,0.16); }
.ca-block  { color: var(--ps-warning); border-color: rgba(255,190,66,0.16); }
.ca-notify { background: var(--ps-primary); color: #000; border-color: var(--ps-primary); }

/* Client QR */
.cd-qr-section { text-align: center; padding: 16px 0; }
.cd-qr-section h4 { font-size: 13px; color: var(--ps-text-muted); margin-bottom: 10px; }
.cd-qr-code { display: flex; justify-content: center; }
.cd-detail-list { padding: 8px 0; }

/* =========================
   LAYOUT EDITOR (Card Editor)
========================= */
.layout-preview-card { padding: 8px 0; }
.layout-hint { font-size: 12px; color: var(--ps-text-muted); margin-bottom: 12px; }

.mock-card {
  background: var(--ps-surface-2); border: 1px solid var(--ps-border-1);
  border-radius: var(--ps-radius); overflow: hidden;
}
.mock-card-image-zone { background: var(--ps-surface-3); min-height: 80px; padding: 4px; }
.mock-card-body-zone  { padding: 4px; }

.mock-comp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 4px;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  transition: all 0.15s;
}
.mock-comp.mock-hidden { opacity: 0.4; }
.mock-comp.mock-dragging { opacity: 0.6; z-index: 50; box-shadow: var(--ps-depth-2); }
.mock-comp.mock-drop-target.mock-drop-above { box-shadow: 0 -2px 0 var(--ps-primary); }
.mock-comp.mock-drop-target.mock-drop-below { box-shadow: 0 2px 0 var(--ps-primary); }

.mock-comp-content { font-size: 12px; flex: 1; }
.mock-image  { font-size: 11px; opacity: 0.6; }
.mock-badge  { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.mock-price  { background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); color: var(--ps-on-accent,#06110e); }
.mock-type   { background: rgba(200,60,200,0.85); color: #fff; }
.mock-overlay{ font-size: 10px; opacity: 0.7; }
.mock-name   { font-size: 12px; font-weight: 600; }
.mock-desc   { font-size: 10px; opacity: 0.6; }

.mock-comp-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mock-align-toggle,
.mock-color-toggle,
.mock-vis-toggle {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  color: var(--ps-text-muted); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.mock-align-toggle:active,
.mock-color-toggle:active,
.mock-vis-toggle:active { background: var(--ps-primary); color: #000; }

.mock-drag-grip {
  color: var(--ps-text-muted); font-size: 14px; cursor: grab;
  padding: 0 4px; opacity: 0.6;
}
.mock-drag-grip:active { cursor: grabbing; }

.mock-color-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15); display: block;
}
.mock-color-dot-default { background: rgba(255,255,255,0.15); }

.mock-color-palette {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px; background: var(--ps-surface-2);
  border: 1px solid var(--ps-border-1); border-radius: 10px;
  position: absolute; z-index: 50;
  box-shadow: var(--ps-depth-2);
}
.mock-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; transition: all 0.15s;
}
.mock-swatch.active { border-color: var(--ps-primary); transform: scale(1.15); }
.mock-swatch-default { background: rgba(255,255,255,0.15); }
.mock-swatch:active { transform: scale(0.9); }

/* Sort style options */
.sort-options { display: flex; gap: 8px; margin-bottom: 16px; }
.sort-opt {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 14px 8px;
  background: var(--ps-surface-2); border: 2px solid var(--ps-border-1);
  border-radius: var(--ps-radius); color: var(--ps-text-muted);
  font-family: var(--ps-font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--ps-transition);
}
.sort-opt:active { transform: scale(0.95); }
.sort-opt.active {
  border-color: rgba(var(--ps-primary-rgb), 0.45);
  color: var(--ps-primary);
  background: rgba(var(--ps-primary-rgb), 0.06);
}
.sort-sub-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-sub-options h4 { width: 100%; font-size: 12px; color: var(--ps-text-muted); margin-bottom: 4px; }
.sort-sub {
  padding: 8px 14px; background: var(--ps-surface-2);
  border: 1px solid var(--ps-border-1); border-radius: 20px;
  color: var(--ps-text-muted); font-family: var(--ps-font);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--ps-transition);
}
.sort-sub.active { background: var(--ps-primary); color: #000; border-color: var(--ps-primary); }

/* =========================
   MEDIA / IMAGE PREVIEW
========================= */
.media-preview-zone {
  width: 100%; min-height: 120px; border-radius: 12px;
  background: var(--ps-surface-3); border: 1px solid var(--ps-border-1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.media-preview-sm { min-height: 80px; }
.media-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; color: var(--ps-text-muted); font-size: 12px; opacity: 0.5;
}
.media-placeholder svg { opacity: 0.35; }

.item-image-upload { margin-bottom: 14px; }
.item-image-preview {
  width: 100%; height: 140px; border-radius: 12px;
  background: var(--ps-surface-3); border: 1px dashed var(--ps-border-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ps-text-muted); font-size: 13px; cursor: pointer;
  overflow: hidden;
}
.item-image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* =========================
   SEG BUTTONS (announcements modal)
========================= */
.seg-btn {
  padding: 8px 14px; border-radius: 8px;
  background: transparent; color: var(--ps-text-muted);
  border: none; cursor: pointer; transition: all 0.2s; font-family: var(--ps-font);
}
.seg-btn.active {
  background: var(--ps-surface-2); color: var(--ps-text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* =========================
   REG FIELD TOGGLES
========================= */
.reg-field-toggles { display: flex; flex-direction: column; gap: 8px; }
.settings-field.toggle-field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--ps-border-1);
  font-size: 14px;
}
.settings-field.toggle-field:last-child { border-bottom: none; }
.settings-btn {
  padding: 8px 14px; background: var(--ps-surface-3);
  border: 1px solid var(--ps-border-1); border-radius: var(--ps-radius-sm);
  color: var(--ps-text); font-family: var(--ps-font); font-size: 13px;
  cursor: pointer; transition: all var(--ps-transition);
}
.settings-btn:active { transform: scale(0.96); }
/* ───────── FLOATING SAVE BAR ───────── */

.ps-floating-actions {
  position: fixed;
  top: calc(var(--topbar-height, 72px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10003;

  display: flex;
  gap: 10px;
  padding: 8px 12px;

  background: rgba(20,20,26,.85);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;

  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.ps-floating-actions.hidden {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════
   PS-412 COMPONENT BADGE SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   PS-412 COMPONENT BADGE SYSTEM — Premium Glass UI
   ═══════════════════════════════════════════════════════ */

.ps-badge {
  position: absolute;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(20,20,28,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  pointer-events: none;
  font-family: var(--ps-font, system-ui);
  white-space: nowrap;
  color: #fff;
}

/* Countdown — top right */
.ps-badge-countdown {
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, rgba(0,0,0,0.72), rgba(0,0,0,0.32));
  color: #fff;
}

.ps-badge-countdown.ps-countdown-urgent {
  background: linear-gradient(135deg, rgba(200,30,30,0.72), rgba(180,0,0,0.32));
  border-color: rgba(255,80,80,0.4);
  color: #ffaaaa;
  animation: psBadgePulse 1.2s ease-in-out infinite;
}

@keyframes psBadgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .62; }
}

/* Location — top left */
.ps-badge-location {
  top: 10px;
  left: 10px;
  color: #fff;
}

/* Dropship — bottom left */
.ps-badge-dropship {
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

/* Special price — full-width bottom overlay */
.ps-price-special {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
  pointer-events: none;
  border-radius: 0 0 inherit inherit;
}

.ps-price-special-main {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ps-primary,#00e676);
  font-family: var(--ps-font, system-ui);
}

.ps-price-special-orig {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  font-family: var(--ps-font, system-ui);
}

/* Sizes — bottom right pills */
.ps-sizes {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 65%;
  z-index: 10;
  pointer-events: none;
}

.ps-size-pill {
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-family: var(--ps-font, system-ui);
  letter-spacing: .04em;
}

/* PS-413 zone containers */
.ps-card-hero { padding: 8px 10px 4px; }

.ps-card-strip {
  display: flex;
  gap: 6px;
  padding: 6px 10px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-card-strip::-webkit-scrollbar { display: none; }

.ps-card-meta {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.ps-comp-image-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

.ps-component-host {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px;
}

.ps-comp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--ps-font, system-ui);
}

.ps-comp-countdown {
  background: rgba(255,255,255,0.08);
  color: var(--ps-text, #fff);
  border: 1px solid rgba(255,255,255,0.12);
}

.ps-comp-countdown.expired {
  background: rgba(255,60,60,0.12);
  color: #ff6b6b;
  border-color: rgba(255,60,60,0.25);
}

/* ═══════════════════════════════════════════════════════
   ITEM CARD LAYOUT SYSTEM (CSS-only visual modes)
   ═══════════════════════════════════════════════════════ */

/* Default — standard display */
.layout-default { }

/* Minimal — quieter, reduced emphasis */
.layout-minimal {
  --text-scale: 0.9;
  opacity: 0.9;
}
.layout-minimal .item-card-name { font-size: calc(13px * 0.9); }
.layout-minimal .item-badge     { display: none; }

/* Compact — dense grid tile */
.layout-compact {
  --text-scale: 0.85;
  padding: 0;
}
.layout-compact .item-card-image { height: 100px; }
.layout-compact .item-card-body  { padding: 6px 8px 8px; }
.layout-compact .item-card-name  { font-size: calc(13px * 0.85); }

/* Emphasis — hero / featured card */
.layout-emphasis {
  --text-scale: 1.1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.layout-emphasis .item-card-image { height: 220px; }
.layout-emphasis .item-card-name  { font-size: calc(13px * 1.1); font-weight: 800; }

/* Legacy layout- prefixed variants (used by earlier system) */
.item-card-layout-default .item-card-image  { height: 180px; border-radius: 14px 14px 0 0; }
.item-card-layout-default .item-card-body   { padding: 10px 12px 12px; }
.item-card-layout-minimal .item-card-image  { height: 155px; border-radius: 12px; }
.item-card-layout-minimal .item-card-body   { padding: 8px 10px 10px; }
.item-card-layout-minimal .item-card-name   { font-size: 12px; }
.item-card-layout-minimal .item-badge       { display: none; }
.item-card-layout-list                      { display: flex !important; flex-direction: row; width: 100% !important; min-width: 0 !important; border-radius: 14px; }
.item-card-layout-list .item-card-image     { width: 88px !important; min-width: 88px; height: 88px !important; border-radius: 14px 0 0 14px; flex-shrink: 0; }
.item-card-layout-list .item-card-body      { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
.item-card-layout-list .item-card-name      { font-size: 13px; font-weight: 700; white-space: normal; }
.item-card-layout-compact .item-card-image  { height: 100px; }
.item-card-layout-compact .item-card-body   { padding: 6px 8px 8px; }
.item-card-layout-compact .item-card-name   { font-size: 11px; }

/* ═══════════════════════════════════════════════════════
   AUTH MODAL UI — Simple, premium, mobile-first
   ═══════════════════════════════════════════════════════ */

.ps-auth-modal {
  background: rgba(20,20,28,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.ps-auth-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 2px;
  color: var(--ps-text, #fff);
  font-family: var(--ps-font, system-ui);
}

.ps-auth-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  font-family: var(--ps-font, system-ui);
  margin: 0;
}

.ps-auth-field { display: flex; flex-direction: column; gap: 8px; }

.ps-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: var(--ps-font, system-ui);
  font-size: 16px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}

.ps-auth-input:focus {
  border-color: var(--accent, var(--ps-primary,#00e676));
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--ps-primary,#00e676) 12%,transparent);
  background: rgba(255,255,255,0.07);
}

.ps-auth-input::placeholder { color: rgba(255,255,255,0.22); }

.ps-auth-btn {
  margin-top: 4px;
  padding: 14px;
  border-radius: 12px;
  background: var(--accent, var(--ps-primary,#00e676));
  border: none;
  color: #000;
  font-family: var(--ps-font, system-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: opacity .15s, transform .12s;
  box-shadow: 0 4px 18px color-mix(in srgb,var(--ps-primary,#00e676) 28%,transparent);
}
.ps-auth-btn:active { opacity: .85; transform: scale(0.98); }

.ps-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--ps-font, system-ui);
}
.ps-auth-divider::before,
.ps-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.ps-auth-link {
  font-size: 13px;
  color: var(--accent, var(--ps-primary,#00e676));
  font-family: var(--ps-font, system-ui);
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  transition: opacity .15s;
}
.ps-auth-link:active { opacity: .6; }

/* Step transitions */
.ps-auth-step { transition: opacity .18s, transform .18s; }
.ps-auth-step.ps-auth-step-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* Light mode */
body[data-appearance="light"] .ps-auth-modal {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.07);
}
body[data-appearance="light"] .ps-auth-title  { color: var(--ps-text, #111); }
body[data-appearance="light"] .ps-auth-sub    { color: rgba(0,0,0,0.42); }
body[data-appearance="light"] .ps-auth-input  {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: var(--ps-text, #111);
}
body[data-appearance="light"] .ps-auth-input::placeholder { color: rgba(0,0,0,0.28); }
body[data-appearance="light"] .ps-auth-input:focus        { background: rgba(0,0,0,0.06); }

/* Badge light overrides */
body[data-appearance="light"] .ps-badge-countdown,
body[data-appearance="light"] .ps-badge-location {
  background: rgba(255,255,255,0.88);
  color: #111;
  border-color: rgba(0,0,0,0.1);
}

/* ═════════════════════════════════════════════════════════════════
   PASS · HEADER LIVE PILL
   Truth-based indicator for live/active. Does NOT depend on addons.
   Hidden by default; .is-live reveals and animates. Placed absolute
   inside #topBar — the scoped position:relative below ensures the
   pill anchors to the header, not the viewport.
═════════════════════════════════════════════════════════════════ */
#topBar { position: relative; }

.ps-live-pill {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 20;

  padding: 6px 12px 6px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;

  background: linear-gradient(
    180deg,
    rgba(255, 0, 60, 0.18),
    rgba(255, 0, 60, 0.10)
  );
  color: var(--ps-danger, #ff2d55);
  border: 1px solid rgba(255, 0, 60, 0.35);

  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  display: none;
  align-items: center;
  gap: 6px;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ps-live-pill.is-live {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
  animation: psLivePulse 1.2s ease-in-out infinite;
}

.ps-live-pill .ps-live-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ps-danger, #ff2d55);
  box-shadow:
    0 0 0 0 rgba(255, 45, 85, 0.55),
    0 0 8px rgba(255, 45, 85, 0.9);
  animation: psLivePillDot 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes psLivePulse {
  0% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 0 rgba(255, 45, 85, 0.55);
  }
  70% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 10px rgba(255, 45, 85, 0);
  }
  100% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 0 rgba(255, 45, 85, 0);
  }
}

@keyframes psLivePillDot {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 45, 85, 0.8);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 14px rgba(255, 45, 85, 1);
  }
}

/* Light-theme override — keep contrast on pale headers */
body[data-appearance="light"] .ps-live-pill {
  background: linear-gradient(
    180deg,
    rgba(255, 0, 60, 0.12),
    rgba(255, 0, 60, 0.06)
  );
  border-color: rgba(255, 0, 60, 0.30);
}

/* ════════════════════════════════════════════════════════════════
   PS-462 — DOUBLE CAROUSEL ITEM MANAGER
   Replaces the accordion category groups with two horizontal rails:
     1. Category pill carousel (filter + drop target)
     2. Item card carousel (filtered, drag-source)
   Theme tokens only — no hardcoded color drift.
═══════════════════════════════════════════════════════════════════ */

/* ── Category pill carousel ─────────────────────────────────────── */
.ps-cat-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 12px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    var(--ps-bg, #0a0a0a) 0%,
    var(--ps-bg, #0a0a0a) 70%,
    rgba(0,0,0,0) 100%
  );
}
.ps-cat-bar::-webkit-scrollbar { display: none; }

.ps-cat-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ps-text, #fff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease,
              box-shadow 200ms ease;
}
.ps-cat-pill:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
}
.ps-cat-pill:active {
  transform: scale(0.96);
}

/* Active filter — solid accent fill for unmistakable selection */
.ps-cat-pill.active {
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: #000;
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  box-shadow: 0 0 14px rgba(var(--ps-accent-rgb, 0,230,118), 0.42);
}

/* Drop-target highlight while an item is being dragged toward it */
.ps-cat-pill.item-drop-cat-target {
  background: rgba(var(--ps-accent-rgb, 0,230,118), 0.22);
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: var(--ps-text, #fff);
  box-shadow: 0 0 18px rgba(var(--ps-accent-rgb, 0,230,118), 0.55);
  transform: scale(1.05);
}

/* ── Item card carousel ─────────────────────────────────────────── */
.ps-item-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 8px 12px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ps-item-row::-webkit-scrollbar { display: none; }

/* The cards inside the row use the existing .item-card builder.
   Force them to behave as horizontal carousel children regardless
   of their inline style.                                          */
.ps-item-row > .item-card,
.ps-item-row > .add-item-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ── Theme integration: enhanced visual depth on item cards ──────
   These rules layer on top of existing .item-card styles without
   overriding sizing or layout — only background depth + selected
   state + accent text colors.                                     */
.ps-item-row .item-card {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.85) 100%
  );
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle primary-tinted radial halo at top of each card */
.ps-item-row .item-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(var(--ps-primary-rgb, 0,230,118), 0.14) 0%,
    rgba(var(--ps-primary-rgb, 0,230,118), 0.04) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
.ps-item-row .item-card > * {
  position: relative;
  z-index: 1;
}

/* Selected card glows with accent */
.ps-item-row .item-card.selected,
.ps-item-row .item-card.is-selected {
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  box-shadow: 0 0 14px rgba(var(--ps-accent-rgb, 0,230,118), 0.45),
              0 0 0 1px var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))) inset;
}

/* Drag source — slight lift + accent ring */
.ps-item-row .item-card.item-dragging-source {
  opacity: 0.45;
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

/* Theme-aware text inside cards (only applies inside the new row,
   so the existing card builder keeps its rules elsewhere)         */
.ps-item-row .item-card .item-name,
.ps-item-row .item-card .ps-item-name {
  color: var(--ps-text, #fff);
}
.ps-item-row .item-card .item-price,
.ps-item-row .item-card .ps-item-price,
.ps-item-row .item-card .item-badge,
.ps-item-row .item-card .ps-item-badge {
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

/* Add-item-card mini matches new row aesthetic */
.ps-item-row .add-item-card {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(var(--ps-accent-rgb, 0,230,118), 0.45);
  color: rgba(var(--ps-accent-rgb, 0,230,118), 1);
  transition: border-color 160ms ease, background 160ms ease,
              transform 120ms ease;
}
.ps-item-row .add-item-card:hover {
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  background: rgba(var(--ps-accent-rgb, 0,230,118), 0.06);
}
.ps-item-row .add-item-card:active {
  transform: scale(0.96);
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps-cat-pill,
  .ps-item-row .item-card,
  .ps-item-row .add-item-card {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   PS-478 — THEME MICRO ANIMATION + UNSAVED GLOW
════════════════════════════════════════════════════════════════ */

/* Part 5 — Preview pulse on theme change */
.ps-theme-animate .item-card {
  animation: psThemePulse 0.35s ease;
}

@keyframes psThemePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Part 6 — Unsaved state glow on save/reset bar */
#psThemeActions.ps-unsaved {
  box-shadow:
    0 0 20px rgba(var(--ps-primary-rgb), 0.35),
    0 0 40px rgba(var(--ps-primary-rgb), 0.15);
  animation: psUnsavedPulse 1.6s infinite;
}

@keyframes psUnsavedPulse {
  50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-theme-animate .item-card,
  #psThemeActions.ps-unsaved {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   PS-423/424 — DIRTY STATE + THEME CONTAINMENT VISUAL SYSTEM
════════════════════════════════════════════════════════════════ */

/* PART 3A — Global dirty mode: preview focus */
body.ps-dirty #storePreview {
  transform: scale(1.01);
  transition: transform 200ms ease;
}

/* PART 3B — Dim elements outside preview */
.ps-dimmed {
  opacity: 0.25;
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 200ms ease, filter 200ms ease;
}

/* PART 3C — Dirty pulse on changed elements */
.ps-dirty-pulse {
  animation: psPulse 1.2s infinite ease-in-out;
}

@keyframes psPulse {
  0%   { box-shadow: 0 0 0 color-mix(in srgb,var(--ps-primary,#00e676) 0%,transparent); }
  50%  { box-shadow: 0 0 18px color-mix(in srgb,var(--ps-primary,#00e676) 45%,transparent); }
  100% { box-shadow: 0 0 0 color-mix(in srgb,var(--ps-primary,#00e676) 0%,transparent); }
}

/* PART 3D — Save glare sweep on clear */
.ps-dirty-glare {
  position: relative;
  overflow: hidden;
}
.ps-dirty-glare::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: psGlare 0.8s ease forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes psGlare {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-dirty-pulse,
  body.ps-dirty #storePreview {
    animation: none;
    transform: none;
  }
  .ps-dirty-glare::after {
    animation: none;
  }
}
/* ════════════════════════════════════════════════════════════════════
   PopShop™ — frontend.css  (PS-423 / PS-424 UNIFIED IMPLEMENTATION)
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   PART 1 — DIRTY STATE SYSTEM
   Body class: ps-dirty
   ────────────────────────────────────────────── */

/* When dirty: only dim ordersSection */
body.ps-dirty #ordersSection {
  opacity: 0.38;
  pointer-events: none;
  filter: grayscale(0.2) blur(0.4px);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Restore ordersSection when clean */
#ordersSection {
  opacity: 1;
  filter: none;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

/* ── Dimmed utility (applied by PS_DIRTY._applyDim) ── */
.ps-dimmed {
  opacity: 0.35 !important;
  pointer-events: none !important;
  filter: grayscale(0.15) !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

/* ──────────────────────────────────────────────
   PART 5 — ANIMATIONS
   ps-dirty-pulse, ps-dirty-glare
   ────────────────────────────────────────────── */

/* Pulse: edited element rings with accent border */
@keyframes psDirtyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ps-accent-rgb, 0, 230, 118), 0.6); }
  50%  { box-shadow: 0 0 0 8px rgba(var(--ps-accent-rgb, 0, 230, 118), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ps-accent-rgb, 0, 230, 118), 0); }
}

.ps-dirty-pulse {
  animation: psDirtyPulse 1.1s ease-in-out infinite;
  outline: 1.5px solid rgba(var(--ps-accent-rgb, 0, 230, 118), 0.55);
  outline-offset: 2px;
  border-radius: inherit;
  transition: outline 0.2s ease;
}

/* Glare: save confirmation sweep */
@keyframes psDirtyGlare {
  0%   { opacity: 0; transform: translateX(-100%) skewX(-12deg); }
  40%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(250%) skewX(-12deg); }
}

.ps-dirty-glare {
  position: relative;
  overflow: hidden;
}

.ps-dirty-glare::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: psDirtyGlare 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Preview scale on dirty focus */
body.ps-dirty #storePreview {
  transform: scale(1.008);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
}

#storePreview {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
}

/* ──────────────────────────────────────────────
   PART 3 — READABILITY SYSTEM
   Text must NEVER inherit theme / accent colors
   ────────────────────────────────────────────── */

/* Titles / names / descriptions: always use readable neutral */
.item-card-name,
.item-card-desc,
.preview-shop-header .header-row-text,
.preview-header-status,
.ps-header-row .header-row-text,
.lz-ec-name,
.lz-card-name,
.lz-card-sub {
  color: var(--ps-text, #ffffff) !important;
}

/* Price text is fine to inherit surface-level color (set inline with getContrastColor) */
.item-card-body .item-card-name,
.item-card-body .item-card-desc {
  color: var(--ps-text, #ffffff) !important;
}

/* ──────────────────────────────────────────────
   PART 4 — ACCENT SURFACES
   Pills / badges / chips use accent background
   Text on those surfaces uses getContrastColor
   ────────────────────────────────────────────── */

/* Category pills — accent background set by JS, contrast text by getContrastColor */
.ps-cat-pill {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  letter-spacing: 0.02em;
}

.ps-cat-pill.active,
.ps-cat-pill:hover {
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: #111;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Item badges */
.item-badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  /* text color overridden inline by getContrastColor */
}

.item-badge-price {
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: #111;
  /* overridden inline */
}

.item-badge-type {
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: #111;
  /* overridden inline */
}

/* ──────────────────────────────────────────────
   PREVIEW HEADER
   ────────────────────────────────────────────── */

/* PS-528 — partial-cascade note: this .preview-shop-header rule
   provides background + border-bottom that the cascade-winner at
   line ~3575 does not. The 3575 block overrides padding, align-items,
   z-index, and adds border-radius. Keeping both is intentional —
   merging would require either combining both intents or losing the
   surface/border styling. Future cleanup should consolidate. */
.preview-shop-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 14px 12px;
  background: var(--ps-surface-1, rgba(18, 18, 18, 0.96));
  border-bottom: 1px solid var(--ps-border-1, rgba(255, 255, 255, 0.06));
  position: relative;
  z-index: 10;
}

.ps-logo-zone {
  /* PS-453B: zone IS the logo — background-image applied directly */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  position: relative;
  min-width: 56px;
  width: 56px;
  height: 56px;
  overflow: visible;
  border: none;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center;
}

/* Empty state only — show dashed border as upload affordance */
.ps-logo-zone.empty {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wrap just holds status dot — no visual frame */
.ps-logo-wrap {
  position: absolute;
  bottom: -4px;
  right: -4px;
  pointer-events: none;
}

/* Remove img and slot — no longer rendered */
.ps-logo-img { display: none; }
.ps-logo-slot { display: none; }

.ps-logo-plus {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.28);
  line-height: 1;
}

.ps-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ps-primary,#00e676);
  border: 2px solid var(--ps-bg, #0d0d0d);
  position: absolute;
  bottom: -2px;
  right: -2px;
  box-shadow: 0 0 6px color-mix(in srgb,var(--ps-primary,#00e676) 60%,transparent);
}

.preview-header-status {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.st-open  { color: var(--ps-primary,#00e676); }
.st-closed { color: rgba(255, 255, 255, 0.35); }

/* PS-528 — REMOVED duplicate .preview-header-center { flex:1; min-width:0 }
   The same rules exist in the canonical block at line ~3640. */

.ps-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-header-greeting,
.ps-header-contact,
.ps-header-social,
.ps-header-cta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.header-row {
  cursor: pointer;
  padding: 3px 0;
  border-radius: 6px;
  transition: background 0.15s;
  position: relative;
}

.header-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.header-row-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-text, #fff);
  display: block;
  padding: 1px 4px;
  outline: none;
  border-radius: 4px;
  min-height: 18px;
}

.ps-header-shopName .header-row-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ps-row-placeholder {
  color: rgba(255, 255, 255, 0.28);
  font-style: italic;
  font-size: 11px;
}

.ps-header-add-btn {
  margin-top: 6px;
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 3px 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-block;
}

.ps-header-add-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

.preview-header-right {
  flex-shrink: 0;
}

.preview-header-lock {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.preview-header-lock:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lock-icon { font-size: 12px; }
.lock-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────
   CATEGORY BAR
   ────────────────────────────────────────────── */

.ps-cat-bar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.ps-cat-bar::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────────
   ITEM ROW
   ────────────────────────────────────────────── */

.ps-item-row {
  display: flex;
  gap: 12px;
  padding: 4px 14px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.ps-item-row::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────────
   ITEM CARDS
   ────────────────────────────────────────────── */

.item-card {
  background: var(--ps-surface-2, rgba(22, 22, 28, 0.98));
  border-radius: var(--ps-radius, 14px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.25s ease;
  position: relative;
  flex-shrink: 0;
}

.item-card-mini {
  width: 148px;
  min-width: 148px;
}

.item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.item-card-image {
  position: relative;
  height: 148px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.item-card-image img,
.item-card-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-img-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}

.item-card-body {
  padding: 8px 10px 10px;
}

.item-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ps-text, #fff) !important;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-badge {
  position: absolute;
  top: 8px;
}

.item-badge-price { left: 8px; }
.item-badge-type  { right: 8px; }

/* Delete button */
.item-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  z-index: 20;
  transition: background 0.15s;
}

.item-delete-btn.hidden { display: none; }
.item-delete-btn:hover { background: rgba(255, 60, 60, 0.85); }

/* Add item card */
.add-item-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--ps-radius, 14px);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.add-item-card-mini {
  width: 148px;
  min-width: 148px;
  height: 148px;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.25);
}

.add-item-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

/* ──────────────────────────────────────────────
   DRAG STATES
   ────────────────────────────────────────────── */

.item-dragging-source { opacity: 0.3; }
.item-drag-placeholder {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(var(--ps-accent-rgb, 0, 230, 118), 0.4);
  border-radius: var(--ps-radius, 14px);
}

.item-drop-cat-target {
  background: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.12) !important;
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))) !important;
}

/* ──────────────────────────────────────────────
   AD SPACE
   ────────────────────────────────────────────── */

.ad-space {
  margin: 8px 14px 14px;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 64px;
}

.ad-space:hover { background: rgba(255, 255, 255, 0.02); }

.ad-space-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ──────────────────────────────────────────────
   STORE EMPTY
   ────────────────────────────────────────────── */

.store-empty-card {
  margin: 24px 14px 0;
  padding: 32px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.store-empty-card:hover { background: rgba(255, 255, 255, 0.055); }

.store-empty-text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}

.store-empty-sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

/* ──────────────────────────────────────────────
   NEW ITEM HIGHLIGHT
   ────────────────────────────────────────────── */

@keyframes psNewItem {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ps-accent-rgb, 0, 230, 118), 0.6); }
  100% { box-shadow: 0 0 0 12px rgba(var(--ps-accent-rgb, 0, 230, 118), 0); }
}

.item-card.new-item {
  animation: psNewItem 1.2s ease-out;
  border-color: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.45);
}

/* ──────────────────────────────────────────────
   RADIAL MENU
   ────────────────────────────────────────────── */

.ps-radial-menu { z-index: 9999; }

.ps-radial-wrap {
  display: flex;
  gap: 8px;
  background: rgba(16, 16, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.ps-radial-wrap button {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-radial-wrap button:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.12);
}

/* ──────────────────────────────────────────────
   COMPONENT CAROUSEL
   ────────────────────────────────────────────── */

#psComponentCarousel {
  position: absolute;
  left: 0; right: 0;
  z-index: 100;
  background: rgba(14, 14, 18, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 12px 12px;
  box-sizing: border-box;
  transition: opacity 0.15s, transform 0.15s;
}

.ps-carousel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ps-carousel-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.ps-carousel-track::-webkit-scrollbar { display: none; }

.ps-comp-chip,
.ps-comp-chip-ai {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: all 0.15s;
}

.ps-comp-chip.active {
  background: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.12);
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

.ps-comp-chip-ai {
  background: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.08);
  border-color: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.3);
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

.ps-comp-chip:hover, .ps-comp-chip-ai:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.ps-comp-icon { font-size: 16px; }
.ps-comp-label { font-size: 12px; }

/* ──────────────────────────────────────────────
   HEADER ROW CAROUSEL
   ────────────────────────────────────────────── */

#psHeaderRowCarousel {
  position: absolute;
  left: 0; right: 0;
  z-index: 200;
}

/* ──────────────────────────────────────────────
   BLUR DIM
   ────────────────────────────────────────────── */

.ps-blur-active {
  filter: blur(2px) brightness(0.85);
  pointer-events: none;
  transition: filter 0.22s ease;
}

/* ──────────────────────────────────────────────
   FEATURED ITEM (PS-448)
   ────────────────────────────────────────────── */

.item-card.ps-featured {
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  box-shadow: 0 0 0 2px var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))),
              0 8px 32px color-mix(in srgb,var(--ps-primary,#00e676) 30%,transparent);
}

/* ──────────────────────────────────────────────
   LIVE BAR (PS-448)
   ────────────────────────────────────────────── */

body.ps-live #psLiveBar { display: flex !important; }

/* ──────────────────────────────────────────────
   LOGO HANDLES
   ────────────────────────────────────────────── */

.ps-logo-resize,
.ps-logo-rotate {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  border-radius: 50%;
  cursor: pointer;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s;
}

.ps-logo-resize { bottom: -4px; right: -4px; cursor: se-resize; }
.ps-logo-rotate { top: -4px;    right: -4px; cursor: crosshair; }

/* ──────────────────────────────────────────────
   MOCK CARD (LAYOUT EDITOR)
   ────────────────────────────────────────────── */

.mock-card {
  background: var(--ps-surface-2, rgba(22, 22, 28, 0.98));
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.mock-card-image-zone, .mock-card-body-zone {
  padding: 8px;
  min-height: 40px;
}

.mock-card-image-zone {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mock-comp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: grab;
  user-select: none;
  position: relative;
  transition: background 0.15s;
}

.mock-comp:hover { background: rgba(255, 255, 255, 0.05); }
.mock-comp.mock-hidden { opacity: 0.4; }
.mock-comp.mock-dragging { opacity: 0.5; z-index: 50; }
.mock-comp.mock-drop-target { border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); }

.mock-comp-content { font-size: 11px; color: rgba(255,255,255,0.75); flex: 1; }
.mock-comp-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.mock-vis-toggle,
.mock-align-toggle,
.mock-color-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  color: rgba(255,255,255,0.5);
  transition: color 0.15s, background 0.15s;
}

.mock-vis-toggle:hover,
.mock-align-toggle:hover,
.mock-color-toggle:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
}

.mock-drag-grip {
  cursor: grab;
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  padding: 2px;
  letter-spacing: -1px;
}

.mock-color-palette {
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: 50;
  background: rgba(14,14,18,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 160px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

.mock-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s, border-color 0.12s;
}

.mock-swatch.active { border-color: #fff; transform: scale(1.2); }
.mock-swatch-default {
  background: rgba(255,255,255,0.15);
  border: 1.5px dashed rgba(255,255,255,0.4);
}

.mock-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.mock-color-dot-default {
  background: rgba(255,255,255,0.2);
  border: 1px dashed rgba(255,255,255,0.4);
}

.mock-name  { font-size: 11px; font-weight: 700; }
.mock-desc  { font-size: 10px; opacity: 0.6; }
.mock-image { height: 40px; background: rgba(255,255,255,0.06); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); font-size: 18px; }
.mock-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); color: #111; }
.mock-overlay { font-size: 10px; color: rgba(255,255,255,0.5); font-style: italic; }

.mock-align-left   { text-align: left; }
.mock-align-center { text-align: center; }
.mock-align-right  { text-align: right; }

/* ──────────────────────────────────────────────
   HEADER SYSTEM — Inline edit
   ────────────────────────────────────────────── */

.header-row[data-editing="true"] .header-row-text {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  outline: 1px solid rgba(var(--ps-accent-rgb, 0, 230, 118), 0.5);
}

.dragging-row { opacity: 0.4; }
.drop-above   { border-top: 2px solid var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); }
.drop-below   { border-bottom: 2px solid var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); }

/* ──────────────────────────────────────────────
   LOGO COLOR PROMPT
   ────────────────────────────────────────────── */

#psLogoColorPrompt {
  animation: psPromptIn 0.2s ease;
}

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

/* ──────────────────────────────────────────────
   THEME ANIMATION
   ────────────────────────────────────────────── */

@keyframes psThemeAnimate {
  0%   { filter: brightness(1.06) saturate(1.12); }
  50%  { filter: brightness(1.12) saturate(1.25); }
  100% { filter: brightness(1) saturate(1); }
}

#storePreview.ps-theme-animate {
  animation: psThemeAnimate 0.4s ease-out;
}

/* ──────────────────────────────────────────────
   PS-414 SHEETS
   ────────────────────────────────────────────── */

.ps414-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  animation: psSheetFadeIn 0.2s ease;
}

@keyframes psSheetFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ps414-sheet {
  background: var(--ps-surface-1, #161618);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -12px 48px rgba(0,0,0,0.7);
  animation: psSheetSlideUp 0.28s cubic-bezier(0.4,0,0.2,1);
}

@keyframes psSheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.ps414-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ps414-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.ps414-sheet-close {
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.ps414-sheet-close:hover { background: rgba(255,255,255,0.12); }

.ps414-sheet-body {
  padding: 16px 20px;
}

.ps414-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps414-size-tile {
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
}

.ps414-size-tile:hover {
  background: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.12);
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

.ps414-size-chart-img {
  width: 100%;
  border-radius: 12px;
  margin-top: 16px;
  object-fit: contain;
}

.ps414-size-chart-link {
  display: block;
  margin-top: 16px;
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.ps414-loc-static {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 12px;
}

.ps414-loc-action {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.12);
  border: 1px solid rgba(var(--ps-accent-rgb, 0, 230, 118), 0.3);
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}

.ps414-loc-action:hover {
  background: rgba(var(--ps-accent-rgb, 0, 230, 118), 0.2);
}

/* ──────────────────────────────────────────────
   UNSAVED BAR (ps-unsaved animation)
   ────────────────────────────────────────────── */

#psThemeActions.ps-unsaved {
  animation: psSaveBarIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* ──────────────────────────────────────────────
   ITEM CARD OVERLAY
   ────────────────────────────────────────────── */

.item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

.item-bg-gradient {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-bg-gradient-text {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 8px;
}

/* ──────────────────────────────────────────────
   PROMOTE OVERLAY (PS-451)
   ────────────────────────────────────────────── */

.lz-promote-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: psSheetFadeIn 0.22s ease;
}

.lz-promote-card {
  background: rgba(18,18,22,0.97);
  border-radius: 20px;
  padding: 28px 24px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  width: 90%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lz-promote-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.lz-promote-qr {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lz-promote-link {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  word-break: break-all;
  text-align: center;
}

.lz-promote-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.lz-promote-send,
.lz-promote-copy {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.12s;
}

.lz-promote-send {
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: #000;
}

.lz-promote-copy {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

.lz-promote-send:hover  { opacity: 0.9; transform: translateY(-1px); }
.lz-promote-copy:hover  { background: rgba(255,255,255,0.12); }

.lz-promote-close-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
/* ═══════════════════════════════════════════════════════════════════
   PopShop™ — Frontend / Store Preview Styles (PS-323 FINAL)
   All store preview, modal, theme actions, and item UI.
   PS-323 ADDITIONS:
     - Modal overlay: fixed centering, above footer nav (z-index 10002)
     - Modal card: max-height respects footer, internal scroll
     - psThemeActions: hidden by default, sticky inside preview
     - Blur system: #centerZone.ps-blur-active (defined in core.css,
       referenced here only for store-preview exclusion guard)
     - Deprecated button classes fully killed
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Category Carousel ─── */
.category-carousel {
  display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 8px 4px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.category-carousel::-webkit-scrollbar { display: none; }
.category-pill {
  flex-shrink: 0; padding: 8px 18px;
  background: var(--ps-surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px; color: var(--ps-text-muted);
  font-family: var(--ps-font); font-size: 13px; font-weight: 500;
  cursor: pointer; scroll-snap-align: start;
  transition: all var(--ps-transition); white-space: nowrap;
}
.category-pill.active {
  background: var(--ps-primary); color: #fff;
  border-color: var(--ps-primary); box-shadow: 0 4px 16px var(--ps-primary-glow);
}
.category-pill:active { transform: scale(0.95); }

/* ─── Category Accordion ─── */
.category-section { margin-bottom: 4px; scroll-snap-align: start; }
.category-accordion-header {
  padding: 14px 16px;
  background: var(--ps-surface); border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--ps-radius); margin: 4px 0;
  font-family: var(--ps-font-display); font-size: 15px; font-weight: 600;
  color: var(--ps-primary); cursor: pointer;
  transition: all var(--ps-transition);
  display: flex; align-items: center; justify-content: space-between;
}
.category-accordion-header:active { background: var(--ps-surface-2); }
.category-accordion-header .acc-arrow {
  font-size: 12px; color: var(--ps-text-muted);
  transition: transform var(--ps-transition);
}
.category-accordion-header.expanded .acc-arrow { transform: rotate(180deg); }
.category-accordion-body {
  overflow: hidden; max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-accordion-body.expanded { max-height: 5000px; }

/* ─── Type Row ─── */
.type-tabs { display: flex; gap: 8px; padding: 10px 8px; flex-wrap: wrap; }
.type-tab {
  padding: 6px 14px; background: var(--ps-surface-2);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 20px;
  font-size: 12px; font-weight: 500; color: var(--ps-text-muted);
  cursor: pointer; transition: all var(--ps-transition);
}
.type-tab.active { background: var(--ps-accent); color: #000; border-color: var(--ps-accent); }
.type-tab:active { transform: scale(0.95); }

.type-row { margin-bottom: 8px; }
.type-row-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ps-text-muted); padding: 8px 8px 6px;
}
.type-row-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 10px 4px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.type-row-scroll::-webkit-scrollbar { display: none; }

/* ─── Item Card — canonical definition ─── */
.item-card {
  flex-shrink: 0; width: 140px; min-width: 140px;
  background: var(--ps-surface); border: 1px solid rgba(var(--ps-primary-rgb), 0.1);
  border-radius: var(--ps-radius); overflow: hidden;
  position: relative; cursor: pointer; scroll-snap-align: start;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: cardIn 0.3s ease-out;
}
@keyframes cardIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.item-card:active { transform: scale(0.96); }

/* Image area */
.item-card-image {
  position: relative; width: 100%; height: 110px;
  background: var(--ps-surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.item-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.item-card:active .item-card-image img { transform: scale(1.03); }
.item-card-image .no-image,
.no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px; opacity: .45; }
.item-img-empty { width: 100%; height: 100%; background: rgba(255,255,255,0.04); }

/* Badges */
.item-badge { position: absolute; padding: 3px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 1.2; z-index: 2; }
.item-badge-price { top: 6px; left: 6px; background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); color: var(--ps-on-accent,#06110e); font-size: 11px; }
.item-badge-type  { top: 6px; right: 6px; background: rgba(var(--ps-primary-rgb, 0,230,118), 0.85); color: #000; font-size: 10px; backdrop-filter: blur(4px); }

/* Overlay */
.item-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: var(--ps-text); font-size: 10px; font-weight: 500; text-align: right;
}

/* Card body */
.item-card-body {
  padding: 8px 10px 10px; background: var(--ps-surface);
  border-top: 2px solid rgba(var(--ps-primary-rgb), 0.25);
}
.item-card-name {
  font-family: var(--ps-font-display); font-size: 13px; font-weight: 600;
  margin-bottom: 2px; display: flex; align-items: center; gap: 4px;
}
.item-card-desc { font-size: 11px; color: var(--ps-text-muted); line-height: 1.3; }

/* Mini card size */
.item-card.item-card-mini { width: 140px; }
.item-card-mini .item-card-image { height: 110px; }
.item-card-mini .item-overlay { padding: 6px 8px; font-size: 10px; }

/* Large variant */
.item-card--large { width: 280px; }
.item-card--large .item-card-image { height: 220px; }

/* ─── Delete Button ─── */
.item-delete-btn {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; backdrop-filter: blur(6px); cursor: pointer; z-index: 3;
}
.item-delete-btn.hidden { display: none; }

/* ─── Add Item Card ─── */
.add-item-card {
  flex-shrink: 0; width: 60px; min-height: 120px;
  background: var(--ps-surface); border: 2px dashed rgba(255,255,255,0.08);
  border-radius: var(--ps-radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; scroll-snap-align: start; transition: all var(--ps-transition);
}
.add-item-card:active { border-color: var(--ps-primary); transform: scale(0.95); }
.add-item-card span { font-size: 24px; color: var(--ps-text-muted); transition: color var(--ps-transition); }
.add-item-card:active span { color: var(--ps-primary); }
.add-item-card-mini { width: 60px !important; min-height: 120px !important; }
.add-item-card-mini span { font-size: 24px !important; }

/* ─── Store Empty Card ─── */
.store-empty-card {
  width: calc(100% - 32px); margin: 16px; padding: 30px 20px;
  text-align: center; border-radius: 16px;
  background: var(--ps-surface); border: 2px dashed rgba(255,255,255,0.10);
  box-sizing: border-box; cursor: pointer; transition: all var(--ps-transition);
  animation: emptyPulse 3s ease-in-out infinite;
}
.store-empty-card:active { border-color: var(--ps-primary); transform: scale(0.98); }
@keyframes emptyPulse { 0%, 100% { border-color: rgba(255,255,255,0.10); } 50% { border-color: rgba(255,255,255,0.18); } }
.empty-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
.empty-icon { font-size: 28px; opacity: .6; }
.store-empty-text { display: block; font-size: 18px; font-weight: 600; color: var(--ps-text); }
.store-empty-sub  { display: block; font-size: 13px; color: var(--ps-text-muted); margin-top: 4px; }

/* ─── Ad Space ─── */
.ad-space {
  width: calc(100% - 32px); margin: 12px 16px 16px; padding: 18px;
  border-radius: 14px; border: 1px dashed rgba(255,255,255,0.08);
  background: var(--ps-surface); box-sizing: border-box;
  text-align: center; cursor: pointer; transition: all var(--ps-transition);
}
.ad-space:active { transform: scale(0.98); }
.ad-space-label { font-size: 13px; color: var(--ps-text-muted); opacity: 0.5; }
.ad-space-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px; border:1px dashed rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.02); }
.ad-icon { font-size:20px; opacity:.6; }

/* ─── Item drag reorder ─── */
.item-dragging-source { opacity: 0; height: 0; overflow: hidden; margin: 0; padding: 0; border: none; pointer-events: none; }
.item-drag-clone { box-shadow: 0 12px 40px rgba(0,0,0,.6); min-height: 120px !important; }
.item-drag-placeholder {
  flex-shrink: 0; min-height: 120px !important;
  border: 2px dashed var(--ps-primary); border-radius: var(--ps-radius);
  background: color-mix(in srgb, var(--ps-primary) 8%, transparent);
  box-sizing: border-box; align-self: stretch;
}
.item-drop-cat-target { box-shadow: inset 0 0 0 2px var(--ps-primary); background: var(--ps-primary-glow) !important; }


/* ════════════════════════════════════════════════════════════════════
   PS-528 — REMOVED 460 lines of duplicate / outdated CSS (was here):
     - PS-323 MODAL SYSTEM duplicate (was lines 3398-3577 in old file,
       byte-identical to lines 199-453)
     - PREVIEW HEADER (was lines 3578-3712) — outdated pre-PS-302 layout
       defining .preview-shop-header / .ps-logo-zone / .preview-header-center
       / .ps-header-rows / .ps-header-row that competed with both PS-302
       and PS-539D authoritative rules in header.css. THIS WAS THE
       SOURCE OF THE HEADER OVERLAP visible in screenshots — same
       selectors as header.css but loading later, defeating the
       authoritative scroll-container layout.
     - PS-302 4-ZONE HEADER duplicate (was lines 3713-3837, byte-identical
       to lines 454-578)
     - PS-302 LIVE SHOP HEADER duplicate (was lines 3838-3857, byte-
       identical to lines 579-598)
   Authority is now restored: each selector has exactly one canonical
   definition in this file. Header layout authority lives in header.css.
   ════════════════════════════════════════════════════════════════════ */

/* =========================
   CUSTOMER LINK BANNER
========================= */
.customer-link-banner {
  display:block; text-align:center; padding:8px 12px;
  background:var(--ps-surface); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--ps-radius-sm); margin:0 4px 6px;
  color:var(--ps-primary); font-family:var(--ps-font);
  font-size:12px; font-weight:600; text-decoration:none;
  transition:all var(--ps-transition);
}
.customer-link-banner:active { transform:scale(.97); background:var(--ps-surface-2); }

/* =========================
   TOOLBAR / POLISH
========================= */
.live-preview-toolbar button { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px; border: none; color: #fff; cursor: pointer; }
button { cursor: pointer; }
::-webkit-scrollbar { height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

/* =========================
   ITEM ADDER OVERLAY
========================= */
#itemAdder,
.item-adder,
.ps-item-adder {
  position: fixed !important; bottom: 90px !important;
  left: 50%; transform: translateX(-50%);
  z-index: 9999 !important;
  width: calc(100% - 24px); max-width: 520px;
  pointer-events: auto;
}

/* =========================
   PSD HANDLES
========================= */
.psd-handles-layer { position: fixed; inset: 0; z-index: 3000000; pointer-events: none; }
.psd-handle {
  position: absolute; width: 28px; height: 28px; border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: pointer; transition: all 0.15s ease;
}
.psd-handle::before { font-size: 14px; color: rgba(255,255,255,0.85); }
.psd-handle.up::before    { content: "↑"; }
.psd-handle.down::before  { content: "↓"; }
.psd-handle.left::before  { content: "←"; }
.psd-handle.right::before { content: "→"; }
.psd-handle.center::before{ content: "⤢"; }
.psd-handle:active { transform: scale(0.9); background: color-mix(in srgb,var(--ps-primary,#00e676) 15%,transparent); border-color: color-mix(in srgb,var(--ps-primary,#00e676) 50%,transparent); }

/* PS-528 — REMOVED exact duplicate of #psThemeActions ruleset.
   The original block at line ~665 (PS-323 THEME ACTION BUTTONS)
   provides the canonical rules: hidden by default, fixed positioning
   below #psThemeStrip when :not(.hidden), button styling, and the
   themeBarIn keyframes. The duplicate here was a copy-paste from
   an earlier sprint that was never deduplicated. */

/* =========================
   LEGENDS FORCE LAYER
========================= */
body[data-ui="legends"] {
  --ps-admin-surface: #0a0a0a;
  --ps-admin-surface-2: #121212;
  --ps-admin-surface-3: #1a1a1a;
  --ps-accent-rgb: 207,175,74;
}

/* ═════════════════════════════════════
   Orders Luxury Layer
   ═════════════════════════════════════ */
.order-card {
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(var(--ps-primary-rgb), 0.06), rgba(0,0,0,0.65)),
    var(--ps-bg);
  border: 1px solid rgba(var(--ps-primary-rgb), 0.2);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.8),
    0 0 0 1px rgba(var(--ps-primary-rgb), 0.12),
    0 0 25px rgba(var(--ps-primary-rgb), 0.08);
  transition: all .25s ease;
}
.order-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); opacity: 0; transition: opacity .3s ease; }
.order-card:hover::after { opacity: 1; }
.order-card.active { box-shadow: 0 18px 45px rgba(0,0,0,0.9), 0 0 0 1px var(--ps-primary), 0 0 35px rgba(var(--ps-primary-rgb), 0.25); }

/* ═════════════════════════════════════
   Section Luxury Gradients
   ═════════════════════════════════════ */
#splitTop, .split-top {
  position: relative;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(var(--ps-primary-rgb), 0.08), transparent 40%),
    radial-gradient(140% 120% at 80% 100%, rgba(0,0,0,0.7), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.95), rgba(0,0,0,1));
  border-bottom: 1px solid rgba(var(--ps-primary-rgb), 0.15);
  box-shadow: inset 0 -20px 40px rgba(0,0,0,0.6);
}
#splitBottom, .split-bottom {
  position: relative;
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(var(--ps-primary-rgb), 0.06), transparent 40%),
    radial-gradient(140% 120% at 20% 100%, rgba(0,0,0,0.8), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,1), rgba(10,10,10,0.95));
  border-top: 1px solid rgba(var(--ps-primary-rgb), 0.12);
  box-shadow: inset 0 20px 40px rgba(0,0,0,0.7);
}
#splitTop::before, #splitBottom::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.03), transparent);
  opacity: 0.4; pointer-events: none;
}

/* ═══════════════════════════════════
   Frontend Layer — token-based
═══════════════════════════════════ */
.ps-shop { background: var(--ps-bg, #ffffff); color: var(--ps-text, #111); min-height: 100%; font-family: 'Inter', sans-serif; }

.ps-header {
  background: linear-gradient(135deg, var(--ps-primary), rgba(var(--ps-primary-rgb), 0.6));
  padding: 16px; border-radius: 16px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 10px 30px rgba(var(--ps-primary-rgb), 0.25);
}
.ps-login-btn { background: rgba(0,0,0,0.25); color: #fff; border: none; padding: 10px 16px; border-radius: 12px; backdrop-filter: blur(8px); }
.ps-content { padding: 16px; }
.ps-item-card { background: var(--ps-surface); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.ps-item-card img { width: 100%; height: 220px; object-fit: cover; }
.ps-price-tag { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; padding: 6px 10px; border-radius: 10px; }
.ps-checkout { position: sticky; bottom: 0; background: var(--ps-surface-2); padding: 14px; box-shadow: 0 -10px 20px rgba(0,0,0,0.3); }

/* ═══════════════════════════════════════════════════════════
   THEME INTEGRATION LAYER — scoped to #storePreview
   ═══════════════════════════════════════════════════════════ */
#storePreview {
  background: var(--ps-bg, #ffffff);
  color: var(--ps-text, #111);
  min-height: 100%;
}

/* Header — primary gradient */
#storePreview .preview-shop-header {
  background: linear-gradient(
    135deg,
    var(--ps-primary),
    rgba(var(--ps-primary-rgb), 0.6)
  ) !important;
  box-shadow: 0 10px 30px rgba(var(--ps-primary-rgb), 0.25);
  color: #fff;
}

#storePreview .ps-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #00ff88; box-shadow: 0 0 7px #00ff88, 0 0 14px rgba(0,255,136,0.5);
  margin-top: 4px; flex-shrink: 0;
}

#storePreview .preview-shop-header .ps-header-row,
#storePreview .preview-shop-header .preview-header-welcome {
  color: rgba(255,255,255,0.92) !important;
}

#storePreview .preview-header-lock {
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(8px); border-radius: 12px;
}

#storePreview .st-open  { background: rgba(0,0,0,0.2);  color: #a8ffcc; }
#storePreview .st-closed { background: rgba(0,0,0,0.2); color: #ffaaaa; }

/* Surfaces */
#storePreview .category-accordion-header,
#storePreview .category-pill,
#storePreview .type-tab,
#storePreview .add-item-card,
#storePreview .customer-link-banner {
  background: var(--ps-surface) !important;
  color: var(--ps-text-muted) !important;
  border-color: rgba(var(--ps-primary-rgb), 0.08) !important;
}
#storePreview .category-accordion-header { color: var(--ps-primary) !important; }
#storePreview .category-pill.active,
#storePreview .type-tab.active {
  background: var(--ps-primary) !important;
  color: var(--ps-bg) !important;
  border-color: var(--ps-primary) !important;
}

/* Item cards */
#storePreview .item-card {
  background: var(--ps-surface) !important;
  border: 1px solid rgba(var(--ps-primary-rgb), 0.10) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--ps-primary-rgb), 0.06) !important;
}
#storePreview .item-card-image { background: var(--ps-surface-2) !important; }
#storePreview .item-card-body { background: var(--ps-surface) !important; border-top: 2px solid rgba(var(--ps-primary-rgb), 0.3) !important; }
#storePreview .item-card-name { color: var(--ps-text) !important; }
#storePreview .item-card-desc { color: var(--ps-text-muted) !important; }
#storePreview .item-overlay {
  background: linear-gradient(transparent, rgba(var(--ps-primary-rgb), 0.15), rgba(0,0,0,0.75)) !important;
  color: #fff !important;
}

/* Add item card */
#storePreview .add-item-card span { color: var(--ps-text-muted) !important; }
#storePreview .add-item-card:active { border-color: var(--ps-primary) !important; }
#storePreview .add-item-card:active span { color: var(--ps-primary) !important; }

/* Empty state */
#storePreview .store-empty-card {
  background: var(--ps-surface) !important;
  border: 2px dashed rgba(var(--ps-primary-rgb), 0.18) !important;
  border-radius: 18px;
}
#storePreview .store-empty-text { color: var(--ps-text) !important; }
#storePreview .store-empty-sub  { color: var(--ps-text-muted) !important; }

/* Ad space */
#storePreview .ad-space {
  border: 1px dashed rgba(var(--ps-primary-rgb), 0.12) !important;
  background: var(--ps-surface) !important;
}
#storePreview .ad-space-label { color: var(--ps-text-muted) !important; }

/* Accordion body */
#storePreview .category-accordion-body { background: transparent; }

/* Drag placeholder */
#storePreview .item-drag-placeholder {
  border-color: var(--ps-primary) !important;
  background: rgba(var(--ps-primary-rgb), 0.07) !important;
}

/* =========================
   PS-323 — DEPRECATED CLASS KILL
   No button using these classes should ever be visible.
   They are all replaced by .ps-btn-primary and .ps-btn-ghost.
========================= */
.pbar-btn,
.pbar-btn-primary,
.pbar-btn-secondary,
.pbar-btn.active,
.pbar-btn.ps-selected,
.pbar-btn-primary.active {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* =========================
   TOGGLE SYSTEM (settings drawer)
========================= */
.toggle {
  position: relative; display: inline-block;
  width: 44px; height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ps-surface-4); border-radius: 24px;
  transition: background var(--ps-transition);
  border: 1px solid var(--ps-border-1);
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ps-text-muted);
  left: 2px; bottom: 2px;
  transition: transform var(--ps-transition), background var(--ps-transition);
}
.toggle input:checked + .toggle-slider { background: var(--ps-primary); border-color: var(--ps-primary); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px); background: #000;
}

/* =========================
   SETTINGS THUMBNAIL (Logo thumb in right drawer)
========================= */
#settingsLogoPreview {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--ps-surface-3); border: 1px dashed var(--ps-border-2);
  overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
#settingsLogoPreview:hover { border-color: var(--ps-primary); }
#settingsLogoPreview .settings-logo-thumb {
  width: 100%; height: 100%; object-fit: cover; display: none;
}

/* Color trio in appearance section */
.color-trio {
  display: flex; gap: 12px; padding: 4px 0;
}
.color-trio-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
}
.color-trio-item label {
  font-size: 10px; font-weight: 600; color: var(--ps-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.color-trio-item input[type="color"] {
  width: 100%; height: 44px; border-radius: 10px;
  border: 1px solid var(--ps-border-1); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.color-trio-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 8px; }
.color-trio-item input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }

/* =========================
   RADIAL MENU
========================= */
.ps-radial-menu {
  animation: radialIn 0.16s var(--ps-ease, cubic-bezier(0.22,1,0.36,1)) both;
}
@keyframes radialIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.ps-radial-wrap {
  display: flex; gap: 8px; padding: 8px 12px;
  background: rgba(12,12,16,0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ps-border-1); border-radius: 14px;
  box-shadow: var(--ps-depth-3);
}
.ps-radial-wrap button {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  color: var(--ps-text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.ps-radial-wrap button:active { transform: scale(0.88); background: var(--ps-primary); color: #000; }

/* =========================
   CLIENT / CUSTOMER DETAIL
========================= */
.client-detail-info { margin-bottom: 16px; }
.client-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--ps-border-1); font-size: 14px;
}
.cdr-label { color: var(--ps-text-muted); font-size: 13px; }
.cdr-value { font-weight: 500; }
.client-stat-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.client-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; background: var(--ps-surface-2);
  border: 1px solid var(--ps-border-1); border-radius: var(--ps-radius-sm); cursor: pointer;
}
.cs-num { font-size: 18px; font-weight: 700; color: var(--ps-primary); }
.cs-label { font-size: 11px; color: var(--ps-text-muted); }
.client-action-bar { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ps-border-1); }
.ca-btn {
  flex: 1; padding: 10px; border-radius: var(--ps-radius-sm);
  border: 1px solid var(--ps-border-1); background: var(--ps-surface-3);
  color: var(--ps-text); font-family: var(--ps-font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--ps-transition);
}
.ca-btn:active { transform: scale(0.95); }
.ca-remove { color: var(--ps-danger); border-color: rgba(255,77,77,0.16); }
.ca-block  { color: var(--ps-warning); border-color: rgba(255,190,66,0.16); }
.ca-notify { background: var(--ps-primary); color: #000; border-color: var(--ps-primary); }

/* Client QR */
.cd-qr-section { text-align: center; padding: 16px 0; }
.cd-qr-section h4 { font-size: 13px; color: var(--ps-text-muted); margin-bottom: 10px; }
.cd-qr-code { display: flex; justify-content: center; }
.cd-detail-list { padding: 8px 0; }

/* =========================
   LAYOUT EDITOR (Card Editor)
========================= */
.layout-preview-card { padding: 8px 0; }
.layout-hint { font-size: 12px; color: var(--ps-text-muted); margin-bottom: 12px; }

.mock-card {
  background: var(--ps-surface-2); border: 1px solid var(--ps-border-1);
  border-radius: var(--ps-radius); overflow: hidden;
}
.mock-card-image-zone { background: var(--ps-surface-3); min-height: 80px; padding: 4px; }
.mock-card-body-zone  { padding: 4px; }

.mock-comp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 4px;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  transition: all 0.15s;
}
.mock-comp.mock-hidden { opacity: 0.4; }
.mock-comp.mock-dragging { opacity: 0.6; z-index: 50; box-shadow: var(--ps-depth-2); }
.mock-comp.mock-drop-target.mock-drop-above { box-shadow: 0 -2px 0 var(--ps-primary); }
.mock-comp.mock-drop-target.mock-drop-below { box-shadow: 0 2px 0 var(--ps-primary); }

.mock-comp-content { font-size: 12px; flex: 1; }
.mock-image  { font-size: 11px; opacity: 0.6; }
.mock-badge  { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.mock-price  { background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))); color: var(--ps-on-accent,#06110e); }
.mock-type   { background: rgba(200,60,200,0.85); color: #fff; }
.mock-overlay{ font-size: 10px; opacity: 0.7; }
.mock-name   { font-size: 12px; font-weight: 600; }
.mock-desc   { font-size: 10px; opacity: 0.6; }

.mock-comp-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mock-align-toggle,
.mock-color-toggle,
.mock-vis-toggle {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--ps-glass-1); border: 1px solid var(--ps-border-1);
  color: var(--ps-text-muted); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.mock-align-toggle:active,
.mock-color-toggle:active,
.mock-vis-toggle:active { background: var(--ps-primary); color: #000; }

.mock-drag-grip {
  color: var(--ps-text-muted); font-size: 14px; cursor: grab;
  padding: 0 4px; opacity: 0.6;
}
.mock-drag-grip:active { cursor: grabbing; }

.mock-color-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15); display: block;
}
.mock-color-dot-default { background: rgba(255,255,255,0.15); }

.mock-color-palette {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px; background: var(--ps-surface-2);
  border: 1px solid var(--ps-border-1); border-radius: 10px;
  position: absolute; z-index: 50;
  box-shadow: var(--ps-depth-2);
}
.mock-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; transition: all 0.15s;
}
.mock-swatch.active { border-color: var(--ps-primary); transform: scale(1.15); }
.mock-swatch-default { background: rgba(255,255,255,0.15); }
.mock-swatch:active { transform: scale(0.9); }

/* Sort style options */
.sort-options { display: flex; gap: 8px; margin-bottom: 16px; }
.sort-opt {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 14px 8px;
  background: var(--ps-surface-2); border: 2px solid var(--ps-border-1);
  border-radius: var(--ps-radius); color: var(--ps-text-muted);
  font-family: var(--ps-font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--ps-transition);
}
.sort-opt:active { transform: scale(0.95); }
.sort-opt.active {
  border-color: rgba(var(--ps-primary-rgb), 0.45);
  color: var(--ps-primary);
  background: rgba(var(--ps-primary-rgb), 0.06);
}
.sort-sub-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-sub-options h4 { width: 100%; font-size: 12px; color: var(--ps-text-muted); margin-bottom: 4px; }
.sort-sub {
  padding: 8px 14px; background: var(--ps-surface-2);
  border: 1px solid var(--ps-border-1); border-radius: 20px;
  color: var(--ps-text-muted); font-family: var(--ps-font);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--ps-transition);
}
.sort-sub.active { background: var(--ps-primary); color: #000; border-color: var(--ps-primary); }

/* =========================
   MEDIA / IMAGE PREVIEW
========================= */
.media-preview-zone {
  width: 100%; min-height: 120px; border-radius: 12px;
  background: var(--ps-surface-3); border: 1px solid var(--ps-border-1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.media-preview-sm { min-height: 80px; }
.media-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; color: var(--ps-text-muted); font-size: 12px; opacity: 0.5;
}
.media-placeholder svg { opacity: 0.35; }

.item-image-upload { margin-bottom: 14px; }
.item-image-preview {
  width: 100%; height: 140px; border-radius: 12px;
  background: var(--ps-surface-3); border: 1px dashed var(--ps-border-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ps-text-muted); font-size: 13px; cursor: pointer;
  overflow: hidden;
}
.item-image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* =========================
   SEG BUTTONS (announcements modal)
========================= */
.seg-btn {
  padding: 8px 14px; border-radius: 8px;
  background: transparent; color: var(--ps-text-muted);
  border: none; cursor: pointer; transition: all 0.2s; font-family: var(--ps-font);
}
.seg-btn.active {
  background: var(--ps-surface-2); color: var(--ps-text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* =========================
   REG FIELD TOGGLES
========================= */
.reg-field-toggles { display: flex; flex-direction: column; gap: 8px; }
.settings-field.toggle-field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--ps-border-1);
  font-size: 14px;
}
.settings-field.toggle-field:last-child { border-bottom: none; }
.settings-btn {
  padding: 8px 14px; background: var(--ps-surface-3);
  border: 1px solid var(--ps-border-1); border-radius: var(--ps-radius-sm);
  color: var(--ps-text); font-family: var(--ps-font); font-size: 13px;
  cursor: pointer; transition: all var(--ps-transition);
}
.settings-btn:active { transform: scale(0.96); }
/* ───────── FLOATING SAVE BAR ───────── */

.ps-floating-actions {
  position: fixed;
  top: calc(var(--topbar-height, 72px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10003;

  display: flex;
  gap: 10px;
  padding: 8px 12px;

  background: rgba(20,20,26,.85);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;

  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.ps-floating-actions.hidden {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════
   PS-412 COMPONENT BADGE SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   PS-412 COMPONENT BADGE SYSTEM — Premium Glass UI
   ═══════════════════════════════════════════════════════ */

.ps-badge {
  position: absolute;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(20,20,28,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  pointer-events: none;
  font-family: var(--ps-font, system-ui);
  white-space: nowrap;
  color: #fff;
}

/* Countdown — top right */
.ps-badge-countdown {
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, rgba(0,0,0,0.72), rgba(0,0,0,0.32));
  color: #fff;
}

.ps-badge-countdown.ps-countdown-urgent {
  background: linear-gradient(135deg, rgba(200,30,30,0.72), rgba(180,0,0,0.32));
  border-color: rgba(255,80,80,0.4);
  color: #ffaaaa;
  animation: psBadgePulse 1.2s ease-in-out infinite;
}

@keyframes psBadgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .62; }
}

/* Location — top left */
.ps-badge-location {
  top: 10px;
  left: 10px;
  color: #fff;
}

/* Dropship — bottom left */
.ps-badge-dropship {
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

/* Special price — full-width bottom overlay */
.ps-price-special {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
  pointer-events: none;
  border-radius: 0 0 inherit inherit;
}

.ps-price-special-main {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ps-primary,#00e676);
  font-family: var(--ps-font, system-ui);
}

.ps-price-special-orig {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  font-family: var(--ps-font, system-ui);
}

/* Sizes — bottom right pills */
.ps-sizes {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 65%;
  z-index: 10;
  pointer-events: none;
}

.ps-size-pill {
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-family: var(--ps-font, system-ui);
  letter-spacing: .04em;
}

/* PS-413 zone containers */
.ps-card-hero { padding: 8px 10px 4px; }

.ps-card-strip {
  display: flex;
  gap: 6px;
  padding: 6px 10px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-card-strip::-webkit-scrollbar { display: none; }

.ps-card-meta {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.ps-comp-image-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

.ps-component-host {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px;
}

.ps-comp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--ps-font, system-ui);
}

.ps-comp-countdown {
  background: rgba(255,255,255,0.08);
  color: var(--ps-text, #fff);
  border: 1px solid rgba(255,255,255,0.12);
}

.ps-comp-countdown.expired {
  background: rgba(255,60,60,0.12);
  color: #ff6b6b;
  border-color: rgba(255,60,60,0.25);
}

/* ═══════════════════════════════════════════════════════
   ITEM CARD LAYOUT SYSTEM (CSS-only visual modes)
   ═══════════════════════════════════════════════════════ */

/* Default — standard display */
.layout-default { }

/* Minimal — quieter, reduced emphasis */
.layout-minimal {
  --text-scale: 0.9;
  opacity: 0.9;
}
.layout-minimal .item-card-name { font-size: calc(13px * 0.9); }
.layout-minimal .item-badge     { display: none; }

/* Compact — dense grid tile */
.layout-compact {
  --text-scale: 0.85;
  padding: 0;
}
.layout-compact .item-card-image { height: 100px; }
.layout-compact .item-card-body  { padding: 6px 8px 8px; }
.layout-compact .item-card-name  { font-size: calc(13px * 0.85); }

/* Emphasis — hero / featured card */
.layout-emphasis {
  --text-scale: 1.1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.layout-emphasis .item-card-image { height: 220px; }
.layout-emphasis .item-card-name  { font-size: calc(13px * 1.1); font-weight: 800; }

/* Legacy layout- prefixed variants (used by earlier system) */
.item-card-layout-default .item-card-image  { height: 180px; border-radius: 14px 14px 0 0; }
.item-card-layout-default .item-card-body   { padding: 10px 12px 12px; }
.item-card-layout-minimal .item-card-image  { height: 155px; border-radius: 12px; }
.item-card-layout-minimal .item-card-body   { padding: 8px 10px 10px; }
.item-card-layout-minimal .item-card-name   { font-size: 12px; }
.item-card-layout-minimal .item-badge       { display: none; }
.item-card-layout-list                      { display: flex !important; flex-direction: row; width: 100% !important; min-width: 0 !important; border-radius: 14px; }
.item-card-layout-list .item-card-image     { width: 88px !important; min-width: 88px; height: 88px !important; border-radius: 14px 0 0 14px; flex-shrink: 0; }
.item-card-layout-list .item-card-body      { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
.item-card-layout-list .item-card-name      { font-size: 13px; font-weight: 700; white-space: normal; }
.item-card-layout-compact .item-card-image  { height: 100px; }
.item-card-layout-compact .item-card-body   { padding: 6px 8px 8px; }
.item-card-layout-compact .item-card-name   { font-size: 11px; }

/* ═══════════════════════════════════════════════════════
   AUTH MODAL UI — Simple, premium, mobile-first
   ═══════════════════════════════════════════════════════ */

.ps-auth-modal {
  background: rgba(20,20,28,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.ps-auth-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 2px;
  color: var(--ps-text, #fff);
  font-family: var(--ps-font, system-ui);
}

.ps-auth-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  font-family: var(--ps-font, system-ui);
  margin: 0;
}

.ps-auth-field { display: flex; flex-direction: column; gap: 8px; }

.ps-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: var(--ps-font, system-ui);
  font-size: 16px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}

.ps-auth-input:focus {
  border-color: var(--accent, var(--ps-primary,#00e676));
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--ps-primary,#00e676) 12%,transparent);
  background: rgba(255,255,255,0.07);
}

.ps-auth-input::placeholder { color: rgba(255,255,255,0.22); }

.ps-auth-btn {
  margin-top: 4px;
  padding: 14px;
  border-radius: 12px;
  background: var(--accent, var(--ps-primary,#00e676));
  border: none;
  color: #000;
  font-family: var(--ps-font, system-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: opacity .15s, transform .12s;
  box-shadow: 0 4px 18px color-mix(in srgb,var(--ps-primary,#00e676) 28%,transparent);
}
.ps-auth-btn:active { opacity: .85; transform: scale(0.98); }

.ps-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--ps-font, system-ui);
}
.ps-auth-divider::before,
.ps-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.ps-auth-link {
  font-size: 13px;
  color: var(--accent, var(--ps-primary,#00e676));
  font-family: var(--ps-font, system-ui);
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  transition: opacity .15s;
}
.ps-auth-link:active { opacity: .6; }

/* Step transitions */
.ps-auth-step { transition: opacity .18s, transform .18s; }
.ps-auth-step.ps-auth-step-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* Light mode */
body[data-appearance="light"] .ps-auth-modal {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.07);
}
body[data-appearance="light"] .ps-auth-title  { color: var(--ps-text, #111); }
body[data-appearance="light"] .ps-auth-sub    { color: rgba(0,0,0,0.42); }
body[data-appearance="light"] .ps-auth-input  {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: var(--ps-text, #111);
}
body[data-appearance="light"] .ps-auth-input::placeholder { color: rgba(0,0,0,0.28); }
body[data-appearance="light"] .ps-auth-input:focus        { background: rgba(0,0,0,0.06); }

/* Badge light overrides */
body[data-appearance="light"] .ps-badge-countdown,
body[data-appearance="light"] .ps-badge-location {
  background: rgba(255,255,255,0.88);
  color: #111;
  border-color: rgba(0,0,0,0.1);
}

/* ═════════════════════════════════════════════════════════════════
   PASS · HEADER LIVE PILL
   Truth-based indicator for live/active. Does NOT depend on addons.
   Hidden by default; .is-live reveals and animates. Placed absolute
   inside #topBar — the scoped position:relative below ensures the
   pill anchors to the header, not the viewport.
═════════════════════════════════════════════════════════════════ */
#topBar { position: relative; }

.ps-live-pill {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 20;

  padding: 6px 12px 6px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;

  background: linear-gradient(
    180deg,
    rgba(255, 0, 60, 0.18),
    rgba(255, 0, 60, 0.10)
  );
  color: var(--ps-danger, #ff2d55);
  border: 1px solid rgba(255, 0, 60, 0.35);

  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  display: none;
  align-items: center;
  gap: 6px;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ps-live-pill.is-live {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
  animation: psLivePulse 1.2s ease-in-out infinite;
}

.ps-live-pill .ps-live-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ps-danger, #ff2d55);
  box-shadow:
    0 0 0 0 rgba(255, 45, 85, 0.55),
    0 0 8px rgba(255, 45, 85, 0.9);
  animation: psLivePillDot 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes psLivePulse {
  0% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 0 rgba(255, 45, 85, 0.55);
  }
  70% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 10px rgba(255, 45, 85, 0);
  }
  100% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 0 rgba(255, 45, 85, 0);
  }
}

@keyframes psLivePillDot {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 45, 85, 0.8);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 14px rgba(255, 45, 85, 1);
  }
}

/* Light-theme override — keep contrast on pale headers */
body[data-appearance="light"] .ps-live-pill {
  background: linear-gradient(
    180deg,
    rgba(255, 0, 60, 0.12),
    rgba(255, 0, 60, 0.06)
  );
  border-color: rgba(255, 0, 60, 0.30);
}

/* ════════════════════════════════════════════════════════════════
   PS-462 — DOUBLE CAROUSEL ITEM MANAGER
   Replaces the accordion category groups with two horizontal rails:
     1. Category pill carousel (filter + drop target)
     2. Item card carousel (filtered, drag-source)
   Theme tokens only — no hardcoded color drift.
═══════════════════════════════════════════════════════════════════ */

/* ── Category pill carousel ─────────────────────────────────────── */
.ps-cat-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 12px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    var(--ps-bg, #0a0a0a) 0%,
    var(--ps-bg, #0a0a0a) 70%,
    rgba(0,0,0,0) 100%
  );
}
.ps-cat-bar::-webkit-scrollbar { display: none; }

.ps-cat-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ps-text, #fff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease,
              box-shadow 200ms ease;
}
.ps-cat-pill:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
}
.ps-cat-pill:active {
  transform: scale(0.96);
}

/* Active filter — solid accent fill for unmistakable selection */
.ps-cat-pill.active {
  background: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: #000;
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  box-shadow: 0 0 14px rgba(var(--ps-accent-rgb, 0,230,118), 0.42);
}

/* Drop-target highlight while an item is being dragged toward it */
.ps-cat-pill.item-drop-cat-target {
  background: rgba(var(--ps-accent-rgb, 0,230,118), 0.22);
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  color: var(--ps-text, #fff);
  box-shadow: 0 0 18px rgba(var(--ps-accent-rgb, 0,230,118), 0.55);
  transform: scale(1.05);
}

/* ── Item card carousel ─────────────────────────────────────────── */
.ps-item-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 8px 12px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ps-item-row::-webkit-scrollbar { display: none; }

/* The cards inside the row use the existing .item-card builder.
   Force them to behave as horizontal carousel children regardless
   of their inline style.                                          */
.ps-item-row > .item-card,
.ps-item-row > .add-item-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ── Theme integration: enhanced visual depth on item cards ──────
   These rules layer on top of existing .item-card styles without
   overriding sizing or layout — only background depth + selected
   state + accent text colors.                                     */
.ps-item-row .item-card {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.85) 100%
  );
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle primary-tinted radial halo at top of each card */
.ps-item-row .item-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(var(--ps-primary-rgb, 0,230,118), 0.14) 0%,
    rgba(var(--ps-primary-rgb, 0,230,118), 0.04) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
.ps-item-row .item-card > * {
  position: relative;
  z-index: 1;
}

/* Selected card glows with accent */
.ps-item-row .item-card.selected,
.ps-item-row .item-card.is-selected {
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  box-shadow: 0 0 14px rgba(var(--ps-accent-rgb, 0,230,118), 0.45),
              0 0 0 1px var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff)))) inset;
}

/* Drag source — slight lift + accent ring */
.ps-item-row .item-card.item-dragging-source {
  opacity: 0.45;
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

/* Theme-aware text inside cards (only applies inside the new row,
   so the existing card builder keeps its rules elsewhere)         */
.ps-item-row .item-card .item-name,
.ps-item-row .item-card .ps-item-name {
  color: var(--ps-text, #fff);
}
.ps-item-row .item-card .item-price,
.ps-item-row .item-card .ps-item-price,
.ps-item-row .item-card .item-badge,
.ps-item-row .item-card .ps-item-badge {
  color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
}

/* Add-item-card mini matches new row aesthetic */
.ps-item-row .add-item-card {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(var(--ps-accent-rgb, 0,230,118), 0.45);
  color: rgba(var(--ps-accent-rgb, 0,230,118), 1);
  transition: border-color 160ms ease, background 160ms ease,
              transform 120ms ease;
}
.ps-item-row .add-item-card:hover {
  border-color: var(--ps-price-pill-bg,var(--ps-accent,var(--ps-primary,var(--ps-text,#fff))));
  background: rgba(var(--ps-accent-rgb, 0,230,118), 0.06);
}
.ps-item-row .add-item-card:active {
  transform: scale(0.96);
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps-cat-pill,
  .ps-item-row .item-card,
  .ps-item-row .add-item-card {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   PS-478 — THEME MICRO ANIMATION + UNSAVED GLOW
════════════════════════════════════════════════════════════════ */

/* Part 5 — Preview pulse on theme change */
.ps-theme-animate .item-card {
  animation: psThemePulse 0.35s ease;
}

@keyframes psThemePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Part 6 — Unsaved state glow on save/reset bar */
#psThemeActions.ps-unsaved {
  box-shadow:
    0 0 20px rgba(var(--ps-primary-rgb), 0.35),
    0 0 40px rgba(var(--ps-primary-rgb), 0.15);
  animation: psUnsavedPulse 1.6s infinite;
}

@keyframes psUnsavedPulse {
  50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-theme-animate .item-card,
  #psThemeActions.ps-unsaved {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   PS-423/424 — DIRTY STATE + THEME CONTAINMENT VISUAL SYSTEM
════════════════════════════════════════════════════════════════ */

/* PART 3A — Global dirty mode: preview focus */
body.ps-dirty #storePreview {
  transform: scale(1.01);
  transition: transform 200ms ease;
}

/* PART 3B — Dim elements outside preview */
.ps-dimmed {
  opacity: 0.25;
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 200ms ease, filter 200ms ease;
}

/* PART 3C — Dirty pulse on changed elements */
.ps-dirty-pulse {
  animation: psPulse 1.2s infinite ease-in-out;
}

@keyframes psPulse {
  0%   { box-shadow: 0 0 0 rgba(var(--ps-accent-rgb, 0,230,118), 0); }
  50%  { box-shadow: 0 0 18px rgba(var(--ps-accent-rgb, 0,230,118), 0.45); }
  100% { box-shadow: 0 0 0 rgba(var(--ps-accent-rgb, 0,230,118), 0); }
}

/* PART 3D — Save glare sweep on clear */
.ps-dirty-glare {
  position: relative;
  overflow: hidden;
}
.ps-dirty-glare::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: psGlare 0.8s ease forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes psGlare {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-dirty-pulse,
  body.ps-dirty #storePreview {
    animation: none;
    transform: none;
  }
  .ps-dirty-glare::after {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PS-450 — LEFT DRAWER ITEMS (COMPACT VARIANT)
   ────────────────────────────────────────────────────────────────────
   Same .item-card / .item-card-mini DNA as Live Preview.
   The .item-card-drawer modifier — applied only inside
   .ps-drawer-items-row — tightens dimensions and slightly bumps
   the price badge for a focused, fast-access strip.
   No new card system; no theme overrides; existing tokens only.
   ════════════════════════════════════════════════════════════════════ */

/* Horizontal strip — single row, smooth touch scroll */
.ps-drawer-items-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ps-drawer-items-row::-webkit-scrollbar { height: 6px; }
.ps-drawer-items-row::-webkit-scrollbar-track { background: transparent; }
.ps-drawer-items-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

/* Empty state */
.ps-drawer-items-row .lz-empty {
  width: 100%;
  text-align: center;
  padding: 18px 0;
  font-size: 12px;
  color: var(--ps-text-muted, rgba(255, 255, 255, 0.55));
}

/* ── Card sizing (compact) ── */
.ps-drawer-items-row .item-card.item-card-drawer {
  width: 124px;
  flex: 0 0 124px;
  scroll-snap-align: start;
  cursor: pointer;
}

/* Tighter image */
.ps-drawer-items-row .item-card-drawer .item-card-image {
  height: 96px;
  border-radius: 12px;
}

/* Tighter body, name below image (existing structure preserved) */
.ps-drawer-items-row .item-card-drawer .item-card-body {
  padding: 6px 8px 8px;
}

.ps-drawer-items-row .item-card-drawer .item-card-name {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  /* Single line in the strip; full name visible on tap (expanded card) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-drawer-items-row .item-card-drawer .item-card-desc {
  display: none; /* description belongs to the expanded view */
}

/* ── Badges — same classes, slightly emphasized in drawer ── */
.ps-drawer-items-row .item-card-drawer .item-badge-price {
  top: 6px;
  left: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 9px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ps-drawer-items-row .item-card-drawer .item-badge-type {
  top: 6px;
  right: 6px;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 8px;
}

/* Suppress any admin-only chrome that the mini layout would normally
   show. The drawer branch in _assembleCard already omits the delete
   button, but this is a safety net in case of future additions. */
.ps-drawer-items-row .item-card-drawer .item-delete-btn {
  display: none !important;
}

/* Press feedback — matches existing .item-card:active scale */
.ps-drawer-items-row .item-card-drawer:active {
  transform: scale(0.96);
}



/* When drawer-active, defer to whatever transform the drawer-push
   system applies (no explicit rule needed — absence of override
   lets existing systems set transform freely). */

/* ── Logo container: animation host ─────────────────────────────── */
#psLogoZone {
  overflow: visible;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 220ms ease;
  border-radius: 14px;
}

/* (a) ENTER — snap-in when logo is applied to zone */
#psLogoZone.ps-logo-enter {
  transform: scale(1.08);
  opacity: 0;
}

#psLogoZone.ps-logo-enter-active {
  transform: scale(1);
  opacity: 1;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1),
              opacity  180ms ease-out;
}

/* (b) PULSE — empty-state tap */
#psLogoZone.ps-logo-pulse {
  animation: psLogoPulse 600ms ease;
}

@keyframes psLogoPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* (c) EDITING — soft glow while resize/rotate handles are visible */
#psLogoZone.ps-logo-editing {
  transform: scale(1.04);
  box-shadow:
    0 0 0 1px rgba(var(--ps-primary-rgb, 0, 230, 118), 0.45),
    0 6px 24px rgba(var(--ps-primary-rgb, 0, 230, 118), 0.28);
}

/* (d) SNAP — quick settle after save */
#psLogoZone.ps-logo-snap {
  animation: psLogoSnap 300ms ease;
}

@keyframes psLogoSnap {
  0%   { transform: scale(1.04); }
  55%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Reduced motion — respect user preference everywhere above. */
@media (prefers-reduced-motion: reduce) {
  #psLogoZone,
  #psLogoZone.ps-logo-enter,
  #psLogoZone.ps-logo-enter-active,
  #psLogoZone.ps-logo-pulse,
  #psLogoZone.ps-logo-editing,
  #psLogoZone.ps-logo-snap {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PS-452 — DRAWER CATEGORY CAROUSEL
   ────────────────────────────────────────────────────────────────────
   Reuses existing .ps-cat-pill styles. .ps-drawer-cat-pill is a marker
   class (zero own styles required) used for delegation scoping so we
   never collide with the preview's own .ps-cat-bar interactions.
   ════════════════════════════════════════════════════════════════════ */

.ps-drawer-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ps-drawer-cats::-webkit-scrollbar { display: none; }

/* Tighten existing pill sizing inside the drawer scope only.
   Inherits all colors, hover, active states from the base .ps-cat-pill
   rules already defined elsewhere in this file. */
.ps-drawer-cats .ps-drawer-cat-pill {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 5px 11px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   PS-436 — PAYMENTS UI
   ════════════════════════════════════════════════════════════════════ */

/* ── Checkout block ── */
.ps436-checkout {
  padding: 16px 0 8px;
}

.ps436-checkout__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 10px;
  font-family: var(--ps-font, system-ui);
}

.ps436-checkout__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ps436-method-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 14px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  font-family: var(--ps-font, system-ui);
  transition: all .15s ease;
  min-width: 64px;
}

.ps436-method-pill:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
}

.ps436-method-pill.ps436-method--active {
  background: rgba(var(--ps-primary-rgb, 0, 230, 118), .12);
  border-color: rgba(var(--ps-primary-rgb, 0, 230, 118), .45);
  color: var(--ps-primary,#00e676);
  box-shadow: 0 0 12px rgba(var(--ps-primary-rgb, 0, 230, 118), .22);
}

.ps436-method-icon {
  font-size: 18px;
  line-height: 1;
}

.ps436-method-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.ps436-method-handle {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .4);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps436-method-pill.ps436-method--active .ps436-method-handle {
  color: rgba(var(--ps-primary-rgb, 0, 230, 118), .7);
}

/* Required fields */
.ps436-checkout__required {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.ps436-checkout__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ps436-checkout__label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  font-family: var(--ps-font, system-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ps436-checkout__input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--ps-text, #fff);
  font-family: var(--ps-font, system-ui);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}

.ps436-checkout__input:focus {
  border-color: var(--ps-primary,#00e676);
  box-shadow: 0 0 0 3px rgba(var(--ps-primary-rgb, 0, 230, 118), .14);
}

.ps436-checkout__input::placeholder {
  color: rgba(255, 255, 255, .22);
}

/* Instructions */
.ps436-checkout__instructions {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--ps-font, system-ui);
}

/* ── Item editor Payments section ── */
.ps436-item-pay-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ps436-item-pay-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ps436-item-pay__header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 12px;
  font-family: var(--ps-font, system-ui);
}

.ps436-item-pay__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.ps436-item-pay__rowlabel {
  font-size: 13px;
  color: var(--ps-text, #fff);
  font-family: var(--ps-font, system-ui);
}

.ps436-item-pay__sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 8px 0 4px;
  font-family: var(--ps-font, system-ui);
}

.ps436-item-pay__overrides {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ps436-item-pay__overrides.ps436-hidden {
  display: none;
}

/* Toggle reuse — piggybacks existing .ps436-toggle if present,
   or defines minimal toggle here */
.ps436-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.ps436-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ps436-toggle__track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
  transition: background .2s;
  cursor: pointer;
}

.ps436-toggle__track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transition: transform .2s, background .2s;
}

.ps436-toggle input:checked + .ps436-toggle__track {
  background: var(--ps-primary,#00e676);
}

.ps436-toggle input:checked + .ps436-toggle__track::after {
  transform: translateX(18px);
  background: #000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps436-method-pill,
  .ps436-checkout__input,
  .ps436-toggle__track,
  .ps436-toggle__track::after {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PS-515 — Inline Edit + Shortcode Helper
   Hooks into HeaderSystem._startInlineEdit (no new edit system).
   Edit state is signaled by [data-editing="true"] on the row,
   set/cleared by HeaderSystem itself.
   ═══════════════════════════════════════════════════════════════════ */

/* Dashed focus state — replaces the previous inline solid outline */
.header-row[data-editing="true"] .header-row-text,
.ps-header-row[data-editing="true"] .header-row-text {
  outline: 1px dashed var(--ps-primary, #c8ff00);
  outline-offset: 1px;
  border-radius: 6px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.04);
  /* PS-516 Fix 2 — guarantee the editable cannot collapse vertically
     when content is empty mid-edit. NO display:inline-block — that
     would break the parent's text-overflow:ellipsis. */
  min-height: 1em;
}

/* PS-516 Fix 3 — promote editing row to its own compositor layer.
   Eliminates sub-pixel jitter on the dashed outline during keyboard
   show/hide on Android Chrome. */
.header-row[data-editing="true"],
.ps-header-row[data-editing="true"] {
  transform: translateZ(0);
}

/* Floating shortcode helper — fires when inline edit activates */
#psShortcodeBox {
  position: fixed;
  z-index: 10005;
  background: rgba(15,15,20,0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 280px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  font-family: var(--ps-font, inherit);
  animation: psShortcodeIn 0.18s ease;
  /* PS-516 Fix 4 — compositor layer for jank-free repositioning when
     the keyboard appears/dismisses; long variable names wrap cleanly
     instead of overflowing the panel. translateZ applies after the
     entrance animation completes (keyframes own transform during play). */
  transform: translateZ(0);
  overflow-wrap: break-word;
}

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

.ps-shortcode-title {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.ps-shortcode-btn {
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ps-shortcode-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(var(--ps-primary-rgb, 200,255,0), 0.35);
}
.ps-shortcode-btn:active {
  background: var(--ps-primary, #c8ff00);
  color: #000;
}

/* ═══════════════════════════════════════════════════════════════════
   PS-517 — Header Visual Correction
   • Fix 3: center the empty-state "+" using absolute fill
   • Fix 4: kill the persistent green-pill background on the greeting
   Targets the newer (canonical) cascade so these rules win against
   the older mid-file copies of the same selectors.
   ═══════════════════════════════════════════════════════════════════ */

/* PS-517 Fix 3 — logo "+" centering.
   Absolute fill inside the empty-state zone guarantees the glyph sits
   dead-center regardless of how many siblings (status dot, OPEN badge)
   the zone happens to render. pointer-events:none lets taps fall
   through to the zone itself, so the existing showHandles / file-picker
   click handler at frontend.js#~2244 still works unchanged. */
.ps-logo-zone {
  position: relative;
}
.ps-logo-zone.empty .ps-logo-plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: rgba(255,255,255,0.8);
  opacity: 1;
  pointer-events: none;
}

/* PS-517 Fix 4 — kill the greeting "pill" look.
   Two sources cause the unwanted rounded background:
     1. .header-row { border-radius: 6px } + sticky :hover on Android
     2. any inherited padding/background on .header-row-text
   Solution: gate :hover behind (hover: hover) so it never sticks on
   touch devices, and zero out background/border-radius on the row +
   text in their idle state. The PS-515 dashed [data-editing="true"]
   rule has higher specificity and remains unaffected for edit mode. */
.header-row,
.ps-header-row {
  background: none;
  border-radius: 0;
}
.header-row .header-row-text,
.ps-header-row .header-row-text {
  background: none;
  border-radius: 0;
  /* Keep small horizontal padding so the dashed edit outline (PS-515)
     has room to breathe without shifting the layout when it appears. */
  padding: 0 2px;
}

/* Sticky-hover fix — only paint the hover state on devices that
   actually have a pointer that can hover. Eliminates the "stuck pill"
   after a tap on Android Chrome / iOS Safari. */
@media (hover: hover) and (pointer: fine) {
  .header-row:hover,
  .ps-header-row:hover {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
  }
}

/* PS-517B Fix 3 — force greeting to plain text (no pill). */
.ps-header-greeting {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* PS-517B Fix 4 — kill logo zone border once a logo is loaded. */
.ps-logo-zone[data-has-logo="1"] {
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PS-521 — Component picker carousel UI
   Mounted inside #psHeaderRows by frontend.js when ps:components:open
   fires. Horizontal scroll of available components.
   ═══════════════════════════════════════════════════════════════════ */
.ps-component-carousel {
  /* PS-527 Bug 5 — explicit in-flow stacking under the chip wrap.
     z-index: 0 ensures it never floats above the chip row regardless
     of stacking-context churn from animation/transform. */
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 10px;
  z-index: 0;
  gap: 10px;
  padding: 10px 12px;

  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;

  animation: psCompCarouselIn 0.18s ease;
}
.ps-component-carousel::-webkit-scrollbar { display: none; }

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

.ps-comp-card {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;

  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}

.ps-comp-card__icon {
  font-size: 14px;
  line-height: 1;
}

/* Hover state gated to hover-capable devices to prevent sticky-hover
   on Android Chrome / iOS Safari (same pattern as PS-517 Fix 4). */
@media (hover: hover) and (pointer: fine) {
  .ps-comp-card:hover {
    background: var(--ps-primary, #c8ff00);
    color: #000;
    border-color: transparent;
  }
}

.ps-comp-card:active {
  transform: scale(0.96);
  background: var(--ps-primary, #c8ff00);
  color: #000;
}

/* ═══════════════════════════════════════════════════════════════════
   PS-525 Fix 4 — Greeting size + 2-line clamp (greeting only).
   Scoped to .ps-header-greeting .header-row-text so it does NOT
   affect shopName, phone, location, hours, or any other header row.
   Cascades after the existing .header-row-text rule (line 2305) so
   font-size + line-clamp win without !important.
   ═══════════════════════════════════════════════════════════════════ */
.ps-header-greeting .header-row-text {
  font-size: clamp(18px, 4vw, 28px);
  line-height: 1.2;
  font-weight: 600;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  word-break: break-word;
  white-space: normal;       /* override .ps-header-row { white-space: nowrap } */
  text-overflow: clip;       /* line-clamp owns the truncation */
}

/* Shop workspace stabilization */
#psShopAnalyticsHost{position:relative!important;width:100%!important;flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
#productsZone{min-height:0!important;transform:none!important;top:auto!important}
#storePreview{transform:none!important;top:auto!important}
body[data-ps-workspace="customization"] #psShopAnalyticsHost{display:none!important}
.item-card-image>img[data-ps-item-media-key],.item-card-image>img:not(.ps-media-badge img){display:block!important;opacity:1!important;visibility:visible!important;position:relative;z-index:0}
.item-card-image .ps-item-media-fallback{object-fit:cover!important}