/* Look, by Amazon — Design System
   Inspired by Amazon Luxury / mShop Store Mode
   Mobile-first, minimal, editorial */

/* === FONTS — Amazon Ember, SELF-HOSTED (look-3171) ===
   Vendored into public/fonts/ and served same-origin. We deliberately do NOT
   reference Amazon's hashed m.media-amazon.com/images/{S,I}/… URLs: those rotate
   and the previous Look URLs 404'd / silently served the WRONG (serif/italic)
   faces, breaking the app's typography. Self-hosting removes that external
   dependency. All-sans system: regular (400) + bold (700), no italic face. */
@font-face {
  font-family: 'Amazon Ember';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/public/fonts/amazon-ember-400.woff2') format('woff2'),
       url('/public/fonts/amazon-ember-400.woff') format('woff');
}
@font-face {
  font-family: 'Amazon Ember';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/public/fonts/amazon-ember-700.woff2') format('woff2'),
       url('/public/fonts/amazon-ember-700.woff') format('woff');
}
:root {
  /* ─── Neutral ramp ─── */
  --black: #0f1111;
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f3f3f3;
  --gray-200: #e8e8e8;
  --gray-300: #d5d5d5;
  --gray-400: #999999;
  --gray-500: #6b6b6b;
  --gray-600: #4a4a4a;

  /* ─── Semantic neutrals (look-3171 design system) ─── */
  --text: #0f1111;            /* primary text */
  --text-secondary: #6b6b6b;  /* muted / secondary text */
  --divider: #ececec;         /* ONE hairline divider token */
  --surface: #ffffff;         /* page / card surface */
  --surface-muted: #f2f2f3;   /* product-tile / inset backdrop */

  /* ─── ONE accent, used BY ROLE only ───
     Accent (orange) = text links + secondary affordances.
     Primary CTAs + active nav are BLACK (var(--black)), NOT accent.
     Everything else stays near-monochrome; photography carries the color. */
  --accent: #c45500;
  --accent-press: #a84800;

  /* Legacy gold tokens are RETIRED by the all-sans/mono system. Kept resolvable
     (mapped to neutral) so any unmigrated reference degrades gracefully, not broken. */
  --gold-dark: var(--accent);
  --gold-light: var(--gray-300);
  --gold-gradient: var(--black);
  --gold-border: linear-gradient(var(--gray-300), var(--gray-300));

  /* ─── Type: ONE sans family (all-sans; serif retired look-3171) ─── */
  --font: 'Amazon Ember', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-light: var(--font);
  --font-serif: var(--font);   /* retired → sans */
  --font-display: var(--font); /* retired → sans */

  /* Type scale: Display / Title / Section / Body / Caption (size + line-height) */
  --fs-display: 28px; --lh-display: 1.2;
  --fs-title: 20px;   --lh-title: 1.25;
  --fs-section: 17px; --lh-section: 1.3;
  --fs-body: 15px;    --lh-body: 1.5;
  --fs-caption: 12px;
  --fw-bold: 700; --fw-semibold: 600; --fw-medium: 500; --fw-regular: 400;

  /* ─── Spacing (4 / 8pt scale) ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --side: 16px;               /* ONE canonical screen side-margin */

  /* ─── Radius scale ─── */
  --radius: 0;
  --r-sm: 8px;                /* chips, small tiles, inputs */
  --r-md: 12px;               /* cards, buttons */
  --r-lg: 18px;               /* feature/media cards */
  --r-pill: 999px;            /* pills, circular controls */

  --max-width: 480px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow-y: scroll;
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

/* === HEADER === */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
  padding: 6px var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-left { display: flex; align-items: center; gap: 10px; position: relative; top: -1.5px; }
.header-left a { display: flex; align-items: center; }
.header-left svg { display: block; }
.header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 1.5px)); display: flex; align-items: center; }
.header-back { background: none; border: 0; padding: 0 8px 0 0; margin: 0; display: flex; align-items: center; color: var(--black); cursor: pointer; }
header > .header-bell, header > span { min-width: 24px; display: flex; justify-content: flex-end; position: relative; top: -1.5px; }

header a { color: var(--black); text-decoration: none; }
header img { height: 24px; }

/* === BOTTOM NAV === */
nav[role="tablist"] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-around;
  padding: var(--space-md) 0;
  z-index: 100;
}
.standalone nav[role="tablist"] { padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom)); }

nav[role="tablist"] a {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--gray-400);
  text-decoration: none;
}

nav[role="tablist"] a[aria-selected="true"] { color: var(--black); font-weight: 600; }
nav[role="tablist"] a[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-md) - 1px);
  left: 22%;
  right: 22%;
  height: 3px;
  background: var(--black);
  border-radius: 0 0 3px 3px;
}

/* === MAIN CONTENT === */
main {
  padding: var(--space-md);
  padding-bottom: 80px; /* space for bottom nav */
}

/* === TYPOGRAPHY (all-sans; scale: Display/Title/Section/Body/Caption) === */
h1 { font-family: var(--font); font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: var(--lh-display); margin-bottom: var(--space-md); }
h2 { font-family: var(--font); font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: var(--lh-title); margin-bottom: var(--space-sm); }
h3 { font-family: var(--font); font-size: var(--fs-section); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: var(--lh-section); margin-bottom: var(--space-xs); }
p { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); margin-bottom: var(--space-md); color: var(--text-secondary); }

/* === SECTION HEADERS (like "New arrivals  Shop now") === */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--space-xl) 0 var(--space-md);
}

.section-header h2 { margin: 0; }
.section-header a { font-size: 13px; text-decoration: underline; color: var(--black); }

/* === HORIZONTAL SCROLL (product cards) === */
.scroll-row {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
}

.scroll-row::-webkit-scrollbar { display: none; }

/* === CARDS === */
.scroll-row .card {
  flex: 0 0 160px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--black);
}

.scroll-row .card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--gray-100);
  display: block;
}

.card-body {
  padding: var(--space-sm) 0;
}

.card-body .brand { font-weight: 700; font-size: 13px; }
.card-body .title { font-size: 12px; color: var(--gray-600); }
.card-body .price { font-size: 12px; margin-top: 2px; }

/* === HERO / FEATURE IMAGE === */
.hero {
  position: relative;
  margin: 0 calc(-1 * var(--space-md));
  aspect-ratio: 3/4;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: var(--white);
}

.hero-overlay h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: var(--white); margin-bottom: var(--space-sm); line-height: 1.15; }
.hero-overlay p { font-family: var(--font-light); color: rgba(255,255,255,0.85); margin-bottom: var(--space-md); }

/* === BUTTONS === */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1.5px solid var(--black);
  background: transparent;
  color: var(--black);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn:hover, .btn:active { background: var(--black); color: var(--white); }
.btn-filled { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-filled:hover { background: var(--gray-600); }
.btn-white { border-color: var(--white); color: var(--white); }
.btn-white:hover { background: var(--white); color: var(--black); }
.btn-gold { border-color: var(--black); color: var(--black); }
.btn-gold:hover { background: var(--black); color: var(--white); }

/* === GRID (2-col for browse) === */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}

/* === AVATAR === */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* === LIST ITEMS === */
.list-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--divider);
  text-decoration: none;
  color: var(--black);
}

.list-item img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }

/* === FORMS === */
input, textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gray-300);
  font-size: 16px;
  font-family: var(--font);
  margin-bottom: var(--space-md);
  appearance: none;
  border-radius: 10px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
}

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: var(--space-xs);
}

/* === TABS === */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-lg);
}

.tabs a {
  flex: 1;
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  font-size: 13px;
  text-decoration: none;
  color: var(--gray-400);
  border-bottom: 2px solid transparent;
}

.tabs a[aria-selected="true"] {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* === DIVIDER === */
div[role="separator"] {
  height: 1px;
  background: var(--divider);
  margin: var(--space-lg) 0;
}

/* === BADGE === */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: var(--gray-100);
  color: var(--gray-600);
}

/* === FOOTER === */
footer {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  font-size: 11px;
  color: var(--gray-400);
  border-top: 1px solid var(--divider);
}

footer a { color: var(--gray-500); text-decoration: none; }
footer p { font-size: 11px; line-height: 1.5; color: var(--gray-400); margin: 0 0 2px; }

/* === UTILITIES === */
.text-center { text-align: center; }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-muted { color: var(--gray-500); }
.text-gold { color: var(--gold-dark); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }
.gap-sm { gap: var(--space-sm); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* === PREMIUM ACCENTS (Bond) === */
.gold-divider { height: 1px; background: var(--divider); }
.gold-border { border: 1px solid; border-image: var(--gold-border) 1; }
.section-premium { font-family: var(--font-serif); letter-spacing: 0.5px; }

/* === DARK SECTION (editorial hero) === */
.dark-section {
  background: var(--black);
  color: var(--white);
  padding: var(--space-xl) var(--space-md);
}
.dark-section h1, .dark-section h2 { color: var(--white); }
.dark-section p { color: rgba(255,255,255,0.7); }
.dark-section a { color: var(--gold-light); }

/* === FEED === */
main:has(.feed) { padding-top: var(--space-xs); padding-left: 0; padding-right: 0; background: var(--surface-muted); }
.feed { padding: 8px 8px 100px; display: flex; flex-direction: column; gap: 16px; }

.card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  overflow: hidden;
  position: relative;
}

.card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.card-header img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.card-username { font-weight: 700; color: #0f1111; text-decoration: none; }
.card-meta { color: #565959; }

.card-image { display: block; }
.card-image > img:first-child { width: 100%; display: block; }
/* Item-thumbnail collage for image-less "quick log" outfits (no hero photo). */
.outfit-collage { display: grid; gap: 2px; aspect-ratio: 1/1; width: 100%; background: var(--surface, #1a1a1a); }
.outfit-collage[data-count="1"] { grid-template-columns: 1fr; }
.outfit-collage[data-count="0"], .outfit-collage[data-count="2"] { grid-template-columns: 1fr 1fr; }
.outfit-collage[data-count="3"], .outfit-collage[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.outfit-collage-cell { overflow: hidden; }
.outfit-collage-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outfit-collage[data-count="3"] .outfit-collage-cell:first-child { grid-column: span 2; }
.outfit-collage-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: var(--muted, #888); font-size: 14px; }
.outfit-addimage-btn { position: absolute; bottom: var(--space-md); right: var(--space-md); display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.6); color: #fff; padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; cursor: pointer; }
.card-items { display: flex; gap: 7px; overflow-x: auto; padding: 0 14px 14px; margin-top: -66px; position: relative; z-index: 2; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.card-items::-webkit-scrollbar { display: none; }
.card-items[hidden] { display: none; }
.card-item-thumb { flex-shrink: 0; }
.card-item-thumb img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; background: #f2f0ee; box-shadow: 0 2px 7px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.85); }
/* Phantom-tag guard (look-3179): the "Inspired by this look" zone holds tags vision is confident are
   NOT worn in the photo, set apart from the in-photo strip. The inner row reuses .card-items but
   resets the negative margin that overlaps the hero (this row sits in normal flow, below it). */
.card-items-inspired { padding: 4px 14px 12px; }
.card-items-inspired-label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #999; margin-bottom: 7px; }
.card-items-inspired-row { margin-top: 0; padding: 0; }
.card-items-inspired-row .card-item-thumb img { box-shadow: 0 1px 4px rgba(0,0,0,.14); opacity: .92; }
.card-desc.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.see-more { display: none; font-size: .85rem; color: #888; text-decoration: none; }

.card-body { padding: 10px 12px 14px; font-size: 14px; line-height: 1.4; }
.card-body strong { display: block; margin-bottom: 4px; }
.card-body p { margin: 0; color: #333; }
.card-date { display: block; font-size: 12px; color: var(--gray-500); margin-top: 6px; }

/* Trigger A — event-recap credit ("✨ winning look … styled by @them") on the AI host's recap post. */
.card-recap-credit { font-size: 13px; color: var(--text-secondary); padding: 8px 14px 12px; line-height: 1.4; }
.card-recap-credit a { color: var(--accent); font-weight: 600; text-decoration: none; }
/* Event back-link banner on the outfit page (links to the styling event this look was posted for). */
.outfit-event-link { display: flex; align-items: center; gap: 11px; margin: 14px 0 0; padding: 11px 13px; background: var(--surface-muted); border-radius: var(--r-md); text-decoration: none; color: var(--text); }
.outfit-event-link-icon { flex: 0 0 auto; font-size: 21px; line-height: 1; }
.outfit-event-link-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.outfit-event-link-kicker { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfit-event-link-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outfit-event-link-chevron { flex: 0 0 auto; color: var(--gray-400); }

/* ═══════════ Editorial outfit card (home feed '/') ═══════════
   Scoped to .card[data-outfit-id] — the OUTFIT card only. Other feed card types
   (event / just-ended / need-help / new-users / trending / wardrobe-digest) share
   .card/.card-header but never match this attribute selector, so they are untouched.
   Composition mirrors the "The Edit" mocks: attribution overlaid on a portrait hero
   over a top scrim; a white circular save/share chip cluster top-right. */

/* Portrait hero for a full-bleed editorial feel (512² heroes crop gracefully under cover). */
.card[data-outfit-id] .card-image-wrap { aspect-ratio: 4 / 5; }

/* Attribution moves OFF the white strip and ON TO the photo, over a fading top scrim. */
.card[data-outfit-id] .card-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 14px 14px 40px; gap: 9px;
  background: linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.34) 32%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 100%);
  pointer-events: none;            /* taps fall through the scrim to the hero… */
}
.card[data-outfit-id] .card-header a,
.card[data-outfit-id] .card-header button { pointer-events: auto; }   /* …except real controls */

/* Stack the name over a lighter subtitle (mock: "By X" / "posted an outfit"). */
.card[data-outfit-id] .card-header > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.card[data-outfit-id] .card-header img {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.card[data-outfit-id] .card-username {
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.card[data-outfit-id] .card-meta {
  color: rgba(255,255,255,.86); font-size: 12px; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* White circular save + share chips, clustered photo top-right (flat — no blur). */
.card[data-outfit-id] .card-fav,
.card[data-outfit-id] .card-share {
  position: absolute; z-index: 4;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  color: #0f1111; line-height: 1;
}
.card[data-outfit-id] .card-fav { top: 13px; right: 14px; font-size: 18px; }
.card[data-outfit-id] .card-share { top: 13px; right: 56px; font-size: 15px; }
.card[data-outfit-id] .card-fav.active { color: #e44; }

/* Generous vertical rhythm under the hero: bold title, muted caption (sentence case). */
.card[data-outfit-id] .card-body { padding: 13px 14px 16px; }
.card[data-outfit-id] .card-body strong { font-size: var(--fs-section); font-weight: 700; color: var(--text); margin-bottom: 5px; line-height: var(--lh-section); }
.card[data-outfit-id] .card-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.45; }

/* Event card */
.card-event-tall { min-height: 380px; display: flex; flex-direction: column; }
.card-event-body {
  display: block; padding: 13px 14px;
  text-decoration: none; color: inherit;
  background: var(--surface-muted);
  margin: 0 12px 10px; border-radius: var(--r-md);
}
.card-event-title { font-size: var(--fs-section); font-weight: 700; line-height: 1.3; display: block; }
.card-event-body p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-event-time { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-top: 6px; display: inline-block; }
.event-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 0 12px; flex: 1; -webkit-overflow-scrolling: touch; }
.event-carousel .event-slide:first-child { border-left: 12px solid transparent; }
.event-carousel::-webkit-scrollbar { display: none; }
.event-slide { scroll-snap-align: start; flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.event-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 160px; height: 160px; border-radius: var(--r-md); overflow: hidden; }
.event-collage img { width: 100%; height: 100%; object-fit: cover; }
/* When a submission has a real AI collage hero, show it as one full-bleed image (override the 2x2 flat-lay grid). */
.event-collage-hero { display: block; }
.event-vote-btn { border: none; background: var(--surface-muted); color: var(--text); border-radius: var(--r-pill); padding: 5px 13px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.event-vote-btn svg { display: block; }
.event-vote-btn.voted { background: var(--black); color: #fff; }
.event-sub-user { font-size: 11px; color: var(--text-secondary); }
.event-slide-footer { display: flex; align-items: center; gap: 6px; }
.event-slide-add { text-decoration: none; }
.event-add-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; font-style: normal; color: var(--text-secondary); background: var(--surface-muted); }
.event-add-btn span { font-style: normal; line-height: 1; }

/* "Just ended" shoppable-moment card (a finished event: final look + shop + follow). */
.card-just-ended { display: flex; flex-direction: column; }
.card-just-ended-body { display: block; text-decoration: none; color: inherit; padding: 4px 14px 8px; }
.just-ended-badge { display: inline-block; background: var(--surface-muted); color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: 6px; }
.just-ended-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: calc(100% - 28px); max-width: 220px; margin: 0 14px; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; }
.just-ended-collage img { width: 100%; height: 100%; object-fit: cover; }
.just-ended-footer { display: flex; gap: 8px; margin: 12px 14px 16px; flex-wrap: wrap; }
.just-ended-shop, .just-ended-follow { text-decoration: none; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; }
.just-ended-footer a svg { display: block; }
.just-ended-shop { background: var(--text); color: #fff; }
.just-ended-follow { background: var(--surface-muted); color: var(--text); }
.event-add-btn small { font-size: 11px; color: var(--text-secondary); font-style: normal; margin-top: 4px; }

/* Wardrobe-add digest card ("added N new pieces") */
.card-wardrobe-digest { display: flex; flex-direction: column; }
.wardrobe-digest-body { display: block; text-decoration: none; color: inherit; padding: 2px 12px 8px; }
.wardrobe-digest-headline { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.wardrobe-digest-items { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px 12px; -webkit-overflow-scrolling: touch; }
.wardrobe-digest-items::-webkit-scrollbar { display: none; }
.wardrobe-digest-items img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--r-md); object-fit: cover; background: #f2f0ee; }


/* New users carousel */
.new-users-title { font-size: var(--fs-section); font-weight: 700; padding: 12px 16px 4px; }
.new-users-carousel { display: flex; overflow-x: auto; gap: 12px; padding: 8px 16px 12px; -webkit-overflow-scrolling: touch; }
.new-users-carousel::-webkit-scrollbar { display: none; }
.new-user-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; flex: 0 0 auto; }
.new-user-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.new-user-chip span { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

/* Need help card */
.need-help-title { font-size: var(--fs-section); font-weight: 700; padding: 12px 16px 8px; }
.need-help-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-decoration: none; color: inherit; }
.need-help-row + .need-help-row { border-top: 1px solid var(--divider); }
.need-help-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.need-help-text { flex: 1; overflow: hidden; }
.need-help-text strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need-help-text span { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need-help-btn { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-muted); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.need-help-btn svg { display: block; }
.card-action {
  display: block; text-align: center; padding: 10px;
  font-weight: 700; font-size: 14px; color: var(--accent);
  text-decoration: none; border-top: 1px solid var(--divider);
}

/* User card */
.card-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; text-decoration: none; color: inherit;
}
.card-user-avatar { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.card-user-info { min-width: 0; }
.card-user-info strong { display: block; font-size: 15px; color: #0f1111; }
.card-user-info .card-username { font-size: 13px; font-weight: 400; color: #565959; }
.card-user-info p { margin: 4px 0 0; font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Loading indicator */
.feed-loading { text-align: center; padding: 20px; color: var(--text-secondary); font-size: 14px; }

/* Favorite button */
.card-fav {
  margin-left: auto; background: none; border: none;
  font-size: 22px; color: #aaa; cursor: pointer; padding: 0 4px;
  line-height: 1; transition: color .15s;
}
.card-fav.active { color: #e44; }
.card .card-fav { position: absolute; top: 18px; right: 12px; }
.card-share { background: none; border: none; font-size: 19px; color: #aaa; cursor: pointer; padding: 0 4px; line-height: 1; }
.card .card-share { position: absolute; top: 19px; right: 42px; }

/* Post page */
.post-page { padding: 24px 16px; }
.post-page h1 { font-size: 20px; margin: 0 0 16px; }
.post-types { display: flex; flex-direction: column; gap: 12px; }
.post-type-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: #f8f8f8; text-decoration: none; color: inherit; }
.post-type-card strong { display: block; font-size: 15px; }
.post-type-card span { font-size: 13px; color: #666; }

/* ═══════════ EVENT DETAIL PAGE ═══════════ */
.event-page { padding-bottom: 100px; }

/* Hero */
.event-hero-top { position: sticky; top: 34px; z-index: 11; background: #fff; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); } /* top ≈ sticky header height (~35px, −1px to tuck under it — header z-index 100 > 11) so it pins FLUSH; was 44px → ~9px gap that let content bleed through (matches .wardrobe-filters fix). */
.event-hero-avatar { flex: 0 0 auto; position: relative; display: inline-flex; }
.event-hero-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.event-hero-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; margin: 0; }
.event-hero-body { padding: 10px 0 14px; }
.event-hero-desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); margin: 0 0 6px; }
.event-hero-meta { display: flex; gap: 10px; font-size: var(--fs-caption); color: var(--text-secondary); }
/* Winning-look showcase card on the event page (links to the posted recap outfit). */
.event-winner { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; padding: 10px; background: #fff; border: 1px solid var(--divider); border-radius: var(--r-lg); box-shadow: 0 1px 3px rgba(0,0,0,.10); text-decoration: none; color: var(--text); }
.event-winner-media { flex: 0 0 auto; width: 66px; height: 66px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-muted); display: flex; align-items: center; justify-content: center; }
.event-winner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-winner-media-fallback { font-size: 28px; }
.event-winner-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.event-winner-kicker { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.event-winner-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-winner-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-winner-chevron { flex: 0 0 auto; color: var(--gray-400); }
.event-hero-timer { color: var(--text-secondary); font-weight: 600; }
.event-hero-ended { color: var(--text-secondary); font-weight: 600; }

/* Tabs */
.event-tabs { display: flex; border-bottom: 1px solid var(--divider); position: sticky; top: 94px; background: #fff; z-index: 10; } /* 34 (hero-top sticky top) + 61 (hero-top height: 40 avatar + 20 padding + 1 border) − 1 to tuck under hero-top (z 11 > 10); was 105px, derived from the old 44px header offset → would gap after the hero-top fix. */
.event-tabs a { flex: 1; text-align: center; padding: 12px 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; }
.event-tabs a.active { color: var(--text); border-bottom-color: var(--text); }

/* ═══ Unified empty state (mock #7): centered outline line-icon · bold title · muted 2-line sub ═══
   ONE pattern for every page-level empty view (favorites, closet, events,
   notifications, dress-me, event vote). The legacy per-screen wrappers share the
   container styling here so every empty view is centered + generously padded.
   Search uses the one-line .search-empty prompt; comment/sub-section empties use
   the compact .empty-note. */
.empty-state,
.event-empty,
.events-empty,
.notif-empty,
.dressme-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
}
.empty-state-icon { color: var(--gray-300); margin: 0 0 20px; line-height: 0; }
.empty-state-icon svg { display: block; width: 52px; height: 52px; }
.empty-state-title {
  font-size: var(--fs-title); line-height: var(--lh-title);
  font-weight: 700; color: var(--text); margin: 0 0 8px;
}
.empty-state-sub,
.empty-hint {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-secondary); margin: 0 0 24px; max-width: 32ch;
}
.empty-state .btn-primary,
.event-empty .btn-primary,
.events-empty .btn-primary,
.dressme-empty .btn-primary { align-self: center; }
/* Legacy bare-<p> / emoji empties still in use (cleanout, gaps, newevent): keep
   them muted + monochrome until they're upgraded to the icon+title+sub structure. */
.event-empty > p:not([class]) { font-size: var(--fs-body); color: var(--text-secondary); margin: 0 0 16px; }
.event-empty-icon { font-size: 38px; margin: 0 0 10px; filter: grayscale(1); opacity: 0.7; }
/* Search prompt / no-results — anchored centered hero (icon + title + sub), consistent
   with the unified empty-state pattern so it never floats as an orphaned single line. */
.search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 72px 32px 56px; }
.search-empty .empty-state-sub { margin-bottom: 0; }
/* Inline / sub-section empty (comment threads) — compact muted note, NOT the hero. */
.empty-note,
.me-empty { text-align: center; color: var(--text-secondary); font-size: var(--fs-body); padding: 24px 16px; margin: 0; }
.empty-note a,
.me-empty a { color: var(--accent); }
.empty-note p { margin: 0; }
.btn-primary { display: inline-block; background: var(--black); color: #fff; border: none; border-radius: var(--r-pill); padding: 10px 24px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
/* Canonical SECONDARY (outline) tier — one source of truth for the outline button.
   Matches the values the contextual .login-cta/.edit-actions/.additem-actions-row rules already set,
   so it formalizes the tier without changing any current rendering. Primary = filled black; this = outline. */
.btn-secondary { display: inline-block; background: none; border: 1px solid var(--gray-300); color: var(--text); border-radius: var(--r-pill); padding: 10px 24px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.btn-secondary:hover { border-color: var(--text); }

/* Vote section */
.toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); max-width: 88%; background: rgba(15,17,17,0.92); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 13px; line-height: 1.3; text-align: center; z-index: 200; box-shadow: 0 2px 12px rgba(0,0,0,0.25); animation: toast-in .2s ease; }
.toast-hide { opacity: 0; transition: opacity .4s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.event-submissions { padding: 8px 0; }
.submission-card { padding: 16px; border-bottom: 1px solid var(--divider); }
.submission-leader { background: transparent; }
.submission-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.submission-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.submission-user { font-size: 13px; font-weight: 600; flex: 1; }
.submission-badge { display: inline-flex; align-items: center; color: var(--text); }
.submission-badge svg { display: block; }
.submission-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.submission-grid::-webkit-scrollbar { display: none; }
.submission-item img { width: 80px; height: 80px; border-radius: var(--r-sm); object-fit: cover; }
.submission-comment { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; }
.submission-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vote-form { display: inline; }
.vote-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1.5px solid var(--gray-300); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.vote-btn:active { background: var(--black); color: #fff; border-color: var(--black); }
.vote-btn svg { display: block; }
/* Vote tally: line-icon caret/check (DS: line icons only — replaces the legacy ▲/✓ glyphs). */
.vote-count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.vote-count svg { display: block; }
.vote-count.voted { color: var(--text); font-weight: 600; }   /* voted = an active state → BLACK (DS), not accent */
.vote-count.vote-own { color: var(--gray-400); cursor: default; }

/* Build section */
.event-build-ended { text-align: center; padding: 16px; color: #888; font-size: 14px; }
.build-preview { padding: 16px; background: #fafafa; border-bottom: 1px solid #eee; }
.build-preview-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.build-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; margin-bottom: 10px; }
.build-empty { padding: 24px; text-align: center; border: 2px dashed #ddd; border-radius: 12px; }
.build-empty p { color: #999; margin: 0; font-size: 14px; }
.build-items { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 10px; -webkit-overflow-scrolling: touch; }
.build-items::-webkit-scrollbar { display: none; }
.build-item { position: relative; flex: 0 0 auto; }
.build-item img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.build-item-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #333; color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer; }
.build-submit-form { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.build-submit-form .btn-primary { white-space: nowrap; padding: 0 16px; font-size: 13px; height: 38px; line-height: 38px; box-sizing: border-box; }
.build-comment-input { flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 0 14px; font-size: 14px; outline: none; height: 38px; box-sizing: border-box; }
.build-wardrobe { padding: 12px 16px; }
.build-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.build-cats::-webkit-scrollbar { display: none; }
.build-cat { padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface-muted); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--text-secondary); white-space: nowrap; }
.build-cat.active { background: var(--black); color: #fff; }
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.build-grid-empty { grid-column: 1/-1; text-align: center; color: #999; padding: 24px; }
.build-grid-item button { border: none; background: none; padding: 0; cursor: pointer; width: 100%; }
.build-grid-item img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.build-grid-item-ext button { position: relative; }
.build-ext-label { position: absolute; bottom: 4px; left: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; border-radius: 4px; padding: 2px 4px; text-align: center; }
.build-item-external { border: 2px solid var(--accent); border-radius: 10px; }
.build-ext-badge { position: absolute; bottom: 2px; left: 2px; font-size: 12px; }
.build-suggest-hint { font-size: 12px; color: #888; margin: 0 0 10px; }
.build-suggest-section { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #ddd; }
.build-grid-item-shop button { position: relative; opacity: 0.7; }
.build-shop-label { position: absolute; bottom: 4px; left: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; border-radius: 4px; padding: 2px 4px; text-align: center; }

/* ── Outfit collage (shared build-collage partial: builder previews + event voting) ── */
/* A white-background flat-lay: products are laid out (object-fit: contain, never cropped) on a clean
   card, with the first piece featured larger for visual interest. */
.build-collage { display: grid; gap: 6px; background: #fff; border: 1px solid var(--divider); border-radius: 14px; padding: 8px; aspect-ratio: 1 / 1; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.build-collage[data-count="1"] { grid-template-columns: 1fr; }
/* AI-generated collage hero for a submission (square, matches the flat-lay card framing). */
.submission-hero { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--divider); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.build-collage[data-count="5"], .build-collage[data-count="6"], .build-collage[data-count="7"], .build-collage[data-count="8"] { grid-template-columns: repeat(3, 1fr); }
/* Featured hero (first piece) — only for counts that tile cleanly into the square. */
.build-collage[data-count="3"] .build-collage-cell:first-child { grid-row: span 2; }
.build-collage[data-count="6"] .build-collage-cell:first-child { grid-column: span 2; grid-row: span 2; }
.build-collage-cell { position: relative; background: #fff; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.build-collage-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.build-collage-cell-empty { font-size: 28px; opacity: 0.25; }
.build-collage-cell-ext { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 8px; }
.build-collage-badge { position: absolute; top: 4px; left: 4px; font-size: 13px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.build-collage-remove-form { position: absolute; top: 4px; right: 4px; margin: 0; }
.build-collage-remove { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }

/* "Magically enhancing" opportunistic builder collage: indicator + swapped-in AI hero. */
#build-collage-wrap { position: relative; }
.build-collage-hero { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--divider); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.collage-enhancing { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
/* The HTML `hidden` attribute must win over the author display:flex above (same [hidden]-vs-author
   footgun as .card-items[hidden]) — else the indicator lingers after the collage swaps in. */
.collage-enhancing[hidden] { display: none; }
.collage-enhancing-spinner { width: 13px; height: 13px; border: 2px solid var(--gray-200); border-top-color: var(--text); border-radius: 50%; animation: collage-spin 0.8s linear infinite; }
@keyframes collage-spin { to { transform: rotate(360deg); } }

/* ── Built-outfit carousel (shared component: event submissions + notifications) ──
   A horizontally-swipeable scroll-snap carousel of up-to-3 square cards (collage · VTO · shop). */
.boc { position: relative; }
.boc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.boc-track::-webkit-scrollbar { display: none; }
.boc-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
/* Collage / VTO hero — square, matches the flat-lay card framing. */
.boc-hero { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--divider); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
/* Shoppable grid card — the pieces as product thumbnails on a clean white card (home outfit-card aesthetic). */
.boc-shop { aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--divider); border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; gap: 8px; align-content: start; overflow-y: auto; box-sizing: border-box; }
.boc-shop-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-muted); display: flex; align-items: center; justify-content: center; }
.boc-shop-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.boc-shop-empty { font-size: 24px; opacity: 0.25; }
.boc-shop-tag { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 9px; font-weight: 600; text-align: center; padding: 1px 0; letter-spacing: .03em; }
/* Dot indicators (decoration — the carousel swipes without JS; built-outfit-carousel.js syncs the active dot). */
.boc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.boc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); cursor: pointer; transition: background .15s, transform .15s; }
.boc-dot.active { background: var(--black); transform: scale(1.25); }

/* Discuss section */
.discuss-thread { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.discuss-msg { display: flex; gap: 8px; align-items: flex-start; }
.discuss-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.discuss-bubble { background: var(--surface-muted); border-radius: var(--r-md); padding: 8px 12px; max-width: 80%; }
.discuss-user { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.discuss-bubble p { margin: 2px 0 0; font-size: 14px; }
.discuss-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--divider); position: sticky; bottom: 60px; background: #fff; }
.discuss-field { flex: 1; border: 1px solid var(--gray-300); border-radius: var(--r-pill); padding: 8px 14px; font-size: 14px; outline: none; }
.discuss-send { width: 36px; height: 36px; border-radius: 50%; background: var(--black); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.discuss-send svg { display: block; }

/* ═══════════ OUTFIT DETAIL PAGE ═══════════ */
.outfit-page { padding: 0 0 100px; }
.outfit-image-wrap { position: relative; width: 100%; background: var(--surface); }
.outfit-hero-img { width: 100%; display: block; max-height: 56vh; object-fit: cover; object-position: center top; }

/* Action + pager bar under the hero (mock #5: minimal dot pager · line-icon heart/share) */
.outfit-actionbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 12px var(--side) 2px; }
.outfit-pager { display: inline-flex; align-items: center; gap: 4px; }
.outfit-pager-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--text-secondary); text-decoration: none; border-radius: var(--r-pill); }
.outfit-pager-arrow svg { display: block; }
.outfit-pager-arrow:active { color: var(--text); background: var(--surface-muted); }
.outfit-pager-dots { display: inline-flex; align-items: center; gap: 7px; margin: 0 16px; }
.outfit-pager-dots i { width: 12px; height: 2px; border-radius: 2px; background: var(--gray-300); display: block; transition: width .15s ease; }
.outfit-pager-dots i.active { width: 18px; height: 2px; background: var(--text); }
.outfit-iconrow { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }
.outfit-fav-btn { border: none; background: none; cursor: pointer; padding: 6px; font-size: 24px; line-height: 1; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.outfit-fav-btn.active { color: var(--text); }
.outfit-share-btn { border: none; background: none; cursor: pointer; padding: 6px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.outfit-edit-btn { font-size: var(--fs-caption); color: var(--accent); text-decoration: none; font-weight: var(--fw-semibold); padding: 6px 4px; }

.outfit-author { display: flex; align-items: center; gap: 10px; padding: 4px var(--side) 8px; }
.outfit-author-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.outfit-author-info { flex: 1; min-width: 0; }
.outfit-author-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); text-decoration: none; color: var(--text); display: block; line-height: 1.25; }
.outfit-author-date { font-size: var(--fs-caption); color: var(--text-secondary); }

.outfit-body { padding: 0 var(--side) 16px; }
.outfit-title { font-size: 23px; font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; }
.outfit-desc { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; line-height: var(--lh-body); }
/* Private (owner-only) outfit indicator + post toggle */
.outfit-private-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--surface-muted); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }
.outfit-private-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #444; padding: 4px 2px; cursor: pointer; }
.outfit-private-toggle input { width: 18px; height: 18px; }

/* Shop this look — neutral-tile product carousel (mock #4) */
.outfit-items-section { padding: 16px var(--side); border-top: 1px solid var(--divider); }
.outfit-items-title { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); margin: 0 0 14px; }
.outfit-items-grid { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scroll-snap-type: x proximity; }
.outfit-items-grid::-webkit-scrollbar { display: none; }
.outfit-item-card { flex: 0 0 150px; text-decoration: none; color: inherit; scroll-snap-align: start; }
.outfit-item-tile { display: flex; align-items: center; justify-content: center; width: 150px; height: 190px; background: #f2f0ee; border-radius: var(--r-md); overflow: hidden; }
.outfit-item-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outfit-item-brand { display: block; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text); line-height: 1.25; margin-top: 10px; }
.outfit-item-name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--text-secondary); line-height: 1.3; margin-top: 8px; max-width: 150px; }
/* When a brand eyebrow is present, it leads and the name tightens beneath it. */
.outfit-item-brand + .outfit-item-name { margin-top: 1px; }
/* Phantom-tag guard (look-3179): the "Inspired by this look" section on the outfit page — tagged
   products vision is confident are not visibly worn. A short note keeps the label honest (we detect
   "not present", not the relationship, so we don't claim one). */
.outfit-items-inspired-note { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.4; margin: -6px 0 14px; }

.outfit-comments-section { padding: 16px var(--side); border-top: 1px solid var(--divider); }
.outfit-comments-title { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); margin: 0 0 14px; }
.outfit-no-comments { font-size: var(--fs-body); color: var(--text-secondary); }
.outfit-comments-list { display: flex; flex-direction: column; gap: 10px; }
.outfit-comment { display: flex; gap: 8px; align-items: flex-start; }
.outfit-comment-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.outfit-comment-bubble { background: var(--surface-muted); border-radius: var(--r-md); padding: 8px 12px; max-width: 80%; }
.outfit-comment-user { font-size: var(--fs-caption); font-weight: 700; color: var(--text); }
.outfit-comment-bubble p { margin: 2px 0 0; font-size: 14px; }
.outfit-comment-form { display: flex; gap: 8px; margin-top: 12px; }
.outfit-comment-input { flex: 1; border: 1px solid var(--divider); border-radius: 20px; padding: 8px 14px; font-size: 14px; outline: none; }
.outfit-comment-send { width: 36px; height: 36px; border-radius: 50%; background: var(--black); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.outfit-comment-send svg { display: block; }

/* ═══════════ ME PAGE ═══════════ */
.me-page { padding-bottom: 100px; }
.me-profile { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 12px; }
.me-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.me-avatar-wrap { position: relative; cursor: pointer; }
.me-avatar-edit { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.me-name { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 2px; }
.me-points { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.me-points::before { content: "·"; margin: 0 6px; font-weight: 400; color: var(--text-secondary); }
.me-edit { font-size: 12px; color: var(--text-secondary); text-decoration: none; margin-top: 4px; }

.me-actions { display: flex; gap: 8px; padding: 0 16px 16px; justify-content: center; }
.me-action-btn { padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface-muted); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text); }

.me-section { padding: 16px var(--side); border-top: 1px solid var(--divider); }
.me-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.me-section-header h2 { font-size: var(--fs-section); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.me-section-header a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }

.me-outfit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.me-outfit-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 28%; border-radius: var(--r-md); }

.me-events-list { display: flex; flex-direction: column; gap: 8px; }
.me-event-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--surface-muted); border-radius: var(--r-md); text-decoration: none; color: inherit; }

/* === My Events page === */
.events-page { padding-bottom: 100px; }
.events-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.events-h1 { font-size: 24px; margin: 0; }
.events-new-btn { flex: 0 0 auto; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-pill); background: var(--black); color: #fff; text-decoration: none; white-space: nowrap; }
.events-section { margin-top: 20px; }
.events-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500); margin: 0 0 10px; }
.events-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 700; text-align: center; }
.ev-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ev-card-ended { background: var(--gray-50); }
.ev-card-top { display: flex; align-items: flex-start; gap: 8px; }
.ev-card-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--black); text-decoration: none; line-height: 1.3; }
.ev-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 11px; white-space: nowrap; }
.ev-badge-active { background: #fde9d9; color: var(--accent); }
.ev-badge-ended { background: var(--gray-200); color: var(--gray-600); }
.ev-card-meta { font-size: 13px; color: var(--gray-500); margin: 6px 0 0; }
.ev-card-meta-empty { color: var(--gray-400); }
.ev-leading { margin-top: 10px; }
.ev-leading-label { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.ev-winner-label { color: var(--gold-dark); }
.ev-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-thumbs img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--gray-100); border: 1px solid var(--gray-200); display: block; }
.ev-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ev-action { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 16px; text-decoration: none; border: 1px solid var(--gray-300); color: var(--black); }
.ev-action-primary { background: var(--black); color: #fff; border-color: var(--black); }
.ev-delete-form { margin-left: auto; }
.ev-postlook-form { display: contents; }
.ev-delete { background: var(--gray-100); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 14px; color: var(--gray-500); cursor: pointer; line-height: 1; flex: 0 0 auto; }
.me-event-title { font-size: 14px; font-weight: 500; }
.me-event-time { font-size: 12px; color: var(--text-secondary); font-weight: 600; }


.me-inbox { display: flex; flex-direction: column; gap: 6px; }
.me-inbox-item { font-size: 13px; color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid var(--divider); }

/* ═══════════ ITEM DETAIL PAGE ═══════════ */
.item-page { padding-bottom: 100px; }
/* Hero floats the product on clean white (the luxury PDP ground — mock #4/#5), so a contained
   white-background product photo reads edge-to-edge with no gray gutter two-tone. */
.item-image-wrap { width: 100%; background: var(--surface); display: flex; justify-content: center; align-items: center; padding: 12px 0; box-sizing: border-box; }
.item-hero-img { width: 100%; max-height: 440px; object-fit: contain; }
.item-hero-ph { width: 100%; min-height: 240px; max-height: 400px; background: #f2f0ee; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; box-sizing: border-box; }
.item-hero-ph-icon { color: var(--text-secondary); opacity: 0.45; line-height: 0; }
.item-hero-ph-label { font-size: 14px; color: var(--text-secondary); text-transform: capitalize; }

.item-owner { display: flex; align-items: center; gap: 10px; padding: 12px var(--side); }
.item-owner-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.item-owner-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.item-wish-btn { border: none; background: none; cursor: pointer; padding: 0; line-height: 0; color: var(--text-secondary); display: inline-flex; flex: 0 0 auto; }
.item-wish-btn svg { display: block; }
/* Shop link → on-system neutral circle + line-icon (the same bag glyph as the closet "Shop your gaps").
   Linked-to-a-real-ASIN state tints the icon with the accent (accent used BY ROLE: a shop link). */
.item-shop-btn { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-muted); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.item-shop-btn svg { display: block; }
.item-shop-linked { color: var(--accent); }
.item-wish-active { color: var(--text); }
.item-edit-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600; }

.item-body { padding: 0 var(--side) 12px; }
.item-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--text); margin: 0 0 4px; }
.item-brand { font-size: 14px; color: var(--text-secondary); }
.item-details { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.item-tag { padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-muted); font-size: var(--fs-caption); color: var(--text-secondary); }
.item-desc { font-size: var(--fs-body); color: var(--text); margin: 12px 0 0; line-height: var(--lh-body); }

.item-outfits-section { padding: 14px var(--side); border-top: 1px solid var(--divider); }
.item-outfits-section h3 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--text); margin: 0 0 10px; }
.item-outfits-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.item-outfits-row::-webkit-scrollbar { display: none; }
.item-outfit-thumb img { width: 104px; aspect-ratio: 3/4; height: auto; border-radius: var(--r-sm); object-fit: cover; display: block; background: #f2f0ee; }

.item-comments-section { padding: 14px var(--side); border-top: 1px solid var(--divider); }
.item-comments-section h3 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--text); margin: 0 0 12px; }

/* ═══════════ WARDROBE PAGE ═══════════ */
.wardrobe-page { padding-bottom: 100px; }

.closet-starter { margin: 16px; padding: 24px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--divider); text-align: center; }
.closet-starter-title { font-family: var(--font-serif); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; margin: 0 0 6px; color: var(--black); }
.closet-starter-sub { font-size: 14px; color: var(--gray-600); margin: 0 0 14px; }
.closet-starter-sub strong { color: var(--text); }
.closet-starter-feats { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 320px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.closet-starter-feats li { font-size: 13px; color: var(--gray-600); line-height: 1.35; display: flex; gap: 8px; align-items: flex-start; }
.closet-starter-feat-text { flex: 1; }
.closet-starter-feats li strong { color: var(--black); }
.closet-starter-ico { flex: 0 0 auto; }
.closet-starter-cta { display: inline-block; padding: 11px 26px; border-radius: var(--r-pill); background: var(--black); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.wardrobe-sync-row { display: flex; gap: 8px; overflow-x: auto; }
.wardrobe-sync-row::-webkit-scrollbar { display: none; }
.wardrobe-sync-btn { padding: 8px 12px; border-radius: 16px; background: #fff; border: 1px solid #ddd; font-size: 12px; text-decoration: none; color: #333; white-space: nowrap; }

/* Wardrobe cleanout / replace */
.cleanout-page { padding: 16px; max-width: 720px; margin: 0 auto 80px; }
.cleanout-title { font-size: 22px; margin: 4px 0 2px; }
.cleanout-sub { font-size: 14px; color: #666; margin: 0 0 16px; }
.cleanout-list { display: flex; flex-direction: column; gap: 12px; }
.cleanout-card { display: flex; gap: 12px; background: #fff; border: 1px solid #eee; border-left-width: 4px; border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.cleanout-card.cleanout-cleanout { border-left-color: #f59e0b; }
.cleanout-card.cleanout-replace { border-left-color: #3b82f6; }
.cleanout-card.cleanout-keep { border-left-color: #10b981; }
.cleanout-itemimg { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #f3f3f3; display: flex; align-items: center; justify-content: center; }
.cleanout-itemimg img { width: 100%; height: 100%; object-fit: cover; }
.cleanout-thumb-empty { font-size: 10px; color: #999; padding: 4px; text-align: center; }
.cleanout-body { flex: 1; min-width: 0; }
.cleanout-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cleanout-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.cleanout-badge-cleanout { background: #fef3c7; color: #92400e; }
.cleanout-badge-replace { background: #dbeafe; color: #1e40af; }
.cleanout-badge-keep { background: #d1fae5; color: #065f46; }
.cleanout-itemname { font-size: 14px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cleanout-reason { font-size: 13px; color: #555; margin: 4px 0 0; line-height: 1.4; }
.cleanout-replacements { margin-top: 10px; }
.cleanout-replace-label { font-size: 12px; font-weight: 600; color: #1e40af; }
.cleanout-replace-thumbs { display: flex; gap: 8px; margin-top: 6px; overflow-x: auto; }
.cleanout-replace-thumb { flex: 0 0 auto; width: 96px; text-decoration: none; color: #333; }
.cleanout-replace-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: #f3f3f3; }
.cleanout-replace-name { display: block; font-size: 11px; color: #555; margin-top: 4px; line-height: 1.3; }
.cleanout-foot { margin-top: 18px; font-size: 13px; }
.cleanout-foot a, .cleanout-page .event-empty a { color: #666; }

/* Wardrobe gap recommendations (shop the gaps) */
.gaps-page { padding: 16px; max-width: 720px; margin: 0 auto 80px; }
.gaps-title { font-size: 22px; margin: 4px 0 2px; }
.gaps-sub { font-size: 14px; color: #666; margin: 0 0 16px; }
.gaps-list { display: flex; flex-direction: column; gap: 12px; }
.gaps-card { background: #fff; border: 1px solid #eee; border-left: 4px solid #8b5cf6; border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.gaps-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gaps-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; background: #ede9fe; color: #5b21b6; }
.gaps-reason { font-size: 13px; color: #555; margin: 4px 0 0; line-height: 1.4; }
.gaps-products { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gaps-product { flex: 0 0 auto; width: 96px; text-decoration: none; color: #333; }
.gaps-product img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: #f3f3f3; }
.gaps-thumb-empty { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 8px; background: #f3f3f3; font-size: 10px; color: #999; text-align: center; }
.gaps-product-name { display: block; font-size: 11px; color: #555; margin-top: 4px; line-height: 1.3; }
.gaps-foot { margin-top: 18px; font-size: 13px; }
.gaps-foot a, .gaps-page .event-empty a:not(.btn-primary) { color: #666; }

.wardrobe-filters { padding: 10px 8px; position: sticky; top: 34px; background: #fff; z-index: 5; display: flex; align-items: center; gap: 8px; } /* top ≈ sticky header height (~35px) so the row pins FLUSH under it; was 44px → ~9px gap. Header z-index (100) > this (5), so any 1px excess tucks invisibly behind the header rather than showing a gap. */
.wardrobe-cats { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1; min-width: 0; }
.wardrobe-cats::-webkit-scrollbar { display: none; }
.wardrobe-fab { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; z-index: 80; display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; background: #111; color: #fff; border-radius: 28px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.wardrobe-fab svg { display: block; }
.wardrobe-fab:active { transform: scale(0.97); }

.wardrobe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px; }
/* Quiet heading for the flat (no category row) closet so the grid doesn't butt flush against the
   sticky top-bar divider and read unfinished. */
.wardrobe-flat-head { display: flex; align-items: baseline; gap: 8px; padding: 16px var(--side) 10px; }
.wardrobe-flat-title { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--text); margin: 0; }
.wardrobe-flat-count { font-size: var(--fs-caption); color: var(--text-secondary); }
/* Closet tile — single flat rounded tile on the neutral product ground, shared with the profile
   mini-closet preview (.profile-outfit-thumb) so both closet surfaces match. ONE radius (--r-md),
   image covers the tile (no nested white-box-on-beige double surface). */
.wardrobe-item { display: block; background: #f2f0ee; border-radius: var(--r-md); overflow: hidden; }
.wardrobe-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* Image-less item awaiting its shared category silhouette — labeled placeholder tile. */
.wardrobe-item-ph { aspect-ratio: 1; border-radius: var(--r-md); background: #f2f0ee; border: 1px dashed #d8d2c6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 6px; text-decoration: none; }
.wardrobe-item-ph-icon { font-size: 22px; opacity: 0.5; }
.wardrobe-item-ph-label { font-size: 11px; line-height: 1.2; color: #8a8275; text-transform: capitalize; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ═══════════ ADD TO CLOSET (chooser + method pages) ═══════════ */
.additem-page { padding: 16px 16px 100px; max-width: 560px; margin: 0 auto; }
.additem-title { font-size: var(--fs-title); margin: 8px 0 4px; }
.additem-sub { font-size: var(--fs-body); color: var(--text-secondary); margin: 0 0 18px; }
.additem-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c0; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.additem-note { font-size: var(--fs-caption); color: var(--text-secondary); margin: 14px 0 0; text-align: center; }
.additem-skipped { font-size: 13px; color: #b3261e; padding-left: 18px; margin: 0 0 14px; }

/* Carousel Add page: 3 entry cards + detected-fields edit area + pinned action bar. */
.additem-carousel-page { padding-bottom: 24px; }
/* The `hidden` attribute must win over the display:flex class rules below (otherwise the read-only
   summary and the editable inputs both show — the Edit toggle then looks broken). */
.additem-page [hidden] { display: none !important; }
.additem-flow { display: flex; flex-direction: column; gap: 14px; }
/* Peek the neighbouring cards + center-snap so it's obviously swipeable (start centered on camera). */
.additem-entry .boc-track { padding: 4px 16px 0; gap: 10px; scroll-padding: 0 16px; }
.additem-entry .boc-slide { flex: 0 0 84%; scroll-snap-align: center; }
.additem-entry .boc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.additem-entry .boc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); transition: background .15s; }
.additem-entry .boc-dot.active { background: var(--black); }
.additem-swipe-hint { display: none; }
/* Cute emoji chevron nav pills overlaid on the carousel edges (centered on the ~265px card). */
.entry-nav { position: absolute; top: 137px; transform: translateY(-50%); display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-pill); padding: 5px 9px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1); z-index: 3; cursor: pointer; }
.entry-nav-left { left: 4px; }
.entry-nav-right { right: 4px; }
.entry-nav-chev { display: inline-flex; color: var(--text-secondary); }
.entry-nav-emoji { display: inline-flex; color: var(--text); }
.entry-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  height: 265px; margin: 0; border: 1px solid var(--divider); border-radius: var(--r-lg); background: var(--surface-muted); padding: 18px; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; }
.entry-card-type, .entry-card-camera { cursor: default; }
.entry-card-icon { display: inline-flex; color: var(--text); }
.entry-card-title { font-size: var(--fs-section); font-weight: 700; }
.entry-card-hint { font-size: var(--fs-caption); color: var(--text-secondary); }
.entry-card-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.entry-card-type { align-items: stretch; justify-content: flex-start; text-align: left; gap: 10px; }
.entry-textarea { flex: 1; width: 100%; box-sizing: border-box; border: 1px solid var(--divider); border-radius: var(--r-md); padding: 12px; font: inherit; font-size: 16px; resize: none; background: var(--surface); color: var(--text); }
.entry-textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.entry-textarea::placeholder { color: var(--gray-400); }
.entry-card-camera { background: var(--black); }
#cam-video, #cam-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry-camera-idle { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; z-index: 1; }
.entry-camera-idle .entry-card-hint { color: var(--gray-300); }
.entry-cam-btn { margin-top: 6px; padding: 8px 16px; border-radius: var(--r-pill); border: 0; background: #fff; color: var(--text); font-weight: 600; cursor: pointer; }
.entry-cam-shutter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 3px solid rgba(255,255,255,0.6); z-index: 2; }
.entry-cam-retake { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: var(--r-pill); border: 0; background: #fff; color: var(--text); font-weight: 600; z-index: 2; }

.additem-edit { display: flex; flex-direction: column; gap: 12px; }
.edit-single { display: flex; flex-direction: column; gap: 14px; }
.edit-bulk { background: var(--surface-muted); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 12px; font-size: var(--fs-body); color: var(--text); }
.edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.edit-head-title { font-size: 13px; font-weight: 700; color: var(--text); }
.edit-spinner { font-size: var(--fs-caption); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.edit-spinner .ai-spinner { display: inline-flex; animation: spin 1s linear infinite; }
.edit-pencil { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-muted); border: 1px solid var(--divider); border-radius: var(--r-pill); padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.edit-empty { font-size: 13px; color: var(--text-secondary); text-align: center; padding: 12px 8px; margin: 0; }
.edit-readonly .field-input { border-color: transparent; background-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.edit-readonly select.field-input { background-image: none; -webkit-text-fill-color: var(--text); color: var(--text); opacity: 1; }
.edit-readonly .field-input::placeholder { color: var(--gray-400); }
.edit-ro-view { display: flex; flex-direction: column; gap: 5px; padding: 2px 0; }
.edit-ro-row { display: flex; gap: 8px; font-size: var(--fs-body); line-height: 1.45; }
.edit-ro-k { color: var(--text-secondary); font-weight: 600; min-width: 70px; }
.edit-ro-v { color: var(--text); }
.edit-ro-none { color: var(--gray-400); }

/* Modern data-entry fields (replaces the dated stacked label+plain-input look). */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.field-opt { font-weight: 500; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--gray-400); margin-left: 5px; }
.field-input { width: 100%; box-sizing: border-box; border: 1px solid var(--divider); background-color: var(--surface-muted); border-radius: var(--r-md);
  padding: 13px 14px; font: inherit; font-size: 16px; color: var(--text); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.field-input::placeholder { color: var(--gray-400); }
.field-input:focus { outline: none; border-color: var(--black); background-color: var(--surface); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
select.field-input { padding-right: 38px; cursor: pointer; }
.edit-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Modern <select> app-wide — replaces the unstyled native gray box (custom chevron, consistent box). */
select { -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 11px 38px 11px 12px;
  font: inherit; font-size: 16px; color: #222; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; }
select:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }

.additem-actions { margin-top: 4px; }
.additem-actions-row { display: flex; gap: 10px; }
.additem-actions-row .btn-primary { flex: 1; }
.additem-actions-row .btn-secondary { flex: 1; background: var(--surface); border: 1px solid var(--gray-300); color: var(--text); border-radius: var(--r-pill); font-weight: 600; padding: 12px; }
.additem-status { font-size: 13px; color: var(--text-secondary); text-align: center; margin: 0 0 8px; }
.additem-status-err { color: #b3261e; }

.wardrobe-organizing { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #666; padding: 6px 8px; }
.wardrobe-organizing .ai-spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wardrobe-section-title { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--text); margin: 18px 3px 10px; display: flex; align-items: baseline; gap: 8px; }
.wardrobe-section-label { font-size: 13px; font-weight: 700; color: var(--text); padding: 14px 3px 6px; }
.wardrobe-bucket { margin-bottom: 10px; }
.wardrobe-bucket-count { font-size: 13px; font-weight: 500; color: var(--text-secondary); }

/* ═══════════ ACCOUNT/EDIT PROFILE ═══════════ */
.account-page { padding: 0 16px 100px; }
.account-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; letter-spacing: -0.01em; margin: 16px 0 12px; }
.account-error { color: #c00; font-size: 13px; }
.account-avatar-section { display: flex; justify-content: center; margin-bottom: 16px; }
.account-avatar-wrap { position: relative; cursor: pointer; }
.account-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.account-avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.account-avatar-badge svg { width: 14px; height: 14px; display: block; }
.account-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.account-form-pw { border-top: 1px solid #eee; padding-top: 20px; }
.account-subtitle { font-size: 16px; margin: 0; }
.account-field { display: flex; flex-direction: column; gap: 6px; }
/* Canonical micro-label (matches .field-label): one uppercase letter-spaced treatment app-wide.
   Explicit text-transform so the div-wrapped "When is it?" label matches its <label>-wrapped siblings. */
.account-field span { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
/* Filled-inset data-entry field (matches the merged .field-input premium pattern). */
.account-field input, .account-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--divider); background-color: var(--surface-muted); border-radius: var(--r-md); padding: 13px 14px; font: inherit; font-size: 16px; color: var(--text); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.account-field input::placeholder, .account-field textarea::placeholder { color: var(--gray-400); }
.account-field input:focus, .account-field textarea:focus { outline: none; border-color: var(--black); background-color: var(--surface); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.account-field textarea { resize: vertical; }
.account-save { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }

/* Thanks page */
.thanks-page { padding-bottom: 100px; }
.thanks-hero { text-align: center; padding: 48px 24px 28px; }
.thanks-icon { color: var(--text); margin: 0 0 14px; line-height: 0; }
.thanks-icon svg { width: 52px; height: 52px; display: inline-block; }
.thanks-hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.thanks-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); margin: 0 0 24px; }
.thanks-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.thanks-link { font-size: var(--fs-body); color: var(--accent); text-decoration: none; font-weight: 600; }
.thanks-more { padding: 16px var(--side); border-top: 1px solid var(--divider); }
.thanks-more h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; margin: 0 0 12px; }

/* Search page */
.search-page { padding: 0 var(--space-sm) 100px; }
.search-bar { padding: 12px 0; position: sticky; top: 36px; background: var(--surface); z-index: 5; border-bottom: 1px solid var(--divider); }
.search-bar input { width: 100%; border: 1px solid var(--gray-300); border-radius: var(--r-pill); padding: 10px 16px; font-size: 16px; outline: none; box-sizing: border-box; background: var(--surface-muted); color: var(--text); }
.search-bar input:focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,0.07); background: var(--surface); }
/* Result rows */
.sr-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.sr-thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-muted); display: block; }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-thumb-round { border-radius: 50%; }
.sr-thumb-icon { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.sr-thumb-icon svg { width: 22px; height: 22px; display: block; }
.sr-body { flex: 1; min-width: 0; }
.sr-name { font-size: var(--fs-body); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-name a { color: inherit; text-decoration: none; }
.sr-handle { font-weight: 400; color: var(--text-secondary); }
.sr-meta { font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sr-meta a { color: var(--accent); text-decoration: none; }
.sr-bio { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.sr-glyph { flex-shrink: 0; color: var(--gray-300); display: flex; align-items: center; }
.sr-glyph svg { width: 18px; height: 18px; display: block; }

/* ═══════════ PUBLIC PROFILE ═══════════ */
.profile-page { padding-bottom: 100px; }
.profile-header { display: flex; gap: 14px; padding: 16px var(--side) 14px; align-items: center; position: sticky; top: 38px; background: var(--surface); z-index: 5; }
.profile-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.profile-handle { font-size: 13px; color: var(--text-secondary); }
.profile-location { font-size: var(--fs-caption); color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.profile-location-pin { flex: 0 0 auto; }
.profile-storefront { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #fff; background: var(--black); padding: 6px 14px; border-radius: var(--r-pill); text-decoration: none; }
.profile-storefront svg { flex: 0 0 auto; }

.profile-stats { display: flex; justify-content: space-around; padding: 16px var(--side); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.profile-stat { text-align: center; }
.profile-stat strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.profile-stat span { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

.profile-actions { display: flex; gap: 10px; padding: 14px var(--side); align-items: center; }
.profile-actions form { display: inline; }
.profile-follow-btn { height: 38px; padding: 0 22px; border-radius: var(--r-pill); background: var(--black); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.profile-follow-btn.following { background: var(--surface); color: var(--text); border: 1px solid var(--gray-300); }
.profile-action-link { height: 38px; line-height: 38px; padding: 0 18px; border-radius: var(--r-pill); background: var(--surface-muted); text-align: center; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text); display: inline-block; box-sizing: border-box; }

.profile-bio { padding: 12px var(--side) 14px; }
.profile-bio p { font-size: var(--fs-body); color: var(--text); margin: 0 0 4px; line-height: 1.45; }
.profile-brands { font-size: 13px; color: var(--text-secondary); }
.profile-brands-heart { vertical-align: -2px; margin-right: 4px; }

.profile-section { padding: 16px var(--side); border-top: 1px solid var(--divider); }
.profile-outfit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-outfit-thumb { display: block; background: #f2f0ee; border-radius: var(--r-md); overflow: hidden; }
.profile-outfit-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.profile-following { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.profile-following::-webkit-scrollbar { display: none; }
.profile-follow-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.profile-follow-chip img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.profile-follow-chip span { font-size: 11px; color: var(--text-secondary); }

/* Comment replies */
.reply-btn { border: none; background: none; font-size: var(--fs-caption); color: var(--accent); cursor: pointer; padding: 2px 0; margin-top: 2px; }
.reply-form { display: flex; gap: 8px; margin: 4px 0 8px 36px; }
.discuss-reply, .outfit-comment-reply { margin-left: 36px; }

/* ═══════════ NOTIFICATIONS ═══════════ */
.notif-page { padding: 0 0 100px; }
.notif-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; letter-spacing: -0.01em; padding: 16px var(--side) 8px; margin: 0; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--side); border-bottom: 1px solid var(--divider); }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-muted); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-icon svg { width: 18px; height: 18px; display: block; }
.notif-content { flex: 1; min-width: 0; padding-top: 1px; }
.notif-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); margin: 0 0 2px; }
.notif-time { font-size: var(--fs-caption); color: var(--text-secondary); }
.notif-outfit { margin: 8px 0; max-width: 260px; }
.notif-dismiss { flex-shrink: 0; }
.notif-dismiss button { border: none; background: none; color: var(--gray-300); cursor: pointer; padding: 4px; line-height: 0; display: flex; }
.notif-dismiss button svg { width: 16px; height: 16px; display: block; }
.notif-dismiss button:hover { color: var(--text-secondary); }

/* Connections */
.connections-title { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; margin: 0 0 12px; }
.connections-list { display: flex; flex-direction: column; }
.connection-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--divider); }
.connection-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-muted); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.connection-icon svg { width: 20px; height: 20px; display: block; }
.connection-info { flex: 1; min-width: 0; }
.connection-info strong { display: block; font-size: var(--fs-body); font-weight: 700; }
.connection-status { font-size: var(--fs-caption); color: var(--text-secondary); }
.connection-badge { color: var(--text); display: flex; align-items: center; }
.connection-badge svg { width: 20px; height: 20px; display: block; }
.connection-cta { font-size: 13px; color: var(--accent); font-weight: 600; }
.connection-active { background: var(--surface-muted); border-radius: var(--r-md); padding: 12px; margin-bottom: 4px; border-bottom: none; }
.connection-sub { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 12px 12px; border-bottom: 1px solid var(--divider); }
.connection-detail { font-size: var(--fs-caption); color: var(--text-secondary); }

/* ═══════════ CAMERA POST ═══════════ */
.camera-page { position: fixed; inset: 0; z-index: 200; background: #000; } /* full-bleed immersive camera (covers header + tab bar); .camera-close gives an exit */
.camera-area { position: absolute; inset: 0; background: #000; overflow: hidden; }
.camera-area video, .camera-area img { width: 100%; height: 100%; object-fit: cover; }
.camera-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; text-decoration: none; border: 0; cursor: pointer; }
.camera-controls { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; padding: 0 40px; z-index: 2; }
.camera-shutter { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,0.3); cursor: pointer; }
.camera-shutter:active { background: rgba(255,255,255,0.7); }
.camera-lib-btn { cursor: pointer; }
.camera-flip { border: none; background: none; cursor: pointer; }
.camera-retake { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 12px; padding: 0 24px; z-index: 2; }
.camera-results { padding: 16px; }
.camera-results-header h2 { font-size: 16px; margin: 0 0 4px; }
.camera-results-sub { font-size: 12px; color: #888; margin: 0 0 12px; }
.camera-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.camera-items::-webkit-scrollbar { display: none; }
.camera-item { position: relative; flex: 0 0 80px; text-align: center; }
.camera-item img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
.camera-item span { display: block; font-size: 10px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camera-item-remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #333; color: #fff; border: none; font-size: 10px; cursor: pointer; }
.camera-item-new { border: 2px dashed var(--accent); border-radius: 10px; padding: 2px; }
.camera-item-placeholder { width: 80px; height: 80px; border-radius: 8px; background: #f8f0e8; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
.camera-section-label { font-size: 12px; font-weight: 600; color: #888; margin: 8px 0 6px; }
.camera-add-new-btn { border: none; background: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 0; }
.camera-post-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.camera-title-input { border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font-size: 16px; outline: none; box-sizing: border-box; width: 100%; }
.camera-desc-input { border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font-size: 16px; outline: none; box-sizing: border-box; width: 100%; resize: none; }
.camera-post-btn { width: 100%; padding: 12px; font-size: 15px; }

/* Match-confirm carousel — one row per recognized garment */
.recog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.recog-shot { flex: 0 0 56px; text-align: center; }
.recog-shot img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.recog-shot span { display: block; font-size: 9px; color: #888; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recog-track-wrap { position: relative; flex: 1; min-width: 0; }
.recog-frame { position: absolute; top: 0; bottom: 14px; left: calc(50% - 56px); width: 112px; border: 2px solid var(--black); border-radius: 12px; pointer-events: none; z-index: 2; }
.recog-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 calc(50% - 52px) 14px; -webkit-overflow-scrolling: touch; }
.recog-track::-webkit-scrollbar { display: none; }
.recog-card { flex: 0 0 104px; scroll-snap-align: center; text-align: center; opacity: .45; transition: opacity .15s, transform .15s; cursor: pointer; }
.recog-card.is-sel { opacity: 1; transform: scale(1.04); }
.recog-card img { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; background: #f4f4f4; }
.recog-glyph { width: 104px; height: 104px; border-radius: 10px; background: #f8f0e8; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--accent); }
.recog-card-title { font-size: 11px; font-weight: 600; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recog-card-tag { font-size: 9px; color: #888; }

.camera-manual { text-align: center; padding: 12px; }
.camera-manual-btn { border: none; background: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; }

.event-date-options { display: flex; gap: 8px; margin-top: 6px; }
.event-date-pill { padding: 8px 12px; border-radius: var(--r-pill); background: var(--surface-muted); font-size: 13px; cursor: pointer; white-space: nowrap; text-transform: none; }
.event-date-pill input { display: none; }
.event-date-pill:has(input:checked) { background: var(--black); color: #fff; }

.event-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; margin: 12px 0; text-transform: none; position: relative; z-index: 1; }
.event-checkbox input { width: 18px; height: 18px; accent-color: var(--text); cursor: pointer; }

/* Event context pills */
.event-context-pills { padding: 8px 0; }
.context-row { margin-bottom: 10px; }
.context-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.context-options { display: flex; flex-wrap: wrap; gap: 6px; }
.context-pill { border: 1px solid var(--gray-300); background: var(--surface); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.context-pill.selected { background: var(--black); color: #fff; border-color: var(--black); }

/* Trending card */
.card-trending { padding: 12px 16px; }
.trending-title { font-size: var(--fs-section); font-weight: 700; margin: 0 0 12px; }
.trending-list { display: flex; flex-direction: column; gap: 8px; }
.trending-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.trending-rank { width: 20px; font-size: 14px; font-weight: 700; color: var(--accent); text-align: center; }
.trending-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.trending-name { flex: 1; font-size: 14px; font-weight: 500; }
.trending-stat { font-size: 12px; color: var(--text-secondary); font-weight: 600; }

/* Submission CTA card */
/* "Think you can do better?" build CTA — flat surface-muted card (DS: no gradients, float on
   white, line icons). The build glyph uses the accent BY ROLE (a build/shop affordance). */
.submission-cta-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-top: 8px; background: var(--surface-muted); border: none; border-radius: var(--r-md); text-decoration: none; color: inherit; }
.submission-cta-emoji { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.submission-cta-emoji svg { display: block; }
.submission-cta-text strong { display: block; font-size: var(--fs-body); color: var(--text); }
.submission-cta-text span { font-size: var(--fs-caption); color: var(--text-secondary); }

.profile-header-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; align-self: flex-start; }
.profile-action-btn { font-size: 12px; font-weight: 600; padding: 7px 14px; border: 1px solid var(--gray-300); border-radius: var(--r-pill); color: var(--black); background: var(--surface); text-decoration: none; white-space: nowrap; text-align: center; }

/* Card item detail slide */
/* Fixed square hero box reserves height from first paint (no layout shift as the
   lazy image loads) and shows a subtle CSS shimmer placeholder until it paints.
   Square + object-fit:cover crops the (dominant) 512x512 generated heroes to zero. */
.card-image-wrap { position: relative; display: flex; overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface); }
.card-image-wrap:not(.has-lqip):not(:has(> .card-image > img.loaded))::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 65%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: feed-shimmer 1.5s ease-in-out infinite;
}
@keyframes feed-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
/* Blur-up LQIP: an inline data-URI preview (var(--lqip)) blurred behind the image until it loads,
   replacing the generic shimmer for assets that have one (same progressive-enhancement path). */
.card-image-wrap.has-lqip:not(:has(> .card-image > img.loaded))::before {
  content: ""; position: absolute; inset: 0;
  background: var(--lqip) center / cover no-repeat;
  filter: blur(16px); transform: scale(1.2);
}
.card-image-wrap .card-image { flex: 1 1 100%; min-width: 0; display: block; }
.card-image-wrap .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Progressive fade-in (JS adds .img-fade then .loaded; images stay visible without JS). */
.card-image > img.img-fade { opacity: 0; transition: opacity .4s ease; }
.card-image > img.img-fade.loaded { opacity: 1; }

/* ─── "Shop this look" right-reveal drawer ───────────────────────────────────
   The outfit photo stays TOP-MOST (z-index 2) and shrinks from the RIGHT,
   revealing a product drawer that sits BEHIND it (z-index 1). The photo is
   never covered, stays horizontally CENTERED (object-fit:cover keeps the model
   centered), and the roomy panel gives the product image real size. Robust to
   sparse data: brand/meta/price render only when present (filled by feed.js). */
.card-image-wrap .card-image {
  flex: 0 0 100%; min-width: 0; position: relative; z-index: 2;
  transition: flex-basis .44s cubic-bezier(.22, 1, .36, 1), margin .44s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.card-image-wrap .card-image img { object-position: 50% 30%; }   /* model stays horizontally centered */
.card-image-wrap.open .card-image { flex-basis: 40%; border-radius: var(--r-lg); overflow: hidden; box-shadow: 8px 0 18px rgba(15,17,17,.34), 17px 0 40px rgba(15,17,17,.30); }

.card-item-detail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 1;  /* BEHIND the photo */
  display: flex; flex-direction: column;
  padding: 12px 12px 8px; background: var(--surface);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateX(-64px);
  transition: opacity .34s ease .05s, transform .48s cubic-bezier(.22, 1, .36, 1), visibility .34s ease .05s;
}
.card-image-wrap.open .card-item-detail { opacity: 1; visibility: visible; transform: translateX(0); }
.card-item-detail-close {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  border: none; background: var(--gray-200); color: var(--text);
  border-radius: 50%; width: 28px; height: 28px; font-size: 16px; line-height: 27px; text-align: center;
  cursor: pointer; padding: 0;
}
/* Focused product — the image flex-grows to fill leftover height (as large as fits) so the
   info + rail below are always pinned and never clipped. */
.card-item-detail-link { display: block; flex: 1 1 auto; min-height: 90px; margin-bottom: 11px; }
.card-item-detail-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  background: #fff; border-radius: var(--r-md); margin: 0; display: block; box-sizing: border-box;
  border: 1px solid rgba(15,17,17,.07);
  opacity: 0; transition: opacity .3s ease;
}
.card-item-detail-img.loaded { opacity: 1; }
/* Loading state: shimmer fills the (reserved) image box while the photo loads, and the info block
   below is a height-matched skeleton — so the image can't grow into empty space and then collapse
   when the details arrive (no reflow). Reuses the feed-shimmer sweep. */
.card-item-detail-link.is-loading { background: var(--gray-300); border-radius: var(--r-md); overflow: hidden; }
.card-item-detail-link.is-loading::after,
.cid-skel-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 65%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: feed-shimmer 1.5s ease-in-out infinite;
}
.card-item-detail-link.is-loading { position: relative; }
.cid-skel-bar { background: var(--gray-200); border-radius: 6px; position: relative; overflow: hidden; }
.card-item-detail-info { display: flex; flex-direction: column; min-width: 0; text-align: left; flex: 0 0 auto; }
.cid-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a8178; margin-bottom: 4px; }
.cid-title {
  font-size: 15px; font-weight: 600; line-height: 1.28; color: var(--text); margin: 0; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cid-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; }
.cid-price { font-size: 19px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: -.01em; }
.cid-actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.card-shop-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: none; cursor: pointer;
  background: var(--black); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cid-fav {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid rgba(15,17,17,.18); background: #fff; color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
/* "Complete the look" rail pinned at the bottom of the drawer (thumbnails + prices, always visible) */
.cid-rail-wrap { margin-top: auto; padding-top: 6px; flex: 0 0 auto; position: relative; min-width: 0; }
.cid-rail-wrap::after { content: ""; position: absolute; right: 0; bottom: 8px; width: 44px; height: 50px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--surface) 78%); pointer-events: none; z-index: 2; }
.cid-rail-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a8178; margin-bottom: 4px; }
.cid-rail { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; min-width: 0; }
.cid-rail::-webkit-scrollbar { display: none; }
.cid-rail-thumb { flex-shrink: 0; border: none; background: none; padding: 0; cursor: pointer; opacity: .4; transition: opacity .2s ease; }
.cid-rail-thumb img { width: 50px; height: 50px; object-fit: cover; border-radius: 10px; display: block; background: #f2f0ee; box-shadow: 0 2px 8px rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.85); }
.cid-rail-thumb.is-active { opacity: 1; }

/* Drag handle on the photo's right edge — the photo IS the draggable drawer surface. */
.cid-drag-handle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 6px; height: 46px; border-radius: 999px;
  background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(15,17,17,.16), 0 2px 7px rgba(15,17,17,.6);
  z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.card-image-wrap.open .cid-drag-handle { opacity: 1; }
/* When the drawer is open the photo reads as a top-most rounded card, so hide the card's
   share/favorite chrome, the "posted an outfit" meta, and the resting thumbnail rail
   (the drawer's rail replaces it). The chrome fades via opacity (transition on the base
   state so it animates both ways) + pointer-events:none; meta uses visibility (not display)
   so the username stays put instead of re-centering downward. */
.card[data-outfit-id] .card-share,
.card[data-outfit-id] .card-fav { transition: opacity .2s ease; }
.card[data-outfit-id]:has(.card-image-wrap.open) .card-share,
.card[data-outfit-id]:has(.card-image-wrap.open) .card-fav { opacity: 0; pointer-events: none; }
.card[data-outfit-id]:has(.card-image-wrap.open) .card-meta { visibility: hidden; }
.card[data-outfit-id]:has(.card-image-wrap.open) .card-items { display: none; }
.card-item-thumb { border: none; background: none; padding: 0; cursor: pointer; }

/* Favorites row */
.favorites-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.favorites-row::-webkit-scrollbar { display: none; }
.favorites-thumb img { width: 80px; height: 80px; border-radius: var(--r-md); object-fit: cover; object-position: center 28%; display: block; }
.favorites-thumb-user img { border-radius: 50%; object-position: center; }

/* === Favorites Page === */
.fav-section { margin-bottom: 24px; }
.fav-section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.fav-grid { display: grid; gap: 8px; }
.fav-grid-outfits { grid-template-columns: repeat(2, 1fr); }
.fav-grid-items { grid-template-columns: repeat(3, 1fr); }
.fav-card { display: block; border-radius: 10px; overflow: hidden; background: #f5f5f5; position: relative; }
.fav-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fav-grid-outfits .fav-card-img { aspect-ratio: 3/4; }
.fav-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; font-size: 12px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; }
.fav-list-people { display: flex; flex-direction: column; gap: 12px; }
.fav-person { display: flex; align-items: center; gap: 12px; }
.fav-person-link { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: inherit; }
.fav-person-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fav-person-name { font-size: 14px; font-weight: 500; }
.fav-person-action { margin-left: auto; }
.btn-sm { font-size: 12px; padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer; }
.btn-outline { background: none; border: 1px solid var(--gray-300); color: var(--text); }

/* === Edit Item === */
.edit-item-hero { text-align: center; margin-bottom: 20px; }
.edit-item-img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; }
.edit-form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.form-input { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--divider); border-radius: var(--r-md); font: inherit; font-size: 16px; background-color: var(--surface-muted); color: var(--text); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.form-input::placeholder { color: var(--gray-400); }
.form-input:focus { outline: none; border-color: var(--black); background-color: var(--surface); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
textarea.form-input { resize: vertical; }
.form-row { display: flex; gap: 12px; }
.form-half { flex: 1; }
.edit-actions { display: flex; gap: 12px; margin-top: 8px; }
.edit-actions .btn-primary { flex: 1; }
.edit-actions .btn-secondary { flex: 0; padding: 10px 20px; background: none; border: 1px solid var(--gray-300); border-radius: var(--r-pill); text-decoration: none; color: var(--text); text-align: center; font-size: 14px; }
.edit-delete-form { margin-top: 32px; padding-top: 20px; border-top: 1px solid #eee; }
.btn-danger { width: 100%; padding: 12px; background: none; border: 1px solid #e53935; color: #e53935; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; cursor: pointer; }

/* === Share Button === */
.outfit-share-btn { background: none; border: none; font-size: 19px; color: #aaa; cursor: pointer; padding: 0 4px; line-height: 1; } /* match the minimal borderless home-card .card-share (and the adjacent .card-fav) instead of a bordered circle */

/* Standardized user-type identity badge (real users get none; AI/influencer labeled). */
.avatar-badge-host { position: relative; display: inline-block; }
*:has(> .user-badge) { position: relative; }
.user-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; border-radius: 50%;
  border: 1.5px solid #fff; color: #fff; pointer-events: none; z-index: 1;
}
.user-badge--ai { background: var(--accent); }   /* ROUND 6: off-system purple → DS accent (AI badge = small secondary label, accent BY ROLE) */
.user-badge--influencer { background: var(--black); }

/* === Dress Me === */
.dressme-page { padding: 16px 0 80px; }
.dressme-title { font-size: 24px; margin: 0 16px 4px; }
.dressme-sub { font-size: 13px; color: #888; margin: 0 16px 16px; }
.dressme-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; }
.dressme-card { scroll-snap-align: center; flex: 0 0 82%; max-width: 360px; background: #fff; border: 0; border-radius: var(--r-lg); padding: 4px 2px 8px; box-shadow: none; }
.dressme-sourcing { display: inline-block; font-size: var(--fs-caption); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.dressme-card-title { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.25; margin: 6px 0 4px; }
.dressme-rationale { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.4; margin: 0 0 12px; }
.dressme-thumbs { display: flex; gap: 10px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dressme-thumbs::-webkit-scrollbar { display: none; }
.dressme-thumb { position: relative; flex: 0 0 auto; width: 138px; height: 178px; border-radius: var(--r-md); overflow: hidden; background: #f2f0ee; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; }
.dressme-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dressme-thumb-empty { font-size: var(--fs-caption); color: var(--text-secondary); text-align: center; padding: 4px; }
.dressme-thumb-tag { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; text-align: center; padding: 2px 0; }
.dressme-nudge { font-size: var(--fs-caption); color: var(--text-secondary); background: var(--surface-muted); border-radius: var(--r-sm); padding: 8px 10px; margin: 0 0 10px; }
.dressme-actions { display: flex; gap: 8px; }
.dressme-actions .btn-primary { flex: 1; }
.dressme-ask { background: #fff; border: 1px solid var(--gray-300); color: var(--text); border-radius: var(--r-pill); padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; }
.dressme-ask:hover { border-color: var(--text); }
.dressme-refine { margin: 16px; }
.dressme-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dressme-chip { background: #f2f2f2; border: 1px solid #e2e2e2; border-radius: 16px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.dressme-chip:hover { background: #ebebeb; }
.dressme-tellmore { display: flex; gap: 8px; }
.dressme-tellmore input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.dressme-foot { text-align: center; margin: 20px 16px; font-size: 13px; }
.dressme-foot a { color: var(--accent); text-decoration: none; }
/* Async-render states: the carousel shows a loading spinner until proposals arrive, an empty-state
   when there are no looks, and a tap-to-retry affordance on a load failure (never blank). */
.dressme-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 180px; color: #888; font-size: 14px; text-align: center; padding: 24px 16px; }
.dressme-spinner { width: 28px; height: 28px; border: 3px solid var(--gray-200); border-top-color: var(--text); border-radius: 50%; animation: dressme-spin .8s linear infinite; }
@keyframes dressme-spin { to { transform: rotate(360deg); } }
.dressme-empty { flex: 1; min-height: 200px; gap: 0; padding: 24px 16px; }
.dressme-retry { flex: 1; min-height: 120px; margin: 0 16px; background: #fff; border: 1px dashed #d99; border-radius: 12px; color: #c33; font-size: 14px; font-weight: 600; cursor: pointer; }
.dressme-retry:hover { background: #fff6f6; }

/* ===== PPCU mock (look-3099) — the converged Outfit Assembler ===== */
.ppcu-page { padding: 12px 16px 150px; position: relative; } /* clears the fixed submit bar + bottom nav */
.ppcu-hero { margin-bottom: 12px; }
.ppcu-hero-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ppcu-hero-track::-webkit-scrollbar { display: none; }
.ppcu-hero-slide { flex: 0 0 100%; scroll-snap-align: center; }
.ppcu-hero-box { height: 200px; border-radius: 14px; background: var(--gray-100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gray-400); }
.ppcu-hero-glyph { font-size: 40px; }
.ppcu-hero-cap { font-size: 12px; }
.ppcu-collage { background: #fff; border: 1px solid var(--gray-200); }
.ppcu-collage-grid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 12px; }
.ppcu-collage-cell { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--gray-100); }
.ppcu-collage-cell.ppcu-noimg { display: inline-flex; align-items: center; justify-content: center; }
.ppcu-hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.ppcu-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); }
.ppcu-dot.active { background: var(--black); }
.ppcu-hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.ppcu-hero-gen { flex-direction: column; gap: 8px; }

/* Post camera stage (look-3099): recognizing state + the de-emphasized skip-photo affordance */
.camera-recognizing { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,0.85); color: #fff; font-size: 14px; text-align: center; padding: 24px 16px; }
.post-skip { position: absolute; bottom: calc(108px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 2; width: auto; max-width: calc(100% - 32px); margin: 0; padding: 9px 18px; background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 0; border-radius: 20px; color: #fff; font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer; }

.ppcu-desc { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 16px; margin-bottom: 16px; outline: none; }
.ppcu-desc:focus { border-color: var(--black); }

.ppcu-section { margin-bottom: 18px; }
.ppcu-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: 10px; }

.ppcu-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--gray-200); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.ppcu-remove { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--gray-100); color: var(--gray-600); font-size: 12px; cursor: pointer; }
.ppcu-remove:hover { background: var(--gray-200); }
.ppcu-carousel { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; }
.ppcu-carousel::-webkit-scrollbar { display: none; }
.ppcu-cand { flex: 0 0 auto; scroll-snap-align: start; border: 0; background: none; padding: 0; cursor: pointer; }
.ppcu-cand-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--gray-100); border: 2px solid transparent; opacity: .4; transition: opacity .15s, border-color .15s, transform .15s; }
.ppcu-cand.selected .ppcu-cand-img { border-color: var(--black); opacity: 1; transform: scale(1.08); }
.ppcu-row-sel { flex: 0 1 auto; max-width: 42%; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ppcu-sift { position: sticky; top: 0; background: var(--white); padding: 4px 0 8px; z-index: 1; }
.ppcu-search { width: 100%; box-sizing: border-box; padding: 10px 12px 10px 38px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 16px; margin-bottom: 8px; outline: none; background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat left 12px center; background-size: 16px; }
.ppcu-search:focus { border-color: var(--black); }
.ppcu-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ppcu-cats::-webkit-scrollbar { display: none; }
.ppcu-cat { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--gray-200); border-radius: 16px; background: #fff; font-size: 13px; color: var(--gray-600); cursor: pointer; }
.ppcu-cat.active { background: var(--black); color: #fff; border-color: var(--black); }

.ppcu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ppcu-tile { position: relative; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.ppcu-tile:hover { border-color: var(--black); }
.ppcu-tile-add { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,17,17,0.82); color: #fff; font-size: 15px; line-height: 22px; text-align: center; }
.ppcu-tile-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--gray-100); }
.ppcu-tile-title { font-size: 11px; color: var(--gray-600); padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ppcu-noimg { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; }
.ppcu-empty { font-size: 13px; color: var(--gray-400); padding: 14px 0; text-align: center; }

.ppcu-submit-bar { position: fixed; left: 0; right: 0; bottom: 64px; max-width: var(--max-width); margin: 0 auto; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--divider); z-index: 90; }
.standalone .ppcu-submit-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
.ppcu-submit { width: 100%; }
.ppcu-submit:disabled { opacity: .4; }

/* ===== Style Me — conversational stylist (chat) ===== */
.stylme-page { padding: 0; } /* chat-scroll owns the viewport height + its own scroll; composer is fixed */
/* padding-bottom (76px) + scroll-padding-bottom clear the fixed composer so the last starter/proposal
   row isn't hidden behind it. */
/* padding-bottom + scroll-padding-bottom (76px ≈ composer height) clear the fixed composer so the
   last starter/proposal row isn't hidden behind it when scrolled to the bottom. */
.chat-scroll { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 120px; height: calc(100dvh - 184px); overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 120px; }
/* Bottom-anchor the transcript: when content is short, margin-top:auto pushes it down to just above
   the composer; when it overflows it collapses to 0 so scrolling reaches the top (canonical pattern,
   avoids the justify-content:flex-end overflow-clip bug). */
.chat-scroll > :first-child { margin-top: auto; }

.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-msg.chat-user { flex-direction: row-reverse; }
.chat-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: #fff; display: flex; align-items: center; justify-content: center; }
.chat-avatar svg { display: block; }
.chat-agent-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }

.chat-bubble { font-size: 14px; line-height: 1.45; padding: 10px 14px; border-radius: 18px; max-width: 84%; }
.chat-agent > .chat-bubble, .chat-agent-body > .chat-bubble { background: var(--gray-100); color: var(--black); border-bottom-left-radius: 5px; align-self: flex-start; }
.chat-user .chat-bubble { background: var(--black); color: #fff; border-bottom-right-radius: 5px; }
.chat-bubble strong { font-weight: 700; }

/* typing indicator */
.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); animation: chat-blink 1.2s infinite both; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.chat-retry { background: #fff6f6; border: 1px dashed #d99; color: #c33; font-weight: 600; cursor: pointer; }

/* inline proposal cards inside an agent turn: full-width vertical stack (reuses .dressme-card) */
.chat-cards { display: flex; flex-direction: column; gap: 12px; }
.chat-cards .dressme-card { flex: none; width: 100%; max-width: 100%; scroll-snap-align: none; }

/* greeting (landing): a prominent left-aligned heading, not a chat bubble */
.chat-greeting { padding: 12px 2px 22px; }
.chat-greeting-title { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-display); margin: 0 0 6px; }
.chat-greeting-sub { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; line-height: 1.4; }

/* visual conversation starters (the landing menu: labeled rows backed by real, editorial thumbnails) */
.chat-starters { display: flex; flex-direction: column; gap: 0; padding: 2px 0 8px; }
.chat-starter, .chat-starter-block { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; background: transparent; border: 0; border-radius: 0; padding: 22px 0; text-align: left; font: inherit; }
.chat-starter + .chat-starter, .chat-starter + .chat-starter-block, .chat-starter-block + .chat-starter { border-top: 1px solid var(--divider); }
.chat-starter { cursor: pointer; }
.chat-starter:hover .chat-starter-label { color: var(--accent); }
.chat-starter-label { font-size: var(--fs-section); font-weight: var(--fw-bold); line-height: 1.2; color: var(--text); }
.chat-starter-thumbs { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chat-starter-thumbs::-webkit-scrollbar { display: none; }
/* Larger, lush product tiles floated on a neutral backdrop (the mock's #f2f0ee product ground) */
.chat-thumb { flex: 0 0 auto; width: 116px; height: 152px; border-radius: var(--r-md); object-fit: cover; background: #f2f0ee; }
/* Persona portraits read as editorial avatars — bigger and rounder */
.chat-avatar-thumb { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #f2f0ee; }
.chat-starter-hint { font-size: var(--fs-caption); color: var(--text-secondary); align-self: center; padding: 10px 0; }

/* Card 1 ("get dressed right now") generated-look loading state (look-3172): a small spinner +
   "putting together looks…" while the real wardrobe looks are generated, swapped for collage tiles
   when they resolve. */
.chat-looks-loading { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; }
.chat-spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--gray-300); border-top-color: var(--accent); border-radius: 50%; animation: chat-spin .7s linear infinite; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
.chat-looks-retry { cursor: pointer; text-decoration: underline; }

/* Card 1 generated-look OUTFIT COLLAGE tile (look-3172): the look's pieces composited into one
   FRAMED tile (border + soft shadow + hairline gridlines) so each reads as a single distinct outfit,
   not loose products. Same footprint as a .chat-thumb. */
.chat-look { flex: 0 0 auto; width: 116px; height: 152px; border-radius: var(--r-md); overflow: hidden; background: #fff; border: 1px solid var(--divider); box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.chat-look-grid { display: grid; width: 100%; height: 100%; gap: 1px; background: var(--divider); }
.chat-look-grid img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.chat-look-grid-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.chat-look-grid-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.chat-look-grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.chat-look-grid-3 img:first-child { grid-row: span 2; }
.chat-look-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Card 2 ("I need a new look" / Shop Like) persona-look tile (look-3172): a real outfit photo from a
   similar person, with the persona's avatar + AI/AIP badge anchored bottom-left over the photo. */
.chat-look-persona { position: relative; flex: 0 0 auto; display: inline-block; }
.chat-look-by { position: absolute; left: 6px; bottom: 6px; width: 30px; height: 30px; }
.chat-look-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #f2f0ee; box-shadow: 0 1px 3px rgba(0,0,0,.3); display: block; }

/* An anchor styled as a whole-card starter (Card 3's page-link variants) — reset anchor chrome. */
a.chat-starter { text-decoration: none; color: inherit; }

/* occasion stubs (the "event" carousel — each text chip is its own conversation starter) */
.chat-occasions { gap: 8px; flex-wrap: wrap; }
.chat-occasion { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.chat-occasion:hover { border-color: var(--black); }

/* intent-driven "set up a styling event" CTA (the "plan" exit) */
.chat-event-cta { margin-top: 2px; }
.chat-event-cta .btn-primary { width: 100%; }

/* composer pinned above the fixed bottom nav */
.chat-composer { position: fixed; left: 0; right: 0; bottom: 64px; max-width: var(--max-width); margin: 0 auto; display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--divider); z-index: 90; }
.standalone .chat-composer { bottom: calc(64px + env(safe-area-inset-bottom)); }
.chat-composer input { flex: 1; height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--gray-300); border-radius: 22px; font-size: 16px; outline: none; }
.chat-composer input:focus { border-color: var(--text); }
.chat-send { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-send:disabled { opacity: .4; }

/* ===== Guest login CTA (shared by the SSR interstitial + the in-page modal) ===== */
/* ===== Login CTA (the body of the private-beta shell page, pages/shell.ejs) ===== */
.login-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 8px 4px; }
.login-cta-mark { margin-bottom: 4px; opacity: .9; }
.login-cta-title { font-size: 20px; font-weight: 700; margin: 0; }
.login-cta-msg { color: #666; font-size: 14px; margin: 0 0 8px; max-width: 320px; }
.login-cta-btn { width: 100%; max-width: 280px; text-align: center; box-sizing: border-box; }
.login-cta .btn-secondary { background: none; border: 1px solid var(--gray-300); border-radius: var(--r-pill); padding: 10px 24px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }

/* "Report a problem" affordance — discreet, below comments on UGC pages */
.report-affordance { margin: 28px 16px 40px; text-align: center; }
.report-trigger { display: inline-block; background: none; border: none; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; }
.report-trigger:hover { color: var(--text); }
.report-disclosure { display: inline-block; max-width: 360px; width: 100%; }
.report-disclosure[open] .report-trigger { color: var(--text); margin-bottom: 10px; }
.report-form { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px; border: 1px solid var(--divider); border-radius: 12px; background: var(--surface-muted); }
.report-reason { padding: 8px; border: 1px solid var(--divider); border-radius: 8px; font-size: 14px; background: #fff; }
.report-note { padding: 8px; border: 1px solid var(--divider); border-radius: 8px; font-size: 14px; resize: vertical; font-family: inherit; }
.report-submit { align-self: flex-end; background: var(--black); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.report-submit:hover { background: #333; }


/* ═══════════ ROUND 5 — micro-interactions & states ═══════════
   Additive polish only. The one global rule (:focus-visible) shows ONLY on
   keyboard navigation, so it never alters the default rendered (mouse/touch)
   appearance — every other rule here is a :active/transition on an existing
   interactive class. Monochrome throughout (DS: press/active states are black,
   never accent). */

/* ── a11y: ONE consistent keyboard focus ring ──
   Monochrome, layout-neutral (outline doesn't reflow), and WebKit follows each
   element's own border-radius so it hugs pills/circles. Form fields keep their
   existing box-shadow focus ring (works for keyboard too), so they're excluded
   here to avoid a double indicator. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
/* Don't paint the legacy mouse/touch focus outline some UAs still draw on click. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ── Buttons: gentle tap depress ── */
.btn-primary { transition: background .15s ease, transform .12s ease; }
.btn-primary:active { transform: scale(.97); }
.btn-secondary:active { transform: scale(.97); }

/* ── Tappable rows: brief monochrome background press feedback ──
   Each listed selector is a whole-row <a>, so :active reads cleanly.
   Split by resting background so the press is always visible. */
.list-item, .need-help-row, .trending-row,
.post-type-card, .me-action-btn, .me-event-row {
  transition: background .15s ease;
}
.list-item:active, .need-help-row:active, .trending-row:active { background: var(--surface-muted); }
.post-type-card:active, .me-action-btn:active, .me-event-row:active { background: var(--gray-200); }

/* ── Chips / pills: press darkens toward the active (black) state ── */
.build-cat, .event-date-pill, .dressme-chip, .chat-occasion { transition: background .15s ease; }
.build-cat:active, .event-date-pill:active, .dressme-chip:active { background: var(--gray-200); }
.context-pill:active, .chat-occasion:active { background: var(--surface-muted); }

/* ── Wardrobe FAB: smooth the existing :active press (was an instant snap) ── */
.wardrobe-fab { transition: transform .12s ease, box-shadow .15s ease; }

/* === Style-Me engagement-nudge feed cards (look-3178) ===
   Soft "advertisement" cards pulling the Style-Me surfaces into the home feed. A subtle gradient
   accent rail distinguishes them from organic content without shouting. */
.card-style-me { display: flex; flex-direction: column; border-left: 3px solid var(--accent); }
.style-me-kicker { display: flex; align-items: center; gap: 6px; padding: 11px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.style-me-spark { font-size: 13px; }
.style-me-body { display: block; text-decoration: none; color: inherit; padding: 2px 16px 8px; }
.style-me-title { display: block; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.style-me-reason { font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin: 4px 0 0; }
.style-me-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: capitalize; color: var(--accent); background: var(--surface-muted); border-radius: var(--r-sm); padding: 2px 8px; margin: 2px 0; }
.style-me-badge-cleanout { color: #b45309; background: #fef3c7; }
.style-me-badge-replace { color: #1d4ed8; background: #dbeafe; }
.style-me-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px 16px; -webkit-overflow-scrolling: touch; text-decoration: none; }
.style-me-thumbs::-webkit-scrollbar { display: none; }
.style-me-thumbs img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--r-md); object-fit: cover; background: #f2f0ee; }
.style-me-products { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; }
.style-me-products::-webkit-scrollbar { display: none; }
.style-me-product { flex: 0 0 auto; width: 96px; text-decoration: none; color: var(--text); }
.style-me-product img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-md); background: #f3f3f3; }
.style-me-product-name { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.3; }
.style-me-thumb-empty { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: var(--r-md); background: var(--surface-muted); font-size: 11px; color: var(--text-secondary); text-align: center; padding: 4px; }
.style-me-cleanout-row { display: flex; gap: 12px; align-items: flex-start; padding: 4px 16px 8px; text-decoration: none; color: inherit; }
.style-me-itemimg img, .style-me-itemimg .style-me-thumb-empty { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; background: #f2f0ee; flex: 0 0 auto; }
.style-me-cleanout-text { flex: 1; min-width: 0; }
.style-me-foot { font-size: 12px; color: var(--text-secondary); line-height: 1.4; padding: 0 16px 6px; margin: 0; }
.style-me-cta { display: block; text-align: center; padding: 10px; font-weight: 700; font-size: 14px; color: var(--accent); text-decoration: none; border-top: 1px solid var(--divider); }

/* ─── Explore / search discovery surface (look-3108) ───
   Content-first search home: occasion chips + carousels/grid of outfit & product tiles.
   Reuses the Style Me engines; intentionally NO floating CTA / per-tile action buttons. */
#explore { padding-bottom: var(--space-lg); }
.xp-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--side) 4px; scrollbar-width: none; }
.xp-chips::-webkit-scrollbar { display: none; }
.xp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid var(--divider);
  background: var(--surface); border-radius: var(--r-sm); padding: 9px 14px; font-size: 14px;
  font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; text-decoration: none; }
.xp-chip-em { margin-right: 6px; }
.xp-sec { margin-top: var(--space-lg); }
.xp-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 10px; }
.xp-sec-title { font-size: var(--fs-section); font-weight: var(--fw-bold); color: var(--text); }
.xp-rail { display: flex; gap: 12px; overflow-x: auto; padding: 0 0 4px; scrollbar-width: none; }
.xp-rail::-webkit-scrollbar { display: none; }
.xp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; }
.xp-tile { flex: 0 0 auto; width: 158px; text-decoration: none; color: var(--text); display: block; }
.xp-tile-lg { width: 100%; }
.xp-photo { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--surface-muted); }
.xp-tile-lg .xp-photo { aspect-ratio: 4 / 5; }
.xp-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.62)); }
.xp-byline { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: flex;
  align-items: center; gap: 7px; color: #fff; font-size: 13px; font-weight: var(--fw-semibold);
  text-shadow: 0 1px 3px rgba(0,0,0,.55); min-width: 0; }
.xp-ava-wrap { position: relative; width: 26px; height: 26px; flex: 0 0 auto; }
.xp-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(255,255,255,.85); display: block; }
.xp-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-cap { display: block; font-size: 13px; color: var(--text); margin-top: 7px; line-height: 1.35; }
.xp-prod { flex: 0 0 auto; width: 124px; text-decoration: none; color: var(--text); display: block; }
.xp-prod-img { display: block; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md);
  overflow: hidden; aspect-ratio: 1; padding: 10px; }
.xp-prod-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.xp-prod-name { display: block; font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.3; }

/* Tighten the gap between the search bar and the first Explore widget (look-3108). */
#explore .xp-sec:first-child { margin-top: var(--space-sm); }

/* Style Me hand-off card — the search↔Style Me bridge. Used as the Explore end-cap AND as the
   results-page intent bridge (turns a dead-end query into "let your stylist build it"). */
.xp-cta { display: block; padding: 20px 18px; border-radius: var(--r-lg); background: var(--black);
  color: #fff; text-decoration: none; }
.xp-cta-kicker { display: block; font-size: var(--fs-caption); letter-spacing: .05em;
  text-transform: uppercase; color: #ffd8a8; font-weight: var(--fw-bold); }
.xp-cta-title { display: block; font-size: var(--fs-section); font-weight: var(--fw-bold); margin-top: 4px; }
.xp-cta-sub { display: block; font-size: 13px; color: rgba(255,255,255,.78); margin-top: 5px; line-height: 1.4; }
.xp-cta--endcap { margin-top: var(--space-lg); }
.xp-cta--bridge { margin-top: var(--space-md); }

/* Grouped search results (look-3108): People cards + Event cards. Looks/Pieces reuse .xp-tile. */
.xp-person { flex: 0 0 auto; width: 92px; text-align: center; text-decoration: none; color: var(--text); display: block; }
.xp-person-ava { position: relative; display: block; width: 72px; height: 72px; margin: 0 auto; }
.xp-person-ava img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.xp-person-name { display: block; font-size: 13px; font-weight: var(--fw-semibold); margin-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-person-meta { display: block; font-size: var(--fs-caption); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-events { display: flex; flex-direction: column; gap: 10px; }
.xp-event { display: block; border: 1px solid var(--divider); border-radius: var(--r-md); padding: 14px;
  text-decoration: none; color: var(--text); }
.xp-event-title { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.xp-event-sub { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.35; }
.xp-event-by { display: block; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 6px; }