/* ============================================================
   StyleKro — Airbnb-inspired light theme
   Pure white canvas · ink #222 · Rausch #ff385c · soft radii
   ============================================================ */

:root {
  /* Surface */
  --bg: #ffffff;             /* canvas */
  --bg-2: #ffffff;
  --paper: #ffffff;          /* card */
  --paper-2: #f7f7f7;        /* surface-soft */
  --card: #ffffff;
  --surface-soft: #f7f7f7;
  --surface-strong: #f2f2f2;

  /* Text */
  --ink: #222222;            /* primary text on white */
  --ink-soft: #3a3a3a;       /* body running text (4.5:1 on white) */
  --muted: #595959;          /* tertiary (5.5:1 on white, WCAG AA) */
  --muted-soft: #767676;     /* disabled link (still ≥4.5:1) */

  /* Hairlines */
  --line: #dddddd;           /* default hairline */
  --line-soft: #ebebeb;
  --line-strong: #c1c1c1;

  /* Brand — Rausch */
  --accent: #ff385c;
  --accent-active: #e00b41;
  --accent-disabled: #ffd1da;
  --accent-2: #ff385c;
  --accent-soft: rgba(255, 56, 92, 0.10);
  --error: #c13515;
  --gold: #f26a10;
  --grad: linear-gradient(135deg, #ff385c 0%, #e00b41 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 56, 92, 0.10), rgba(255, 56, 92, 0.04));

  /* Radii (Airbnb soft language) */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* Single elevation tier */
  --shadow-sm: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.10) 0 4px 8px 0;
  --shadow-md: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.10) 0 4px 8px 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Airbnb Cereal VF', 'Cereal', Circular, 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  font-size: 15px;
  line-height: 1.55;
  font-weight: 450;
  letter-spacing: -0.005em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: -2;
  pointer-events: none;
}

/* ambient orbs (disabled in light theme) */
#bg-orbs { display: none; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.08); }
}

::selection { background: var(--accent); color: #fff; }

/* ==========  Type  ========== */
.serif, .hero h1, .login-heading, .welcome-card h1, .profile-card h2,
.agent-name, .logo {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-feature-settings: "ss01";
}

.eyebrow, .step, .welcome-eyebrow, .composer-hint, .art-tag, .auth-tab, .agent-title {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 600;
}

/* ==========  Screens  ========== */
.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(20px, 6vw, 88px);
  animation: fadeUp 0.45s cubic-bezier(.2,.8,.2,1) both;
}
.screen.hidden { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.boot-splash {
  min-height: 100vh; display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-size: 28px; letter-spacing: -0.01em; color: var(--muted);
}

/* ==========  Login (editorial split)  ========== */
section.screen:has(.hero) {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: stretch;
}

.hero {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 0 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.hero .logo {
  align-self: flex-start;
  margin: 0 0 8px;
}
.logo img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.logo.small {
  margin-left: 0;
}
.logo.small img { width: auto; height: 36px; }
.logo-mark { display: none; }

.hero h1 {
  font-weight: 500;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 32px 0 20px;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero h1::after { display: none; }

.lede {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 32px;
}
.lede em { color: var(--accent); font-style: italic; font-weight: 500; }

.login-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px 32px 26px;
  box-shadow: var(--shadow-sm);
  max-width: 460px;
  width: 100%;
}
.login-heading {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.google-btn-wrap, #g_id_signin { display: flex; justify-content: center; min-height: 44px; }
.dev-fallback.hidden { display: none; }

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 22px 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.dev-login { display: flex; flex-direction: column; gap: 12px; }
.dev-login input,
#profile-name {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 12px 2px;
  border-radius: 0;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s;
}
.dev-login input::placeholder, #profile-name::placeholder { color: var(--muted); }
.dev-login input:focus, #profile-name:focus { outline: none; border-bottom-color: var(--accent); }

.fineprint { color: var(--muted); font-size: 12px; margin: 18px 0 0; text-align: center; line-height: 1.5; }
#auth-error, .error { color: var(--accent); font-size: 13px; min-height: 1em; margin: 10px 0 0; text-align: center; font-style: italic; }

/* ==========  Help link + drawer (login screen)  ========== */
.help-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-top: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  transition: color .15s;
}
.help-link:hover { color: var(--accent); }
.help-link-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  animation: helpFadeIn .25s ease-out;
}
@keyframes helpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.help-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -40px 0 80px -20px rgba(0,0,0,0.6);
  padding: 36px 36px 28px;
  z-index: 91;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  animation: helpSlideIn .35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes helpSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.help-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.help-close:hover { border-color: var(--accent); color: var(--accent); background: var(--paper-2); }

.help-thanks {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 32px 20px; margin-top: 4px;
  background: linear-gradient(180deg, rgba(255, 45, 111, 0.08), rgba(255, 45, 111, 0.02));
  border: 1px solid rgba(255, 45, 111, 0.18);
  border-radius: 18px;
  animation: helpThanksIn .35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes helpThanksIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.help-thanks-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: 28px; font-weight: 700;
  box-shadow: 0 10px 24px -8px rgba(255, 45, 111, 0.55);
}
.help-thanks-title {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: 22px; font-weight: 600; margin: 4px 0 0;
  color: var(--ink, #1d1d1f);
}
.help-thanks-sub {
  font-size: 14px; color: var(--ink-soft, #6f7282); margin: 0; max-width: 320px;
}

.help-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
}
.help-title {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.help-title em { font-style: italic; color: var(--accent); font-weight: 400; }
.help-sub {
  margin: -4px 0 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.help-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
}
.help-contact:hover {
  border-color: var(--accent);
  background: var(--paper);
  transform: translateY(-1px);
}
.help-contact-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.help-contact > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.help-contact-label {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.help-contact strong {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  word-break: break-all;
}

.help-divider {
  position: relative;
  text-align: center;
  margin: 8px 0 4px;
}
.help-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
}
.help-divider span {
  position: relative;
  background: var(--paper);
  padding: 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.help-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-form input,
.help-form textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, background .15s;
}
.help-form input:focus,
.help-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.help-form textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.field-optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted);
  font-style: italic;
}
.help-fineprint {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .help-drawer { padding: 28px 22px 22px; }
}

/* ==========  Hero art (editorial try-on stage)  ========== */
.hero-art {
  position: relative;
  align-self: stretch;
  min-height: 560px;
  width: 100%;
  display: flex;
  align-items: stretch;
  padding: 12px 0;
}
.tryon-stage {
  --cycle: 12s;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top meta strip — "LIVE TRY-ON   01 / 03" */
.tryon-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px;
}
.tryon-meta-label {
  position: relative;
  padding-left: 16px;
  color: var(--ink-soft);
  font-weight: 600;
}
.tryon-meta-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(255, 56, 92, 0.5);
  animation: tryonPulse 2.4s infinite ease-out;
}
@keyframes tryonPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 56, 92, 0.50); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 56, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 56, 92, 0); }
}
.tryon-meta-index {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tryon-idx {
  position: relative;
  display: inline-block;
  min-width: 1.6em;
  opacity: 0;
  transform: translateY(4px);
  animation: tryonIdx var(--cycle) infinite ease-in-out;
}
.tryon-idx-1 { animation-delay: 0s; }
.tryon-idx-2 { animation-delay: calc(var(--cycle) / 3); }
.tryon-idx-3 { animation-delay: calc(var(--cycle) * 2 / 3); }
.tryon-idx + .tryon-idx { position: absolute; right: 2.4em; }
.tryon-idx-total { color: var(--muted); margin-left: 2px; }
@keyframes tryonIdx {
  0%   { opacity: 0; transform: translateY(4px); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* Main frame */
.tryon-frame {
  position: relative;
  flex: 1;
  min-height: 540px;
  border-radius: 3px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px -40px rgba(0,0,0,0.7),
    0 8px 24px -12px rgba(255, 56, 92, 0.18);
}
.tryon-frame::before {
  /* refined inner hairline */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

.tryon-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(1.04) contrast(1.02);
  animation: tryonCycle var(--cycle) infinite cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.tryon-slide-1 { animation-delay: 0s; }
.tryon-slide-2 { animation-delay: calc(var(--cycle) / 3); }
.tryon-slide-3 { animation-delay: calc(var(--cycle) * 2 / 3); }

@keyframes tryonCycle {
  0%   { opacity: 0; transform: scale(1.08); }
  4%   { opacity: 1; transform: scale(1.04); }
  30%  { opacity: 1; transform: scale(1.0);  }
  36%  { opacity: 0; transform: scale(0.99); }
  100% { opacity: 0; transform: scale(0.99); }
}

/* Soft vignette + bottom gradient (no harsh shimmer) */
.tryon-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(10,11,16,0.45) 100%),
    linear-gradient(180deg, transparent 50%, rgba(10,11,16,0.78) 100%);
}
.tryon-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* Caption — eyebrow + serif title, fade up */
.tryon-caption {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  z-index: 4;
  height: 64px;
}
.tryon-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  animation: tryonCapCycle var(--cycle) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.tryon-cap-1 { animation-delay: 0s; }
.tryon-cap-2 { animation-delay: calc(var(--cycle) / 3); }
.tryon-cap-3 { animation-delay: calc(var(--cycle) * 2 / 3); }
.tryon-cap-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.tryon-cap-title {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
@keyframes tryonCapCycle {
  0%   { opacity: 0; transform: translateY(10px); }
  6%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Bottom progress — three thin bars that fill in sequence */
.tryon-progress {
  display: flex;
  gap: 6px;
  padding: 0 2px;
}
.tryon-bar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.tryon-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left center;
  animation: tryonBar var(--cycle) infinite linear;
}
.tryon-bar-1::after { animation-delay: 0s; }
.tryon-bar-2::after { animation-delay: calc(var(--cycle) / 3); }
.tryon-bar-3::after { animation-delay: calc(var(--cycle) * 2 / 3); }
@keyframes tryonBar {
  0%   { transform: scaleX(0); opacity: 1; }
  33%  { transform: scaleX(1); opacity: 1; }
  34%  { opacity: 0.35; }
  100% { transform: scaleX(1); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .tryon-slide,
  .tryon-cap,
  .tryon-idx,
  .tryon-bar::after,
  .tryon-meta-label::before {
    animation: none;
  }
  .tryon-slide-1,
  .tryon-cap-1,
  .tryon-idx-1 { opacity: 1; transform: none; }
  .tryon-bar-1::after { transform: scaleX(1); }
}
.art-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
  color: var(--ink);
}

/* ==========  Buttons  ========== */
.btn {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  transition: transform .15s ease, background .15s, color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad);
  color: white;
  width: 100%;
  box-shadow: 0 10px 24px -12px rgba(255, 92, 138, 0.55);
}
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(255, 92, 138, 0.75); }
.btn-primary:disabled { opacity: 0.5; cursor: progress; }

.btn-ghost {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--paper); border-color: var(--accent); }

.btn.small { padding: 10px 16px; font-size: 11px; letter-spacing: 0.18em; }

/* ==========  Topbar (consistent across all pages)  ========== */
/* Zero top padding on any container that holds a topbar so the bar sits flush at the top */
.screen:has(.topbar),
.page:has(.topbar),
.profile-wrap:has(.topbar),
.wardrobe-page:has(.topbar),
.shops-page:has(.topbar),
.page-wrap:has(.topbar) { padding-top: 0; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  /* Sticky in normal flow — occupies space, never overlaps content */
  position: sticky;
  top: 0;
  z-index: 40;
  height: 60px;
  /* Match page-wrap width (1200px), centered */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(20, 20, 50, 0.08);
  box-sizing: border-box;
  flex-shrink: 0;
}
.topbar .logo,
.topbar .logo.small { display: inline-flex; align-items: center; }
.topbar .logo img,
.topbar .logo.small img { width: auto; height: 36px; display: block; }
.topbar .topnav { gap: 6px; }
.topbar .navlink {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #6f7282;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.topbar .navlink:hover { color: #1d1d1f; background: rgba(20, 20, 50, 0.04); }
.topbar .navlink.active {
  color: #ff2d6f;
  background: rgba(255, 45, 111, 0.08);
}
.user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.user-chip-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.user-chip-btn:hover { background: var(--paper-2); }
.chip-caret {
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  transition: transform .15s;
}
.user-chip.open .chip-caret { transform: rotate(180deg); }
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad); color: white;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 14px;
  overflow: hidden;
}
.user-chip .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.user-menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 6px;
  cursor: pointer;
}
.user-menu button:hover { background: var(--paper-2); color: var(--accent); }

/* ==========  Profile  ========== */
.profile-wrap { max-width: 1180px; margin: 0 auto; width: 100%; }
.muted { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 56ch; }

/* Profile photo gallery (multi-photo upload + primary selection) */
/* v2 — consistent with other pages (no custom background, standard page-wrap layout) */
.profile-wrap:has(.profile-v2-card) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 80px;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}
.profile-v2-card {
  width: 100%;
  max-width: 720px;
  margin: 8px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px clamp(20px, 4vw, 44px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.profile-v2-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff0f5; color: #ff2d6f;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  margin-bottom: 18px; text-transform: uppercase;
}
.profile-v2-title {
  font-size: 38px; line-height: 1; color: #1d1d1f;
  margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em;
}
.profile-v2-sub {
  color: #6f7282; line-height: 1.7; font-size: 15px;
  margin: 0 0 28px;
}
.profile-v2-actions {
  display: flex; gap: 14px; margin-bottom: 26px;
}
.profile-v2-btn {
  flex: 1; height: 54px; border: none; border-radius: 18px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.profile-v2-btn:disabled { opacity: 0.6; cursor: default; }
.profile-v2-btn.is-disabled { opacity: 0.6; cursor: default; pointer-events: none; }
.profile-v2-file {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.profile-v2-btn-primary {
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 45, 111, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.profile-v2-btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255, 45, 111, 0.32); }
.profile-v2-btn-secondary {
  background: #fff; border: 1px solid #ececf2; color: #444;
}
.profile-v2-btn-secondary:hover:not(:disabled) { background: #f8f8fb; }

.profile-v2-empty {
  color: #6f7282; font-size: 14px; text-align: center;
  padding: 28px 12px; margin: 0 0 26px;
  border: 1px dashed #ececf2; border-radius: 18px; background: #fafafd;
}

.profile-v2-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}
.profile-v2-photo {
  position: relative; height: 240px;
  border-radius: 24px; overflow: hidden;
  cursor: pointer; padding: 0;
  border: 3px solid transparent; background: #ddd;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.profile-v2-photo.uploading {
  cursor: default;
  pointer-events: none;
}
.profile-v2-photo.uploading img {
  filter: saturate(0.92);
}
.profile-v2-photo:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
}
.profile-v2-photo:disabled { cursor: default; }
.profile-v2-photo.primary {
  border-color: #ff2d6f;
  box-shadow: 0 0 0 6px rgba(255, 45, 111, 0.10), 0 12px 24px rgba(255, 45, 111, 0.18);
  cursor: default;
}
.profile-v2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-v2-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%, transparent);
}
.profile-v2-tag {
  position: absolute; top: 14px; left: 14px;
  background: #fff; color: #ff2d6f;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  padding: 7px 11px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
}
.profile-v2-remove {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.profile-v2-remove:hover { background: #ff2d6f; transform: scale(1.05); }
.profile-v2-footer {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: flex; flex-direction: column; align-items: stretch;
  color: #fff; z-index: 2; pointer-events: none;
  gap: 6px;
}
.profile-v2-name { font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.profile-v2-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: auto; cursor: pointer; color: #fff;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.profile-v2-pill:disabled { cursor: default; opacity: 0.85; }
.profile-v2-pill:hover:not(:disabled) { background: rgba(0, 0, 0, 0.70); }
.profile-v2-pill.active {
  background: rgba(255, 45, 111, 0.92); border-color: rgba(255, 255, 255, 0.4);
}
.profile-v2-cat-select {
  font-size: 11px; font-weight: 600;
  padding: 7px 28px 7px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='white' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  pointer-events: auto; cursor: pointer;
  width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  text-overflow: ellipsis;
}
.profile-v2-cat-select option { color: #111; background: #fff; }
.profile-v2-spinner {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.profile-v2-spinner-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: profile-v2-spin 0.8s linear infinite;
}
@keyframes profile-v2-spin {
  to { transform: rotate(360deg); }
}
.profile-v2-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 48px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  margin: 18px 0;
}
.profile-v2-loading .profile-v2-spinner-ring {
  width: 36px; height: 36px;
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.85);
}
.profile-v2-loading-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.7);
}
.profile-v2-uploading-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 23, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.profile-v2-input { margin-bottom: 22px; }
.profile-v2-input label {
  display: block; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; color: #6f7282; letter-spacing: 1px;
}
.profile-v2-input input {
  width: 100%; height: 56px; border-radius: 18px;
  border: 2px solid #ececf2; padding: 0 18px;
  font-size: 15px; outline: none; background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.profile-v2-input input:focus {
  border-color: #ff2d6f;
  box-shadow: 0 0 0 5px rgba(255, 45, 111, 0.1);
}

.profile-v2-bottom { display: flex; gap: 14px; }
.profile-v2-save {
  flex: 1; height: 56px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff; font-size: 14px; font-weight: 800; letter-spacing: 0.5px;
  cursor: pointer; box-shadow: 0 14px 24px rgba(255, 45, 111, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.profile-v2-save:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 30px rgba(255, 45, 111, 0.32); }
.profile-v2-save:disabled { opacity: 0.7; cursor: default; }
.profile-v2-cancel {
  width: 120px; height: 56px;
  border: none; border-radius: 18px;
  background: #f3f4f8; color: #555;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.profile-v2-cancel:hover:not(:disabled) { background: #e9eaf0; }
.profile-v2-cancel:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 520px) {
  .profile-v2-card { padding: 24px; border-radius: 26px; }
  .profile-v2-title { font-size: 30px; }
  .profile-v2-photo { height: 200px; }
  .profile-v2-bottom { flex-direction: column; }
  .profile-v2-cancel { width: 100%; }
}

.dropzone {
  display: block;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  padding: 28px;
  background: var(--paper-2);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover { border-color: var(--accent); background: var(--paper); }
.dz-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-width: 0; }
.dropzone img {
  width: 112px; height: 112px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
#profile-preview {
  width: 112px; height: 112px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.dropzone:not(:has(#profile-preview[src])) #profile-preview,
.dropzone #profile-preview:not([src]) { display: none; }
.dz-cta { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.dz-cta strong { font-size: 16px; font-weight: 500; }
.dz-cta small { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
.dz-cta .icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad); color: white;
  display: grid; place-items: center; margin-bottom: 8px;
  font-size: 14px;
}

/* ==========  Onboarding (first-time profile)  ========== */
.onboard {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 24px;
  align-items: stretch;
}
.onboard-side {
  position: relative;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 520px;
}
/* Refined dropzone — large, centered, visual focus */
.dropzone.dz-pro {
  padding: 0;
  border-style: solid;
  border-color: var(--line);
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
  min-height: 280px;
  display: flex;
}
.dropzone.dz-pro:hover { border-color: var(--accent); background: var(--paper); }
.dz-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  margin: 12px;
  border-radius: 2px;
  transition: border-color .2s, background .2s;
}
.dropzone.dz-pro:hover .dz-empty { border-color: var(--accent); }
.dz-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 6px;
}
.dz-empty strong {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dz-empty small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dz-preview {
  position: relative;
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: stretch;
}
.dz-preview img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
  background: var(--bg-2);
}
.dz-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(180deg, transparent 60%, rgba(10,11,16,0.7));
  opacity: 0;
  transition: opacity .2s;
}
.dropzone.dz-pro:hover .dz-preview-overlay { opacity: 1; }
.dz-preview-overlay span {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Field with label + hint */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.field-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.btn.btn-lg {
  padding: 16px 24px;
  font-size: 14px;
  letter-spacing: 0.18em;
}

@media (max-width: 900px) {
  .onboard { grid-template-columns: 1fr; }
  .onboard-side { max-width: none; }
}

/* ==========  Chat  ========== */
.screen:has(.chat-shell) { padding-bottom: 24px; }
.chat-shell {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  min-height: 0;
}
.chat-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: fit-content;
  position: sticky; top: 24px;
}
.agent-card {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.agent-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad); color: white;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px;
  font-style: italic;
}
.agent-name { font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.agent-title { color: var(--muted); font-size: 11px; margin-top: 2px; }

.suggestions { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.chip {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  padding: 14px 4px;
  font-size: 13px;
  cursor: pointer;
  transition: padding-left .2s, color .15s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chip::after { content: "→"; color: var(--muted); transition: transform .2s, color .15s; }
.chip:hover { padding-left: 8px; color: var(--accent); }
.chip:hover::after { transform: translateX(4px); color: var(--accent); }

.profile-mini {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 13px;
}
.profile-mini img {
  width: 44px; height: 44px; border-radius: 2px; object-fit: cover;
}
.profile-mini strong { font-weight: 500; }
.profile-mini small { color: var(--muted); display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

.chat-main {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  height: calc(100vh - 120px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 32px clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.bubble {
  max-width: 78%;
  padding: 14px 18px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 15px;
  white-space: pre-wrap;
  animation: pop .25s ease both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.bubble.user {
  align-self: flex-end;
  background: var(--grad);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 20px -10px rgba(255, 92, 138, 0.5);
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.bubble.assistant.welcome {
  background: var(--paper);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  padding-left: 22px;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 90%;
}
.bubble img {
  display: block;
  margin-top: 12px;
  border-radius: 2px;
  max-width: 100%;
  border: 1px solid var(--line);
}
.bubble.image-only { padding: 0; background: transparent; border: none; }
.bubble.image-only img { margin: 0; }

.bubble.typing {
  display: flex; gap: 6px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
}
.bubble.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: 0.6;
  animation: blink 1.2s infinite;
}
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ==========  Composer  ========== */
.composer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  padding: 18px clamp(20px, 4vw, 32px);
  border-top: 1px solid var(--line);
  background: var(--paper);
  align-items: end;
}
.composer-hint {
  margin: 0;
  padding: 10px clamp(20px, 4vw, 32px) 18px;
  font-size: 11px;
  color: var(--muted);
  background: var(--paper);
  letter-spacing: 0.12em;
  text-transform: none;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
.composer-hint em { color: var(--accent); font-style: italic; }

/* ==========  Composer pill (modern unified input)  ========== */
.composer.composer-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  margin: 14px clamp(20px, 4vw, 32px) 0;
  background: #fff;
  border: 1px solid rgba(20, 20, 50, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(20, 20, 50, 0.08);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.composer.composer-pill:focus-within {
  border-color: rgba(255, 45, 111, 0.35);
  box-shadow: 0 10px 30px rgba(255, 45, 111, 0.12);
}
.composer.composer-pill .composer-attach {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f8;
  border: none;
  border-radius: 999px;
  color: #1d1d1f;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.composer.composer-pill .composer-attach:hover { background: #ffe6ee; color: #ff2d6f; }
.composer.composer-pill textarea {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 10px 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: #1d1d1f;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
}
.composer.composer-pill textarea::placeholder { color: #9aa0aa; }
.composer.composer-pill textarea:focus { outline: none; border: none; }
.composer.composer-pill .composer-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1d1d1f;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, opacity 0.18s ease;
}
.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: #ff2d6f;
  transform: translateY(-1px);
}
.composer.composer-pill .composer-send:disabled { opacity: 0.4; cursor: not-allowed; }
.composer.composer-pill .composer-send-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: blink 1s infinite ease-in-out;
}
.composer-pill + .composer-hint { padding-top: 10px; padding-bottom: 14px; background: transparent; }

/* ==========  Welcome (legacy, kept for compat)  ========== */
.welcome-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.welcome-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 56px;
  max-width: 920px;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.welcome-eyebrow { color: var(--accent); margin-bottom: 14px; }
.welcome-card h1 {
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 36px 0;
}
.feature {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
}
.feature-icon { font-size: 22px; margin-bottom: 10px; }
.feature h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.welcome-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ==========  Responsive  ========== */
@media (max-width: 980px) {
  section.screen:has(.hero) { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .chat-shell { grid-template-columns: 1fr; }
  .chat-side { position: static; }
  .hero h1 { font-size: clamp(40px, 10vw, 64px); margin-top: 32px; }
}

@media (max-width: 600px) {
  .screen { padding: 20px; }
  .login-card { padding: 28px 22px; }
}

/* ==========  Mobile Bottom Navigation  ========== */
.bottom-nav { display: none; }

@media (max-width: 760px) {
  /* Topbar: tighter padding on mobile, smaller logo */
  .topbar {
    height: 52px;
    padding: 0 12px;
  }
  .topbar .logo img,
  .topbar .logo.small img { height: 30px; }

  /* Hide desktop nav links — bottom nav takes over */
  .topnav { display: none; }

  /* Extra padding so content clears the fixed bottom nav */
  .screen { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Chat: remove sidebar, fill height to bottom nav */
  .chat-shell { grid-template-columns: 1fr; gap: 0; }
  .chat-side { display: none; }
  .chat-side.open { display: flex; }
  .chat-main {
    height: auto;
    min-height: calc(100vh - 200px);
    border-radius: var(--r-md);
  }
  .chat-list { padding: 18px 16px; gap: 14px; }

  /* Wider chat bubbles + readable text */
  .bubble { max-width: 86%; padding: 12px 14px; font-size: 14.5px; }
  .bubble.assistant.welcome { font-size: 16px; padding-left: 16px; }

  /* Composer: fixed-height input, full-width row */
  .composer { padding: 12px 14px; gap: 8px; grid-template-columns: 44px 44px 1fr 44px; }
  .composer textarea, #chat-text { font-size: 16px; padding: 11px 12px; max-height: 110px; }
  .attach { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .attach em { display: none; }
  .send { padding: 0; width: 44px; height: 44px; min-width: 44px; }
  .send-label { display: none; }
  .composer-hint { display: none; }

  /* Search bars: bigger tap target */
  .shops-search { padding: 6px 6px 6px 16px; min-height: 48px; }
  .shops-search input { font-size: 16px; padding: 10px 0; }

  /* Page titles tighter on mobile */
  .page-title { font-size: clamp(28px, 7vw, 40px) !important; }
  .page-head { margin: 8px 0 18px; gap: 12px; }

  /* Hero on login: tighter spacing */
  .hero h1 { margin: 24px 0 18px; font-size: clamp(40px, 11vw, 60px); }
  .lede { font-size: 16px; margin: 0 0 24px; }

  /* Floating select-bar sits above the bottom-nav on phones */
  /* (Real override lives after the base .select-bar rule due to CSS source-order specificity rules.) */

  /* Help drawer respects safe area */
  .help-drawer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

  /* Filter chips scroll horizontally instead of wrapping */
  .cat-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .cat-row::-webkit-scrollbar { display: none; }
  .cat-pill { flex: 0 0 auto; }

  /* Bottom nav */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(24px);
    -webkit-backdrop-filter: saturate(1.4) blur(24px);
    border-top: 1px solid var(--line);
    justify-content: space-around;
    align-items: stretch;
    z-index: 40;
  }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  padding: 8px 4px;
  color: var(--muted);
  text-decoration: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color .15s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 44px;
}
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item.active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
.bottom-nav-item:hover, .bottom-nav-item:active { color: var(--accent); }
.bottom-nav-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px; display: block; }

/* ==========  Top Nav  ========== */
.topnav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.navlink {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.18s ease;
}
.navlink:hover { color: var(--ink); background: var(--paper-2); }
.navlink.active {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--paper);
}

/* ==========  Generic page wrap  ========== */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 16px 0 32px;
  flex-wrap: wrap;
}
.page-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 8px 0;
  font-weight: 500;
}
.page-title em { font-style: italic; color: var(--accent); }
.page-title.small { font-size: clamp(22px, 2.5vw, 30px); }
.lede.small { font-size: 14px; max-width: 60ch; margin-top: 8px; }
.back-btn { margin-bottom: 16px; }
.empty {
  padding: 48px 32px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
}
.empty a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }

/* ==========  Shop grid  ========== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.shop-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  min-height: 180px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.shop-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shop-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.shop-card:hover::before { opacity: 1; }
.shop-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.shop-loc { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; margin: 0 0 10px; }
.shop-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0; }
.shop-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.shop-card-foot .arrow { color: var(--accent); transition: transform 0.2s ease; }
.shop-card:hover .arrow { transform: translateX(4px); }

/* ==========  Shops browse (professional) ========== */
.shops-page { max-width: 1280px; }

/* Shop card refinements */
.shop-card { padding: 18px; }
.shop-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.shop-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: var(--grad);
  flex-shrink: 0;
}
.shop-cat-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
/* Category accent palette */
.shop-avatar.cat-garment, .shop-cat-badge.cat-garment { background: linear-gradient(135deg, var(--accent), #6a4ae6); color: #fff; border-color: transparent; }
.shop-avatar.cat-fashion, .shop-cat-badge.cat-fashion { background: linear-gradient(135deg, var(--accent), #6a4ae6); color: #fff; border-color: transparent; }
.shop-avatar.cat-hair, .shop-cat-badge.cat-hair { background: linear-gradient(135deg, #f6a86b, #e85d75); color: #fff; border-color: transparent; }
.shop-avatar.cat-tattoo, .shop-cat-badge.cat-tattoo { background: linear-gradient(135deg, #2c2c34, #6a6a78); color: #fff; border-color: transparent; }
.shop-avatar.cat-jewelry, .shop-cat-badge.cat-jewelry { background: linear-gradient(135deg, #d4af37, #b08d2a); color: #fff; border-color: transparent; }
.shop-avatar.cat-eyewear, .shop-cat-badge.cat-eyewear { background: linear-gradient(135deg, #4a90e2, #357abd); color: #fff; border-color: transparent; }
.shop-avatar.cat-makeup, .shop-cat-badge.cat-makeup { background: linear-gradient(135deg, #ff6b9d, #c44569); color: #fff; border-color: transparent; }
.shop-avatar.cat-footwear, .shop-cat-badge.cat-footwear { background: linear-gradient(135deg, #5d6d7e, #34495e); color: #fff; border-color: transparent; }
.shop-avatar.cat-watch, .shop-cat-badge.cat-watch { background: linear-gradient(135deg, #1a1a2e, #4a4a6e); color: #fff; border-color: transparent; }
.shop-avatar.cat-bag, .shop-cat-badge.cat-bag { background: linear-gradient(135deg, #8b5a3c, #654321); color: #fff; border-color: transparent; }
.shop-avatar.cat-headwear, .shop-cat-badge.cat-headwear { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; border-color: transparent; }

.shop-card-skel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skel-line {
  height: 12px;
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 50%, var(--paper-2) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========  Shops v2 — premium marketplace polish ========== */
.shops-v2 .shops-toolbar { margin-bottom: 22px; }
.shops-v2 .shops-search {
  flex: 1;
  min-width: 0;
  max-width: 720px;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  height: 56px;
  box-shadow: 0 6px 20px rgba(20, 20, 50, 0.06);
}
.shops-v2 .shops-search:focus-within {
  border-color: rgba(255, 56, 92, 0.4);
  box-shadow: 0 8px 24px rgba(255, 45, 111, 0.18);
}
.shops-v2 .shops-search .search-icon {
  display: inline-flex; align-items: center;
  color: #9aa0b4; opacity: 1; font-size: 0;
}
.shops-v2 .shops-search input {
  font-size: 15px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.shops-v2 .shops-search input::placeholder { color: #9aa0b4; }
.shops-v2 .shops-search-btn {
  margin-left: 8px;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(255, 45, 111, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.shops-v2 .shops-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255, 45, 111, 0.4);
}

/* Toolbar header (shops eyebrow + count + filter + total) */
.shops-v2 .inv-toolbar {
  background: transparent;
  border: none;
  padding: 4px 4px 18px;
  margin-bottom: 6px;
  align-items: center;
}
.shops-v2 .inv-toolbar .eyebrow {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: #ff2d6f;
  text-transform: uppercase;
}
.shops-v2 .inv-toolbar .page-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-top: 4px;
}
.shops-v2 .inv-toolbar-actions { gap: 12px; }
.shops-v2 .filter-burger {
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #444;
  box-shadow: 0 4px 12px rgba(20, 20, 50, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.shops-v2 .filter-burger:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20, 20, 50, 0.08); }
.shops-v2 .filter-burger.has-active { border-color: rgba(255, 45, 111, 0.4); color: #ff2d6f; }
.shops-v2 .toolbar-totals {
  font-size: 12px;
  font-weight: 600;
  color: #6f7282;
  letter-spacing: 0.2px;
}

/* Premium 2-col grid */
.shops-v2 .shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 880px) {
  .shops-v2 .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1200px) {
  .shops-v2 .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card */
.shops-v2 .shop-card {
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 22px;
  padding: 18px;
  min-height: 0;
  box-shadow: 0 6px 20px rgba(20, 20, 50, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.shops-v2 .shop-card::before { display: none; }
.shops-v2 .shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(20, 20, 50, 0.1);
  border-color: rgba(255, 45, 111, 0.25);
}
.shops-v2 .shop-card-top { margin-bottom: 14px; }
.shops-v2 .shop-avatar {
  width: 48px; height: 48px;
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 16px rgba(255, 45, 111, 0.18);
}
.shops-v2 .shop-cat-badge {
  font-size: 10px;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}

.shops-v2 .shop-card h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  margin: 0 0 8px;
  line-height: 1.2;
}
.shops-v2 .shop-loc {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0; text-transform: none;
  color: #6f7282; margin: 0 0 8px;
  font-weight: 500;
}
.shops-v2 .shop-loc-link { color: inherit; text-decoration: none; }
.shops-v2 .shop-loc-link:hover { color: #ff2d6f; }
.shops-v2 .shop-loc .map-link {
  margin-left: auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(255, 45, 111, 0.28);
  transition: transform 0.2s ease;
}
.shops-v2 .shop-loc .map-link:hover { transform: translateY(-1px) scale(1.05); }
.shops-v2 .shop-desc {
  color: #6f7282;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shops-v2 .shop-card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f8;
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #9aa0b4;
}
.shops-v2 .shop-card-foot .arrow {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255, 45, 111, 0.1);
  color: #ff2d6f;
  font-size: 12px;
}
.shops-v2 .shop-card:hover .shop-card-foot .arrow {
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  transform: translateX(2px);
}

@media (max-width: 520px) {
  .shops-v2 .shops-search { height: 52px; padding-left: 16px; }
  .shops-v2 .shops-search-btn { padding: 0 16px; font-size: 11px; height: 40px; }
  .shops-v2 .shop-card { padding: 14px; border-radius: 18px; }
  .shops-v2 .shop-avatar { width: 42px; height: 42px; font-size: 16px; }
  .shops-v2 .shop-card h3 { font-size: 16px; }
}

/* ==========  Shop detail (professional) ========== */
.shop-detail { max-width: 1240px; }
.shop-detail-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 22px 26px;
  margin: 12px 0 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.shop-detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0.05;
  pointer-events: none;
}
.shop-detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.shop-detail-info { position: relative; z-index: 1; min-width: 0; }
.shop-detail-info .page-title { margin: 4px 0 6px; }

/* Ensure burger / toolbar buttons are clickable above any sticky bars */
.inv-toolbar { position: relative; z-index: 6; }
.filter-burger { position: relative; z-index: 7; }
.shop-detail-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.shop-detail-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
}
.shop-detail-cta { position: relative; z-index: 1; }
.shop-inv-search { margin-bottom: 12px; }
.shop-inv-search .inv-search { width: 100%; max-width: 360px; }

@media (max-width: 700px) {
  .shops-hero { padding: 18px 20px; }
  .shops-hero-stats { width: 100%; }
  .shops-hero-stats .lstat { flex: 1; }
  .shops-toolbar { flex-direction: column; align-items: stretch; }
  .shops-search { min-width: 0; }
  .shops-toolbar .looks-sort { width: 100%; }
  .shop-detail-hero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px 20px;
  }
  .shop-detail-cta { grid-column: 1 / -1; }
  .shop-detail-avatar { width: 52px; height: 52px; font-size: 22px; }
}

/* ==========  Garment grid  ========== */
.garment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.garment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.garment-photo {
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  overflow: hidden;
}
.garment-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garment-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.garment-body h4 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.garment-price { font-size: 13px; color: var(--accent); letter-spacing: 0.06em; }
.garment-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; flex: 1; }
.garment-body .btn { align-self: flex-start; margin-top: 4px; }

/* ==========  Selectable garment cards (shop detail) ========== */
.select-bar-actions { display: flex; gap: 8px; align-items: center; }
.garment-card.selectable { position: relative; transition: border-color .15s, transform .15s, box-shadow .15s; }
.garment-card.selectable:hover { border-color: var(--accent); }
.garment-card.selectable.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 12px 30px -16px rgba(255, 56, 92, 0.35);
  transform: translateY(-2px);
}
.garment-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.garment-body-head h4 { margin: 0; flex: 1; min-width: 0; }
.select-tick {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.85);
  display: grid; place-items: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.select-tick:hover { border-color: var(--accent); }
.select-tick.on {
  background: var(--grad);
  border-color: transparent;
}
.tryon-loading.inline {
  padding: 0;
  width: 100%; height: 100%;
  flex-direction: row;
  justify-content: center;
}
.tryon-error {
  padding: 24px;
  color: #ff8888;
  font-size: 13px;
  text-align: center;
}
.tryon-results { margin-top: 12px; }

/* Inline pending/error overlay on the original garment image */
.garment-photo { position: relative; }
.tryon-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 14, 23, 0.72);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: #fff;
  border-radius: inherit;
}
.tryon-overlay.error { background: rgba(60, 10, 10, 0.78); }
.tryon-overlay-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }

.tryon-upgrade-hint {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: rgba(15, 14, 23, 0.78);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

/* --- Professional "refining" hint (chat + shop card) --- */
.upgrade-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 56, 92, 0.07), rgba(255, 56, 92, 0.04));
  border: 1px solid rgba(255, 56, 92, 0.20);
  color: var(--ink-soft);
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15, 14, 23, 0.04);
}
.upgrade-hint-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 56, 92, 0.25);
  border-top-color: var(--accent);
  animation: upgrade-spin 0.85s linear infinite;
  flex: 0 0 auto;
}
@keyframes upgrade-spin { to { transform: rotate(360deg); } }
.upgrade-hint-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
}
.upgrade-hint-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.upgrade-hint-sub {
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.01em;
}
.upgrade-hint-floating {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  background: rgba(20, 18, 34, 0.82);
  color: #f6f4ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  pointer-events: none;
}
.upgrade-hint-floating .upgrade-hint-spinner {
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
}
.upgrade-hint-floating .upgrade-hint-sub { opacity: 0.78; color: rgba(246, 244, 255, 0.85); }
@media (prefers-color-scheme: dark) {
  .upgrade-hint {
    background: linear-gradient(135deg, rgba(255, 56, 92, 0.14), rgba(255, 56, 92, 0.08));
    border-color: rgba(255, 56, 92, 0.28);
    color: var(--ink);
  }
}

/* Flip card: front = merged on-you image, back = original shop shirt */
.flip {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.garment-card.has-tryon.flipped .flip-inner { transform: rotateY(180deg); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
  overflow: hidden;
}
.flip-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-back { transform: rotateY(180deg); }
.flip-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 14, 23, 0.7);
  color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.garment-card.has-tryon { box-shadow: 0 0 0 1px var(--accent), 0 16px 36px -20px rgba(255, 56, 92, 0.40); }

/* Source badge & share menu (My Looks) */
.source-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  background: rgba(15, 14, 23, 0.78);
  color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.source-badge.shop { background: var(--grad); }
.source-badge.chat { background: rgba(15, 14, 23, 0.78); }
.look-source { margin-bottom: 4px; }
.look-source a { color: var(--accent); text-decoration: none; }
.look-source a:hover { text-decoration: underline; }

.share-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 20;
}
.share-menu a, .share-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.share-menu a:hover, .share-menu button:hover { background: var(--paper-2); color: var(--accent); }

/* ==========  My Looks (professional) ========== */
.looks-page { max-width: 1280px; }
.lstat {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 88px;
  text-align: center;
}
.lstat-num {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.lstat-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.looks-empty {
  text-align: center;
  padding: 72px 28px;
  background: #fff;
  border: 1px solid rgba(20, 20, 50, 0.06);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(20, 20, 50, 0.04);
  font-family: 'Inter', system-ui, sans-serif;
}
.looks-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #ffe6ee, #fff0f5);
  border-radius: 28px;
  margin-inline: auto;
}
.looks-empty h3 {
  margin: 4px 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}
.looks-empty .muted {
  font-size: 14.5px;
  color: #6f7282;
  max-width: 360px;
  margin: 0 auto;
}
.looks-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Looks grid: container-query aware so columns adapt to its own width,
   not just the viewport. Card min-width fluid between 150px (small phone) 
   and 220px (desktop) so we always get >=2 columns on phones. */
.looks-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 42cqi, 220px), 1fr));
  gap: clamp(10px, 2.5cqi, 18px);
}
.look-card {
  background: #fff;
  border: 1px solid rgba(20, 20, 50, 0.06);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(20, 20, 50, 0.05);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.look-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(255, 45, 111, 0.12), 0 6px 18px rgba(20, 20, 50, 0.06);
  border-color: rgba(255, 45, 111, 0.25);
}
.look-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: zoom-in;
  background: linear-gradient(135deg, #f6f7fb 0%, #ececf2 100%);
}
.look-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.look-card:hover .look-photo img { transform: scale(1.05); }
.look-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  pointer-events: none;
}
.look-card:hover .look-photo-overlay { opacity: 1; }
.look-zoom-hint {
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 999px;
}
.look-body {
  padding: clamp(10px, 2.2cqi, 14px) clamp(12px, 2.6cqi, 16px) clamp(12px, 2.6cqi, 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.4cqi, 8px);
}
.look-title {
  margin: 0;
  font-size: clamp(13px, 2.6cqi, 15px);
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.look-meta {
  font-size: clamp(10.5px, 2.2cqi, 12px);
  color: #6f7282;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-weight: 500;
}
.look-meta a { color: #ff2d6f; text-decoration: none; font-weight: 600; }
.look-meta a:hover { text-decoration: underline; }
.look-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  position: relative;
}
.look-del:hover { color: #e44 !important; border-color: #e44 !important; }

/* ===== Selection (My Looks) ===== */
.look-select {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.28);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.55;
  z-index: 3;
  padding: 0;
}
.look-card:hover .look-select { opacity: 1; }
.look-select.on,
.look-card.selected .look-select { opacity: 1; background: var(--accent, #111); border-color: #fff; }
.look-select:focus-visible { outline: 2px solid var(--accent, #111); outline-offset: 2px; }
.look-select.inline {
  position: static;
  width: 22px;
  height: 22px;
  border-color: var(--line);
  color: var(--ink);
  background: var(--paper);
  opacity: 1;
  flex-shrink: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.look-select.inline.on { background: var(--accent, #111); color: #fff; border-color: var(--accent, #111); }

.look-card.selected {
  outline: 2px solid #ff2d6f;
  outline-offset: -2px;
  box-shadow: 0 14px 30px rgba(255, 45, 111, 0.18);
}
.look-row.selected {
  border-color: var(--accent, #111);
  background: rgba(0,0,0,0.02);
}
.look-row { grid-template-columns: 22px 72px minmax(0, 1fr) auto; }

.select-bar {
  position: fixed;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: auto;
  transform: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: select-bar-pop 0.18s ease-out;
}
@keyframes select-bar-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.select-bar-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.30);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
}
.select-bar .select-bar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  align-items: center;
}
.select-bar-clear {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.select-bar-clear:hover { border-color: var(--accent, #111); }
.select-bar .share-menu { right: 0; left: auto; bottom: calc(100% + 8px); top: auto; }

/* Mobile: lift the floating select-bar above the floating bottom-nav pill.
   Nav sits at max(12px, safe-area-inset-bottom) and is ~72px tall. */
@media (max-width: 760px) {
  .select-bar {
    right: 12px !important;
    bottom: calc(112px + max(12px, env(safe-area-inset-bottom, 0px))) !important;
    gap: 8px;
  }
  .select-bar .share-menu { bottom: auto; top: 50%; right: calc(100% + 8px); left: auto; transform: translateY(-50%); }
}
/* Selection-bar action buttons — icon-only circles, tooltip on hover. */
.sel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: border-color .15s, background .15s, transform .08s, box-shadow .15s, color .15s;
}
.sel-btn:hover {
  border-color: var(--accent, #111);
  background: var(--paper-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
.sel-btn:active { transform: translateY(0); }
.sel-btn svg { flex-shrink: 0; }
.sel-btn-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sel-btn-danger { color: #c0273a; }
.sel-btn-danger:hover { border-color: #c0273a; background: rgba(192, 39, 58, 0.08); }
.sel-btn-primary {
  border-color: transparent;
  background: var(--grad, linear-gradient(135deg, #ff385c, #ff8a3d));
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(255, 56, 92, 0.55);
}
.sel-btn-primary:hover {
  border-color: transparent;
  background: var(--grad, linear-gradient(135deg, #ff385c, #ff8a3d));
  filter: brightness(1.05);
  box-shadow: 0 12px 26px -8px rgba(255, 56, 92, 0.7);
}


.looks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.look-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(20, 20, 50, 0.06);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(20, 20, 50, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.look-row:hover {
  border-color: rgba(255, 45, 111, 0.25);
  box-shadow: 0 12px 28px rgba(20, 20, 50, 0.08);
  transform: translateY(-1px);
}
.look-row-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 14px;
  cursor: zoom-in;
  background: linear-gradient(135deg, #f6f7fb, #ececf2);
}
.look-row-info { min-width: 0; }
.look-row-title {
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.source-pill.shop {
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 45, 111, 0.25);
}
.source-pill.chat {
  background: #f3f4f8;
  color: #6f7282;
}
.look-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* My Looks toolbar + list — fluid on mobile, no per-pixel breakpoints. */
.looks-hero { padding: clamp(14px, 3vw, 22px) clamp(16px, 3vw, 24px); }
.lstat { padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 14px); }
.looks-toolbar { padding: clamp(8px, 1.8vw, 12px) clamp(10px, 2.2vw, 14px); }

@media (max-width: 640px) {
  .looks-stats { width: 100%; }
  .lstat { flex: 1; min-width: 0; }
  .looks-tools { width: 100%; }
  .looks-tools .inv-search { flex: 1; min-width: 0; }
  .look-row {
    grid-template-columns: 22px clamp(48px, 14vw, 64px) minmax(0, 1fr);
    gap: clamp(8px, 2vw, 14px);
    padding: clamp(10px, 2.4vw, 14px) clamp(12px, 2.8vw, 16px);
  }
  .look-row-actions { grid-column: 1 / -1; }
  .look-row-thumb {
    width: clamp(48px, 14vw, 64px);
    height: clamp(48px, 14vw, 64px);
  }
}

/* ==========  Card form (manage page) ========== */
.card-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.card-form h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 6px;
}
.card-form input[type="text"], .card-form textarea {
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.card-form input:focus, .card-form textarea:focus { border-color: var(--accent); }
.card-form textarea { resize: vertical; min-height: 64px; }
.card-form .btn { align-self: flex-start; margin-top: 4px; }
.dropzone.small { min-height: 180px; padding: 16px; }
.dropzone.small img { max-height: 140px; object-fit: contain; }
.dropzone.bulk-drop { min-height: 140px; }
.dropzone.bulk-drop.drag { border-color: var(--accent); background: var(--paper); transform: scale(1.01); }

/* Bulk upload queue */
.queue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 251, 0.98)),
    radial-gradient(circle at top right, rgba(255, 124, 93, 0.16), transparent 42%);
  border: 1px solid rgba(255, 79, 125, 0.16);
  border-radius: 16px;
  box-shadow: 0 18px 40px -34px rgba(45, 20, 35, 0.55);
}
.queue-bar-copy {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.queue-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 79, 125, 0.09);
  color: #d73f6d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.queue-bar-copy strong {
  line-height: 1.1;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.queue-bar-actions {
  display: flex;
  flex: 1 1 280px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.queue-bar-actions .btn {
  min-height: 42px;
  justify-content: center;
}
.queue-clear-btn {
  min-width: 90px;
}
.queue-upload-btn {
  flex: 1 1 120px;
  box-shadow: 0 18px 30px -22px rgba(255, 79, 125, 0.75);
}
.queue-upload-btn:disabled,
.queue-ai-btn:disabled {
  opacity: 0.45;
  box-shadow: none;
}
.queue-ai-btn.is-loading:disabled {
  opacity: 1;
  box-shadow: 0 14px 28px -26px rgba(255, 79, 125, 0.65);
  cursor: progress;
}
.queue-ai-btn {
  flex: 1 1 120px;
  border-color: rgba(255, 79, 125, 0.2);
  background: linear-gradient(135deg, rgba(255, 148, 117, 0.14), rgba(255, 79, 125, 0.1));
  color: #24151f;
  box-shadow: 0 14px 28px -26px rgba(255, 79, 125, 0.65);
}
.queue-ai-btn:hover:not(:disabled) {
  border-color: rgba(255, 79, 125, 0.45);
  background: linear-gradient(135deg, rgba(255, 148, 117, 0.22), rgba(255, 79, 125, 0.14));
}
.queue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.queue-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fff9fb);
  border: 1px solid rgba(228, 222, 226, 0.92);
  border-radius: 18px;
  box-shadow: 0 16px 34px -30px rgba(34, 18, 31, 0.4);
  transition: border-color .15s, opacity .15s, transform .15s, box-shadow .15s;
  min-width: 0;
}
.queue-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 38px -32px rgba(34, 18, 31, 0.48);
}
.queue-row.status-uploading { border-color: rgba(255, 79, 125, 0.55); }
.queue-row.status-done { opacity: 0.55; border-color: #4caf80; }
.queue-row.status-error { border-color: rgba(208, 86, 86, 0.72); }
.queue-row > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(232, 222, 228, 0.95);
  background: linear-gradient(180deg, #fff7fa, #ffffff);
}
@media (max-width: 640px) {
  .queue-bar-copy {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .queue-bar-actions {
    width: 100%;
    flex-basis: 100%;
    justify-content: stretch;
  }
  .queue-bar-actions .btn {
    flex: 1 1 110px;
  }
}
.queue-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.queue-fields input, .queue-fields textarea, .queue-fields select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
}
.queue-fields textarea { resize: vertical; min-height: 36px; }
.asset-kind-select-wrap {
  position: relative;
  width: 100%;
}
.asset-kind-select {
  width: 100%;
  appearance: none;
  padding: 10px 38px 10px 12px;
  border: 1px solid rgba(228, 222, 226, 0.95);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fff7fa);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.asset-kind-select:focus {
  outline: none;
  border-color: rgba(255, 79, 125, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 79, 125, 0.12);
}
.asset-kind-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.asset-kind-select-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
.asset-kind-toggle {
  display: flex;
  align-self: stretch;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
.asset-kind-btn {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 4px;
  font: inherit;
  font-size: 9.5px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
}
.asset-kind-btn + .asset-kind-btn { border-left: 1px solid var(--line); }
.asset-kind-btn:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}
.asset-kind-btn.on {
  background: var(--paper-2);
  color: var(--accent);
}
.asset-kind-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.queue-error,
.queue-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.queue-error {
  color: #b34055;
  background: rgba(255, 106, 141, 0.12);
}
.queue-ok {
  color: #207c56;
  background: rgba(70, 191, 128, 0.12);
}

/* Inline edit */
.garment-card.editing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.garment-card.editing .garment-body input,
.garment-card.editing .garment-body textarea {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
}
.garment-card.editing .garment-body textarea { resize: vertical; min-height: 50px; }
.change-photo-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(15, 14, 23, 0.78) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}

/* ==========  Shop dashboard (My Shop)  ========== */
.shop-dash { max-width: 1280px; }
.shop-onboard { max-width: 560px; margin: 0 auto; }

.shop-dash-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .shop-dash-grid { grid-template-columns: 1fr; }
}

.shop-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 960px) { .shop-side { position: static; } }

.shop-hero {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.shop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0.07;
  pointer-events: none;
}
.shop-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  margin: 4px 0 8px;
  letter-spacing: -0.01em;
}
.stat-row {
  display: flex;
  gap: 16px;
  margin: 14px 0 12px;
  padding: 12px;
  background: var(--paper-2);
  border-radius: 8px;
}
.stat { flex: 1; }
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.shop-actions { display: flex; flex-direction: column; gap: 6px; }
.shop-actions .btn { justify-content: flex-start; text-align: left; }

.shop-details-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.shop-details-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 500;
  font-size: 14px;
  user-select: none;
}
.shop-details-card > summary::-webkit-details-marker { display: none; }
.shop-details-card > summary::after {
  content: 'v';
  float: right;
  transition: transform 0.2s;
  font-size: 18px;
  line-height: 1;
}
.shop-details-card[open] > summary::after { transform: rotate(180deg); }
.shop-details-card .card-form {
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 18px 18px;
  background: transparent;
}
.shop-details-card .card-form h3 { display: none; }
.field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 6px;
}

.upload-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.upload-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.upload-card-head h3 { margin: 0; font-size: 14px; font-weight: 500; }
.dropzone.bulk-drop.compact { min-height: 110px; padding: 14px; }

/* Main column */
.shop-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.queue-fields-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
.queue-fields-more {
  padding-top: 2px;
}
.queue-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px dashed rgba(255, 79, 125, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 250, 0.92));
  color: #9a4960;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.queue-more-btn:hover:not(:disabled) {
  border-color: rgba(255, 79, 125, 0.46);
  background: linear-gradient(180deg, #ffffff, #fff2f7);
  color: #7f3048;
  transform: translateY(-1px);
}
.queue-more-btn.open,
.queue-more-btn.has-values {
  border-style: solid;
}
.queue-more-btn.open {
  border-color: rgba(255, 79, 125, 0.42);
  color: var(--accent);
}
.queue-more-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.queue-more-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 79, 125, 0.11);
  color: inherit;
  font-size: 16px;
  line-height: 1;
}

.inv-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.inv-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.inv-search {
  width: 260px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.inv-search:focus { border-color: var(--accent); outline: none; }
.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.vt-btn {
  background: var(--paper);
  border: none;
  color: var(--muted);
  padding: 7px 12px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.vt-btn:hover { color: var(--ink); }
.vt-btn.on { background: var(--paper-2); color: var(--accent); }

.inv-list { display: flex; flex-direction: column; gap: 8px; }
.inv-row {
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.inv-row.editing > .inv-thumb { grid-column: 1 / 3; }
.inv-row:hover { border-color: var(--accent); }
.inv-row.editing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.inv-row.selected {
  border-color: var(--accent);
  background: linear-gradient(0deg, rgba(124,92,255,0.04), rgba(124,92,255,0.04)), var(--paper);
  box-shadow: inset 3px 0 0 var(--accent);
}
.inv-thumb { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; }
.inv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-thumb .change-photo-btn { font-size: 10px; padding: 2px 6px; bottom: 4px; right: 4px; }
.inv-info { min-width: 0; }
.inv-title { font-weight: 500; font-size: 14px; }
.inv-desc {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-price { font-size: 13px; color: var(--accent); white-space: nowrap; }
.inv-actions { display: flex; gap: 6px; }
.inv-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inv-fields input, .inv-fields select,
.garment-card.editing .garment-body select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
@media (max-width: 700px) {
  .inv-row { grid-template-columns: 28px 56px 1fr; row-gap: 8px; }
  .inv-row .inv-price { grid-column: 2 / -1; }
  .inv-row .inv-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Compact grid inside the shop dashboard only (keeps public shop page roomy) */
.shop-main .garment-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.shop-main .garment-body { padding: 10px 12px; gap: 6px; }
.shop-main .garment-body h4 { font-size: 13px; margin: 0; line-height: 1.25; }
.shop-main .garment-price { font-size: 12px; }
.shop-main .garment-desc {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-main .garment-card .btn.small { padding: 4px 8px; font-size: 11px; }
.shop-main .change-photo-btn { font-size: 10px; padding: 4px 8px; }

/* ==========  Try-on modal  ========== */
.tryon-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 12, 0.85);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 24px;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.tryon-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 32px;
  max-width: 520px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(255, 56, 92, 0.30);
}
.tryon-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  margin: 6px 0 18px;
}
.tryon-card img { width: 100%; border-radius: 8px; display: block; }
.tryon-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}
.tryon-close:hover { border-color: var(--accent); }
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 12, 0.82);
  backdrop-filter: blur(8px);
}
.confirm-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -20px rgba(255, 56, 92, 0.30);
}
.confirm-card.danger {
  box-shadow: 0 30px 80px -20px rgba(255, 56, 92, 0.38);
}
.confirm-card h3 {
  margin: 0 0 10px;
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
}
.confirm-message {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 22px;
}
.confirm-actions .btn {
  width: auto;
  min-width: 120px;
}
.confirm-danger {
  background: linear-gradient(135deg, #e5484d, #ff5c8a);
}

/* Compare looks side-by-side modal — fluid sizing and dvh for mobile URL-bar safety. */
.compare-modal {
  padding: clamp(8px, 2vw, 16px);
  padding-bottom: calc(clamp(8px, 2vw, 16px) + env(safe-area-inset-bottom, 0px));
}
.compare-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: clamp(10px, 1.4vw, 14px);
  padding: clamp(12px, 3.2vw, 28px);
  width: 100%;
  max-width: 1100px;
  max-height: calc(100dvh - clamp(16px, 4vw, 32px));
  overflow: auto;
  position: relative;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(255, 56, 92, 0.30);
  container-type: inline-size;
}
.compare-card h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 500;
  margin: 6px 0 clamp(12px, 2vw, 18px);
}
/* Always at least 2 columns; cap at the JS-provided cols-N. 
   Container query keeps it consistent regardless of viewport. */
.compare-grid {
  display: grid;
  gap: clamp(8px, 1.6cqi, 14px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container (min-width: 560px) {
  .compare-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.compare-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1cqi, 8px);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: clamp(8px, 1.2vw, 10px);
  padding: clamp(6px, 1.4cqi, 10px);
}
.compare-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: var(--paper);
}
.compare-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(11px, 1.4cqi, 13px);
  text-align: left;
  padding: 2px 4px 4px;
}
.compare-item figcaption strong { font-weight: 600; color: var(--ink); }
.compare-item figcaption .muted { font-size: clamp(10px, 1.2cqi, 11px); }
.compare-note { margin-top: 14px; font-size: 12px; }

.tryon-loading {
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tryon-loading > span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--grad);
  animation: bounce 1.2s infinite ease-in-out;
  display: inline-block;
}
.tryon-loading > span:nth-child(2) { animation-delay: 0.15s; }
.tryon-loading > span:nth-child(3) { animation-delay: 0.3s; }
.tryon-loading p { color: var(--muted); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.profile-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.profile-actions .btn { flex: 0 0 auto; }


.link-tryon {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.link-tryon-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.link-tryon-icon {
  font-size: 1.1rem;
}
.link-tryon p.muted.small {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.75;
}
.link-tryon input[type='url'] {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: inherit;
  font-size: 0.85rem;
  width: 100%;
}
.link-tryon input[type='url']:focus {
  outline: none;
  border-color: var(--accent, #c084fc);
}
.link-tryon .btn.small {
  padding: 8px 14px;
  font-size: 0.82rem;
}
.error.small {
  font-size: 0.78rem;
  margin: 0;
}

/* ===== Chat UI v2 ===== */
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.chat-title { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.chat-title em { font-style: normal; opacity: 0.55; font-size: 0.82rem; }
.chat-title-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,0.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52,211,153,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(52,211,153,0.05); }
}
.icon-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 14px;
  color: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }

.chat-list { position: relative; }
.chat-list.drag-over { outline: 2px dashed var(--accent, #c084fc); outline-offset: -8px; }

.bubble-row {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  align-items: flex-end;
  animation: msgIn 0.25s ease-out;
}
.bubble-row.user { justify-content: flex-end; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-avatar.assistant {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: white;
}
.msg-avatar.user {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ddd;
}

.msg-col { display: flex; flex-direction: column; max-width: 70%; }
.bubble-row.user .msg-col { align-items: flex-end; }
.bubble-row.assistant .msg-col { align-items: flex-start; }

.bubble-text { line-height: 1.55; }
.bubble-text a { color: #c084fc; text-decoration: underline; }
.bubble-text code { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 6px; font-size: 0.88em; font-family: ui-monospace, 'Cascadia Code', monospace; }
.bubble.image-only { padding: 6px; background: transparent; border: none; }
.bubble-image {
  max-width: 100%;
  max-height: 380px;
  border-radius: 14px;
  cursor: zoom-in;
  display: block;
  margin-top: 6px;
  transition: transform 0.2s;
}
.bubble-image:hover { transform: scale(1.01); }

.msg-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.bubble-row:hover .msg-meta { opacity: 0.7; }
.msg-time { opacity: 0.7; }
.msg-action {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 4px;
  text-decoration: none;
  opacity: 0.6;
}
.msg-action:hover { opacity: 1; }

.chat-skeleton { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.sk-bubble {
  height: 50px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.sk-bubble.assistant { width: 60%; }
.sk-bubble.user { width: 45%; align-self: flex-end; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.drop-overlay {
  position: absolute;
  inset: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(168,85,247,0.12);
  border: 2px dashed var(--accent, #c084fc);
  border-radius: 16px;
  font-size: 1rem;
  color: var(--accent, #c084fc);
  pointer-events: none;
  font-weight: 500;
}

.composer-attach-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 18px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.composer-attach-preview img {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 8px;
}
.cap-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cap-meta strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-meta small { font-size: 0.72rem; opacity: 0.6; }
.cap-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.cap-remove:hover { background: rgba(239,68,68,0.25); color: #fca5a5; }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  z-index: 2000;
  cursor: zoom-out;
  animation: fadeIn 0.2s;
  touch-action: none;
  overflow: hidden;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img,
.lightbox-img-zoom {
  max-width: 92vw;
  max-height: 80vh;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  cursor: default;
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-close {
  position: fixed;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}
.lightbox-actions {
  display: flex;
  gap: 14px;
  z-index: 10;
}
.lightbox-action {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.15s ease;
  padding: 0;
}
.lightbox-action:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.2);
}
.lightbox-action svg { display: block; }

/* ===== Mobile UX v2 ===== */
.icon-btn-short { display: none; }
.sidebar-toggle { display: none; padding: 4px 10px; font-size: 1.05rem; line-height: 1; }
.chat-side-scrim { display: none; }

/* Use dynamic viewport for chat height (handles mobile keyboards/url bar) */
@supports (height: 100dvh) {
  .chat-main { height: calc(100dvh - 120px); }
}

/* Tablet & below: collapse sidebar to a slide-out drawer */
@media (max-width: 980px) {
  .screen { padding: 12px clamp(14px, 4vw, 24px); animation: none; }
  .topbar .user-chip .user-chip-btn > span:not(.avatar):not(.chip-caret) { display: none !important; }

  .chat-shell { grid-template-columns: 1fr; gap: 0; }
  .chat-main { min-height: 0; height: calc(100dvh - 110px - 64px - env(safe-area-inset-bottom, 0px)); border-radius: 4px; }

  .chat-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw);
    z-index: 1100;
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
    border-radius: 0;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    height: 100dvh;
    padding: 20px 18px;
    gap: 16px;
    box-shadow: 24px 0 60px -20px rgba(0,0,0,0.35);
    background: var(--paper, #fff);
  }
  .chat-side.open { transform: translateX(0); }
  .chat-side-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 1099;
    animation: fadeIn 0.2s;
  }
  .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .chat-toolbar { padding: 8px 12px; }
  .chat-list { padding: 18px 14px; gap: 12px; }
  .bubble-row { gap: 8px; margin: 10px 0; }
  .msg-col { max-width: 82%; }
  .bubble { padding: 11px 14px; font-size: 14px; max-width: 100%; }
  .bubble-image { max-height: 280px; }
  .msg-avatar { width: 28px; height: 28px; font-size: 0.74rem; }
  .msg-meta { opacity: 0.7; font-size: 0.68rem; } /* always-on for touch */

  .composer { padding: 10px 12px; gap: 8px; grid-template-columns: auto auto 1fr auto; }
  .attach { padding: 8px 10px; height: 42px; }
  .composer textarea { padding: 10px 12px; font-size: 16px; } /* 16px prevents iOS zoom */
  .send { padding: 10px 16px; height: 42px; font-size: 11px; letter-spacing: 0.12em; }
  .composer-hint { padding: 6px 14px 12px; font-size: 10px; }
  .composer-attach-preview { margin: 0 12px 6px; padding: 8px 10px; }
  .composer-attach-preview img { width: 40px; height: 40px; }

  .icon-btn-full { display: none; }
  .icon-btn-short { display: inline; }
  .chat-actions .icon-btn { padding: 6px 10px; font-size: 1rem; }
  .drop-overlay { inset: 8px; font-size: 0.9rem; }

  .lightbox img { max-width: 96vw; max-height: 74vh; border-radius: 12px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.2rem; }
  .lightbox-actions { gap: 12px; }
  .lightbox-action { width: 42px; height: 42px; }
}

/* Phone: tighter still */
@media (max-width: 600px) {
  .topbar .logo { font-size: 11px; }
  .topbar .user-chip { padding: 4px 10px 4px 4px; font-size: 11px; }
  /* On phones, hide the name/email label entirely — only the avatar circle
     (already showing the first letter) and the caret remain. */
  .topbar .user-chip .user-chip-btn > span:not(.avatar):not(.chip-caret) { display: none !important; }
  .user-chip .avatar { width: 28px; height: 28px; font-size: 12px; }
  .navlink { padding: 7px 6px; font-size: 9.5px; letter-spacing: 0.1em; }

  .chat-main { height: calc(100dvh - 96px - 64px - env(safe-area-inset-bottom, 0px)); }
  .msg-col { max-width: 86%; }
  .bubble.assistant.welcome { font-size: 15px; padding: 12px 14px 12px 16px; }

  /* Stack the toolbar tighter */
  .chat-title em { display: none; }
}

/* Touch: show msg-meta always (no hover) */
@media (hover: none) {
  .msg-meta { opacity: 0.55; }
  .bubble-image { cursor: pointer; }
}

/* ============================================================
   MOBILE POLISH — covers all pages (login, profile, shops,
   shop detail, my looks, my shop, try-on modal)
   ============================================================ */
@media (max-width: 720px) {
  /* Login / hero */
  section.screen:has(.hero) { grid-template-columns: 1fr; gap: 16px; }
  .hero { padding: 4px 0 0; }
  .hero .logo img { height: 56px; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); margin: 20px 0 14px; line-height: 0.96; }
  .lede { font-size: 15px; margin: 0 0 20px; }
  .login-card { padding: 24px 20px 20px; border-radius: 12px; box-shadow: 0 10px 32px -16px rgba(20, 20, 50, 0.18); }
  .login-heading { font-size: 22px; margin-bottom: 16px; }
  .divider { margin: 16px 0; }
  .fineprint { font-size: 11px; }

  /* Profile setup */
  .profile-card { padding: 28px 20px; margin-top: 16px; gap: 16px; border-radius: 6px; }
  .profile-card h2 { font-size: clamp(26px, 7vw, 32px); }
  .muted { font-size: 14px; }
  .dropzone { padding: 18px; }
  .dz-inner { gap: 14px; }
  .dropzone img, #profile-preview { width: 84px; height: 84px; }
  .dz-cta strong { font-size: 14px; }
  .profile-actions { width: 100%; }
  .profile-actions .btn { flex: 1 1 auto; }

  /* Page titles & generic screen padding */
  .page-title { font-size: clamp(28px, 7vw, 40px); }
  .page-title.small { font-size: clamp(20px, 5vw, 24px); }
  .lede.small { font-size: 13px; }

  /* Shops browse */
  .shops-hero { padding: 16px 18px; gap: 14px; border-radius: 12px; }
  .shops-hero-stats { gap: 8px; width: 100%; }
  .shops-hero-stats .lstat { flex: 1; min-width: 0; padding: 8px 10px; }
  .shops-toolbar { gap: 8px; margin-bottom: 14px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-card { padding: 16px; min-height: 0; }
  .shop-card h3 { font-size: 20px; }
  .shop-avatar { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }

  /* Shop detail */
  .shop-detail-hero { padding: 16px 18px; gap: 14px; }
  .shop-detail-avatar { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
  .shop-detail-desc { font-size: 13px; }
  .shop-inv-search .inv-search { max-width: 100%; }

  /* My Looks */
  .looks-hero { padding: 16px 18px; gap: 14px; border-radius: 12px; }
  .looks-stats { width: 100%; gap: 8px; }
  .looks-stats .lstat { flex: 1; min-width: 0; padding: 8px 10px; }
  .lstat-num { font-size: 18px; }
  .lstat-label { font-size: 9px; }
  .looks-cta { margin-left: 0; width: 100%; }
  .looks-cta .btn { width: 100%; }
  .looks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .looks-tools { width: 100%; }
  .looks-sort { flex: 1; }
  .looks-empty { padding: 40px 18px; }
  .looks-empty-icon { font-size: 38px; }
  .looks-empty h3 { font-size: 18px; }

  /* My Shop dashboard */
  .shop-dash-grid { gap: 16px; }
  .shop-side { gap: 12px; }
  .shop-hero { padding: 14px; }
  .shop-hero-title { font-size: 19px; }
  .stat-row { gap: 10px; padding: 10px; }
  .stat-num { font-size: 20px; }
  .upload-card { padding: 12px; }
  .inv-toolbar { gap: 8px; }
  .inv-toolbar-actions { flex-wrap: wrap; }
  .inv-search { width: 100%; }

  /* Garment grids: 2 columns on phones */
  .garment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-main .garment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .garment-card .garment-body { padding: 10px 12px; }
  .garment-card .garment-body h4 { font-size: 13px; }

  /* Buttons: ensure tappable */
  .btn { padding: 12px 18px; }
  .btn.small { padding: 9px 14px; font-size: 10.5px; }

  /* Try-on modal */
  .tryon-modal { padding: 12px; }
  .tryon-card { padding: 22px 18px; max-width: 100%; border-radius: 10px; }
  .tryon-card h3 { font-size: 22px; margin: 4px 0 14px; }
  .tryon-close { width: 32px; height: 32px; top: 8px; right: 8px; }

  /* Welcome card on first run */
  .welcome-card { padding: 24px 20px; }
  .welcome-card h1 { font-size: clamp(28px, 7vw, 38px); }
  .welcome-grid { grid-template-columns: 1fr; gap: 12px; }
  .welcome-actions { width: 100%; }
  .welcome-actions .btn { flex: 1 1 auto; }
}

/* Very small phones */
@media (max-width: 380px) {
  .screen { padding: 12px 12px; }
  .looks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .garment-grid, .shop-main .garment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-row { flex-direction: column; gap: 6px; }
}


/* ===== Category filter chips (shop detail page) ===== */
.cat-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 18px;
  padding: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cat-row.sub { padding-top: 8px; border-top: 1px dashed var(--line); }
.cat-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cat-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cat-chip.small { padding: 4px 8px; font-size: 11px; }
.cat-chip .chip-count {
  font-size: 10px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.cat-chip.on .chip-count { opacity: 0.85; }

.garment-cat { margin-top: 2px; font-size: 11px; }

.backfill-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: 4px;
}

.bulk-bar {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bulk-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bulk-bar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bulk-bar select {
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
}

.cat-edit-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0;
}
.cat-edit-row select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
}
.cat-edit-row select:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Manage shop polish ===== */
.bulk-bar {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 12px 14px;
}
.bulk-bar.has-selection {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 20px -12px rgba(124,92,255,0.35);
}
.bulk-bar-row > span.muted { font-size: 12px; }

.backfill-bar {
  border-radius: 10px;
}

/* Polished category breadcrumb badge on cards */
.garment-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
  letter-spacing: 0.01em;
}
.garment-card.selected .garment-cat,
.inv-row.selected .garment-cat { color: var(--accent); border-color: var(--accent); }

/* Manage-grid selected state (when not in tryon flip mode) */
.shop-main .garment-card.selected:not(.has-tryon) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -16px rgba(124,92,255,0.45);
}

/* Onboard form — slightly more breathing room */
.shop-onboard .card-form {
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-onboard .card-form select,
.shop-onboard .card-form input,
.shop-onboard .card-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.shop-onboard .card-form select:focus,
.shop-onboard .card-form input:focus,
.shop-onboard .card-form textarea:focus { border-color: var(--accent); outline: none; }
.shop-onboard .card-form button { margin-top: 6px; align-self: flex-start; }

/* Onboarding form polish */
.shop-onboard .onboard-hero { text-align: center; margin: 8px 0 20px; }
.shop-onboard .onboard-hero .page-title { font-size: 32px; margin: 0 0 6px; }
.shop-onboard .onboard-hero .muted { font-size: 14px; max-width: 440px; margin: 0 auto; }
.shop-onboard .onboard-form { gap: 14px; }
.shop-onboard .field { display: flex; flex-direction: column; gap: 6px; }
.shop-onboard .field-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
.shop-onboard .field-label .req { color: var(--accent); font-style: normal; margin-left: 2px; }
.shop-onboard .field-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.shop-onboard .field-error { font-size: 12px; color: #c0392b; }
.shop-onboard .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .shop-onboard .field-row { grid-template-columns: 1fr; } }
.shop-onboard .onboard-cta { align-self: stretch !important; padding: 12px 16px; font-size: 15px; margin-top: 10px !important; }

/* Tattoo placement modal */
.tattoo-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.tattoo-modal {
  position: relative;
  background: var(--paper); color: var(--ink);
  border-radius: 18px; padding: 22px 22px 18px;
  width: 100%; max-width: 460px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 14px;
}
.tattoo-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.tattoo-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.tattoo-modal-title { margin: 0; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; }
.tattoo-modal-sub { margin: -8px 0 0; font-size: 13px; color: var(--muted); }
.tattoo-preview-row { display: flex; align-items: stretch; gap: 10px; }
.tattoo-preview-cell { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tattoo-preview-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tattoo-preview-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; border: 2px solid var(--accent);
  background: #f3f3f5;
  box-shadow: 0 4px 14px -8px rgba(124,92,255,0.35);
}
.tattoo-preview-img.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted); border-style: dashed;
}
.tattoo-preview-arrow { align-self: center; font-size: 22px; color: var(--muted); padding-top: 18px; }
.tattoo-field { display: flex; flex-direction: column; gap: 6px; }
.tattoo-field-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
.tattoo-field select,
.tattoo-field input,
.tattoo-field textarea {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 14px;
}
.tattoo-field select:focus,
.tattoo-field input:focus,
.tattoo-field textarea:focus { border-color: var(--accent); outline: none; }
.tattoo-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.tattoo-modal-actions .btn { padding: 10px 18px; }
.tile-room-modal {
  max-width: 720px;
  padding: 18px 18px 16px;
  gap: 10px;
}
.tile-room-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tile-room-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #faf9fd;
}
.tile-room-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: #f3f3f5;
}
.tile-room-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  border: 1px dashed var(--line);
}
.tile-room-surface {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tile-room-select-native {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.tile-room-select-native:focus { border-color: var(--accent); outline: none; }
.tile-room-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.tile-room-action {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.12em;
  box-shadow: 0 10px 18px -18px rgba(25, 20, 40, 0.45);
}
.tile-room-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.tile-room-action.is-cancel {
  background: #fff;
  color: #6f687a;
  border-color: #e3dde9;
}
.tile-room-action.is-cancel:hover {
  background: #faf8fc;
  border-color: #d5cadf;
}
.tile-room-action.is-ai {
  background: linear-gradient(135deg, #fff5dd 0%, #ffe7a9 100%);
  color: #7b5600;
  border-color: #f0c868;
  box-shadow: 0 16px 24px -20px rgba(225, 166, 28, 0.75);
}
.tile-room-action.is-ai:hover {
  background: linear-gradient(135deg, #fff0cb 0%, #ffde8c 100%);
  border-color: #e6ba4f;
}
.tile-room-action.is-manual {
  background: linear-gradient(135deg, #ff5f93 0%, #ff8a3d 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 26px -20px rgba(255, 92, 138, 0.9);
}
.tile-room-action.is-manual:hover {
  background: linear-gradient(135deg, #ff4d86 0%, #ff7b2f 100%);
}

@media (max-width: 640px) {
  .tile-room-modal {
    max-width: none;
    width: calc(100vw - 20px);
    padding: 14px 14px 12px;
  }
  .tile-room-list { gap: 8px; }
  .tile-room-item { padding: 8px; }
  .tile-room-surface { font-size: 11px; }
  .tile-room-select-native {
    padding: 8px 10px;
    font-size: 13px;
  }
  .tile-room-action {
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
    gap: 5px;
  }
}

/* Inv-toolbar title alignment */
.inv-toolbar .eyebrow { font-size: 10px; }
.inv-toolbar h3.page-title.small { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }

/* Inline edit form — denser look */
.garment-card.editing .garment-body input,
.garment-card.editing .garment-body textarea,
.garment-card.editing .garment-body select { border-radius: 6px; }
.cat-edit-row select { border-radius: 6px; padding: 6px 10px; }

/* ===== Shops listing polish ===== */
.shops-cat-filters {
  margin: 12px 0 18px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.shops-cat-filters .cat-row { gap: 8px; }
.shops-cat-filters .cat-chip {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.shops-cat-filters .cat-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.4);
}

/* Refine shop cards a touch */
.shop-card { transition: border-color .2s, transform .2s, box-shadow .2s; }
.shop-card-top { align-items: center; }
.shop-cat-badge { font-size: 10.5px; letter-spacing: 0.06em; }

/* Shop detail hero — fashion category pill spacing */
.shop-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-detail-meta .cat-pill { text-transform: capitalize; }


/* ============================================================
   PERF + MOBILE POLISH (lightweight loading)
   ============================================================ */

/* iOS safe-area insets so content avoids the notch / home indicator */
@supports (padding: max(0px)) {
  .screen { padding-left: max(clamp(20px, 6vw, 88px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 6vw, 88px), env(safe-area-inset-right)); }
  .composer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .topbar { padding-top: max(0px, env(safe-area-inset-top)); }
  .help-drawer { padding-right: max(36px, env(safe-area-inset-right)); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* Background orbs are expensive (huge blur radius). Tone them down on small
   screens, when the user prefers reduced motion, or when on a slow / metered
   network. Keeps LCP fast on phones. */
@media (max-width: 720px) {
  #bg-orbs span { filter: blur(48px); opacity: 0.35; animation: none; }
  #bg-orbs span:nth-child(1) { width: 280px; height: 280px; }
  #bg-orbs span:nth-child(2) { width: 240px; height: 240px; }
  #bg-orbs span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #bg-orbs span { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-data: reduce), (max-width: 480px) {
  /* Drop the noise-grain SVG and heavy vignette work on tiny phones */
  .tryon-grain { display: none; }
}

/* Smoother, lighter tap target feedback � replaces hover on touch devices */
@media (hover: none) {
  .btn:active, .chip:active, .navlink:active, .cat-chip:active, .shop-card:active, .look-card:active { transform: scale(0.98); }
  .shop-card:hover, .look-card:hover { transform: none; box-shadow: none; }
  .look-card:hover .look-photo img { transform: none; }
}

/* Visible keyboard focus everywhere (a11y) */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Native lazy images shouldn't flash */
img[loading="lazy"] { content-visibility: auto; }

/* Boot splash � keep it tiny so first paint is instant */
.boot-splash { font-size: clamp(20px, 4vw, 28px); }

/* Phones: shrink the chat-list scrollbar gutter, hide composer-hint to save space */
@media (max-width: 480px) {
  .composer-hint { display: none; }
  .chat-list { padding: 14px 12px; }
  .bubble.welcome { font-size: 14px !important; }
  .topnav { gap: 2px; }
  .navlink { padding: 7px 6px; font-size: 9.5px; }
  .topbar .logo .logo-mark { font-size: 22px; }
}

/* Larger screens: keep the original lush look but cap orb blur for repaint cost */
@media (min-width: 1400px) {
  #bg-orbs span { will-change: transform; }
}

/* Print: render content cleanly */
@media print {
  #bg-orbs, .help-backdrop, .help-drawer, .topbar, .composer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Native Google sign-in button (used inside the Android APK WebView) */
.native-google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 320px; min-height: 44px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: #1a1a1f; color: #fff; font: 600 15px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .01em; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.native-google-btn:hover { background: #23232a; border-color: rgba(255,255,255,.28); }
.native-google-btn:active { transform: scale(.98); }
.native-google-btn svg { flex-shrink: 0; }

/* Profile photo picker � upload + camera capture */
.photo-picker { display: flex; flex-direction: column; gap: 10px; }
.photo-picker-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.photo-picker-actions .btn {
  flex: 1 1 auto; min-width: 140px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.photo-picker-actions .btn span[aria-hidden] { font-size: 16px; line-height: 1; }

/* Label-as-button for the photo picker (so the file input click event */
/*  triggers reliably inside Android WebViews and iOS Safari).         */
.picker-btn { cursor: pointer; }

/* Try-on estimated progress bar */
.tryon-progress-pill {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 220px; padding: 4px 0;
}
.tryon-progress-track {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.tryon-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #c9a063);
  transition: width .12s linear;
}
.tryon-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-size: 12px; letter-spacing: .04em;
  color: var(--muted);
}
.tryon-progress-pct {
  font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: 600;
}
.tryon-overlay .tryon-progress-pill { color: #fff; min-width: min(80%, 260px); }
.tryon-overlay .tryon-progress-meta { color: rgba(255,255,255,.85); }
.tryon-overlay .tryon-progress-pct { color: #fff; }
.bubble.assistant.typing:has(.tryon-progress-pill) {
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

/* ===== Choose Experience page ===== */
.choose-exp-page {
  max-width: 980px; margin: 0 auto; padding: 48px 24px 80px;
  display: flex; flex-direction: column; align-items: center;
}
.choose-exp-hero { text-align: center; margin-bottom: 36px; }
.choose-exp-hero .logo.small { display: inline-flex; margin: 0 0 18px; }
.choose-exp-eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: 12px;
  color: var(--muted); margin: 0 0 8px;
}
.choose-exp-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 5vw, 44px); font-weight: 500;
  margin: 0 0 12px; color: var(--ink);
}
.choose-exp-title em { font-style: italic; color: var(--accent); }
.choose-exp-sub { color: var(--muted); margin: 0; max-width: 520px; }

.choose-exp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; width: 100%; margin-top: 24px;
}
.choose-exp-card {
  text-align: left; cursor: pointer;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, rgba(0,0,0,.12));
  border-radius: 16px; padding: 20px 18px;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  font: inherit;
}
.choose-exp-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.choose-exp-card.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.choose-exp-icon { font-size: 28px; line-height: 1; }
.choose-exp-card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 600; margin: 2px 0 0;
  color: var(--ink);
}
.choose-exp-card p { margin: 0 0 10px; color: var(--muted); line-height: 1.4; font-size: 13px; }
.choose-exp-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
@media (max-width: 380px) {
  .choose-exp-card { padding: 16px 12px; }
  .choose-exp-card h2 { font-size: 19px; }
  .choose-exp-icon { font-size: 24px; }
  .choose-exp-cta { padding: 9px 10px; font-size: 12px; }
}

/* ===== Shop visibility ===== */
.visibility-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .04em; font-weight: 600;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.visibility-badge.public {
  background: rgba(80,180,120,.12);
  border-color: rgba(80,180,120,.35);
  color: #7fd9a3;
}
.visibility-badge.private {
  background: rgba(220,170,90,.12);
  border-color: rgba(220,170,90,.35);
  color: #e3b870;
}
.visibility-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 4px;
}
.vis-opt {
  position: relative; cursor: pointer;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.vis-opt:hover { border-color: rgba(255,255,255,.20); }
.vis-opt input[type='radio'] {
  position: absolute; opacity: 0; pointer-events: none;
}
.vis-opt.active {
  border-color: var(--accent);
  background: rgba(255,255,255,.05);
}
.vis-opt-title { font-weight: 600; font-size: 13px; }
.vis-opt-sub { font-size: 11px; color: var(--muted); line-height: 1.3; }

/* ===== Garment-level visibility ===== */
.garment-hidden-tag {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: .04em; font-weight: 600;
  text-transform: uppercase;
  background: rgba(220,170,90,.12);
  border: 1px solid rgba(220,170,90,.35);
  color: #e3b870;
}
.inv-hidden-tag { margin-left: 6px; font-size: 13px; opacity: .85; }
.garment-card:has(.garment-hidden-tag) .garment-photo,
.garment-card:has(.garment-hidden-tag) img {
  filter: grayscale(.5) brightness(.7);
}
.inv-row:has(.inv-hidden-tag) .inv-thumb img {
  filter: grayscale(.5) brightness(.7);
}

/* ===== Language picker in user menu ===== */
.user-menu-section {
  padding: 8px 12px 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 4px;
}
.user-menu-label {
  display: block;
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.user-menu-lang {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lang-pill {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  transition: border-color .15s, background .15s;
}
.lang-pill:hover { border-color: rgba(255,255,255,.25); }
.lang-pill.active {
  border-color: var(--accent);
  background: rgba(255,255,255,.06);
  font-weight: 600;
}

/* ===== User menu v2 (premium glass dropdown) ===== */
.user-menu.user-menu-v2 {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 280px;
  width: 300px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 24px 50px rgba(20, 20, 50, 0.18),
    0 6px 18px rgba(20, 20, 50, 0.08);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  animation: userMenuIn 0.18s cubic-bezier(.2,.8,.2,1) both;
  z-index: 60;
}
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.user-menu-v2 .user-menu-arrow {
  position: absolute;
  top: -7px; right: 22px;
  width: 14px; height: 14px;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.user-menu-v2 .user-menu-header {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255, 45, 111, 0.06), rgba(255, 91, 143, 0.04));
  border: 1px solid rgba(255, 45, 111, 0.12);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #1d1d1f;
  margin-bottom: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.user-menu-v2 .user-menu-header:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255, 45, 111, 0.10), rgba(255, 91, 143, 0.06));
  box-shadow: 0 8px 18px rgba(255, 45, 111, 0.12);
}
.user-menu-v2 .user-menu-header-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 14px rgba(255, 45, 111, 0.32);
  flex-shrink: 0;
  overflow: hidden;
}
.user-menu-v2 .user-menu-header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-menu-v2 .user-menu-header-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.user-menu-v2 .user-menu-header-text strong {
  font-size: 14px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em;
}
.user-menu-v2 .user-menu-header-text small {
  font-size: 11px; color: #6f7282;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-menu-v2 .user-menu-header-chev {
  font-size: 22px; line-height: 1; color: #9aa0b4; font-weight: 300;
}

.user-menu-v2 .user-menu-section {
  padding: 0;
  border: none;
  margin: 0 0 10px;
}
.user-menu-v2 .user-menu-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #9aa0b4;
  margin-bottom: 8px;
  padding: 0 4px;
}

/* Experience cards */
.user-menu-v2 .user-menu-exp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.user-menu-v2 .exp-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  font: inherit;
  color: #1d1d1f;
  text-align: left;
}
.user-menu-v2 .exp-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 45, 111, 0.3);
  box-shadow: 0 8px 18px rgba(20, 20, 50, 0.06);
}
.user-menu-v2 .exp-card.active {
  background: linear-gradient(135deg, rgba(255, 45, 111, 0.08), rgba(255, 91, 143, 0.04));
  border-color: #ff2d6f;
  box-shadow: 0 0 0 3px rgba(255, 45, 111, 0.10);
}
.user-menu-v2 .exp-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: #fff5f8;
  display: grid; place-items: center;
  font-size: 16px;
}
.user-menu-v2 .exp-card.active .exp-icon { background: #fff; box-shadow: 0 4px 10px rgba(255, 45, 111, 0.18); }
.user-menu-v2 .exp-label { font-size: 13px; font-weight: 700; }
.user-menu-v2 .exp-check {
  position: absolute; top: 8px; right: 10px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #ff2d6f; color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
}

/* Language pills */
.user-menu-v2 .user-menu-lang { gap: 8px; }
.user-menu-v2 .lang-pill {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #ececf2;
  background: #fff;
  color: #444;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.user-menu-v2 .lang-pill:hover { border-color: rgba(255, 45, 111, 0.3); }
.user-menu-v2 .lang-pill.active {
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(255, 45, 111, 0.28);
  transform: translateY(-1px);
}

/* Utility links */
.user-menu-v2 .user-menu-links {
  display: flex; flex-direction: column; gap: 2px;
  margin: 8px 0 0;
}
.user-menu-v2 .user-menu-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, padding-left 0.15s ease;
}
.user-menu-v2 .user-menu-link:hover {
  background: rgba(255, 45, 111, 0.06);
  color: #ff2d6f;
  padding-left: 16px;
}
.user-menu-v2 .user-menu-link-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #f6f7fb;
  font-size: 13px;
  flex-shrink: 0;
}
.user-menu-v2 .user-menu-link:hover .user-menu-link-icon {
  background: #fff5f8;
}
.user-menu-v2 .user-menu-link.danger { color: #e53e3e; }
.user-menu-v2 .user-menu-link.danger:hover { background: rgba(229, 62, 62, 0.08); color: #e53e3e; }
.user-menu-v2 .user-menu-link.danger .user-menu-link-icon { background: #fff1f1; }

.user-menu-v2 .user-menu-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #ececf2, transparent);
  margin: 10px 4px 6px;
}
.user-menu-v2 .user-menu-link.signout {
  color: #6f7282;
  font-weight: 600;
}
.user-menu-v2 .user-menu-link.signout:hover { background: #f6f7fb; color: #1d1d1f; }

/* Avatar button polish (the chip button when dropdown uses v2) */
.user-chip:has(.user-menu-v2),
.user-chip.open:has(.user-menu-v2) {
  border: none; background: transparent;
}
.user-chip:has(.user-menu-v2) .user-chip-btn {
  width: 42px; height: 42px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ececf2;
  box-shadow: 0 6px 16px rgba(20, 20, 50, 0.08);
  display: grid; place-items: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.user-chip:has(.user-menu-v2) .user-chip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20, 20, 50, 0.12);
  background: #fff;
}
.user-chip:has(.user-menu-v2) .user-chip-btn > span { display: none; }
.user-chip:has(.user-menu-v2) .avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(255, 45, 111, 0.32);
}

@media (max-width: 520px) {
  .user-menu.user-menu-v2 {
    width: calc(100vw - 24px);
    max-width: 320px;
    right: -8px;
  }
  .user-menu-v2 .user-menu-arrow { right: 30px; }
}

/* ===== Inventory slicer / filter chips ===== */
.slicer-bar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  margin: 4px 0 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}
.slicer-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.slicer-label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); min-width: 80px;
  font-weight: 600;
}
.chip-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1;
}
.chip {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .02em;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.chip:hover { border-color: rgba(255,255,255,.25); }
.chip.active {
  border-color: var(--accent);
  background: rgba(212,175,124,.12);
  color: var(--accent);
  font-weight: 600;
}
.chip-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.chip.active .chip-count {
  background: rgba(212,175,124,.20);
  color: var(--accent);
}
.slicer-clear {
  cursor: pointer;
  background: transparent; border: none;
  color: var(--muted); font-size: 11px;
  padding: 4px 8px;
  letter-spacing: .04em;
  margin-left: auto;
}
.slicer-clear:hover { color: var(--ink); }

/* ===== Inventory left filter rail (Myntra-style) ===== */
.inv-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .inv-layout { grid-template-columns: 1fr; gap: 12px; }
  /* Burger-menu pattern: rail slides in from the left over the page,
     dimmed by a backdrop. Hidden until `.open` class is added. */
  .inv-rail {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-height: 100vh;
    margin: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: 6px 0 24px rgba(0,0,0,0.18);
    z-index: 1001;
    transform: translateX(-105%);
    transition: transform 0.26s cubic-bezier(.4,.0,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .inv-rail.open { transform: translateX(0); }
  .inv-rail .rail-head {
    position: sticky; top: 0;
    background: inherit;
    z-index: 2;
    padding: 14px 16px 10px;
  }
  .inv-rail .rail-section { padding: 12px 16px; }
  .inv-rail .rail-opt { padding: 6px 0; font-size: 14px; }

  /* Backdrop */
  .filters-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
  }
  .filters-backdrop.show { opacity: 1; pointer-events: auto; }
  body.filters-open { overflow: hidden; }
}

/* Burger trigger button — visible only on mobile/tablet (≤ 900px). */
.filter-burger { display: none; }
@media (max-width: 900px) {
  .filter-burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--line, rgba(0,0,0,0.12));
    background: #fff;
    color: var(--ink-soft, #333);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .filter-burger:hover { border-color: var(--accent, #ff3f6c); color: var(--accent, #ff3f6c); }
  .filter-burger.has-active { border-color: var(--accent, #ff3f6c); color: var(--accent, #ff3f6c); }
  .filter-burger .burger-icon {
    display: inline-flex; flex-direction: column; gap: 3px;
    width: 14px;
  }
  .filter-burger .burger-icon > span {
    display: block; height: 2px; width: 100%;
    background: currentColor; border-radius: 2px;
  }
}

/* Apply footer inside the rail — visible only on mobile drawer. */
.rail-footer { display: none; }
@media (max-width: 900px) {
  .inv-rail { padding-bottom: 76px; }
  .rail-footer {
    display: block;
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid var(--line, rgba(0,0,0,0.10));
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
    z-index: 3;
  }
  .rail-apply-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
  }
}
.inv-rail {
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(0,0,0,0.10));
  border-radius: 12px;
  padding: 4px 0;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
  background: var(--paper, #fff);
}
.rail-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
}
.rail-clear {
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: #ef6c6c;
  padding: 2px 4px;
}
.rail-clear:hover { text-decoration: underline; }
.rail-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.06));
}
.rail-section:last-child { border-bottom: none; }
.rail-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
  margin-bottom: 10px;
}
.rail-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  user-select: none;
}
.rail-opt:hover { color: var(--accent); }
.rail-opt input { accent-color: var(--accent); cursor: pointer; }
.rail-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.inv-content { min-width: 0; }

/* Themed radio + checkbox controls — custom-drawn, theme-locked.
   `appearance: none` so the dark OS UA can't paint them black. */
input[type="radio"],
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #c4c5cc !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  vertical-align: middle;
  display: inline-grid !important;
  place-content: center !important;
  flex-shrink: 0;
  transition: border-color .12s ease, background-color .12s ease;
  color-scheme: light !important;
}
input[type="radio"] { border-radius: 50% !important; }
input[type="checkbox"] { border-radius: 3px !important; }

input[type="radio"]:hover,
input[type="checkbox"]:hover { border-color: #ff3f6c !important; }

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: #ffffff !important;
  border-color: #ff3f6c !important;
}

/* Pink dot for radios */
input[type="radio"]::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .12s ease;
  background: #ff3f6c;
}
input[type="radio"]:checked::before { transform: scale(1); }

/* Pink check mark for checkboxes (drawn with a rotated rectangle) */
input[type="checkbox"]::before {
  content: "";
  width: 10px; height: 10px;
  background: #ff3f6c;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform .12s ease;
}
input[type="checkbox"]:checked::before { transform: scale(1); }

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 63, 108, 0.25) !important;
}

/* Force light color-scheme so the surrounding form chrome isn't dark */
html, body { color-scheme: light !important; }

/* Google Places Autocomplete dropdown */
.pac-container {
  z-index: 10000;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.18), 0 4px 12px -4px rgba(0,0,0,0.10);
  font-family: inherit;
  margin-top: 4px;
  overflow: hidden;
}
.pac-item {
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected { background: var(--paper-2); }
.pac-item-query { color: var(--ink); font-weight: 500; }
.pac-matched { color: var(--accent); }
.pac-icon { opacity: 0.45; }

/* Inline "open in Google Maps" link next to a shop location */
.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.map-link:hover { background: var(--paper); color: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.map-link:hover {
  background: #4285F4;
  color: #fff;
  transform: translateY(-1px);
}

/* Locate-me row in shop settings */
.location-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.location-row input { flex: 1; }
.locate-btn { white-space: nowrap; flex-shrink: 0; }

/* Near-me row in the LOCATION rail section */
.rail-near-me {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}

/* Near-me button alongside the shops search bar */
.near-me-btn { white-space: nowrap; }
.near-me-btn.active {
  background: rgba(66,133,244,0.15);
  color: #8ab4f8;
  border-color: rgba(66,133,244,0.4);
}
.near-me-note { margin-top: 6px; }

/* Shop detail tabs (Pieces / Map) */
.shop-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  border-bottom: 1px solid #2a2c38;
  padding: 0 4px;
}
.shop-tab {
  background: transparent;
  border: none;
  color: #9aa0b4;
  font: inherit;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.shop-tab:hover:not(:disabled) { color: #ecedf3; }
.shop-tab.active {
  color: #ecedf3;
  border-bottom-color: #d4a373;
}
.shop-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-tab-count {
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
}

/* Embedded Google Maps panel */
.shop-map-panel {
  background: #14151c;
  border: 1px solid #22232c;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.shop-map-iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}
.shop-map-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #14151c;
  border-top: 1px solid #22232c;
}
@media (max-width: 640px) {
  .shop-map-iframe { height: 360px; }
}

/* Address text linking to Google Maps */
.shop-loc-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.shop-loc-link:hover {
  color: #8ab4f8;
  border-bottom-color: rgba(138,180,248,0.5);
}


/* ============================================================
   Airbnb design overrides
   Soft radii on cards/buttons/inputs, mobile polish
   ============================================================ */

/* --- Cards: soft 14px corners (rounded.md) --- */
.login-card,
.welcome-card,
.profile-card,
.host-card,
.shop-card,
.shop-detail,
.garment-card,
.look-card,
.tryon-card,
.choose-card,
.set-card,
.sset-card,
.tile-card,
.help-drawer,
.help-contact,
.dropzone,
.dz,
.shop-hero,
.shop-detail-hero,
.tryon-frame,
.shop-onboard,
.welcome-grid > *,
.lstat,
.stat-card {
  border-radius: var(--r-md);
}

/* --- Buttons: 8px radius (rounded.sm) --- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline,
button.btn,
.upload-btn,
.help-form input,
.help-form textarea,
.dev-login button,
.modal .btn {
  border-radius: var(--r-sm);
}

/* --- Pills & circular controls (rounded.full) --- */
.btn.pill,
.chip,
.badge.pill,
.search-pill,
.tag-pill,
.help-link,
.tryon-progress-pill,
.guest-favorite-badge,
.tryon-meta-label,
.help-contact-icon,
.help-close,
.icon-btn,
.icon-btn-circle,
.dot,
.avatar,
.host-avatar {
  border-radius: var(--r-full);
}

/* --- Text inputs: 8px (rounded.sm), 56px height per spec --- */
.input,
input[type="text"]:not(.dev-login input):not(#profile-name),
input[type="email"]:not(.dev-login input),
input[type="search"],
input[type="number"],
textarea:not(.help-form textarea):not(.composer textarea),
select {
  border-radius: var(--r-sm);
}

/* --- Primary CTA: Rausch + active/disabled states --- */
.btn-primary,
.btn.primary,
button[type="submit"].primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover,
.btn.primary:hover,
button[type="submit"].primary:hover {
  background: var(--accent-active);
  border-color: var(--accent-active);
}
.btn-primary:disabled,
.btn-primary[disabled],
.btn.primary:disabled,
.btn.primary[disabled] {
  background: var(--accent-disabled);
  border-color: var(--accent-disabled);
  color: #fff;
  cursor: not-allowed;
}

/* --- Hairlines align to Airbnb #dddddd --- */
hr,
.divider-line {
  border-color: var(--line);
}

/* --- Photo containers: soft 14px clip --- */
.tryon-frame,
.tryon-card .tryon-img,
.garment-card .garment-photo,
.look-card .look-photo,
.shop-card .shop-photo,
.profile-photo,
.shop-detail-hero img,
.shop-hero img {
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Mobile polish: tap targets, safe areas, no horiz scroll --- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

@media (max-width: 768px) {
  /* Generous tap targets per WCAG AAA */
  .btn,
  .btn-primary,
  .btn-secondary,
  .icon-btn,
  .help-link,
  .help-close {
    min-height: 44px;
  }

  /* Match Airbnb's mobile padding rhythm */
  .screen { padding: 16px clamp(14px, 4vw, 20px); }
  .login-card { padding: 24px 20px; border-radius: var(--r-md); }

  /* Login splits to single column */
  section.screen:has(.hero) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero { padding: 8px 0; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); margin: 24px 0 16px; }
  .hero-art { min-height: 360px; }
  .tryon-frame { min-height: 360px; }

  /* Logo scale on mobile */
  .logo { margin-left: 0; }
  .logo img { height: 84px; width: auto; max-width: 280px; }
  .logo.small img { height: 40px; width: auto; }

  /* Help drawer fills screen */
  .help-drawer { width: 100vw; padding: 24px 18px 20px; padding-top: max(24px, env(safe-area-inset-top)); }

  /* Cards stretch full-width with comfy padding */
  .welcome-card,
  .profile-card,
  .shop-card,
  .host-card,
  .reservation-card { padding: 20px 16px; }

  /* Disable heavy hover-only floats on touch */
  .garment-card:hover,
  .shop-card:hover,
  .look-card:hover { transform: none; }
}

@media (max-width: 480px) {
  .screen { padding: 12px 14px; }
  .hero h1 { font-size: clamp(32px, 10vw, 44px); line-height: 1; }
  .lede { font-size: 15px; margin-bottom: 24px; }
  .login-heading { font-size: 22px; }
  .help-drawer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* iOS safe-area aware fixed bars */
@supports (padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}


/* =============================================================
   AI Wardrobe page
   ============================================================= */
.wardrobe-page { background: var(--bg); min-height: 100vh; }
.wardrobe-main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 0 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.wardrobe-hero { padding: 8px 4px 0; }
.wardrobe-hero .page-title { margin: 0 0 4px; font-size: clamp(28px, 6vw, 40px); }
.wardrobe-sub { color: var(--muted); margin: 0; font-size: 14px; }

.wardrobe-error {
  background: rgba(193, 53, 21, 0.08);
  color: var(--error);
  border: 1px solid rgba(193, 53, 21, 0.2);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
}

/* ---- Upload card ---- */
.wardrobe-upload {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.wardrobe-upload-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--paper);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wardrobe-upload-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.wardrobe-upload-card.is-uploading,
.wardrobe-upload-camera.is-uploading {
  cursor: progress;
  border-color: var(--accent);
  background: var(--accent-soft);
  pointer-events: none;
}
.wardrobe-upload-card.is-uploading .wardrobe-upload-icon { color: var(--accent); }
.wardrobe-upload-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  color: var(--accent);
}
.wardrobe-upload-text { display: flex; flex-direction: column; gap: 2px; }
.wardrobe-upload-text strong { color: var(--ink); font-size: 15px; }
.wardrobe-upload-text span { color: var(--muted); font-size: 12px; }
.wardrobe-upload-camera {
  width: 56px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.wardrobe-upload-camera:hover { background: var(--paper-2); }

/* ---- Section heads ---- */
.wardrobe-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 4px -4px;
}
.wardrobe-section-head h2 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wardrobe-section-head small { color: var(--muted); font-size: 12px; }

/* ---- Categories (polished card) ---- */
.wardrobe-cats-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.wardrobe-cats-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.wardrobe-cats-title { display: flex; align-items: center; gap: 10px; }
.wardrobe-cats-title h2 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.wardrobe-cats-title p { margin: 0; font-size: 11.5px; color: var(--muted); }
.wardrobe-cats-spark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent-soft, #ffe7eb);
  color: var(--accent);
  font-size: 14px;
}
.wardrobe-cats-pill {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft, #ffe7eb);
  color: var(--accent);
  white-space: nowrap;
}

.wardrobe-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.wardrobe-cat {
  position: relative;
  flex: 0 0 86px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 10px 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
}
.wardrobe-cat:hover { border-color: var(--accent); transform: translateY(-1px); }
.wardrobe-cat.active {
  border-color: var(--accent);
  background: var(--accent-soft, #ffe7eb);
}
.wardrobe-cat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--ink);
}
.wardrobe-cat.active .wardrobe-cat-icon { background: #fff; color: var(--accent); }
.wardrobe-cat-foot {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px;
}
.wardrobe-cat-label { font-weight: 600; color: var(--ink); }
.wardrobe-cat-dash {
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--accent);
}
.wardrobe-cat-count { color: var(--muted); }
.wardrobe-cat-badge {
  position: absolute; top: -6px; right: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  line-height: 1.4;
}
.wardrobe-cat-badge.badge-most-worn { background: var(--accent); }
.wardrobe-cat-badge.badge-trending { background: #6c5cff; }
.wardrobe-cat-badge.badge-new { background: #16a34a; }

/* ---- Item grid ---- */
.wardrobe-loading {
  text-align: center;
  padding: 28px 16px;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.wardrobe-empty {
  text-align: center;
  padding: 32px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wardrobe-empty-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  display: grid; place-items: center;
  background: var(--accent-soft, #ffe7eb);
  color: var(--accent);
}
.wardrobe-empty h3 {
  margin: 4px 0 0;
  font-family: 'Fraunces', serif;
  font-size: 20px; font-weight: 600; color: var(--ink);
}
.wardrobe-empty p {
  margin: 0; color: var(--muted); font-size: 13px; max-width: 280px;
}
.wardrobe-empty-btn {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wardrobe-empty-btn:hover:not(:disabled) {
  background: var(--accent); color: #fff;
}
.wardrobe-empty-btn:disabled { opacity: .6; cursor: not-allowed; }
.wardrobe-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.wardrobe-grid > .wardrobe-item {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
.wardrobe-item {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.wardrobe-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.wardrobe-item-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--paper-2);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.wardrobe-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wardrobe-item-check {
  position: absolute;
  top: 8px; left: 8px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  color: var(--ink);
}
.wardrobe-item.selected .wardrobe-item-check {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.wardrobe-item-meta {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 1px;
}
.wardrobe-item-meta strong {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wardrobe-item-meta small { font-size: 11px; color: var(--muted); }
.wardrobe-item-del {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: grid; place-items: center;
}

/* ---- Outfit generator ---- */
.wardrobe-generator {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wardrobe-generator-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  min-height: 72px;
  scrollbar-width: thin;
}
.wardrobe-generator-empty {
  color: var(--muted);
  font-size: 13px;
  display: flex; align-items: center;
  padding: 0 4px;
}
.wardrobe-strip-item {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--accent);
  padding: 0;
  background: var(--paper-2);
  cursor: pointer;
}
.wardrobe-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wardrobe-occasion {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
}
.wardrobe-occasion:focus { outline: none; border-color: var(--accent); }
.wardrobe-generate-btn {
  width: 100%;
  min-height: 50px;
  font-size: 15px;
  font-weight: 600;
}

/* ---- AI Recommendation card ---- */
.wardrobe-rec-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 320px;
  margin: 0 auto;
}
.wardrobe-rec-photo {
  position: relative;
  aspect-ratio: 9 / 12;
  background: var(--paper-2);
  display: grid; place-items: center;
}
.wardrobe-rec-photo img { width: 100%; height: 100%; object-fit: cover; }
.wardrobe-rec-loader {
  color: var(--muted);
  font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 0 16px;
}
.wardrobe-rec-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wardrobe-rec-meta {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.wardrobe-rec-meta h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wardrobe-rec-thumbs {
  display: flex; gap: 6px;
  overflow-x: auto;
}
.wardrobe-rec-thumbs img {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.wardrobe-rec-cta {
  align-self: flex-start;
  font-size: 13px;
}
.wardrobe-auto-btn {
  width: 100%;
  margin-top: -4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  background: transparent;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wardrobe-auto-btn:hover:not(:disabled) {
  background: var(--accent); color: #fff;
}
.wardrobe-auto-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- More recommendations ---- */
.wardrobe-recs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.wardrobe-rec-chip {
  flex-shrink: 0;
  width: 160px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wardrobe-rec-chip:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wardrobe-rec-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.wardrobe-rec-chip-emoji { font-size: 22px; }
.wardrobe-rec-chip strong { font-size: 14px; color: var(--ink); }
.wardrobe-rec-chip small { font-size: 11px; color: var(--muted); }

@media (max-width: 480px) {
  .wardrobe-cats-card { padding: 10px 10px 8px; gap: 10px; }
  .wardrobe-cats-title h2 { font-size: 16px; }
  .wardrobe-cats-title p { font-size: 11px; }
  .wardrobe-cats-spark { width: 26px; height: 26px; font-size: 12px; }
  .wardrobe-cats-pill { font-size: 10.5px; padding: 3px 8px; }
  .wardrobe-cats { gap: 6px; }
  .wardrobe-cat { flex: 0 0 72px; padding: 8px 4px; border-radius: 12px; gap: 6px; }
  .wardrobe-cat-icon { width: 36px; height: 36px; border-radius: 10px; }
  .wardrobe-cat-icon svg { width: 22px; height: 22px; }
  .wardrobe-cat-foot { font-size: 10px; gap: 3px; }
  .wardrobe-cat-dash { width: 8px; }
  .wardrobe-cat-badge { font-size: 8px; padding: 1px 5px; right: 4px; }
  .wardrobe-grid > .wardrobe-item { flex: 0 0 130px; }
  .wardrobe-empty { padding: 24px 14px; }
  .wardrobe-empty-icon { width: 60px; height: 60px; border-radius: 16px; }
  .wardrobe-empty-icon svg { width: 36px; height: 36px; }
  .wardrobe-empty h3 { font-size: 18px; }
}


/* ===== Android shell only (web build untouched) =====
   The native APK appends 'StyleYouMobile' to the User-Agent; the page
   then sets html[data-shell=android]. We keep the slim topbar (logo +
   user chip) but hide the desktop tab strip; the bottom-nav handles
   navigation. Plain browsers are unaffected. */
html[data-shell="android"] .topnav { display: none !important; }
html[data-shell="android"] .screen { padding-top: 12px; }
html[data-shell="android"] .chat-shell { padding-top: 0; }
html[data-shell="android"] .bottom-nav { display: flex !important; }


/* ============================================================
   Mobile dedup — hide the top tab strip on phones; the
   bottom-nav is the canonical phone navigation. The topbar
   itself stays visible (logo + user chip). Desktop & tablet
   are unaffected.
   ============================================================ */
@media (max-width: 720px) {
  .topbar .topnav { display: none !important; }
  .topbar { row-gap: 0; padding-bottom: 4px; grid-template-areas: 'logo chip' !important; }
}

/* ==========  My Looks toolbar shared base (extended by v3)  ========== */
.looks-toolbar-head { display: flex; flex-direction: column; gap: 4px; }
.looks-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ff2d6f;
  font-family: 'Inter', system-ui, sans-serif;
}
.looks-count-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.looks-count-num {
  background: linear-gradient(135deg, #ff2d6f 0%, #ff5b8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.looks-count-word { color: #1d1d1f; }
.looks-count-shown {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6f7282;
  letter-spacing: 0;
}
.looks-filter-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff2d6f;
  display: inline-block;
}
.looks-search {
  position: relative;
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  height: 44px;
  background: #f6f7fb;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 16px 0 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.looks-search:focus-within {
  background: #fff;
  border-color: rgba(255, 45, 111, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 45, 111, 0.1);
}
.looks-search svg {
  color: #9aa0aa;
  flex-shrink: 0;
  margin-right: 8px;
}
.looks-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #1d1d1f;
}
.looks-search input::placeholder { color: #9aa0aa; }
.looks-search input:focus { outline: none; }

/* ==========  Mobile/Android consistency safety net  ========== */
html, body { overflow-x: hidden; max-width: 100vw; }
body, #root { box-sizing: border-box; }
/* Ensure grid/flex children never overflow their parent on narrow screens */
.shop-grid, .looks-grid, .garment-grid, .wardrobe-cats { min-width: 0; }
.shop-grid > *, .looks-grid > *, .garment-grid > * { min-width: 0; max-width: 100%; }
/* Page-wrap respects safe areas on Android/iOS */
.page-wrap {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (max-width: 600px) {
  .page-wrap { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
}
/* ==========  My Looks toolbar v3 (matches reference mock) ========== */
.inv-toolbar.looks-toolbar-v3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 28px);
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid rgba(20, 20, 50, 0.06);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(20, 20, 50, 0.04);
  text-align: left;
}
.inv-toolbar.looks-toolbar-v3 .looks-toolbar-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.inv-toolbar.looks-toolbar-v3 .looks-eyebrow { align-self: flex-start; }
.inv-toolbar.looks-toolbar-v3 .looks-subtitle { align-self: flex-start; }
.inv-toolbar.looks-toolbar-v3 .looks-count-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 7vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  align-self: flex-start;
  text-align: left;
  width: auto;
  margin: 0;
}
.inv-toolbar.looks-toolbar-v3 .looks-toolbar-row { width: 100%; }
.inv-toolbar.looks-toolbar-v3 .looks-count-num {
  font-weight: 900;
  font-size: 1.18em;
  margin-right: 4px;
  background: linear-gradient(135deg, #ff2d6f 0%, #ff5b8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.inv-toolbar.looks-toolbar-v3 .looks-count-word {
  font-weight: 700;
  color: #1d1d1f;
}
.looks-subtitle {
  margin: 8px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: #6f7282;
  font-weight: 500;
}
.looks-toolbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.looks-search-row .looks-search {
  flex: 1;
  height: 52px;
  background: #f3f4f8;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 0 18px 0 16px;
}
.looks-search-row .looks-search svg { color: #9aa0aa; margin-right: 10px; }
.looks-search-row .looks-search input { font-size: 15px; }
.looks-filter-iconbtn {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffe6ee;
  border: none;
  border-radius: 16px;
  color: #ff2d6f;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.looks-filter-iconbtn:hover {
  background: #ffd4e2;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255, 45, 111, 0.2);
}
.looks-filter-iconbtn.has-active {
  background: linear-gradient(135deg, #ff2d6f, #ff5b8f);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 45, 111, 0.3);
}
.looks-filter-iconbtn .looks-filter-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff2d6f;
}

@media (max-width: 480px) {
  .inv-toolbar.looks-toolbar-v3 { padding: 20px 16px; border-radius: 22px; }
  .inv-toolbar.looks-toolbar-v3 .looks-count-title { font-size: 40px; }
  .looks-search-row .looks-search { height: 48px; }
  .looks-filter-iconbtn { width: 48px; height: 48px; }
}
/* ============================================================
   Luxury onboarding (signature look)
   Glassmorphism · pink gradients · premium mobile-first card
   ============================================================ */
.onboard.onboard-lux {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  min-height: 0;
  grid-template-columns: none;
  gap: 0;
  background: transparent;
}

.onboard-lux-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #f0f0f3;
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 20px 50px -20px rgba(20, 20, 40, 0.12),
    0 6px 16px -8px rgba(20, 20, 40, 0.06);
}

/* Step progress */
.lux-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lux-step-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ff4f7d;
}
.lux-step-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 79, 125, 0.12);
  overflow: hidden;
}
.lux-step-bar-fill {
  width: 50%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8aa8 0%, #ff4f7d 60%, #ff2e6a 100%);
  box-shadow: 0 0 12px rgba(255, 79, 125, 0.6);
}

/* Headline */
.lux-title {
  margin: 0;
  font-family: 'Fraunces', 'Playfair Display', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1a1a1f;
}
.lux-grad {
  background: linear-gradient(135deg, #ff8aa8 0%, #ff4f7d 50%, #ff2e6a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.lux-spark { display: inline-block; filter: drop-shadow(0 2px 8px rgba(255, 79, 125, 0.5)); }
.lux-sub {
  margin: 0;
  color: #5a5a66;
  font-size: 15px;
  line-height: 1.55;
}

/* Upload glass card */
.lux-upload {
  position: relative;
  border-radius: 28px;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 244, 248, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 40px -18px rgba(255, 79, 125, 0.35),
    0 6px 18px -10px rgba(20, 20, 40, 0.08);
  overflow: hidden;
}
.lux-upload-glow {
  position: absolute;
  inset: auto 0 auto 0;
  top: 20%;
  height: 60%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255, 79, 125, 0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.lux-dropzone {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 20px;
  background: #fafafb;
  border: 1.5px dashed rgba(255, 79, 125, 0.35);
  min-height: 140px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lux-dropzone:hover { border-color: #ff4f7d; transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(255, 79, 125, 0.25); }
.lux-drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px;
  min-height: 140px;
}
.lux-drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff8aa8 0%, #ff4f7d 60%, #ff2e6a 100%);
  box-shadow:
    0 10px 22px -8px rgba(255, 79, 125, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lux-drop-empty strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1f;
  letter-spacing: -0.01em;
}
.lux-drop-empty small {
  color: #7a7a86;
  font-size: 12.5px;
  line-height: 1.45;
}
.lux-preview {
  position: relative;
  display: block;
  width: 100%;
  min-height: 160px;
}
.lux-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.lux-preview-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 14px;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55));
  opacity: 0;
  transition: opacity .2s;
}
.lux-dropzone:hover .lux-preview-overlay { opacity: 1; }
.lux-preview-overlay span {
  background: rgba(255, 255, 255, 0.95);
  color: #ff2e6a;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Tips chips */
.lux-tips {
  list-style: none;
  margin: 14px 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.lux-tips li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #5a5a66;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 79, 125, 0.18);
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px -2px rgba(255, 79, 125, 0.18);
}

/* Action buttons */
.lux-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lux-actions.lux-actions-single {
  grid-template-columns: 1fr;
  justify-items: center;
}
.lux-actions.lux-actions-single .lux-pill-btn {
  max-width: 240px;
  width: 100%;
}

/* Photo source picker (bottom sheet on mobile, centered modal on desktop) */
.lux-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 40, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: luxPickerFade 0.2s ease;
}
.lux-picker-sheet {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 14px 20px 24px;
  box-shadow: 0 -20px 60px -20px rgba(20, 20, 40, 0.3);
  animation: luxPickerSlideUp 0.28s cubic-bezier(.2,.8,.2,1);
}
.lux-picker-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #e5e5ec;
  margin: 0 auto 14px;
}
.lux-picker-title {
  margin: 0 0 16px;
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #1a1a1f;
  text-align: center;
}
.lux-picker-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.lux-picker-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  background: #fafafb;
  border: 1px solid #ececf0;
  border-radius: 18px;
  color: #1a1a1f;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.lux-picker-option:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 56, 92, 0.35);
  background: #ffffff;
  box-shadow: 0 8px 22px -10px rgba(255, 56, 92, 0.25);
}
.lux-picker-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff6a85 0%, #ff385c 50%, #e00b41 100%);
  box-shadow: 0 8px 18px -6px rgba(224, 11, 65, 0.45);
}
.lux-picker-label {
  text-align: center;
  line-height: 1.3;
}
.lux-picker-cancel {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  color: #7a7a86;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 12px;
}
.lux-picker-cancel:hover { background: #f5f5f8; color: #1a1a1f; }

@keyframes luxPickerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes luxPickerSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 640px) {
  .lux-picker-backdrop { align-items: center; }
  .lux-picker-sheet { border-radius: 20px; padding: 24px; }
}
.lux-pill-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1a1f;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 79, 125, 0.18);
  border-radius: 18px;
  box-shadow:
    0 6px 18px -8px rgba(20, 20, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.lux-pill-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 125, 0.45);
  box-shadow: 0 10px 24px -10px rgba(255, 79, 125, 0.3);
}
.lux-pill-btn span[aria-hidden] { font-size: 16px; }

/* Field */
.lux-field { display: flex; flex-direction: column; gap: 8px; }
.lux-field-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a8a96;
}
.lux-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: #1a1a1f;
  padding: 13px 16px;
  background: #ffffff;
  border: 1px solid #e8e8ec;
  border-radius: 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lux-input:focus {
  border-color: #ff4f7d;
  box-shadow: 0 0 0 4px rgba(255, 79, 125, 0.15);
}
.lux-field-hint {
  font-size: 12.5px;
  color: #7a7a86;
  line-height: 1.5;
}

/* Primary CTA */
.lux-cta {
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 15px 22px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: linear-gradient(135deg, #ff6a85 0%, #ff385c 50%, #e00b41 100%);
  border-radius: 22px;
  box-shadow:
    0 14px 30px -10px rgba(224, 11, 65, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.lux-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 22px 48px -10px rgba(224, 11, 65, 0.55),
    0 8px 18px -6px rgba(255, 56, 92, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lux-cta:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }
.lux-cta:disabled { opacity: 0.55; cursor: not-allowed; }

.lux-fineprint {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  color: #8a8a96;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .onboard-lux-card { border-radius: 28px; padding: 22px 18px; }
  .lux-title { font-size: 32px; }
}

/* ============================================================
   Shop Settings — Luxury redesign
   ============================================================ */
.shop-lux {
  background: #ffffff;
  min-height: 100vh;
}
.shop-lux .settings-card.shop-lux-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #f0f0f2;
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

/* Hero */
.shop-lux-hero { padding: 4px 2px 2px; }
.shop-lux-hero-eyebrow { display: none; }
.shop-lux-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-lux-hero-share {
  cursor: pointer;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4f7d, #ff83a2);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 14px -6px rgba(255, 79, 125, 0.55);
  white-space: nowrap;
  transition: transform .15s;
}
.shop-lux-hero-share:hover { transform: translateY(-1px); }
.shop-lux-hero-title {
  margin: 0 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #111;
}
.shop-lux-hero-grad {
  background: linear-gradient(135deg, #ff8aa8 0%, #ff4f7d 55%, #ff2e6a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shop-lux-hero-sub {
  margin: 0;
  color: #8c8c96;
  font-size: 13px;
  line-height: 1.5;
}
.shop-lux-title {
  font-family: 'Fraunces', 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  color: #1a1a1f !important;
}

/* Upload area */
.shop-lux .shop-lux-drop {
  position: relative;
  border-radius: 24px !important;
  border: 1.5px dashed rgba(255, 79, 125, 0.32) !important;
  background:
    linear-gradient(180deg, rgba(255, 249, 251, 0.98) 0%, #ffffff 100%),
    radial-gradient(circle at top center, rgba(255, 79, 125, 0.18), transparent 46%) !important;
  overflow: hidden;
  padding: 0 !important;
  box-shadow: 0 22px 50px -42px rgba(255, 79, 125, 0.42);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.shop-lux .shop-lux-drop:hover {
  border-color: #ff4f7d !important;
  transform: translateY(-1px);
  box-shadow: 0 24px 56px -38px rgba(255, 79, 125, 0.5);
}
.shop-lux .shop-lux-drop .dz-inner {
  position: relative;
  padding: 22px 18px 24px;
}
.shop-lux-drop-glow {
  position: absolute;
  inset: auto 0 auto 0;
  top: 10%;
  height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 79, 125, 0.18), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.shop-lux .shop-lux-drop .dz-cta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shop-lux .shop-lux-drop .dz-cta strong { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 16px; color: #1a1a1f; }
.shop-lux .shop-lux-drop .dz-cta small { color: #7a7a86; font-size: 12.5px; text-align: center; max-width: 22rem; }
.shop-lux-drop-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff8aa8 0%, #ff4f7d 60%, #ff2e6a 100%);
  box-shadow:
    0 12px 26px -8px rgba(255, 79, 125, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  margin-bottom: 4px;
}

/* Premium filled inputs (scoped) */
.shop-lux .settings-section input[type="text"],
.shop-lux .settings-section input[type="tel"],
.shop-lux .settings-section textarea,
.shop-lux-select {
  background: #f7f7fa !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111 !important;
  outline: none;
  transition: box-shadow .15s, background .15s;
}
.shop-lux .settings-section input[type="text"]:focus,
.shop-lux .settings-section input[type="tel"]:focus,
.shop-lux .settings-section textarea:focus,
.shop-lux-select:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 79, 125, 0.25) !important;
}
.shop-lux .field-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8c8c96;
  margin-top: 8px;
  margin-bottom: 4px;
  display: block;
}
.shop-lux .location-row { display: flex; gap: 10px; }
.shop-lux .location-row input { flex: 1; }
.shop-lux .phone-input-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  background: #f7f7fa;
  border-radius: 12px;
  padding: 0 12px;
  transition: background .15s, box-shadow .15s;
}
.shop-lux .phone-input-wrap:focus-within {
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 79, 125, 0.25);
}
.shop-lux .phone-input-wrap .phone-input-icon {
  flex: 0 0 auto;
  margin-right: 10px;
  color: #ff4f7d;
  pointer-events: none;
}
.shop-lux .phone-input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  letter-spacing: 0.02em;
}
.shop-lux .phone-input-wrap input::placeholder {
  color: #a0a0aa;
}
.shop-lux .locate-btn {
  border-radius: 12px !important;
  border: 1px solid #ececf1 !important;
  background: #ffffff !important;
  color: #ff4f7d !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
  padding: 0 12px !important;
  min-height: 42px;
  min-width: 92px;
  white-space: nowrap;
  box-shadow: none !important;
}
.shop-lux .locate-btn:hover { transform: translateY(-1px); }

/* AI prompt preview */
.shop-lux-prompt {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fafafb;
  border: 1px solid #ececf1;
}
.shop-lux-prompt-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8c8c96;
  margin-bottom: 4px;
}
.shop-lux-prompt-text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #3a3a44;
}

/* Visibility cards (side-by-side grid) */
.shop-lux-vis {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.shop-lux-vis-card {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #ececf1 !important;
  background: #ffffff !important;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.shop-lux-vis-card:hover { transform: translateY(-1px); }
.shop-lux-vis-card.active {
  border-color: #ff4f7d !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px #ff4f7d inset !important;
}
.shop-lux-vis-card input { position: absolute; opacity: 0; pointer-events: none; }
.shop-lux-vis-card .vis-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 14px;
  background: #f3f3f5;
  margin-right: 8px;
  vertical-align: middle;
}
.shop-lux-vis-card.active .vis-opt-icon { background: #ffe3eb; }
.shop-lux-vis-card .vis-opt-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #111;
  vertical-align: middle;
}
.shop-lux-vis-card .vis-opt-sub {
  display: block;
  margin-top: 2px;
  margin-left: 34px;
  color: #8c8c96;
  font-size: 11px;
  line-height: 1.4;
}

/* Primary CTA */
.shop-lux-footer { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.shop-lux-cta {
  cursor: pointer;
  flex: 1;
  border: none;
  padding: 12px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: linear-gradient(135deg, #ff8aa8 0%, #ff4f7d 55%, #ff2e6a 100%);
  border-radius: 14px;
  box-shadow: 0 10px 22px -10px rgba(255, 79, 125, 0.55);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.shop-lux-cta:hover:not(:disabled) {
  transform: translateY(-1px);
}
.shop-lux-cta:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 480px) {
  .shop-lux .settings-card.shop-lux-card { border-radius: 16px; padding: 12px; }
  .shop-lux-vis { grid-template-columns: 1fr; }
}

/* ---- Layout tuning for /shop/settings ---- */
.shop-lux-screen { padding-top: 4px !important; padding-bottom: 4px !important; }
.shop-lux { padding-top: 2px !important; padding-bottom: 4px !important; margin-top: 0 !important; }
.shop-lux .settings-section { margin: 0 0 8px !important; padding: 0 !important; }
.shop-lux .settings-section:last-child { margin-bottom: 0 !important; }
.shop-lux .settings-section textarea { min-height: 96px; line-height: 1.6 !important; }

/* AI prompt preview */
.shop-lux-prompt { margin-top: 6px; padding: 8px 10px; border-radius: 10px; }
.shop-lux-prompt-label { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 2px; }
.shop-lux-prompt-text { font-size: 11px; line-height: 1.4; }
.shop-lux .settings-section textarea { min-height: 56px !important; line-height: 1.45 !important; width: 100% !important; box-sizing: border-box !important; display: block !important; resize: vertical; }

/* Share row */
.shop-lux-share-section {
  background: #fafafb;
  border: 1px solid #ececf1;
  border-radius: 14px;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}
.shop-lux-share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.shop-lux-share-section .shop-lux-title { font-size: 13px !important; font-weight: 700 !important; color: #111 !important; letter-spacing: -0.01em !important; }
.shop-lux-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #17a34a;
  background: #e8fff1;
  border: none;
  padding: 3px 8px;
  border-radius: 999px;
}
.shop-lux-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: shopLuxPulse 1.6s ease-out infinite;
}
@keyframes shopLuxPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.shop-lux-share { display: flex; flex-direction: column; gap: 6px; }
.shop-lux-share input {
  width: 100%;
  background: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #555 !important;
  box-shadow: inset 0 0 0 1px #ececf1 !important;
}
.shop-lux-share-row { display: flex; gap: 6px; }
.shop-lux-share-btn {
  cursor: pointer;
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #ececf1;
  background: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333;
  white-space: nowrap;
  transition: transform .15s;
}
.shop-lux-share-btn:hover { transform: translateY(-1px); }
.shop-lux-share-btn.primary {
  background: linear-gradient(135deg, #ff4f7d, #ff83a2);
  color: #fff;
  border-color: transparent;
}

/* CTA spacing */
.shop-lux-footer { padding-top: 4px; }

/* Shop Type + Visibility side-by-side 2-col row */
.shop-lux-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.shop-lux-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-lux-type-row .field-label { white-space: nowrap; flex-shrink: 0; }
.shop-lux-type-row .shop-lux-select { flex: 1; min-width: 0; }
.shop-lux-row2 .settings-section { margin-bottom: 0 !important; }
@media (max-width: 560px) {
  .shop-lux-row2 { grid-template-columns: 1fr; }
}


/* ===== My Shop top actions (luxury inspiration) ===== */
.shop-lux .inv-content {
  min-width: 0;
  padding-bottom: 12px;
}
.shop-lux .inv-toolbar {
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}
.shop-lux .top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.shop-lux .search-wrapper {
  flex: 1;
  min-width: 0;
  height: 48px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 79, 135, 0.14);
  border-radius: 18px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.shop-lux .search-wrapper:focus-within {
  border-color: rgba(255, 79, 135, 0.34);
  box-shadow: 0 0 0 4px rgba(255, 79, 135, 0.10), 0 12px 28px rgba(17, 17, 17, 0.07);
}
.shop-lux .search-icon { width: 18px; height: 18px; color: #aaa2ae; margin-right: 8px; flex-shrink: 0; }
.shop-lux .search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  min-width: 0;
}
.shop-lux .search-input::placeholder { color: #a49ca8; }
.shop-lux .filter-btn {
  position: relative;
  width: auto;
  min-width: 92px;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff4f87, #ff7da4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 79, 135, 0.32);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.shop-lux .filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255, 79, 135, 0.36);
}
.shop-lux .filter-btn.has-active::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
}
.shop-lux .filter-btn svg { width: 18px; height: 18px; }
.shop-lux .filter-btn-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.shop-lux .filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 6px;
  scrollbar-width: none;
}
.shop-lux .filters::-webkit-scrollbar { display: none; }
.shop-lux .chip {
  min-width: max-content;
  padding: 8px 13px;
  border: 1px solid rgba(255, 79, 135, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  color: #625d67;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.04);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s;
}
.shop-lux .chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 135, 0.22);
}
.shop-lux .chip.active {
  background: linear-gradient(135deg, #ff4f87, #ff7da4);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 79, 135, 0.28);
}
.shop-lux .view-toggle {
  padding: 4px;
  border: 1px solid rgba(255, 79, 135, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
}
.shop-lux .vt-btn {
  width: auto;
  min-width: 62px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #958d99;
  transition: background .15s, color .15s, transform .15s;
}
.shop-lux .vt-btn:hover {
  color: #1a1a1f;
  transform: translateY(-1px);
}
.shop-lux .vt-btn svg {
  width: 18px;
  height: 18px;
}
.shop-lux .vt-btn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.shop-lux .vt-btn.on {
  background: #fff1f6;
  color: #ff4f87;
}

/* ===== My Shop inventory cards (luxury inspiration) ===== */
.shop-lux .garment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .shop-lux .garment-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}
.shop-lux .garment-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: 0.25s ease;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.06);
  position: relative;
  cursor: pointer;
}
.shop-lux .garment-card.selected {
  border-color: rgba(255, 79, 135, 0.58);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(255, 79, 135, 0.18), 0 0 0 1px rgba(255, 79, 135, 0.10);
}
.shop-lux .garment-card .garment-photo {
  position: relative;
  height: clamp(156px, 34vw, 188px);
  overflow: hidden;
  background: linear-gradient(180deg, #fff8fb 0%, #f7f5f8 100%);
}
.shop-lux .garment-card .garment-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
}
.shop-lux .garment-card .select-tick.inline {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.94);
  color: #ff4f87;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: 0.2s;
}
.shop-lux .garment-card .select-tick.inline .select-tick-mark {
  font-size: 14px;
  line-height: 1;
}
.shop-lux .garment-card .select-tick.inline .select-tick-label {
  display: none;
}
.shop-lux .garment-card .select-tick.inline.on,
.shop-lux .garment-card.selected .select-tick.inline {
  background: #ff4f87;
  color: #ffffff;
}
.shop-lux .garment-card .photo-zoom-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #ff4f87;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: zoom-in;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .15s, box-shadow .15s;
}
.shop-lux .garment-card .photo-zoom-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.shop-lux .garment-card .photo-zoom-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.shop-lux .garment-card .garment-body { padding: 12px 13px 13px; }
.shop-lux .inv-actions { flex-wrap: wrap; }
.shop-lux .inv-thumb {
  background: linear-gradient(180deg, #fff8fb 0%, #f7f5f8 100%);
}
.shop-lux .inv-thumb img {
  object-fit: contain;
  padding: 4px;
}
.shop-lux .garment-card .garment-body h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111;
  letter-spacing: -0.01em;
}
.shop-lux .garment-card .garment-price {
  font-size: 15px;
  font-weight: 800;
  color: #ff4f87;
  margin: 4px 0 4px;
}
.shop-lux .garment-card .garment-cat {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 135, 0.10);
  background: #fff6fa;
  font-size: 11px;
  color: #7c6875;
  margin-top: 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-lux .garment-card .garment-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Floating bottom action bar */
.shop-lux-bulk-portal,
.shop-lux .bulk-bar {
  position: fixed;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 24px), 420px);
  max-width: calc(100vw - 24px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 79, 135, 0.14);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.15);
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  z-index: 100;
  animation: shopLuxBulkIn 0.25s ease;
  box-sizing: border-box;
  overflow: hidden;
}
@keyframes shopLuxBulkIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.shop-lux-bulk-portal .bulk-bar-row,
.shop-lux .bulk-bar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.bulk-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 34px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff4f87, #ff7da4);
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  box-shadow: 0 10px 18px rgba(255, 79, 135, 0.22);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.shop-lux-bulk-portal .bulk-bar-actions,
.shop-lux .bulk-bar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}
.shop-lux-bulk-portal .bulk-bar-actions .btn,
.shop-lux .bulk-bar-actions .btn {
  border: 1px solid transparent;
  background: #f7f5f8;
  border-radius: 13px;
  width: 58px;
  height: 52px;
  padding: 6px 4px;
  font-size: inherit;
  cursor: pointer;
  transition: 0.2s;
  color: #4a434d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 58px;
}
.shop-lux-bulk-portal .bulk-bar-actions .btn svg,
.shop-lux .bulk-bar-actions .btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.shop-lux-bulk-portal .bulk-btn-label,
.shop-lux .bulk-btn-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.01em;
}
.shop-lux-bulk-portal .bulk-bar-actions .btn.primary,
.shop-lux .bulk-bar-actions .btn.primary {
  background: linear-gradient(135deg, #ff4f87, #ff7da4);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 79, 135, 0.20);
}
.shop-lux-bulk-portal .bulk-bar-actions .btn.danger,
.shop-lux .bulk-bar-actions .btn.danger {
  color: #d63b57;
  background: #fff3f6;
  border-color: rgba(214, 59, 87, 0.14);
}
.shop-lux-bulk-portal .bulk-bar-actions .btn:hover:not(:disabled),
.shop-lux .bulk-bar-actions .btn:hover:not(:disabled) {
  background: #fff1f6;
  color: #ff4f87;
  border-color: rgba(255, 79, 135, 0.18);
  transform: translateY(-1px);
}
.shop-lux-bulk-portal .bulk-bar-actions .btn.danger:hover:not(:disabled),
.shop-lux .bulk-bar-actions .btn.danger:hover:not(:disabled) {
  background: #ffe7ee;
  color: #c92a47;
  border-color: rgba(201, 42, 71, 0.24);
}
.shop-lux-bulk-portal .bulk-bar-actions .btn.primary:hover:not(:disabled),
.shop-lux .bulk-bar-actions .btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff4f87, #ff7da4);
  color: #ffffff;
  border-color: transparent;
  filter: brightness(1.03);
}
.shop-lux-bulk-portal .bulk-bar-actions .btn:disabled,
.shop-lux .bulk-bar-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-lux-bulk-portal select,
.shop-lux .bulk-bar select {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid #ece8ef;
  background: #f8f7fa;
  padding: 8px 10px;
  font-size: 13px;
}

/* Inventory header (luxury inspiration) */
.shop-lux .inv-toolbar .eyebrow { display: none; }
.shop-lux .inv-toolbar .page-title.small {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: #111 !important;
}

/* Quick actions overlay (revealed when card selected) */
.shop-lux .garment-card .quick-actions {
  position: absolute;
  top: auto;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.16);
  opacity: 0;
  transform: translateY(8px);
  transition: 0.25s ease;
  pointer-events: none;
  z-index: 3;
}
.shop-lux .garment-card.selected .quick-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.shop-lux .garment-card .quick-actions .icon-btn {
  width: 52px;
  height: 48px;
  border: 1px solid rgba(236, 231, 239, 0.95);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 3px;
  color: #3f3943;
  transition: transform .15s;
}
.shop-lux .garment-card .quick-actions .icon-btn svg {
  width: 15px;
  height: 15px;
}
.shop-lux .garment-card .quick-actions .quick-action-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}
.shop-lux .garment-card .quick-actions .icon-btn:hover { transform: translateY(-1px); }

/* My Shop: single-column grid (no shop-side panel) */
.shop-dash-grid.single { grid-template-columns: minmax(0, 1fr); }
.shop-lux .shop-dash-grid { grid-template-columns: minmax(0, 1fr); }
.shop-lux .shop-main { gap: 16px; }

@media (max-width: 540px) {
  .shop-lux .inv-content {
    padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px));
  }
  .shop-lux .inv-toolbar .page-title.small {
    font-size: 22px !important;
  }
  .shop-lux .top-actions {
    gap: 8px;
  }
  .shop-lux .search-wrapper {
    height: 46px;
    border-radius: 16px;
    padding: 0 13px;
  }
  .shop-lux .filter-btn {
    min-width: 84px;
    height: 46px;
    border-radius: 15px;
    padding: 0 12px;
  }
  .shop-lux .view-toggle {
    padding: 3px;
    border-radius: 14px;
  }
  .shop-lux .vt-btn {
    min-width: 56px;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
  }
  .shop-lux .filters {
    gap: 6px;
    padding-top: 10px;
  }
  .shop-lux .chip {
    padding: 8px 12px;
    font-size: 12px;
  }
  .shop-lux .garment-grid {
    gap: 10px;
  }
  .shop-lux .garment-card {
    border-radius: 20px;
  }
  .shop-lux .garment-card .garment-photo {
    height: 156px;
  }
  .shop-lux .garment-card .garment-photo img {
    padding: 8px;
  }
  .shop-lux .garment-card .garment-body {
    padding: 10px 11px 12px;
  }
  .shop-lux .garment-card .photo-zoom-btn {
    top: 10px;
    right: 10px;
    bottom: auto;
    width: 30px;
    height: 30px;
    padding: 0;
  }
  .shop-lux .garment-card .quick-actions {
    right: 10px;
    bottom: 10px;
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
  }
  .shop-lux .garment-card .quick-actions .icon-btn {
    width: 46px;
    height: 44px;
    border-radius: 9px;
  }
  .shop-lux-bulk-portal,
  .shop-lux .bulk-bar {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 8px 10px;
    border-radius: 20px;
  }
  .bulk-count-pill {
    min-width: 84px;
    height: 32px;
    padding: 0 12px;
  }
  .shop-lux-bulk-portal .bulk-bar-actions .btn,
  .shop-lux .bulk-bar-actions .btn {
    width: 54px;
    height: 48px;
    flex-basis: 54px;
  }
}

/* ==========  Shop card v2 (banner + logo circle, inspiration-driven)  ========== */
.shop-grid:has(.shop-card-v2) {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .shop-grid:has(.shop-card-v2) {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}
.shop-card.shop-card-v2 {
  padding: 0 !important;
  border-radius: 22px;
  border: 1px solid #f1f1f3;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.shop-card.shop-card-v2::before { display: none; }
.shop-card.shop-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  border-color: #ececef;
}
.scv2-banner {
  position: relative;
  height: 84px;
  background: linear-gradient(135deg, #ff6a88, #ff99ac);
}
.scv2-banner.cat-garment,
.scv2-banner.cat-fashion { background: linear-gradient(135deg, #ff6a88, #c44dff); }
.scv2-banner.cat-hair { background: linear-gradient(135deg, #f6a86b, #e85d75); }
.scv2-banner.cat-tattoo { background: linear-gradient(135deg, #2c2c34, #6a6a78); }
.scv2-banner.cat-jewelry { background: linear-gradient(135deg, #f6b73c, #f3904f); }
.scv2-banner.cat-eyewear { background: linear-gradient(135deg, #5b86e5, #36d1dc); }
.scv2-banner.cat-makeup { background: linear-gradient(135deg, #ff6b9d, #c44569); }
.scv2-banner.cat-footwear { background: linear-gradient(135deg, #5d6d7e, #34495e); }
.scv2-banner.cat-watch { background: linear-gradient(135deg, #1a1a2e, #4a4a6e); }
.scv2-banner.cat-bag { background: linear-gradient(135deg, #8b5a3c, #654321); }
.scv2-banner.cat-headwear { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }
.scv2-logo {
  position: absolute;
  bottom: -20px;
  left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #ff4d7e;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.scv2-content {
  padding: 30px 13px 13px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.scv2-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}
.scv2-name {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.scv2-cat {
  align-self: flex-start;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f5e9ff;
  color: #7c4dff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.scv2-cat.cat-garment,
.scv2-cat.cat-fashion { background: #ffe5ee; color: #ff4d7e; }
.scv2-cat.cat-hair { background: #fff0e5; color: #e85d75; }
.scv2-cat.cat-tattoo { background: #eaeaee; color: #2c2c34; }
.scv2-cat.cat-jewelry { background: #fff5db; color: #b08d2a; }
.scv2-cat.cat-eyewear { background: #e6f3ff; color: #357abd; }
.scv2-cat.cat-makeup { background: #ffe3ee; color: #c44569; }
.scv2-cat.cat-footwear { background: #e8ecf0; color: #34495e; }
.scv2-cat.cat-watch { background: #e6e6f0; color: #1a1a2e; }
.scv2-loc {
  font-size: 12px;
  color: #777;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scv2-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: #555;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.scv2-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f3f3f5;
}
.scv2-pieces {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.02em;
  text-transform: none;
}
.scv2-cta {
  font-size: 11px;
  font-weight: 700;
  color: #ff4d7e;
  letter-spacing: 0.02em;
}
.shop-card.shop-card-v2:hover .scv2-cta { color: #c44dff; }

/* ==========  Shop banner uploader (Shop Details page)  ========== */
.shop-banner-section { margin-bottom: 14px; }
.shop-banner-uploader {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 16px;
  border: 1.5px dashed #e5e5ea;
  background: #fafafb;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-banner-uploader:hover { border-color: #ff4d7e; }
.shop-banner-uploader.has-banner { border-style: solid; border-color: transparent; }
.shop-banner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #777;
  text-align: center;
  padding: 12px;
}
.shop-banner-empty strong { color: #222; font-size: 14px; font-weight: 700; }
.shop-banner-empty small { font-size: 12px; color: #999; }
.shop-banner-icon { font-size: 26px; margin-bottom: 4px; }
.shop-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 60%);
}
.shop-banner-btn {
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.shop-banner-btn:hover { background: #fff; }
.shop-banner-btn.danger { color: #d63b5b; }
.shop-banner-btn:disabled { opacity: .6; cursor: default; }

/* Shop grid banner image */
.scv2-banner.has-photo {
  background-size: cover !important;
  background-position: center !important;
}
.scv2-banner.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.15));
  pointer-events: none;
}

/* Buyer shop-detail share button */
.shop-detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.shop-detail-title-row .page-title { margin: 0; }
.shop-detail-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #ffd0de;
  background: linear-gradient(135deg, #ff4d7e 0%, #ff7aa1 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 77, 126, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.shop-detail-share:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 77, 126, 0.35);
}
.shop-detail-share:active { transform: translateY(0); }

/* Manage Shop inventory skeletons */
.garment-card.skeleton {
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.garment-card.skeleton .skel-photo {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s linear infinite;
}
.garment-card.skeleton .skel-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s linear infinite;
}
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


/* ============================================================
   Chat consistency pass — unify all sections of the chat screen
   (sidebar, shell, bubbles, avatars, scroll btn, drop overlay,
    attach preview, composer hint) with the v3 pink/glass palette
   ============================================================ */

/* ---- Shell + sidebar ---- */
.chat-shell { gap: 20px; }
.chat-side {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,45,111,0.1);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(255,45,111,0.06), 0 2px 8px rgba(20,20,50,0.04);
}
.agent-avatar {
  background: linear-gradient(135deg, #ff2d6f, #c44dff);
  box-shadow: 0 8px 20px rgba(255,45,111,0.3);
}
.profile-mini {
  background: linear-gradient(135deg, rgba(255,45,111,0.06), rgba(196,77,255,0.04));
  border: 1px solid rgba(255,45,111,0.12);
  border-radius: 16px;
}
.profile-mini img { border-radius: 12px; }

/* ---- Main chat panel shell ---- */
.chat-main {
  background: linear-gradient(180deg, #fff 0%, #fffafc 50%, #fff5f8 100%);
  border: 1px solid rgba(255,45,111,0.08);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(255,45,111,0.06), 0 2px 10px rgba(20,20,50,0.04);
}

/* ---- Chat list & scrollbar ---- */
.chat-list {
  padding: 22px clamp(16px, 3vw, 24px);
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,45,111,0.25) transparent;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,45,111,0.3), rgba(196,77,255,0.25));
  border-radius: 4px;
}
.chat-list::-webkit-scrollbar-track { background: transparent; }
.chat-list.drag-over { outline-color: #ff2d6f; }

/* ---- Bubble rows ---- */
.bubble-row { margin: 6px 0; gap: 10px; }
.msg-col { max-width: 76%; }

/* Avatars — unified small gradient/white style */
.msg-avatar {
  width: 30px; height: 30px;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(20,20,50,0.08);
}
.msg-avatar.assistant {
  background: linear-gradient(135deg, #ff2d6f, #c44dff);
  color: #fff;
}
.msg-avatar.user {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  color: #1d1d1f;
}

/* Bubbles — modernized */
.bubble {
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(20,20,50,0.04);
}
.bubble.user {
  background: linear-gradient(135deg, #ff2d6f 0%, #ff5b8f 60%, #c44dff 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 8px 20px rgba(255,45,111,0.25);
}
.bubble.assistant {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.06);
  border-bottom-left-radius: 6px;
  color: #1d1d1f;
}
.bubble.assistant.welcome {
  background: linear-gradient(135deg, rgba(255,45,111,0.06), rgba(196,77,255,0.04));
  border: 1px solid rgba(255,45,111,0.18);
  border-radius: 18px;
  border-left: none;
  padding: 14px 18px;
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-style: italic;
  color: #1d1d1f;
}
.bubble.image-only { box-shadow: none; }
.bubble-image {
  border-radius: 14px;
  max-height: 360px;
  box-shadow: 0 8px 22px rgba(20,20,50,0.1);
}
.bubble.typing {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.06);
  box-shadow: 0 4px 14px rgba(20,20,50,0.04);
}
.bubble.typing span { background: #ff2d6f; }
.bubble-text a { color: #ff2d6f; }
.bubble-text code {
  background: rgba(255,45,111,0.08);
  color: #1d1d1f;
}

/* Meta row */
.msg-meta { font-size: 11px; padding: 0 6px; }
.msg-time { color: #8a8a93; }
.msg-action { color: #6f7282; }
.msg-action:hover { color: #ff2d6f; opacity: 1; }

/* Upgrade hint (inside refining bubble) */
.upgrade-hint {
  margin-top: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255,45,111,0.08), rgba(196,77,255,0.06));
  border: 1px solid rgba(255,45,111,0.15);
  border-radius: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #1d1d1f;
}
.upgrade-hint-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,45,111,0.2);
  border-top-color: #ff2d6f;
}
.upgrade-hint-title { font-weight: 600; }

/* ---- Drop overlay — pink theme ---- */
.drop-overlay {
  background: rgba(255,45,111,0.08);
  border-color: #ff2d6f;
  color: #ff2d6f;
  border-radius: 18px;
  font-weight: 700;
}

/* ---- Composer attach preview — glass card ---- */
.composer-attach-preview {
  margin: 12px clamp(16px, 3vw, 24px) 0;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #ff2d6f;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(255,45,111,0.18);
  flex-shrink: 0;
  animation: capSlideIn 0.22s ease-out;
}
@keyframes capSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.composer-attach-preview img { border-radius: 10px; }
.cap-meta strong { color: #1d1d1f; }
.cap-meta small { color: #6f7282; opacity: 1; }
.cap-remove {
  background: rgba(255,45,111,0.08);
  color: #ff2d6f;
}
.cap-remove:hover { background: #ff2d6f; color: #fff; }

/* ---- Composer attach row: fixed above the pill (Gmail-style) ---- */
.composer-attach-row {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 196px);
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20,20,50,0.10), 0 2px 6px rgba(20,20,50,0.04);
  animation: capSlideIn 0.18s ease-out;
}
@media (min-width: 981px) {
  .composer-attach-row { bottom: calc(env(safe-area-inset-bottom, 0px) + 130px); }
}
.car-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f8;
}
.car-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.car-name {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car-size {
  font-size: 11px;
  color: #6f7282;
  margin-top: 2px;
}
.car-remove {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: rgba(20,20,50,0.06);
  color: #4a4a55;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.car-remove:hover { background: #ff2d6f; color: #fff; }

/* ---- Composer paddings unified ---- */
.composer.composer-pill {
  margin: 12px clamp(16px, 3vw, 24px) 0;
}
.composer-hint {
  padding: 8px clamp(16px, 3vw, 24px) 14px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-style: normal;
  font-family: inherit;
  color: #8a8a93;
  background: transparent;
}
.composer-hint em {
  font-style: normal;
  font-weight: 700;
  color: #ff2d6f;
}

/* ---- Mobile tweaks ---- */
@media (max-width: 720px) {
  .chat-shell { grid-template-columns: 1fr; }
  .chat-side { display: none; }
}
@media (max-width: 600px) {
  .chat-main { border-radius: 18px; }
  .chat-list { padding: 16px 14px; gap: 12px; }
  .bubble { padding: 10px 14px; font-size: 14px; }
  .msg-avatar { width: 26px; height: 26px; font-size: 11px; }
  .composer.composer-pill { margin: 10px 12px 0; }
  .composer-hint { padding: 6px 14px 12px; font-size: 10px; }
}


/* ============================================================
   Chat redesign — v4 (mockup-aligned)
   Hero stage with overlay chat, icon category tabs, heart on
   cards, purple-tinted AI rec card, composer sparkle
   ============================================================ */

/* ---- Chat-main is now sectioned: header / hero-stage (grows) / browse / ai-rec / composer ---- */
.chat-main {
  background: #fff;
  padding: 0;
}

/* Clear-chat icon button — top-right of chat-main */
.chat-clear-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #555;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.chat-clear-btn:hover {
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.35);
  background: #fff;
}
.chat-clear-btn:active { transform: scale(0.96); }
.chat-main { position: relative; }

/* ---- HERO STAGE — chat overlay area (no background image) ---- */
.hero-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
  background: #fff;
}
.hero-stage::before { content: none; }
.hero-stage-placeholder { display: none; }

/* Chat overlay on hero — was chat-list, now absolutely positioned */
.chat-list.overlay {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(70%, 360px);
  z-index: 2;
  padding: 14px 12px 14px 14px;
  gap: 8px;
  overflow-y: auto;
  background: transparent;
  border: none;
  scrollbar-width: none;
}
.chat-list.overlay::-webkit-scrollbar { display: none; }

/* Bubble rows inside hero overlay — smaller, glassier */
.chat-list.overlay .bubble-row { margin: 4px 0; gap: 6px; }
.chat-list.overlay .msg-col { max-width: 100%; }
.chat-list.overlay .msg-avatar {
  width: 28px; height: 28px;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(20,20,50,0.15);
  border: 2px solid #fff;
}
.chat-list.overlay .bubble {
  font-size: 13px;
  padding: 9px 13px;
  max-width: 100%;
  box-shadow: 0 6px 18px rgba(20,20,50,0.12);
}
.chat-list.overlay .bubble.assistant {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.5);
  color: #1d1d1f;
}
.chat-list.overlay .bubble.user {
  background: linear-gradient(135deg, #a78bfa 0%, #7c5cff 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(124,92,255,0.35);
}
.chat-list.overlay .bubble.welcome {
  font-size: 13px;
  padding: 9px 13px;
  font-style: normal;
  font-family: inherit;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.5);
}
.chat-list.overlay .bubble-image { max-height: 200px; }
.chat-list.overlay .msg-meta { display: none; }

/* Drop overlay positioned for hero context */
.chat-list.overlay .drop-overlay { inset: 8px; }

/* ---- Composer — sparkle prefix, purple gradient send ---- */
.composer.composer-pill {
  margin: 10px clamp(14px, 3vw, 22px) 6px;
  padding: 6px 6px 6px 14px;
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20,20,50,0.05);
}
.composer.composer-pill:focus-within {
  border-color: rgba(124,92,255,0.35);
  box-shadow: 0 8px 20px rgba(124,92,255,0.15);
}
.composer.composer-pill .composer-attach {
  width: 34px; height: 34px;
  background: transparent;
  color: #8a8a93;
}
.composer.composer-pill .composer-attach:hover { background: #f3e8ff; color: #7c5cff; }
.composer.composer-pill textarea { font-size: 14px; }
.composer.composer-pill textarea::placeholder { color: #b0aebe; }
.composer.composer-pill .composer-send {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #a78bfa 0%, #7c5cff 100%);
  box-shadow: 0 6px 14px rgba(124,92,255,0.4);
}
.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #9d7df9 0%, #6a47ff 100%);
  box-shadow: 0 10px 20px rgba(124,92,255,0.5);
}
.composer-hint { display: none; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .chat-shell { grid-template-columns: 1fr; }
  .chat-side { display: none; }
  .hero-stage { min-height: 360px; }
  .chat-list.overlay { width: 68%; max-width: 280px; }
}
@media (max-width: 480px) {
  .hero-stage { min-height: 340px; }
  .chat-list.overlay { width: 72%; padding: 12px 8px 12px 10px; }
  .chat-list.overlay .bubble { font-size: 12.5px; padding: 8px 11px; }
  .chat-list.overlay .msg-avatar { width: 26px; height: 26px; font-size: 10px; }
  .composer.composer-pill { margin: 8px 12px 6px; padding: 4px 4px 4px 12px; }
}


/* ---- Full-screen chat (header removed) ---- */
.screen:has(.chat-shell) { padding-bottom: 0; padding-top: 0; }
.chat-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  gap: 0;
  padding: 0;
}
.chat-main {
  border-radius: 0;
  border: none;
  box-shadow: none;
  height: 100vh;
  min-height: 100vh;
}
@media (max-width: 720px) {
  .chat-shell { grid-template-columns: 1fr; }
}

/* ---- Chat overlay: full width now that hero has no image ---- */
.chat-list.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 16px 20px 24px;
  background: transparent;
  z-index: 2;
  overflow-y: auto;
}

/* =====================================================
   PROFESSIONAL POLISH — chat overlay refinements
   ===================================================== */

/* Hide user avatars — modern chat UIs (Claude/ChatGPT) don't show them */
.chat-list.overlay .bubble-row.user .msg-avatar.user { display: none; }

/* Smaller, neutral assistant avatar */
.chat-list.overlay .msg-avatar.assistant {
  width: 28px; height: 28px;
  font-size: 12px; font-weight: 600;
  background: #1d1d1f;
  color: #fff;
  border: none;
  box-shadow: none;
}

/* Refined bubble spacing & typography */
.chat-list.overlay { padding: 18px 16px 28px; gap: 4px; }
.chat-list.overlay .bubble-row { margin: 4px 0; gap: 10px; align-items: flex-start; }
.chat-list.overlay .msg-col { max-width: 78%; }

/* Assistant bubble — cleaner card */
.chat-list.overlay .bubble.assistant {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  box-shadow: 0 1px 2px rgba(20,20,50,0.04);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #1d1d1f;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* User bubble — refined purple, right-aligned, no avatar gap */
.chat-list.overlay .bubble.user {
  background: #7c5cff;
  color: #fff;
  border: none;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(124,92,255,0.18);
}

/* Image-only user bubble: just show the image, no purple bg */
.chat-list.overlay .bubble.user.image-only {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.chat-list.overlay .bubble.user.image-only .bubble-image {
  border-radius: 14px;
  max-height: 240px;
  box-shadow: 0 2px 8px rgba(20,20,50,0.12);
}

/* Welcome bubble */
.chat-list.overlay .bubble.welcome {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  color: #1d1d1f;
}

/* Bubble images — crisp rounded */
.chat-list.overlay .bubble-image {
  border-radius: 10px;
  max-height: 260px;
  margin-top: 8px;
}
.chat-list.overlay .bubble.assistant .bubble-image:first-child { margin-top: 0; }

/* Tighter row spacing on mobile */
@media (max-width: 720px) {
  .chat-list.overlay { padding: 14px 12px 24px; }
  .chat-list.overlay .msg-col { max-width: 84%; }
  .chat-list.overlay .bubble.assistant,
  .chat-list.overlay .bubble.user { font-size: 14px; }
}

/* ---- Fix: leave room for bottom nav so composer is visible ---- */
.chat-main { height: 100vh; min-height: 100vh; }
@media (max-width: 720px) {
  .chat-main {
    height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px));
    min-height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px));
  }
}
/* Ensure composer is always visible (not pushed off by hero flex) */
.composer { flex-shrink: 0; }

/* ---- Fix v2: composer visibility — use dynamic vh & restore bottom padding ---- */
.chat-main {
  height: auto !important;
  min-height: 0 !important;
  /* Let the natural document flow place us between topbar and bottom nav */
}
.chat-shell { min-height: calc(100dvh - 80px); }
@media (max-width: 720px) {
  .screen:has(.chat-shell) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .chat-shell { min-height: calc(100dvh - 80px - 64px); }
  .hero-stage { max-height: calc(100dvh - 80px - 64px - 120px); }
}
.composer, .composer-pill { flex-shrink: 0; position: relative; z-index: 5; }

/* Combined try-on result overlay (shop page, multi-select) */
.combined-result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 14, 25, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: combined-fade-in 180ms ease-out;
}
@keyframes combined-fade-in { from { opacity: 0; } to { opacity: 1; } }
.combined-result-card {
  background: #fff;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 20px 20px 24px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: combined-pop 200ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes combined-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.combined-result-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50%;
}
.combined-result-close:hover { background: #f1f1f4; color: #000; }
.combined-result-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
}
.combined-result-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1730;
  margin-bottom: 4px;
}
.combined-result-subtitle {
  font-size: 13px;
  color: #6b6884;
  margin-bottom: 14px;
  line-height: 1.4;
}
.combined-result-body {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f4f9;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.combined-result-body img {
  width: 100%;
  height: auto;
  display: block;
}
.combined-result-body .upgrade-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(20,18,40,0.78);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.combined-result-body .upgrade-hint-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   Shop Detail v2 — buyer view (pink brand, mockup-aligned)
   Scoped under .shop-detail-v2 so it cannot affect other pages.
   ============================================================ */
.shop-detail-v2 {
  --sdv2-pink: #ec4778;
  --sdv2-pink-dark: #d63864;
  --sdv2-pink-soft: #ffe8ef;
  --sdv2-ink: #1a1730;
  --sdv2-ink-soft: #6b6884;
  --sdv2-bg: #f7f6fb;
  --sdv2-border: #eceaf3;
  --sdv2-radius: 16px;
  background: var(--sdv2-bg);
}
.shop-detail-v2 .sdv2-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 14px 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Search bar ---- */
.shop-detail-v2 .sdv2-search {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--sdv2-border);
  border-radius: 14px;
  padding: 4px 6px 4px 14px;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(20, 18, 40, 0.04);
}
.shop-detail-v2 .sdv2-search-icon { color: var(--sdv2-ink-soft); flex-shrink: 0; }
.shop-detail-v2 .sdv2-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--sdv2-ink);
  padding: 12px 0;
}
.shop-detail-v2 .sdv2-search input::placeholder { color: #a5a2bb; }
.shop-detail-v2 .sdv2-search-photo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--sdv2-border);
  background: #fff;
  color: var(--sdv2-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.shop-detail-v2 .sdv2-search-photo:hover { background: #f5f4f9; }

/* ---- Shop hero card ---- */
.shop-detail-v2 .sdv2-shop-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--sdv2-border);
  border-radius: var(--sdv2-radius);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(20, 18, 40, 0.04);
  overflow: hidden;
}
.shop-detail-v2 .sdv2-shop-card-main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.shop-detail-v2 .sdv2-shop-logo {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--sdv2-pink), var(--sdv2-pink-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 700;
  font-family: 'Georgia', serif;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(236, 71, 120, 0.35);
}
.shop-detail-v2 .sdv2-shop-info { flex: 1; min-width: 0; }
.shop-detail-v2 .sdv2-shop-eyebrow {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--sdv2-pink);
  margin-bottom: 4px;
}
.shop-detail-v2 .sdv2-shop-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.shop-detail-v2 .sdv2-shop-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--sdv2-ink);
  margin: 0;
  line-height: 1.2;
}
.shop-detail-v2 .sdv2-shop-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sdv2-pink);
  background: #fff;
  color: var(--sdv2-pink);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.shop-detail-v2 .sdv2-shop-share:hover { background: var(--sdv2-pink-soft); }
.shop-detail-v2 .sdv2-shop-addr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--sdv2-ink-soft);
  margin-bottom: 10px;
  line-height: 1.45;
}
.shop-detail-v2 .sdv2-shop-addr svg { color: var(--sdv2-pink); margin-top: 2px; flex-shrink: 0; }
.shop-detail-v2 .sdv2-shop-addr a { color: inherit; text-decoration: none; }
.shop-detail-v2 .sdv2-shop-addr a:hover { color: var(--sdv2-pink); }
.shop-detail-v2 .sdv2-shop-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.shop-detail-v2 .sdv2-pill {
  background: #f5f4f9;
  color: var(--sdv2-ink);
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--sdv2-border);
}
.shop-detail-v2 .sdv2-shop-desc {
  font-size: 13.5px;
  color: var(--sdv2-ink-soft);
  margin: 0;
  line-height: 1.5;
  max-width: 60%;
}
.shop-detail-v2 .sdv2-shop-deco {
  position: absolute;
  right: 10px;
  bottom: 6px;
  width: 130px;
  height: 100px;
  color: var(--sdv2-pink);
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Big category icons row ---- */
.shop-detail-v2 .sdv2-cat-icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.shop-detail-v2 .sdv2-cat-icon {
  background: #fff;
  border: 1px solid var(--sdv2-border);
  border-radius: 14px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--sdv2-ink);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.shop-detail-v2 .sdv2-cat-icon:hover { background: #fafaff; }
.shop-detail-v2 .sdv2-cat-icon.on {
  background: var(--sdv2-pink-soft);
  border-color: var(--sdv2-pink);
  color: var(--sdv2-pink);
}
.shop-detail-v2 .sdv2-cat-icon-glyph {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shop-detail-v2 .sdv2-cat-icon-glyph svg { width: 100%; height: 100%; }
.shop-detail-v2 .sdv2-cat-icon-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--sdv2-ink-soft);
}
.shop-detail-v2 .sdv2-cat-icon.on .sdv2-cat-icon-label { color: var(--sdv2-pink); font-weight: 600; }

/* ---- Sub-filter pill row + Filter button ---- */
.shop-detail-v2 .sdv2-subfilter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.shop-detail-v2 .sdv2-subfilter-sub { margin-top: -4px; }
.shop-detail-v2 .sdv2-pill-row {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.shop-detail-v2 .sdv2-pill-row::-webkit-scrollbar { display: none; }
.shop-detail-v2 .sdv2-fpill {
  background: #fff;
  border: 1px solid var(--sdv2-border);
  color: var(--sdv2-ink);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shop-detail-v2 .sdv2-fpill:hover { background: #f5f4f9; }
.shop-detail-v2 .sdv2-fpill.on {
  background: #111;
  color: #fff;
  border-color: #111;
}
.shop-detail-v2 .sdv2-fpill.small { padding: 6px 12px; font-size: 12.5px; }
.shop-detail-v2 .sdv2-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--sdv2-border);
  color: var(--sdv2-ink);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.shop-detail-v2 .sdv2-filter-btn:hover { background: #f5f4f9; }

/* ---- Product grid ---- */
.shop-detail-v2 .sdv2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}
@media (min-width: 600px)  { .shop-detail-v2 .sdv2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .shop-detail-v2 .sdv2-grid { grid-template-columns: repeat(4, 1fr); } }
.shop-detail-v2 .sdv2-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--sdv2-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.shop-detail-v2 .sdv2-card:hover { box-shadow: 0 6px 18px rgba(20, 18, 40, 0.08); }
.shop-detail-v2 .sdv2-card.selected {
  border-color: var(--sdv2-pink);
  box-shadow: 0 0 0 2px rgba(236, 71, 120, 0.18);
}
.shop-detail-v2 .sdv2-card-heart {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.shop-detail-v2 .sdv2-card-heart:hover { color: var(--sdv2-pink); }
.shop-detail-v2 .sdv2-card-zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 14, 23, 0.72);
  border: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.shop-detail-v2 .sdv2-card-zoom:hover { background: rgba(15, 14, 23, 0.9); }

/* Thumbs up / down feedback on generated try-on images */
.img-fb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.img-fb-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  padding: 0;
}
.img-fb-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.img-fb-btn:disabled { opacity: 0.6; cursor: default; }
.img-fb-btn.up.on { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.img-fb-btn.down.on { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }

/* Compact variant: overlay corner on a flip/grid card */
.img-fb.compact {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 4;
  gap: 4px;
}
.img-fb.compact .img-fb-btn {
  width: 26px;
  height: 26px;
  background: rgba(15, 14, 23, 0.6);
  color: #fff;
  border-color: transparent;
  backdrop-filter: blur(4px);
}
.img-fb.compact .img-fb-btn:hover:not(:disabled) { background: rgba(15, 14, 23, 0.85); }
.img-fb.compact .img-fb-btn.up.on { background: #047857; color: #fff; }
.img-fb.compact .img-fb-btn.down.on { background: #b91c1c; color: #fff; }

/* Inside chat bubble: small spacing under the image */
.bubble-image + .img-fb { margin-top: 6px; }
/* Inside MyLooks meta row: align to the right */
.look-meta .img-fb { margin-left: auto; }
.look-meta { display: flex; align-items: center; gap: 8px; }

.shop-detail-v2 .sdv2-card-select {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #cfcde0;
  color: transparent;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.shop-detail-v2 .sdv2-card-select.on {
  background: var(--sdv2-pink);
  border-color: var(--sdv2-pink);
  color: #fff;
}
.shop-detail-v2 .sdv2-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f5f4f9;
  overflow: hidden;
  cursor: pointer;
}
.shop-detail-v2 .sdv2-card-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-detail-v2 .sdv2-card-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-detail-v2 .sdv2-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sdv2-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-detail-v2 .sdv2-card-title-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--sdv2-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
  display: block;
}
.shop-detail-v2 .sdv2-card-title-link:hover,
.shop-detail-v2 .sdv2-card-title-link:focus-visible {
  color: var(--sdv2-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.shop-detail-v2 .sdv2-card-sub {
  font-size: 12.5px;
  color: var(--sdv2-ink-soft);
}
.shop-detail-v2 .sdv2-card-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--sdv2-pink);
  margin-top: 2px;
}

.shop-detail-v2 .sdv2-tailor-picker {
  display: grid;
  gap: 22px;
}
.shop-detail-v2 .sdv2-tailor-section {
  display: grid;
  gap: 14px;
}
.shop-detail-v2 .sdv2-tailor-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.shop-detail-v2 .sdv2-tailor-section-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--sdv2-ink);
}
.shop-detail-v2 .sdv2-tailor-section-count {
  flex: 0 0 auto;
  color: var(--sdv2-pink);
  font-size: 15px;
  font-weight: 700;
}
.shop-detail-v2 .sdv2-tailor-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 1px 6px;
  scroll-snap-type: x proximity;
}
.shop-detail-v2 .sdv2-tailor-rail::-webkit-scrollbar {
  height: 6px;
}
.shop-detail-v2 .sdv2-tailor-rail::-webkit-scrollbar-thumb {
  background: rgba(20, 18, 40, 0.12);
  border-radius: 999px;
}
.shop-detail-v2 .sdv2-tailor-card {
  position: relative;
  flex: 0 0 clamp(168px, 42vw, 188px);
  background: #fff;
  border: 2px solid transparent;
  border-radius: 26px;
  padding: 0;
  box-shadow: 0 14px 34px rgba(20, 18, 40, 0.08);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.shop-detail-v2 .sdv2-tailor-card:hover {
  transform: translateY(-2px);
}
.shop-detail-v2 .sdv2-tailor-card.on {
  border-color: var(--sdv2-pink);
  box-shadow: 0 18px 38px rgba(236, 71, 120, 0.16);
}
.shop-detail-v2 .sdv2-tailor-card.design {
  flex-basis: clamp(140px, 39vw, 168px);
}
.shop-detail-v2 .sdv2-tailor-card.fabric {
  flex-basis: clamp(140px, 39vw, 168px);
  border-radius: 24px;
}
.shop-detail-v2 .sdv2-tailor-rail.designs.single {
  overflow-x: visible;
}
.shop-detail-v2 .sdv2-tailor-rail.designs.single .sdv2-tailor-card.design {
  flex-basis: clamp(140px, 39vw, 168px);
}
.shop-detail-v2 .sdv2-tailor-rail.fabrics.roomy {
  overflow-x: visible;
}
.shop-detail-v2 .sdv2-tailor-rail.fabrics.roomy .sdv2-tailor-card.fabric {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
}
.shop-detail-v2 .sdv2-tailor-card-media-wrap {
  position: relative;
}
.shop-detail-v2 .sdv2-tailor-card-media {
  position: relative;
  overflow: hidden;
  background: #f3f0ea;
}
.shop-detail-v2 .sdv2-tailor-card.design .sdv2-tailor-card-media {
  aspect-ratio: 4 / 5;
  border-radius: 24px 24px 0 0;
}
.shop-detail-v2 .sdv2-tailor-card.fabric .sdv2-tailor-card-media {
  aspect-ratio: 1 / 1;
  margin: 12px 12px 0;
  border-radius: 18px;
}
.shop-detail-v2 .sdv2-tailor-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-detail-v2 .sdv2-tailor-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  display: grid;
  place-items: center;
  padding: 10px;
}
.shop-detail-v2 .sdv2-tailor-card-overlay.error {
  align-items: end;
  background: linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
}
.shop-detail-v2 .sdv2-tailor-card-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 999px;
  background: rgba(20, 18, 40, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
}
.shop-detail-v2 .sdv2-tailor-card-chip.selected {
  background: var(--sdv2-pink);
}
.shop-detail-v2 .sdv2-tailor-card-body {
  padding: 14px 14px 16px;
}
.shop-detail-v2 .sdv2-tailor-card.fabric .sdv2-tailor-card-body {
  padding-top: 12px;
}
.shop-detail-v2 .sdv2-tailor-card-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sdv2-ink);
}
.shop-detail-v2 .sdv2-tailor-card-subtitle {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--sdv2-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Sticky bottom action panel ---- */
.shop-detail-v2 .sdv2-action-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 64px; /* sits above bottom-nav */
  background: #fff;
  border-top: 1px solid var(--sdv2-border);
  box-shadow: 0 -8px 24px rgba(20, 18, 40, 0.08);
  padding: 14px 14px 12px;
  z-index: 50;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  animation: sdv2-slide-up 220ms ease-out;
}
@keyframes sdv2-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.shop-detail-v2 .sdv2-action-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .shop-detail-v2 .sdv2-action-grid {
    grid-template-columns: auto 1fr;
  }
  .shop-detail-v2 .sdv2-action-buttons {
    grid-column: 1 / -1;
  }
}
.shop-detail-v2 .sdv2-action-label {
  font-size: 12px;
  color: var(--sdv2-ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.shop-detail-v2 .sdv2-photo-upload,
.shop-detail-v2 .sdv2-photo-tile {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--sdv2-pink-soft);
  border: 1.5px dashed var(--sdv2-pink);
  color: var(--sdv2-pink);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  overflow: hidden;
}
.shop-detail-v2 .sdv2-photo-upload-plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sdv2-pink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.shop-detail-v2 .sdv2-photo-tile {
  border-style: solid;
  padding: 0;
}
.shop-detail-v2 .sdv2-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-detail-v2 .sdv2-action-thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 88px;
  overflow-y: auto;
}
.shop-detail-v2 .sdv2-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f4f9;
  border: 1px solid var(--sdv2-border);
}
.shop-detail-v2 .sdv2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-detail-v2 .sdv2-thumb-x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sdv2-pink);
  color: #fff;
  border: 1.5px solid #fff;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.shop-detail-v2 .sdv2-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
}
.shop-detail-v2 .sdv2-btn-primary,
.shop-detail-v2 .sdv2-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s;
}
.shop-detail-v2 .sdv2-btn-primary {
  background: linear-gradient(135deg, var(--sdv2-pink), #f06a92);
  color: #fff;
  box-shadow: 0 4px 14px rgba(236, 71, 120, 0.4);
}
.shop-detail-v2 .sdv2-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.shop-detail-v2 .sdv2-btn-primary:disabled {
  background: #f0bccd;
  cursor: not-allowed;
  box-shadow: none;
}
.shop-detail-v2 .sdv2-btn-secondary {
  background: #fff;
  border-color: var(--sdv2-border);
  color: var(--sdv2-ink);
}
.shop-detail-v2 .sdv2-btn-secondary:hover:not(:disabled) { background: #fafaff; }
.shop-detail-v2 .sdv2-btn-primary span,
.shop-detail-v2 .sdv2-btn-secondary span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.shop-detail-v2 .sdv2-btn-primary strong,
.shop-detail-v2 .sdv2-btn-secondary strong {
  font-size: 13.5px;
  font-weight: 700;
}
.shop-detail-v2 .sdv2-btn-primary small,
.shop-detail-v2 .sdv2-btn-secondary small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}
.shop-detail-v2 .sdv2-action-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--sdv2-pink);
  text-align: center;
  font-weight: 500;
}

/* Mobile tweaks */
@media (max-width: 540px) {
  .shop-detail-v2 .sdv2-shop-logo { width: 76px; height: 76px; font-size: 40px; border-radius: 14px; }
  .shop-detail-v2 .sdv2-shop-name { font-size: 18px; }
  .shop-detail-v2 .sdv2-shop-desc { max-width: 100%; }
  .shop-detail-v2 .sdv2-shop-deco { width: 90px; height: 70px; opacity: 0.3; }
  .shop-detail-v2 .sdv2-cat-icon { padding: 10px 4px 8px; }
  .shop-detail-v2 .sdv2-cat-icon-label { font-size: 11px; }
}


/* Shop card compact / expand toggle */
.shop-detail-v2 .sdv2-shop-card.compact { padding: 10px 12px; }
.shop-detail-v2 .sdv2-shop-card.compact .sdv2-shop-logo {
  width: 48px; height: 48px; font-size: 26px; border-radius: 12px;
  box-shadow: 0 3px 10px rgba(236, 71, 120, 0.3);
}
.shop-detail-v2 .sdv2-shop-card.compact .sdv2-shop-card-main { gap: 12px; align-items: center; }
.shop-detail-v2 .sdv2-shop-card.compact .sdv2-shop-eyebrow { font-size: 9.5px; margin-bottom: 1px; }
.shop-detail-v2 .sdv2-shop-card.compact .sdv2-shop-name { font-size: 16px; }
.shop-detail-v2 .sdv2-shop-card.compact .sdv2-shop-name-row { margin-bottom: 2px; }
.shop-detail-v2 .sdv2-shop-card.compact .sdv2-shop-share { padding: 4px 10px; font-size: 12px; }
.shop-detail-v2 .sdv2-shop-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--sdv2-pink);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
  margin-top: 2px;
}
.shop-detail-v2 .sdv2-shop-more:hover { text-decoration: underline; }
.shop-detail-v2 .sdv2-shop-card.expanded .sdv2-shop-more { margin-top: 8px; }


/* Compact floating action bar (replaces full bottom panel) */
.shop-detail-v2 .sdv2-fab-bar {
  position: fixed;
  left: 50%;
  bottom: 80px; /* above bottom-nav */
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--sdv2-border);
  box-shadow: 0 12px 32px rgba(20, 18, 40, 0.18);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  z-index: 60;
  animation: sdv2-fab-pop 200ms cubic-bezier(.2,.9,.3,1.2);
  max-width: calc(100% - 24px);
}
.shop-detail-v2 .sdv2-fab-bar.tailor {
  gap: 10px;
  padding-right: 10px;
}
@keyframes sdv2-fab-pop { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.shop-detail-v2 .sdv2-fab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--sdv2-pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
}
.shop-detail-v2 .sdv2-fab-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--sdv2-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(42vw, 280px);
}
.shop-detail-v2 .sdv2-fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, background 0.15s;
}
.shop-detail-v2 .sdv2-fab-btn.primary {
  background: linear-gradient(135deg, var(--sdv2-pink), #f06a92);
  color: #fff;
  box-shadow: 0 4px 12px rgba(236, 71, 120, 0.35);
}
.shop-detail-v2 .sdv2-fab-btn.primary:hover:not(:disabled) { filter: brightness(1.05); }
.shop-detail-v2 .sdv2-fab-btn.primary:disabled { background: #f0bccd; cursor: not-allowed; box-shadow: none; }
.shop-detail-v2 .sdv2-fab-btn.secondary {
  background: #f5f4f9;
  color: var(--sdv2-ink);
  border-color: var(--sdv2-border);
}
.shop-detail-v2 .sdv2-fab-btn.secondary:hover:not(:disabled) { background: #ebe9f3; }
.shop-detail-v2 .sdv2-fab-btn.secondary:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 480px) {
  .shop-detail-v2 .sdv2-tailor-section-head h3 { font-size: 18px; }
  .shop-detail-v2 .sdv2-tailor-section-count { font-size: 14px; }
  .shop-detail-v2 .sdv2-tailor-rail { gap: 14px; }
  .shop-detail-v2 .sdv2-tailor-card.design { flex-basis: min(44vw, 162px); }
  .shop-detail-v2 .sdv2-tailor-card.fabric { flex-basis: min(44vw, 162px); }
  .shop-detail-v2 .sdv2-tailor-rail.designs.single .sdv2-tailor-card.design { flex-basis: min(44vw, 162px); }
  .shop-detail-v2 .sdv2-fab-bar { padding: 6px 6px 6px 10px; gap: 6px; }
  .shop-detail-v2 .sdv2-fab-meta { display: none; }
  .shop-detail-v2 .sdv2-fab-btn { padding: 7px 11px; font-size: 12px; }
}


.chat-load-more { display: flex; justify-content: center; padding: 6px 0 10px; }
.chat-load-more-hint { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, rgba(255,255,255,0.55)); opacity: 0.75; }



/* ============================================================
   Chat spacing polish � tighter, more breathable, mobile-first
   ============================================================ */
.chat-list.overlay {
  padding: 20px 14px 28px;
  gap: 14px;
}
.bubble-row {
  margin: 0;
  gap: 8px;
  align-items: flex-end;
}
.chat-list.overlay .bubble-row + .bubble-row { margin-top: 2px; }
/* Tighter stacking when the same role speaks twice in a row */
.bubble-row.assistant + .bubble-row.assistant,
.bubble-row.user + .bubble-row.user {
  margin-top: -4px;
}

.msg-col { max-width: 82%; gap: 2px; }
.bubble {
  padding: 12px 16px;
  border-radius: 20px;
  line-height: 1.5;
  font-size: 15px;
}
.bubble.user {
  border-bottom-right-radius: 6px;
}
.bubble.assistant {
  border-bottom-left-radius: 6px;
}
.bubble.image-only { padding: 4px; }
.bubble-image { margin-top: 4px; border-radius: 16px; }
.bubble.image-only .bubble-image { margin-top: 0; }

.msg-avatar { width: 28px; height: 28px; font-size: 0.78rem; }
.msg-meta { padding: 2px 6px 0; font-size: 0.7rem; }

.chat-load-more { padding: 4px 0 10px; }

@media (max-width: 480px) {
  .chat-list.overlay { padding: 14px 10px 20px; gap: 12px; }
  .msg-col { max-width: 86%; }
  .bubble { padding: 11px 14px; font-size: 14.5px; }
}


/* ============================================================
   Instagram + Airbnb redesign override
   Clean white surfaces, social gradients, softer premium chrome
   ============================================================ */
:root {
  --bg: #fafafa;
  --bg-2: #ffffff;
  --paper: #ffffff;
  --paper-2: #f7f7f8;
  --card: #ffffff;
  --surface-soft: #f4f4f6;
  --surface-strong: #ededf1;

  --ink: #222222;
  --ink-soft: #444444;
  --muted: #6f7282;
  --muted-soft: #9aa0aa;

  --line: rgba(20, 20, 50, 0.08);
  --line-soft: rgba(20, 20, 50, 0.05);
  --line-strong: rgba(20, 20, 50, 0.14);

  --accent: #ff385c;
  --accent-active: #e11d48;
  --accent-disabled: #ffd1da;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(255, 56, 92, 0.10);
  --gold: #ff8e53;
  --grad: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 42%, #ff4d8d 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 107, 107, 0.12), rgba(255, 142, 83, 0.10), rgba(255, 77, 141, 0.08));

  --shadow-sm: 0 12px 28px rgba(20, 20, 50, 0.06), 0 2px 8px rgba(20, 20, 50, 0.04);
  --shadow-md: 0 22px 48px rgba(20, 20, 50, 0.10), 0 6px 16px rgba(20, 20, 50, 0.06);

  --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.98));
  --surface-panel-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 250, 0.96));
  --surface-panel-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 251, 0.98));
  --surface-flat: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.84);
  --surface-glass-soft: rgba(255, 255, 255, 0.82);
  --surface-flat-strong: rgba(255, 255, 255, 0.96);
  --border-subtle: 1px solid rgba(20, 20, 50, 0.08);
  --border-strong: 1px solid rgba(20, 20, 50, 0.10);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --surface-radius: 24px;
  --surface-radius-lg: 28px;
  --control-radius: 16px;
  --tint-soft: rgba(255, 56, 92, 0.06);
  --tint-active: rgba(255, 56, 92, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 107, 107, 0.14), transparent 24%),
    radial-gradient(circle at 100% 8%, rgba(255, 77, 141, 0.10), transparent 22%),
    radial-gradient(circle at 82% 100%, rgba(139, 92, 246, 0.08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 48%, #f7f7fb 100%);
  color: var(--ink);
}

body::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.92), transparent 18%);
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  right: -10vw;
  bottom: -12vh;
  width: min(42vw, 480px);
  height: min(42vw, 480px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 141, 0.16), rgba(139, 92, 246, 0.10) 45%, transparent 74%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

#root {
  position: relative;
  isolation: isolate;
}

.screen {
  padding: 32px clamp(20px, 5vw, 72px);
}

.page-wrap {
  max-width: 1280px;
  padding-bottom: 64px;
}

.page-head {
  margin: 12px 0 32px;
  gap: 20px;
}

.page-title,
.hero h1,
.welcome-card h1,
.login-heading {
  color: var(--ink);
  letter-spacing: -0.035em;
}

.page-title em,
.hero h1 em,
.welcome-card h1 em,
.login-heading em,
.looks-count-num,
.lux-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lede,
.wardrobe-sub,
.looks-subtitle,
.shop-desc,
.bubble-text,
.profile-card p,
.feature p {
  color: var(--ink-soft);
}

.topbar {
  top: 12px;
  max-width: 1280px;
  min-height: 74px;
  margin: 12px auto 28px;
  padding: 0 18px 0 22px;
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--surface-radius);
  box-shadow: 0 20px 40px rgba(20, 20, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.topbar .logo img,
.topbar .logo.small img {
  height: 54px;
}

.topnav,
.topbar .topnav {
  gap: 8px;
}

.navlink,
.topbar .navlink {
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.navlink:hover,
.topbar .navlink:hover {
  color: var(--ink);
  background: var(--tint-soft);
}

.navlink.active,
.topbar .navlink.active {
  color: var(--accent-active);
  background: var(--tint-active);
  box-shadow: inset 0 0 0 1px rgba(255, 56, 92, 0.12), 0 8px 18px rgba(20, 20, 50, 0.05);
}

.user-chip,
.user-menu,
.user-chip:has(.user-menu-v2),
.user-chip.open:has(.user-menu-v2) {
  background: var(--surface-glass-soft);
  border-color: rgba(20, 20, 50, 0.10);
  box-shadow: 0 10px 24px rgba(20, 20, 50, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.user-chip-btn:hover,
.user-chip:has(.user-menu-v2) .user-chip-btn:hover {
  background: var(--tint-soft);
}

.user-chip .avatar,
.agent-avatar,
.shop-avatar,
.msg-avatar.assistant,
.shop-detail-v2 .sdv2-shop-logo,
.wardrobe-upload-icon,
.wardrobe-cats-spark {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 77, 141, 0.24);
}

.login-card,
.welcome-card,
.profile-card,
.host-card,
.shop-card,
.garment-card,
.look-card,
.tryon-card,
.choose-card,
.set-card,
.sset-card,
.tile-card,
.help-drawer,
.help-contact,
.dropzone,
.dz,
.shop-hero,
.shop-detail-hero,
.tryon-frame,
.shop-onboard,
.welcome-grid > *,
.lstat,
.stat-card,
.settings-card,
.card-form,
.chat-main,
.chat-side,
.looks-empty,
.wardrobe-cats-card,
.wardrobe-generator,
.wardrobe-rec-card,
.wardrobe-item,
.wardrobe-empty,
.wardrobe-upload-card,
.wardrobe-rec-chip,
.shop-detail-v2 .sdv2-shop-card,
.shop-detail-v2 .sdv2-fab-bar,
.inv-toolbar.looks-toolbar-v3,
.profile-mini,
.feature {
  background: var(--surface-panel);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.welcome-card,
.profile-card,
.login-card,
.chat-main,
.chat-side,
.looks-empty,
.inv-toolbar.looks-toolbar-v3 {
  border-radius: var(--surface-radius-lg);
}

.feature,
.profile-mini,
.wardrobe-item,
.wardrobe-rec-chip,
.wardrobe-cat,
.shop-card,
.look-card,
.garment-card {
  border-radius: var(--surface-radius);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline,
button.btn,
.upload-btn,
.looks-filter-iconbtn,
.wardrobe-empty-btn,
.wardrobe-auto-btn,
.shop-detail-share,
.shop-detail-v2 .sdv2-fab-btn,
.shop-banner-btn {
  min-height: 46px;
  border-radius: var(--control-radius);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover,
button.btn:hover,
.looks-filter-iconbtn:hover,
.wardrobe-empty-btn:hover:not(:disabled),
.wardrobe-auto-btn:hover:not(:disabled),
.shop-detail-share:hover,
.shop-detail-v2 .sdv2-fab-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary,
.btn.primary,
button[type="submit"].primary,
.shop-detail-v2 .sdv2-fab-btn.primary,
.shop-banner-btn,
.wardrobe-generate-btn {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(255, 77, 141, 0.20);
}

.btn-primary:hover,
.btn.primary:hover,
button[type="submit"].primary:hover,
.wardrobe-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5e74 0%, #ff8a47 42%, #ff3d87 100%);
  box-shadow: 0 18px 32px rgba(255, 77, 141, 0.26);
}

.btn-ghost,
.btn-outline,
.btn-secondary,
.wardrobe-empty-btn,
.wardrobe-auto-btn,
.shop-detail-v2 .sdv2-fab-btn.secondary {
  background: var(--surface-flat);
  color: var(--ink);
  border-color: rgba(20, 20, 50, 0.10);
  box-shadow: var(--inset-highlight);
}

.input,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select,
.looks-search,
.shops-search,
.wardrobe-occasion,
.composer.composer-pill,
.card-form input[type="text"],
.card-form textarea,
.card-form select,
.looks-search-row .looks-search {
  background: var(--surface-flat);
  border: var(--border-strong);
  box-shadow: var(--inset-highlight);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.looks-search:focus-within,
.shops-search:focus-within,
.wardrobe-occasion:focus,
.card-form input[type="text"]:focus,
.card-form textarea:focus,
.card-form select:focus,
.composer.composer-pill:focus-within,
.looks-search-row .looks-search:focus-within {
  border-color: rgba(255, 56, 92, 0.35);
  box-shadow: 0 0 0 4px rgba(255, 56, 92, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.hero-art,
.tryon-frame,
.look-photo,
.garment-photo,
.wardrobe-item-photo,
.wardrobe-rec-photo,
.shop-banner-empty {
  background: linear-gradient(135deg, #ffe9ef 0%, #fff0e6 52%, #ffffff 100%);
}

.chat-shell {
  max-width: 1280px;
  gap: 24px;
}

.chat-side {
  top: 96px;
  padding: 26px;
}

.agent-card,
.suggestions {
  border-color: rgba(20, 20, 50, 0.08);
}

.chip {
  padding: 16px 6px;
  border-bottom-color: rgba(20, 20, 50, 0.08);
  font-weight: 600;
}

.chip:hover {
  padding-left: 10px;
  border-radius: var(--control-radius);
  background: var(--tint-soft);
}

.chat-main {
  min-height: 72vh;
  background: var(--surface-panel-tint);
}

.looks-eyebrow,
.lux-step-label,
.shop-detail-v2 .sdv2-shop-more,
.chat-load-more-hint {
  color: var(--accent);
}

.chat-list {
  padding: 24px clamp(18px, 3vw, 28px) 28px;
  gap: 16px;
  scrollbar-color: rgba(255, 56, 92, 0.22) transparent;
}

.chat-list.overlay {
  padding: 22px 16px 30px;
}

.chat-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.42), rgba(255, 77, 141, 0.34));
}

.bubble-row {
  gap: 10px;
}

.msg-col {
  max-width: 80%;
  gap: 4px;
}

.bubble {
  padding: 14px 18px;
  border-radius: var(--surface-radius);
  line-height: 1.58;
  box-shadow: 0 10px 22px rgba(20, 20, 50, 0.05);
}

.bubble.user {
  background: var(--grad);
  box-shadow: 0 18px 30px rgba(255, 77, 141, 0.18);
}

.bubble.assistant {
  background: var(--surface-flat);
  border: var(--border-subtle);
}

.bubble.assistant.welcome {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 249, 0.96));
  border: 1px solid rgba(255, 56, 92, 0.10);
  padding-left: 22px;
}

.bubble.assistant.welcome::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: var(--grad);
}

.bubble img,
.bubble-image {
  border-radius: 18px;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border: var(--border-subtle);
  box-shadow: 0 8px 16px rgba(20, 20, 50, 0.08);
}

.msg-avatar.user {
  background: var(--surface-flat);
  color: var(--accent-active);
  border-color: rgba(255, 56, 92, 0.16);
}

.msg-meta,
.composer-hint {
  color: var(--muted);
}

.composer.composer-pill {
  margin: 16px clamp(18px, 3vw, 28px) 0;
  padding: 10px 10px 10px 16px;
  border-radius: var(--surface-radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(20, 20, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

.composer.composer-pill .composer-attach {
  background: rgba(255, 56, 92, 0.08);
  color: var(--accent-active);
}

.composer.composer-pill .composer-send {
  background: var(--grad);
  box-shadow: 0 12px 24px rgba(255, 77, 141, 0.20);
}

.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5e74 0%, #ff8a47 42%, #ff3d87 100%);
  box-shadow: 0 16px 30px rgba(255, 77, 141, 0.26);
}

.shop-grid,
.looks-grid {
  gap: 22px;
}

.shop-card,
.look-card,
.garment-card,
.wardrobe-item {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.shop-card:hover,
.look-card:hover,
.garment-card:hover,
.wardrobe-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 56, 92, 0.16);
  box-shadow: 0 24px 44px rgba(20, 20, 50, 0.10);
}

.shop-card::before {
  height: 4px;
  background: var(--grad);
  opacity: 0.88;
}

.look-card.selected,
.wardrobe-item.selected {
  outline: 2px solid rgba(255, 56, 92, 0.24);
  outline-offset: -2px;
  box-shadow: 0 18px 36px rgba(255, 77, 141, 0.14);
}

.look-select.on,
.look-card.selected .look-select,
.wardrobe-item.selected .wardrobe-item-check {
  background: var(--grad);
  border-color: #fff;
}

.looks-empty {
  padding: 80px 28px;
}

.wardrobe-main {
  max-width: 780px;
  gap: 20px;
}

.wardrobe-upload-card,
.wardrobe-cats-card,
.wardrobe-generator,
.wardrobe-rec-card,
.wardrobe-empty,
.wardrobe-rec-chip {
  border-color: rgba(20, 20, 50, 0.08);
}

.wardrobe-cat {
  border-radius: 18px;
  background: var(--surface-flat);
  border-color: rgba(20, 20, 50, 0.08);
}

.wardrobe-cat.active {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.10), rgba(255, 77, 141, 0.08));
  border-color: rgba(255, 56, 92, 0.20);
  box-shadow: inset 0 0 0 1px rgba(255, 56, 92, 0.08);
}

.wardrobe-cat-icon {
  background: rgba(255, 56, 92, 0.05);
}

.wardrobe-cat.active .wardrobe-cat-icon {
  background: var(--surface-flat);
  color: var(--accent);
}

.wardrobe-item-check,
.wardrobe-item-del,
.look-select.inline {
  box-shadow: 0 8px 16px rgba(20, 20, 50, 0.08);
}

.inv-toolbar.looks-toolbar-v3 {
  padding: 26px clamp(18px, 4vw, 30px);
  border-radius: var(--surface-radius-lg);
  background: var(--surface-panel-soft);
}

.looks-search,
.looks-search-row .looks-search {
  background: var(--surface-flat);
  border: var(--border-subtle);
}

.looks-filter-iconbtn {
  background: rgba(255, 56, 92, 0.08);
  color: var(--accent-active);
  border: 1px solid rgba(255, 56, 92, 0.10);
  box-shadow: none;
}

.looks-filter-iconbtn.has-active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 14px 28px rgba(255, 77, 141, 0.22);
}

.feature,
.profile-mini,
.welcome-grid > *,
.settings-card,
.card-form {
  background: var(--surface-flat);
}

@media (max-width: 760px) {
  .screen {
    padding: 18px 14px calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    top: 8px;
    min-height: 68px;
    margin: 8px auto 20px;
    padding: 0 14px 0 16px;
    border-radius: 20px;
  }

  .topbar .logo img,
  .topbar .logo.small img {
    height: 48px;
  }

  .chat-side {
    top: 0;
  }

  .chat-main,
  .welcome-card,
  .profile-card,
  .looks-empty,
  .inv-toolbar.looks-toolbar-v3 {
    border-radius: var(--surface-radius);
  }

  .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: 12px;
    transform: none;
    width: auto;
    max-width: none;
    min-height: 70px;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border: var(--border-subtle);
    border-radius: var(--surface-radius);
    background: var(--surface-flat-strong);
    box-shadow: 0 24px 40px rgba(20, 20, 50, 0.14);
    justify-content: space-between;
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
  }

  .bottom-nav-item {
    min-height: 58px;
    gap: 5px;
    padding: 8px 6px 10px;
    border-radius: 18px;
  }

  .bottom-nav-item.active {
    background: var(--tint-active);
    box-shadow: inset 0 0 0 1px rgba(255, 56, 92, 0.12), 0 10px 18px rgba(20, 20, 50, 0.08);
  }

  .bottom-nav-item.active::before {
    top: 8px;
    width: 22px;
    height: 3px;
    background: var(--grad);
  }

  .bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-1px);
    filter: drop-shadow(0 6px 10px rgba(255, 77, 141, 0.18));
  }

  .msg-col {
    max-width: 86%;
  }
}

@media (max-width: 480px) {
  .screen {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-title,
  .hero h1,
  .welcome-card h1 {
    letter-spacing: -0.05em;
  }

  .bubble {
    border-radius: 22px;
  }

  .composer.composer-pill {
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 22px;
  }

  .bottom-nav {
    left: 8px;
    right: 8px;
    bottom: 10px;
  }

  .bottom-nav-item {
    font-size: 10px;
  }
}

/* ==========  Bottom Nav Refresh (legacy base + newer visual treatment)  ========== */
@media (max-width: 760px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: calc(100vw - 16px);
    max-width: 720px;
    min-height: 0;
    padding: 8px;
    display: flex;
    gap: 6px;
    justify-content: stretch;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 251, 251, 0.82);
    box-shadow: 0 18px 40px rgba(20, 20, 50, 0.16);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .bottom-nav-item {
    flex: 1 1 0;
    gap: 6px;
    min-height: 56px;
    padding: 10px 6px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav-item.active {
    color: var(--accent-active, var(--accent));
    background: linear-gradient(180deg, rgba(255, 56, 92, 0.18), rgba(255, 56, 92, 0.08));
    box-shadow: inset 0 0 0 1px rgba(255, 56, 92, 0.16);
  }

  .bottom-nav-item.active::before {
    top: auto;
    bottom: 4px;
    width: 22px;
    height: 3px;
    background: var(--grad);
    border-radius: 999px;
  }

  .bottom-nav-item:hover,
  .bottom-nav-item:active {
    color: var(--accent-active, var(--accent));
  }

  .bottom-nav-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
  }
}

@media (max-width: 480px) {
  .bottom-nav {
    width: calc(100vw - 12px);
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding: 7px;
  }

  .bottom-nav-item {
    padding: 10px 4px 8px;
    font-size: 10px;
  }

  .bottom-nav-item span {
    font-size: 9px;
  }

  .bottom-nav-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
  }
}

/* ==========  Chat margin fix (mobile)  ========== */
@media (max-width: 760px) {
  .screen:has(.chat-shell) {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  }
  .chat-main {
    border-radius: var(--r-md);
    min-height: 0;
    height: auto;
  }
  .chat-list {
    padding: 16px 12px 12px;
    gap: 12px;
  }
  .bubble {
    max-width: 92%;
  }
  .composer.composer-pill {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 6px 6px 6px 12px;
    z-index: 39;
  }
}

@media (max-width: 480px) {
  .screen:has(.chat-shell) {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px));
  }
  .chat-list {
    padding: 14px 10px 10px;
  }
  .composer.composer-pill {
    left: 8px;
    right: 8px;
    bottom: calc(95px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========  Chat refresh (soft glass theme)  ========== */
html, body { background: linear-gradient(to bottom, #fff7f8 0%, #fefcfc 60%, #ffffff 100%); }
body::before { background: transparent; }

.screen:has(.chat-shell) {
  background: transparent;
}

.chat-main {
  background: transparent;
  border: none;
  box-shadow: none;
}

.bubble.assistant {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  border-bottom-left-radius: 10px;
  box-shadow:
    0 12px 36px rgba(255, 122, 146, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #404040;
}

.bubble.user {
  background: linear-gradient(135deg, #ff7f8e, #ff9aa5);
  color: #fff;
  border-radius: 24px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 10px 25px rgba(255, 122, 146, 0.28);
}

.bubble img {
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.composer.composer-pill {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow:
    0 12px 40px rgba(255, 122, 146, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.composer.composer-pill .composer-attach {
  background: #fff2f4;
  color: #ff7f8e;
}
.composer.composer-pill .composer-attach:hover {
  background: #ffe1e6;
  color: #ff5d75;
}

.composer.composer-pill .composer-send {
  background: linear-gradient(135deg, #ffb6c1, #ff9aa5);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 153, 170, 0.35);
}
.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff9aa5, #ff7f8e);
  transform: translateY(-1px);
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 15px 40px rgba(255, 122, 146, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Vogue agent avatar — soft pink gradient with serif mark */
.msg-avatar.assistant,
.chat-list .msg-avatar.assistant,
.chat-list.overlay .msg-avatar.assistant {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #ff9eb0 0%, #ffb7a2 100%);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 22px rgba(255, 140, 160, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  position: relative;
  overflow: visible;
}

.msg-avatar.assistant::after,
.chat-list .msg-avatar.assistant::after,
.chat-list.overlay .msg-avatar.assistant::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Wardrobe — tighter spacing between sections */
.wardrobe-main {
  gap: 10px;
  padding-top: 0;
  padding-bottom: 24px;
}
.wardrobe-hero { padding: 0 4px 0; }
.wardrobe-hero .page-title { margin: 0 0 2px; }

/* Floating Try On bar (mirrors shop sdv2-fab-bar) */.wardrobe-fab-bar {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(20, 18, 40, 0.08);
  box-shadow: 0 14px 36px rgba(255, 122, 146, 0.22);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  z-index: 60;
  animation: wardrobe-fab-pop 200ms cubic-bezier(.2,.9,.3,1.2);
  max-width: calc(100% - 24px);
}
@keyframes wardrobe-fab-pop {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.wardrobe-fab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9eb0, #ff7f8e);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
  box-shadow: 0 4px 10px rgba(255, 122, 146, 0.35);
}
.wardrobe-fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}
.wardrobe-fab-btn.primary {
  background: linear-gradient(135deg, #ffb6c1, #ff7f8e);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 122, 146, 0.35);
}
.wardrobe-fab-btn.primary:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.wardrobe-fab-btn.primary:disabled {
  background: #f7c8d2;
  cursor: not-allowed;
  box-shadow: none;
}
@media (max-width: 480px) {
  .wardrobe-fab-bar { padding: 5px 6px 5px 12px; gap: 8px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .wardrobe-fab-btn { padding: 9px 14px; font-size: 13px; }
}

.screen.wardrobe-page {
  padding-top: 0;
}
.topbar { margin-bottom: 10px !important; }

@media (max-width: 760px) {
  .screen.wardrobe-page {
    padding-top: 0;
  }
  .wardrobe-main {
    gap: 8px;
    padding-top: 0;
  }
}


/* Shops toolbar � slim, no card background */
.shops-v2 .inv-toolbar.looks-toolbar-v3 {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 8px;
  margin-bottom: 12px;
}
.shops-v2 .inv-toolbar.looks-toolbar-v3 .looks-toolbar-head { display: none; }
.shops-v2 .looks-search-row { gap: 8px; }
.shops-v2 .looks-search-row .looks-search { height: 48px; }
@media (max-width: 480px) {
  .shops-v2 .inv-toolbar.looks-toolbar-v3 { padding: 0; border-radius: 0; }
  .shops-v2 .looks-search-row .looks-search { height: 44px; }
}


/* ===== Smart Catalog modal ===== */
.smart-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.smart-modal {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.smart-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.smart-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}
.smart-pick { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.smart-preview { max-width: 100%; max-height: 280px; border-radius: 8px; object-fit: contain; }
.smart-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.smart-actions-island {
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 79, 125, 0.12);
  box-shadow: 0 22px 36px -26px rgba(34, 18, 31, 0.42);
  backdrop-filter: blur(14px);
}
.smart-cancel-btn {
  flex: 0 0 auto;
}
.smart-commit-btn {
  flex: 1 1 220px;
  min-height: 48px;
  box-shadow: 0 22px 32px -24px rgba(255, 79, 125, 0.78);
}
.smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  max-height: 55vh;
  overflow: auto;
  margin-top: 10px;
}
.smart-card {
  display: block;
  border: 1px solid rgba(234, 223, 228, 0.95);
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #fff7fa);
  position: relative;
  box-shadow: 0 18px 34px -30px rgba(31, 14, 28, 0.38);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.smart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 38px -30px rgba(31, 14, 28, 0.46);
}
.smart-card.on {
  border-color: rgba(255, 79, 125, 0.5);
  background: linear-gradient(180deg, #fff7fb, #ffffff);
  box-shadow: 0 24px 42px -28px rgba(255, 79, 125, 0.28);
}
.smart-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: 16px;
  display: block;
  background: linear-gradient(180deg, #fff0f5, #ffffff);
  padding: 10px;
}
.smart-card input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.smart-card-check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(255, 79, 125, 0.35);
  border: 1px solid rgba(255, 79, 125, 0.18);
  box-shadow: 0 10px 18px -12px rgba(22, 13, 20, 0.45);
}
.smart-card.on .smart-card-check {
  background: linear-gradient(135deg, #ff945c, #ff4f7d);
  color: #fff;
  border-color: transparent;
}
.smart-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 2px 2px;
}
.smart-meta-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.smart-meta-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.smart-meta-chip {
  display: inline-flex;
  align-items: center;
  max-width: 45%;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 79, 125, 0.08);
  color: #c84b70;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smart-meta-path {
  color: #766b74;
  font-size: 11px;
}
.smart-catalog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f6f8fb;
  border: 1px dashed #cdd6e3;
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.upload-row-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.ai-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ai-catalog-btn svg {
  flex-shrink: 0;
}

.queue-ai-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.queue-ai-btn.is-loading {
  border-color: rgba(255, 79, 125, 0.28);
  background: rgba(255, 255, 255, 0.95);
}
.queue-ai-progress {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  background: rgba(255, 255, 255, 0.42);
}
.queue-ai-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(135deg, rgba(255, 148, 92, 0.68), rgba(255, 79, 125, 0.52));
  transition: width .25s ease;
}
.queue-ai-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.smart-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 148, 117, 0.12), rgba(255, 79, 125, 0.1));
  border: 1px solid rgba(255, 79, 125, 0.22);
  box-shadow: 0 16px 36px -30px rgba(255, 79, 125, 0.45);
}
.smart-loading .smart-spinner {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #ff4f7d;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
.smart-loading-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.smart-loading-text strong { font-size: 14px; }

.smart-inline-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.smart-inline-banner.is-success {
  background: rgba(83, 194, 131, 0.1);
  border-color: rgba(83, 194, 131, 0.22);
  color: #207c56;
}
.smart-inline-banner.is-error {
  background: rgba(255, 103, 135, 0.11);
  border-color: rgba(255, 103, 135, 0.22);
  color: #b33e58;
}
.smart-inline-banner.is-neutral {
  background: rgba(255, 148, 117, 0.09);
  border-color: rgba(255, 148, 117, 0.18);
  color: #6f5560;
}
.smart-inline-banner-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.55);
}

/* Danger variant for icon buttons (e.g. delete) */
.icon-btn-danger { color: #c33; }
.icon-btn-danger:hover { background: rgba(204, 51, 51, 0.10); border-color: rgba(204, 51, 51, 0.30); }
.shop-lux .garment-card .quick-actions .icon-btn-danger {
  color: #c33;
}
.shop-lux .garment-card .quick-actions .icon-btn-danger:hover {
  background: #fff0f0;
}

/* Queue row remove button — clear trash icon, never overflows */
.queue-row .queue-remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  align-self: flex-end;
}

/* Keep two upload cards per row while letting each card tighten on small screens. */
@media (max-width: 560px) {
  .queue-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .queue-row {
    padding: 12px;
  }
  .queue-row > img {
    border-radius: 12px;
  }
  .queue-fields input,
  .queue-fields textarea,
  .queue-fields select {
    padding: 7px 9px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .queue-list {
    grid-template-columns: 1fr;
  }
}

/* Smart Catalog inline preview — prevent horizontal overflow */
.smart-inline { min-width: 0; max-width: 100%; }
.smart-inline {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(255, 79, 125, 0.1);
  box-shadow: 0 18px 34px -32px rgba(34, 18, 31, 0.38);
}
.smart-inline .smart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: none;
  overflow: visible;
}
.smart-inline .smart-card {
  padding: 8px;
  border-radius: 16px;
}
.smart-inline .smart-card img {
  border-radius: 12px;
  padding: 8px;
}
.smart-inline .smart-card-check {
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
}
.smart-inline .smart-meta {
  gap: 5px;
  padding: 8px 2px 2px;
}
.smart-inline .smart-meta-top {
  flex-direction: column;
  gap: 6px;
}
.smart-inline .smart-meta-title {
  font-size: 13px;
  line-height: 1.25;
}
.smart-inline .smart-meta-chip {
  max-width: 100%;
  align-self: flex-start;
}

@media (max-width: 520px) {
  .smart-actions-island {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    gap: 8px;
  }
  .smart-cancel-btn {
    min-width: 84px;
  }
  .smart-commit-btn {
    flex-basis: 0;
    min-height: 46px;
  }
}

/* ===== Manage garment detail page ===== */
.garment-title-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  width: 100%;
}
.garment-title-link h4 {
  margin: 0;
  text-decoration: none;
}
.garment-title-link:hover h4 {
  text-decoration: underline;
}
/* ===== Premium mobile-first item editor ===== */
.garment-edit-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 140px;
  background: linear-gradient(180deg, #f7f7f5 0%, #f3efe9 100%);
  min-height: 100vh;
  color: #1f1a14;
}
.ge-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 12px;
  background: linear-gradient(180deg, rgba(247,247,245,0.96) 0%, rgba(247,247,245,0.78) 80%, rgba(247,247,245,0) 100%);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.ge-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(31,26,20,0.08);
  background: rgba(255,255,255,0.7);
  color: #1f1a14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, background 0.18s ease;
}
.ge-icon-btn:hover { background: #fff; }
.ge-icon-btn:active { transform: scale(0.96); }
.ge-topbar-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ge-topbar-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7a64;
}
.ge-topbar-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ge-topbar-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ge-toast {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f7a45;
  background: #e8f6ee;
  padding: 6px 10px;
  border-radius: 999px;
}
.ge-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 24px 50px -22px rgba(0,0,0,0.35);
  z-index: 20;
}
.ge-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #1f1a14;
}
.ge-menu-item:hover { background: #f6f3ee; }
.ge-menu-danger { color: #b3261e; }
.ge-menu-danger:hover { background: #fde9e7; }

.ge-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ge-form-compact {
  gap: 12px;
}

.ge-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ge-hero-compact {
  gap: 8px;
}
.ge-hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #efe7da 0%, #f7f2ea 100%);
  box-shadow: 0 30px 60px -28px rgba(31,26,20,0.45), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.ge-form-compact .ge-hero-stage {
  aspect-ratio: 1 / 1.08;
  border-radius: 24px;
}
.ge-hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ge-fade 0.25s ease;
}
@keyframes ge-fade {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}
.ge-hero-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #7a6a55;
  font-size: 14px;
}
.ge-hero-fab {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(31,26,20,0.85);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 30px -14px rgba(0,0,0,0.45);
  transition: transform 0.12s ease, background 0.18s ease;
}
.ge-hero-fab:hover { background: #1f1a14; }
.ge-hero-fab:active { transform: scale(0.97); }
.ge-hero-fab:disabled { opacity: 0.6; cursor: not-allowed; }
.ge-hero-pill {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.ge-hero-pill.is-live {
  background: rgba(232, 246, 238, 0.92);
  color: #1f7a45;
}
.ge-hero-pill.is-hidden {
  background: rgba(246, 233, 232, 0.92);
  color: #9d352f;
}

.ge-thumb-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ge-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #fff;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 14px 30px -22px rgba(0,0,0,0.28);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.18s ease;
}
.ge-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ge-thumb.is-active {
  border-color: #1f1a14;
  transform: translateY(-2px);
  box-shadow: 0 24px 36px -22px rgba(0,0,0,0.45);
}
.ge-thumb.is-empty {
  background: rgba(255,255,255,0.55);
  border: 2px dashed rgba(31,26,20,0.18);
  color: #b09a7e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ge-thumb-plus {
  font-size: 26px;
  font-weight: 300;
}
.ge-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(31,26,20,0.78);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}
.ge-thumb-spin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.55);
}
.ge-thumb.is-busy { pointer-events: none; }

.ge-card {
  background: #ffffff;
  border-radius: 26px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 48px -32px rgba(31,26,20,0.32);
  border: 1px solid rgba(31,26,20,0.04);
}
.ge-card-compact {
  padding: 16px 14px;
  gap: 10px;
  border-radius: 22px;
}
.ge-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ge-card-head-compact {
  gap: 0;
}
.ge-card-head h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.ge-card-head p {
  margin: 0;
  font-size: 13px;
  color: #7a6a55;
}

.ge-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ge-input > span {
  font-size: 12px;
  font-weight: 600;
  color: #6b5e4b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ge-input input,
.ge-input textarea,
.ge-input select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(31,26,20,0.08);
  background: #faf7f2;
  font: inherit;
  font-size: 15px;
  color: #1f1a14;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ge-input select {
  background-image: linear-gradient(45deg, transparent 50%, #6b5e4b 50%), linear-gradient(135deg, #6b5e4b 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.ge-input input:focus,
.ge-input textarea:focus,
.ge-input select:focus {
  outline: none;
  border-color: rgba(255, 45, 111, 0.4);
  box-shadow: 0 0 0 4px rgba(255, 45, 111, 0.12);
  background: #fff;
}
.ge-input textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.ge-form-compact .ge-input textarea {
  min-height: 88px;
}
.ge-input-lg input { font-size: 18px; padding: 16px 18px; }
.ge-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ge-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ge-span-full {
  grid-column: 1 / -1;
}
@media (max-width: 420px) {
  .ge-input-row { grid-template-columns: 1fr; }
  .ge-section-grid { grid-template-columns: 1fr; }
}

.ge-stack-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ge-stack-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b5e4b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ge-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ge-chip-row-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ge-chip-row-scroll::-webkit-scrollbar { display: none; }
.ge-chip {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(31,26,20,0.1);
  background: #faf7f2;
  color: #4a3f30;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.ge-chip:hover { background: #fff; }
.ge-chip.is-active {
  background: #1f1a14;
  color: #fff;
  border-color: #1f1a14;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -14px rgba(0,0,0,0.5);
}
.ge-color-field {
  gap: 8px;
}
.ge-color-field.is-compact {
  gap: 6px;
}
.ge-color-field.is-disabled {
  opacity: 0.72;
}
.ge-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ge-color-field.is-compact .ge-color-palette {
  gap: 8px;
}
.ge-color-swatch {
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ge-color-field.is-compact .ge-color-swatch {
  width: 28px;
  height: 28px;
}
.ge-color-swatch:disabled {
  cursor: not-allowed;
}
.ge-color-swatch-fill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 2px solid rgba(31,26,20,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34), 0 6px 14px -10px rgba(0,0,0,0.38);
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ge-color-swatch.is-light .ge-color-swatch-fill {
  border-color: rgba(31,26,20,0.18);
}
.ge-color-swatch:hover .ge-color-swatch-fill {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 10px 18px -12px rgba(0,0,0,0.45);
}
.ge-color-swatch.is-active .ge-color-swatch-fill {
  border-color: #1f1a14;
  box-shadow: 0 0 0 3px rgba(31,26,20,0.12), inset 0 0 0 1px rgba(255,255,255,0.45), 0 12px 20px -12px rgba(0,0,0,0.45);
  transform: scale(1.06);
}
.ge-color-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ge-color-field.is-compact .ge-color-meta {
  gap: 8px;
}
.ge-color-value {
  font-size: 13px;
  font-weight: 600;
  color: #6b5e4b;
  min-height: 1em;
}
.ge-color-field.is-compact .ge-color-value,
.ge-color-field.is-compact .ge-color-custom {
  font-size: 12px;
}
.ge-color-clear {
  border: 0;
  padding: 0;
  background: none;
  color: #8a7a64;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ge-color-clear:disabled {
  cursor: not-allowed;
}
.ge-color-clear:hover {
  color: #1f1a14;
}
.ge-color-clear:disabled:hover {
  color: #8a7a64;
}
.ge-color-custom {
  font-size: 12px;
  color: #9a8a72;
}
.ge-muted { color: #9a8a72; font-size: 13px; }

.ge-ai-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg, #ff2d6f 0%, #ff8a3d 60%, #ffd06b 100%);
  box-shadow: 0 30px 50px -30px rgba(255, 70, 110, 0.6);
}
.ge-ai-glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.ge-ai-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(34,18,12,0.92) 0%, rgba(60,28,40,0.92) 100%);
  border-radius: 25px;
  color: #fff;
}
.ge-ai-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd06b;
}
.ge-ai-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ge-ai-text strong { font-size: 14.5px; letter-spacing: 0.02em; }
.ge-ai-text p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.78); line-height: 1.4; }
.ge-ai-btn {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #1f1a14;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.12s ease;
}
.ge-ai-btn:hover { transform: translateY(-1px); }
.ge-ai-btn:disabled { opacity: 0.7; cursor: progress; }

.ge-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #faf7f2;
  cursor: pointer;
}
.ge-toggle-row-compact {
  padding: 12px 14px;
}
.ge-toggle-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ge-toggle-text strong { font-size: 14.5px; }
.ge-toggle-text span { font-size: 12.5px; color: #7a6a55; }
.ge-switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #d8d1c5;
  transition: background 0.2s ease;
}
.ge-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ge-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  transition: transform 0.2s ease;
}
.ge-switch.is-on { background: linear-gradient(135deg, #ff2d6f, #ff8a3d); }
.ge-switch.is-on .ge-switch-knob { transform: translateX(22px); }

.ge-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fde9e7;
  color: #9d352f;
  font-weight: 600;
  font-size: 13.5px;
}

.ge-bottom-spacer { height: 8px; }

.ge-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  display: flex;
  gap: 10px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(247,247,245,0) 0%, rgba(247,247,245,0.88) 35%, #f7f7f5 100%);
  backdrop-filter: blur(10px);
}
.ge-sticky-cta > * { flex: 1; }
.ge-cta-secondary {
  padding: 14px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(31,26,20,0.1);
  color: #1f1a14;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.ge-cta-primary {
  padding: 14px 18px;
  border-radius: 18px;
  border: 0;
  background: linear-gradient(135deg, #ff2d6f 0%, #ff7a3d 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 18px 36px -16px rgba(255, 70, 110, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.ge-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 40px -16px rgba(255, 70, 110, 0.8); }
.ge-cta-primary:disabled { opacity: 0.7; cursor: progress; }
.ge-cta-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}

@media (min-width: 760px) {
  .garment-edit-screen { padding: 0 24px 160px; max-width: 760px; }
  .ge-hero-stage { aspect-ratio: 4 / 4.6; }
  .ge-sticky-cta { left: 50%; right: auto; transform: translateX(-50%); width: 720px; max-width: calc(100% - 32px); border-radius: 22px 22px 0 0; background: rgba(247,247,245,0.94); }
}

/* ======================================================================
   BUYER ITEM DETAIL PAGE (.buyer-item-screen)
   ====================================================================== */
.buyer-item-screen {
  --bi-bg: #f7f7f5;
  --bi-ink: #1a1a1a;
  --bi-ink-soft: #6b6b6b;
  --bi-line: rgba(0,0,0,0.07);
  --bi-card: #ffffff;
  --bi-pink: #ff2d6f;
  --bi-orange: #ff7a3d;
  background: var(--bi-bg);
  min-height: 100vh;
  padding: 0 16px 140px;
  color: var(--bi-ink);
  max-width: 560px;
  margin: 0 auto;
}
.bi-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 10px;
  background: rgba(247,247,245,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  margin: 0 -16px 4px;
  padding-left: 12px;
  padding-right: 12px;
  border-bottom: 1px solid var(--bi-line);
}
.bi-topbar-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.bi-topbar-eyebrow {
  font-size: 11px;
  color: var(--bi-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bi-topbar-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--bi-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bi-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bi-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s ease, background .15s ease;
}
.bi-icon-btn:hover { background: #fafafa; }
.bi-icon-btn:active { transform: scale(.95); }

.bi-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.bi-hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  overflow: hidden;
  background: #ececec;
  box-shadow: 0 14px 38px -22px rgba(0,0,0,0.28);
}
.bi-hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: bi-fade .25s ease;
}
.bi-hero-360 {
  position: absolute;
  inset: 0;
  background: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  color: #fff;
}
.bi-hero-360 .sheet360-canvas {
  max-width: 100%;
  max-height: calc(100% - 56px);
  width: auto;
  height: auto;
  background: #111;
  border-radius: 12px;
}
.bi-hero-360 .sheet360-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.bi-hero-360 .sheet360-loading,
.bi-hero-360 .sheet360-error {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
@keyframes bi-fade { from { opacity: 0; transform: scale(1.01); } to { opacity: 1; transform: scale(1); } }
.bi-hero-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--bi-ink-soft);
  font-size: 14px;
}
.bi-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 600;
  color: var(--bi-ink);
}
.bi-hero-overlay .spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
  border-color: rgba(0,0,0,0.12);
  border-top-color: var(--bi-pink);
}
.bi-hero-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bi-ink);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25);
}
.bi-hero-tag.is-done {
  background: linear-gradient(135deg, var(--bi-pink), var(--bi-orange));
  color: #fff;
}
.bi-hero-revert {
  position: absolute;
  top: 12px;
  right: 12px;
  appearance: none;
  border: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(20,20,20,0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.bi-thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.bi-thumb-strip::-webkit-scrollbar { display: none; }
.bi-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 78px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: #ececec;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s ease, transform .15s ease;
}
.bi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-thumb.is-active { border-color: var(--bi-pink); transform: translateY(-1px); }

.bi-headline {
  padding: 18px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bi-headline h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bi-ink);
  line-height: 1.25;
}
.bi-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--bi-pink);
}
.bi-breadcrumb {
  font-size: 13px;
  color: var(--bi-ink-soft);
}

.bi-cta-card {
  background: var(--bi-card);
  border-radius: 22px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,0.22);
  border: 1px solid var(--bi-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bi-cta-primary {
  appearance: none;
  border: 0;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bi-pink) 0%, var(--bi-orange) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 14px 32px -14px rgba(255,45,111,0.55);
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
.bi-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(255,45,111,0.62); }
.bi-cta-primary:active { transform: translateY(0); }
.bi-cta-primary:disabled { opacity: .7; cursor: progress; }
.bi-cta-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.bi-cta-row .bi-cta-primary,
.bi-cta-row .bi-cta-secondary {
  flex: 1 1 0;
  width: auto;
  padding: 14px 14px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bi-cta-icon { display: inline-flex; align-items: center; justify-content: center; }
.bi-cta-secondary {
  appearance: none;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--bi-pink, #ff2d6f);
  border: 1.5px solid var(--bi-pink, #ff2d6f);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bi-cta-secondary:hover { background: var(--bi-pink, #ff2d6f); color: #fff; }

/* ----- 360-view (sheet360) modal ----- */
.sheet360-modal { cursor: default; }
.sheet360-stage {
  position: relative;
  background: #111;
  border-radius: 18px;
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 92vw;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.sheet360-loading,
.sheet360-error {
  color: #fff;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
  padding: 40px 60px;
}
.sheet360-canvas {
  max-width: min(80vw, 540px);
  max-height: 70vh;
  border-radius: 12px;
  background: #000;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.sheet360-canvas:active { cursor: grabbing; }
.sheet360-controls {
  display: flex; align-items: center; gap: 14px;
  color: #fff;
}
.sheet360-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.sheet360-btn:hover { background: rgba(255,255,255,0.2); }
.sheet360-hint { opacity: 0.7; font-size: 12px; }
.sheet360-close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: 0; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  padding: 4px 10px;
}
.bi-cta-primary .spinner {
  width: 18px;
  height: 18px;
  border-width: 2.5px;
  border-color: rgba(255,255,255,0.45);
  border-top-color: #fff;
}
.bi-cta-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--bi-ink-soft);
  text-align: center;
}
.bi-cta-error {
  margin: 0;
  font-size: 13px;
  color: #b00020;
  text-align: center;
}

.bi-card {
  background: var(--bi-card);
  border-radius: 22px;
  border: 1px solid var(--bi-line);
  padding: 18px;
  margin-top: 14px;
  box-shadow: 0 6px 20px -16px rgba(0,0,0,0.15);
}
.bi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bi-card-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bi-ink-soft);
}
.bi-meta-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.bi-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bi-meta dt {
  font-size: 11px;
  color: var(--bi-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bi-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bi-ink);
}
.bi-description {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #2a2a2a;
  white-space: pre-wrap;
}

.bi-shop-link {
  margin-top: 16px;
  width: 100%;
  appearance: none;
  border: 1px solid var(--bi-line);
  background: var(--bi-card);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--bi-ink);
  text-align: left;
  transition: transform .12s ease, background .15s ease;
}
.bi-shop-link:hover { background: #fafafa; transform: translateY(-1px); }
.bi-shop-link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bi-shop-link strong { font-size: 15px; font-weight: 700; }
.bi-shop-link small { font-size: 12.5px; color: var(--bi-ink-soft); }

.bi-bottom-spacer { height: 24px; }

@media (min-width: 760px) {
  .buyer-item-screen { padding: 0 24px 160px; max-width: 720px; }
  .bi-hero-stage { aspect-ratio: 4 / 4.6; }
}

/* ======================================================================
   QUICK PROMPTS (floating idea button + expandable panel above composer)
   ====================================================================== */
.quick-prompts {
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 210px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.quick-prompts > * { pointer-events: auto; }
@media (min-width: 720px) {
  .quick-prompts { right: max(24px, calc(50% - 320px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 160px); }
}
@media (min-width: 1100px) {
  .quick-prompts { right: max(40px, calc(50% - 380px)); }
}
.quick-prompts-fab {
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d6f 0%, #ff7a3d 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(255,45,111,0.55), 0 4px 10px -4px rgba(0,0,0,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .25s ease;
  animation: qp-pulse 2.4s ease-in-out infinite;
}
.quick-prompts-fab:hover { transform: translateY(-2px) scale(1.04); }
.quick-prompts-fab:active { transform: translateY(0) scale(.96); }
.quick-prompts-fab.active {
  background: #1a1a1a;
  animation: none;
  transform: rotate(90deg);
}
@keyframes qp-pulse {
  0%, 100% { box-shadow: 0 12px 28px -10px rgba(255,45,111,0.55), 0 4px 10px -4px rgba(0,0,0,0.18), 0 0 0 0 rgba(255,45,111,0.45); }
  50%      { box-shadow: 0 12px 28px -10px rgba(255,45,111,0.55), 0 4px 10px -4px rgba(0,0,0,0.18), 0 0 0 10px rgba(255,45,111,0); }
}

.quick-prompts-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.32), 0 6px 18px -10px rgba(0,0,0,0.14);
  animation: qp-rise .22s cubic-bezier(.34,1.4,.64,1) both;
  z-index: 20;
}
@keyframes qp-rise {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-prompts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.quick-prompts-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.quick-prompts-close {
  appearance: none;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  color: #1a1a1a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quick-prompts-close:hover { background: rgba(0,0,0,0.1); }

.quick-prompts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.quick-prompt-card {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 16px;
  padding: 12px 12px 12px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
  color: #1a1a1a;
  transition: transform .15s ease, border-color .15s ease, box-shadow .18s ease, background .15s ease;
  animation: qp-card-in .28s cubic-bezier(.34,1.4,.64,1) both;
  min-height: 76px;
}
@keyframes qp-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-prompt-card:hover {
  border-color: rgba(255,45,111,0.4);
  box-shadow: 0 10px 22px -14px rgba(255,45,111,0.4);
  transform: translateY(-1px);
}
.quick-prompt-card:active { transform: translateY(0) scale(.98); }
.quick-prompt-card:disabled { opacity: .55; cursor: not-allowed; }
.quick-prompt-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,45,111,0.12), rgba(255,122,61,0.12));
}
.quick-prompt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.quick-prompt-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.25;
}
.quick-prompt-desc {
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 460px) {
  .quick-prompts-grid { grid-template-columns: 1fr; }
  .quick-prompts-panel { border-radius: 20px; padding: 12px; }
  .quick-prompt-card { min-height: 0; padding: 11px 12px; }
}