:root {
  /* ZATE palette: cream ground, espresso ink, caramel accent, taupe lines. */
  --bg: #F8F1E9;
  --surface: #FCF8F3;
  --warm: #EFE6DC;
  --ink: #3E2B23;
  --muted: #75604F;
  /* Caramel for words: 4.7:1 on the warm ground, 5.2:1 on cream, and white
     text on it at 5.8:1 (the person's own chat bubble). The lighter
     --caramel is for lines and icons only (3:1). */
  --caramel-deep: #835D3B;
  --sage: #A67C52;
  --taupe: #D6C4B4;
  --champagne: #A67C52;
  --espresso: #3E2B23;
  --caramel: #A67C52;
  --cream: #F8F1E9;
  --line: rgba(62, 43, 35, 0.10);
  --shadow: 0 12px 40px rgba(62, 43, 35, 0.06);
  --radius: 20px;
  --radius-sm: 12px;
  --ease: 200ms ease;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: Inter, Geist, Manrope, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Nothing may widen the page sideways: on an iPhone one wide element (even
     in a closed sheet) made the whole app wider than the screen, cutting the
     right edge of the closet and the scan (Icona client video, 2026-10-11). */
  overflow-x: clip;
}

button, input, textarea { font-family: inherit; }

/* iOS gives date fields a wide built-in minimum; in a two-column row they
   pushed past the screen. */
input[type="date"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
.trip-form-dates > *, .sm-trip-dates > * { min-width: 0; }

img { max-width: 100%; display: block; }

.serif { font-family: var(--serif); }

.hidden { display: none !important; }

.app-shell {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 40px 96px;
}

/* Auth */
.auth-screen {
  position: relative;
  z-index: 70;
  min-height: 100vh;
  /* The visible height on phones: 100vh counts the browser bars on iPhone
     Safari and pushed the sign-in form down under an empty band. */
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(198, 170, 114, 0.12), transparent 38%),
    var(--bg);
}

.auth-panel { width: min(400px, 100%); }

/* Language: EN · ES. On the sign-in screen (top right), in the app header,
   and as a labelled row in the profile menu. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
  white-space: nowrap;
}
.lang-switch button {
  border: 0;
  background: transparent;
  padding: 6px 2px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.lang-switch--auth {
  position: absolute;
  top: 18px;
  right: 20px;
}
.lang-switch--header { font-size: 11px; }
.lang-switch--menu {
  font-size: 13px;
  letter-spacing: 0.02em;
  gap: 10px;
}
.lang-switch--menu button { padding: 4px 0; }
.profile-menu-lang { padding-top: 2px; }
@media (max-width: 640px) {
  /* The phone header has no room; the profile menu carries the switch. */
  .lang-switch--header { display: none; }
}

.auth-kicker {
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.auth-title {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 400;
  line-height: 0.9;
  margin: 0 0 16px;
}

/* Wordmark: shared SVG symbol, coloured by currentColor. */
.zate-mark { display: block; height: auto; }
.auth-mark { width: min(72vw, 250px); }
.brand-mark { width: 118px; }
/* The line under the wordmark: ZATE's own serif, two short sentences. */
.auth-tagline {
  margin: 4px 0 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
}

.auth-copy {
  color: color-mix(in srgb, var(--ink) 75%, var(--bg));
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 34ch;
}

/* Sign-up proof (2026-09-26): the outfit photo and four of the pieces found
   in it, side by side and still — cause and effect in one glance, about
   150px tall instead of a full-height looping animation above the form. */
.auth-demo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 30px;
}
.auth-screen.is-signing-in .auth-demo { display: none; }
.auth-demo-side { margin: 0; }
.auth-demo-side figcaption {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 75%, var(--bg));
}
.auth-demo-photo {
  display: block;
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 10px;
}
.auth-demo-arrow {
  font-size: 20px;
  color: var(--muted);
  padding-bottom: 18px;
}
.auth-demo-pieces {
  display: grid;
  grid-template-columns: repeat(2, 60px);
  gap: 8px;
}
.auth-demo-pieces img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  padding: 6px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}

.auth-tabs {
  display: flex;
  gap: 22px;
  margin: -19px 0 26px;
}

.auth-tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  /* 44px to tap; the underline still sits under the word. */
  padding: 19px 0 8px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.auth-tabs button.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.auth-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(248, 241, 233, 0), var(--bg) 38%);
}
.auth-sticky[hidden] { display: none; }
.auth-sticky .btn-primary { margin: 0; min-height: 48px; }
@media (min-width: 641px) {
  .auth-sticky { display: none; }
}

.field::placeholder { color: var(--muted); }
#chat-input::placeholder { color: var(--muted); }
.field[hidden] { display: none; }
.auth-forgot { display: block; margin: 2px 0 12px auto; font-size: 13px; }
.auth-forgot[hidden] { display: none; }
.auth-notice { margin: 8px 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.field {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
  outline: none;
  transition: border-color var(--ease);
}

.field:focus { border-bottom-color: var(--ink); }

.auth-error { color: #8a3d3d; font-size: 13px; margin: 8px 0; }
.auth-error .auth-error-action { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }
.auth-mode-note { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.auth-mode-note[hidden], .auth-consent[hidden] { display: none; }
.auth-invite-ask { margin: 12px 0 0; font-size: 14px; text-align: center; color: var(--ink); }
.auth-invite-ask[hidden] { display: none; }
.auth-consent { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.auth-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.btn-primary {
  width: 100%;
  border: 0;
  background: var(--ink);
  color: var(--surface);
  border-radius: 0;
  padding: 13px 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 18px;
  transition: transform var(--ease), opacity var(--ease);
}

.btn-primary:hover { transform: translateY(-1px); }

/* Header — magazine masthead */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}

.brand {
  cursor: pointer;
  background: none;
  border: 0;
  text-align: left;
  padding: 0;
  color: inherit;
  justify-self: start;
}
.brand .brand-title {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand p {
  margin: 8px 0 0 2px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.nav-main {
  display: flex;
  gap: 28px;
  justify-content: center;
}

.nav-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--ease);
}

.nav-link.is-active {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  position: relative;
}

.add-clothes-btn {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

.header-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;
}

@media (min-width: 900px) {
  .header-chip { display: inline-flex; }
}

.avatar-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  cursor: pointer;
}

.profile-menu {
  position: absolute;
  right: 0;
  top: 40px;
  width: 248px;
  background: var(--bg);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 14px 4px 8px;
  z-index: 20;
}

.profile-menu p {
  margin: 0 0 6px;
  padding: 0 12px 10px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--line);
}

.profile-menu button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}

.profile-menu button:hover { background: transparent; color: var(--caramel-deep); }

.profile-menu-field {
  padding: 4px 12px 10px;
}

.profile-menu-field label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.profile-menu-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg);
  color: var(--ink);
}

.profile-menu-save {
  margin-top: 4px;
}


/* Closet */
#view-closet {
  --text-primary: #332A26;
  --text-secondary: #6F635C;
  --text-muted: #75604F;
  --text-count: #75604F;
  --text-eyebrow: #75604F;
}

.closet-hero {
  max-width: 50rem;
  margin: 0 auto 36px;
  text-align: center;
}

.closet-hero .eyebrow {
  color: var(--text-eyebrow);
  margin: 0 0 8px;
}

.closet-hero .hero-title {
  color: var(--text-primary);
  max-width: none;
  margin: 0 auto;
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 0.96;
  white-space: nowrap;
}

.closet-hero .hero-copy {
  margin: 26px auto 0;
  color: var(--text-muted);
  max-width: 36ch;
  text-align: center;
}

.closet-toolbar {
  margin-bottom: 0;
}

.closet-view-switch {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
}

.closet-view-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 0 5px;
  cursor: pointer;
}

.closet-view-btn:hover { color: var(--text-primary); }

.closet-view-btn:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 4px;
}

.closet-view-btn.is-active {
  color: var(--text-primary);
  box-shadow: inset 0 -1px 0 var(--text-primary);
}

.closet-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.closet-meta,
.closet-refine {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 2px 22px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.closet-meta::-webkit-scrollbar,
.closet-refine::-webkit-scrollbar { display: none; }

.closet-meta {
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 0 2px;
}

.closet-stat {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 8px 0 7px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 36px;
  font-weight: 400;
  transition: color var(--ease);
}

.closet-stat:hover { color: var(--text-primary); }

.closet-stat:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 5px;
}

.closet-stat.is-active {
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--text-primary);
}

.closet-stat-count {
  color: var(--text-count);
  font-weight: 400;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0;
  margin-right: 6px;
  text-transform: none;
  font-style: italic;
}

.closet-stat.is-active .closet-stat-count,
.closet-stat:hover .closet-stat-count {
  color: var(--text-count);
}

.closet-stat-label {
  font-weight: inherit;
}

.closet-refine {
  display: none;
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.closet-refine.is-on,
.closet-refine:not([hidden]) { display: flex; }

.closet-refine[hidden] { display: none !important; }

.closet-refine .closet-stat {
  padding: 3px 0 8px;
  min-height: 32px;
}

.closet-refine .closet-stat-count {
  font-size: 13px;
  margin-right: 4px;
  color: var(--text-count);
  font-style: italic;
}

.closet-refine .closet-stat.is-active {
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--text-primary);
}

.closet-refine .closet-stat.is-active .closet-stat-count,
.closet-refine .closet-stat:hover .closet-stat-count {
  color: var(--text-count);
}

.closet-refine .closet-stat:hover { color: var(--text-primary); }

.closet-context {
  margin: 14px 0 14px;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1;
}

.closet-context.is-idle {
  color: var(--text-count);
}

.closet-context[hidden] { display: none !important; }

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 0.92;
  margin: 0 0 14px;
  max-width: 12ch;
}

.hero-copy {
  max-width: 38ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.garment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 18px;
}

@media (min-width: 720px) {
  .garment-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 22px; }
}

@media (min-width: 1100px) {
  .garment-grid { grid-template-columns: repeat(4, 1fr); }
}

.garment-note {
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.85;
}

/* The upload check's advice on a preparing card (photoInputCheck). */
.garment-photo-tip {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink, #2b2b2b);
}

.garment-photo-tip-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
  min-height: 32px;
}

.garment-card {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}

.garment-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--warm);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 10% 8%;
}

.garment-media img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 240ms ease;
}

.garment-card.is-unresolved .garment-media {
  background: #ffffff;
  border: 1px dashed rgba(32, 31, 29, 0.16);
  padding: 0;
}

.garment-unresolved {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  text-align: center;
  padding: 16px;
}

.garment-unresolved span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 18ch;
}

.garment-unresolved-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.garment-unresolved-actions .icon-btn {
  opacity: 1;
  background: var(--ink);
  color: #fff;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.garment-card:hover .garment-media img { transform: scale(1.035); }

.garment-actions {
  position: absolute;
  inset: auto 10px 10px auto;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--ease), transform var(--ease);
}

.garment-card:hover .garment-actions { opacity: 1; transform: none; }

@media (hover: none) {
  .garment-actions { opacity: 1; transform: none; }
}

.icon-btn {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  box-shadow: none;
  font-size: 12px;
  padding: 0;
}

.icon-btn.style-this {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  background: var(--bg);
  padding: 6px 8px;
}

.garment-info { padding: 10px 2px 0; }
.garment-info h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.2;
}
.garment-info p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.empty-state, .loading-state { padding: 8px 0 0; }

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (min-width: 720px) {
  .skeleton-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .skeleton-grid { grid-template-columns: repeat(4, 1fr); }
}

.empty-state {
  text-align: left;
  padding: 12px 0 48px;
  max-width: 420px;
}

.empty-state h3 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  margin: 0 0 10px;
  line-height: 1;
}

.empty-state p { color: var(--muted); margin: 0 0 18px; line-height: 1.6; }

.empty-state .looks-empty-cta { margin-top: 4px; min-height: 44px; }
#empty-cta-basics { display: block; width: 100%; margin-top: 10px; min-height: 44px; }
#empty-cta-basics.hidden { display: none; }

.ghost-btn {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0 0 3px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 var(--ink);
}

.ghost-btn:hover { transform: translateY(-1px); }

.skeleton {
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--warm), var(--bg), var(--warm));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* A piece from the person's photo whose clean image is still being built:
   the card is already in its place, the image arrives on its own. */
.garment-card.is-preparing { cursor: default; }

.garment-card.is-preparing .garment-media {
  background: linear-gradient(90deg, var(--warm), var(--bg), var(--warm));
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border: 1px dashed rgba(32, 31, 29, 0.14);
  padding: 0;
}

.garment-preparing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.preparing-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.35;
  animation: preparing-pulse 1.4s ease-in-out infinite;
}

@keyframes preparing-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.25; }
  50% { transform: scale(1.15); opacity: 0.6; }
}

.garment-card.is-preparing .garment-info h3 { opacity: 0.75; }

/* Waiting for a photo of this piece alone (its photo's box held another
   garment): no shimmer, nothing is being built. */
.garment-card.is-asking { cursor: pointer; }
.garment-card.is-asking .garment-media { animation: none; background: var(--warm); }
.garment-card.is-asking .garment-preparing i { font-size: 22px; opacity: 0.35; }

/* In her closet with no picture yet (a shoe question): a neutral card,
   never her photo. */
.garment-card.is-placeholder .garment-media { background: var(--warm); }
.garment-card.is-placeholder .garment-preparing i { font-size: 22px; opacity: 0.35; }

/* A Gmail purchase still preparing: the picture its order email printed,
   softened, with a "Preparing" mark until the clean card replaces it. */
.garment-card.is-preparing.has-email-picture .garment-media { animation: none; background: #fff; border-style: solid; }
.garment-card.has-email-picture .garment-preparing { display: none; }
.garment-email-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; opacity: 0.82; }
/* A piece from her photo still preparing: a faded crop of the garment from
   that photo on a cream wash, clearly temporary, until the clean card
   replaces it (backend preparingPreview.js). */
.garment-card.is-preparing.has-preview-crop .garment-media { animation: none; background: var(--warm); border-style: dashed; }
.garment-card.has-preview-crop .garment-preparing { display: none; }
.garment-preview-crop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; opacity: 0.55; filter: saturate(0.85); }
.garment-preparing-badge { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 11px; letter-spacing: 0.02em; box-shadow: 0 0 0 1px var(--line); }
.garment-preparing-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ink); vertical-align: 1px; animation: preparing-pulse 1.4s ease-in-out infinite; }

/* "Is this the same piece you already added?" — the new card spans the row
   so both pictures sit side by side, large enough to compare. */
.garment-card.has-same-ask { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.garment-card.has-same-ask > .garment-media,
.garment-card.has-same-ask > .garment-info { display: none; }
.same-ask { border: 1px solid rgba(32, 31, 29, 0.12); border-radius: 4px; padding: 14px 14px 16px; background: var(--bg); cursor: default; }
.same-ask-q { margin: 0 0 12px; font-family: var(--serif, Georgia, serif); font-size: 21px; line-height: 1.2; font-weight: 400; }
.same-ask-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.same-ask-pics figure { margin: 0; }
.same-ask-frame { aspect-ratio: 3 / 4; background: var(--warm); border-radius: 2px; display: grid; place-items: center; padding: 10% 8%; overflow: hidden; }
.same-ask-frame img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.same-ask-pics figcaption { margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.same-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.same-ask-actions button { flex: 1 1 140px; min-height: 40px; }
@media (min-width: 720px) {
  .garment-card.has-same-ask { grid-column: span 2; }
}

/* Stylist */
#view-chat {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.stylist-hero {
  margin: 0 0 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.stylist-hero h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 0.94;
  margin: 0 0 12px;
  max-width: 14ch;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 36px;
}

.chip {
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  cursor: pointer;
  transition: color var(--ease);
}

.chip:hover {
  background: none;
  color: var(--caramel-deep);
  transform: none;
}

/* A conversation under way: the welcome folds to a title line and the
   suggestions to one row that scrolls sideways. */
#view-chat.is-conversing .stylist-hero {
  align-items: center;
  margin-bottom: 6px;
}
#view-chat.is-conversing .stylist-hero h2,
#view-chat.is-conversing .stylist-hero .hero-copy,
#view-chat.is-conversing .stylist-discovery-nudge { display: none; }
#view-chat.is-conversing .stylist-hero .eyebrow { margin: 0; }
#view-chat.is-conversing .stylist-fresh-btn { margin-top: 0; }
/* Nothing to start fresh from yet. */
#view-chat:not(.is-conversing) .stylist-fresh-btn { display: none; }
#view-chat.is-conversing .chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0 20px;
  margin: 0 0 28px;
  padding: 0 0 2px;
}
#view-chat.is-conversing .chips::-webkit-scrollbar { display: none; }
#view-chat.is-conversing .chip {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 17px;
  padding: 10px 0;
}

.chat-canvas {
  margin: 0;
  min-height: 0;
  padding-bottom: 88px;
}

.msg-user {
  margin: 0 0 22px auto;
  max-width: 70%;
  background: var(--caramel-deep);
  color: #f7f6f2;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.msg-ai.is-intro {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  max-width: 36ch;
}

#view-closet, #view-chat, #view-looks, #view-shopper {
  animation: fadeUp 220ms ease;
}

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

.look-board,
.outfit-collage {
  background: var(--warm);
  border-radius: 0;
  padding: 16px 12px 20px;
  margin: 0 0 16px;
  width: 100%;
  max-width: 800px;
  height: min(64vw, 620px);
  min-height: 420px;
  position: relative;
  overflow: hidden;
}

.look-board.is-single,
.outfit-collage.is-single { height: 320px; min-height: 280px; }

.look-card .look-board,
.look-card .outfit-collage {
  height: 280px;
  min-height: 240px;
  margin-bottom: 8px;
  padding: 10px 8px 14px;
}

#look-detail-board .look-board,
#look-detail-board .outfit-collage {
  height: min(70vw, 520px);
  min-height: 360px;
}

@media (max-width: 640px) {
  .look-board,
  .outfit-collage {
    height: min(92vw, 520px);
    min-height: 320px;
  }
}

.look-piece {
  position: absolute;
  object-fit: contain;
  max-height: 58%;
  background: transparent;
  filter: drop-shadow(0 14px 22px rgba(32, 31, 29, 0.1));
}

.outfit-collage-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
}

.outfit-collage-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 16px 26px rgba(32, 31, 29, 0.12));
  pointer-events: none;
}

.outfit-collage-item.is-outerwear img,
.outfit-collage-item.is-cover img,
.outfit-collage-item.is-framing img {
  opacity: 0.92;
}

.outfit-collage-item.is-top {
  align-items: flex-start;
}

.outfit-collage-item.is-bottom {
  align-items: flex-end;
  padding-bottom: 16%;
}

.outfit-collage-item.is-shoes {
  align-items: flex-end;
}

.outfit-collage-item.is-bag {
  align-items: center;
}

.outfit-collage-item.is-sunglasses,
.outfit-collage-item.is-jewelry,
.outfit-collage-item.is-watch,
.outfit-collage-item.is-hat,
.outfit-collage-item.is-scarf,
.outfit-collage-item.is-belt {
  pointer-events: auto;
}

/* The stylist's look as an outfit board (flatLayLayout in app.js): a very
   soft cream, portrait, pieces as worn and laid a little over each other.
   Each photo's white or light-grey backdrop is lifted to white and
   multiplied into the board (white x cream = cream, so no white boxes);
   cut-outs carry a soft, warm shadow so they read as photographed, not
   pasted. The board isolates the blend from the page. Keep the colours in
   step with boardCanvas (BOARD_BG, BOARD_SHADOW in app.js). */
:is(.outfit-collage, .look-board).is-board {
  --board-bg: #FBF6EF;
  height: auto;
  min-height: 0;
  aspect-ratio: 7 / 8;
  border-radius: 12px;
  max-width: 480px;
  padding: 0;
  background: var(--board-bg);
  isolation: isolate;
}
/* An opened saved look keeps the board's shape (the modal set its own height). */
#look-detail-board .look-board.is-board { height: auto; min-height: 0; margin: 0 auto 16px; }
:is(.outfit-collage, .look-board).is-board .outfit-collage-item {
  display: block;
  padding: 0;
  background: transparent;
  overflow: visible;
}
:is(.outfit-collage, .look-board).is-board .outfit-collage-item img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: contrast(1.08) brightness(1.05);
  mix-blend-mode: multiply;
  opacity: 1;
}
:is(.outfit-collage, .look-board).is-board .outfit-collage-item[data-align="top"] img { object-position: center top; }
:is(.outfit-collage, .look-board).is-board .outfit-collage-item[data-align="bottom"] img { object-position: center bottom; }
/* A cut-out is drawn as it is (its alpha does the cutting), so where it lies
   over another piece it covers it rather than multiplying through it. */
:is(.outfit-collage, .look-board).is-board .outfit-collage-item img.is-fitted {
  object-fit: fill;
  filter: drop-shadow(0 4px 6px rgba(102, 72, 46, 0.2));
  mix-blend-mode: normal;
}
/* A pale piece kept on its backdrop (lifted to white) still multiplies, so
   the backdrop melts into the cream; no shadow, which would draw its box. */
:is(.outfit-collage, .look-board).is-board .outfit-collage-item img.is-fitted.is-framed {
  filter: none;
  mix-blend-mode: multiply;
}
:is(.outfit-collage, .look-board).is-board .outfit-collage-item:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

.look-copy {
  margin: 0 0 14px;
}

.look-card-output {
  margin: 0 0 40px;
  max-width: 800px;
}

.look-context {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.look-title,
.look-occasion {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 16px;
}

.look-weather {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

.look-description {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
}

.look-tips {
  margin: -6px 0 16px;
  max-width: 62ch;
}
.look-tips-head {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.look-tips ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.look-tips li + li { margin-top: 4px; }

.outfit-debug {
  font-family: var(--sans, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  background: transparent;
  border: 0;
  margin: 0 0 16px;
  white-space: pre-wrap;
}

.look-card { margin-bottom: 8px; cursor: pointer; }

.look-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 10px 0 4px;
}

.look-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; letter-spacing: 0.04em; }

.looks-intro-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.looks-intro-row .hero-title { margin-bottom: 0; }

.look-add-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.look-add-btn:hover { color: var(--ink); }

.look-detail-card { max-width: 420px; }

#look-detail-board { margin-bottom: 12px; }

.look-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
  margin-bottom: 10px;
}

.look-text-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.look-text-btn:hover,
.look-text-btn.is-on { color: var(--ink); }

/* A look's actions: one filled "Save look", then three equal reactions at a
   full tap height. They were four 12px text links about 15px tall. */
.look-feedback { margin: 4px 0 36px; }

.look-feedback .look-save-btn {
  margin: 0;
  min-height: 44px;
}

.look-feedback .look-save-btn.is-on {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  cursor: default;
}

.look-feedback .look-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.look-react-btn {
  min-height: 48px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 4px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--ease);
}

.look-react-btn i { font-size: 14px; color: var(--muted); }
.look-react-btn:hover i,
.look-react-btn.is-on i { color: var(--ink); }
.look-react-btn.is-on { font-weight: 500; }
.look-react-btn:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -4px;
}

/* Reactions read as a question with three answers (2026-09-26): as a row of
   grey text links under the Save button, nobody used them. */
.look-react-ask {
  margin: 18px 0 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.look-feedback .look-actions {
  gap: 8px;
  border-bottom: 0;
}
.look-feedback .look-react-btn {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  gap: 5px;
  padding: 0 6px;
  font-size: 12.5px;
  white-space: nowrap;
}
.look-feedback .look-react-btn i { font-size: 12px; }
.look-feedback .look-react-btn i { color: var(--ink); }
/* At 320 px the three answers ("No es para mí") ran past the card and the
   page scrolled sideways: a label may wrap to two lines instead. */
.look-feedback .look-actions > * { min-width: 0; }
@media (max-width: 380px) {
  .look-feedback .look-react-btn {
    white-space: normal;
    line-height: 1.15;
    text-align: center;
    padding: 4px 8px;
  }
}
@media (max-width: 340px) {
  .look-feedback .look-react-btn i { display: none; }
}
.look-feedback .look-react-btn:hover { border-color: var(--ink); }
.look-feedback .look-react-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.look-feedback .look-react-btn.is-on i { color: var(--bg); }

.look-feedback .look-reason-link {
  display: block;
  margin: 12px 0 0;
  min-height: 24px;
  text-align: left;
}
.look-feedback .look-reason-link[hidden] { display: none; }

/* The reasons sheet: a bottom sheet on a phone, a small card elsewhere. */
.modal.is-sheet .sheet-card { padding-bottom: 22px; }
.modal.is-sheet .sheet-sub { margin: 8px 22px 16px; }
.modal.is-sheet .sheet-reasons,
.modal.is-sheet .sheet-note,
.modal.is-sheet .sheet-done { margin-left: 22px; margin-right: 22px; }
.modal.is-sheet .sheet-swap {
  display: block;
  width: calc(100% - 44px);
  margin: 14px 22px 0;
}
.modal.is-sheet .sheet-swap[hidden] { display: none; }
.look-wore-link {
  display: block;
  margin: 10px auto 0;
  font-size: 13px;
}
.look-wore-link:disabled {
  opacity: 0.6;
  cursor: default;
}
.modal.is-sheet .sheet-done { width: calc(100% - 44px); margin-top: 22px; min-height: 44px; }
.modal.is-sheet .sheet-reasons { margin-bottom: 18px; }
.modal.is-sheet .look-chip {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  color: var(--ink);
}
.modal.is-sheet .look-chip.is-on {
  background: var(--ink);
  color: var(--surface);
}
/* renderNoteBox names its host "look-note", replacing "sheet-note". */
.modal.is-sheet .look-note { margin: 0 22px; }
.modal.is-sheet .look-note-input { font-size: 16px; padding: 10px 0; }
.modal.is-sheet .look-piece-picker-hint { font-size: 12px; }

/* One piece of a look: its picture, then "Change this piece". */
.modal.is-sheet .piece-sheet-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin: 4px 22px 0;
  background: var(--surface);
}
.modal.is-sheet .piece-sheet-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.modal.is-sheet .piece-sheet-swap,
.modal.is-sheet .piece-sheet-details {
  display: block;
  width: calc(100% - 44px);
  min-height: 48px;
  margin: 0 22px;
}
.modal.is-sheet .piece-sheet-details { margin-top: 8px; }
.modal.is-sheet .piece-sheet-details[hidden] { display: none; }
/* "Cancelar esta prenda" on a Preparando card: the name, one line, one button. */
.modal.is-sheet #cancel-preparing-title { text-transform: capitalize; }
.modal.is-sheet .cancel-preparing-btn {
  display: block;
  width: calc(100% - 44px);
  min-height: 48px;
  margin: 4px 22px 0;
}

@media (max-width: 640px) {
  .modal.is-sheet {
    align-items: flex-end;
    padding: 0;
  }
  .modal.is-sheet .sheet-card {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(24px);
    transition: transform 220ms ease;
  }
  .modal.is-sheet.is-open .sheet-card { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.is-sheet .sheet-card { transition: none; transform: none; }
}

.look-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.look-chip {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
}

.look-chip.is-on {
  color: var(--ink);
  border-color: var(--ink);
}

.look-why {
  margin: -20px 0 6px;
}

.look-why-toggle {
  border: 0;
  background: transparent;
  /* Padding, not size, makes the tap target: the link reads small but a
     finger gets 44px. */
  padding: 14px 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.look-why-toggle:hover,
.look-why-toggle[aria-expanded="true"] { color: var(--ink); }

.look-why-body {
  margin: 26px 0 -6px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  /* 5.7:1 on the page background; the muted tone was 3.9:1. */
  color: color-mix(in srgb, var(--ink) 75%, var(--bg));
}

.look-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -16px 0 28px;
}

.look-note-input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 6px 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

.look-note-input::placeholder { color: var(--muted); }

.look-note-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.look-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 22px;
}

.look-handoff-note {
  margin: 0;
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.look-handoff-btn {
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.look-handoff-btn:hover,
.look-handoff-btn:focus-visible {
  background: var(--ink);
  color: var(--surface);
  outline: none;
}

.look-piece-picker {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.look-piece-picker-hint {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.look-piece-pick {
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  opacity: 0.85;
}

.look-piece-pick img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.look-piece-pick.is-on {
  border-color: var(--ink);
  opacity: 1;
  box-shadow: 0 0 0 1px var(--ink);
}

.import-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 28px;
}

.import-thumbs img {
  width: 72px;
  height: 92px;
  object-fit: contain;
  background: var(--warm);
  cursor: pointer;
}

.import-thumbs img {
  width: 72px;
  height: 92px;
  object-fit: contain;
  background: var(--warm);
  cursor: pointer;
}

.image-action-row {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin: 0 0 18px;
}

.image-action-row .ghost-btn {
  font-size: 12px;
}

.composer-wrap {
  position: sticky;
  bottom: 20px;
  z-index: 8;
}

.composer-wrap.is-drop-target {
  outline: 1px dashed var(--ink);
  outline-offset: 6px;
}

.composer-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.composer-previews[hidden] {
  display: none;
}

.composer-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, white);
  flex-shrink: 0;
}

.composer-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-preview-file {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  word-break: break-word;
}

.composer-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
  padding: 0;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: color-mix(in srgb, var(--bg) 88%, white);
  backdrop-filter: blur(14px);
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 6px 0;
  box-shadow: none;
}

.composer textarea {
  flex: 1;
  border: 0;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 15px;
  padding: 8px 4px;
  max-height: 120px;
  color: var(--ink);
}

/* An empty box never scrolls: a hint too long for it showed a scrollbar. */
.composer textarea:placeholder-shown { overflow-y: hidden; }

.attach {
  width: 36px;
  height: 36px;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
}

.send-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
}

.file-label {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.stylist-fresh-btn {
  flex-shrink: 0;
  margin-top: 8px;
}

.stylist-status {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

/* A question in flight: the answer's place in the thread, held open. */
#chat-thread .msg-user { scroll-margin-top: 16px; }

/* Tall enough that the question above it can scroll to the top of the
   page even when it is the last thing in the thread. */
.stylist-pending { min-height: 70vh; }

.stylist-pending-board {
  height: 240px;
  margin: 14px 0 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, var(--warm), var(--bg), var(--warm));
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

.stylist-pending-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .stylist-pending-board,
  .stylist-pending-board .preparing-dot { animation: none; }
}

.looks-intro { margin-bottom: 36px; }
.looks-intro .hero-title { max-width: none; }

.looks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 40px;
}

@media (min-width: 800px) {
  .looks-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--bg) 92%, white);
  backdrop-filter: blur(16px);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 8px 14px;
  z-index: 30;
  justify-content: space-around;
}

.mobile-nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px;
  cursor: pointer;
}

.mobile-nav button.is-active {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--ink);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--surface);
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast img { width: 28px; height: 28px; object-fit: contain; border-radius: 0; background: transparent; }
/* A toast with no picture showed an empty square: an img display rule beat [hidden]. */
.toast img[hidden] { display: none; }

/* "N photos added · Undo" right after an Add clothes batch (app.js offerUploadUndo). */
.upload-undo {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  /* Above the Add clothes sheet (the batch pane stays open after uploads),
     below the full-screen camera and closet scan. */
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 8px 8px 8px 16px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 2px;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.upload-undo[hidden] { display: none; }
.upload-undo-msg { flex: 1 1 auto; min-width: 0; }
.upload-undo-btn {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.upload-undo-btn:disabled { opacity: 0.6; cursor: default; }
.upload-undo-close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(32, 31, 29, 0.22);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.modal.is-open { opacity: 1; pointer-events: auto; }
/* The membership sheet can open from inside the camera or the scan (the
   free trial's piece limit, backend/trialPieces.js), so it sits above them. */
#membership-modal { z-index: 1300; }

.modal-card {
  width: min(400px, 100%);
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 22px 0;
}

.modal-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  font-size: 30px;
}

.icon-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
}

.modal-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--warm);
  display: grid;
  place-items: center;
  margin: 16px 0 0;
  border-radius: 0;
  overflow: hidden;
}

.modal-visual img { max-height: 100%; object-fit: contain; padding: 24px; }
.modal-visual img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }

.img-toggle[hidden] { display: none !important; }

.img-toggle {
  position: absolute;
  bottom: 14px;
  right: 16px;
  color: var(--ink);
  background: var(--bg);
  padding: 4px 0;
}

.fade { opacity: 0; pointer-events: none; }

.modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 22px 12px;
}
.modal-meta div {
  flex: 1 1 40%;
  min-width: 140px;
  text-align: left;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.onboard-promise {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
#onboard-work-detail[hidden] { display: none; }
.modal-meta .modal-meta-name { flex-basis: 100%; }
.modal-meta .modal-meta-name[hidden] { display: none; }
.modal-meta .modal-meta-name strong { text-transform: none; line-height: 1.4; }
.modal-meta strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0;
  font-size: 13px;
}
.modal-meta select.meta-select {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 0 6px;
  outline: none;
  cursor: pointer;
}

.danger {
  margin: 4px 22px 22px;
  width: auto;
  border: 0;
  background: none;
  color: #8a3d3d;
  border-radius: 0;
  padding: 0 0 3px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modal-card.is-confirm { padding: 32px 28px; text-align: left; }
.modal-card.is-confirm h3 {
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 8px;
}
.confirm-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}
.confirm-actions .btn-primary {
  width: auto;
  margin: 0;
  padding: 10px 18px;
}

.import-card {
  width: min(440px, 100%);
  padding-bottom: 24px;
  max-height: min(88vh, 760px);
  overflow: auto;
}
.import-pane { padding: 8px 22px 0; }
.import-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}
.import-choice {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 15px;
}
/* Photo first: one button a person can act on in twenty seconds, the
   other routes as quiet links under it. */
.import-lead { margin: 4px 0 0; }
/* Camera on phones, upload everywhere else — same sheet, two openers. */
.only-touch { display: none !important; }
body.is-touch .only-touch { display: block !important; }
body.is-touch .only-pointer { display: none !important; }
.import-library {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}
.import-primary {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.import-actions .import-tip {
  margin: 0;
  text-align: center;
}
.import-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 6px;
}
.import-choice--secondary {
  padding: 6px 0;
  border-bottom: 0;
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.import-gmail-link {
  padding-left: 0;
  padding-right: 0;
}

/* "More ways to add": every route after the outfit photo, as one list in one
   style (they were a ghost button, links and a banner). */
.import-more {
  margin: 4px 0 0;
  border-top: 1px solid var(--line);
}
.import-more-toggle {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.import-more-toggle::-webkit-details-marker { display: none; }
.import-more-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}
.import-more[open] .import-more-toggle::after { transform: rotate(-135deg) translateY(-2px); }
.import-more-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.import-more-body .import-choice {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0;
  color: var(--ink);
  font-size: 15px;
}
.import-more-body .import-auto { border-top: 0; padding-top: 14px; }
/* .import-choice--button clears its border for older layouts; the list
   wants every row divided alike. */
.import-more-body .import-choice--button { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .import-more-toggle::after { transition: none; }
}
.import-drop {
  margin: 16px 0 8px;
  padding: 28px 16px;
  border: 1px dashed var(--taupe);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.import-drop.is-drop-target {
  border-color: var(--ink);
  color: var(--ink);
}
/* Nothing to drag on a touch screen. */
@media (hover: none) and (pointer: coarse) {
  .import-drop {
    display: none;
  }
}
.import-steps {
  list-style: none;
  padding: 12px 0 8px;
  margin: 0;
  color: var(--muted);
}
.import-steps li { margin: 0 0 10px; }
.import-steps li.is-current { color: var(--ink); }
.import-steps li.is-done { color: var(--caramel-deep); }
.import-result-line {
  margin: 0 0 6px;
  font-size: 18px;
  font-family: var(--serif);
}
.import-result-sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
}
.import-result-muted {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
}
.import-match-progress {
  height: 3px;
  margin: 0 0 16px;
  overflow: hidden;
  background: var(--line);
  border-radius: 99px;
}
.import-match-progress.hidden { display: none; }
.import-match-bar {
  width: 0;
  height: 100%;
  background: var(--ink);
  border-radius: 99px;
  transition: width 0.45s ease;
}
.import-match-progress.is-active .import-match-bar {
  background: var(--sage, #6f8f72);
  animation: import-match-pulse 1.6s ease-in-out infinite;
}
@keyframes import-match-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.import-ready-thumbs {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 4px 0 14px;
  margin: 0;
  overflow-x: auto;
}
.import-ready-thumbs.hidden { display: none; }
/* "Add" in the Gmail review: each purchase, its email picture and status. */
.import-gmail-pieces { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.import-gmail-pieces.hidden { display: none; }
.import-gmail-piece { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.import-gmail-piece img { width: 56px; height: 72px; object-fit: contain; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.import-gmail-piece.is-preparing img { opacity: 0.8; }
.import-gmail-piece-text { display: grid; gap: 2px; min-width: 0; }
.import-gmail-piece-text strong { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-gmail-piece-status { font-size: 12px; color: var(--muted); }
.import-gmail-piece.is-ready .import-gmail-piece-status { color: var(--ink); }
.import-gmail-piece.is-preparing .import-gmail-piece-status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ink); vertical-align: 1px; animation: preparing-pulse 1.4s ease-in-out infinite; }
.import-ready-thumbs img {
  width: 72px;
  height: 96px;
  object-fit: contain;
  background: #f4f1ec;
  border-radius: 8px;
}
.import-rotating-copy {
  min-height: 1.4em;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.import-rotating-copy.hidden { display: none; }
.import-details-toggle {
  display: inline-block;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.import-details-toggle.hidden { display: none; }
.import-pending-names {
  list-style: none;
  padding: 4px 0 16px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.import-pending-names.hidden { display: none; }
.import-pending-names li { margin: 0 0 4px; }
.import-result-actions { margin-top: 12px; }
.import-review-list {
  list-style: none;
  padding: 10px 0 8px;
  margin: 0;
  max-height: 360px;
  overflow: auto;
}
.import-review-row {
  display: grid;
  grid-template-columns: 18px 64px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.import-review-row img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--line);
}
.import-review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.import-review-meta strong { font-size: 14px; }
.import-review-meta span {
  color: var(--muted);
  font-size: 12px;
}
.import-section-title {
  margin: 18px 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.import-auto {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.import-gmail-note {
  color: var(--muted);
  font-size: 13px;
}
.gmail-connected-box {
  margin: 12px 0 8px;
}
.gmail-review-groups {
  max-height: 360px;
  overflow: auto;
  margin: 8px 0 12px;
}
.gmail-order-group {
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.gmail-order-head {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}
.gmail-candidate {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: start;
  margin: 0 0 12px;
}
.gmail-candidate img {
  width: 56px;
  height: 72px;
  object-fit: cover;
  background: #eee;
  border-radius: 4px;
}
.gmail-candidate h5 {
  margin: 0 0 2px;
  font-size: 15px;
}
.gmail-candidate .gmail-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.gmail-status-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.gmail-select-actions { margin: 8px 0; }
.gmail-edit-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.gmail-edit-fields input {
  width: 92px;
  font-size: 12px;
  padding: 4px 6px;
}
.import-photo-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  max-height: min(58vh, 520px);
  overflow: auto;
}
.import-photo-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.import-candidate-preview {
  display: block;
  width: 140px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper, #f7f4ef);
}
.import-candidate-copy {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink, #1a1a1a);
}
.import-photo-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.import-photo-name {
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.import-candidate-title {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.import-candidate-source {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.import-candidate-source a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.closet-pending-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper, #f7f4ef);
}
.closet-pending-banner[hidden] {
  display: none;
}

/* One banner at a time. They sit in priority order in the page (a piece
   that needs you, then Gmail); any banner after a visible one waits its
   turn. The nudges (.closet-promo: stylist, style discovery, install, Shop,
   morning note, dark colours) are gated separately, one at a time, by
   closetPromos.js, so they never hide a banner about her pieces. */
#view-closet .closet-pending-banner:not(.closet-promo):not([hidden]) ~ .closet-pending-banner:not(.closet-promo) {
  display: none;
}

/* Photos that gave nothing, kept to try again: quiet, beside the banners. */
.kept-uploads-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 20px;
  padding: 14px 40px 14px 14px;
  border: 1px solid var(--line);
  background: var(--paper, #f7f4ef);
}
.kept-uploads-card[hidden] {
  display: none;
}
.kept-uploads-thumbs {
  display: flex;
  flex: 0 0 auto;
}
.kept-uploads-thumbs img {
  width: 44px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--surface);
  background: var(--warm);
}
.kept-uploads-thumbs img + img {
  margin-left: -16px;
}
.kept-uploads-body {
  min-width: 0;
}
.kept-uploads-card p {
  margin: 0;
}
.kept-uploads-title {
  font-size: 14px;
  color: var(--ink);
}
.kept-uploads-note {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}
.kept-uploads-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 8px;
}
.kept-uploads-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.import-kept-note {
  color: var(--muted);
  font-size: 14px;
}
.import-kept-note[hidden] {
  display: none;
}

/* The quiet line for pieces that are not being prepared right now. */
.closet-waiting-note {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.closet-waiting-note[hidden] {
  display: none;
}
.closet-waiting-note .link-btn {
  font-size: 13px;
  white-space: nowrap;
}

.closet-pending-banner .closet-pending-see {
  margin-left: 6px;
  white-space: nowrap;
}

/* A closet with pieces opens on them: the welcome folds to its eyebrow. */
#view-closet.has-pieces .closet-hero {
  margin: 0 0 14px;
  text-align: left;
}
#view-closet.has-pieces .closet-hero .hero-title,
#view-closet.has-pieces .closet-hero .hero-copy {
  display: none;
}

/* Filters over nothing ("0 All · 0 Tops") are noise; they wait for pieces. */
#view-closet.is-empty .closet-toolbar {
  display: none;
}

/* Pieces still being prepared follow the ready ones, under their own line. */
.closet-preparing-head {
  grid-column: 1 / -1;
  margin: 12px 0 -8px;
  scroll-margin-top: 16px;
}
.closet-pending-banner p {
  margin: 0;
  font-size: 14px;
}
.import-photo-brand,
.import-photo-price {
  color: var(--muted);
  font-size: 13px;
}
.import-photo-copy strong {
  font-size: 18px;
}
.import-photo-copy span {
  color: var(--muted);
  font-size: 13px;
}
.import-photo-actions {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
  isolation: isolate;
}
.import-confirm-actions {
  flex: 1 0 100%;
  position: relative;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}
.import-photo-actions button,
.import-confirm-actions button {
  position: relative;
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
}
.import-photo-actions .btn-primary,
.import-confirm-actions .btn-primary {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
}
.import-photo-actions button:disabled,
.import-confirm-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}
.import-photo-row label {
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
}
.garment-media img[hidden] {
  display: none;
}
.garment-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .app-header {
    display: flex;
    margin-bottom: 28px;
  }
  .nav-main { display: none; }
  .mobile-nav { display: flex; }
  .app-shell { padding: 16px 18px 108px; }
  .composer-wrap {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: 64px;
    max-width: none;
    margin: 0;
  }
  .toast { bottom: 72px; }
  .chat-canvas { padding-bottom: 140px; }
  /* The suggestion row runs to the screen edges, so a cut-off chip shows
     there is more to scroll. */
  #view-chat.is-conversing .chips {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
    scroll-padding-left: 18px;
  }
  .hero-title { max-width: none; }
  .closet-hero { margin-bottom: 28px; }
  .closet-hero .hero-title { font-size: 34px; white-space: nowrap; }
  .closet-hero .hero-copy { margin-top: 20px; }
}

@media (max-width: 640px) {
  .app-header { margin-bottom: 22px; padding-bottom: 14px; }
  .hero-title { font-size: 40px; }
  .garment-grid { gap: 28px 12px; }
  .closet-meta,
  .closet-refine { gap: 2px 16px; flex-wrap: nowrap; }
  .closet-stat { padding: 10px 0 8px; min-height: 40px; }
  .closet-refine .closet-stat { padding: 4px 0 10px; min-height: 36px; }
  .closet-context { margin: 16px 0 14px; font-size: 16px; }
  /* The tagline under the wordmark stays one line beside the header
     buttons (it wrapped to three at 375 px in Spanish). */
  .brand { min-width: 0; }
  .brand p { white-space: nowrap; letter-spacing: 0.18em; font-size: 10px; }
}
/* Too narrow for the tagline and the buttons on one row: the wordmark alone. */
@media (max-width: 430px) {
  .brand p { display: none; }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(32, 31, 29, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 24px;
}

.lightbox[hidden] { display: none !important; }

.lightbox img {
  max-width: 94vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: 0;
  background: transparent;
  color: #f7f6f2;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-open {
  position: absolute;
  bottom: 18px;
  right: 20px;
  color: #f7f6f2;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 246, 242, 0.5);
}

.expandable-image {
  cursor: pointer;
  transition: opacity var(--ease);
}

.expandable-image:hover { opacity: 0.92; }

.onboard-later {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 61;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid var(--muted);
  padding: 4px 0;
}
.style-discovery-card {
  flex-wrap: wrap;
}
.style-discovery-card p {
  flex: 1 1 260px;
}
.style-discovery-actions {
  display: flex;
  gap: 16px;
}
#install-card [hidden] {
  display: none;
}
.stylist-discovery-nudge {
  margin-top: 10px;
}
.link-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.onboard {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 32px 20px 48px;
  overflow-y: auto;
}

.onboard-panel { width: min(440px, 100%); }

.onboard-meter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 61;
  pointer-events: none;
}
.onboard-meter[hidden] { display: none; }
.onboard-meter-track {
  height: 2px;
  background: var(--line);
}
.onboard-meter-fill {
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 260ms ease;
}
.onboard-meter-label {
  position: absolute;
  top: 18px;
  left: 20px;
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The meter sits where the first line of a step began. */
.onboard:has(.onboard-meter:not([hidden])) { padding-top: 64px; }
@media (prefers-reduced-motion: reduce) {
  .onboard-meter-fill { transition: none; }
}

.appearance-shapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 22px;
}

.appearance-shape {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 12px 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.appearance-shape svg {
  width: 64px;
  height: 108px;
}

.appearance-shape span {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
}

.appearance-shape.is-on {
  border-color: var(--ink);
  color: var(--ink);
}

.appearance-selfie-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 8px 0 10px;
}

.appearance-review {
  margin: 18px 0 22px;
}

.appearance-review-line {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 10px;
  white-space: pre-line;
}

.appearance-keep {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
}
.onboard-panel-wide { width: min(560px, 100%); }

.onboard-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 8px;
}

.onboard-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.onboard-choice {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.onboard-choice.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.onboard-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.onboard-skip-all {
  display: block;
  margin: 12px auto 0;
}

.onboard-skip-look {
  display: block;
  margin: 12px auto 0;
  color: var(--muted);
  box-shadow: inset 0 -1px 0 var(--muted);
}

.onboard-env-row {
  border-bottom: 1px solid var(--line);
  padding: 12px 0 16px;
}

.onboard-env-row h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
}

.onboard-env-row select.field {
  margin-bottom: 10px;
}

.onboard-env-row textarea.field {
  min-height: 48px;
  resize: vertical;
}

.onboard-cta { width: auto; min-width: 180px; margin: 28px 0 16px; }

.onboard-progress {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.swipe-stage {
  height: min(62vh, 520px);
  display: grid;
  place-items: center;
}

.swipe-card {
  width: min(320px, 100%);
  height: 100%;
  max-height: 520px;
  background: var(--warm);
  overflow: hidden;
  touch-action: pan-y;
  transition: transform 220ms ease, opacity 220ms ease;
}

.swipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  pointer-events: none;
}

/* "¿Para quién es tu clóset?" (style discovery and before the first basics). */
.onboard-for-choices,
.basics-for .onboard-choices { margin-top: 16px; }

/* A look whose picture has not arrived yet: its name on the plain card. */
.swipe-card { position: relative; }
.swipe-missing-label { display: none; }
.swipe-card.is-missing img { visibility: hidden; }
.swipe-card.is-missing .swipe-missing-label {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ink);
}

.swipe-card.is-out-right { transform: translateX(40%) rotate(6deg); opacity: 0; }
.swipe-card.is-out-left { transform: translateX(-40%) rotate(-6deg); opacity: 0; }

.swipe-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.onboard-love { width: auto; margin: 0; min-width: 140px; }

.onboard-reveal-line {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.35;
}

/* Smart Shopper */
#view-shopper {
  max-width: 1080px;
  margin: 0 auto;
}

.shopper-empty {
  margin: 0 0 48px;
}

.shopper-empty .hero-title {
  max-width: 12ch;
}

.shopper-empty .hero-copy {
  max-width: 46ch;
  margin-top: 18px;
}

.shopper-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 36px 0 0;
}

/* Saved: one quiet link beside the Shop heading; the list opens in a sheet.
   (As a section under the starters it took over the screen.) */
.shopper-empty { position: relative; }
.shopper-saved-link {
  position: absolute;
  top: -12px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.shopper-saved-link[hidden] { display: none; }
.shopper-saved-link i { font-size: 14px; }
.shopper-saved-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.shopper-saved-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 20px;
  text-align: center;
}
.shopper-saved-list {
  list-style: none;
  margin: 10px 22px 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.shopper-saved-list .shopper-saved-item:last-child { border-bottom: 0; }
.shopper-saved-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.shopper-saved-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.shopper-saved-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shopper-saved-copy { flex: 1; min-width: 0; }
.shopper-saved-copy .shopper-brand { margin: 0 0 2px; }
.shopper-saved-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.shopper-saved-copy .shopper-meta { margin: 4px 0 0; }
.shopper-saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 2px;
}
.shopper-saved-actions .ghost-btn {
  position: relative;
  text-decoration: none;
}
/* Full-size tap areas without changing how the links look. */
.shopper-saved-actions .ghost-btn::before {
  content: '';
  position: absolute;
  inset: -14px -8px;
}
.shopper-saved-remove { color: var(--muted); box-shadow: inset 0 -1px 0 var(--muted); }

.shopper-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
}
.shopper-market[hidden] { display: none; }
.shopper-market-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6f6259);
  margin-right: 2px;
}
.shopper-market-option {
  border: 1px solid var(--line, #e3dbd2);
  background: transparent;
  color: var(--ink, #3a2f28);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.shopper-market-option.is-active {
  background: var(--ink, #3a2f28);
  border-color: var(--ink, #3a2f28);
  color: var(--bg, #fbf7f2);
}

.shopper-starter {
  border: 0;
  background: transparent;
  padding: 8px 0;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  cursor: pointer;
  min-height: 44px;
}

.shopper-starter.is-soon {
  color: var(--muted);
  cursor: default;
  font-style: italic;
}

.shopper-starter.is-soon span {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}

.shopper-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 8px 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  cursor: pointer;
}

.shopper-back.hidden {
  display: none;
}

.shopper-decision-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shopper-decision-list li {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.45;
}

/* Under a look the closet has no shoes for: what would finish it. */
.shopper-outfit-finish {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 12px 0 0;
}
.shopper-outfit-finish-copy { margin: 0; font-size: 14px; color: var(--muted); }
.shopper-outfit-finish-btn { position: relative; }
.shopper-outfit-finish-btn::before { content: ''; position: absolute; inset: -14px -8px; }

.shopper-outfit-card {
  margin: 0 0 22px;
}

.shopper-outfit-label {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
}

.shopper-outfit-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.shopper-outfit-piece {
  margin: 0;
  flex: 0 0 108px;
  width: 108px;
  cursor: pointer;
}

.shopper-outfit-media {
  background: color-mix(in srgb, var(--sand) 70%, white);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.shopper-outfit-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shopper-outfit-name {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.shopper-loading {
  min-height: 28vh;
  display: flex;
  align-items: flex-end;
  padding: 48px 0 64px;
}

.shopper-stage {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}

.shopper-recover {
  margin: 0 0 40px;
  max-width: 36ch;
}

.shopper-recover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}

.shopper-inline-btn {
  width: auto;
  margin: 0;
  min-width: 160px;
}

.shopper-composer-wrap {
  margin-top: 28px;
  position: relative;
  z-index: 4;
  max-width: 640px;
}

.shopper-use {
  margin: 0 0 18px;
}

.shopper-use.is-hidden {
  display: none;
}

.shopper-use-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.shopper-use-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopper-use-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer;
}

.shopper-use-chip.is-active {
  border-color: var(--ink);
  color: var(--ink);
}

.shopper-attach,
.shopper-send {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.shopper-url-note {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.shopper-hero {
  display: grid;
  gap: 32px;
  margin: 0 0 40px;
  align-items: start;
}

.shopper-visual {
  background: var(--warm);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 8%;
}

.shopper-visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shopper-visual.is-loading {
  animation: shopper-visual-wait 1.4s ease-in-out infinite alternate;
}
@keyframes shopper-visual-wait {
  from { opacity: 1; }
  to { opacity: 0.6; }
}
/* No picture loaded: a slim line, not a large empty frame. */
.shopper-visual.is-missing {
  aspect-ratio: auto;
  width: auto;
  padding: 12px 14px;
  place-items: start;
  border: 1px dashed var(--line);
  background: transparent;
}
.shopper-visual-missing {
  font-size: 13px;
  color: var(--muted);
}

.shopper-brand {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.shopper-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  margin: 0 0 10px;
}

.shopper-meta {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
}

.shopper-score {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.shopper-summary {
  margin: 0;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

.shopper-section {
  margin: 0 0 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.shopper-kicker {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
}

.shopper-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 48ch;
}

.shopper-reasons li {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.shopper-owned.is-prominent {
  background: var(--surface);
  margin-left: -16px;
  margin-right: -16px;
  padding: 28px 16px 8px;
  border-top: 1px solid var(--ink);
}

.shopper-owned-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 0 12px;
  -webkit-overflow-scrolling: touch;
}

.shopper-owned-card {
  flex: 0 0 148px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.shopper-owned-card .garment-media {
  aspect-ratio: 3 / 4;
  pointer-events: none;
}

.shopper-owned-name {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shopper-owned-why {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted, #8a8178);
}

.shopper-look {
  margin: 0 0 22px;
}

.shopper-look-occasion {
  font-family: var(--serif);
  font-size: 28px;
  margin: 0 0 10px;
}

.shopper-look .look-board,
.shopper-look .shopper-board {
  height: 280px;
  min-height: 240px;
  max-width: none;
}

.shopper-count-line {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.shopper-context.is-global .shopper-kicker,
.shopper-context.is-global .shopper-context-copy {
  color: var(--ink);
}

.shopper-context-copy,
.shopper-context-keep,
.shopper-conflict-copy,
.shopper-partial {
  margin: 0 0 10px;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.55;
}

.shopper-partial {
  color: var(--muted);
  margin: -12px 0 32px;
}

.shopper-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.shopper-choice {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer;
}

.shopper-choice.is-active {
  border-color: var(--ink);
}

.shopper-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding-top: 12px;
  margin: 8px 0 28px;
}

.shopper-actions .btn-primary,
.shopper-actions .ghost-btn {
  min-height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.shopper-later {
  display: flex;
  gap: 18px;
  margin-left: auto;
}

.shopper-later-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 0;
  min-height: 44px;
  white-space: nowrap;
}

.shopper-debug {
  margin: 12px 0 40px;
  color: var(--muted);
  font-size: 12px;
}

.shopper-debug pre {
  white-space: pre-wrap;
  font-size: 11px;
  line-height: 1.45;
  background: var(--surface);
  padding: 12px;
  overflow: auto;
}

.shopper-starter.is-active {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.shopper-composer-wrap.is-compare {
  max-width: 920px;
}

.shopper-compare-composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.shopper-compare-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shopper-slot-label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.shopper-slot-form {
  position: relative;
  bottom: auto;
}

.shopper-compare-go {
  align-self: flex-start;
  min-width: 160px;
}

.shopper-pick {
  margin: 0 0 40px;
}

.shopper-compare-hero {
  margin-top: 12px;
}

/* The compare table: a row per question, the two products in columns, the
   better side marked. */
.shopper-compare-table {
  display: grid;
  margin: 0 0 18px;
  border-top: 1px solid var(--line);
}
.shopper-compare-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.8fr) 1fr 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.shopper-compare-row.is-head { padding: 10px 0 12px; }
.shopper-compare-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 1px;
}
.shopper-compare-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.shopper-compare-cell.is-missing .shopper-compare-value { color: var(--muted); font-style: italic; }
.shopper-compare-cell.is-better .shopper-compare-value { font-weight: 600; }
.shopper-compare-cell.is-pick .shopper-compare-col-label { color: var(--ink); font-weight: 600; }
.shopper-compare-better {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.shopper-compare-table .shopper-compare-col-title {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.shopper-compare-pieces { display: flex; gap: 4px; }
.shopper-compare-pieces img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
}

/* "What size do you wear in shoes?" with the store's sizes as the answers. */
.shopper-size-ask { margin: 14px 0 6px; }
.shopper-size-question { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.shopper-size-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shopper-size-chip {
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.shopper-size-chip.is-on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.shopper-size-chip:disabled { opacity: 0.6; cursor: default; }
.shopper-size-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.shopper-size-line.is-missing { color: var(--muted); }
.shopper-size-change {
  display: inline-block;
  min-height: 44px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.shopper-compare-diffs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 12px;
}

.shopper-compare-col-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

/* Each product in "The difference" is its own block: a line above, a small
   A/B label (the pick marked), the name set bold. */
.shopper-compare-col {
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding-top: 14px;
}
.shopper-compare-col.is-pick { border-top: 2px solid var(--ink); }
.shopper-compare-col-label {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 75%, var(--bg));
}
.shopper-compare-col.is-pick .shopper-compare-col-label { color: var(--ink); font-weight: 500; }
.shopper-compare-col .shopper-compare-col-title { font-weight: 600; }

/* In the comparison the product name is the heading and its reasons are
   body text (2026-09-26): the reasons were 26px serif under a 22px name. */
.shopper-compare-col .shopper-reasons li {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 8px;
  padding-left: 16px;
  position: relative;
}
.shopper-compare-col .shopper-reasons li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--muted);
}
.shopper-compare-col .shopper-reasons li.is-quiet { color: var(--muted); }

.shopper-compare-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 8px;
}

.shopper-compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 12px 0 36px;
}

.shopper-compare-card {
  min-width: 0;
}

.shopper-compare-visual {
  margin-bottom: 16px;
  max-width: 220px;
}

.shopper-reasons .is-quiet {
  color: var(--muted);
  list-style: none;
}

.shopper-compare-composer.hidden,
.shopper-colors-composer.hidden {
  display: none;
}

.shopper-composer-wrap.is-colors {
  max-width: 720px;
}

.shopper-colors-composer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.shopper-colors-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 52ch;
}

.shopper-color-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shopper-color-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 10px;
  align-items: center;
}

.shopper-color-visual {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}

.shopper-color-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopper-color-swatch {
  width: 100%;
  height: 100%;
}

.shopper-color-row input[type="text"],
.shopper-color-row input[type="url"] {
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  min-height: 44px;
}

.shopper-color-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.shopper-colors-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.shopper-color-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin: 18px 0 8px;
}

.shopper-color-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.shopper-color-choice.is-active .shopper-color-choice-visual {
  outline: 2px solid var(--ink, #1a1a1a);
  outline-offset: 3px;
}

.shopper-color-choice img,
.shopper-color-choice .shopper-color-swatch,
.shopper-color-choice-visual {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface);
}

.shopper-color-choice-visual {
  overflow: hidden;
}

.shopper-color-choice-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
}

.shopper-color-alt {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 22px;
}

.shopper-color-alt-visual {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.shopper-color-alt-visual img,
.shopper-color-alt-visual .shopper-color-swatch {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopper-color-alt-rank {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 22px;
}

.shopper-color-alt-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.shopper-personal-color {
  margin: 8px 0 28px;
}

.shopper-gap {
  max-width: 640px;
}

.shopper-gap-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 18px;
}

.shopper-gap-lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  max-width: 46ch;
}

.shopper-gap-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 36px;
}

.shopper-gap-card {
  padding: 0 0 36px;
  margin: 0 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.shopper-gap-card:last-of-type {
  border-bottom: 0;
}

.shopper-gap-card-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.shopper-gap-rank {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--muted);
}

.shopper-gap-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.shopper-gap-flag {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shopper-gap-why,
.shopper-gap-stat,
.shopper-gap-colors {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.shopper-gap-block {
  margin: 18px 0 0;
}

.shopper-gap-owned {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 0 4px;
}

/* "Don't like it" on a recommendation: the reasons, as quiet chips. */
.shopper-dislike { margin: 16px 0 0; }
.shopper-dislike .shopper-kicker { margin: 0 0 10px; }
.shopper-dislike-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shopper-dislike-chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line, rgba(62, 43, 35, 0.28));
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.shopper-dislike-chip:hover { border-color: var(--ink); }
.shopper-dislike-chip:disabled { opacity: 0.5; cursor: default; }
.shopper-dislike-done { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.shopper-dislike-undo { margin: 0; }
.shopper-search-card.is-dismissed > :not(.shopper-dislike) { opacity: 0.45; }

.shopper-gap-owned-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 88px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.shopper-gap-owned-chip img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface);
}

.shopper-gap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin: 18px 0 0;
}

/* A link styled as the filled button ("View product") had the browser's
   underline inside the fill. */
a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.shopper-gap-actions .btn-primary { min-height: 44px; }

/* The quiet text actions keep their look but get a full-size tap area. */
.shopper-gap-actions .ghost-btn,
.shopper-gap-more .ghost-btn {
  position: relative;
}
.shopper-gap-actions .ghost-btn::before,
.shopper-gap-more .ghost-btn::before {
  content: '';
  position: absolute;
  inset: -14px -8px;
}

.shopper-gap-more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
}
.shopper-gap-more[hidden] { display: none; }

.shopper-more-btn[aria-expanded="true"] { color: var(--muted); box-shadow: inset 0 -1px 0 var(--muted); }

.shopper-later-btn.is-disabled,
.shopper-later-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shopper-gap-enough {
  margin: 28px 0 8px;
  padding: 22px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.shopper-gap-enough-lead,
.shopper-gap-enough-list {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.shopper-gap-enough-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.shopper-gap-enough-list li {
  margin: 0 0 6px;
}

.shopper-composer-wrap.is-gap {
  display: block;
}

.shopper-chat-lede {
  max-width: 720px;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
}

.shopper-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 720px;
  margin: 8px 0 48px;
}

.shopper-chat-suggestion {
  background: transparent;
}

.shopper-search {
  max-width: 720px;
}

.shopper-search-title {
  margin: 8px 0 10px;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.1;
}

.shopper-search-lede,
.shopper-search-why,
.shopper-search-facts {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.shopper-search-compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}

.shopper-search-compare-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.shopper-search-card {
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.shopper-search-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
}

.shopper-search-rank {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
}

.shopper-search-visual {
  width: min(240px, 100%);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  margin: 0 0 16px;
}

.shopper-search-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shopper-search-name {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
}

.shopper-search-copy .shopper-score {
  margin: 6px 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.shopper-search-copy .shopper-meta {
  color: var(--ink);
  font-size: 16px;
}

.shopper-search-actions .shopper-gap-actions { margin: 4px 0 4px; }

/* The wait for a search: placeholders in the shape of the results. */
.shopper-loading.is-searching {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  padding: 32px 0 24px;
}

.shopper-stage-query {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--muted);
}
.shopper-skeletons { display: grid; gap: 22px; margin: 28px 0 0; }
.shopper-skeleton { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.shopper-skeleton-pic,
.shopper-skeleton-lines span {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 12px;
  animation: shopper-pulse 1.4s ease-in-out infinite;
}
.shopper-skeleton-pic { aspect-ratio: 1; }
.shopper-skeleton-lines { display: grid; gap: 10px; }
.shopper-skeleton-lines span { display: block; height: 12px; border-radius: 6px; }
@keyframes shopper-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .shopper-skeleton-pic, .shopper-skeleton-lines span { animation: none; }
}

.ghost-btn.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .shopper-search-title {
    font-size: 34px;
  }
  .shopper-search-name {
    font-size: 24px;
  }
  .shopper-search-visual {
    width: 100%;
  }
}

@media (min-width: 860px) {
  .shopper-hero {
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }
}

@media (max-width: 860px) {
  #view-shopper {
    overflow-x: clip;
    max-width: 100%;
  }
  .shopper-gap-title {
    font-size: 34px;
  }
  .shopper-gap-name {
    font-size: 24px;
  }
  .shopper-gap-actions {
    width: 100%;
  }
  .shopper-visual {
    width: 100%;
    aspect-ratio: 1 / 1.05;
  }
  .shopper-outfit-piece {
    flex-basis: 92px;
    width: 92px;
  }
  .shopper-back {
    min-height: 44px;
  }
  .shopper-later {
    margin-left: 0;
    width: 100%;
  }
  .shopper-composer-wrap {
    margin-top: 12px;
    padding: 8px 0 6px;
    background: transparent;
  }
  .shopper-composer {
    position: sticky;
    bottom: 62px;
    z-index: 8;
    background: color-mix(in srgb, var(--bg) 94%, white);
  }
  .shopper-compare-slots,
  .shopper-compare-diffs,
  .shopper-compare-pair {
    grid-template-columns: 1fr;
  }
  .shopper-color-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
  .shopper-color-row input[type="url"] {
    grid-column: 1 / -1;
  }
  .shopper-colors-composer {
    position: sticky;
    bottom: 62px;
    z-index: 8;
    background: color-mix(in srgb, var(--bg) 94%, white);
    padding-bottom: 8px;
  }
  .shopper-compare-go {
    width: 100%;
  }
  .shopper-compare-composer {
    position: sticky;
    bottom: 62px;
    z-index: 8;
    background: color-mix(in srgb, var(--bg) 94%, white);
    padding-bottom: 8px;
  }
  .shopper-slot-form {
    position: relative;
    bottom: auto;
    background: transparent;
  }
  .shopper-result,
  .shopper-empty,
  .shopper-recover,
  .shopper-timeout,
  .shopper-loading {
    padding-bottom: 12px;
  }
  .shopper-use-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .shopper-use-chips::-webkit-scrollbar,
  .closet-meta::-webkit-scrollbar,
  .closet-refine::-webkit-scrollbar {
    display: none;
  }
  .closet-meta,
  .closet-refine {
    scrollbar-width: none;
  }

  .shopper-use-chip {
    flex: 0 0 auto;
  }
  .mobile-nav button {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    padding: 8px 2px;
    min-height: 44px;
    /* One line per tab, five equal tabs, from 320 px up. */
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Beta feedback */
.feedback-card { max-width: 440px; }
.feedback-rating { display: flex; gap: 8px; margin: 14px 0; }
.feedback-rating button {
  flex: 1; padding: 10px 0; border: 1px solid var(--line, #d9d4cb); background: transparent;
  border-radius: 999px; font: inherit; cursor: pointer; color: inherit;
}
.feedback-rating button.is-on { background: var(--ink, #1c1b19); color: #fff; border-color: var(--ink, #1c1b19); }
.feedback-text {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 12px 14px;
  border: 1px solid var(--line, #d9d4cb); border-radius: 12px; background: transparent; color: inherit;
}

.import-tip { margin: -6px 0 16px; }
/* Three lines of intro on a phone; the negative margin collided with them. */
@media (max-width: 640px) {
  .trip-pack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .import-tip { margin-top: 8px; }
}

/* The product photo cut from an order page, on a pending purchase row. */
.import-photo-thumb {
  display: block;
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper, #f7f4ef);
}

/* Privacy / Terms links: quiet, at the foot of the sign-in card and the profile menu. */
.auth-legal { margin: 18px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.auth-legal a, .profile-menu-legal a, .import-gmail-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover, .profile-menu-legal a:hover, .import-gmail-note a:hover { color: var(--ink); }
.profile-menu-legal { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }


/* ---- Scan my closet ------------------------------------------------- */
.closet-scan { position: fixed; inset: 0; z-index: 1200; background: #0b0a09; color: #fff; display: flex; flex-direction: column; }
.closet-scan.hidden { display: none; }
.cs-stage { position: relative; flex: 1; overflow: hidden; }
.cs-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cs-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.cs-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; }
.cs-counter { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 20px; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.cs-hint { position: absolute; left: 16px; right: 16px; bottom: 96px; margin: 0; text-align: center; font-size: 14px; line-height: 1.4; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.cs-hint.is-warn { color: #ffd9a8; }
.cs-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px max(18px, env(safe-area-inset-bottom)); display: flex; justify-content: center; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); }
.cs-finish { min-width: 180px; }
.cs-bottom { gap: 10px; flex-wrap: wrap; }
.cs-bottom .cs-photo-instead { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(0,0,0,.35); }
.cs-bottom [hidden], .cs-hint[hidden] { display: none; }
/* With "Take a photo instead" showing, the two buttons can wrap to two rows
   on a phone and cover the hint (2026-10-27): the hint and the tray move up. */
.cs-stage:has(#cs-photo-instead:not([hidden])) .cs-hint { bottom: 150px; }
.cs-stage:has(#cs-photo-instead:not([hidden])) .cs-tray { bottom: 214px; }
/* First scan: the tips sit on the cream card over the dark stage, before the camera. */
.cs-coach { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); max-width: 420px; margin: 0 auto; padding: 24px 22px; border-radius: 18px; background: var(--bg, #F8F1E9); color: var(--ink, #3E2B23); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.cs-coach[hidden] { display: none; }
.cs-coach .eyebrow { margin: 0 0 6px; }
.cs-coach-title { margin: 0 0 14px; font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 500; font-size: 26px; line-height: 1.15; }
.cs-coach-list { margin: 0 0 20px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.cs-coach-list li { margin-bottom: 8px; }
.cs-coach .btn-primary { width: 100%; }
.cs-review, .cs-done { flex: 1; overflow: auto; padding: 20px 16px max(24px, env(safe-area-inset-bottom)); background: var(--bg, #F8F1E9); color: var(--ink, #3E2B23); }
.cs-review.hidden, .cs-done.hidden { display: none; }
.cs-review-head h3 { margin: 6px 0 4px; font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 500; font-size: 26px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.cs-card { position: relative; border-radius: 12px; overflow: hidden; background: #fff; border: 2px solid transparent; cursor: pointer; }
.cs-card.is-on { border-color: var(--accent, #A67C52); }
.cs-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: linear-gradient(110deg, #efe7dd 30%, #f8f2ea 50%, #efe7dd 70%) 0 0 / 300% 100%; animation: cs-loading 1.4s linear infinite; }
@keyframes cs-loading { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cs-grid.is-reviewing { opacity: .55; pointer-events: none; transition: opacity .3s; }
.cs-card .cs-card-label { padding: 8px 10px 10px; font-size: 13px; line-height: 1.3; }
.cs-card .cs-tick { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--accent, #A67C52); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cs-card.is-weak .cs-tick { background: #ffe9c9; color: #8a5a1c; }
.cs-card .cs-weak-note { display: block; color: #8a5a1c; font-size: 12px; margin-top: 2px; }
.cs-review-actions { flex-wrap: wrap; }
.cs-done { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; }
/* Live counter + the last pieces found, so a long pass along a shelf shows
   what it is getting. */
.cs-counter.is-bump { animation: cs-bump .45s ease-out; }
@keyframes cs-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: #cfeec6; } 100% { transform: scale(1); } }
.cs-tray { position: absolute; left: 0; right: 0; bottom: 150px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.cs-tray[hidden] { display: none; }
.cs-tray img { width: 44px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(139, 209, 124, .9); background: rgba(255,255,255,.15); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.cs-camfail .cs-camfail-copy { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.cs-camfail .ghost-btn { width: 100%; margin-top: 10px; }
.cs-camfail [hidden], .cs-camfail[hidden] { display: none; }
/* Review: the sure pieces are added (tap to undo); the doubtful ones below. */
.cs-card.is-auto .cs-tick { background: var(--accent, #A67C52); color: #fff; }
.cs-card.is-undone { opacity: .55; border-color: transparent; }
.cs-card.is-undone .cs-tick { background: rgba(255,255,255,.9); color: var(--ink, #3E2B23); }
.cs-card .cs-auto-note { display: block; color: var(--muted, #8a7a6e); font-size: 12px; margin-top: 2px; }
.cs-ask { margin-top: 4px; }
.cs-ask[hidden], .cs-grid[hidden], .cs-ask-title[hidden], .cs-ask-sub[hidden] { display: none; }
.cs-ask-title { margin: 8px 0 2px; font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 500; font-size: 21px; }
.cs-ask-sub { margin: 0; font-size: 13px; color: var(--muted, #8a7a6e); }

/* ---- Fix this item (garment page) ------------------------------------- */
#detail-modal .modal-card { max-height: calc(100vh - 40px); overflow-y: auto; }
.fix-panel { padding: 0 22px 8px; }
.fix-open { margin-bottom: 14px; }
.fix-body { padding: 4px 0 8px; border-top: 1px solid var(--line); }
.fix-lead {
  margin: 14px 0 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}
.fix-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fix-option {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.fix-option.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.fix-option:disabled, .fix-submit:disabled, .fix-actions button:disabled { opacity: 0.5; cursor: default; }
.fix-form { margin: 4px 0 8px; }
.fix-label {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.fix-textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 10px 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  resize: vertical;
  outline: none;
}
.fix-textarea:focus { border-bottom-color: var(--ink); }
.fix-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.fix-submit { margin-top: 14px; }
.fix-status { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.fix-status.is-error { color: #8a3d3d; }
.fix-status.is-busy { color: var(--muted); }
.fix-status.is-busy::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ink); animation: fixPulse 1.2s ease-in-out infinite; }
@keyframes fixPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.fix-proposal { margin-top: 12px; }
.fix-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fix-compare figure { margin: 0; }
.fix-compare img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--warm);
  padding: 10px;
  box-sizing: border-box;
}
.fix-compare figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}
.fix-facts { list-style: none; margin: 12px 0 0; padding: 0; }
.fix-facts li { display: flex; gap: 12px; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.fix-facts li span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; padding-top: 3px; }
.fix-facts li strong { font-weight: 400; text-align: right; }
.fix-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 4px; }
.fix-actions .btn-primary { margin-top: 12px; }

/* ---- Add my clothes: paste a product link ------------------------------ */
.import-choice--button { border: 0; background: transparent; font: inherit; text-align: left; }
.import-link-form .field { margin-top: 12px; }
.import-link-preview { padding-top: 4px; }
.import-link-card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.import-link-card img {
  width: 120px;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--warm);
  padding: 8px;
  box-sizing: border-box;
}
.import-link-meta .import-result-line { margin-bottom: 2px; font-size: 17px; }
.import-link-meta .import-result-muted { margin-bottom: 4px; font-size: 13px; }
.import-link-meta .fix-label { margin-top: 8px; }
.import-link-meta select.meta-select {
  display: block;
  width: 100%;
  margin-top: 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  padding: 4px 0 6px;
  outline: none;
}

/* ---- Several photos at once ------------------------------------------- */
.import-batch-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.import-batch-photo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); text-align: center; }
.import-batch-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f4f1ec; border-radius: 6px; opacity: 0.55; }
.import-batch-photo.is-uploading img { opacity: 0.85; outline: 2px solid var(--ink); outline-offset: -2px; }
.import-batch-photo.is-done img { opacity: 1; }
.import-batch-photo.is-done span { color: var(--ink); }
.import-batch-photo.is-failed span { color: #8a3d3d; }
.import-batch-photo.is-uploading span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ink); animation: fixPulse 1.2s ease-in-out infinite; }

/* Delete my account (profile menu → confirm with the password). */
.profile-menu button.profile-menu-danger { color: var(--muted); font-size: 12px; }
.profile-menu button.profile-menu-danger:hover { color: #9B2C2C; }
.delete-account-label { display: block; margin: 18px 0 6px; font-size: 13px; color: var(--muted); }
.delete-account-password {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit;
}
.btn-primary.btn-danger { background: #9B2C2C; border-color: #9B2C2C; color: #fff; }
.btn-primary.btn-danger:disabled { opacity: 0.6; }

/* Trips (2026-09-30): a folder of looks for one trip. A row of trip cards
   above the saved looks, a trip page in place of the Looks home, a form
   sheet, and a chip on the stylist composer while styling for a trip. */
.trips-section { margin: 0 0 44px; }
.trips-section[hidden], #looks-grid-title[hidden], .trip-page[hidden], #looks-home[hidden],
#trip-pack-wrap[hidden], .trip-chip[hidden], .trip-move[hidden], #trip-climate[hidden], #trip-note[hidden] { display: none; }
.trips-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.trips-head h3, .trips-sub {
  font-weight: 400;
  font-size: 26px;
  margin: 0;
}
.trips-sub { margin: 36px 0 16px; }
.trips-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.trips-row::-webkit-scrollbar { display: none; }
.trip-card {
  flex: 0 0 auto;
  width: 172px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--ease), transform var(--ease);
}
.trip-card:hover { border-color: var(--taupe); transform: translateY(-1px); }
.trip-card strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.trip-card .look-meta { margin: 0; }
.trip-card-dates {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caramel-deep);
}
.trip-card.is-past { background: transparent; }
.trip-card.is-invite { width: min(320px, 100%); border-style: dashed; justify-content: center; }
.trip-card.is-invite .fa-plane { color: var(--caramel); margin-bottom: 6px; }

.trip-back {
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trip-page .hero-title { overflow-wrap: anywhere; }
.trip-page #trip-climate { margin: 10px 0 4px; }
.trip-note { font-style: italic; }
.trip-ask-btn { width: auto; margin-top: 18px; }
.trip-empty p { color: var(--muted); margin: 0; }
.trip-look-offer {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 0 0 18px;
  max-width: 420px;
}
.trip-look-offer .look-meta { margin: 0 0 10px; }
.trip-look-offer-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.trip-look-offer-actions button { width: auto; }
.trip-pack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px 10px;
}
.trip-pack-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;
}
.trip-pack-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
}
.trip-pack-item span { overflow-wrap: anywhere; }
.trip-pack-uses { color: var(--muted); font-size: 12px; }
.trip-delete-btn { display: block; margin: 48px 0 24px; color: var(--muted); box-shadow: inset 0 -1px 0 var(--muted); }

.trip-form-card { width: min(440px, 100%); }
.trip-form { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.trip-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.trip-form input, .trip-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--taupe);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.trip-form textarea { resize: vertical; }
.trip-form-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trip-optional { color: var(--muted); opacity: 0.8; font-size: 12px; }
.trip-form #trip-form-status { margin: 0; min-height: 1em; }

.trip-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 6px 6px 6px 12px;
  background: var(--espresso);
  color: var(--cream);
  font-size: 13px;
  border-radius: 999px;
}
.trip-chip #trip-chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-chip { min-height: 44px; padding: 4px 4px 4px 14px; }
/* 44px to tap: it sits next to the message box. */
.trip-chip-close {
  border: 0;
  background: transparent;
  color: inherit;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  flex: 0 0 auto;
}
.trip-chip-close:hover { background: rgba(248, 241, 233, 0.12); }
.trips-head .look-add-btn, .trip-page .looks-intro-row .look-add-btn, .trip-back { padding: 12px 0; margin-top: -12px; margin-bottom: -12px; }
.trip-back { margin-bottom: 10px; }
.look-trip-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--caramel-deep);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.look-trip-line.is-offer {
  padding: 0 16px;
  border: 1px solid var(--taupe);
  border-radius: 999px;
  color: var(--ink);
}
.look-trip-line.is-offer:hover { border-color: var(--ink); }
.look-trip-line:disabled { opacity: 0.6; }
.trip-move {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin: 0 22px 16px;
}
.trip-move select {
  flex: 1;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--taupe);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.chip-trip[hidden] { display: none; }
.chip-trip .fa-plane { font-size: 13px; font-style: normal; margin-right: 4px; color: var(--caramel); }
.trip-invite-cta {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
  padding-bottom: 2px;
}

/* "Recreate a look" (2026-09-30): under the look, every piece of the photo
   with what stands in for it from the closet, and Shop for the rest. */
.recreate-list { margin: 14px 0 16px; }
.recreate-head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.recreate-list ul { list-style: none; margin: 0; padding: 0; }
.recreate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.recreate-row:last-child { border-bottom: 1px solid var(--line); }
.recreate-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  overflow: hidden;
}
.recreate-thumb img { width: 100%; height: 100%; object-fit: contain; }
.recreate-row.is-missing .recreate-thumb { background: transparent; border-style: dashed; }
.recreate-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recreate-body strong { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.recreate-body strong::first-letter { text-transform: uppercase; }
.recreate-note { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.recreate-row.is-have .recreate-note { color: var(--caramel-deep); }
.recreate-find {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
}
.recreate-find:hover, .recreate-find:focus-visible { background: var(--ink); color: var(--surface); outline: none; }
.chip-trip .fa-camera { font-size: 13px; font-style: normal; margin-right: 4px; color: var(--caramel); }

/* The stylist's actions (2026-09-30): a photo to recreate, a trip to plan.
   Outlined pills like the card's Shop buttons, apart from the italic
   example asks, which send a message instead of opening something. */
.stylist-actions { margin: 0 0 18px; }
.stylist-actions[hidden], .action-pill[hidden] { display: none; }
.stylist-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.action-pill i { color: var(--caramel); font-size: 13px; }
.action-pill:hover, .action-pill:focus-visible { background: var(--ink); color: var(--surface); outline: none; }
.action-pill:hover i, .action-pill:focus-visible i { color: inherit; }
.stylist-actions-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
#view-chat.is-conversing .stylist-actions { margin-bottom: 8px; }
#view-chat.is-conversing .stylist-actions-hint { display: none; }
#view-chat.is-conversing .stylist-actions-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#view-chat.is-conversing .action-pill { min-height: 36px; font-size: 13px; padding: 0 14px; white-space: nowrap; }

/* The empty stylist, cleaned (2026-09-30): the examples are one row that
   scrolls sideways when it must, and the recreate hint goes once used. */
.stylist-actions-hint[hidden] { display: none; }
#suggestion-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px 18px; }
#suggestion-chips::-webkit-scrollbar { display: none; }
#suggestion-chips .chip { white-space: nowrap; flex: 0 0 auto; }
.composer-previews { align-items: center; }
.composer-recreate { background: var(--surface); }
.pending-photo { display: block; max-width: 180px; max-height: 240px; object-fit: cover; margin: -14px 0 16px auto; border-radius: 16px; }
.recreate-head + ul { margin-bottom: 14px; }
.recreate-note[hidden] { display: none; }
.recreate-quiet-find { align-self: flex-start; font-size: 12.5px; color: var(--muted); margin-top: 2px; padding: 6px 0; }
.recreate-row.is-close .recreate-note, .recreate-row.is-have .recreate-note { color: var(--caramel-deep); }
/* --- membership (billing.js) ------------------------------------------- */
.profile-menu button[hidden] { display: none; }
.membership-card { width: min(440px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.membership-card h3 { margin: 0 0 10px; }
.membership-line { margin-bottom: 8px; }
.membership-plans { display: grid; gap: 10px; margin: 18px 0 6px; }
.membership-plan {
  display: grid; gap: 3px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--taupe); border-radius: var(--radius-sm); background: transparent;
}
.membership-plan.is-on { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.membership-plan-name { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.membership-plan-price { font-family: var(--serif); font-size: 24px; }
.membership-plan-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.membership-tabs { display: flex; gap: 6px; margin: 14px 0 4px; }
.membership-tabs button {
  flex: 1; font: inherit; font-size: 14px; padding: 10px; cursor: pointer; color: inherit;
  border: 1px solid var(--taupe); border-radius: 999px; background: transparent;
}
.membership-tabs button.is-on { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.membership-field { display: block; margin-top: 12px; }
.membership-field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.membership-field input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--taupe); border-radius: var(--radius-sm); background: transparent; color: inherit;
}
.membership-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.membership-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.5; }
.membership-check input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.membership-check a { color: inherit; }
.membership-terms { margin-top: 14px; line-height: 1.5; }
.membership-error { margin: 12px 0 0; font-size: 13px; color: #9B2C2C; }
.membership-sandbox {
  display: inline-block; margin: 0 0 4px; padding: 3px 9px; font-size: 12px;
  border-radius: 999px; background: var(--warm); color: var(--muted);
}
.membership-stack { display: grid; gap: 10px; margin-top: 18px; }
.membership-link {
  font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0;
  text-decoration: underline; cursor: pointer; padding: 6px 0; justify-self: start;
}
.membership-actions { margin-top: 20px; }

/* Basics picker: a tap per basic she owns. Tiles are the closet's own
   white product cards; a picked tile gets the espresso ring and check. */
.import-basics-open { width: 100%; margin-top: 10px; }
.basics-grid { display: flex; flex-direction: column; gap: 18px; max-height: 56vh; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px 8px; }
.basics-group-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin: 0 0 8px; color: var(--ink); }
.basics-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.basics-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease); }
.basics-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
.basics-name { font-size: 0.78rem; line-height: 1.2; text-align: center; }
.basics-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; color: #fff; background: var(--espresso); opacity: 0; transform: scale(0.8); transition: opacity var(--ease), transform var(--ease); }
.basics-tile.is-picked { border-color: var(--espresso); box-shadow: 0 0 0 1px var(--espresso); }
.basics-tile.is-picked .basics-check { opacity: 1; transform: scale(1); }
.basics-tile.is-added { cursor: default; opacity: 0.55; }
.basics-badge { font-size: 11px; color: var(--muted); text-align: center; }
.basics-footer { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 8px; }
.basics-done .confirm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
@media (min-width: 640px) { .basics-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#import-basics-add:disabled { opacity: 0.45; cursor: default; }

.shopper-share-tip {
  margin: 18px 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.shopper-share-tip[hidden] { display: none; }

.shopper-price-drop { display: flex; gap: 10px; align-items: baseline; }
.shopper-price-drop strong { color: var(--ink); font-weight: 600; }
.shopper-price-drop s { color: var(--muted); }
.shopper-discount { color: var(--caramel-deep); font-size: 12px; }
.shopper-closest-note { margin: 2px 0 0; font-size: 12px; font-style: italic; color: var(--caramel-deep); }

/* The morning-note card: large, on its own, for people who have not turned it on. */
.push-card {
  margin: 14px 0;
  padding: 22px 20px;
  border: 1px solid var(--ink);
  background: var(--surface);
  text-align: center;
}
.push-card[hidden] { display: none; }
.push-card-title {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
}
.push-card-text {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.push-card .btn-primary { margin-top: 14px; }
.push-card-later { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--muted); }
.push-card-hour { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.push-card-hour select { font: inherit; padding: 8px 10px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 0; }

/* The stylist's one-tap invitation in the closet: large, centered, a real button. */
.stylist-first-big {
  display: block;
  margin: 14px 0;
  padding: 22px 20px;
  border: 1px solid var(--ink);
  background: var(--surface);
  text-align: center;
}
.stylist-first-big[hidden] { display: none; }
.stylist-first-big .btn-primary { margin-top: 14px; }

/* How you feel today (mood.js): one tap, once a day. */
.mood-sheet .sheet-card { padding: 26px 18px 14px; text-align: center; }
.mood-title { font-family: var(--serif, "Cormorant Garamond", serif); font-size: 26px; line-height: 1.15; font-weight: 500; margin: 0; color: var(--ink); }
.mood-sub { margin: 8px 0 20px; font-size: 13px; color: var(--muted); }
.mood-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mood-option {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 88px; padding: 12px 2px 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 2px; cursor: pointer; font: inherit;
}
.mood-option:hover, .mood-option:focus-visible { border-color: var(--ink); outline: none; }
.mood-emoji { font-size: 26px; line-height: 1; }
.mood-label { font-size: 12px; line-height: 1.25; color: var(--muted); }
.mood-later { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; margin-top: 8px; font-size: 12px; color: var(--muted); }
/* The day's answer beside the stylist. */
.mood-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 0 14px; min-height: 36px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.mood-chip[hidden] { display: none; }
.mood-chip:hover, .mood-chip:focus-visible { border-color: var(--ink); }
.mood-chip-emoji { font-size: 16px; line-height: 1; }
.mood-chip-emoji:empty { display: none; }
/* The line on a look card: the mood it was dressed for. */
.look-mood { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }

/* "I wore this" and "Save image" side by side under a look. */
.look-quiet-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.look-quiet-links .look-wore-link { margin: 10px 0 0; }
.look-picture-link { display: block; margin: 10px 0 0; font-size: 13px; }
.look-picture-link:disabled { opacity: 0.6; cursor: default; }
/* "More" under a look: the secondary exports (Save image) folded away. */
.look-more { position: relative; }
.look-more-btn { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; }
.look-more-btn i { font-size: 12px; }
.look-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(40, 28, 20, 0.12);
  white-space: nowrap;
}
.look-more-menu[hidden] { display: none; }
.look-more-menu .look-picture-link { margin: 0; padding: 10px 16px; min-height: 40px; color: var(--ink); text-align: left; }

/* --- The look sheet shared by "My avatar" (avatar.js); the tryon-* names are from the removed try-on --- */
.tryon-confirm { margin: 14px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.tryon-confirm[hidden] { display: none; }
.tryon-confirm-text { margin: 0 0 12px; font-size: 13.5px; color: var(--ink); }
.look-tryon-link { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--caramel-deep); font-weight: 600; }
.look-tryon-link i { font-size: 13px; }
.look-tryon-link.is-block { display: flex; width: 100%; justify-content: center; padding: 12px 16px; margin: 10px 0; border: 1px solid var(--caramel-deep); border-radius: 999px; background: transparent; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.tryon-sheet .sheet-card { padding: 18px 18px 20px; max-height: 92vh; overflow-y: auto; }
.tryon-title { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 0; color: var(--ink); }
.tryon-sub { color: var(--muted); font-size: 15px; line-height: 1.45; margin: 4px 0 14px; }
.tryon-tips { list-style: none; margin: 0 0 16px; padding: 14px 16px; background: var(--warm); border-radius: var(--radius-sm); display: grid; gap: 8px; font-size: 14px; color: var(--ink); }
.tryon-tips li::before { content: "·"; color: var(--caramel); font-weight: 700; margin-right: 8px; }
.tryon-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); margin: 0 0 16px; cursor: pointer; }
.tryon-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--caramel-deep); flex: none; }
.tryon-sheet .btn-primary { width: 100%; }
.tryon-sheet .btn-primary:disabled { opacity: 0.45; cursor: default; }
.tryon-sheet [hidden] { display: none !important; }
.tryon-error, .tryon-error-text { color: #9a3b2f; font-size: 14px; line-height: 1.4; margin: 12px 0 0; }
.tryon-error-text { margin: 8px 0 16px; color: var(--ink); }
.tryon-working { text-align: center; padding: 34px 8px 26px; }
.tryon-spinner { width: 34px; height: 34px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid var(--taupe); border-top-color: var(--caramel-deep); animation: tryon-spin 0.9s linear infinite; }
@keyframes tryon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tryon-spinner { animation-duration: 2.4s; } }
.tryon-working-text { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.tryon-working-note { font-size: 13px; color: var(--muted); margin: 0; }
.tryon-look-title { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink); margin: 14px 0 10px; }
.tryon-look-title:empty { display: none; }
.tryon-pieces { display: flex; gap: 10px; margin: 0 0 8px; }
.tryon-piece { width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--taupe); display: grid; place-items: center; overflow: hidden; }
.tryon-piece img { max-width: 86%; max-height: 86%; object-fit: contain; }
.tryon-caption { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.tryon-links { display: flex; justify-content: center; gap: 20px; margin: 12px 0 0; }
.tryon-left { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.tryon-left:empty { display: none; }
.tryon-sheet .modal-head { padding: 0; margin: 0 0 6px; }
/* --- "My avatar" (avatar.js) ------------------------------------------- */
.avatar-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.avatar-pick-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 10px; border: 1px dashed var(--caramel-deep); border-radius: 14px; background: transparent; color: var(--ink); font-size: 13.5px; line-height: 1.3; text-align: center; cursor: pointer; }
.avatar-pick-photo:disabled { opacity: 0.6; cursor: default; }
.avatar-pick-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--caramel-deep); position: relative; }
.avatar-pick-mark::before, .avatar-pick-mark::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--caramel-deep); transform: translate(-50%, -50%); }
.avatar-pick-mark::before { width: 10px; height: 1.5px; }
.avatar-pick-mark::after { width: 1.5px; height: 10px; }
.avatar-pick-photo.is-done { border-style: solid; background: var(--warm); }
.avatar-pick-photo.is-done .avatar-pick-mark::before { width: 5px; height: 1.5px; transform: translate(-90%, 20%) rotate(45deg); }
.avatar-pick-photo.is-done .avatar-pick-mark::after { width: 1.5px; height: 10px; transform: translate(60%, -55%) rotate(45deg); }
.avatar-height { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: 14px; color: var(--ink); }
.avatar-height input { width: 96px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; text-align: center; background: #fff; color: var(--ink); }
.avatar-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.avatar-option { padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: #F4F2EF; aspect-ratio: 9 / 16; cursor: pointer; }
.avatar-option img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-option.is-on { border-color: var(--caramel-deep); box-shadow: 0 0 0 2px var(--warm); }
.avatar-photo { border-radius: 18px; overflow: hidden; background: #F4F2EF; aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto 12px; }
.avatar-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.avatar-share { margin: 6px 0 4px; }
.avatar-share[hidden] { display: none; }
.look-avatar-link[hidden] { display: none; }

/* --- The stylist's master account (stylistMaster.js) ------------------------ */
.is-stylist-master .nav-main .nav-link,
.is-stylist-master .mobile-nav button:not([data-profile-toggle]),
.is-stylist-master #nav-add-clothes,
.is-stylist-master #view-closet,
.is-stylist-master #view-chat,
.is-stylist-master #view-looks,
.is-stylist-master #view-shopper { display: none !important; }
.stylist-master { max-width: 1100px; margin: 0 auto; padding: 8px 20px 120px; }
.stylist-master.hidden { display: none; }
.sm-head { margin: 18px 0 20px; }
.sm-head h2 { font-family: var(--serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 34px; margin: 4px 0 2px; color: var(--ink); }
.sm-back { font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 8px; }
.sm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sm-client { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; cursor: pointer; font: inherit; color: var(--ink); }
.sm-client:hover:not(:disabled) { border-color: var(--ink); }
.sm-client:disabled { cursor: default; opacity: 0.72; }
.sm-client-name { font-family: var(--serif, "Cormorant Garamond", serif); font-size: 22px; }
.sm-client-mail { font-size: 12px; color: var(--muted); }
.sm-client-status { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sm-client-status.is-shared { color: var(--ink); }
.sm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.sm-tabs button { background: none; border: 0; padding: 10px 0; font: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.sm-tabs button.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.sm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sm-filters .chip { font-family: inherit; font-style: normal; font-size: 12px; letter-spacing: .04em; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); }
.sm-filters .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sm-hint { margin: 4px 0 14px; }
.sm-questions { margin: 0 0 18px; padding: 14px 12px 16px; background: var(--warm); border-radius: 4px; }
.sm-questions-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.sm-questions-title { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.sm-questions-act { flex: 0 0 auto; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.sm-questions-note { margin: 6px 0 0; }
.sm-questions .sm-questions-grid { margin: 16px 0 0; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px 10px; }
.sm-questions .dark-colors-media { background: var(--surface); }
.sm-questions-footer { margin-top: 16px; }
.sm-questions .dark-choice-btn { padding: 0 4px; font-size: 13px; white-space: nowrap; }
.sm-questions-head, .sm-questions-note { padding: 0 4px; }
.sm-questions-footer .btn-primary { min-width: 140px; min-height: 44px; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sm-piece { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font: inherit; color: var(--ink); }
.sm-piece img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sm-piece-name { font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sm-piece-check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 13px; display: none; align-items: center; justify-content: center; }
.sm-piece.is-picked { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sm-piece.is-picked .sm-piece-check { display: flex; }
.sm-builder-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; background: var(--surface); border: 1px solid var(--ink); border-radius: 999px; box-shadow: 0 8px 24px rgba(32, 31, 29, 0.14); z-index: 40; font-size: 13px; max-width: calc(100% - 32px); }
.sm-builder-bar[hidden] { display: none; }
.sm-builder-bar .btn-primary { white-space: nowrap; }
#sm-builder-count { white-space: nowrap; }
.sm-trips-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.sm-trip-form { padding: 16px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--surface); }
.sm-trip-form .sm-field { margin: 0 0 12px; }
.sm-trip-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-trip-actions { display: flex; justify-content: flex-end; gap: 10px; }
.sm-trip { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sm-builder .sheet-card { width: min(560px, 100%); max-height: 92vh; overflow: auto; padding-bottom: 22px; }
.sm-ai { display: flex; gap: 8px; margin: 14px 22px 12px; }
.sm-ai input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; }
.sm-board { margin: 0 22px 14px; }
.sm-board .outfit-collage { margin: 0 auto; }
.sm-board-empty { padding: 28px 8px; text-align: center; border: 1px dashed var(--line); }
.sm-field { display: flex; flex-direction: column; gap: 6px; margin: 0 22px 12px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.sm-field input, .sm-field textarea, .sm-field select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; }
.sm-send { display: block; width: calc(100% - 44px); margin: 6px 22px 0; min-height: 46px; }
/* Shopping questions: the stylist's inbox and the client's answers. */
.sm-inbox:empty { display: none; }
.sm-inbox { margin-bottom: 26px; }
.sm-inbox-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sm-inbox-head h3 { font-family: var(--serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 24px; margin: 0; color: var(--ink); }
.sm-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.sm-client-asks { margin-top: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--surface); background: var(--ink); padding: 3px 8px; border-radius: 999px; }
.ask-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.ask-opt { display: flex; gap: 12px; align-items: flex-start; }
.ask-opt img, .ask-opt-blank { width: 76px; height: 96px; flex: 0 0 76px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.ask-opt.is-picked img { outline: 2px solid var(--ink); outline-offset: 2px; }
.ask-opt-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13.5px; }
.ask-opt-copy strong { font-weight: 500; color: var(--ink); }
.ask-opt-copy .link-btn { align-self: flex-start; padding: 0; font-size: 12.5px; }
.ask-opt-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ask-status { margin: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ask-status.is-answered { color: var(--ink); }
.sm-ask-who { margin: 0; font-size: 13px; color: var(--muted); }
.sm-ask-who strong { color: var(--ink); font-weight: 500; }
.sm-ask-note { margin: 0; font-family: var(--serif, "Cormorant Garamond", serif); font-size: 19px; font-style: italic; color: var(--ink); }
.sm-ask-opts.is-many { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sm-ask-opt { display: flex; flex-direction: column; gap: 8px; }
.sm-ask-opt .ghost-btn { align-self: flex-start; }
.sm-ai-draft { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.4; color: var(--muted); border-left: 2px solid var(--line); }
.sm-ask-with { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-ask-with img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.sm-ask-reply { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; }
.sm-ask-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sm-answered { margin-top: 8px; }
.sm-answered summary { cursor: pointer; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sbp-asks { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; }
.sbp-asks .link-btn { padding: 0; margin: 4px 0 14px; }
.shopper-ask { padding: 18px; border: 1px solid var(--ink); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.shopper-ask.is-compact { margin-top: 10px; padding: 14px; }
.shopper-ask-copy { margin: 0; font-size: 14px; color: var(--muted); }
.shopper-ask-note { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; resize: vertical; }
.shopper-ask .btn-primary { align-self: flex-start; }
/* Her file, her reactions, the looks she asks for. */
.sm-file { display: grid; gap: 14px; }
.sm-file-block { padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.sm-file-block > p { margin: 0 0 8px; }
.sm-file-block .sm-field { margin: 0 0 12px; }
.sm-file-sub { margin-top: 14px !important; }
.sm-facts { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.sm-facts dt { color: var(--muted); }
.sm-facts dd { margin: 0; color: var(--ink); }
.sm-moods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm-moods li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.sm-mood-face { font-size: 18px; width: 24px; text-align: center; }
.sm-moods .look-meta { margin-left: auto; }
.sm-reaction { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.sm-reaction-word { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sm-reaction img { margin-top: 8px; width: 100%; max-height: 260px; object-fit: cover; }
.sm-request { margin: 12px 22px 0; padding: 12px 14px; border: 1px solid var(--ink); display: flex; flex-direction: column; gap: 3px; }
.sm-request .eyebrow { margin: 0; }
.sm-ask-look .btn-primary { align-self: flex-start; }
.sbp-buy-head { margin-top: 22px !important; }
.sbp-request-form { margin: 0 0 12px; }
.look-react { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); cursor: default; }
.look-react-ask { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.look-react-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.look-react-chip { font: inherit; font-size: 12px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.look-react-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.look-react-more { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.look-react-more textarea { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; }
.look-react-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.look-react-photo { padding: 0; font-size: 12.5px; cursor: pointer; }
.look-react-img { width: 100%; max-height: 240px; object-fit: cover; }
/* The daily mood question at the top of a stylist's client's closet. */
.mood-closet { margin: 4px 0 22px; padding: 16px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.mood-closet[hidden] { display: none; }
.mood-closet-title { margin: 0; font-family: var(--serif, "Cormorant Garamond", serif); font-size: 24px; color: var(--ink); }
.mood-closet-sub { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.mood-closet .mood-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mood-closet .mood-option { min-height: 0; padding: 10px 2px 8px; gap: 6px; }
.mood-closet .mood-label { font-size: 11px; line-height: 1.2; }
.mood-closet.is-answered { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; text-align: left; }
.mood-closet-today { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.mood-closet-today .mood-emoji { font-size: 22px; }
.mood-closet-change { padding: 0; font-size: 12.5px; }
/* Trip plans and suitcases. */
button.sm-trip { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); cursor: pointer; }
button.sm-trip:hover strong { text-decoration: underline; }
.sm-trip-back { margin-bottom: 10px; }
.sm-trip-head { margin-bottom: 14px; }
.sm-trip-head h3 { font-family: var(--serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 28px; margin: 0 0 4px; color: var(--ink); }
.sm-trip-head p { margin: 2px 0; }

/* Day by day (trips.js daily, 2026-10-15): one tile per day, the high large. */
.trip-days { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 6px; margin: 6px 0 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.trip-day { flex: 0 0 auto; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border: 1px solid var(--line, #e6ded3); border-radius: 14px; background: var(--surface, #fff); scroll-snap-align: start; text-align: center; }
.trip-day.is-wet { background: #eef3f7; border-color: #cbd9e4; }
.trip-day-name { font-size: 12px; color: var(--muted, #7a7067); text-transform: capitalize; white-space: nowrap; }
.trip-day-high { font-family: var(--serif, "Cormorant Garamond", serif); font-size: 28px; line-height: 1; color: var(--ink, #2b2620); }
.trip-day-low { font-size: 13px; color: var(--muted, #7a7067); }
.trip-day-rain { font-size: 11px; letter-spacing: .02em; color: var(--muted, #7a7067); }
.trip-day.is-wet .trip-day-rain { color: #3f6a8a; font-weight: 600; }
.trip-day-looks { margin-top: 4px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ink, #2b2620); color: #fff; }
.trip-look-day { margin: 2px 0 4px; font-size: 13px; color: var(--muted, #7a7067); text-transform: capitalize; }
.sm-look-day { margin: 2px 0 6px; }
.sm-look-day select { width: 100%; font-size: 14px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line, #e6ded3); background: var(--surface, #fff); color: var(--ink, #2b2620); }
#sm-day-field[hidden] { display: none; }
.sm-trip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sm-trip-row .eyebrow { margin: 0; }
.sm-trip-row .link-btn { padding: 0; }
.sm-trip-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.sm-trip-looks .look-card h3 { font-size: 15px; }
.sm-file-block + .sm-file-block { margin-top: 14px; }
.trip-pack.is-check .trip-pack-check { position: relative; cursor: pointer; }
.trip-pack-check .trip-pack-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: transparent; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.trip-pack-check.is-packed .trip-pack-tick { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.trip-pack-check.is-out { opacity: .4; }
.trip-pack-check.is-out img { filter: grayscale(1); }
.trip-pack-extras { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.trip-pack-extra { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); cursor: pointer; }
.trip-pack-extra .trip-pack-tick { position: static; flex: 0 0 22px; }
.trip-pack-extra.is-packed span:last-child { color: var(--muted); text-decoration: line-through; }
.trip-pack-note { margin: 0 0 6px; }
.sm-pack { margin-top: 10px; }
.sm-pack-extras { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.sm-pack-extra { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; background: #fff; }
.sm-pack-extra button { border: 0; background: none; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.sm-pack-add { display: flex; gap: 8px; margin-bottom: 12px; }
.sm-pack-add input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; }
/* The client's side. */
.stylist-share-card[hidden] { display: none; }
.stylist-by-partner { max-width: 560px; margin: 24px auto 32px; text-align: center; }
.stylist-by-partner[hidden] { display: none; }
.stylist-by-partner h2 { font-family: var(--serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 32px; margin: 6px 0 10px; }
.stylist-by-partner-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
#view-chat.is-by-partner > :not(#stylist-by-partner) { display: none !important; }
/* A stylist's client in the free week after her program (stylistMaster.js). */
.explore-week-note { margin: 10px auto 4px; max-width: 560px; text-align: center; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.explore-week-note[hidden] { display: none; }
.explore-week-note .link-btn { font-size: 12px; margin-left: 6px; }
.explore-welcome-card .push-card-text + .push-card-text { margin-top: 6px; }
.look-from { margin: 2px 0 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.look-from-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }
/* Her stylist above her AI stylist (stylistMaster.js paintPartnerStrip). */
.stylist-partner-strip { max-width: 560px; margin: 4px auto 16px; padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.stylist-partner-strip .eyebrow { margin: 0 0 4px; }
.spx-line { margin: 0; font-size: 13px; color: var(--muted); }
.spx-actions { display: flex; justify-content: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 6px; }
.spx-actions .link-btn { padding: 4px 0; }
.spx-asks { margin-top: 10px; text-align: left; }
.spx-asks[hidden] { display: none; }
.spx-asks summary { cursor: pointer; font-size: 12.5px; letter-spacing: .04em; color: var(--ink); text-align: center; padding: 4px 0; }
.spx-asks .ask-card { margin: 10px 0 0; }
.stylist-partner-strip .sbp-request-form { margin: 10px 0 0; text-align: left; }
/* "Send to Tatiana for approval" under a look, and what she said. */
.stylist-approval { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); text-align: center; cursor: default; }
.stylist-approval .stylist-approval-btn { margin: 0; }
.stylist-approval .stylist-approval-status { margin: 0; }
.stylist-approval .stylist-approval-status.is-waiting { color: var(--muted); }
.stylist-approval .stylist-approval-status.is-approve::before { content: "\2713  "; }
.stylist-approval .link-btn { margin-top: 4px; padding: 0; font-size: 12.5px; }
.stylist-approval-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.stylist-approval-form input { font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; }
.stylist-approval-share { margin: 0; text-align: left; }
.stylist-approval-form .sm-field { margin: 0; }
.stylist-approval-form .sm-trip-actions { align-items: center; }
.stylist-approval-form .sm-trip-actions .ghost-btn, .stylist-approval-form .sm-trip-actions .btn-primary { flex: 1; margin: 0; }
.stylist-partner-strip .sbp-request-form .sm-field { margin: 0 0 10px; }
.spx-actions .link-btn { font-size: 13px; }
/* The co-brand lockup above her AI stylist on a phone: the lockup takes the
   line, "Start fresh" goes under it instead of off the screen. */
#view-chat .stylist-hero-copy { min-width: 0; }
@media (max-width: 640px) {
  .has-co-brand #view-chat .stylist-hero { flex-wrap: wrap; }
  .has-co-brand #view-chat .stylist-hero-copy { flex: 1 1 100%; }
}
.sm-ask-title { margin: 0; font-family: var(--serif, "Cormorant Garamond", serif); font-size: 21px; color: var(--ink); }
.sm-ask-board { max-width: 320px; width: 100%; align-self: center; }
.sm-ask-board .outfit-collage { margin: 0; }
.sm-request--approval { border-color: var(--line); }
@media (max-width: 640px) {
  .stylist-master { padding: 4px 16px 120px; }
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-head h2 { font-size: 28px; }
  .sm-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 8px; padding: 0 16px 2px; scrollbar-width: none; }
  .sm-filters::-webkit-scrollbar { display: none; }
  .sm-filters .chip { flex: 0 0 auto; white-space: nowrap; }
  .sm-builder-bar { left: 0; right: 0; bottom: 0; transform: none; max-width: none; border-radius: 0; border-width: 1px 0 0; justify-content: space-between; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(32, 31, 29, 0.08); }
  #sm-builder-count { min-width: 0; white-space: normal; font-size: 12.5px; line-height: 1.3; }
}

/* --- Rapid camera (rapidCamera.js) -------------------------------------------
   One garment per photo: a big shutter for one thumb, a flash on each tap,
   the last shots in a strip, and the upload count. Dark stage like the scan,
   cream cards for the native-camera fallback and the stop message. */
.is-stylist-master #nav-rapid-camera { display: none !important; }
.add-rapid-btn { font-size: 15px; padding: 4px 2px; color: var(--ink); }
.import-rapid {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin-top: 6px; padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--taupe); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit;
}
.import-rapid:active { transform: scale(0.99); }
.import-rapid-icon { font-size: 20px; color: var(--caramel-deep); flex: 0 0 auto; }
.import-rapid-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-rapid-title { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.1; }
.import-rapid-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.empty-rapid { display: block; margin: 16px auto 0; }
/* One camera for everything (2026-10-12): the camera card is the sheet's
   primary action; gallery and the shelf scan are quiet links under it. */
.import-rapid { background: var(--espresso); border-color: var(--espresso); color: var(--cream); margin-top: 0; }
.import-rapid .import-rapid-icon { color: #e7c79f; }
.import-rapid .import-rapid-sub { color: rgba(248, 241, 233, .78); }
.import-secondary-link { display: block; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: center; text-decoration: underline; text-decoration-color: var(--taupe); text-underline-offset: 3px; cursor: pointer; }
body.is-touch .import-secondary-link.only-touch { display: block !important; }
/* The sheet's other two first choices (gallery, Gmail): one card style
   under the camera, so the three ways in read as equals in a list. */
.import-option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--taupe); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit;
}
body.is-touch .import-option.only-touch { display: flex !important; }
.import-option-icon { font-size: 18px; color: var(--caramel-deep); flex: 0 0 auto; width: 22px; text-align: center; }
.import-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-option-title { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.15; }
.import-option-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.import-option--gmail { display: block; cursor: default; }
.import-option--gmail.import-auto { border-top: 1px solid var(--taupe); padding-top: 12px; }
.import-option-head { display: flex; align-items: center; gap: 14px; }
.import-option--gmail .import-gmail-link { display: block; width: 100%; margin-top: 10px; }
.import-option--gmail .import-gmail-note { margin: 8px 0 0; }
.import-option--gmail .gmail-connected-box { margin: 10px 0 0; }
.import-choice--sub { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px; padding: 8px 0 !important; text-align: left; }
.import-choice-sub { font-size: 12.5px; color: var(--muted); }
/* Nothing to drag on a touch screen (the media query below misses some
   hybrid phones that report a fine pointer). */
body.is-touch .import-drop { display: none; }

.rapid-camera { position: fixed; inset: 0; z-index: 1250; background: #0b0a09; color: #fff; display: flex; flex-direction: column; }
.rapid-camera.hidden { display: none; }
body.rc-open { overflow: hidden; }
.rc-stage { position: relative; flex: 1; overflow: hidden; }
.rc-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.rapid-camera.is-native .rc-stage video { display: none; }
.rc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.rc-flash.is-on { animation: rc-flash 260ms ease-out; }
@keyframes rc-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
.rc-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 14px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.rc-close { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; cursor: pointer; }
.rc-top-spacer { width: 40px; flex: 0 0 40px; }
.rc-counter { flex: 1; min-width: 0; text-align: center; font-family: var(--serif); font-size: 20px; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.rc-hint { position: absolute; left: 16px; right: 16px; bottom: calc(176px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 14px; line-height: 1.4; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.rc-hint.is-warn { color: #ffd9a8; }
.rc-hint[hidden], .rc-card[hidden], .rc-controls[hidden], .rc-shutter[hidden] { display: none; }
.rc-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px max(18px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.65) 35%); }
.rc-strip { display: flex; gap: 6px; height: 52px; margin: 0 auto 12px; max-width: 420px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.rc-strip::-webkit-scrollbar { display: none; }
.rc-thumb { width: 40px; height: 52px; flex: 0 0 40px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,.55); background: #222; }
.rc-thumb.is-grace, .rc-thumb.is-waiting, .rc-thumb.is-uploading { opacity: .7; }
.rc-thumb.is-held { opacity: .45; border-style: dashed; }
.rc-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 420px; margin: 0 auto; }
.rc-side { justify-self: center; min-width: 72px; padding: 10px 12px; border: 0; background: transparent; color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rc-side:disabled { opacity: .35; cursor: default; }
.rc-done { box-shadow: inset 0 -1px 0 #fff; }
/* The first shots: Done steps back so the next piece comes first. */
.rc-done.is-quiet { opacity: .55; box-shadow: none; }
.rc-shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rc-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform 90ms ease; }
.rc-shutter:active span { transform: scale(.88); }
.rapid-camera.is-native .rc-controls { grid-template-columns: 1fr 1fr; }
.rapid-camera.is-starting .rc-shutter { opacity: .4; pointer-events: none; }
.rc-card { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-58%); max-width: 420px; margin: 0 auto; padding: 24px 22px; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.rc-card .eyebrow { margin: 0 0 6px; }
.rc-card-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.15; }
.rc-card-copy { margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
.rc-card .btn-primary { display: block; text-align: center; }
.rc-card-tip { margin: 12px 0 0; text-align: center; }
/* Toasts said while the camera is open (an undo too late, a failed photo) sit above it. */
/* A message shown during the style quiz (a full screen at z 60) sat under it
   and was never seen. */
.onboard:not(.hidden) ~ .toast, body:has(.onboard:not(.hidden)) .toast { z-index: 95; }
body.rc-open .toast { z-index: 1300; bottom: calc(190px + env(safe-area-inset-bottom)); }

/* Auto (rackDetector.js): a frame guide that fills while one piece is held
   still, closes in caramel and shows a tick when the photo is taken. */
.rc-top { display: grid; grid-template-columns: 92px 1fr 92px; }
.rc-top .rc-close { justify-self: start; }
/* Flip (back <-> front camera) beside Close; the front camera's preview is
   mirrored like a phone's, the saved photo is not (rapidCamera.js). */
.rc-top-left { justify-self: start; display: flex; align-items: center; gap: 8px; }
.rc-flip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rc-flip[hidden] { display: none; }
.rc-flip:disabled { opacity: .5; cursor: default; }
.rapid-camera.is-mirrored .rc-stage video { transform: scaleX(-1); }
.rc-auto { justify-self: end; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.4); color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rc-auto[hidden] { display: none; }
.rc-auto-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #fff; background: transparent; transition: background 160ms ease; }
.rc-auto[aria-pressed="true"] { background: #f4eee6; color: #2b2420; border-color: #f4eee6; }
.rc-auto[aria-pressed="true"] .rc-auto-dot { background: var(--caramel-deep, #a8743f); border-color: var(--caramel-deep, #a8743f); }
.rc-guide { position: absolute; left: 14%; right: 14%; top: calc(76px + env(safe-area-inset-top)); bottom: calc(212px + env(safe-area-inset-bottom)); pointer-events: none; --rc-progress: 0; }
.rc-guide[hidden] { display: none; }
.rc-corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255,255,255,.85); transition: border-color 160ms ease, transform 160ms ease; }
.rc-corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 10px; }
.rc-corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 10px; }
.rc-corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 10px; }
.rc-corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 10px; }
.rc-guide.is-steadying .rc-corner { border-color: #e7c79f; }
.rc-guide.is-holding .rc-corner { border-color: rgba(255,255,255,.45); }
.rc-guide-bar { position: absolute; left: 30%; right: 30%; bottom: -12px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.rc-guide-bar::after { content: ""; position: absolute; inset: 0; background: #e7c79f; transform-origin: left center; transform: scaleX(var(--rc-progress)); transition: transform 180ms linear; }
.rc-guide.is-taken .rc-corner { animation: rc-corner-close 520ms ease-out; }
.rc-guide.is-taken .rc-corner--tl { --rc-dx: 10px; --rc-dy: 10px; }
.rc-guide.is-taken .rc-corner--tr { --rc-dx: -10px; --rc-dy: 10px; }
.rc-guide.is-taken .rc-corner--bl { --rc-dx: 10px; --rc-dy: -10px; }
.rc-guide.is-taken .rc-corner--br { --rc-dx: -10px; --rc-dy: -10px; }
@keyframes rc-corner-close { 0% { transform: none; border-color: #e7c79f; } 35% { transform: translate(var(--rc-dx), var(--rc-dy)); border-color: #e7c79f; } 100% { transform: none; } }
.rc-tick { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(244,238,230,.94); color: #2b2420; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: 0; transform: scale(.7); pointer-events: none; }
.rc-tick.is-taken { animation: rc-tick 900ms ease-out; }
@keyframes rc-tick { 0% { opacity: 0; transform: scale(.7); } 18% { opacity: 1; transform: scale(1.04); } 30% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rc-guide.is-taken .rc-corner { animation: none; }
  .rc-tick.is-taken { animation-duration: 600ms; }
}

/* --- the co-brand: "ZATE × iconatatiana" (stylistMaster.js paintCoBrand) ---
   Partner accounts only: the stylist's master account and her clients. The
   partner's name ("iconatatiana", all lowercase) weighs as much as ZATE: its
   ascenders reach the wordmark's cap height and its x-height sits at about
   two thirds of it (the caps fill ~0.255 of the wordmark's width; Cormorant's
   caps are ~0.63 of the font size; ×1.2 for a lowercase name). */
/* Both names sit on one baseline. The wordmark image ends below ZATE's own
   baseline (the Z's tail): its letters stand on a line ~14% of the image's
   height (0.0475 × its width) above its bottom edge, so the name is lifted by
   that much after aligning to the image's edge. */
.has-co-brand .brand .brand-title { display: flex; align-items: baseline; gap: 19px; }
.co-brand { --mark: 118px; display: inline-flex; align-items: baseline; gap: calc(var(--mark) * 0.16); font-family: var(--serif); font-weight: 500; color: var(--ink); white-space: nowrap; }
.co-brand-name { font-size: calc(var(--mark) * 0.255 / 0.63 * 1.2); line-height: 1; letter-spacing: 0.02em; }
.co-brand { position: relative; top: calc(var(--mark) * -0.0475); }
/* A capital X, as fashion collaborations are written ("ZATE X iconatatiana"):
   ZATE's cap height, in deep caramel so it reads as the joint, not a word,
   with room on both sides (0.16 × the wordmark's width), as printed collab marks. */
.co-brand-x { font-size: calc(var(--mark) * 0.255 / 0.63); line-height: 1; color: var(--caramel-deep); font-weight: 400; }
.co-brand-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 15px; margin: 0 0 14px; }
.co-brand-line .co-brand-mark { width: 92px; height: auto; display: block; }
.co-brand--line { --mark: 92px; }
.stylist-by-partner .co-brand-line { justify-content: center; }
@media (max-width: 640px) {
  /* On a phone the lockup takes the whole first row, one line, both names at
     the same height; the add buttons move to a row of their own under it. */
  .has-co-brand .app-header { flex-wrap: wrap; row-gap: 10px; }
  .has-co-brand .app-header .brand { flex: 1 0 100%; }
  .has-co-brand .app-header .header-right { flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
  .has-co-brand .brand .brand-mark { width: 84px; }
  .has-co-brand .brand .co-brand { --mark: 84px; }
  .has-co-brand .brand .brand-title { gap: 13px; }
  .has-co-brand .brand p { display: none; }
  .co-brand-line .co-brand-mark { width: 80px; }
  .co-brand--line { --mark: 80px; }
}
@media (max-width: 390px) {
  /* Narrow phones (360–390 px): the whole lockup a size down so it keeps its
     side margin. */
  .has-co-brand .brand .brand-mark { width: 74px; }
  .has-co-brand .brand .co-brand { --mark: 74px; }
  .has-co-brand .brand .brand-title { gap: 11px; }
  .co-brand-line .co-brand-mark { width: 72px; }
  .co-brand--line { --mark: 72px; }
}

/* --- the stylist's look builder: pieces to change, take out, add --- */
.sm-ai-again { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: -4px 22px 12px; }
.sm-ai-again[hidden] { display: none; }
.sm-ai-again .link-btn { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 0; }
.sm-pieces { margin: 0 22px 12px; }
.sm-pieces:empty { display: none; }
.sm-pieces-hint { margin: 0 0 8px; }
.sm-pieces-row { display: flex; gap: 8px; overflow-x: auto; padding: 7px 7px 4px 0; scrollbar-width: thin; }
.sm-look-piece { position: relative; flex: 0 0 84px; }
.sm-look-piece-pick, .sm-look-add { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px 4px 8px; background: #fff; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font: inherit; color: var(--ink); }
.sm-look-piece-pick img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sm-look-piece .sm-piece-name, .sm-look-add .sm-piece-name { font-size: 11.5px; -webkit-line-clamp: 2; }
.sm-look-piece.is-on .sm-look-piece-pick, .sm-look-add.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sm-look-piece-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sm-look-add { flex: 0 0 84px; justify-content: center; min-height: 112px; border-style: dashed; background: transparent; }
.sm-look-add > span:first-child { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--caramel-deep); }
.sm-swap { margin: 0 22px 14px; padding: 14px; border: 1px solid var(--ink); background: var(--surface); }
.sm-swap[hidden] { display: none; }
.sm-swap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.sm-swap-head .eyebrow { margin: 0 0 2px; }
.sm-swap-name { font-family: var(--serif); font-weight: 500; font-size: 19px; }
.sm-swap-close { font-size: 13px; padding: 0; white-space: nowrap; }
.sm-swap-label { margin: 12px 0 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--caramel-deep); }
.sm-swap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sm-swap .sm-filters { margin: 0 0 10px; padding: 0 0 2px; }
.sm-rate { margin: 0 22px 16px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.sm-rate[hidden] { display: none; }
.sm-rate-q { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.sm-rate-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sm-rate-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.sm-rate-btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sm-rate-btn:disabled { opacity: .6; cursor: default; }
.sm-rate input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; }
.sm-rate-thanks { margin: 8px 0 0; }
.sm-rate-thanks[hidden] { display: none; }
.sm-choice { padding: 6px 4px 8px; }
.sm-choice .sm-piece-name { font-size: 11.5px; }

/* "See your clients' quiz": the entry on the stylist's panel, and the bar
   the real onboarding quiz shows while she walks through it (nothing saved). */
.sm-quiz-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 26px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.sm-quiz-card > div { flex: 1 1 240px; }
.sm-quiz-title { font-family: var(--serif, "Cormorant Garamond", serif); font-size: 22px; margin: 0 0 4px; color: var(--ink); }
.sm-quiz-card .look-meta { margin: 0; }
.onboard.is-preview { padding-bottom: 96px; }
.onboard.is-preview .onboard-later { display: none; }
.onboard-preview-bar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 62; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 9px 10px 9px 16px; background: var(--ink); color: var(--surface); border-radius: 999px; font-size: 12px; letter-spacing: 0.06em; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
.onboard-preview-bar[hidden] { display: none; }
.onboard-preview-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onboard-preview-bar button { flex: none; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.onboard-preview-note[hidden] { display: none; }
.onboard-preview-note { color: var(--ink); }
.onboard-preview-note.is-flash { animation: onboard-preview-flash 1.2s ease; }
@keyframes onboard-preview-flash { 0%, 60% { background: var(--line); } 100% { background: transparent; } }

/* Black or navy (backend/colorConfirm.js): one quiet card in the closet, a
   sheet of the dark pieces, and the same two-way choice on a piece's sheet. */
.dark-colors-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 12px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper, #f7f4ef);
}
.dark-colors-card[hidden] { display: none; }
.dark-colors-body { min-width: 0; flex: 1 1 260px; }
.dark-colors-card p { margin: 0; }
.dark-colors-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}
.dark-colors-note {
  margin-top: 4px !important;
  font-size: 13px;
  color: var(--muted);
}
.dark-colors-actions {
  display: flex;
  align-items: center;
  gap: 4px 16px;
}

.dark-colors-sheet-card { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; }
.dark-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 14px;
  margin: 0 22px;
}
.dark-colors-tile { min-width: 0; }
.dark-colors-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--warm);
  display: grid;
  place-items: center;
  padding: 10% 8%;
  overflow: hidden;
}
.dark-colors-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dark-colors-name {
  margin: 8px 0 6px;
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A question above each choice when the sheet asks more than black or navy
   (backend/labelGuard.js): "Skirt or shorts?". */
.dark-colors-q {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
}
.dark-choice + .dark-colors-q { margin-top: 10px; }
.label-choice .dark-choice-btn { overflow: hidden; text-overflow: ellipsis; }
.dark-colors-footer {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 22px 22px 0;
}
.dark-colors-footer .btn-primary { min-width: 140px; min-height: 44px; }

.dark-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.dark-choice-btn {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.dark-choice-btn + .dark-choice-btn { border-left: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); }
.dark-choice-btn.is-on { background: var(--ink); color: var(--bg); }
.dark-choice-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }
.dark-choice-btn:disabled { opacity: 0.6; cursor: default; }

.dark-color-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 22px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.dark-color-inline[hidden] { display: none; }
.dark-color-inline-q {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.dark-color-inline .dark-choice { flex: 0 0 auto; min-width: 180px; }

/* "¿Cómo son estos zapatos?" (backend/shoeConfirm.js): her own photo of the
   shoes beside the reason, three square answers, one quiet line below. */
.dark-colors-head-text { min-width: 0; }
.dark-colors-eyebrow { margin: 0 0 4px; }
.dark-colors-eyebrow[hidden] { display: none; }
.dark-colors-hold {
  margin: 14px 22px 0;
  font-size: 12px;
  color: var(--muted);
}
.dark-colors-hold[hidden] { display: none; }
.shoe-ask-tile { grid-column: 1 / -1; margin-top: 14px; }
.shoe-ask-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.shoe-ask-row .dark-colors-media {
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--warm);
}
.shoe-ask-row .dark-colors-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
.shoe-ask-tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--bg);
  color: var(--ink);
}
.shoe-ask-row .dark-colors-name {
  margin: 2px 0 6px;
  font-size: 15px;
  white-space: normal;
}
.shoe-ask-why {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.dark-choice.shoe-choice {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.shoe-choice .dark-choice-btn {
  min-height: 48px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 14px;
}
.shoe-choice .dark-choice-btn + .dark-choice-btn { border-left: 1px solid var(--ink); }
.shoe-choice .dark-choice-btn[data-shoe="platform"] { grid-column: 1 / -1; }

/* A card being redrawn after her answer keeps its place; it shimmers. */
.garment-card.is-redrawing .garment-media img { opacity: 0.35; }
.garment-redraw-veil {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 60%, transparent), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .garment-redraw-veil { animation: none; }
}

/* Pieces a member or program client may still add (billing.js piecesBlock). */
.membership-pieces { margin: 16px 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--warm); }
.membership-pieces-title { margin: 0 0 6px; font-weight: 600; font-size: 14px; color: var(--ink); }
.membership-pieces .look-meta { margin: 0 0 4px; }
.membership-pieces .membership-stack { margin-top: 12px; }

/* Free time over, unpaid (billing.js paintLock): the app blurred behind a note to pay. */
body.zate-locked #view-closet,
body.zate-locked #view-chat,
body.zate-locked #view-shopper,
body.zate-locked #view-looks { filter: blur(14px); pointer-events: none; user-select: none; }
#zate-lock { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(248, 241, 233, 0.35); }
.zate-lock-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 22px; padding: 28px 24px 24px; text-align: center; box-shadow: 0 18px 60px rgba(62, 43, 35, 0.18); }
.zate-lock-card h3 { font-size: 28px; font-weight: 500; line-height: 1.15; margin: 0 0 10px; }
.zate-lock-card .hero-copy { margin: 0 0 18px; }
.zate-lock-card .btn-primary { width: 100%; }
.zate-lock-eyebrow { font-size: 12px; letter-spacing: 0.16em; color: var(--caramel-deep); margin: 0 0 8px; }
.zate-lock-links { display: flex; justify-content: center; gap: 18px; margin: 14px 0 0; }
/* Her account stays hers while locked: deleting it opens above the note. */
body.zate-locked #delete-account-modal { z-index: 1300; }

/* One tap (billing.js renderConfirm) and the form opened straight from a block. */
.membership-confirm-price { font-family: var(--serif); font-size: 40px; line-height: 1.1; margin: 4px 0 10px; color: var(--ink); }
.membership-direct-note { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--caramel-deep); margin: 0 0 6px; }
.membership-annual-link { text-align: center; margin: 10px 0 0; }

/* The small-closet note (app.js maybeSmallClosetNote). */
.small-closet-sheet .sheet-card { padding: 30px 24px 16px; text-align: center; }
.small-closet-icon { display: block; color: var(--caramel-deep); margin: 0 auto 10px; }
.small-closet-title { font-size: 27px; font-weight: 500; line-height: 1.15; margin: 0 0 10px; color: var(--ink); }
.small-closet-copy { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 auto 22px; max-width: 300px; }
.small-closet-sheet .btn-primary { width: 100%; }
.small-closet-sheet .link-btn { display: block; margin: 12px auto 0; }

/* Pieces used, under the closet's filters (billing.js paintPiecesCount). */
.closet-pieces-count { margin: 6px 0 0; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.closet-pieces-count.is-low { color: var(--caramel-deep); }
.closet-pieces-count .link-btn { font-size: 12px; }
/* Enroll a client (stylistMaster.js). */
.sm-enroll { margin: 14px 0 18px; padding: 16px; border-radius: 16px; background: var(--warm); }
.sm-enroll:empty { display: none; }
.sm-enroll-title { margin: 0 0 4px; font-weight: 600; font-size: 15px; color: var(--ink); }
.sm-enroll-row { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.sm-enroll-input { flex: 1 1 200px; min-width: 0; padding: 11px 12px; border: 1px solid var(--taupe); border-radius: 12px; font: inherit; background: var(--surface); }
.sm-enroll-price { font-family: var(--serif); font-size: 30px; margin: 8px 0 2px; color: var(--ink); }
.sm-enroll-recent { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.sm-enroll-recent li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--taupe); }
.sm-enroll-st { color: var(--muted); }
.sm-enroll-st.is-paid { color: var(--caramel-deep); font-weight: 600; }
/* When her access starts (stylistMaster.js renderEnroll). */
.sm-enroll-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 6px; font-size: 14px; color: var(--ink); }
.sm-enroll-when-label { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.sm-enroll-when label { display: inline-flex; align-items: center; gap: 6px; }
.sm-enroll-date { flex: 1 1 100%; }
.sm-enroll-date[hidden] { display: none; }
.sm-enroll-go { width: 100%; margin: 8px 0 4px; }

/* --- "Sugerir una compra" / "Buscar para ella" (2026-10-14, stylistShop.js) ---
   A suggested buy is never drawn as a piece she owns: a dashed tile with a
   small "Por comprar" tag beside the board, and product cards with "Ver en
   la tienda" under the look and in the trip. */
.sm-search-her { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sm-buy-block { margin: 0 22px 16px; }
.sm-buy-open { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sm-shop { margin-top: 12px; padding: 14px; border: 1px solid var(--ink); background: var(--surface); }
.sm-shop[hidden] { display: none; }
.sm-rec-shop { margin: 0 22px 16px; border-color: var(--line); }
.sm-rec-intro { margin: 0 22px 12px; }
.sm-shop-form { display: flex; gap: 8px; }
.sm-shop-form input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; }
.sm-shop-form .btn-primary { flex: 0 0 auto; width: auto; margin: 0; padding-left: 18px; padding-right: 18px; }
.sm-shop-status { margin: 10px 0 8px; }
.sm-shop-status:empty { display: none; }
.sm-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sm-shop-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.sm-shop-card.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sm-shop-img { display: block; aspect-ratio: 3 / 4; background: #fff; }
.sm-shop-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sm-shop-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.sm-shop-copy strong { font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-shop-copy .look-meta { margin: 0; font-size: 12px; }
.sm-shop-fit { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--caramel-deep); }
.sm-shop-was { font-size: 11px; color: var(--muted); }
.sm-shop-note { font-size: 11px; color: var(--caramel-deep); font-style: italic; }
.sm-shop-add { margin-top: auto; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.sm-shop-add.is-on { background: var(--ink); color: var(--surface); }
/* Her thumbs on a result, and "See other options" / "Paste a product link" (2026-10-25). */
.sm-shop-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.sm-shop-actions .sm-shop-add { margin-top: 0; flex: 1 0 100%; min-width: 0; white-space: nowrap; }
.sm-shop-vote { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.sm-shop-vote:hover, .sm-shop-vote:focus-visible { color: var(--ink); border-color: var(--ink); }
.sm-shop-vote.is-on { color: var(--surface); background: var(--ink); border-color: var(--ink); }
.sm-shop-more { display: block; margin: 12px auto 0; }
.sm-shop-more[hidden] { display: none; }
.sm-link-open { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.sm-link-form { display: flex; gap: 8px; margin-top: 8px; }
.sm-link-form[hidden] { display: none; }
.sm-link-form input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; }
.sm-link-form .btn-primary { flex: 0 0 auto; width: auto; margin: 0; padding-left: 18px; padding-right: 18px; }
.sm-link-status { margin: 6px 0 0; }
.sm-link-status:empty { display: none; }
.sm-buy-blank { display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--line); }
.sm-buy-row { margin-top: 12px; }
.sm-buy-eyebrow { margin: 0 0 8px; }
.sm-buy-tiles { display: flex; gap: 10px; overflow-x: auto; padding: 10px 8px 4px 0; }
.sm-buy-tile { position: relative; flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 8px; border: 1px dashed var(--caramel-deep); border-radius: 2px; background: transparent; }
.sm-buy-tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; opacity: .92; }
.sm-buy-tile .sm-piece-name { font-size: 11.5px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-buy-meta { font-size: 11px; color: var(--muted); text-align: center; }
.sm-buy-tag { position: absolute; z-index: 1; top: -8px; left: 6px; padding: 1px 5px; font-size: 10px; letter-spacing: .06em; white-space: nowrap; line-height: 1.4; text-transform: uppercase; color: var(--caramel-deep); background: var(--surface); border: 1px dashed var(--caramel-deep); border-radius: 2px; }
.sm-buy-tag.is-inline { position: static; align-self: flex-start; }
.sm-rec-send { margin: 0 22px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.sm-rec-send[hidden] { display: none; }
.sm-rec-send .sm-field, .sm-rec-send .sm-send { margin-left: 0; margin-right: 0; }
.look-buys { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); text-align: left; }
.look-buys > .eyebrow { margin: 0; color: var(--caramel-deep); }
.look-buy img, .look-buy .ask-opt-blank { border-style: dashed; border-color: var(--caramel-deep); }
.look-buy .look-from-note { margin: 2px 0; font-size: 13px; }
.sbp-recs { margin: 8px 0 12px; }
.ask-card.is-rec { border-color: var(--caramel-deep); }
.ask-card.is-rec .look-buys { margin-top: 0; padding-top: 0; border-top: 0; }
.ask-card.is-rec > .eyebrow { margin: 0; }
.trip-buy-wrap { margin: 28px 0 0; }
.trip-buy-wrap[hidden] { display: none; }
.trip-buy-wrap h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 4px; }
.trip-buy-wrap .look-buys { border-top: 0; }
#look-detail-board .look-buys { max-width: 420px; margin-left: auto; margin-right: auto; }
@media (max-width: 480px) {
  .sm-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-shop { padding: 12px; }

}

/* --- a piece, large, in the stylist's panel (2026-10-14) --- */
.sm-piece-cell { position: relative; min-width: 0; }
.sm-piece-cell > .sm-piece { width: 100%; height: 100%; box-sizing: border-box; }
.sm-zoom { position: absolute; top: 6px; left: 6px; z-index: 2; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(252, 248, 243, .92); color: var(--ink); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.sm-zoom:hover { border-color: var(--ink); }
.sm-viewer { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40, 28, 22, .55); }
.sm-viewer[hidden] { display: none; }
.sm-viewer-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 18px 18px 20px; background: var(--surface); border-radius: 4px; display: flex; flex-direction: column; gap: 12px; }
.sm-viewer-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.sm-viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); min-height: 280px; }
.sm-viewer-stage img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.sm-viewer-stage.is-photo { background: #f3eee8; }
.sm-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(252, 248, 243, .92); color: var(--ink); cursor: pointer; }
.sm-viewer-nav.is-prev { left: 8px; }
.sm-viewer-nav.is-next { right: 8px; }
.sm-viewer-copy h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); }
.sm-viewer-copy .look-meta { margin: 2px 0 0; }
.sm-viewer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sm-viewer-actions > * { flex: 1 1 180px; margin: 0; }
/* Editing a look she already sent (2026-10-14). */
.sm-look-actions { display: flex; gap: 14px; margin-top: 6px; }
.sm-look-actions .link-btn { padding: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.sm-look-actions .is-danger { color: #9B2C2C; }
.sm-editing { margin: 0 22px 12px; padding: 10px 12px; border: 1px dashed var(--caramel-deep); font-size: 13px; color: var(--caramel-deep); }
/* "Duplicar" and "Change pieces" on a saved look (2026-10-14). */
.look-copy-actions { display: contents; }
.look-copy-actions > button[hidden] { display: none; }
.look-edit-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.look-edit-panel[hidden] { display: none; }
.look-edit-panel .eyebrow { margin: 0 0 10px; }
.look-edit-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.look-edit-row.is-on { background: rgba(166, 124, 82, .08); }
.look-edit-row img { width: 48px; height: 48px; object-fit: contain; background: #fff; flex: 0 0 48px; }
.look-edit-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-edit-row .link-btn { padding: 0; font-size: 12.5px; }
.look-edit-x { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.look-edit-add { margin: 10px 0 6px; padding: 0; font-size: 13px; }
.look-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; margin: 6px 0 10px; }
.look-edit-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--muted); }
.look-edit-option img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.look-edit-option span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.look-edit-actions { display: flex; gap: 10px; margin-top: 10px; }
.look-edit-actions > button { flex: 1 1 0; margin: 0; }
/* A suggested buy inside the outfit board (approved mock, 2026-10-14): a
   dashed rounded outline and a dark "Por comprar" pill, so it reads at a
   glance as not from her closet. */
.outfit-collage-item.is-to-buy { overflow: visible; }
.outfit-collage-item.is-to-buy::before { content: ''; position: absolute; inset: -6px; pointer-events: none; border: 2.5px dashed #8a6a4f; border-radius: 12px; }
.board-buy-badge { position: absolute; top: 2px; left: 2px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: #3b2a20; color: #f6efe6; font: 500 9.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.board-buy-badge svg { flex: 0 0 auto; }
.look-buys.is-lines { gap: 4px; margin-top: 6px; padding-top: 0; border-top: 0; }
.look-buy-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.look-buy-line .look-buy-inline { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* A row that needs a photo (UX pass 2026-10-14): the camera leads, the
   gallery follows, "Search again" is a link, and leaving the piece out is
   a quiet link in the danger colour. */
.import-photo-actions .link-btn { padding: 8px 2px; font-size: 13px; }
.link-btn--danger { color: #8a3d3d; text-decoration-color: rgba(138, 61, 61, .45); }
.import-option[hidden] { display: none !important; }

/* "Completa tu look" (completeLook.js, 2026-10-14): ZATE's one suggested
   piece under an AI look; in the board it wears the stylist's dashed
   outline and "Por comprar" pill, beside it a small tile. */
.complete-look { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 2px; }
.complete-look-row { display: flex; align-items: flex-start; gap: 12px; }
.complete-look-row.is-trying { padding: 8px 10px; border: 1px dashed #8a6a4f; border-radius: 10px; }
.complete-look-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.complete-look-keep { padding: 6px 12px; border: 1px solid var(--ink); border-radius: 999px; font-size: 12.5px; }
.complete-look-render { padding: 0; font-size: 12.5px; }
.complete-look[hidden] { display: none; }
.complete-look-tile { position: relative; flex: 0 0 76px; width: 76px; height: 96px; display: block; background: #fff; border: 2px dashed #8a6a4f; border-radius: 10px; overflow: hidden; }
.complete-look-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.complete-look-tile .sm-buy-tag { position: absolute; top: auto; left: 4px; bottom: 4px; font-size: 10px; }
.complete-look-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.complete-look-lead { font-weight: 600; }
.complete-look-dismiss { padding: 0; font-size: 12.5px; color: var(--muted); }
.trip-missing-wrap { margin: 28px 0 0; }
.trip-missing-wrap[hidden] { display: none; }
.trip-missing-wrap .look-buys { border-top: 0; }
.trip-missing-item .look-meta { margin: 0; }
/* A stylist's draft (2026-10-14): only she sees it, until she sends it. */
.look-card.is-draft { position: relative; border: 1px dashed var(--caramel-deep); background: rgba(166, 124, 82, .05); }
.sm-draft-tag { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--caramel-deep); color: var(--caramel-deep); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sm-look-actions { flex-wrap: wrap; row-gap: 6px; }
.sm-look-actions .is-send { color: var(--ink); font-weight: 600; }
.sm-draft-btn { margin-top: 8px; }
/* "Así se ve en tu look" (2026-10-14): each Shop result opened from an AI
   look, drawn in a mini version of that look's board; tapping keeps it. */
.look-mini { margin: 0 0 12px; cursor: pointer; }
.look-mini-head { margin: 0 0 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--caramel-deep); }
.look-mini-board { width: 82%; margin: 0 auto; }
.look-mini.is-kept .look-mini-board { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.look-mini-keep[disabled] { opacity: 1; }

/* "Probar variantes" (lookVariants.js): a look's variants side by side on a
   wide screen, a swipeable row on a phone. */
.lv-modal { z-index: 96; padding: 16px; }
.lv-card { width: min(1080px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.lv-head { align-items: flex-start; }
.lv-head .eyebrow { margin: 0 0 4px; }
.lv-head h3 { font-size: 28px; line-height: 1.1; }
.lv-hint { margin: 6px 22px 12px; }
.lv-track { display: flex; align-items: flex-start; gap: 14px; padding: 4px 22px 8px; overflow-x: auto; overflow-y: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; }
.lv-col { flex: 1 1 0; min-width: 260px; scroll-snap-align: center; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.lv-col-head { display: flex; align-items: center; justify-content: space-between; }
.lv-letter { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); }
.lv-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.lv-board { background: #fff; }
.lv-board .look-board { margin: 0; }
.lv-suggest-label { margin: 4px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lv-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-slot { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.lv-slot:disabled { opacity: .5; }
.lv-edit-toggle { align-self: flex-start; padding: 0; font-size: 13px; }
.lv-edit[hidden] { display: none; }
.lv-edit .look-edit-grid { max-height: 220px; }
.lv-keep { margin-top: 6px; width: 100%; }
.lv-dots { margin: 0; padding: 0 22px; font-size: 12px; color: var(--muted); text-align: center; display: none; }
.lv-dots span { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.lv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 22px 20px; border-top: 1px solid var(--line); }
.lv-add { padding: 0; font-size: 13px; }
.lv-foot-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 760px) {
  .lv-modal { padding: 0; align-items: stretch; }
  .lv-card { width: 100%; max-height: none; height: 100%; height: 100dvh; }
  .lv-head { padding: 18px 16px 0; }
  .lv-hint { margin: 6px 16px 10px; }
  .lv-track { padding: 4px 16px 8px; gap: 10px; }
  .lv-col { flex: 0 0 86%; min-width: 0; }
  .lv-dots { display: block; padding: 0 16px 6px; }
  .lv-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
  .lv-foot-actions { width: 100%; margin-left: 0; }
  .lv-foot-actions .ghost-btn { flex: 1 1 0; }
}

/* Editing on the board itself (2026-10-14): a tap opens a small menu on the
   piece; on a pointer that hovers, a "×" in its corner. Read-only boards
   never get these. */
:is(.outfit-collage, .look-board).is-board .outfit-collage-item.is-editable { cursor: pointer; }
:is(.outfit-collage, .look-board).is-board .outfit-collage-item.is-editable:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.outfit-collage-item.is-editable.is-menu-open { z-index: 20; }
.board-piece-x {
  position: absolute; top: -4px; right: -4px; z-index: 6; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
@media (hover: hover) {
  .outfit-collage-item.is-editable:hover > .board-piece-x,
  .outfit-collage-item.is-editable:focus-within > .board-piece-x { opacity: 1; pointer-events: auto; }
}
.board-piece-x:focus-visible { opacity: 1; pointer-events: auto; outline: 1px solid var(--ink); outline-offset: 1px; }
.board-piece-menu {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; flex-direction: column; min-width: 150px; padding: 4px;
  background: var(--surface); border: 1px solid var(--ink); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(62, 43, 35, .16);
}
.board-piece-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
}
.board-piece-menu button + button { border-top: 1px solid var(--line); border-radius: 0; }
.board-piece-menu button:hover, .board-piece-menu button:focus-visible { background: rgba(62, 43, 35, .06); outline: none; }
.board-piece-menu i { width: 14px; text-align: center; color: var(--caramel-deep); }

/* Drag to reorder the looks of a trip (enableLookReorder, app.js). */
.looks-grid.is-reorderable,
.sm-trip-looks.is-reorderable { position: relative; }
.is-reorderable > .look-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: opacity var(--ease), box-shadow var(--ease); }
.is-reorderable > .look-card img { -webkit-user-drag: none; }
@media (hover: hover) { .is-reorderable > .look-card { cursor: grab; } }
.is-drag-on, .is-drag-on * { cursor: grabbing !important; }
.is-reorderable > .look-card.is-dragging { position: relative; z-index: 5; opacity: .92; box-shadow: 0 18px 40px rgba(62, 43, 35, .16); background: var(--surface); transition: none; pointer-events: none; }
.is-drag-on > .look-card:not(.is-dragging) { opacity: .7; }
.look-drop-line { position: absolute; z-index: 4; background: var(--ink); border-radius: 2px; pointer-events: none; }
.look-reorder-hint { margin: -2px 0 12px; font-size: 12.5px; }
.look-move { display: flex; gap: 16px; margin-top: 6px; }
.look-move .link-btn { padding: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.look-move .link-btn:disabled { opacity: .35; cursor: default; }
.look-move .link-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.look-reorder-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* "¿Lo compraste?" (boughtIt.js, 2026-10-15): under a product she opened in
   the store, a quiet question and two answers. */
.bought-ask { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.bought-ask-q { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; line-height: 1.2; color: var(--ink); }
.bought-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bought-ask-actions button { min-height: 44px; padding: 8px 14px; border-radius: 999px; font: 500 13px/1.2 var(--sans); cursor: pointer; transition: opacity var(--ease); }
.bought-ask .bought-yes { border: 1px solid var(--espresso); background: var(--espresso); color: var(--cream); }
.bought-ask .bought-later { border: 1px solid var(--taupe); background: transparent; color: var(--ink); }
.bought-ask-actions button:disabled { opacity: .55; cursor: default; }
.bought-ask-actions button:focus-visible { outline: 2px solid var(--caramel-deep); outline-offset: 2px; }
.bought-ask.is-done { padding: 8px 12px; }
.bought-ask-done { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Accessibility (2026-10-15) ----------------------------------------
   ZATE is used on phones, often outdoors. Keyboard focus is always visible,
   every control has a thumb-sized (44 × 44 px) target on touch screens, and
   looping shimmer stops for people who ask for less motion. */

/* Focus: one visible ring for every control reached by keyboard. Fields
   keep their own underline (it turns ink on focus) and get a second line. */
:where(button, a[href], summary, select, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.field:focus,
.fix-textarea:focus,
.look-note-input:focus { box-shadow: 0 1px 0 var(--ink); }
.composer:focus-within { box-shadow: 0 1px 0 var(--ink); }
.modal-meta select.meta-select:focus-visible,
.import-link-meta select.meta-select:focus-visible { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
/* The open sheet itself takes focus (so a screen reader starts there); it
   is a container, not a control, and draws no ring. */
.modal-card:focus, .lightbox:focus { outline: none; }
/* Light controls over the dark camera and the picture viewer. */
:is(.lightbox, .closet-scan, .rapid-camera, .trip-chip) :focus-visible { outline-color: #fff; }

/* Hints inside empty fields read at 4.8:1 or better (the browser's own grey
   was about 2.5:1 on cream). */
:where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }

/* Touch targets. Where the design wants small words, an invisible hit area
   around them grows the target without moving anything; where a control is
   transparent anyway, its box simply grows to 44 px. */
@media (pointer: coarse) {
  :where(.link-btn, .ghost-btn, .look-text-btn, .nav-link, .header-chip, .closet-view-btn,
         .push-card-later, .shopper-saved-link, .avatar-btn, .send-btn, .icon-btn.style-this,
         .auth-tabs button, .brand, .danger, .mood-chip, .action-pill, .look-handoff-btn,
         .look-add-btn) { position: relative; }
  :is(.link-btn, .ghost-btn, .look-text-btn, .nav-link, .header-chip, .closet-view-btn,
      .push-card-later, .onboard-later, .shopper-saved-link, .avatar-btn, .send-btn,
      .composer-preview-remove, .auth-tabs button, .brand, .danger, .mood-chip, .action-pill,
      .look-handoff-btn, .look-add-btn)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* «Combinar» on a closet card: taller target only; its neighbours (the
     heart and the pencil) sit right beside it. */
  .icon-btn.style-this::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Closet card: the heart and the pencil are 44 px squares. */
  .garment-actions { inset: auto 0 0 auto; gap: 0; align-items: center; padding-left: 10px; }
  .garment-actions .icon-btn:not(.style-this) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }

  /* Close buttons and the small header controls. */
  .icon-close { width: 44px; height: 44px; flex: 0 0 44px; margin-right: -8px; }
  .kept-uploads-close { width: 44px; height: 44px; top: -2px; right: 0; }
  .lightbox-close { min-width: 44px; min-height: 44px; }
  .trip-chip-close, .attach { width: 44px; height: 44px; flex-basis: 44px; }
  .add-clothes-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Language and closet-for switches: EN · ES, Women · Men. */
  .lang-switch { gap: 2px; }
  .lang-switch button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
  }
  /* In the profile menu the words stay in line with their label. */
  .lang-switch--menu button { padding: 0; text-align: left; }

  /* Profile menu rows, filled buttons, the closet's counts and the piece's
     category pickers. */
  .profile-menu button,
  .btn-primary,
  .closet-meta .closet-stat,
  .closet-refine .closet-stat,
  select.meta-select { min-height: 44px; }
  /* Inline padding: a taller target, the line itself does not move. */
  .profile-menu-legal a { padding: 14px 0; }

  /* Stylist suggestions: the rows stand a thumb apart. */
  .chips { row-gap: 0; }
  .chip,
  #view-chat.is-conversing .chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  /* Feedback score, 1 to 5. */
  .feedback-rating button { min-width: 44px; min-height: 44px; }
}

/* Less motion: looping shimmer and pulses stand still (the pieces still
   say they are on their way in words). */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .garment-card.is-preparing .garment-media,
  .preparing-dot,
  .stylist-pending-board,
  .import-match-progress.is-active .import-match-bar,
  .shopper-visual.is-loading,
  .shopper-skeleton-pic,
  .shopper-skeleton-lines span,
  .cs-card img,
  .cs-counter.is-bump,
  .fix-status.is-busy::before,
  .import-batch-photo.is-uploading span::before,
  .garment-redraw-veil,
  #view-closet, #view-chat, #view-looks, #view-shopper { animation: none; }
  .ghost-btn:hover { transform: none; }
}

/* Closet pictures stay in ZATE (owner, 2026-10-17; app.js canSaveImages):
   unless the account may keep pictures (team, stylists, brands), no
   long-press "Save image", no dragging a card out, and a quiet ZATE mark on
   every card so a screenshot carries it. */
body:not(.can-save-images) img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
body:not(.can-save-images) .garment-media::after,
body:not(.can-save-images) .modal-visual::after {
  content: "ZATE";
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(32, 31, 29, 0.32);
  pointer-events: none;
}
body:not(.can-save-images) .modal-visual::after {
  font-size: 13px;
  right: 12px;
  bottom: 10px;
}
#look-picture-btn[hidden] { display: none; }

/* The owner's own look builder, easy to find (2026-10-18: "¿por qué no puedo hacer outfits manuales?"). */
.self-builder-btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; }
.self-builder-btn[hidden] { display: none; }

/* Small pieces from outfit photos, asked for together (app.js smallPiecesCard). */
.small-pieces-list { list-style: none; margin: 4px 22px 6px; padding: 0; display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; }
.small-piece-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, rgba(32, 31, 29, 0.1)); }
.small-piece-row:last-child { border-bottom: 0; }
.small-piece-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.small-piece-name strong { font-weight: 500; font-size: 15px; }
.small-piece-name span { font-size: 13px; color: var(--muted, #6f675f); }
.small-piece-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.small-piece-actions .small-piece-photo { min-height: 40px; padding: 0 12px; font-size: 12px; }
.small-piece-actions .small-piece-remove { min-height: 40px; padding: 0 6px; }
.small-pieces-remove-all { display: block; width: auto; margin: 12px 22px 0; min-height: 44px; }

/* The ZATE mark is for garment pictures only, never an empty waiting tile;
   the grouped card's title is a sentence (2026-10-19). */
body:not(.can-save-images) .garment-card.is-preparing .garment-media::after { content: none; }
.garment-card.is-small-group h3 { text-transform: none; }
.garment-card.is-small-group h3::first-letter { text-transform: uppercase; }
/* "Completa este look" (completePiece.js + shopper.js openCompletePieceResults) */
.detail-complete-btn { display: block; width: calc(100% - 44px); margin: 16px 22px 0; min-height: 44px; }
.detail-complete-btn[hidden] { display: none; }
.complete-piece-sheet .sheet-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
.complete-piece-sheet .cp-pick,
.complete-piece-sheet .cp-ask { padding: 0 22px; }
.complete-piece-sheet [hidden] { display: none; }
.cp-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.cp-pick-item {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  border: 1px solid var(--line); background: var(--surface); padding: 6px; cursor: pointer;
  font-size: 12px; color: var(--ink); text-align: left; min-height: 44px;
}
.cp-pick-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; }
.cp-pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pick-item:focus-visible, .cp-pick-item:hover { border-color: var(--ink); }
.cp-piece { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.cp-piece img { width: 56px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.cp-piece-name { flex: 1; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.cp-label { margin: 16px 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; }
.cp-chip.is-on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cp-note { width: 100%; margin-top: 16px; font-size: 16px; }
.cp-hint { min-height: 1em; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cp-go { display: block; width: 100%; margin: 14px 0 0; min-height: 44px; }
.cp-go:disabled { opacity: .5; cursor: default; }

.complete-piece .cp-board { margin: 18px 0 8px; }
.complete-piece .cp-collage { max-width: 420px; margin: 0 auto; }
.cp-board-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; text-align: center; }
.cp-slot { margin-top: 26px; }
.cp-slot-title { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 4px; color: var(--ink); }
.cp-slot-status { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.cp-slot-status[hidden] { display: none; }
.cp-slot-status.is-loading::after { content: ''; display: inline-block; width: 1em; animation: cp-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes cp-dots { from { width: 0; } to { width: 1em; } }
.cp-options { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
@media (min-width: 720px) { .cp-options { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; overflow-x: visible; } }
.cp-option { scroll-snap-align: start; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.cp-option.is-chosen { border-color: var(--ink); }
.cp-option-media { aspect-ratio: 4 / 5; background: #fff; display: flex; align-items: center; justify-content: center; }
.cp-option-media img { width: 100%; height: 100%; object-fit: contain; }
.cp-option-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.cp-option-title { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.3; }
.cp-option-meta { margin: 0; font-size: 13px; color: var(--muted); }
.cp-option-fit { margin: 0; font-size: 12px; color: var(--caramel-deep); }
.cp-option-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 6px; }
.cp-option-actions .cp-use, .cp-option-actions .cp-store, .cp-option-actions .cp-no { min-height: 44px; display: inline-flex; align-items: center; }

/* "+" in the chat: ask about a piece from the closet or a photo (app.js setChatPiece). */
.chat-piece-btn { border: 0; background: transparent; padding: 0; min-width: 44px; min-height: 44px; font-size: 18px; color: var(--ink); }
.chat-piece-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 12; display: flex; flex-direction: column; min-width: 220px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(62, 43, 35, 0.14); }
.chat-piece-menu[hidden] { display: none; }
.chat-piece-menu button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font-size: 15px; text-align: left; cursor: pointer; }
.chat-piece-menu button + button { border-top: 1px solid var(--line); }
.chat-piece-menu button:hover, .chat-piece-menu button:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.chat-piece-menu i { width: 18px; text-align: center; color: var(--muted); }
.composer-piece-note { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--muted); }
.composer-preview img { background: #fff; }
.msg-user-piece { display: block; width: 96px; height: 120px; margin: 8px 0 16px auto; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.cp-chat { margin: 4px 0 24px; }
.cp-chat .cp-slot-title { font-size: 22px; }

/* ZATE points (points.js): the "My points" sheet and the note by the avatar. */
.points-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.points-head h3 { margin: 0 0 14px; }
.points-x {
  flex: none; width: 44px; height: 44px; margin: -10px -12px 0 0; border: 0; background: transparent;
  font: inherit; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 999px;
}
.points-x:hover { color: var(--ink); background: var(--warm); }
.points-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.points-balance { display: flex; align-items: baseline; gap: 8px; color: var(--muted); }
.points-number { font-size: 52px; line-height: 0.9; color: var(--ink); }
.points-chip {
  flex: none; padding: 5px 12px; border: 1px solid var(--taupe); border-radius: 999px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.points-goal { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.points-bar { display: block; height: 4px; border-radius: 999px; background: var(--warm); overflow: hidden; }
.points-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--caramel); }
.points-bar.is-main { height: 6px; }
.points-bar.is-main > span { background: var(--ink); }
.points-tier { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.points-heading { margin: 26px 0 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.points-list { list-style: none; margin: 0; padding: 0; }
.points-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.points-list li:last-child { border-bottom: 0; }
.points-list small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.points-list .ghost-btn { min-height: 36px; padding: 6px 14px; }
.points-reward-text { flex: 1; min-width: 0; }
.points-reward .points-bar { margin-top: 8px; max-width: 220px; }
.points-amount { flex: none; font-variant-numeric: tabular-nums; color: var(--caramel-deep); }
.points-amount.is-spent { color: var(--muted); }
.points-soon { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--warm); font-size: 12px; color: var(--muted); }
.points-ways li { padding: 9px 0; }
.points-invite { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--warm); }
.points-invite-copy { flex: 1; }
.points-invite p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.points-invite .points-invite-left { margin-top: 4px; font-size: 13px; color: var(--muted); }
.points-invite-btn:disabled { opacity: .5; cursor: default; }
.points-invite-btn {
  flex: none; min-height: 44px; padding: 10px 18px; cursor: pointer; font: inherit; font-size: 14px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink);
}
.points-invite-btn:hover { background: var(--ink); color: var(--cream); }
@media (max-width: 420px) {
  .points-invite { flex-direction: column; align-items: stretch; }
}
.points-actions { margin-top: 24px; }
.points-expiring { margin: 6px 0 0; font-size: 13px; color: var(--caramel-deep); }
.points-fine { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.points-fine a { color: inherit; }
.points-note {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); right: 16px; z-index: 60; font: inherit; font-size: 13px; cursor: pointer;
  padding: 7px 13px; border: 1px solid var(--taupe); border-radius: 999px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--ease), transform var(--ease);
}
.points-note.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .points-note { transition: none; } }

/* Paying by bank transfer to ZATE's Bre-B key (transferPayments.js), 2026-10-21. */
.sm-enroll-key, .membership-transfer-key { font-family: var(--serif); font-size: 26px; letter-spacing: .04em; margin: 2px 0 10px; color: var(--ink); user-select: all; }
.sm-enroll-bytransfer { display: block; margin: 12px auto 0; }
.sm-enroll-confirm .btn-primary.sm-enroll-bytransfer { width: 100%; }
.sm-enroll-recent li { flex-wrap: wrap; align-items: baseline; }
.sm-enroll-recent li > span:first-child { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.sm-enroll-recent .sm-enroll-st { white-space: nowrap; }

/* "Work with Tatiana" sheet (stylistProgram.js). */
.sp-who { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sp-who img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; flex: none; }
.sp-who h3 { margin: 2px 0 0; }
.sp-eyebrow { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sp-price { margin: 14px 0 4px; }
.sp-price span { font-family: var(--serif); font-size: 30px; color: var(--ink); }
.sp-price small { color: var(--muted); font-size: 13px; }
.sp-list { margin: 6px 0 16px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink); }

/* Colorimetry: selfie conditions, light check, colour season. */
.appearance-selfie-cta[hidden],
.selfie-conditions[hidden],
.selfie-light-warning[hidden],
.selfie-analyzing[hidden],
.appearance-season[hidden] { display: none; }

.selfie-conditions,
.selfie-light-warning {
  margin: 10px 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.selfie-conditions-list,
.selfie-light-reasons {
  list-style: none;
  margin: 10px 0 4px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.selfie-conditions-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.4;
}

.selfie-conditions-list i {
  color: var(--caramel-deep);
  font-size: 12px;
}

.selfie-light-reasons li {
  font-size: 15px;
  line-height: 1.45;
  padding-left: 12px;
  border-left: 2px solid var(--caramel);
}

.selfie-analyzing { margin: 8px 0 14px; }

.appearance-season {
  margin: 14px 0 22px;
  padding: 18px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.season-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  margin: 4px 0 8px;
}

.season-summary {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
}

.season-image {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  margin: 6px 0 12px;
}

.season-group { margin-top: 14px; }

.season-swatches {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 8px;
}

.season-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.season-chip {
  width: 100%;
  max-width: 54px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(62, 43, 35, 0.14);
}

.season-swatch-name {
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.season-metal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 16px 0 8px;
  font-size: 15px;
}
.season-metal .onboard-label { margin: 0; }

/* "Mis medidas" (profile menu) and the size line on products. */
.measurements-card { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; }
.measurements-form { margin: 0 22px; }
.measurements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.measurements-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.measurements-field input,
.measurements-usual-row input,
.measurements-usual-row select {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--taupe);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.measurements-howto { margin: 14px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.measurements-howto summary { cursor: pointer; font-size: 14px; color: var(--caramel-deep); min-height: 32px; display: flex; align-items: center; }
.measurements-howto-body { display: flex; gap: 14px; align-items: flex-start; padding-top: 8px; }
.measurements-figure { width: 72px; flex: none; color: var(--muted); }
.measurements-steps { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; color: var(--ink); display: grid; gap: 6px; }
.measurements-label { margin: 16px 0 8px; font-size: 13px; color: var(--muted); }
.measurements-usual { display: grid; gap: 8px; }
.measurements-usual-row { display: grid; grid-template-columns: 1fr 88px 84px; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); }
.measurements-fit { display: flex; gap: 8px; flex-wrap: wrap; }
.measurements-fit-chip {
  font: inherit;
  font-size: 14px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--taupe);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.measurements-fit-chip.is-on { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.measurements-privacy { margin: 16px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.measurements-error { margin: 10px 0 0; font-size: 13px; color: #9a3b2a; }
.measurements-error[hidden] { display: none; }
.measurements-footer { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 18px; }
.measurements-footer .btn-primary { min-width: 160px; min-height: 44px; margin: 0; }
.measurements-footer .link-btn[hidden] { display: none; }

.size-advice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
span.size-advice { display: inline-flex; }
.size-advice[hidden] { display: none; }
.size-advice-main { font-weight: 600; }
.size-advice-main.is-usual { font-weight: 500; color: var(--muted); }
.size-advice-confidence { font-size: 11px; letter-spacing: 0.02em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.sm-shop-copy .size-advice,
.sm-buy-tile .size-advice,
.ask-opt-copy .size-advice { font-size: 12px; }


/* 2026-10-26 ingest fixes: the scan's "keep the pieces found?" panel, the
   closet's one-time "Who is your closet for?", a pile piece's "Is this
   piece yours?" and the sign-up's "Did you mean ...?". */
.cs-keep { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.cs-keep[hidden] { display: none; }
.cs-keep .cs-coach-title { margin: 0; }
.cs-keep .link-btn { align-self: center; }
.wardrobe-for-once { margin: 0 0 16px; padding: 16px; border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--line, rgba(62,43,35,.12)); }
.wardrobe-for-once-q { margin: 0 0 4px; font-weight: 600; }
.wardrobe-for-once .onboard-choices { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.wardrobe-for-once .onboard-choice { flex: 1 1 120px; }
.confirm-ask-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.confirm-ask-actions button { width: 100%; min-height: 36px; font-size: 13px; }
.garment-card.is-confirm-ask .look-meta { font-size: 12px; margin: 4px 0 0; }
.auth-email-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.auth-email-q { display: block; }