/* Environment themes use the existing storefront tokens and keep the stable DOM. */
:root[data-environment="qa"] {
  --navy: #103d3a; --navy-2: #124c49; --navy-3: #1d625c;
  --blue: #14776c; --blue-2: #0e5c54; --blue-soft: #e0f3ee;
  --marigold: #b9eee4; --marigold-2: #9de0d3; --marigold-ink: #103b35; --bg: #f1f8f6;
}
:root[data-environment="stage"] {
  --navy: #51310f; --navy-2: #633c13; --navy-3: #805220;
  --blue: #965715; --blue-2: #78440d; --blue-soft: #fbedd7;
  --marigold: #ffdfa5; --marigold-2: #ffd186; --marigold-ink: #543410; --bg: #fbf7ee;
}
:root[data-environment="dev"] {
  --navy: #291847; --navy-2: #34205b; --navy-3: #4c317d;
  --blue: #6d42b6; --blue-2: #553193; --blue-soft: #eee5fb;
  --marigold: #e9ddff; --marigold-2: #d9c6fc; --marigold-ink: #38225c; --bg: #f6f3fb;
}
.environment-bar { background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink); }
.environment-row { display: flex; align-items: center; gap: 10px; padding-block: 10px; font-size: 13px; flex-wrap: wrap; }
.environment-dot { width: 9px; height: 9px; background: var(--brand); border-radius: 50%; }
.environment-caption { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.environment-path { color: var(--muted); font-size: 12px; }
.dev-preview { margin-top: 20px; padding: 20px; border: 1px solid #dfd1f4; border-radius: var(--radius); background: var(--blue-soft); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.dev-preview p { margin: 0; }
.dev-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); font-weight: 800; }
.dev-preview h2 { margin: 5px 0; font-size: 19px; }
.save-button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.saved-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
:root:not([data-environment="prod"]) .hero { background: linear-gradient(135deg, var(--navy-3), var(--navy), var(--navy-2)); }
.header-actions a[data-testid="dev-saved-link"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  .header-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
  .header-actions a { padding: 6px 8px; gap: 6px; font-size: 14px; white-space: nowrap; }
  .header-actions a::before { width: 18px; height: 18px; flex-shrink: 0; }
  .header-actions a[data-testid="dev-saved-link"]::before { display: none; }
  .header-actions .menu-toggle { margin-left: auto; padding: 7px 10px; }
}