:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface-warm: #fafafa;
  --fg: #111111;
  --fg-2: var(--fg);
  --muted: #707072;
  --meta: #9e9ea0;
  --border: #cacacb;
  --border-soft: #e5e5e5;
  --accent: #111111;
  --accent-on: #ffffff;
  --accent-hover: #707072;
  --accent-active: #000000;
  --success: #007d48;
  --warn: #fca600;
  --danger: #d30005;
  --font-display: "Nike Futura ND", "Helvetica Now Display Medium", "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Now Text Medium", "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 96px;
  --leading-body: 1.75;
  --leading-tight: 0.9;
  --tracking-display: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 80px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 30px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 0 0 1px var(--border);
  --focus-ring: 0 0 0 2px rgba(39, 93, 197, 1);
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --motion-sheet: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --container-max: 1440px;
  --container-gutter-desktop: 48px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
  --banner-edge: clamp(12px, 3.6vw, 16px);
  --device-w: clamp(320px, 92vw, 430px);
  --device-h: clamp(640px, 92dvh, 932px);
  --gutter-fluid: clamp(12px, 3.6vw, 16px);
  --ui-scale: 1;
  --dock-bottom: clamp(8px, 2.4vw, 12px);
  --dock-side: clamp(14px, 4.5vw, 20px);
  --screen-pad-bottom: clamp(58px, 16vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(8px, 2vw, 24px);
  padding-left: max(clamp(8px, 2vw, 24px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(8px, 2vw, 24px), env(safe-area-inset-right, 0px));
}
button, input { font: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.stock-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.swatch {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
}
.swatch:has(> .stock-photo) {
  background: none !important;
}
.banner-bg-photo,
.reel-bg-photo,
.slide-bg-photo {
  z-index: 0;
}
.promo-slide-bg::after,
.reel-bg::after,
.slide-bg::after,
.deal-bg::after,
.gram-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
h1, h2, h3, p { margin: 0; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* iPhone frame — fluid across small & large phones */
.device {
  width: var(--device-w);
  height: var(--device-h);
  max-width: 100%;
  --ui-scale: 1;
  background: var(--bg);
  border-radius: clamp(36px, 10vw, 54px);
  box-shadow: 0 0 0 clamp(6px, 1.8vw, 10px) color-mix(in oklch, var(--fg) 8%, transparent), 0 32px 80px color-mix(in oklch, var(--fg) 18%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.device-notch {
  position: absolute;
  top: clamp(8px, 2.5vw, 11px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(108px, 32vw, 126px);
  height: clamp(30px, 9vw, 37px);
  background: var(--fg);
  border-radius: 20px;
  z-index: 30;
}
.status-bar {
  height: 54px;
  padding: 14px var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 500;
  flex-shrink: 0;
  z-index: 20;
}
.status-icons { display: flex; gap: 6px; align-items: center; }
.app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.screen-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding-bottom: var(--screen-pad-bottom);
}
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12px);
  transition: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-enter);
}
.screen.overlay {
  z-index: 10;
  background: var(--bg);
  transform: translateX(100%);
  transition: none;
}
.screen.overlay.active {
  transform: translateX(0);
  transition: transform var(--motion-sheet) var(--ease-enter);
}
#screen-detail.overlay.active {
  z-index: 11;
}
#screen-bid-detail.overlay.active {
  z-index: 12;
}

/* Nav header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: var(--bg);
}

/* Home top — reference-style dark header through search */
.device.home-dark-status .status-bar {
  color: var(--accent-on);
  background: var(--fg);
}
.home-top-shell {
  flex-shrink: 0;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.home-top-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: transparent;
  border-bottom: none;
}
.home-header-start {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.home-menu-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--bg);
  color: var(--fg);
  flex-shrink: 0;
  border: 1px solid color-mix(in oklch, var(--bg) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 8%, transparent);
}
.home-menu-btn .home-fb-mark {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.home-menu-btn svg { width: 18px; height: 18px; }
.home-bell-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-on);
  position: relative;
  flex-shrink: 0;
}
.home-bell-btn svg { width: 20px; height: 20px; }
.home-bell-btn .badge {
  top: 2px;
  right: 2px;
  background: var(--bg);
  color: var(--fg);
}
.home-welcome-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  border-radius: var(--radius-sm);
}
.home-welcome-row:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--bg) 60%, transparent);
  outline-offset: 2px;
}
.home-welcome-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--fg) 86%, var(--bg));
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-on);
  flex-shrink: 0;
  border: 1.5px solid color-mix(in oklch, var(--bg) 22%, transparent);
}
.home-welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
  gap: 1px;
  min-width: 0;
}
.home-welcome-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-on);
}
.home-welcome-name {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in oklch, var(--bg) 78%, transparent);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.home-header-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.guest-mode-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-3);
  padding: 8px 8px 8px 12px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--bg) 13%, transparent);
  border: 1px solid color-mix(in oklch, var(--bg) 24%, transparent);
  color: var(--accent-on);
}
.guest-mode-strip[hidden] { display: none !important; }
.guest-mode-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.guest-mode-login {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.guest-mode-login:active { transform: scale(0.97); }
.home-location-btn {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  color: var(--fg);
  background: transparent;
  border: 0;
  text-align: left;
  border-radius: var(--radius-sm);
}
.home-location-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.home-location-copy {
  min-width: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.home-location-copy strong { font-weight: 700; }
.home-location-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-top-shell .lang-toggle {
  background: var(--bg);
  padding: 2px;
}
.home-top-shell .lang-toggle-btn {
  color: var(--muted);
  padding: 5px 9px;
  font-size: 9px;
}
.home-top-shell .lang-toggle-btn.active {
  background: var(--fg);
  color: var(--accent-on);
}
.home-cart-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-on);
  position: relative;
  flex-shrink: 0;
}
.home-cart-btn svg { width: 20px; height: 20px; }
.home-cart-btn .badge {
  top: 2px;
  right: 2px;
  background: var(--bg);
  color: var(--fg);
}
.home-avatar-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  border: 2px solid color-mix(in oklch, var(--bg) 28%, transparent);
  flex-shrink: 0;
  background: none;
}
.home-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: color-mix(in oklch, var(--fg) 86%, var(--bg));
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-on);
}
.home-gender-bar {
  padding: 0 var(--space-4) var(--space-3);
  background: transparent;
}
.home-gender-track {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: color-mix(in oklch, var(--surface) 72%, var(--bg));
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: none;
}
.home-gender-pill {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: clamp(10px, 2.8vw, 12px) clamp(6px, 2vw, 8px);
  border-radius: 18px;
  font-size: clamp(10px, 2.8vw, 11px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--fg);
  background: var(--bg);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.home-gender-pill:hover:not(.active) {
  background: color-mix(in oklch, var(--fg) 8%, var(--bg));
}
.home-gender-pill.active {
  background: var(--fg);
  color: var(--accent-on);
  box-shadow: none;
}
.home-all-category-btn {
  width: 46px;
  min-width: 46px;
  min-height: 44px;
  border-left: 0;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: 18px;
  display: grid;
  place-items: center;
  transition: background var(--motion-fast), transform var(--motion-fast);
}
.home-all-category-btn:active { transform: scale(0.96); }
.home-all-category-btn svg { width: 20px; height: 20px; }
.home-quick-tags {
  display: flex;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  margin-top: 0;
}
.home-quick-tags::-webkit-scrollbar { display: none; }
.home-tag-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 11px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--fg);
  color: var(--accent-on);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-on) 12%, transparent);
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.home-tag-pill:hover {
  background: var(--accent-hover);
}
.home-tag-pill:active {
  transform: scale(0.97);
}
.home-tag-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-on);
  opacity: 0.9;
}
.home-tag-pill.active {
  background: var(--accent-active);
  color: var(--accent-on);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-on) 22%, transparent);
}
.home-top-shell .home-search-section {
  padding: 0 var(--space-4) var(--space-3);
  background: transparent;
  border-bottom: none;
}
.home-top-shell .home-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.home-top-shell .home-search {
  height: 42px;
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
}
.home-top-shell .home-search svg.search-icon {
  color: var(--muted);
}
.home-top-shell .home-search input {
  color: var(--fg);
}
.home-top-shell .home-search input::placeholder {
  color: var(--muted);
}
.home-top-shell .home-search-mic,
.home-top-shell .home-search-filter {
  color: var(--muted);
}
.home-top-shell .home-search-mic:active,
.home-top-shell .home-search-filter:active {
  background: var(--surface);
  color: var(--fg);
}
.home-top-shell .home-search-divider {
  background: var(--border-soft);
}
.home-top-shell .home-search:focus-within {
  border-color: var(--fg);
  box-shadow: var(--focus-ring);
}
.home-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-nav-actions :is(.home-bell-btn, .home-cart-btn, .home-welcome-row) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--accent-on);
  border: 0;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  transition: background var(--motion-fast), transform var(--motion-fast);
}
.home-nav-actions :is(.home-bell-btn, .home-cart-btn, .home-welcome-row):hover {
  background: var(--accent-hover);
}
.home-nav-actions :is(.home-bell-btn, .home-cart-btn, .home-welcome-row):active {
  background: var(--accent-active);
  transform: scale(0.96);
}
.home-nav-actions :is(.home-bell-btn, .home-cart-btn, .home-welcome-row) svg {
  width: 19px;
  height: 19px;
}
.home-nav-actions .badge {
  top: -6px;
  right: -6px;
  background: var(--danger);
  color: var(--accent-on);
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 2px;
}
.brand-lockup .brand-mark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand-lockup .brand-tag {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
}
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  transition: background var(--motion-fast);
  position: relative;
}
.icon-btn:hover { background: var(--border-soft); }
.icon-btn svg { width: 22px; height: 22px; }
.badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--fg);
  color: var(--accent-on);
  font-size: 10px;
  font-weight: 500;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.badge:empty, .badge[data-count="0"] { display: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  transition: background var(--motion-base) var(--ease-standard), border-color var(--motion-base);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { border-color: var(--muted); background: var(--border-soft); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 8px 16px; font-size: var(--text-sm); }
.btn-secondary:active { background: var(--surface); border-color: var(--fg); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[aria-busy="true"] {
  opacity: 0.72;
  cursor: progress;
}

/* Focus, motion, touch — ship polish */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cat-pill:focus-visible,
.filter-chip:focus-visible,
.tab-btn:focus-visible,
.profile-menu-item:focus-visible,
.home-gender-pill:focus-visible,
.home-tag-pill:focus-visible,
.color-dot:focus-visible,
.pack-slab:focus-visible,
.orders-tab:focus-visible,
.pay-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.home-search:focus-within,
.saved-search:focus-within,
.qs-search-bar:focus-within {
  border-color: color-mix(in oklch, var(--fg) 35%, var(--border-soft));
  box-shadow: var(--focus-ring);
}
.icon-btn:active { background: var(--border); }
.profile-menu-item:active { background: var(--border-soft); }
.cat-pill:active { transform: scale(0.98); }
.filter-chip:hover { border-color: var(--muted); }
.filter-chip.active:hover { border-color: var(--fg); }
.tab-btn:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .screen,
  .toast,
  .login-gate,
  .assist-panel,
  .create-lot-panel,
  .qs-filter-panel,
  .progress-fill,
  .bid-time-fill { transition: none !important; }
  #screen-home .feed-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .live-dot { animation: none !important; }
}

/* Hero */
.hero-card {
  position: relative;
  margin: var(--space-4);
  border-radius: 0;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--fg) 88%, var(--surface));
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 55%, transparent), transparent 60%);
}
.hero-content {
  position: relative;
  padding: var(--space-6) var(--space-4);
  color: var(--accent-on);
}
.hero-content .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  opacity: 0.85;
}
.hero-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

/* Section */
.section-label {
  padding: var(--space-3) var(--space-4) 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.section-label h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 4.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.15;
}
.section-label :is(a, button) {
  font-size: 11px;
  color: var(--fg);
  font-weight: 600;
  padding: 5px 12px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.section-label :is(a, button):active {
  background: var(--surface);
  border-color: var(--fg);
}

/* Header actions + compact language toggle */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lang-toggle {
  display: flex;
  padding: 3px;
  background: var(--surface);
  border-radius: var(--radius-pill);
}
.lang-toggle-btn {
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all var(--motion-fast);
  color: var(--muted);
}
.lang-toggle-btn.active {
  background: var(--fg);
  color: var(--accent-on);
}

/* Promo banner — swipeable main slides + product overlay per slide */
.promo-carousel {
  margin: 0 var(--banner-edge) var(--space-3);
  position: relative;
}
.promo-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.promo-banner-track::-webkit-scrollbar { display: none; }
.promo-banner-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.promo-banner-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
}
.promo-banner-dot {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  padding: 0;
  transform: scaleX(0.333);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast);
}
.promo-banner-dot.active {
  transform: scaleX(1);
  background: var(--fg);
}
.promo-banner-block {
  position: relative;
  min-height: clamp(336px, 57.6vh, 481px);
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.promo-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.promo-slide-bg::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--fg) 52%, transparent) 0%,
    color-mix(in oklch, var(--fg) 8%, transparent) 38%,
    color-mix(in oklch, var(--fg) 6%, transparent) 58%,
    color-mix(in oklch, var(--fg) 62%, transparent) 100%
  );
}
.promo-slide-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--space-4) var(--banner-edge) 0;
}
.promo-slide-copy {
  position: relative;
  z-index: 2;
  max-width: 72%;
}
.promo-slide-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 6.5vw, 28px);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-on);
  text-shadow: 0 2px 12px color-mix(in oklch, var(--fg) 55%, transparent);
  margin-bottom: 6px;
}
.promo-slide-tag {
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 500;
  color: color-mix(in oklch, var(--accent-on) 88%, transparent);
  text-shadow: 0 1px 8px color-mix(in oklch, var(--fg) 45%, transparent);
  letter-spacing: 0.02em;
}
.promo-slide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 var(--banner-edge) 10px;
}
.promo-products-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.promo-slide-products {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
}
.promo-slide-products::-webkit-scrollbar { display: none; }
.promo-swipe-hint {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  color: var(--fg);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px color-mix(in oklch, var(--fg) 12%, transparent);
  border: 0;
  padding: 0;
  cursor: pointer;
  align-self: center;
}
.promo-swipe-hint svg { width: 14px; height: 14px; }
.promo-banner-product {
  flex: 0 0 104px;
  scroll-snap-align: start;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 18px color-mix(in oklch, var(--fg) 14%, transparent);
  cursor: pointer;
  transition: transform var(--motion-fast);
}
.promo-banner-product:active { transform: scale(0.97); }
.promo-banner-product .thumb {
  aspect-ratio: 3/3.6;
  position: relative;
  overflow: hidden;
}
.promo-banner-product .thumb .swatch { position: absolute; inset: 0; }
.promo-banner-product span {
  display: block;
  padding: 6px 8px 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg);
  text-align: center;
}
/* Carousel fullscreen popup */
.carousel-popup {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base);
  display: flex;
  flex-direction: column;
}
.carousel-popup.open {
  opacity: 1;
  pointer-events: auto;
}
.carousel-popup-close {
  position: absolute;
  top: 58px;
  right: var(--space-4);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--fg) 55%, transparent);
  color: var(--accent-on);
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.carousel-popup-close svg { width: 18px; height: 18px; }
.carousel-popup-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-popup-scroll::-webkit-scrollbar { display: none; }
.carousel-popup-slide {
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg);
}
.carousel-popup-slide .slide-bg {
  position: absolute;
  inset: 0 0 34%;
  overflow: hidden;
}
.carousel-popup-slide .slide-bg.b1::after,
.carousel-popup-slide .slide-bg.b2::after,
.carousel-popup-slide .slide-bg.b3::after,
.carousel-popup-slide .slide-bg.b4::after,
.carousel-popup-slide .slide-bg.b5::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--fg) 18%, transparent) 0%,
    transparent 42%,
    color-mix(in oklch, var(--fg) 24%, transparent) 100%
  );
}
.carousel-popup-slide .slide-scrim {
  position: absolute;
  inset: auto 0 34%;
  height: 72px;
  background: linear-gradient(to top, color-mix(in oklch, var(--bg) 94%, transparent), transparent);
}
.carousel-popup-slide .slide-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: var(--space-5) var(--banner-edge) 104px;
  color: var(--fg);
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -1px 0 var(--border-soft);
}
.carousel-popup-slide .slide-body .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.carousel-popup-slide .slide-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.carousel-popup-copy {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 300px;
  line-height: 1.55;
}
.carousel-popup-slide .slide-products {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
.carousel-popup-slide .slide-products::-webkit-scrollbar { display: none; }
.carousel-popup-product {
  flex-shrink: 0;
  width: 104px;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.carousel-popup-product .thumb {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.carousel-popup-product .thumb .swatch { position: absolute; inset: 0; }
.carousel-popup-product span {
  display: block;
  padding: 7px 8px 9px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg);
}
.carousel-popup-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3) var(--banner-edge) var(--space-6);
  background: linear-gradient(to top, var(--bg), color-mix(in oklch, var(--bg) 85%, transparent));
  z-index: 4;
}

/* Trending brands */
.brands-section {
  margin-bottom: var(--space-2);
}
.brands-header {
  padding: var(--space-2) var(--space-4) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brands-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.brands-new {
  padding: 3px 8px;
  background: var(--danger);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
}
.brands-header h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 4.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.brands-all-link {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}
.brands-scroll {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.brands-scroll::-webkit-scrollbar { display: none; }
.brand-circle-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.brand-circle-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-soft);
  position: relative;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.brand-circle-logo .swatch { position: absolute; inset: 0; }
.brand-circle-item:hover .brand-circle-logo,
.brand-circle-item.active .brand-circle-logo {
  border-color: var(--fg);
  transform: scale(1.04);
}
.brand-circle-item span {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: var(--fg);
  max-width: 72px;
}
.brand-circle-item.see-all .brand-circle-logo {
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--muted);
}
.brand-circle-item.see-all svg { width: 20px; height: 20px; }

/* All brands grid */
.brands-grid-page {
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.brand-card {
  padding: var(--space-4);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.brand-card:hover { border-color: var(--border); background: var(--surface-warm); }
.brand-card-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  position: relative;
  overflow: hidden;
}
.brand-card-logo .swatch { position: absolute; inset: 0; }
.brand-card h4 {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 4px;
}
.brand-card p {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* All categories browse grid */
.all-categories-hint {
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.4;
}
.all-categories-layout {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-8);
}
.all-categories-rail {
  position: sticky;
  top: var(--space-3);
  align-self: start;
  display: grid;
  gap: var(--space-2);
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
}
.all-categories-rail::-webkit-scrollbar { display: none; }
.all-category-rail-btn {
  min-height: 72px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  padding: var(--space-2);
  display: grid;
  gap: 5px;
  justify-items: center;
  align-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.18;
}
.all-category-rail-thumb {
  width: 44px;
  height: 36px;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--elev-ring);
}
.all-category-rail-thumb .swatch { position: absolute; inset: 0; }
.all-category-rail-btn.active {
  background: var(--fg);
  color: var(--accent-on);
}
.all-categories-content {
  min-width: 0;
  display: grid;
  gap: var(--space-6);
}
.all-categories-group {
  display: grid;
  gap: var(--space-3);
}
.all-categories-group h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0;
  line-height: 1.25;
}
.all-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.category-browse-card {
  min-height: 112px;
  padding: var(--space-2);
  border: 0;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
  background: var(--bg);
}
.category-browse-card:hover { background: var(--surface-warm); }
.category-browse-card:active { transform: scale(0.97); }
.category-browse-thumb {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto var(--space-2);
  position: relative;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--elev-ring);
}
.category-browse-thumb .swatch { position: absolute; inset: 0; }
.category-browse-card h4 {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 2px;
}
.category-browse-card p {
  font-size: 10px;
  color: var(--muted);
}

/* Instagram-style category stories */
.story-scroll {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.story-scroll::-webkit-scrollbar { display: none; }
.story-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
}
.story-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 2px;
  background: var(--fg);
}
.story-ring.seen {
  background: var(--border);
}
.story-thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: grid;
  place-items: center;
  font-size: 22px;
  overflow: hidden;
}
.story-thumb .swatch { position: absolute; inset: 0; border-radius: 50%; }
.story-thumb { position: relative; }
.story-label {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: var(--fg);
  max-width: 72px;
}
.story-ring.active-ring {
  background: var(--fg);
}

/* Category page */
.category-brand-scroll {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-soft);
}
.category-brand-scroll::-webkit-scrollbar { display: none; }
.category-brand-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 68px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.category-brand-item .story-ring {
  width: 60px;
  height: 60px;
}
.category-brand-item .story-thumb { font-size: 18px; }
.category-brand-item.active .story-ring {
  background: var(--fg);
}
.category-brand-item.active .story-label { font-weight: 600; }
.category-filter-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-soft);
}
.category-filter-bar::-webkit-scrollbar { display: none; }

/* B2B pack slabs */
.pack-slabs {
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-4);
  background: var(--surface-warm);
  border-radius: var(--radius-md);
}
.pack-slabs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pack-slabs-head h4 {
  font-size: var(--text-sm);
  font-weight: 500;
}
.pack-slabs-head p {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}
.pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.pack-slab {
  padding: var(--space-3) var(--space-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all var(--motion-fast);
}
.pack-slab .qty {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
}
.pack-slab .hint {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.pack-slab .disc {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  margin-top: 3px;
}
.pack-slab.active .disc { color: color-mix(in oklch, var(--accent-on) 85%, transparent); }
.pack-slab[data-pack="15plus"] .disc { color: var(--muted); font-weight: 500; }
.pack-slab[data-pack="15plus"].active .disc { color: color-mix(in oklch, var(--accent-on) 70%, transparent); }
.lot-discount-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: color-mix(in oklch, var(--success) 12%, var(--bg));
  color: var(--success);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.pack-slab.active {
  background: var(--fg);
  color: var(--accent-on);
  border-color: var(--fg);
}
.pack-slab.active .hint { color: color-mix(in oklch, var(--accent-on) 70%, transparent); }
.pack-slab[data-pack="15plus"] .qty { font-size: var(--text-xs); }
#screen-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 0;
}
.detail-scroll::-webkit-scrollbar { display: none; }
.buy-slab {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -8px 24px color-mix(in oklch, var(--fg) 6%, transparent);
}
.buy-slab .pack-slabs {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
}
.buy-slab .pack-slabs-head h4 { font-size: var(--text-xs); }
.buy-slab .pack-slabs-head p { font-size: 10px; }
.buy-slab-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.buy-slab-meta {
  flex: 1;
  min-width: 0;
}
.buy-slab-meta .unit {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
}
.buy-slab-meta .tier {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}
.buy-slab-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.buy-slab-actions .btn { padding: 14px 20px; white-space: nowrap; }


/* Quick-sell trending — home widget */
.home-quick-sell-band {
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-5) 0 var(--space-5);
  background:
    linear-gradient(135deg,
      color-mix(in oklch, var(--danger) 78%, var(--fg)) 0%,
      color-mix(in oklch, var(--danger) 62%, var(--fg)) 48%,
      color-mix(in oklch, var(--danger) 42%, var(--fg)) 100%);
  border: 0;
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--accent-on) 14%, transparent);
}
.home-quick-sell-band .section-label {
  padding: 0 var(--space-4) var(--space-4);
}
.home-quick-sell-band .section-label h3 {
  color: var(--accent-on);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(22px, 7vw, 30px);
  line-height: 1;
}
.home-quick-sell-band .section-label :is(a, button) {
  background: transparent;
  color: var(--accent-on);
  border-color: color-mix(in oklch, var(--accent-on) 45%, transparent);
  box-shadow: none;
  min-height: 34px;
}
.home-quick-sell-band .section-label :is(a, button):active {
  background: var(--accent-active);
  border-color: var(--fg);
}
.trending-scroll {
  display: flex;
  gap: 10px;
  padding: 0 var(--space-4) var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.trending-scroll::-webkit-scrollbar { display: none; }
.home-quick-sell-band .trending-scroll {
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-1);
  scroll-padding-left: var(--space-4);
}
.quick-sell-card {
  flex: 0 0 148px;
  width: 148px;
  min-width: 148px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.quick-sell-card:active { transform: scale(0.97); }
.home-quick-sell-band .quick-sell-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding-bottom: var(--space-2);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--fg) 10%, transparent);
}
.quick-sell-img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.home-quick-sell-band .quick-sell-img {
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.home-quick-sell-band .quick-sell-img::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: none;
  pointer-events: none;
  z-index: 1;
}
.quick-sell-img .swatch { position: absolute; inset: 0; }
.qs-home-ident {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-3) 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.qs-home-lot {
  position: static;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: clamp(9px, 2.6vw, 10px);
  font-weight: 600;
  border-radius: 0;
  backdrop-filter: none;
  line-height: 1.2;
  z-index: auto;
}
.home-quick-sell-band .qs-home-lot {
  background: transparent;
  color: var(--fg);
  border-radius: 0;
}
.qs-home-timer {
  position: static;
  padding: 0;
  background: transparent;
  color: var(--fg);
  font-size: clamp(9px, 2.6vw, 10px);
  font-weight: 600;
  border-radius: 0;
  line-height: 1.2;
  z-index: auto;
  box-shadow: none;
}
.home-quick-sell-band .qs-home-timer {
  background: transparent;
  color: var(--fg);
  box-shadow: none;
}
.quick-sell-card h4 {
  font-size: clamp(11px, 3.2vw, 12px);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-quick-sell-band .quick-sell-card h4 {
  padding: 0 var(--space-3);
  text-align: left;
  font-size: clamp(12px, 3.5vw, 13px);
  font-weight: 700;
}
.qs-home-meta {
  font-size: clamp(10px, 2.8vw, 11px);
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.35;
}
.home-quick-sell-band .qs-home-meta {
  padding: 0 var(--space-3);
  text-align: left;
  margin-bottom: var(--space-2);
}
.sell-progress {
  margin-bottom: 0;
}
.home-quick-sell-band .sell-progress.compact {
  margin: 0 var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sell-progress.compact .sell-progress-top {
  font-size: clamp(9px, 2.6vw, 10px);
  margin-bottom: 3px;
  color: var(--fg);
  line-height: 1.3;
}
.sell-progress.compact .progress-track { height: 3px; }
.home-quick-sell-band .sell-progress.compact .sell-progress-top {
  align-items: center;
  font-weight: 600;
  margin-bottom: 6px;
}
.home-quick-sell-band .sell-progress.compact .progress-track {
  height: 4px;
}
.sell-progress-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 4px;
}
.sell-progress-top .urgent { color: var(--danger); }
.home-quick-sell-band .sell-progress-top .num {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  border-radius: 0;
  box-shadow: none;
}
.progress-track {
  height: 4px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  width: 100%;
  height: 100%;
  background: var(--fg);
  border-radius: 999px;
  transform: scaleX(var(--fill-scale, 0));
  transform-origin: left center;
  transition: transform 0.55s var(--ease-standard);
}
.progress-fill.hot { background: var(--danger); }
.home-quick-sell-band .progress-track {
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 6%, var(--bg));
}

/* Fashion showcase + seller reels below Quick Sell */
.home-fashion-showcase {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-5) 0 var(--space-4);
  background: var(--bg);
}
.showcase-head,
.reel-strip-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}
.showcase-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.showcase-head h3,
.reel-strip-head h3 {
  margin: 0;
  color: var(--fg);
  font-size: clamp(20px, 6vw, 24px);
  line-height: 1;
  text-transform: uppercase;
}
.showcase-link {
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 700;
}
.showcase-carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-4) var(--space-1);
}
.showcase-carousel::-webkit-scrollbar { display: none; }
.showcase-panel {
  flex: 0 0 min(342px, calc(100vw - 32px));
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 178px 128px 42px;
  gap: var(--space-2);
}
.showcase-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent-on);
  text-align: left;
  min-height: 44px;
  isolation: isolate;
}
.showcase-tile:active,
.home-reel-card:active { transform: scale(0.98); }
.showcase-tile-main {
  grid-row: 1 / 3;
}
.showcase-side {
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: 86px 1fr 86px;
  gap: var(--space-2);
}
.showcase-tile-tall {
  min-height: 0;
}
.showcase-photo,
.showcase-photo .swatch,
.showcase-photo .stock-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.showcase-bg-photo,
.showcase-photo .stock-photo {
  object-fit: cover;
}
.showcase-tile::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  z-index: 1;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 74%, transparent), transparent);
}
.showcase-medal {
  position: absolute;
  left: var(--space-3);
  bottom: 52px;
  z-index: 2;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--fg) 78%, transparent);
  color: var(--accent-on);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.showcase-copy {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: grid;
  gap: 2px;
}
.showcase-copy strong {
  font-size: clamp(12px, 3.6vw, 15px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}
.showcase-copy small {
  color: color-mix(in oklch, var(--accent-on) 82%, transparent);
  font-size: 10px;
  font-weight: 700;
}
.showcase-bottom-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--accent-on);
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: left;
}
.showcase-bottom-cta span {
  color: color-mix(in oklch, var(--accent-on) 70%, transparent);
  font-size: 10px;
  font-weight: 600;
}
.home-reel-strip {
  margin: 0 0 var(--space-5);
  padding: var(--space-5) 0;
  background: var(--surface);
  overflow: hidden;
}
.reel-strip-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.reel-strip-viewport {
  overflow: hidden;
  padding-left: var(--space-4);
}
.reel-strip-track {
  display: flex;
  width: max-content;
  gap: var(--space-3);
  animation: homeReelMarquee 26s linear infinite;
}
.reel-strip-viewport:hover .reel-strip-track {
  animation-play-state: paused;
}
.home-reel-card {
  position: relative;
  flex: 0 0 138px;
  width: 138px;
  height: 246px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--accent-on);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--fg) 12%, transparent);
  text-align: left;
}
.home-reel-photo,
.home-reel-photo .stock-photo,
.home-reel-model,
.home-reel-model .swatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-reel-bg-photo,
.home-reel-photo .stock-photo {
  object-fit: cover;
}
.home-reel-model {
  inset: 32px 14px 68px;
  z-index: 1;
}
.home-reel-model .swatch {
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 38px color-mix(in oklch, var(--fg) 26%, transparent);
}
.home-reel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 78%, transparent), transparent 58%);
  z-index: 2;
}
.home-reel-live {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 3;
  min-height: 22px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--danger) 82%, var(--fg));
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.home-reel-copy {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-3);
  z-index: 3;
  display: grid;
  gap: 3px;
}
.home-reel-copy strong {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
}
.home-reel-copy small {
  color: color-mix(in oklch, var(--accent-on) 76%, transparent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}
.reel-strip-empty {
  padding: 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}
@keyframes homeReelMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--space-2))); }
}
@media (prefers-reduced-motion: reduce) {
  .reel-strip-track {
    animation: none;
  }
  .reel-strip-viewport {
    overflow-x: auto;
  }
}
/* Unified small wish on images */
.img-wish {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  color: var(--fg);
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 1px 6px color-mix(in oklch, var(--fg) 10%, transparent);
  transition: transform var(--motion-fast);
}
.img-wish:active { transform: scale(0.92); }
.img-wish svg { width: 13px; height: 13px; }
.img-wish.active svg { fill: var(--danger); stroke: var(--danger); }

/* Personalized assistance */
.assist-fab {
  position: absolute;
  right: var(--gutter-fluid);
  bottom: calc(var(--screen-pad-bottom) + 22px);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px 10px 12px;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  box-shadow: 0 4px 20px color-mix(in oklch, var(--fg) 25%, transparent);
}
.assist-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.assist-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--fg) 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base);
}
.assist-sheet.open {
  opacity: 1;
  pointer-events: auto;
}
.assist-sheet[aria-hidden="true"],
.qs-filter-sheet[aria-hidden="true"],
.create-lot-sheet[aria-hidden="true"] {
  visibility: hidden;
}
.assist-sheet.open,
.qs-filter-sheet.open,
.create-lot-sheet.open {
  visibility: visible;
}
.assist-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
  transform: translateY(100%);
  transition: transform var(--motion-sheet) var(--ease-enter);
  max-height: 72%;
  overflow-y: auto;
}
.assist-sheet.open .assist-panel {
  transform: translateY(0);
}
.assist-panel h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.assist-panel .sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.assist-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  text-align: left;
  width: 100%;
}
.assist-option:hover { border-color: var(--border); background: var(--surface-warm); }
.assist-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.assist-option strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
}
.assist-option span {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* B2B trust strip — wholesale positioning */
/* Login gate — B2B buyer onboarding */
.login-gate {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--fg);
  display: grid;
  grid-template-rows: minmax(230px, 42%) 1fr;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.login-gate.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}
.login-gate.auth-keyboard {
  grid-template-rows: minmax(116px, 22%) 1fr;
}
.login-skip-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
  right: var(--space-4);
  z-index: 6;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid color-mix(in oklch, var(--bg) 42%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--bg) 14%, transparent);
  color: var(--bg);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.login-skip-btn:active {
  transform: scale(0.98);
}
.login-skip-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.login-gate-hero {
  background: var(--fg);
  min-height: 0;
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-8)) var(--space-4) calc(var(--space-8) + 8px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: min-height var(--motion-sheet) var(--ease-enter), padding var(--motion-sheet) var(--ease-enter);
}
.login-gate-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
.login-gate-brand {
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-3);
  width: fit-content;
}
.login-gate-brand .home-fb-mark {
  font-family: var(--font-display);
  font-size: clamp(36px, 9vw, 46px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent-on);
  line-height: 1;
}
.login-gate-tagline {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bg) 62%, transparent);
  line-height: 1.2;
}
.login-gate-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--fg);
  box-shadow: none;
  transition: opacity var(--motion-base) var(--ease-standard), max-height var(--motion-sheet) var(--ease-enter), margin var(--motion-sheet) var(--ease-enter), transform var(--motion-sheet) var(--ease-enter);
}
.login-gate-video > video,
.login-gate-video > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.login-gate-body {
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  padding: var(--space-6) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: calc(100% + 28px);
  transition: margin var(--motion-sheet) var(--ease-enter), transform var(--motion-sheet) var(--ease-enter), border-radius var(--motion-sheet) var(--ease-enter);
}
.login-gate.auth-keyboard .login-gate-hero {
  min-height: 0;
  padding-bottom: var(--space-6);
}
.login-gate.auth-keyboard .login-gate-brand .home-fb-mark {
  font-size: clamp(34px, 9vw, 42px);
}
.login-gate.auth-keyboard .login-gate-video {
  max-height: none;
  margin-top: 0;
  opacity: 0.35;
  transform: none;
  pointer-events: none;
}
.login-gate.auth-keyboard .login-gate-body {
  margin-top: -24px;
  transform: translateY(-10px);
  border-radius: 24px 24px 0 0;
}
.login-gate.auth-keyboard .login-gate-sub {
  margin-bottom: var(--space-4);
}
.login-gate-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}
.login-gate h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}
.login-gate-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.login-field {
  margin-bottom: var(--space-3);
}
.login-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.login-phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.login-phone-row:focus-within {
  box-shadow: var(--focus-ring);
  border-color: transparent;
}
.login-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  color: var(--fg);
}
.login-phone-row input,
.login-otp-input,
.login-text-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px var(--space-3);
  font-size: var(--text-base);
  background: transparent;
  min-width: 0;
}
.login-otp-input,
.login-text-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.login-otp-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-family: var(--font-mono);
  font-weight: 600;
}
.login-text-input:focus,
.login-otp-input:focus {
  box-shadow: var(--focus-ring);
  border-color: transparent;
}
.login-phone-row:has(input[aria-invalid="true"]),
.login-otp-input[aria-invalid="true"],
.login-text-input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.login-field:has([aria-invalid="true"]) .login-hint {
  color: var(--danger);
}
.login-hint {
  font-size: var(--text-xs);
  color: var(--meta);
  margin-top: var(--space-2);
  line-height: 1.45;
}
.login-action-stack {
  display: grid;
  gap: var(--space-2);
}
.permission-gate {
  position: absolute;
  inset: 0;
  z-index: 82;
  background: color-mix(in oklch, var(--fg) 52%, transparent);
  display: grid;
  align-items: end;
  padding: var(--space-4);
}
.permission-gate.hidden { display: none; }
.permission-card {
  background: var(--bg);
  border-radius: 28px;
  padding: var(--space-5);
  box-shadow: 0 -1px 0 var(--border-soft);
  display: grid;
  gap: var(--space-4);
}
.permission-card h2 {
  font-size: var(--text-xl);
  letter-spacing: 0;
  line-height: 1.08;
}
.permission-card > p {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.permission-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.permission-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fg);
  color: var(--accent-on);
}
.permission-icon svg { width: 20px; height: 20px; }
.permission-row strong {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.25;
}
.permission-row span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.permission-status {
  min-width: 74px;
  min-height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 600;
}
.permission-status[data-state="granted"] {
  border-color: color-mix(in oklch, var(--success) 28%, var(--border));
  color: var(--success);
}
.permission-status[data-state="denied"] {
  border-color: color-mix(in oklch, var(--danger) 28%, var(--border));
  color: var(--danger);
}
.permission-actions {
  display: grid;
  gap: var(--space-2);
}
.login-switch {
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.login-switch:focus-visible,
.register-role-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.register-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.register-role-grid[data-invalid="true"] .register-role-card {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.register-role-grid[data-invalid="true"] .register-role-card[aria-pressed="true"] {
  border-color: var(--fg);
  box-shadow: none;
}
.register-role-card {
  min-height: 72px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-3);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.register-role-card:active {
  background: var(--surface);
}
.register-role-card[aria-pressed="true"] {
  border-color: var(--fg);
  background: var(--fg);
  box-shadow: none;
}
.register-role-card[aria-pressed="true"]:active {
  background: var(--fg);
}
.register-role-card[aria-pressed="true"] .register-role-title {
  color: var(--accent-on);
}
.register-role-card[aria-pressed="true"] .register-role-copy {
  color: color-mix(in oklch, var(--accent-on) 68%, transparent);
}
.register-role-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 2px;
}
.register-role-copy {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.35;
}
.register-role-error {
  display: none;
  margin-top: calc(var(--space-2) * -1);
}
.register-role-grid[data-invalid="true"] + .register-role-error {
  display: block;
}
#login-step-register {
  background: var(--bg);
  border: 0;
  border-radius: 0;
  padding: 0 0 var(--space-4);
  flex: 0 0 auto;
}
#login-step-register .login-back {
  margin-bottom: var(--space-2);
}
#login-step-register .login-gate-sub {
  margin-bottom: var(--space-4);
}
#login-step-register .login-field {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-3);
}
#login-step-register .login-field label {
  color: var(--muted);
  margin-bottom: var(--space-2);
}
#login-step-register .login-text-input,
#login-step-register .login-phone-row {
  background: var(--surface);
  border-color: var(--border-soft);
  min-height: 46px;
}
#login-step-register .login-text-input,
#login-step-register .login-phone-row input {
  padding-top: 12px;
  padding-bottom: 12px;
}
#login-step-register .login-hint {
  margin-top: var(--space-1);
  line-height: 1.35;
}
#login-step-register .login-text-input:focus,
#login-step-register .login-phone-row:focus-within {
  background: var(--bg);
}
#login-step-register .register-role-grid {
  margin-bottom: var(--space-1);
}
#login-step-register .register-role-card {
  background: var(--bg);
  border-color: var(--border-soft);
  min-height: 70px;
}
#login-step-register .register-role-card:hover {
  background: var(--bg);
  border-color: var(--fg);
}
#login-step-register .register-role-card:active {
  background: var(--surface);
}
#login-step-register .register-role-card[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
}
#login-step-register .register-role-card[aria-pressed="true"]:hover,
#login-step-register .register-role-card[aria-pressed="true"]:active {
  background: var(--fg);
  border-color: var(--fg);
}
#login-step-register #register-submit {
  margin-top: var(--space-4);
}
#login-step-register .login-switch {
  display: block;
  width: fit-content;
  min-height: 44px;
  margin: var(--space-3) auto 0;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}
#login-gate[data-step="register"] {
  grid-template-rows: minmax(188px, 34%) 1fr;
}
#login-gate[data-step="register"] .login-gate-hero {
  min-height: 0;
  padding-bottom: var(--space-7);
}
#login-gate[data-step="register"] .login-gate-video {
  display: none;
}
#login-gate[data-step="register"] .login-gate-body {
  margin-top: -28px;
  border-radius: 20px 20px 0 0;
  min-height: calc(100% + 28px);
}
#login-step-otp {
  padding: 0 0 var(--space-3);
}
#login-step-otp .login-back {
  margin-bottom: var(--space-3);
}
#login-step-otp .login-gate-sub {
  margin-bottom: var(--space-4);
}
#login-step-otp .login-field {
  margin-bottom: var(--space-4);
}
#login-step-otp .login-otp-input {
  min-height: 56px;
  background: var(--surface);
  border-color: var(--border-soft);
  font-size: 20px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
#login-gate[data-step="otp"] {
  grid-template-rows: minmax(168px, 30%) 1fr;
}
#login-gate[data-step="otp"] .login-gate-hero {
  min-height: 0;
  padding-bottom: var(--space-7);
}
#login-gate[data-step="otp"] .login-gate-body {
  min-height: calc(100% + 18px);
  margin-top: -28px;
}
#login-gate[data-step="otp"].auth-keyboard .login-gate-hero {
  min-height: 0;
  padding-bottom: var(--space-4);
}
#login-gate[data-step="otp"].auth-keyboard .login-gate-tagline {
  display: none;
}
.login-step {
  display: none;
  opacity: 0;
  transform: translateY(6px);
}
.login-step.active {
  display: block;
  animation: login-step-in var(--motion-base) var(--ease-enter) forwards;
}
@keyframes login-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-back {
  align-self: flex-start;
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
}
.login-back:hover { color: var(--fg); }
.seller-create-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.seller-create-bar h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.seller-create-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--accent-on);
}
.seller-create-btn:hover { background: var(--accent-hover); }
.seller-create-btn:active { background: var(--accent-active); }
.seller-ops-card {
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.seller-ops-card p {
  color: color-mix(in oklch, var(--accent-on) 68%, transparent);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 6px 0 var(--space-4);
}
.seller-ops-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}
.seller-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.seller-command {
  min-height: 48px;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--accent-on);
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}
.seller-command.secondary {
  background: color-mix(in oklch, var(--accent-on) 14%, transparent);
  color: var(--accent-on);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-on) 24%, transparent);
}
.seller-command:focus-visible,
.seller-task:focus-visible,
.seller-lot-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.seller-task-list {
  display: grid;
  gap: var(--space-2);
}
.seller-task {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
  text-align: left;
}
.seller-task strong,
.seller-readiness-row strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 750;
}
.seller-task span,
.seller-readiness-row span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: 2px;
}
.seller-task-badge {
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--accent-on);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.seller-readiness {
  display: grid;
  gap: var(--space-1);
}
.seller-readiness-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.seller-readiness-row:last-child { border-bottom: 0; }
.seller-readiness-state {
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 750;
}

.create-lot-sheet {
  position: absolute;
  inset: 0;
  z-index: 14;
  background: color-mix(in oklch, var(--fg) 40%, transparent);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard);
}
.create-lot-sheet.open {
  opacity: 1;
  pointer-events: auto;
}

.create-lot-panel {
  width: 100%;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--motion-sheet) var(--ease-enter);
}
.create-lot-sheet.open .create-lot-panel { transform: translateY(0); }
.create-lot-panel h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-1);
}
.create-lot-panel .sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.guest-auth-kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.guest-auth-panel {
  border-top: 1px solid var(--border-soft);
}
.guest-auth-status {
  display: grid;
  gap: 2px;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--fg);
  color: var(--accent-on);
}
.guest-auth-status strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}
.guest-auth-status span {
  max-width: 42ch;
  color: color-mix(in oklch, var(--accent-on) 74%, transparent);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.45;
}
.guest-auth-points {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.guest-auth-points span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}
.guest-auth-points span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
  flex: 0 0 auto;
}
.account-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.account-trust-item {
  min-height: 58px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.account-trust-item strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 2px;
}
.account-trust-item span {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.create-lot-field {
  margin-bottom: var(--space-3);
}
.create-lot-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.create-lot-field input,
.create-lot-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg);
}
.create-lot-field input:focus,
.create-lot-field select:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}
.create-lot-field input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.create-lot-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Category scroll (legacy filter) */
.cat-scroll {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--motion-fast);
}
.cat-pill.active, .cat-pill:hover {
  background: var(--fg);
  color: var(--accent-on);
  border-color: var(--fg);
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-5);
}
.product-card {
  cursor: pointer;
  position: relative;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.product-card:active { transform: scale(0.98); }
.product-img {
  aspect-ratio: 1;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  color: var(--muted);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.product-img .swatch {
  position: absolute;
  inset: 0;
  opacity: 0.9;
}
.product-img .swatch.s1 { background: color-mix(in oklch, var(--danger) 22%, var(--surface)); }
.product-img .swatch.s2 { background: color-mix(in oklch, var(--fg) 12%, var(--surface-warm)); }
.product-img .swatch.s3 { background: color-mix(in oklch, var(--success) 18%, var(--surface)); }
.product-img .swatch.s4 { background: color-mix(in oklch, var(--warn) 20%, var(--surface)); }
.product-img .swatch.s5 { background: color-mix(in oklch, var(--fg) 8%, var(--surface)); }
.product-img .swatch.s6 { background: color-mix(in oklch, var(--danger) 14%, var(--surface-warm)); }
.wish-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 1px 6px color-mix(in oklch, var(--fg) 10%, transparent);
}
.wish-btn svg { width: 13px; height: 13px; }
.wish-btn.active svg { fill: var(--danger); stroke: var(--danger); }
.product-info { padding: 6px 0 var(--space-2); }
.product-info .name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-info .meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.product-lot-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 3px 7px;
  background: color-mix(in oklch, var(--fg) 88%, transparent);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.02em;
  z-index: 2;
  font-family: var(--font-mono);
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}
.price-row .price-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.2;
}
.price-row .price-meta {
  font-size: 9px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.feed-break {
  margin: var(--space-2) var(--space-4) var(--space-3);
  height: 0;
  border: none;
  box-shadow: inset 0 -1px 0 0 var(--border-soft);
}

/* Saved page */
.saved-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: none;
  background: var(--bg);
  flex-shrink: 0;
}
.saved-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}
.saved-toolbar {
  padding: 0 var(--space-4) var(--space-3);
  flex-shrink: 0;
  background: var(--bg);
}
.saved-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.saved-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  height: 42px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
}
.saved-search svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.saved-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--text-sm);
  color: var(--fg);
  min-width: 0;
}
.saved-search input::placeholder { color: var(--meta); }
.saved-search input:focus { outline: none; }
.saved-filter-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--accent-on);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.saved-filter-btn svg { width: 18px; height: 18px; }
.saved-filter-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--danger);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.saved-filter-badge:empty, .saved-filter-badge[data-count="0"] { display: none; }
.saved-quick-bar {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.saved-quick-bar::-webkit-scrollbar { display: none; }
.saved-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-6);
}
.saved-card {
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.saved-card-img {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.saved-card-img .swatch {
  position: absolute;
  inset: 0;
}
.saved-card-scrim {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 72%, transparent) 0%, color-mix(in oklch, var(--fg) 38%, transparent) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}
.saved-card-tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.saved-tag--quick-sell { background: color-mix(in oklch, var(--warn) 28%, var(--bg)); color: color-mix(in oklch, var(--warn) 85%, var(--fg)); }
.saved-tag--stories { background: color-mix(in oklch, var(--danger) 18%, var(--bg)); color: var(--danger); }
.saved-tag--home { background: color-mix(in oklch, var(--fg) 10%, var(--bg)); color: var(--fg); }
.saved-tag--shoes { background: color-mix(in oklch, var(--success) 10%, var(--surface)); color: var(--success); }
.saved-tag--tops { background: color-mix(in oklch, var(--fg) 8%, var(--surface)); color: var(--fg); }
.saved-tag--bottoms { background: color-mix(in oklch, var(--warn) 12%, var(--surface)); color: color-mix(in oklch, var(--warn) 64%, var(--fg)); }
.saved-tag--accessories { background: color-mix(in oklch, var(--danger) 8%, var(--surface)); color: var(--danger); }
.saved-tag--brand { background: var(--border-soft); color: var(--fg); }
.saved-tag--default { background: color-mix(in oklch, var(--bg) 85%, transparent); color: var(--fg); }
.saved-card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-on);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.saved-card-price {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in oklch, var(--accent-on) 88%, transparent);
}
#wishlist-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#screen-wishlist {
  background: var(--surface-warm);
  overflow: hidden;
}
#screen-wishlist.active {
  display: flex;
  flex-direction: column;
}

/* Quick Sell page */
.qs-header {
  align-items: center;
  border-bottom: none;
  padding-bottom: var(--space-2);
}
.qs-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  line-height: 1.2;
}
.qs-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.qs-filter-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--fg);
  transition: background var(--motion-fast);
}
.qs-filter-btn:hover { background: var(--border-soft); }
.qs-filter-btn svg { width: 18px; height: 18px; }
.qs-filter-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--fg);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.qs-filter-badge:empty, .qs-filter-badge[data-count="0"] { display: none; }
.qs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4) var(--space-2);
}
.qs-live-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: color-mix(in oklch, var(--danger) 12%, var(--bg));
  color: var(--danger);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.qs-hero {
  margin: 0 var(--space-4) 10px;
  padding: var(--space-3);
  background:
    linear-gradient(140deg,
      color-mix(in oklch, var(--danger) 72%, var(--fg)) 0%,
      color-mix(in oklch, var(--danger) 52%, var(--fg)) 62%,
      var(--fg) 100%);
  color: var(--accent-on);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-on) 10%, transparent);
}
.qs-hero-inner { position: relative; z-index: 1; }
.qs-hero-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: var(--space-2);
}
.qs-hero-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.qs-hero-thumb {
  width: 72px;
  height: 88px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: color-mix(in oklch, var(--accent-on) 15%, transparent);
}
.qs-hero-thumb .swatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.qs-hero-info h2 {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 4px;
}
.qs-hero-info p {
  font-size: var(--text-xs);
  opacity: 0.8;
}
.qs-hero-bids {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--accent-on) 14%, transparent);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.qs-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.qs-countdown-label {
  font-size: var(--text-xs);
  opacity: 0.75;
}
.qs-timer {
  display: flex;
  gap: 6px;
}
.qs-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: 6px 4px;
  background: color-mix(in oklch, var(--accent-on) 12%, transparent);
  border-radius: var(--radius-sm);
}
.qs-timer-unit .num {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
}
.qs-timer-unit span:last-child {
  font-size: 9px;
  opacity: 0.65;
  margin-top: 2px;
  text-transform: uppercase;
}
.qs-hero-progress { margin-bottom: var(--space-3); }
.qs-hero-progress .sell-progress-top { color: var(--accent-on); opacity: 0.9; }
.qs-hero-progress .progress-track { background: color-mix(in oklch, var(--accent-on) 20%, transparent); }
.qs-hero-progress .progress-fill { background: var(--accent-on); }
.qs-hero-progress .progress-fill.hot { background: var(--warn); }
.qs-hero-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent-on);
  color: var(--fg);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}
.qs-filter-sheet {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: color-mix(in oklch, var(--fg) 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base);
}
.qs-filter-sheet.open {
  opacity: 1;
  pointer-events: auto;
}
.qs-filter-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
  transform: translateY(100%);
  transition: transform var(--motion-sheet) var(--ease-enter);
  max-height: 78%;
  overflow-y: auto;
}
.qs-filter-sheet.open .qs-filter-panel {
  transform: translateY(0);
}
.qs-filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.qs-filter-panel-head h3 {
  font-size: var(--text-base);
  font-weight: 600;
}
.qs-filter-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}
.qs-filter-section {
  margin-bottom: var(--space-3);
}
.qs-filter-section:last-of-type { margin-bottom: var(--space-4); }
.qs-filter-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  margin-bottom: var(--space-2);
}
.qs-filter-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}
.qs-filter-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.qs-filter-chips::-webkit-scrollbar { display: none; }
.qs-brand-scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.qs-brand-scroll::-webkit-scrollbar { display: none; }
.qs-brand-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--motion-fast);
}
.qs-brand-chip .brand-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.qs-brand-chip .brand-dot .swatch { width: 100%; height: 100%; }
.qs-brand-chip.active {
  background: var(--fg);
  color: var(--accent-on);
  border-color: var(--fg);
}
.qs-drop-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.qs-drop-status.new { background: color-mix(in oklch, var(--success) 12%, var(--bg)); color: var(--success); }
.qs-drop-status.progress { background: color-mix(in oklch, var(--warn) 14%, var(--bg)); color: color-mix(in oklch, var(--warn) 80%, var(--fg)); }
.qs-drop-status.old { background: color-mix(in oklch, var(--danger) 10%, var(--bg)); color: var(--danger); }
.qs-drop-lot {
  font-size: 10px;
  font-weight: 600;
  color: var(--meta);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.qs-count {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
}
.qs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--space-4) var(--space-6);
}
.qs-drop-card {
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.qs-drop-top {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.qs-drop-img {
  width: 80px;
  height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  position: relative;
}
.qs-drop-img .swatch { position: absolute; inset: 0; }
.qs-drop-info { flex: 1; min-width: 0; }
.qs-drop-info h4 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qs-drop-info .wholesale {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.qs-drop-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.qs-bid-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
}
.qs-bid-pill.hot { background: color-mix(in oklch, var(--danger) 10%, var(--bg)); color: var(--danger); }
.qs-bid-pill svg { width: 12px; height: 12px; }
.qs-drop-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.qs-card-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.qs-card-countdown-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.qs-drop-card .qs-timer {
  margin-left: auto;
  gap: 4px;
}
.qs-drop-card .qs-timer-unit {
  min-width: 32px;
  padding: 5px 4px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.qs-drop-card .qs-timer-unit .num {
  font-size: 14px;
}
.qs-drop-card .qs-timer-unit span:last-child {
  font-size: 8px;
}
.qs-drop-countdown {
  font-size: 10px;
  font-weight: 600;
  color: var(--danger);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.qs-drop-countdown.calm { color: var(--muted); }
.qs-bid-btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--motion-fast);
}
.qs-bid-btn:hover { background: var(--accent-active); }
.qs-bid-btn:active { transform: scale(0.98); }
.filter-row {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.filter-chip.active {
  background: var(--fg);
  color: var(--accent-on);
  border-color: var(--fg);
}
.filter-panel {
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-4);
  background: var(--surface-warm);
  border-radius: var(--radius-md);
  display: none;
}
.filter-panel.open { display: block; }
.filter-group { margin-bottom: var(--space-4); }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.size-opt {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  display: grid;
  place-items: center;
}
.size-opt.active { background: var(--fg); color: var(--accent-on); border-color: var(--fg); }
.size-opt.disabled { color: var(--meta); border-color: var(--border-soft); text-decoration: line-through; }
#detail-sizes .size-opt { border-radius: var(--radius-pill); min-width: 52px; }

/* Product detail — screenshot style */
.detail-hero {
  aspect-ratio: auto;
  height: clamp(260px, 46dvh, 430px);
  background: var(--surface-warm);
  position: relative;
  margin: 0 var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.detail-hero .swatch {
  position: absolute;
  inset: 0;
  opacity: 1;
  background: var(--surface);
}
.detail-hero .stock-photo {
  object-fit: contain;
  object-position: center;
  padding: clamp(10px, 3.5vw, 30px);
}
.detail-hero .img-wish { top: 10px; right: 10px; }
.detail-hero-platform {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: 18%;
  background: var(--bg);
  border-radius: 50%;
  box-shadow: 0 4px 24px color-mix(in oklch, var(--fg) 8%, transparent);
  z-index: 1;
}
.back-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.back-header button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
}
.back-header .header-spacer { flex: 1; }
.detail-body { padding: var(--space-4) var(--space-4) var(--space-6); }
.detail-info-card,
.detail-action-panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.detail-info-card {
  padding: var(--space-4);
  background: var(--bg);
  margin-bottom: var(--space-4);
}
.detail-info-card h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.detail-action-panel {
  padding: var(--space-4);
  background: var(--bg);
  border-color: var(--border-soft);
  border-width: 1px;
  margin-bottom: var(--space-4);
}
.detail-purchase-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-3);
}
.detail-purchase-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.detail-purchase-head .detail-meta-row {
  display: none;
  margin-bottom: 0;
}
.detail-purchase-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  overflow: hidden;
  padding-top: var(--space-2);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
}
.detail-fact {
  min-height: 0;
  padding: 0 10px 0 0;
  margin: 0 10px 6px 0;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-soft);
  border-radius: 0;
}
.detail-fact:last-child {
  border-right: 0;
}
.detail-fact span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.detail-fact strong {
  display: block;
  min-width: 0;
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.action-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.action-panel-title {
  font-size: var(--text-sm);
  font-weight: 700;
}
.action-panel-note {
  font-size: 10px;
  color: var(--muted);
}
.detail-size-section {
  margin-bottom: var(--space-3);
}
.detail-size-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.detail-action-panel #detail-sizes {
  gap: 6px;
}
.detail-action-panel #detail-sizes .size-opt {
  min-width: 44px;
  padding: 0 10px;
  font-size: var(--text-xs);
}
.size-guide-panel {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
}
.size-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.size-guide-head strong {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.size-guide-head span {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}
.size-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.size-guide-cell {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}
.size-guide-cell span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.size-guide-cell strong {
  display: block;
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.size-guide-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.bid-size-guide {
  margin-top: var(--space-3);
  background: var(--bg);
}
.detail-action-panel .pack-grid {
  gap: 6px;
}
.detail-action-panel .pack-slab {
  padding: 8px 4px;
  border-width: 1px;
}
.detail-action-panel .pack-slab .qty {
  font-size: var(--text-xs);
}
.detail-action-panel .pack-slab .disc {
  font-size: 10px;
  margin-top: 2px;
}
.detail-body h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4px;
}
.detail-subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 0;
}
.detail-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.stock-badge {
  font-size: var(--text-xs);
  color: var(--success);
  font-weight: 500;
}
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}
.rating-pill .star { color: var(--warn); }
.detail-body .price-lg {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.color-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  justify-content: center;
}
.color-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}
.color-dot.active { border-color: var(--fg); }
.color-dot.active::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent-on);
  border-bottom: 2px solid var(--accent-on);
  transform: rotate(-45deg) translateY(-1px);
}
.color-dot.c1 { background: color-mix(in oklch, var(--danger) 50%, var(--fg)); }
.color-dot.c2 { background: var(--fg); }
.color-dot.c3 { background: color-mix(in oklch, var(--muted) 40%, var(--success)); }
.color-dot.c4 { background: color-mix(in oklch, var(--muted) 30%, var(--warn)); }
.detail-desc-text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
  margin-top: 0;
  max-width: 62ch;
}

/* Bulk lot panel — below product name */
.bulk-lot-panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: var(--space-3) 0 0;
  background: var(--bg);
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}
.bulk-lot-panel .pack-slabs { order: 1; }
.bulk-lot-panel .lot-header { order: 2; }
.bulk-lot-panel .lot-discount-pill { order: 3; }
.bulk-lot-panel .lot-pricing-row { order: 4; }
.bulk-lot-panel .lot-qty-row { order: 5; }
.bulk-lot-panel .lot-msrp { order: 6; }
.lot-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.lot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 5px 10px;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lot-label {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.35;
}
.lot-pricing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 0;
}
.lot-price-cell {
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-soft);
  border-radius: 0;
}
.lot-price-cell:last-child { border-right: 0; }
.lot-price-cell.highlight {
  border-color: var(--border-soft);
  background: var(--surface-warm);
}
.lot-price-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.lot-price-val {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
}
.bulk-lot-panel .pack-slabs {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) 0;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.lot-qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}
.lot-qty-row > span:first-child {
  font-size: var(--text-sm);
  font-weight: 500;
  flex-shrink: 0;
}
.lot-qty-row .qty-stepper { margin: 0; flex-shrink: 0; }
.lot-total-wrap {
  margin-left: auto;
  text-align: right;
  min-width: 0;
}
.lot-total-wrap .lot-total-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.lot-total-wrap .lot-total {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}
.lot-msrp {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.45;
  margin-top: var(--space-3);
}
.detail-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}
.detail-specs {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.detail-specs h4 {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0;
}
.spec-row {
  display: grid;
  gap: 2px;
  font-size: var(--text-xs);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.spec-row:last-child { border-bottom: 1px solid var(--border-soft); }
.spec-row span:first-child {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}
.spec-row span:last-child {
  color: var(--fg);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Product page bottom widgets */
.detail-widgets {
  padding: var(--space-2) 0 var(--space-6);
  border-top: 1px solid var(--border-soft);
  margin-top: var(--space-3);
}
.detail-widget {
  margin-bottom: var(--space-4);
}
.detail-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}
.detail-widget h3 {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}
.detail-widget-head h3 { padding: 0; margin: 0; }
.detail-widget-link {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail-widget-scroll {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.detail-widget-scroll::-webkit-scrollbar { display: none; }
.detail-widget-card {
  flex-shrink: 0;
  width: 112px;
  cursor: pointer;
}
.detail-widget-card .thumb {
  aspect-ratio: 4/5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
  position: relative;
}
.detail-widget-card .thumb .swatch { position: absolute; inset: 0; }
.detail-widget-card .live-dot {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 6px;
  background: var(--danger);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
}
.detail-widget-card h4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-widget-card .meta {
  font-size: 10px;
  color: var(--muted);
}
.detail-widget-card .price {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.detail-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.detail-widget-grid .detail-widget-card { width: auto; }

.detail-buy-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -6px 20px color-mix(in oklch, var(--fg) 4%, transparent);
}
.detail-buy-summary {
  flex: 1;
  min-width: 0;
}
.detail-buy-summary .buy-total {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}
.detail-buy-summary .buy-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}
.detail-buy-bar .btn-primary {
  flex-shrink: 0;
  padding: 13px 24px;
  min-width: 130px;
}

/* Bid product detail — separate from universal bulk page */
#screen-bid-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
#screen-bid-detail .detail-hero {
  aspect-ratio: auto;
  height: clamp(230px, 38dvh, 340px);
  max-height: none;
}
#screen-bid-detail .detail-body {
  display: flex;
  flex-direction: column;
}
#screen-bid-detail .bid-live-header { order: 1; }
#screen-bid-detail .detail-body h2 {
  order: 2;
  font-size: clamp(var(--text-lg), 4.5vw, var(--text-xl));
}
#screen-bid-detail .detail-subtitle { order: 3; }
#screen-bid-detail .bid-status-row { order: 4; }
#screen-bid-detail .bid-offer-panel { order: 5; }
#screen-bid-detail .bid-metric-grid { order: 6; }
#screen-bid-detail .bid-auction-panel { order: 7; }
#screen-bid-detail .bid-seller-card { order: 8; }
#screen-bid-detail .detail-desc-text { order: 9; }
#screen-bid-detail .bid-detail-widgets { order: 10; }
.bid-detail-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: clamp(72px, 18vw, 88px);
}
.bid-detail-widgets {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}
.bid-detail-scroll::-webkit-scrollbar { display: none; }
.bid-live-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.bid-lot-badge {
  display: inline-flex;
  padding: 5px 10px;
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.bid-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.bid-count-pill.hot { background: color-mix(in oklch, var(--danger) 10%, var(--bg)); color: var(--danger); }
.bid-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.bid-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.bid-metric {
  padding: var(--space-3);
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.bid-metric-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.bid-metric-val {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
}
.bid-auction-panel {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.bid-auction-panel h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.bid-time-progress { margin-bottom: var(--space-2); }
.bid-time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.bid-time-labels strong {
  display: block;
  font-size: 11px;
  color: var(--fg);
  font-weight: 600;
  margin-top: 2px;
}
.bid-time-track {
  height: 6px;
  background: var(--border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bid-time-fill {
  width: 100%;
  height: 100%;
  background: var(--fg);
  border-radius: var(--radius-pill);
  transform: scaleX(var(--fill-scale, 0));
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease-standard);
}
.bid-time-fill.urgent { background: var(--danger); }
.bid-sold-progress { margin-top: var(--space-3); }
.bid-seller-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.bid-seller-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.bid-seller-info { flex: 1; min-width: 0; }
.bid-seller-info strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 2px;
}
.bid-seller-info span {
  font-size: var(--text-xs);
  color: var(--muted);
}
.bid-transport-tag {
  flex-shrink: 0;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bid-offer-panel {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.bid-offer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-3);
}
.bid-offer-panel .offer-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.bid-offer-panel .offer-price {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
}
.bid-offer-total {
  text-align: right;
  min-width: 112px;
  padding: var(--space-3) 0;
  margin: var(--space-3) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.bid-offer-total span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.bid-offer-total strong {
  display: block;
  font-size: var(--text-base);
  line-height: 1.15;
}
.bid-detail-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  margin: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.bid-detail-countdown span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bid-detail-countdown strong {
  font-size: var(--text-base);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.bid-offer-note {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
}
.bid-offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.bid-offer-row .qty-stepper {
  background: var(--surface);
  border-radius: var(--radius-pill);
}
.bid-offer-row .qty-stepper button {
  color: var(--fg);
  width: 40px;
  height: 40px;
}
.bid-offer-row .qty-stepper span { color: var(--fg); font-weight: 600; }

/* Cart overlay — screenshot style */
#screen-cart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
#screen-cart .back-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.cart-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 0;
  background: var(--surface);
}
.cart-scroll::-webkit-scrollbar { display: none; }
.cart-help-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--fg);
  text-align: left;
}
.cart-help-strip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.cart-help-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--fg);
}
.cart-help-icon svg { width: 18px; height: 18px; }
.cart-help-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.cart-help-copy strong {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
}
.cart-help-copy span {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-help-action {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg);
}
.cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 32px;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: 0 var(--space-4) var(--space-3);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  align-items: flex-start;
}
.cart-thumb {
  width: 76px;
  height: 88px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.cart-thumb .swatch { position: absolute; inset: 0; }
.cart-details { flex: 1; min-width: 0; }
.cart-details h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
}
.cart-details .meta { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-2); }
.cart-line-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 8px 0;
  margin: var(--space-2) 0;
  background: transparent;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
}
.cart-line-breakdown div {
  min-width: 0;
  text-align: center;
  padding: 1px 4px;
  border-right: 1px solid var(--border-soft);
}
.cart-line-breakdown div:last-child { border-right: 0; }
.cart-line-breakdown strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.05;
}
.cart-line-breakdown span {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cart-price-block { margin-top: var(--space-2); }
.cart-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cart-price-original {
  font-size: var(--text-xs);
  color: var(--meta);
  text-decoration: line-through;
}
.cart-price-wholesale {
  font-size: var(--text-sm);
  font-weight: 600;
}
.cart-savings-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  border: 0;
}
.cart-price-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-2);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.cart-line-savings {
  margin-top: 4px;
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 600;
}
.cart-price-cell {
  padding: 7px 6px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-soft);
  border-radius: 0;
  min-width: 0;
}
.cart-price-cell:last-child { border-right: 0; }
.cart-price-cell span {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.cart-price-cell strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.cart-card-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
}
.cart-card-footer .qty-stepper {
  margin: 0;
  background: var(--surface);
  padding: 3px;
  border-radius: var(--radius-pill);
}
.summary-row.savings-row span:last-child,
.summary-row.discount-row span:last-child {
  color: var(--fg);
  font-weight: 600;
}
.cart-remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--danger) 12%, var(--bg));
  color: var(--danger);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cart-checkout-bar {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  color: var(--fg);
  border-top: 1px solid var(--border-soft);
}
.cart-deliver-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.cart-deliver-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cart-deliver-icon svg,
.cart-payment-icon svg { width: 18px; height: 18px; }
.cart-deliver-copy {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.cart-deliver-copy strong {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.25;
}
.cart-deliver-copy span {
  display: block;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-deliver-change {
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.cart-action-row {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(142px, 1.04fr);
  grid-template-areas:
    "pay total"
    "pay order";
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.cart-payment-launch {
  grid-area: pay;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  text-align: left;
  color: var(--fg);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.cart-payment-launch:focus-visible,
.cart-place-order:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.cart-payment-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  display: grid;
  place-items: center;
}
.cart-pay-kicker {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 1.1;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-pay-kicker svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.cart-pay-label {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
}
.cart-bar-total {
  grid-area: total;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 10px 4px;
  background: var(--surface-warm);
  border-radius: var(--radius-sm);
}
.cart-bar-total strong {
  font-size: clamp(var(--text-base), 4.6vw, var(--text-lg));
  line-height: 1.1;
  white-space: nowrap;
}
.cart-bar-total span {
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}
.cart-place-order {
  grid-area: order;
  min-height: 46px;
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--accent-on);
  font-size: var(--text-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.cart-place-order svg {
  width: 16px;
  height: 16px;
}

/* Profile */
.profile-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.profile-top-header h1 {
  font-size: var(--text-base);
  font-weight: 600;
}
.profile-user {
  text-align: center;
  padding: var(--space-4) var(--space-4) var(--space-6);
  margin: 0 var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--fg);
  color: var(--accent-on);
}
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 36px;
  overflow: hidden;
  border: 2px solid var(--border-soft);
}
.profile-user h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--accent-on);
}
.profile-user .email {
  font-size: var(--text-sm);
  color: color-mix(in oklch, var(--accent-on) 72%, transparent);
}
.profile-b2b-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.profile-b2b-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: color-mix(in oklch, var(--accent-on) 9%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent-on) 18%, transparent);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--accent-on) 78%, transparent);
}
.profile-b2b-badge.verified {
  color: var(--accent-on);
  border-color: color-mix(in oklch, var(--success) 55%, transparent);
  background: color-mix(in oklch, var(--success) 35%, transparent);
}
.profile-menu {
  padding: 0 var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 68px;
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  text-align: left;
  width: 100%;
  transition: background var(--motion-fast);
}
.profile-menu-item:hover { background: var(--surface-warm); }
.profile-menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--accent-on);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.profile-menu-icon svg { width: 20px; height: 20px; }
.profile-menu-text { flex: 1; min-width: 0; }
.profile-menu-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 2px;
}
.profile-menu-text span {
  font-size: var(--text-xs);
  color: var(--muted);
}
.profile-menu-item > svg { width: 18px; height: 18px; color: var(--meta); flex-shrink: 0; }

/* Wallet */
#screen-wallet { overflow-y: auto; scrollbar-width: none; }
#screen-wallet::-webkit-scrollbar { display: none; }
.wallet-scroll { padding: var(--space-4); padding-bottom: var(--space-8); }
.wallet-balance-card {
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.wallet-balance-card p { font-size: var(--text-xs); opacity: 0.85; margin-bottom: var(--space-2); }
.wallet-balance-card h2 { font-size: var(--text-2xl); font-weight: 700; }
.wallet-section {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.wallet-section h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.wallet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}
.wallet-row:last-child { border-bottom: none; padding-bottom: 0; }
.wallet-row span:last-child { font-weight: 600; }
.seller-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: var(--space-5);
}
.seller-stat {
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.seller-stat strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 2px;
}
.seller-stat span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.seller-lot-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.seller-lot-row:last-child { border-bottom: none; }
.seller-lot-thumb {
  width: 48px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  position: relative;
}
.seller-lot-thumb .swatch { position: absolute; inset: 0; }
.seller-lot-info { flex: 1; min-width: 0; }
.seller-lot-info strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seller-lot-info span {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}
.seller-lot-pct {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fg);
  flex-shrink: 0;
}
.seller-lot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
}
.seller-lot-chip {
  font-size: 10px;
  font-weight: 750;
  color: var(--fg);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 3px 7px;
}

.qs-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-3);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.qs-search-bar svg { width: 16px; height: 16px; color: var(--meta); flex-shrink: 0; }
.qs-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--fg);
}
.qs-search-bar input:focus { outline: none; }
.qs-search-bar input::placeholder { color: var(--meta); }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.qty-stepper button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  font-size: 18px;
  font-weight: 500;
  display: grid;
  place-items: center;
}
.qty-stepper span { min-width: 20px; text-align: center; font-weight: 500; }
.cart-summary {
  padding: var(--space-4);
  background: var(--bg);
  margin: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.cart-summary-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
.cart-summary-heading strong {
  font-size: var(--text-lg);
  line-height: 1.2;
}
.cart-summary-heading span {
  max-width: 170px;
  text-align: right;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--muted);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.summary-row.total {
  font-size: var(--text-base);
  font-weight: 700;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
}
.cart-savings-footer {
  margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--fg);
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-xs);
}
.cart-savings-footer strong {
  display: block;
  font-size: var(--text-sm);
}
.cart-savings-footer span {
  color: var(--muted);
}
.cart-gstin-card,
.delivery-instructions-card {
  margin: var(--space-2) var(--space-4) 0;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.cart-gstin-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: auto;
  text-align: left;
  color: var(--fg);
}
.cart-gstin-card .gstin-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
}
.cart-gstin-card strong,
.delivery-instructions-card h3 {
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: 700;
}
.cart-gstin-card span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs);
}
.cart-gstin-card .chev {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.cart-gstin-card:focus-visible,
.delivery-instruction-card:focus-visible,
.cart-deliver-change:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.delivery-instructions-card h3 { margin-bottom: var(--space-2); }
.delivery-instruction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.delivery-instruction-card {
  min-height: 72px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  text-align: left;
  display: grid;
  align-content: space-between;
  color: var(--fg);
  width: 100%;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.delivery-instruction-card:hover,
.delivery-instruction-card[aria-pressed="true"] {
  background: var(--bg);
  border-color: var(--fg);
}
.delivery-instruction-card svg {
  width: 18px;
  height: 18px;
}
.delivery-instruction-card strong {
  font-size: var(--text-xs);
  line-height: 1.25;
}
.promo-field {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-4) 0;
  padding: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.promo-field input {
  flex: 1;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.promo-field input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.promo-field input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--muted);
}
.empty-state h3 {
  font-size: var(--text-base);
  color: var(--fg);
  margin-bottom: var(--space-2);
}
.empty-state p {
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto;
}
.empty-action {
  margin-top: var(--space-4);
}
.profile-avatar-initials {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent-on);
  background: var(--fg);
}

/* Cart stats & profit highlight */
.cart-stats-bar {
  display: none;
  gap: var(--space-2);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-3);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.cart-stat {
  flex: 1;
  text-align: center;
  padding: var(--space-2);
}
.cart-stat-val {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.1;
}
.cart-stat-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cart-profit-banner {
  margin: var(--space-2) var(--space-4) 0;
  padding: 8px 0;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cart-profit-banner strong {
  font-size: var(--text-sm);
  color: var(--fg);
  display: block;
}
.cart-profit-banner span {
  font-size: var(--text-xs);
  color: var(--muted);
}
.cart-profit-pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.cart-delivery-banner {
  margin: var(--space-2) var(--space-4) 0;
  padding: 8px 0;
  border-radius: 0;
  font-size: var(--text-xs);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.cart-delivery-banner.free {
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
}
.cart-delivery-banner.paid {
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
}
.cart-delivery-banner svg { flex-shrink: 0; margin-top: 1px; }
.summary-row.highlight-profit span:last-child { color: var(--fg); font-weight: 600; }
.summary-row.fee-row span:last-child { font-weight: 500; }
.summary-row.roundoff-row span:last-child { color: var(--muted); font-size: var(--text-xs); }

/* Notifications */
#screen-notifications { display: flex; flex-direction: column; overflow: hidden; }
.notif-header-title { font-weight: 600; font-size: var(--text-base); }
.notif-mark-read-btn {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  color: var(--fg);
  transition: background var(--motion-fast);
}
.notif-mark-read-btn:hover { background: var(--surface); }
.notif-unread-banner {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--fg);
  color: var(--accent-on);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.notif-unread-banner strong { font-size: var(--text-sm); font-weight: 600; }
.notif-unread-banner span { font-size: var(--text-xs); opacity: 0.82; }
.notif-filters {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-1);
}
.notif-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  min-height: 0;
  padding-bottom: var(--space-4);
}
.notif-scroll::-webkit-scrollbar { display: none; }
.notif-group-label {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.notif-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin: 0 var(--space-4) var(--space-3);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  box-shadow: 0 2px 12px color-mix(in oklch, var(--fg) 5%, transparent);
  text-align: left;
  width: calc(100% - var(--space-8));
  transition: border-color var(--motion-fast);
  position: relative;
}
.notif-item.unread { border-color: color-mix(in oklch, var(--fg) 14%, var(--border-soft)); }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--fg);
}
.notif-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface);
}
.notif-icon-wrap svg { width: 20px; height: 20px; }
.notif-icon-wrap.deal { background: color-mix(in oklch, var(--warn) 18%, var(--bg)); color: color-mix(in oklch, var(--warn) 72%, var(--fg)); }
.notif-icon-wrap.bid { background: color-mix(in oklch, var(--fg) 8%, var(--bg)); color: var(--fg); }
.notif-icon-wrap.launch { background: color-mix(in oklch, var(--success) 14%, var(--bg)); color: var(--success); }
.notif-icon-wrap.bid-status { background: color-mix(in oklch, var(--fg) 8%, var(--bg)); color: var(--fg); }
.notif-icon-wrap.order { background: color-mix(in oklch, var(--muted) 14%, var(--bg)); color: var(--muted); }
.notif-body { flex: 1; min-width: 0; }
.notif-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.notif-type-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.notif-type-tag.deal { background: color-mix(in oklch, var(--warn) 16%, var(--bg)); color: color-mix(in oklch, var(--warn) 72%, var(--fg)); }
.notif-type-tag.bid { background: color-mix(in oklch, var(--fg) 8%, var(--bg)); color: var(--fg); }
.notif-type-tag.launch { background: color-mix(in oklch, var(--success) 14%, var(--bg)); color: var(--success); }
.notif-type-tag.bid-status { background: color-mix(in oklch, var(--fg) 8%, var(--bg)); color: var(--fg); }
.notif-type-tag.order { background: color-mix(in oklch, var(--muted) 14%, var(--bg)); color: var(--muted); }
.notif-body strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
  color: var(--fg);
}
.notif-body p {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 6px;
}
.notif-time { font-size: var(--text-xs); color: var(--meta); }
.notif-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}
.notif-empty h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.notif-empty p { font-size: var(--text-sm); color: var(--muted); }

/* Checkout / Payment / Confirm */
#screen-checkout, #screen-payment, #screen-order-confirm, #screen-order-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flow-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  min-height: 0;
  padding-bottom: var(--space-4);
}
.flow-scroll::-webkit-scrollbar { display: none; }
.flow-section {
  margin: var(--space-4);
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.flow-section h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.flow-address {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.flow-address-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.flow-address p { font-size: var(--text-sm); line-height: 1.45; }
.flow-address .meta { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.pay-methods { display: flex; flex-direction: column; gap: var(--space-2); }
.pay-method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
  transition: border-color var(--motion-fast);
}
.pay-method.active { border-color: var(--fg); background: var(--surface-warm); }
.pay-method-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pay-method-icon svg {
  width: 18px;
  height: 18px;
  color: var(--fg);
}
.flow-address-icon svg {
  width: 18px;
  height: 18px;
  color: var(--fg);
}
.pay-method-text strong { display: block; font-size: var(--text-sm); }
.pay-method-text span { font-size: var(--text-xs); color: var(--muted); }
.pay-method-check {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
}
.pay-method.active .pay-method-check {
  border-color: var(--fg);
  background: var(--fg);
}
.pay-method.active .pay-method-check::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent-on);
  border-radius: 50%;
}
#screen-order-confirm {
  background: var(--bg);
  color: var(--fg);
}
#screen-order-confirm .flow-scroll {
  background: var(--surface-warm);
  padding-bottom: calc(var(--space-8) + var(--space-4));
}
.confirm-status-header {
  background: var(--bg);
  color: var(--fg);
  padding: calc(var(--screen-pad-top) + var(--space-3)) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}
.confirm-status-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}
.confirm-back {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fg);
  background: var(--surface);
}
.confirm-back svg { width: 20px; height: 20px; }
.confirm-title-block {
  text-align: center;
  transform: translateX(-22px);
}
.confirm-kicker {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--success);
}
.confirm-eta {
  display: block;
  margin-top: var(--space-1);
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
}
.confirm-card {
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--fg);
}
.confirm-card.tight { padding: var(--space-3) var(--space-4); }
.confirm-card-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.confirm-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--fg);
}
.confirm-card-icon svg { width: 19px; height: 19px; }
.confirm-card-copy { min-width: 0; }
.confirm-card-copy strong {
  display: block;
  font-size: var(--text-lg);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0;
}
.confirm-card-copy span,
.confirm-card-copy p {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.confirm-hero-card {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
.confirm-hero-card .confirm-card-copy strong {
  color: var(--success);
  font-size: var(--text-xl);
}
.confirm-image-frame {
  min-height: clamp(112px, 28vw, 154px);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.confirm-image-frame .swatch { position: absolute; inset: 0; }
.confirm-image-frame .stock-photo { object-fit: contain; object-position: center; padding: var(--space-4); }
.confirm-empty-image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.confirm-add-card {
  background: var(--surface-warm);
}
.confirm-add-button,
.confirm-green-button {
  margin-top: var(--space-4);
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--accent-on);
  font-size: var(--text-base);
  font-weight: 700;
}
.confirm-add-button:focus-visible,
.confirm-green-button:focus-visible,
.confirm-pill:focus-visible,
.confirm-link-row:focus-visible,
.confirm-back:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.confirm-countdown {
  margin-left: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--fg) 36%, transparent);
  font-size: var(--text-sm);
}
.confirm-tip-visual,
#confirm-delivery-safety {
  display: none;
}
.confirm-tip-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.confirm-rate-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.confirm-pill {
  min-height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-size: var(--text-sm);
}
.confirm-pill.active {
  background: var(--fg);
  color: var(--accent-on);
}
.confirm-divider {
  height: 1px;
  margin: var(--space-4) calc(var(--space-4) * -1);
  background: var(--border-soft);
}
.confirm-detail-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.confirm-detail-row + .confirm-detail-row {
  border-top: 1px solid var(--border-soft);
}
.confirm-detail-row svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--muted);
}
.confirm-detail-row strong {
  display: block;
  font-size: var(--text-base);
  line-height: 1.25;
}
.confirm-detail-row span,
.confirm-detail-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.confirm-inline-action {
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 700;
}
.confirm-link-row {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  color: var(--fg);
}
.confirm-link-row svg {
  width: 19px;
  height: 19px;
}
.confirm-link-row .arrow {
  justify-self: end;
  color: var(--muted);
}
.confirm-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.confirm-summary-head h3 {
  font-size: var(--text-lg);
  line-height: 1.2;
  margin: 0;
}
.confirm-summary-head p {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
}
.confirm-total-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 700;
}
.confirm-item-strip {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.confirm-item-strip::-webkit-scrollbar { display: none; }
.confirm-order-thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--surface);
  color: var(--fg);
  overflow: hidden;
}
.confirm-order-thumb .swatch { width: 100%; height: 100%; border-radius: 0; }
.confirm-order-thumb.more {
  background: var(--fg);
  color: var(--accent-on);
  font-weight: 700;
}
.confirm-footer-mark {
  margin: var(--space-3) var(--space-4) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
#screen-order-confirm .flow-bottom-bar {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}
#screen-order-confirm .flow-bottom-bar .btn {
  margin: 0;
  min-height: 48px;
}
#screen-order-confirm .flow-bottom-bar .btn-primary {
  background: var(--fg);
  color: var(--accent-on);
}
#screen-order-confirm .flow-bottom-bar .btn-primary:hover {
  background: var(--accent-hover);
}
#screen-order-confirm .flow-bottom-bar .btn-secondary {
  color: var(--fg);
  border-color: var(--border);
  background: var(--bg);
}
@media (max-width: 380px) {
  .confirm-status-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .confirm-title-block {
    text-align: left;
    transform: none;
  }
  .confirm-eta {
    font-size: 24px;
  }
  .confirm-hero-card {
    grid-template-columns: 1fr;
  }
  .confirm-image-frame {
    min-height: 108px;
  }
  .confirm-tip-options {
    gap: 6px;
  }
  .confirm-pill {
    min-height: 40px;
    font-size: 12px;
  }
}
.flow-bottom-bar {
  flex-shrink: 0;
  padding: var(--space-4);
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
}
.flow-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.flow-total-row .amount { font-size: var(--text-lg); font-weight: 600; }
#screen-payment {
  background: var(--fg);
  color: var(--accent-on);
}
#screen-payment .back-header {
  background: var(--fg);
  color: var(--accent-on);
  border-bottom: none;
}
#screen-payment .flow-scroll {
  background: var(--fg);
  padding: var(--space-3) var(--space-4) var(--space-6);
}
.payment-title-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
}
.payment-title-wrap .amount {
  font-family: var(--font-body);
  font-weight: 800;
}
.payment-method-panel {
  background: color-mix(in oklch, var(--accent-on) 7%, var(--fg));
  border: 1px solid color-mix(in oklch, var(--accent-on) 7%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.payment-section-title {
  margin: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--accent-on);
}
#screen-payment .pay-methods {
  gap: 0;
}
#screen-payment .pay-method {
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-on);
  border-bottom: 1px solid color-mix(in oklch, var(--accent-on) 7%, transparent);
}
#screen-payment .pay-method:last-child {
  border-bottom: 0;
}
#screen-payment .pay-method.active {
  background: color-mix(in oklch, var(--success) 11%, var(--fg));
  border-color: color-mix(in oklch, var(--accent-on) 7%, transparent);
}
#screen-payment .pay-method-icon {
  width: 48px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
}
#screen-payment .pay-method-text {
  flex: 1;
  min-width: 0;
}
#screen-payment .pay-method-text strong {
  color: var(--accent-on);
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.25;
}
#screen-payment .pay-method-text span {
  color: color-mix(in oklch, var(--accent-on) 58%, transparent);
}
.pay-method-status {
  margin-left: auto;
  color: var(--success);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}
#screen-payment .pay-method-check {
  border: 0;
  width: 20px;
  height: 20px;
  color: color-mix(in oklch, var(--accent-on) 58%, transparent);
}
#screen-payment .pay-method-check::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  background: transparent;
  border-radius: 0;
}
#screen-payment .pay-method.active .pay-method-check {
  background: transparent;
  color: var(--success);
}
#screen-payment .pay-method.active .pay-method-check::after {
  background: transparent;
}

/* Orders tab */
#screen-orders { overflow-y: auto; scrollbar-width: none; }
#screen-orders::-webkit-scrollbar { display: none; }
.orders-header {
  padding: var(--space-4) var(--space-4) var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orders-header h1 { font-size: var(--text-lg); font-weight: 600; }
.orders-tabs {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.orders-tab {
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.orders-tab.active { color: var(--fg); border-bottom-color: var(--fg); }
.order-card {
  margin: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  text-align: left;
  width: calc(100% - var(--space-8));
  transition: border-color var(--motion-fast);
  cursor: pointer;
}
.order-card:hover { border-color: var(--border); }
.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
.order-id { font-size: var(--text-sm); font-weight: 600; }
.order-date { font-size: var(--text-xs); color: var(--muted); }
.order-status {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.order-status.packaging { background: color-mix(in oklch, var(--warn) 16%, var(--bg)); color: color-mix(in oklch, var(--warn) 72%, var(--fg)); }
.order-status.out-for-delivery { background: color-mix(in oklch, var(--fg) 8%, var(--bg)); color: var(--fg); }
.order-status.delivered { background: color-mix(in oklch, var(--success) 14%, var(--bg)); color: var(--success); }
.order-status.cancelled { background: color-mix(in oklch, var(--danger) 12%, var(--bg)); color: var(--danger); }
.order-card-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.order-card-total {
  font-size: var(--text-base);
  font-weight: 600;
}
.order-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.order-action-btn {
  flex: 1;
  min-width: calc(50% - var(--space-1));
  padding: 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  text-align: center;
}
.order-action-btn.primary { background: var(--fg); color: var(--accent-on); border-color: var(--fg); }
.order-action-btn.danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, var(--border)); }
.order-detail-items { display: flex; flex-direction: column; gap: var(--space-2); }
.order-detail-item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}
.order-detail-item:last-child { border-bottom: none; }
.order-detail-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.order-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-2);
}
.order-timeline-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-xs);
}
.order-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  margin-top: 3px;
  flex-shrink: 0;
}
.order-timeline-step.done .order-timeline-dot { background: var(--success); }
.order-timeline-step.active .order-timeline-dot { background: var(--fg); box-shadow: 0 0 0 3px color-mix(in oklch, var(--fg) 20%, transparent); }
.order-track-panel {
  border-color: var(--fg);
}
.order-track-panel.active {
  box-shadow: inset 0 0 0 1px var(--fg);
}
.order-track-grid {
  display: grid;
  gap: var(--space-2);
}
.order-track-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-soft);
}
.order-track-row:first-child { border-top: 0; padding-top: 0; }
.order-track-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--border);
}
.order-track-row.done .order-track-dot { background: var(--fg); }
.order-track-row.active .order-track-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 15%, transparent);
}
.order-track-copy strong {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.order-track-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.tab-bar.six-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}
.tab-bar.six-tabs .tab-btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 3px 2px 4px;
  font-size: 9px;
  line-height: 1.05;
}
.tab-bar.six-tabs .tab-btn svg { width: 17px; height: 17px; }

/* Stories — Instagram Reels feed */
#screen-lookbook {
  overflow: hidden;
  background: var(--fg);
  display: flex;
  flex-direction: column;
}
.lookbook-top-bar {
  flex-shrink: 0;
  background: var(--fg);
  z-index: 5;
}
.reel-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: color-mix(in oklch, var(--bg) 70%, transparent);
  font-size: var(--text-sm);
  text-align: center;
}
.tab-gender-bar {
  padding-top: 0;
}
.reels-feed {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reels-feed::-webkit-scrollbar { display: none; }
.reel-slide {
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  background: color-mix(in oklch, var(--fg) 94%, var(--bg));
}
.reel-bg {
  position: absolute;
  inset: 0;
}
.reel-bg.b1::after { background: linear-gradient(180deg, color-mix(in oklch, var(--muted) 70%, transparent) 0%, color-mix(in oklch, var(--fg) 88%, transparent) 100%); }
.reel-bg.b2::after { background: linear-gradient(180deg, color-mix(in oklch, var(--danger) 18%, var(--fg)), color-mix(in oklch, var(--fg) 90%, transparent) 100%); }
.reel-bg.b3::after { background: linear-gradient(180deg, color-mix(in oklch, var(--success) 15%, var(--fg)), color-mix(in oklch, var(--fg) 90%, transparent) 100%); }
.reel-bg.b4::after { background: linear-gradient(180deg, color-mix(in oklch, var(--muted) 60%, var(--fg)) 0%, color-mix(in oklch, var(--fg) 88%, transparent) 100%); }
.reel-bg.b5::after { background: linear-gradient(180deg, color-mix(in oklch, var(--warn) 12%, var(--fg)), color-mix(in oklch, var(--fg) 90%, transparent) 100%); }
.reel-model {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 52%;
  z-index: 1;
  pointer-events: none;
}
.reel-model .swatch {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: 0 24px 48px color-mix(in oklch, var(--fg) 35%, transparent);
}
.reel-model .swatch.s1,
.reel-product-card .swatch.s1 { background: linear-gradient(160deg, color-mix(in oklch, var(--danger) 45%, var(--fg)), color-mix(in oklch, var(--fg) 92%, var(--bg))); }
.reel-model .swatch.s2,
.reel-product-card .swatch.s2 { background: linear-gradient(160deg, color-mix(in oklch, var(--fg) 35%, var(--muted)), color-mix(in oklch, var(--fg) 90%, var(--bg))); }
.reel-model .swatch.s3,
.reel-product-card .swatch.s3 { background: linear-gradient(160deg, color-mix(in oklch, var(--success) 35%, var(--fg)), color-mix(in oklch, var(--fg) 92%, var(--bg))); }
.reel-model .swatch.s4,
.reel-product-card .swatch.s4 { background: linear-gradient(160deg, color-mix(in oklch, var(--warn) 40%, var(--fg)), color-mix(in oklch, var(--fg) 90%, var(--bg))); }
.reel-model .swatch.s5,
.reel-product-card .swatch.s5 { background: linear-gradient(160deg, color-mix(in oklch, var(--muted) 70%, var(--fg)), color-mix(in oklch, var(--fg) 88%, var(--bg))); }
.reel-model .swatch.s6,
.reel-product-card .swatch.s6 { background: linear-gradient(160deg, color-mix(in oklch, var(--danger) 28%, var(--fg)), color-mix(in oklch, var(--fg) 90%, var(--bg))); }
.reel-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 72%, transparent) 0%, transparent 38%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.reel-side-actions {
  position: absolute;
  right: var(--space-3);
  bottom: 210px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.reel-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--fg) 42%, transparent);
  color: var(--accent-on);
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  transition: transform var(--motion-fast), background var(--motion-fast);
}
.reel-action-btn:active { transform: scale(0.92); }
.reel-action-btn svg { width: 22px; height: 22px; }
.reel-action-btn.active svg {
  fill: var(--danger);
  stroke: var(--danger);
}
.reel-info {
  position: absolute;
  left: var(--space-4);
  right: 64px;
  bottom: 198px;
  z-index: 4;
  color: var(--accent-on);
  pointer-events: none;
}
.reel-info .creator {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 4px;
}
.reel-info .caption {
  font-size: var(--text-xs);
  opacity: 0.88;
  line-height: 1.35;
}
.reel-products-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--screen-pad-bottom) + 6px);
  z-index: 4;
  padding: 0 var(--banner-edge);
}
.reel-products-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.reel-products-scroll {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.reel-products-scroll::-webkit-scrollbar { display: none; }
.reel-product-card {
  flex: 0 0 118px;
  scroll-snap-align: start;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 18px color-mix(in oklch, var(--fg) 22%, transparent);
  backdrop-filter: blur(12px);
  position: relative;
}
.reel-product-card .thumb {
  aspect-ratio: 3/3.2;
  position: relative;
  overflow: hidden;
}
.reel-product-card .thumb .swatch { position: absolute; inset: 0; }
.reel-card-body {
  padding: 6px 8px 8px;
}
.reel-card-body .name {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel-card-body .price {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.reel-card-wish {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  color: var(--fg);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--fg) 12%, transparent);
  z-index: 2;
}
.reel-card-wish svg { width: 14px; height: 14px; }
.reel-card-wish.active svg {
  fill: var(--danger);
  stroke: var(--danger);
}
.reel-buy-btn {
  display: block;
  width: calc(100% - 12px);
  margin: 0 6px 8px;
  padding: 7px 6px;
  background: var(--fg);
  color: var(--accent-on);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  text-align: center;
  transition: transform var(--motion-fast);
}
.reel-buy-btn:active { transform: scale(0.97); }
.reel-swipe-hint {
  text-align: center;
  font-size: 11px;
  color: color-mix(in oklch, var(--accent-on) 75%, transparent);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.reel-swipe-hint svg {
  display: inline-block;
  vertical-align: -2px;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

/* Floating dock nav */
.tab-bar {
  position: absolute;
  left: var(--dock-side);
  right: var(--dock-side);
  bottom: var(--dock-bottom);
  z-index: 22;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px 4px;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in oklch, var(--border) 55%, transparent);
  border-radius: 22px;
  box-shadow: 0 0 0 1px var(--border-soft), 0 8px 28px color-mix(in oklch, var(--fg) 10%, transparent);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.tab-bar.dock-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: clamp(44px, 11vw, 48px);
  min-height: clamp(44px, 11vw, 48px);
  padding: 2px 4px;
  color: var(--muted);
  font-size: clamp(8px, 2.2vw, 9px);
  font-weight: 500;
  transition: color var(--motion-fast), background var(--motion-fast);
  border-radius: 14px;
}
.tab-btn svg { width: clamp(16px, 4.6vw, 18px); height: clamp(16px, 4.6vw, 18px); }
.tab-bar.guest-mode .tab-btn.guest-locked {
  color: color-mix(in oklch, var(--muted) 82%, var(--fg));
}
.tab-bar.guest-mode .tab-btn.guest-locked::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 2px var(--bg);
}
.tab-btn.active {
  color: var(--accent-on);
  background: var(--fg);
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent-on);
}
.home-indicator {
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 21;
  pointer-events: none;
}
.home-indicator span {
  width: 134px;
  height: 5px;
  background: var(--fg);
  border-radius: 999px;
  opacity: 0.2;
}

.toast {
  position: absolute;
  bottom: calc(var(--screen-pad-bottom) + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--fg);
  color: var(--accent-on);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-enter);
  z-index: 50;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Home feed entrance — compositor-only stagger */
@keyframes feed-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#screen-home .feed-reveal {
  opacity: 0;
  transform: translateY(10px);
}
#screen-home.feed-enter .feed-reveal {
  animation: feed-rise var(--motion-slow) var(--ease-enter) forwards;
  animation-delay: calc(min(var(--reveal-i, 0), 10) * 32ms);
}
#screen-home.feed-enter .home-top-shell.feed-reveal {
  animation-duration: 360ms;
  animation-delay: 0ms;
}

/* Home widgets — reference-inspired sections */
.home-widget {
  margin-bottom: var(--space-2);
}
.widget-title {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(17px, 4.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.15;
}
.widget-sub {
  display: none;
}

/* Category tiles — square cards */
.category-tiles-scroll {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.category-tiles-scroll::-webkit-scrollbar { display: none; }
.category-tile {
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.category-tile-img {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.category-tile-img .swatch { position: absolute; inset: 0; }
.category-tile span {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  max-width: 88px;
}

/* Home search — below header (EN/HI) */
.home-search-section {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.home-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.home-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  height: 42px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  min-width: 0;
}
.home-search svg.search-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.home-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--text-sm);
  color: var(--fg);
  min-width: 0;
}
.home-search input::placeholder { color: var(--meta); }
.home-search input:focus { outline: none; }
.home-search-mic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--muted);
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
}
.home-search-mic:active { background: var(--border-soft); color: var(--fg); }
.home-search-mic svg {
  width: 16px;
  height: 16px;
}
.home-search-divider {
  width: 1px;
  height: 20px;
  background: var(--border-soft);
  flex-shrink: 0;
}
.home-search-filter {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--muted);
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
}
.home-search-filter:active { background: var(--border-soft); color: var(--fg); }
.home-search-filter svg {
  width: 16px;
  height: 16px;
}
.home-filter-btn {
  display: none;
}
.home-filter-btn svg {
  width: 18px;
  height: 18px;
}
.home-filter-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.home-filter-badge[data-count="0"] { display: none; }

/* Best Budget Buys — 2×3 grid */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.budget-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.budget-card:active { transform: scale(0.97); }
.budget-card .swatch { position: absolute; inset: 0; }
.budget-card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 6px;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 78%, transparent), transparent);
  color: var(--accent-on);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

/* Best Brand Deals — horizontal scroll */
.brand-deals-scroll {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.brand-deals-scroll::-webkit-scrollbar { display: none; }
.brand-deal-card {
  flex: 0 0 clamp(128px, 36vw, 148px);
  height: clamp(160px, 44vw, 190px);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.brand-deal-card .deal-bg,
.gram-card .gram-bg {
  position: absolute;
  inset: 0;
}
.deal-bg.b1::after, .gram-bg.b1::after { background: linear-gradient(180deg, color-mix(in oklch, var(--muted) 70%, transparent) 0%, color-mix(in oklch, var(--fg) 88%, transparent) 100%); }
.deal-bg.b2::after, .gram-bg.b2::after { background: linear-gradient(180deg, color-mix(in oklch, var(--danger) 18%, var(--fg)), color-mix(in oklch, var(--fg) 90%, transparent) 100%); }
.deal-bg.b3::after, .gram-bg.b3::after { background: linear-gradient(180deg, color-mix(in oklch, var(--success) 15%, var(--fg)), color-mix(in oklch, var(--fg) 90%, transparent) 100%); }
.deal-bg.b4::after, .gram-bg.b4::after { background: linear-gradient(180deg, color-mix(in oklch, var(--muted) 60%, var(--fg)) 0%, color-mix(in oklch, var(--fg) 88%, transparent) 100%); }
.deal-bg.b5::after, .gram-bg.b5::after { background: linear-gradient(180deg, color-mix(in oklch, var(--warn) 12%, var(--fg)), color-mix(in oklch, var(--fg) 90%, transparent) 100%); }
.brand-deal-card .deal-figure {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}
.brand-deal-card .deal-figure .swatch { position: absolute; inset: 0; }
.brand-deal-card .deal-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 55%, transparent), transparent 55%);
}
.brand-deal-card .deal-meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  color: var(--accent-on);
}
.brand-deal-card .deal-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.brand-deal-card .deal-offer {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.92;
}

/* High on Trend — dual banners */
.trend-duo-header {
  padding-top: var(--space-1);
}
.trend-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.trend-duo-card {
  position: relative;
  aspect-ratio: 3/4.2;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.trend-duo-card .swatch { position: absolute; inset: 0; }
.trend-duo-card .trend-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 62%, transparent), transparent 50%);
}
.trend-duo-card .trend-copy {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: var(--accent-on);
  z-index: 2;
}
.trend-duo-card .trend-eyebrow {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 2px;
}
.trend-duo-card .trend-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.trend-duo-card .trend-cta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hot on the Gram */
.gram-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.gram-card {
  position: relative;
  aspect-ratio: 3/4.5;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.gram-card .gram-bg { position: absolute; inset: 0; }
.gram-card .gram-figure {
  position: absolute;
  inset: 0;
}
.gram-card .gram-figure .swatch { position: absolute; inset: 0; }
.gram-card .gram-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg) 70%, transparent), transparent 45%);
}
.gram-card .gram-copy {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: var(--accent-on);
  z-index: 2;
}
.gram-card .gram-brand {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.gram-card .gram-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
}
.gram-card .gram-sub {
  font-size: 8px;
  opacity: 0.8;
  line-height: 1.3;
  margin-bottom: 6px;
}
.gram-card .gram-cta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
}

/* Now in Style — category row */
.style-cats-scroll {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.style-cats-scroll::-webkit-scrollbar { display: none; }
.style-cat-card {
  flex: 0 0 100px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.style-cat-img {
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  margin-bottom: 6px;
}
.style-cat-img .swatch { position: absolute; inset: 0; }
.style-cat-label {
  display: block;
  padding: 4px 6px;
  background: color-mix(in oklch, var(--danger) 18%, var(--surface));
  color: var(--fg);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Trend collections — Myntra-style themed grids */
.trend-collection {
  margin: 0 var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: var(--space-3);
}
.trend-collection.pink { background: color-mix(in oklch, var(--danger) 10%, var(--surface)); }
.trend-collection.lavender { background: color-mix(in oklch, var(--fg) 6%, var(--surface)); }
.trend-collection.mint { background: color-mix(in oklch, var(--success) 10%, var(--surface)); }
.trend-collection h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.trend-collection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  grid-template-rows: auto auto;
  gap: var(--space-2);
}
.trend-collection-grid .tc-card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg);
  border: none;
  padding: 0;
}
.trend-collection-grid .tc-card.featured {
  grid-row: 1 / span 2;
  grid-column: 3;
}
.trend-collection-grid .tc-thumb {
  aspect-ratio: 3/4;
  position: relative;
}
.trend-collection-grid .tc-card.featured .tc-thumb { aspect-ratio: auto; height: 100%; min-height: 200px; }
.trend-collection-grid .tc-thumb .swatch { position: absolute; inset: 0; }
.trend-collection-grid .tc-price {
  padding: 5px 6px 7px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.trend-collection-grid .tc-price .was {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 4px;
}
.trend-collection-cta {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg);
  text-align: center;
  cursor: pointer;
}

/* Our Picks — filter chips + product row */
.picks-filter-scroll {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.picks-filter-scroll::-webkit-scrollbar { display: none; }
.picks-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--fg);
  border: 1.5px solid var(--border-soft);
  cursor: pointer;
  transition: all var(--motion-fast);
  white-space: nowrap;
}
.picks-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.picks-chip.active {
  background: var(--fg);
  color: var(--accent-on);
  border-color: var(--fg);
}
.picks-product-scroll {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.picks-product-scroll::-webkit-scrollbar { display: none; }
.picks-product-card {
  flex: 0 0 130px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.picks-product-card .thumb {
  aspect-ratio: 3/3.6;
  position: relative;
}
.picks-product-card .thumb .swatch { position: absolute; inset: 0; }
.picks-product-card .picks-body {
  padding: 8px;
}
.picks-product-card .picks-name {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picks-product-card .picks-price {
  font-size: 10px;
  font-weight: 600;
}
.picks-product-card .picks-price .was {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 3px;
}
.picks-product-card .picks-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  background: color-mix(in oklch, var(--success) 15%, var(--surface));
  color: var(--success);
  font-size: 8px;
  font-weight: 700;
  border-radius: 4px;
}

@media (max-width: 430px) {
  .home-top-shell .home-search-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .home-nav-actions {
    justify-content: space-between;
  }
  .account-trust-strip {
    grid-template-columns: 1fr;
  }
}

/* Responsive — small phones (SE, narrow Android) */
@media (max-width: 360px) {
  :root {
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --space-4: 14px;
    --banner-edge: 12px;
    --dock-side: 12px;
    --screen-pad-bottom: 54px;
    --ui-scale: 0.9;
  }
  .device { --ui-scale: 0.9; }
  .home-header { padding: var(--space-2) var(--gutter-fluid); }
  .home-top-shell .home-search-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .home-nav-actions { justify-content: space-between; }
  .home-nav-actions :is(.home-bell-btn, .home-cart-btn, .home-welcome-row) {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .home-gender-pill { min-height: 44px; padding: 9px 5px; font-size: 9px; letter-spacing: 0.14em; }
  .home-all-category-btn { width: 44px; min-width: 44px; }
  .home-search-section { padding: var(--space-2) var(--gutter-fluid); }
  .all-categories-layout { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-2); padding-inline: var(--gutter-fluid); }
  .all-categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .all-category-rail-btn { min-height: 66px; font-size: 9px; }
  .category-browse-card { min-height: 104px; }
  .category-browse-thumb { width: 54px; height: 54px; }
  .product-grid { gap: 6px; padding-inline: var(--gutter-fluid); }
  .product-info .name { font-size: 11px; }
  .quick-sell-card { flex: 0 0 clamp(120px, 34vw, 128px); width: clamp(120px, 34vw, 128px); min-width: clamp(120px, 34vw, 128px); }
  .category-tile { flex: 0 0 76px; }
  .category-tile-img { width: 76px; height: 76px; }
  .budget-grid { grid-template-columns: repeat(2, 1fr); }
  .bid-metric-grid { grid-template-columns: 1fr; }
  .lot-pricing-row { grid-template-columns: 1fr 1fr; }
  .lot-pricing-row .lot-price-cell:last-child { grid-column: 1 / -1; }
  .detail-buy-bar { padding: 10px var(--gutter-fluid); gap: var(--space-2); }
  .detail-buy-bar .btn-primary { min-width: 108px; padding: 11px 16px; font-size: var(--text-sm); }
  .cart-item { grid-template-columns: 68px minmax(0, 1fr) 30px; gap: var(--space-2); margin-inline: var(--gutter-fluid); }
  .cart-thumb { width: 68px; height: 82px; }
  .cart-line-breakdown { gap: 0; padding: 8px 0; }
  .cart-line-breakdown strong { font-size: var(--text-sm); }
  .cart-price-breakdown { grid-template-columns: 1fr 1fr; }
  .cart-price-cell:last-child { grid-column: 1 / -1; }
  .cart-price-cell strong { white-space: normal; overflow-wrap: anywhere; }
  .cart-summary-heading { flex-direction: column; gap: 4px; }
  .cart-summary-heading span { max-width: none; text-align: left; }
  .cart-gstin-card { grid-template-columns: 30px minmax(0, 1fr) auto; padding: var(--space-3); }
  .delivery-instruction-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .delivery-instruction-card { min-height: 82px; padding: 10px 8px; border-radius: var(--radius-sm); }
  .delivery-instruction-card strong { font-size: 10px; }
  .cart-help-strip { margin-inline: var(--gutter-fluid); grid-template-columns: 30px minmax(0, 1fr); }
  .cart-help-action { display: none; }
  .cart-help-icon { width: 30px; height: 30px; }
  .cart-checkout-bar { padding-inline: var(--gutter-fluid); }
  .cart-action-row { grid-template-columns: minmax(116px, 1fr) minmax(128px, 1fr); }
  .cart-payment-launch { padding: 10px; grid-template-columns: 24px minmax(0, 1fr); }
  .cart-payment-icon { width: 24px; height: 24px; }
  .cart-place-order { font-size: 13px; }
  .bid-offer-row { flex-wrap: wrap; }
  .qs-drop-card { padding: var(--space-3); }
  .qs-drop-top { gap: var(--space-2); }
  .tab-btn { min-width: 36px; font-size: 8px; }
  .tab-bar.six-tabs .tab-btn {
    min-width: 0;
    min-height: 46px;
    font-size: 8.5px;
  }
  .tab-btn svg { width: 16px; height: 16px; }
  .assist-fab { right: 12px; bottom: calc(var(--screen-pad-bottom) + 4px); }
  .login-gate { grid-template-rows: minmax(210px, 40%) 1fr; }
  .login-gate-video { height: auto; }
}

/* Responsive — large phones (Pro Max, Plus) */
@media (min-width: 400px) {
  :root { --banner-edge: 16px; --ui-scale: 1.03; }
  .device { --ui-scale: 1.03; }
  .category-tile { flex: 0 0 96px; }
  .category-tile-img { width: 96px; height: 96px; }
  .quick-sell-card { flex: 0 0 clamp(148px, 38vw, 156px); width: clamp(148px, 38vw, 156px); min-width: clamp(148px, 38vw, 156px); }
  .picks-product-card { flex: 0 0 clamp(128px, 34vw, 138px); }
  .brand-deal-card { flex: 0 0 clamp(140px, 36vw, 148px); height: clamp(172px, 44vw, 190px); }
  .detail-body h2 { font-size: var(--text-2xl); }
  .bid-metric { padding: var(--space-4); }
}

/* Responsive — short viewports */
@media (max-height: 700px) {
  :root { --screen-pad-bottom: 56px; }
  .login-gate {
    grid-template-rows: minmax(180px, 34%) 1fr;
  }
  .login-gate-hero {
    min-height: 0;
    padding-bottom: var(--space-6);
  }
  .login-gate-video {
    height: auto;
    margin-top: 0;
  }
  .login-gate.auth-keyboard .login-gate-hero {
    min-height: 0;
  }
  .login-gate.auth-keyboard .login-gate-body {
    transform: translateY(-10px);
  }
  #screen-bid-detail .detail-hero {
    height: clamp(196px, 32dvh, 250px);
    max-height: none;
  }
  .detail-hero {
    height: clamp(220px, 38dvh, 300px);
    aspect-ratio: auto;
  }
  .qs-hero { margin-bottom: var(--space-2); }
  .promo-banner-block { min-height: 240px; }
}

/* Landscape — keep dock usable */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --device-h: min(100dvh - 8px, 500px);
    --screen-pad-bottom: 50px;
  }
  .device-notch { display: none; }
  .status-bar { height: 40px; padding-top: 8px; }
}