/* Theme-specific variables */
.theme-green { --ds-primary: #22c55e; --ds-primary-light: #22c55e22; }
.theme-blue { --ds-primary: #2090F0; --ds-primary-light: #2090F022; }
.theme-orange { --ds-primary: #f97316; --ds-primary-light: #f9731622; }
.theme-bw { --ds-primary: #18181b; --ds-primary-light: #18181b15; }
/* ===== Base Styles ===== */
#store-setup {
font-family: var(--ds-font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
#store-setup *, #store-setup *::before, #store-setup *::after {
-webkit-tap-highlight-color: transparent;
}
/* ===== Atmospheric Background =====
Body itself is a flat color; the gradient + grain live on
a fixed pseudo-element so they cover the viewport without
participating in layout. This avoids `background-
attachment: fixed` on body, which iOS Safari handles
poorly (was reintroducing the bottom overscroll gap). */
html {
/* iOS Safari: overscroll behavior on body alone is not
always honored if the document root can rubber-band.
Setting it on too closes the gap. NOTE: do NOT
add `overflow` to body — that turns body into a scroll
container, which breaks `position: sticky` (the
wizard's footer would stick to body's bottom below the
viewport instead of clinging to the viewport bottom). */
overscroll-behavior-y: none;
}
body {
font-family: var(--ds-font);
margin: 0;
min-height: 100dvh;
overscroll-behavior-y: none;
background: #f7f8fb;
/* Flex column so the teleported sticky footer sits at
the bottom of body even when content is short — main
container becomes flex: 1 to absorb available space.
Without this, body has [main(min-h-screen), footer]
as siblings totalling viewport+86px, producing
exactly the overscroll users reported. */
display: flex;
flex-direction: column;
}
/* Fixed background layer — gradient wash + faint grain
noise. Rendered behind everything via z-index: 0; covers
the full viewport at all times. */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 1100px 700px at 15% -10%, var(--ds-primary-glow), transparent 65%),
radial-gradient(ellipse 900px 600px at 110% 110%, var(--ds-primary-glow), transparent 65%),
linear-gradient(180deg, #f7f8fb 0%, #f5f7fa 50%, #f8f9fb 100%),
url("data:image/svg+xml;utf8,");
background-blend-mode: normal, normal, normal, multiply;
pointer-events: none;
z-index: 0;
}
/* Stack content above the fixed background layer */
#store-setup { position: relative; z-index: 1; }
/* ===== Modern Card Styles ===== */
.ds-card {
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--ds-radius);
box-shadow: var(--ds-shadow), 0 0 0 1px var(--ds-border-subtle);
border: none;
overflow: visible;
padding: 28px;
}
@media (max-width: 640px) {
.ds-card {
padding: 22px 18px;
border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow-card);
background: rgba(255, 255, 255, 0.92);
}
}
/* Mobile freeze workaround: kill backdrop-filter on the
wizard card and the small chips that sit on glass below
1024px. Backdrop-filter recompose during a Livewire morph
is a known mobile pain point — combined with the rest of
the post-morph work (Alpine reactivity passes, stepper
observers re-binding, etc.) it tipped the JS thread into
a multi-second hang at narrow viewports. The mobile rule
above already bumps card opacity to 0.92, so visually
nothing changes when the blur is removed. */
@media (max-width: 1023px) {
.ds-card,
.ds-step-card,
.help-button,
.ds-profile-orb {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Nuclear gate: every infinite paint/composite animation
in store-setup gets suspended below 1024px. Each one
is cheap on its own, but the compound load across the
header express bar (3 animations), tier picker badge
(2), niche grid pips (15+), CTA shimmer, etc. ticks
continuously and ties up iOS Safari's composite
thread enough that a Livewire morph or fresh page
load can't recover. Static styling is preserved;
visual fidelity is unchanged at rest. */
.ds-header-express-btn,
.ds-header-express-btn::before,
.ds-header-express-pip::after,
.ds-tag-shimmer,
.ds-cta-shine,
.pulse-soft {
animation: none !important;
}
[class*="ds-header-express"],
[class*="ds-cta-shine"],
[class*="ds-tag-shimmer"] {
animation: none !important;
}
}
/* ===== Desktop 2-col layout ==================================
Below 1024px the wizard stays single-column on a 720px-max
frame. At 1024px+ we widen the frame to 1180px and pin a
trust/value-prop rail on the right. The rail is purely
informational — keyboard focus and Livewire state stay in
the wizard column. The max-width override here is in raw
CSS rather than relying on the Tailwind `lg:max-w-[1180px]`
on the same element because that arbitrary-value class
wasn't being picked up by the JIT in this project. */
.ds-setup-cols {
display: block;
}
.ds-setup-rail {
display: none;
}
@media (min-width: 1024px) {
.ds-setup-frame {
max-width: 1180px !important;
}
/* The header uses Tailwind's `lg:max-w-[1180px]` class but
the JIT doesn't always pick up arbitrary-value classes
on this project (same reason the frame uses raw CSS
above). Without a raw override, the header was capped
at the mobile `max-w-[720px]` baseline and didn't
align with the wizard frame / footer at 1180px. */
.ds-setup-header {
max-width: 1180px !important;
}
/* Grid + named template areas. The rail comes FIRST in
DOM (so any unbalanced wizard wrapper element can't
swallow it as a child) but visually renders in the right column
via grid-area. The main column gets minmax(0, 720px)
so the wizard content can shrink instead of overflow
when its children declare wider min-widths. */
.ds-setup-cols {
display: grid;
grid-template-columns: minmax(0, 720px) 360px;
grid-template-areas: "main rail";
gap: 2rem;
align-items: start;
}
.ds-setup-main {
grid-area: main;
min-width: 0;
}
.ds-setup-rail {
grid-area: rail;
display: flex;
flex-direction: column;
gap: 0.875rem;
position: sticky;
top: 1.25rem;
/* Synthetic stagger so the rail eases in after the
wizard card on first paint. Matches ds-content-enter
timing on the parent frame. */
animation: ds-content-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}
.ds-rail-card {
padding: 1.125rem 1.25rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 18px;
box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.08);
}
.ds-rail-eyebrow {
display: inline-block;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 0.5rem;
}
/* Headline stat — visually heaviest card. Brand-toned
gradient background drawn from the Full AI hero so the
rail reads as one design system. */
.ds-rail-headline {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(232,244,254,0.92) 100%);
border-color: rgba(32, 144, 240, 0.18);
}
.ds-rail-headline::before {
content: '';
position: absolute;
inset: -2px -2px auto auto;
width: 110px;
height: 110px;
background:
radial-gradient(closest-side, rgba(32,144,240,0.28), transparent 70%);
pointer-events: none;
}
.ds-rail-stat {
display: block;
font-size: 1.0625rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.01em;
line-height: 1.25;
margin-bottom: 0.375rem;
}
.ds-rail-stat span {
/* DS chat blue brand gradient — sampled from the rocket
logo (primary #2090F0, lighter accent, deeper anchor). */
background: linear-gradient(92deg, #2090F0 0%, #3DB1F5 50%, #0E7BD9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.ds-rail-hint {
font-size: 0.8125rem;
color: #475569;
line-height: 1.45;
margin: 0;
}
.ds-rail-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.ds-rail-list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8125rem;
color: #1e293b;
line-height: 1.4;
}
.ds-rail-list li svg {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: 3px;
color: #22c55e;
}
.ds-rail-list li strong {
font-weight: 700;
color: #0f172a;
}
.ds-rail-trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.ds-rail-trust-grid > div {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.625rem;
background: rgba(248, 250, 252, 0.7);
border: 1px solid rgba(15, 23, 42, 0.04);
border-radius: 10px;
}
.ds-rail-trust-grid svg {
width: 18px;
height: 18px;
color: #2090F0;
margin-bottom: 0.125rem;
}
.ds-rail-trust-grid strong {
font-size: 0.75rem;
font-weight: 700;
color: #0f172a;
}
.ds-rail-trust-grid span {
font-size: 0.6875rem;
color: #64748b;
line-height: 1.3;
}
}
/* Above 1280px give the rail a touch more breathing room. */
@media (min-width: 1280px) {
.ds-setup-cols {
grid-template-columns: minmax(0, 720px) 380px;
gap: 2.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-setup-rail { animation: none; }
}
/* ===== Wizard-container bottom buffer =====
Was `padding-bottom: calc(120px + env(safe-area-inset-bottom))`
on the assumption the footer was `position: fixed` and would
overlay the wizard's last rows. But the footer is actually
`position: sticky` (teleported to body) — sticky elements
take their natural space in flow at the end of the document
AND cling to the viewport while scrolling, so content above
never gets hidden under them and no buffer is needed. The
120px padding was creating empty scroll space that read as
bottom-overscroll on mobile. Reduced to 0; if a future
layout needs visual breathing room, set 12-16px max. */
.wizard-container {
padding-bottom: 0;
}
/* ===== STEP N badge — hidden globally =================
The stepper at the top of the wizard already shows the
user's position. The "STEP 4" pill above each h1 was
redundant chrome — burned a row of vertical space and
added zero information. Hidden via CSS so we don't have
to chase the .span across 10 step views (and so it can
be flipped back trivially if needed). */
/* !important needed because the theme-tinted .step-tag.green/
.blue/.orange/.bw rules below have higher specificity. */
.step-tag {
display: none !important;
}
/* ===== Mobile touch target utility ===== */
.ds-touch-target {
min-height: 48px;
min-width: 48px;
}
/* ===== Safe-area support =====
Removed body-level safe-area padding — combined with
`min-height: 100dvh` and content-box sizing, it grew
the body taller than the viewport (100dvh + ~34px
on iPhones with the home indicator), reintroducing
the bottom overscroll gap. The wizard's sticky footer
already pads its own bottom by
`calc(0.875rem + env(safe-area-inset-bottom))`, so the
safe-area need is already covered there. */
/* ===== Shared step card (used across step 1, 2, 3) ===== */
.ds-step-card {
padding: 1.25rem;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: var(--ds-radius-card);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: ds-card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.ds-step-card:nth-child(2) { animation-delay: 0.08s; }
.ds-step-card:nth-child(3) { animation-delay: 0.16s; }
/* One-shot lock — same pattern as the tier picker. Step 1's
sign-in / install / "all set" flip-button card swaps
between A_signup / B_install / C_done states via Livewire
morph, and each transition was re-firing the entrance
animation. Hover transitions and other state-change
animations are NOT touched — only the one-time enter. */
html[data-ds-tier-loaded] .ds-step-card { animation: none !important; }
/* Same lock for the wizard's outer frame + sticky right
rail. Both use ds-content-enter as a first-paint stagger,
but Livewire morphs that touch the main column re-fire
the animation on either element if they get briefly
re-mounted, producing a sweep across the whole page. */
html[data-ds-tier-loaded] .ds-setup-frame,
html[data-ds-tier-loaded] .ds-setup-rail { animation: none !important; }
/* The step-header (Step N tag + title + subtitle) had its
own ds-header-enter fade-down — re-fired every Livewire
morph because Livewire re-rendered the .step-header
block on each round-trip. Same one-shot lock. */
html[data-ds-tier-loaded] .step-header { animation: none !important; }
@keyframes ds-card-enter {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ds-step-card:hover {
border-color: rgba(0, 0, 0, 0.07);
box-shadow: var(--ds-shadow-card-hover);
transform: translateY(-2px);
}
.ds-step-card-header {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 1rem;
}
.ds-step-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: linear-gradient(145deg, #f8fafc 0%, #eef2f7 100%);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 14px;
flex-shrink: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-step-card:hover .ds-step-card-icon {
transform: scale(1.05);
}
.ds-step-card-icon svg {
width: 22px;
height: 22px;
color: #64748b;
transition: color 0.2s ease;
}
.ds-step-card-icon.green {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(22, 163, 74, 0.12) 100%);
border-color: rgba(34, 197, 94, 0.2);
}
.ds-step-card-icon.green svg { color: #16a34a; }
.ds-step-card-icon.blue {
background: linear-gradient(135deg, rgba(32, 144, 240, 0.08) 0%, rgba(14, 123, 217, 0.12) 100%);
border-color: rgba(32, 144, 240, 0.2);
}
.ds-step-card-icon.blue svg { color: #0E7BD9; }
.ds-step-card-icon.orange {
background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(234, 88, 12, 0.12) 100%);
border-color: rgba(249, 115, 22, 0.2);
}
.ds-step-card-icon.orange svg { color: #ea580c; }
.ds-step-card-icon.bw {
background: linear-gradient(135deg, rgba(24, 24, 27, 0.05) 0%, rgba(39, 39, 42, 0.08) 100%);
border-color: rgba(24, 24, 27, 0.15);
}
.ds-step-card-icon.bw svg { color: #27272a; }
.ds-step-card-info {
flex: 1;
min-width: 0;
}
.ds-step-card-info h3 {
font-size: 0.9375rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.125rem;
}
.ds-step-card-info p {
font-size: 0.8125rem;
color: #6b7280;
}
/* Shared step action button */
.ds-step-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.875rem 1.5rem !important;
font-size: 0.9375rem !important;
margin: 0 !important;
width: 100% !important;
border-radius: 14px;
min-height: 50px;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ds-step-btn::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s ease;
}
.ds-step-btn:hover:not(:disabled):not(.disabled)::before {
left: 100%;
}
.ds-step-btn:hover:not(:disabled):not(.disabled) {
transform: translateY(-2px) !important;
}
.ds-step-btn:active:not(:disabled):not(.disabled) {
transform: translateY(0) scale(0.98) !important;
}
/* Button spinner (replaces SVG icon on loading) */
.ds-btn-spinner {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 0.5rem;
border: 2.5px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: ds-spin 0.6s linear infinite;
flex-shrink: 0;
}
@keyframes ds-spin {
to { transform: rotate(360deg); }
}
.ds-btn-spinner-dark {
border-color: rgba(0, 0, 0, 0.1);
border-top-color: var(--ds-primary, #2090F0);
margin-right: 0;
}
.ds-btn-spinner-muted {
border-color: rgba(0, 0, 0, 0.06);
border-top-color: #9ca3af;
margin-right: 0;
}
.ds-pay-loading {
opacity: 0.6 !important;
pointer-events: none !important;
}
/* Full-page redirect overlay — shown when navigating to
Shopify / AutoDS / Zendrop OAuth. Click → button spinner
alone was too easy to miss because the browser navigated
~50ms later, leaving the user staring at a "frozen" page.
This overlay paints over the whole viewport immediately
so the wait is unmistakable. Stays in place until the
browser swaps to the destination page. */
.ds-redirect-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(8px) saturate(1.1);
-webkit-backdrop-filter: blur(8px) saturate(1.1);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.18s ease;
padding: 1.5rem;
}
.ds-redirect-overlay.is-visible { opacity: 1; }
.ds-redirect-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
border-radius: 18px;
padding: 1.75rem 2rem;
box-shadow:
0 24px 60px -12px rgba(15, 23, 42, 0.4),
0 8px 24px -8px rgba(15, 23, 42, 0.2),
inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.6);
font-family: var(--ds-font);
min-width: 220px;
max-width: 360px;
}
.ds-redirect-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid rgba(15, 23, 42, 0.08);
border-top-color: var(--ds-primary, #2090F0);
animation: ds-spin 0.7s linear infinite;
}
.ds-redirect-text {
font-size: 0.9375rem;
font-weight: 600;
color: #0f172a;
letter-spacing: -0.005em;
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.ds-redirect-spinner { animation-duration: 1.2s; }
}
/* Shared success badge */
.ds-success-badge {
display: flex;
align-items: center;
justify-content: center;
padding: 0.875rem 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
border-radius: 14px;
cursor: default;
width: 100%;
min-height: 48px;
animation: ds-success-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.ds-success-badge::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: ds-badge-shine 2s ease-in-out 0.5s;
}
@keyframes ds-success-enter {
0% { transform: scale(0.9); opacity: 0; }
60% { transform: scale(1.03); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes ds-badge-shine {
0% { left: -100%; }
100% { left: 200%; }
}
.ds-success-badge.green {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #15803d;
border: 1px solid #86efac;
}
.ds-success-badge.blue {
background: linear-gradient(135deg, #e6f2ff 0%, #c6dfff 100%);
color: #0E7BD9;
border: 1px solid #82b6ee;
}
.ds-success-badge.orange {
background: linear-gradient(135deg, #fff3e0 0%, #ffe4bc 100%);
color: #c2410c;
border: 1px solid #fdba74;
}
.ds-success-badge.bw {
background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%);
color: #18181b;
border: 1px solid #a1a1aa;
}
/* Sub-step numbering */
.ds-substep-num {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 0.8125rem;
font-weight: 700;
flex-shrink: 0;
border: 2px solid #e2e8f0;
color: #94a3b8;
background: #fff;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-substep-num.active {
border-color: var(--ds-primary);
color: var(--ds-primary);
background: var(--ds-primary-light);
box-shadow: 0 0 0 4px var(--ds-primary-glow, rgba(0,0,0,0.03));
}
.ds-substep-num.done {
border-color: transparent;
color: #fff;
background: var(--ds-primary);
box-shadow: 0 2px 8px -2px var(--ds-primary-light);
animation: ds-check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ds-check-pop {
0% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
/* Dimmed/locked card state */
.ds-step-card.ds-locked {
opacity: 0.45;
pointer-events: none;
filter: grayscale(0.3);
}
/* ===== Header Express button =====
Small attractive pill in the top nav that opens the
Express modal from anywhere in the wizard. Teal-emerald
gradient + animated mic icon + corner pulse pip so it
reads as the "live voice" entry point without competing
with the orb stepper for visual weight. Hover lifts +
sweeps a soft shimmer; the icon's pulse pip ticks
subtly to communicate "tap to talk". */
.ds-header-express-btn {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.875rem 0.4rem 0.625rem;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: -0.005em;
color: white;
background: linear-gradient(120deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
background-size: 180% 100%;
background-position: 0% 50%;
border: 0;
border-radius: 999px;
box-shadow:
0 4px 14px -4px rgba(13, 148, 136, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background-position 0.6s ease;
position: relative;
overflow: hidden;
animation: ds-header-express-glow 3s ease-in-out infinite;
}
.ds-header-express-btn:hover {
transform: translateY(-1px);
background-position: 100% 50%;
box-shadow: 0 8px 22px -6px rgba(13, 148, 136, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ds-header-express-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
animation: ds-header-express-shimmer 3.4s ease-in-out infinite;
}
@keyframes ds-header-express-shimmer {
0%, 60% { left: -100%; }
75% { left: 100%; }
100% { left: 100%; }
}
@keyframes ds-header-express-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.06); }
}
.ds-header-express-glyph {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
.ds-header-express-glyph svg,
.ds-header-express-glyph i.fa-microphone {
width: 12px;
height: 12px;
font-size: 12px;
line-height: 1;
color: white;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tiny "live mic" pulse pip — same recipe as the in-card
CTA's pulse but smaller for the compact pill. */
.ds-header-express-pip {
position: absolute;
top: 1px;
right: 1px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fb923c;
box-shadow: 0 0 0 1.5px rgba(251, 146, 60, 0.30);
z-index: 2;
}
.ds-header-express-pip::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: rgba(251, 146, 60, 0.45);
animation: ds-header-express-pip-pulse 1.6s ease-out infinite;
}
@keyframes ds-header-express-pip-pulse {
0% { transform: scale(0.7); opacity: 0.85; }
100% { transform: scale(2.0); opacity: 0; }
}
.ds-header-express-label {
white-space: nowrap;
}
/* Mobile — tighten label and padding so the pill fits
alongside Help + the profile orb at narrow widths. */
@media (max-width: 480px) {
.ds-header-express-btn { padding: 0.35rem 0.625rem 0.35rem 0.5rem; font-size: 0.75rem; }
.ds-header-express-glyph { width: 20px; height: 20px; }
.ds-header-express-glyph svg,
.ds-header-express-glyph i.fa-microphone { width: 11px; height: 11px; font-size: 11px; }
}
/* ===== Help Button =====
Matches the .ds-header-express-btn pill shape on the
opposite side of the header bar: same 999px radius,
same 0.4rem vertical padding, same 0.8125rem font size,
so the three header chips (Help / Try Express / orb)
share a consistent pill silhouette on desktop. */
.help-button {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.06);
color: #64748b;
font-size: 0.8125rem !important;
padding: 0.4rem 0.875rem !important;
border-radius: 999px;
transition: all 0.2s ease;
}
.help-button:hover {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.1);
color: #475569;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* ===== Account Profile Orb ===== */
.ds-profile-orb-wrap {
position: relative;
display: inline-flex;
}
/* Profile orb — visually paired with the .help-button on the
opposite side of the bar. Neutral glass surface (same
backdrop-blur + low-opacity white as help-button) so it
reads as a quiet utility chip rather than a vivid themed
accent. Theme accent re-enters only on the open-state
ring, so users still get a faint identity cue when the
profile menu is open. */
.ds-profile-orb {
position: relative;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* Modern double-stop border treatment — a 1.5px crisp
outer line plus a layered ring shadow gives the orb
subtle depth without a vivid fill. Three layers:
1. Outer ring — 0 0 0 1px halo just outside the
border, in a soft slate, gives a defined edge
even on busy backgrounds.
2. Inner light — inset 0 1px 0 rgba(255,255,255,0.6)
a glassy highlight along the top edge, sells
the "polished chip" feel.
3. Drop — 0 1px 2px rgba(0,0,0,0.04) for
the faintest sit-on-the-page shadow. */
border: 1.5px solid rgba(15, 23, 42, 0.10);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 2px rgba(15, 23, 42, 0.04);
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ds-profile-orb:hover {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(15, 23, 42, 0.16);
color: #334155;
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 4px 12px rgba(15, 23, 42, 0.10);
}
/* Open-state ring carries the theme accent so the orb still
feels like part of the wizard's themed family — but only
when the user has actively opened the menu. */
.ds-profile-orb.is-open { transform: translateY(-1px); }
/* Open-state shadow stack preserves the base 3-layer
recipe (outer halo + inner light + drop) and adds a
3px accent ring as the outermost shadow so the orb
reads as "active" without losing its polished depth. */
.ds-profile-orb.green.is-open {
box-shadow:
0 0 0 3px rgba(34, 197, 94, 0.24),
0 0 0 1px rgba(255, 255, 255, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 12px rgba(15, 23, 42, 0.10);
}
.ds-profile-orb.blue.is-open {
box-shadow:
0 0 0 3px rgba(32, 144, 240, 0.24),
0 0 0 1px rgba(255, 255, 255, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 12px rgba(15, 23, 42, 0.10);
}
.ds-profile-orb.orange.is-open {
box-shadow:
0 0 0 3px rgba(254, 194, 1, 0.30),
0 0 0 1px rgba(255, 255, 255, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 12px rgba(15, 23, 42, 0.10);
}
.ds-profile-orb.bw.is-open {
box-shadow:
0 0 0 3px rgba(24, 24, 27, 0.20),
0 0 0 1px rgba(255, 255, 255, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 12px rgba(15, 23, 42, 0.10);
}
html.dark .ds-profile-orb.green.is-open {
box-shadow:
0 0 0 3px rgba(110, 231, 183, 0.30),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 4px 12px rgba(0, 0, 0, 0.45);
}
html.dark .ds-profile-orb.blue.is-open {
box-shadow:
0 0 0 3px rgba(103, 232, 249, 0.30),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 4px 12px rgba(0, 0, 0, 0.45);
}
html.dark .ds-profile-orb.orange.is-open {
box-shadow:
0 0 0 3px rgba(252, 211, 77, 0.32),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 4px 12px rgba(0, 0, 0, 0.45);
}
html.dark .ds-profile-orb.bw.is-open {
box-shadow:
0 0 0 3px rgba(244, 244, 245, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 4px 12px rgba(0, 0, 0, 0.45);
}
.ds-profile-orb-letter {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1;
}
/* User icon — sized to match the help-button's icon-text
visual weight on the other side of the bar. Inherits
the orb's color so light/dark/hover state changes
carry through automatically. FontAwesome `fa-user`
renders as text so we use font-size to size it. */
.ds-profile-orb-icon {
font-size: 14px;
line-height: 1;
}
.ds-profile-menu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 240px;
max-width: 280px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);
padding: 0.5rem;
z-index: 50;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ds-profile-menu-head {
padding: 0.625rem 0.75rem 0.625rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
/* margin-bottom removed — was stacking with .ds-profile-
menu (gap: 0.25rem) and .ds-profile-menu-switch's
margin-top + padding-top, pushing the Switch Store label
~1.5rem below the divider line. Now relies on parent
gap only. Telegram 7998. */
}
.ds-profile-menu-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(82, 82, 91, 0.7);
}
/* Themed eyebrow label — picks up the active theme color so
the dropdown reads as part of the wizard family. */
.ds-profile-menu.green .ds-profile-menu-label { color: #15803d; }
.ds-profile-menu.blue .ds-profile-menu-label { color: #0E7BD9; }
.ds-profile-menu.orange .ds-profile-menu-label { color: #c2410c; }
.ds-profile-menu.bw .ds-profile-menu-label { color: #18181b; }
/* Accent stripe along the top of the menu, matched to the
orb's gradient — visually links the open menu to the orb. */
.ds-profile-menu { overflow: hidden; }
.ds-profile-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 14px 14px 0 0;
}
.ds-profile-menu.green::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.ds-profile-menu.blue::before { background: linear-gradient(90deg, #2090F0, #0E7BD9); }
.ds-profile-menu.orange::before { background: linear-gradient(90deg, #FEC201, #F5A623); }
.ds-profile-menu.bw::before { background: linear-gradient(90deg, #3f3f46, #18181b); }
/* Real Shopify shop name — only emitted when the store has
a name OTHER than Shopify's hardcoded "My Store" default.
Sits above the slug as the primary identifier; pushes the
slug into a secondary line. Hidden entirely when the
store has no real name so we don't render an empty line. */
.ds-profile-menu-store-name {
display: block;
font-size: 0.8125rem;
font-weight: 700;
color: #0f172a;
line-height: 1.25;
letter-spacing: -0.005em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 0.0625rem;
}
html.dark .ds-profile-menu-store-name { color: #fafafa; }
.ds-profile-menu-store {
font-size: 0.875rem;
font-weight: 600;
color: #0f172a;
word-break: break-all;
line-height: 1.3;
}
/* When a real shop name is shown above, the slug line
becomes secondary identification — slightly smaller,
muted, monospace so it reads as a URL hint rather than
competing with the name. */
.ds-profile-menu-store.is-secondary {
font-size: 0.71875rem;
font-weight: 500;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, monospace;
color: rgba(15, 23, 42, 0.55);
line-height: 1.25;
margin-top: 0.0625rem;
word-break: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html.dark .ds-profile-menu-store.is-secondary { color: rgba(244, 244, 245, 0.55); }
.ds-profile-menu-store.is-secondary .ds-profile-menu-store-suffix {
font-size: 0.65rem;
}
/* Two-tone store URL — slug stays at full ink (the part
that identifies the user's store), .myshopify.com suffix
sits at ~55% opacity so the slug pops without hiding the
domain altogether. Dark-mode override below the existing
`html.dark .ds-profile-menu-store` rule keeps the same
ratio against the dark menu surface. */
.ds-profile-menu-store-slug {
color: inherit;
font-weight: 700;
}
.ds-profile-menu-store.is-secondary .ds-profile-menu-store-slug {
font-weight: 600;
}
.ds-profile-menu-store-suffix {
color: #94a3b8;
font-weight: 500;
}
html.dark .ds-profile-menu-store-suffix { color: #71717a; }
.ds-profile-menu-email {
font-size: 0.75rem;
color: rgba(82, 82, 91, 0.85);
word-break: break-all;
line-height: 1.35;
margin-top: 0.125rem;
}
/* "New store" action — positive CTA treatment (Telegram 7987).
Theme-tinted pill, no border. Earlier revision used a
1px low-alpha border which rendered as a "dotted line"
above the button at low alpha because of sub-pixel
anti-aliasing (Telegram 7990) — the tinted background
already provides enough definition, and the section
divider above (.ds-profile-menu-theme border-bottom)
carries the separator role. So: no border, just a clean
filled pill. */
.ds-profile-menu-action {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 600;
color: #1e293b;
background: rgba(15, 23, 42, 0.05);
border: 0;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.ds-profile-menu-action:hover {
background: rgba(15, 23, 42, 0.09);
}
.ds-profile-menu-action:active { transform: scale(0.985); }
/* Theme-accented resting state — base color from the same
palette as .ds-profile-menu-label.{theme}, with a soft
tinted background so the button reads as a proper "do
this" affordance instead of a neutral row. Hover deepens
the same tint without shifting hue. */
.ds-profile-menu-action.green { color: #15803d; background: rgba(34, 197, 94, 0.12); }
.ds-profile-menu-action.blue { color: #0E7BD9; background: rgba(32, 144, 240, 0.12); }
.ds-profile-menu-action.orange { color: #c2410c; background: rgba(249, 115, 22, 0.12); }
.ds-profile-menu-action.bw { color: #18181b; background: rgba(24, 24, 27, 0.07); }
.ds-profile-menu-action.green:hover { background: rgba(34, 197, 94, 0.20); }
.ds-profile-menu-action.blue:hover { background: rgba(32, 144, 240, 0.20); }
.ds-profile-menu-action.orange:hover { background: rgba(249, 115, 22, 0.20); }
.ds-profile-menu-action.bw:hover { background: rgba(24, 24, 27, 0.12); }
/* ─── Switch-store list (orb dropdown) ────────────────────
Inline list shows up to 3 stores; overflow rolls into a
"+ N more stores" button that opens the full-list modal
below. Each row leads with the store NAME (Shopify shop
name when set, humanised slug otherwise — never the raw
"My Store" default) and demotes the slug to a small,
muted second line. .myshopify.com is dropped from
inline rows entirely — it's noise that repeats on every
row; the full domain still lives in the row's title
attribute and shows in the modal. */
.ds-profile-menu-switch {
padding: 0.25rem 0.625rem 0.625rem;
/* No border-top — the section divider above this block is
the .ds-profile-menu-head border-bottom, which is the
single "original" divider between Connected Store and
Switch Store. A second border-top here was stacking a
redundant line on top of it (Telegram 7996).
margin-top removed and padding-top trimmed from 0.5rem
to 0.25rem so the Switch Store label sits closer to
the divider line above. Telegram 7998. */
}
.ds-profile-menu-switch-label {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.375rem;
padding-left: 0.125rem;
}
.ds-profile-menu-switch-label-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
opacity: 0.85;
}
.ds-profile-menu-switch-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
margin-left: 0.125rem;
background: rgba(15, 23, 42, 0.10);
color: rgba(15, 23, 42, 0.62);
font-size: 0.625rem;
font-weight: 700;
border-radius: 8px;
letter-spacing: 0.02em;
font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
}
.ds-profile-menu-switch-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.ds-profile-menu-switch-item {
display: block;
}
.ds-profile-menu-switch-row {
width: 100%;
min-height: 44px; /* iOS touch target */
display: grid;
grid-template-columns: 26px minmax(0, 1fr) 14px;
align-items: center;
gap: 0.625rem;
padding: 0.4375rem 0.625rem;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: #1e293b;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.ds-profile-menu-switch-row:hover {
background: rgba(15, 23, 42, 0.045);
border-color: rgba(15, 23, 42, 0.06);
}
.ds-profile-menu-switch-row:active { transform: scale(0.985); }
.ds-profile-menu-switch-row:focus-visible {
outline: none;
border-color: var(--ds-primary, #2090F0);
box-shadow: 0 0 0 3px rgba(32, 144, 240, 0.18);
}
.ds-profile-menu-switch-row.is-loading,
.ds-profile-menu-switch-row[disabled] {
cursor: progress;
opacity: 0.86;
}
.ds-profile-menu-switch-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 7px;
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.62);
transition: background 0.18s ease, color 0.18s ease;
}
.ds-profile-menu-switch-row:hover .ds-profile-menu-switch-icon {
background: rgba(15, 23, 42, 0.10);
color: #0f172a;
}
.ds-profile-menu-switch-row.green:hover .ds-profile-menu-switch-icon { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.ds-profile-menu-switch-row.blue:hover .ds-profile-menu-switch-icon { background: rgba(32, 144, 240, 0.16); color: #0E7BD9; }
.ds-profile-menu-switch-row.orange:hover .ds-profile-menu-switch-icon { background: rgba(249, 115, 22, 0.16); color: #c2410c; }
.ds-profile-menu-switch-row.bw:hover .ds-profile-menu-switch-icon { background: rgba(24, 24, 27, 0.10); color: #18181b; }
.ds-profile-menu-switch-icon svg { width: 14px; height: 14px; }
/* Two-line text block: NAME up top (loud), slug below (quiet). */
.ds-profile-menu-switch-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 1px;
overflow: hidden;
}
.ds-profile-menu-switch-name {
font-size: 0.875rem;
font-weight: 600;
color: #0f172a;
line-height: 1.25;
letter-spacing: -0.006em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-profile-menu-switch-slug {
font-size: 0.6875rem;
font-weight: 500;
color: rgba(15, 23, 42, 0.50);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, monospace;
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-profile-menu-switch-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(15, 23, 42, 0.30);
transition: color 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ds-profile-menu-switch-arrow svg { width: 12px; height: 12px; }
.ds-profile-menu-switch-row:hover .ds-profile-menu-switch-arrow {
color: rgba(15, 23, 42, 0.62);
transform: translateX(2px);
}
.ds-profile-menu-switch-row.green:hover .ds-profile-menu-switch-arrow { color: #16a34a; }
.ds-profile-menu-switch-row.blue:hover .ds-profile-menu-switch-arrow { color: #2090F0; }
.ds-profile-menu-switch-row.orange:hover .ds-profile-menu-switch-arrow { color: #f97316; }
.ds-profile-menu-switch-row.bw:hover .ds-profile-menu-switch-arrow { color: #18181b; }
.ds-profile-menu-switch-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(15, 23, 42, 0.62);
animation: ds-profile-menu-switch-spin 0.7s linear infinite;
}
.ds-profile-menu-switch-spinner svg { width: 13px; height: 13px; }
@keyframes ds-profile-menu-switch-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* "+ N more stores" overflow trigger that opens the full
modal. Visually distinct from a regular row — dashed
border, centered, no large icon — so it reads as a
utility action rather than yet-another store. */
.ds-profile-menu-switch-more {
width: 100%;
min-height: 36px;
margin-top: 0.375rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.4375rem 0.625rem;
background: transparent;
border: 1px dashed rgba(15, 23, 42, 0.16);
border-radius: 10px;
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
color: rgba(15, 23, 42, 0.62);
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ds-profile-menu-switch-more:hover {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.32);
color: #0f172a;
}
.ds-profile-menu-switch-more:focus-visible {
outline: none;
border-color: var(--ds-primary, #2090F0);
box-shadow: 0 0 0 3px rgba(32, 144, 240, 0.18);
}
.ds-profile-menu-switch-more-arrow {
width: 11px;
height: 11px;
transition: transform 0.18s ease;
}
.ds-profile-menu-switch-more:hover .ds-profile-menu-switch-more-arrow {
transform: translateX(2px);
}
html.dark .ds-profile-menu-switch-row { color: #e4e4e7; }
html.dark .ds-profile-menu-switch-row:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.07);
}
html.dark .ds-profile-menu-switch-icon {
background: rgba(255, 255, 255, 0.06);
color: rgba(244, 244, 245, 0.62);
}
html.dark .ds-profile-menu-switch-row:hover .ds-profile-menu-switch-icon {
background: rgba(255, 255, 255, 0.10);
color: #fafafa;
}
html.dark .ds-profile-menu-switch-name { color: #fafafa; }
html.dark .ds-profile-menu-switch-slug { color: rgba(244, 244, 245, 0.46); }
html.dark .ds-profile-menu-switch-arrow { color: rgba(244, 244, 245, 0.30); }
html.dark .ds-profile-menu-switch-row:hover .ds-profile-menu-switch-arrow { color: rgba(244, 244, 245, 0.62); }
html.dark .ds-profile-menu-switch-spinner { color: rgba(244, 244, 245, 0.62); }
html.dark .ds-profile-menu-switch-count {
background: rgba(255, 255, 255, 0.10);
color: rgba(244, 244, 245, 0.62);
}
html.dark .ds-profile-menu-switch-more {
border-color: rgba(255, 255, 255, 0.16);
color: rgba(244, 244, 245, 0.62);
}
html.dark .ds-profile-menu-switch-more:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.30);
color: #fafafa;
}
/* ─── Full store-switcher modal ───────────────────────────
Opens via the "+ N more stores" button. Shares the
.ds-modal frame so the visual language matches the
welcome-back / publish-mode modals; specialises with
left-aligned content (the standard centered modal copy
would feel cramped with a long store list) and a tall
scrollable list region. Currently-active store is pinned
at the top as a read-only chip so the user has visual
anchor for which one they're switching FROM. */
.ds-store-switcher-overlay { z-index: 110; }
.ds-store-switcher-modal {
max-width: 460px;
padding: 1.625rem 1.5rem 1.5rem;
text-align: left;
}
.ds-store-switcher-enter {
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-store-switcher-enter-start { opacity: 0; transform: translateY(8px) scale(0.97); }
.ds-store-switcher-enter-end { opacity: 1; transform: translateY(0) scale(1); }
.ds-store-switcher-head {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 1.125rem;
padding-right: 2rem; /* clear of close button */
}
.ds-store-switcher-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(32, 144, 240, 0.12);
color: #0E7BD9;
}
.ds-store-switcher-icon.green { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.ds-store-switcher-icon.orange { background: rgba(249, 115, 22, 0.14); color: #c2410c; }
.ds-store-switcher-icon.bw { background: rgba(24, 24, 27, 0.08); color: #18181b; }
.ds-store-switcher-icon svg { width: 22px; height: 22px; }
.ds-store-switcher-titles { flex: 1; min-width: 0; }
.ds-store-switcher-title {
font-size: 1.0625rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 0.1875rem;
line-height: 1.25;
letter-spacing: -0.012em;
}
.ds-store-switcher-sub {
font-size: 0.8125rem;
color: rgba(15, 23, 42, 0.55);
margin: 0;
line-height: 1.4;
}
/* Currently-active chip — same internal text rhythm as the
row buttons below so the modal reads as one cohesive
list. Differences are visual only (green tint + check
icon instead of the neutral storefront square + arrow).
text-align is forced to left at every level so the
parent .ds-modal's `text-align: center` doesn't leak
through and centre the label/name/slug stack. */
.ds-store-switcher-current {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.625rem 0.875rem;
margin-bottom: 0.875rem;
background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.02) 100%);
border: 1px solid rgba(16, 185, 129, 0.22);
border-radius: 12px;
text-align: left;
}
.ds-store-switcher-current-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #10b981;
color: white;
flex-shrink: 0;
box-shadow: 0 4px 10px -4px rgba(16, 185, 129, 0.50);
}
.ds-store-switcher-current-icon svg { width: 18px; height: 18px; }
.ds-store-switcher-current-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
text-align: left;
align-items: flex-start;
overflow: hidden;
}
.ds-store-switcher-current-label {
display: block;
width: 100%;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.075em;
color: #047857;
text-align: left;
line-height: 1.3;
}
.ds-store-switcher-current-name {
display: block;
width: 100%;
font-size: 0.9375rem;
font-weight: 600;
color: #0f172a;
line-height: 1.25;
letter-spacing: -0.008em;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-store-switcher-current-slug {
display: block;
width: 100%;
font-size: 0.71875rem;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, monospace;
color: rgba(15, 23, 42, 0.50);
line-height: 1.2;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-store-switcher-current-suffix {
color: rgba(15, 23, 42, 0.32);
font-size: 0.6875rem;
}
.ds-store-switcher-listwrap {
max-height: min(420px, 55vh);
overflow-y: auto;
margin: 0 -0.5rem;
padding: 0 0.5rem 0.25rem;
/* Inner scroll-shadow hint — fade at the bottom edge so
long lists feel bounded rather than abruptly cut. */
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.ds-store-switcher-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ds-store-switcher-row {
width: 100%;
min-height: 56px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 16px;
align-items: center;
gap: 0.875rem;
padding: 0.625rem 0.875rem;
background: white;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
cursor: pointer;
font-family: inherit;
text-align: left;
color: #1e293b;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}
.ds-store-switcher-row:hover {
background: rgba(248, 250, 252, 0.92);
border-color: rgba(15, 23, 42, 0.20);
box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.18);
}
.ds-store-switcher-row:active { transform: scale(0.99); }
.ds-store-switcher-row:focus-visible {
outline: none;
border-color: var(--ds-primary, #2090F0);
box-shadow: 0 0 0 3px rgba(32, 144, 240, 0.18);
}
.ds-store-switcher-row.is-loading,
.ds-store-switcher-row[disabled] { opacity: 0.86; cursor: progress; }
.ds-store-switcher-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.55);
transition: background 0.18s ease, color 0.18s ease;
}
.ds-store-switcher-row.green:hover .ds-store-switcher-row-icon { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.ds-store-switcher-row.blue:hover .ds-store-switcher-row-icon { background: rgba(32, 144, 240, 0.14); color: #0E7BD9; }
.ds-store-switcher-row.orange:hover .ds-store-switcher-row-icon { background: rgba(249, 115, 22, 0.14); color: #c2410c; }
.ds-store-switcher-row.bw:hover .ds-store-switcher-row-icon { background: rgba(24, 24, 27, 0.08); color: #18181b; }
.ds-store-switcher-row-icon svg { width: 18px; height: 18px; }
.ds-store-switcher-row-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
overflow: hidden;
}
.ds-store-switcher-row-name {
font-size: 0.9375rem;
font-weight: 600;
color: #0f172a;
line-height: 1.25;
letter-spacing: -0.008em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-store-switcher-row-slug {
font-size: 0.71875rem;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, monospace;
color: rgba(15, 23, 42, 0.50);
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-store-switcher-row-suffix {
color: rgba(15, 23, 42, 0.32);
font-size: 0.6875rem;
}
.ds-store-switcher-row-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(15, 23, 42, 0.32);
transition: color 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ds-store-switcher-row-arrow svg { width: 14px; height: 14px; }
.ds-store-switcher-row:hover .ds-store-switcher-row-arrow {
color: rgba(15, 23, 42, 0.65);
transform: translateX(3px);
}
.ds-store-switcher-row.green:hover .ds-store-switcher-row-arrow { color: #16a34a; }
.ds-store-switcher-row.blue:hover .ds-store-switcher-row-arrow { color: #2090F0; }
.ds-store-switcher-row.orange:hover .ds-store-switcher-row-arrow { color: #f97316; }
.ds-store-switcher-row.bw:hover .ds-store-switcher-row-arrow { color: #18181b; }
.ds-store-switcher-row-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(15, 23, 42, 0.62);
animation: ds-profile-menu-switch-spin 0.7s linear infinite;
}
.ds-store-switcher-row-spinner svg { width: 14px; height: 14px; }
html.dark .ds-store-switcher-icon { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
html.dark .ds-store-switcher-icon.green { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
html.dark .ds-store-switcher-icon.orange { background: rgba(249, 115, 22, 0.16); color: #fb923c; }
html.dark .ds-store-switcher-icon.bw { background: rgba(244, 244, 245, 0.10); color: #f4f4f5; }
html.dark .ds-store-switcher-title { color: #fafafa; }
html.dark .ds-store-switcher-sub { color: rgba(244, 244, 245, 0.62); }
html.dark .ds-store-switcher-current {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.04) 100%);
border-color: rgba(16, 185, 129, 0.28);
}
html.dark .ds-store-switcher-current-label { color: #6ee7b7; }
html.dark .ds-store-switcher-current-name { color: #fafafa; }
html.dark .ds-store-switcher-current-slug { color: rgba(244, 244, 245, 0.50); }
html.dark .ds-store-switcher-current-suffix { color: rgba(244, 244, 245, 0.32); }
html.dark .ds-store-switcher-row {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
color: #e4e4e7;
}
html.dark .ds-store-switcher-row:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
html.dark .ds-store-switcher-row-icon {
background: rgba(255, 255, 255, 0.05);
color: rgba(244, 244, 245, 0.55);
}
html.dark .ds-store-switcher-row-name { color: #fafafa; }
html.dark .ds-store-switcher-row-slug { color: rgba(244, 244, 245, 0.50); }
html.dark .ds-store-switcher-row-suffix { color: rgba(244, 244, 245, 0.32); }
html.dark .ds-store-switcher-row-arrow { color: rgba(244, 244, 245, 0.32); }
html.dark .ds-store-switcher-row:hover .ds-store-switcher-row-arrow { color: rgba(244, 244, 245, 0.65); }
html.dark .ds-store-switcher-row-spinner { color: rgba(244, 244, 245, 0.62); }
html.dark .ds-store-switcher-listwrap {
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
/* Mobile — comfier touch targets, slightly bigger names,
modal stretches closer to viewport edges, scroll region
takes more vertical real estate. */
@media (max-width: 480px) {
.ds-profile-menu-switch-row { min-height: 48px; padding: 0.5rem 0.625rem; }
.ds-profile-menu-switch-name { font-size: 0.875rem; }
.ds-profile-menu-switch-slug { font-size: 0.6875rem; }
.ds-profile-menu-switch-icon { width: 28px; height: 28px; }
.ds-profile-menu-switch-icon svg { width: 15px; height: 15px; }
.ds-profile-menu-switch-more { font-size: 0.78125rem; min-height: 40px; }
.ds-store-switcher-modal {
max-width: none;
width: 100%;
padding: 1.375rem 1.125rem 1.125rem;
border-radius: 20px;
}
.ds-store-switcher-icon { width: 40px; height: 40px; border-radius: 10px; }
.ds-store-switcher-icon svg { width: 20px; height: 20px; }
.ds-store-switcher-title { font-size: 1rem; }
.ds-store-switcher-sub { font-size: 0.78125rem; }
.ds-store-switcher-current { padding: 0.5625rem 0.6875rem; }
.ds-store-switcher-current-icon { width: 26px; height: 26px; }
.ds-store-switcher-current-icon svg { width: 14px; height: 14px; }
.ds-store-switcher-listwrap { max-height: 60vh; }
.ds-store-switcher-row { min-height: 60px; padding: 0.625rem 0.75rem; gap: 0.75rem; }
.ds-store-switcher-row-icon { width: 36px; height: 36px; }
.ds-store-switcher-row-icon svg { width: 17px; height: 17px; }
.ds-store-switcher-row-name { font-size: 0.9375rem; }
.ds-store-switcher-row-slug { font-size: 0.6875rem; }
}
/* Theme segmented control inside the orb dropdown. */
.ds-profile-menu-theme {
padding: 0.5rem 0.75rem 0.625rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 0.25rem;
}
.ds-theme-segmented {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
padding: 0.25rem;
background: rgba(244, 244, 245, 0.7);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.ds-theme-segmented-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.375rem 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
color: rgba(82, 82, 91, 0.85);
background: transparent;
border: 0;
border-radius: 7px;
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.ds-theme-segmented-btn svg { width: 0.875rem; height: 0.875rem; }
.ds-theme-segmented-btn:hover {
color: #18181b;
background: rgba(255, 255, 255, 0.6);
}
.ds-theme-segmented-btn.is-active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
/* ─── Dark mode baseline ──────────────────────────────────────
Triggered by .dark on , set by the layout bootstrap
script + the orb's theme switcher. This is a foundational
pass — body/header/card/orb/dropdown surfaces only — that
gives the toggle visible effect immediately. Wizard step
internals (niche grid, boost grid, summary lines, terms
toggle, etc.) still need their own dark-mode treatment in
follow-up passes; until they get one they read as light
panels floating on a dark page, which is acceptable for a
first cut. */
/* Dark surface is a deep zinc with a faint blue tint
rather than pure-black so the body reads as "very
dark grey with atmosphere" rather than OLED black. */
html.dark body { background: #15151a; color: #e4e4e7; }
html.dark body::before {
background:
radial-gradient(ellipse 1100px 700px at 15% -10%, rgba(32, 144, 240, 0.18), transparent 65%),
radial-gradient(ellipse 900px 600px at 110% 110%, rgba(32, 144, 240, 0.14), transparent 65%),
linear-gradient(180deg, #15151a 0%, #18181f 50%, #15151a 100%),
url("data:image/svg+xml;utf8,");
}
/* Orb stepper unvisited segments — base track uses
rgba(0,0,0,0.06) which is invisible on the new dark
surface. Lift to a faint white. */
html.dark .ds-progress-track { background: rgba(255, 255, 255, 0.10); }
html.dark .ds-card {
background: rgba(24, 24, 27, 0.78);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
html.dark .help-button {
background: rgba(39, 39, 42, 0.6);
border-color: rgba(255, 255, 255, 0.08);
color: #d4d4d8;
}
html.dark .help-button:hover {
background: rgba(63, 63, 70, 0.7);
border-color: rgba(255, 255, 255, 0.12);
color: #f4f4f5;
}
/* Profile orb dark variant — same three-layer border recipe
inverted for dark surfaces: a slightly visible outer
ring (low-alpha white) replaces the white halo, and the
inner-light highlight stays as a subtle top-edge
gradient so the orb still reads as a polished chip
rather than flat. */
html.dark .ds-profile-orb {
background: rgba(39, 39, 42, 0.65);
border-color: rgba(255, 255, 255, 0.16);
color: #d4d4d8;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 2px rgba(0, 0, 0, 0.32);
}
html.dark .ds-profile-orb:hover {
background: rgba(63, 63, 70, 0.75);
border-color: rgba(255, 255, 255, 0.24);
color: #f4f4f5;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 4px 12px rgba(0, 0, 0, 0.45);
}
/* Orb dropdown surface — inverts to a near-black panel with the
themed accent stripe still showing across the top. */
html.dark .ds-profile-menu {
background: #18181b;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.32);
}
html.dark .ds-profile-menu-head {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
html.dark .ds-profile-menu-store { color: #f4f4f5; }
html.dark .ds-profile-menu-email { color: rgba(228, 228, 231, 0.7); }
html.dark .ds-profile-menu-label { color: rgba(228, 228, 231, 0.7); }
html.dark .ds-profile-menu.green .ds-profile-menu-label { color: #6ee7b7; }
html.dark .ds-profile-menu.blue .ds-profile-menu-label { color: #8ec3ff; }
html.dark .ds-profile-menu.orange .ds-profile-menu-label { color: #fcd34d; }
html.dark .ds-profile-menu.bw .ds-profile-menu-label { color: #f4f4f5; }
html.dark .ds-profile-menu-action {
color: #e2e8f0;
}
html.dark .ds-profile-menu-action:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
color: #f8fafc;
}
html.dark .ds-profile-menu-action.green:hover { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.28); }
html.dark .ds-profile-menu-action.blue:hover { background: rgba(32, 144, 240, 0.18); color: #93c5fd; border-color: rgba(32, 144, 240, 0.28); }
html.dark .ds-profile-menu-action.orange:hover { background: rgba(249, 115, 22, 0.18); color: #fdba74; border-color: rgba(249, 115, 22, 0.28); }
html.dark .ds-profile-menu-action.bw:hover { background: rgba(255, 255, 255, 0.08); color: #f4f4f5; border-color: rgba(255, 255, 255, 0.12); }
html.dark .ds-profile-menu-theme {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
html.dark .ds-theme-segmented {
background: rgba(39, 39, 42, 0.6);
border-color: rgba(255, 255, 255, 0.06);
}
html.dark .ds-theme-segmented-btn {
color: rgba(228, 228, 231, 0.78);
}
html.dark .ds-theme-segmented-btn:hover {
background: rgba(63, 63, 70, 0.6);
color: #f4f4f5;
}
html.dark .ds-theme-segmented-btn.is-active {
background: #27272a;
color: #f4f4f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html.dark .ds-profile-orb {
border-color: rgba(255, 255, 255, 0.08);
}
/* ─── Dark-mode comprehensive pass ──────────────────────────
Apr 2026 v3 dark-mode audit. Earlier pass only covered
body/header/orb chrome; this block covers the wizard step
internals — niche grid, tier picker, style cards, boost
grid, summary, terms, modal, stepper, footer, form
controls, gradient headlines. Single block, generic
surface rules first, then per-component overrides. */
/* A. Headline gradient bug — step-title uses bg-clip-text on
a dark→slate gradient that disappears against a dark page.
Force a high-luminance gradient under .dark so the type
reads. Same for any other slate-gradient titles. */
html.dark .step-title {
background: linear-gradient(135deg, #fafafa 0%, #d4d4d8 100%);
-webkit-background-clip: text;
background-clip: text;
}
html.dark .step-subtitle,
html.dark .step-subtext {
color: #a1a1aa;
}
/* B. Generic light-surface inversion. Cards, panels, inputs. */
html.dark .ds-step-card,
html.dark .ds-step-card-interactive,
html.dark .ds-signup-card,
html.dark .ds-confirm-summary,
html.dark .ds-confirm-summary.is-skeleton,
html.dark .ds-confirm-boost-card,
html.dark .ds-master-card,
html.dark .ds-tier-card,
html.dark .ds-tier-collapsed,
html.dark .ds-style-card,
html.dark .ds-style-option,
html.dark .ds-rail-card,
html.dark .ds-rail-headline,
html.dark .options-section,
html.dark .option-row,
html.dark .payment-section,
html.dark .ds-payment-receipt,
html.dark .ds-address-callout,
html.dark .ds-modal {
background: rgba(24, 24, 27, 0.78);
border-color: rgba(255, 255, 255, 0.08);
color: #f4f4f5;
}
/* Inputs / textareas */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark textarea {
background: rgba(15, 15, 18, 0.7);
border-color: rgba(255, 255, 255, 0.10);
color: #f4f4f5;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #71717a;
}
/* C. Tier picker (Customize step) */
html.dark .ds-tier-collapsed {
background: rgba(24, 24, 27, 0.85);
}
html.dark .ds-tier-collapsed-eyebrow { color: #a1a1aa; }
html.dark .ds-tier-collapsed-value strong { color: #fafafa; }
html.dark .ds-tier-collapsed-price { color: #d4d4d8; }
html.dark .ds-tier-collapsed-edit { color: #a1a1aa; }
html.dark .ds-tier-collapsed:hover .ds-tier-collapsed-edit { color: #f4f4f5; }
html.dark .ds-tier-skip-btn {
color: #a1a1aa;
background: rgba(39, 39, 42, 0.55);
border-color: rgba(255, 255, 255, 0.06);
}
html.dark .ds-tier-skip-btn:hover { color: #f4f4f5; }
/* D. Niche master grid */
html.dark .ds-master-card {
background: rgba(24, 24, 27, 0.7);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.32);
}
html.dark .ds-master-card-meta,
html.dark .ds-master-card-foot {
background: rgba(15, 15, 18, 0.85);
color: #e4e4e7;
}
/* The actual rendered class is `.ds-master-card-name`,
not `-title`. The earlier rule pointed at the wrong
class so niche names rendered slate-900 (#0f172a) on
the dark page background. */
html.dark .ds-master-card-name,
html.dark .ds-master-card-title { color: #fafafa; }
html.dark .ds-master-card-desc,
html.dark .ds-master-card-tag { color: #a1a1aa; }
html.dark .ds-master-section-label,
html.dark .ds-master-section-head { color: #a1a1aa; }
html.dark .ds-master-card-custom {
background: rgba(24, 24, 27, 0.7);
border-style: dashed;
border-color: rgba(255, 255, 255, 0.16);
color: #f4f4f5;
}
html.dark .ds-master-card-custom-idle .ds-master-card-media {
filter: invert(0.92) hue-rotate(180deg) brightness(1.08);
}
html.dark .ds-master-card-custom-tag { color: #a1a1aa; }
/* E. Style step cards (full-AI) */
html.dark .ds-style-card {
background: rgba(24, 24, 27, 0.6);
}
html.dark .ds-style-card-title { color: #fafafa; }
html.dark .ds-style-card-desc { color: #a1a1aa; }
html.dark .ds-style-preview {
background: rgba(15, 15, 18, 0.7);
}
/* F. Boost grid (Confirm) */
html.dark .ds-confirm-boost-card {
background: rgba(24, 24, 27, 0.7);
color: #f4f4f5;
}
html.dark .ds-confirm-boost-title { color: #fafafa; }
html.dark .ds-confirm-boost-subtle { color: #a1a1aa; }
html.dark .ds-confirm-boost-bullets li { color: #d4d4d8; }
html.dark .ds-confirm-boost-was {
color: #71717a;
text-decoration-color: #71717a;
}
html.dark .ds-confirm-boost-eyebrow { color: #a1a1aa; }
html.dark .ds-confirm-boost-subtitle { color: #a1a1aa; }
html.dark .ds-confirm-boost-card.is-elite-locked {
background: rgba(32, 144, 240, 0.10);
border-color: rgba(32, 144, 240, 0.4);
}
/* G. Summary card (Confirm) */
html.dark .ds-confirm-summary {
background: rgba(24, 24, 27, 0.78);
color: #f4f4f5;
}
html.dark .ds-confirm-summary-title { color: #fafafa; }
html.dark .ds-confirm-summary-total { color: #fafafa; }
html.dark .ds-confirm-summary-total span { color: #a1a1aa; }
html.dark .ds-confirm-summary-line span { color: #e4e4e7; }
/* Price column is the trailing in each
, NOT inside
.ds-confirm-summary-line, so the rule above never reaches it.
Without this override the price stays at the light-mode #0f172a
on the dark card background and reads as invisible. */
html.dark .ds-confirm-summary-list li > span:last-child { color: #fafafa; }
html.dark .ds-confirm-summary-icon { color: #a1a1aa; }
html.dark .ds-confirm-summary-included { color: #6ee7b7; }
/* Tax row sits on an amber-tinted bg with a dashed amber
border (matches the light-mode design). Previous dark-mode
colors were zinc-400/300 which read as muted gray on the
tinted card and were hard to scan. Switched to amber-300
for the label and amber-200 for the "Calculated in Shopify"
value — keeps the visual identity of the tax row and adds
contrast against the dark card.
!important needed because the light-mode rules in
stepconfirm.blade.php's inline