/* ============================================================
   Stitchly — design tokens
   Soothing, trust-forward; warm-neutral base; sage primary;
   clay accent (sparingly); slate-blue info; amber workshop.
   ============================================================ */

:root,
[data-theme="light"] {
  /* surfaces */
  --bg:               oklch(0.972 0.008 78);   /* warm off-white / oatmeal */
  --surface:          oklch(0.945 0.012 78);   /* sand */
  --surface-2:        oklch(0.912 0.014 78);   /* greige */
  --surface-inset:    oklch(0.988 0.006 78);   /* page veil */
  --border:           oklch(0.860 0.012 78);
  --border-strong:    oklch(0.760 0.012 78);
  --hairline:         oklch(0.890 0.010 78);

  /* text */
  --text:             oklch(0.220 0.012 78);
  --text-muted:       oklch(0.500 0.010 78);
  --text-subtle:      oklch(0.640 0.008 78);
  --text-inverse:     oklch(0.985 0.006 78);

  /* sage — primary */
  --sage:             oklch(0.620 0.058 150);
  --sage-strong:      oklch(0.520 0.072 150);
  --sage-soft:        oklch(0.930 0.030 150);
  --sage-ink:         oklch(0.300 0.060 150);

  /* clay — sparing accent */
  --clay:             oklch(0.620 0.095 47);
  --clay-strong:      oklch(0.540 0.110 47);
  --clay-soft:        oklch(0.930 0.040 47);
  --clay-ink:         oklch(0.340 0.080 47);

  /* slate-blue — info / re-alteration */
  --slate:            oklch(0.620 0.058 240);
  --slate-soft:       oklch(0.930 0.030 240);
  --slate-ink:        oklch(0.320 0.060 240);

  /* amber — workshop / in-progress */
  --amber:            oklch(0.740 0.100 78);
  --amber-soft:       oklch(0.940 0.045 80);
  --amber-ink:        oklch(0.380 0.080 78);

  /* brick — danger (muted, calm) */
  --brick:            oklch(0.555 0.130 28);
  --brick-soft:       oklch(0.930 0.045 28);
  --brick-ink:        oklch(0.350 0.110 28);

  /* warm gray — queued / neutral */
  --neutral:          oklch(0.660 0.010 78);
  --neutral-soft:     oklch(0.915 0.010 78);
  --neutral-ink:      oklch(0.380 0.010 78);

  /* elevation */
  --shadow-1: 0 1px 2px oklch(0.20 0.01 78 / 0.06), 0 1px 1px oklch(0.20 0.01 78 / 0.04);
  --shadow-2: 0 4px 14px oklch(0.20 0.01 78 / 0.06), 0 1px 2px oklch(0.20 0.01 78 / 0.04);
  --shadow-3: 0 18px 40px oklch(0.20 0.01 78 / 0.10), 0 2px 6px oklch(0.20 0.01 78 / 0.05);

  /* radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 22px;
  --r-pill: 9999px;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 360ms;
  --dur-spring: 480ms;

  /* type */
  --font: 'Inter', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', system-ui, sans-serif;
  --font-display: 'Fraunces', 'Noto Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg:               oklch(0.190 0.008 78);
  --surface:          oklch(0.232 0.010 78);
  --surface-2:        oklch(0.275 0.012 78);
  --surface-inset:    oklch(0.165 0.008 78);
  --border:           oklch(0.310 0.012 78);
  --border-strong:    oklch(0.420 0.014 78);
  --hairline:         oklch(0.280 0.010 78);

  --text:             oklch(0.965 0.006 78);
  --text-muted:       oklch(0.720 0.008 78);
  --text-subtle:      oklch(0.560 0.008 78);
  --text-inverse:     oklch(0.190 0.008 78);

  --sage:             oklch(0.770 0.075 150);
  --sage-strong:      oklch(0.840 0.080 150);
  --sage-soft:        oklch(0.300 0.035 150);
  --sage-ink:         oklch(0.890 0.060 150);

  --clay:             oklch(0.745 0.105 47);
  --clay-strong:      oklch(0.820 0.110 47);
  --clay-soft:        oklch(0.310 0.050 47);
  --clay-ink:         oklch(0.880 0.080 47);

  --slate:            oklch(0.780 0.075 240);
  --slate-soft:       oklch(0.300 0.040 240);
  --slate-ink:        oklch(0.880 0.060 240);

  --amber:            oklch(0.840 0.110 78);
  --amber-soft:       oklch(0.310 0.055 78);
  --amber-ink:        oklch(0.890 0.080 78);

  --brick:            oklch(0.720 0.140 28);
  --brick-soft:       oklch(0.310 0.060 28);
  --brick-ink:        oklch(0.880 0.090 28);

  --neutral:          oklch(0.700 0.010 78);
  --neutral-soft:     oklch(0.290 0.010 78);
  --neutral-ink:      oklch(0.870 0.010 78);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.35), 0 1px 1px oklch(0 0 0 / 0.2);
  --shadow-2: 0 6px 18px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-3: 0 22px 50px oklch(0 0 0 / 0.5), 0 2px 6px oklch(0 0 0 / 0.3);
}

/* Variant — handcraft tilts slightly warmer/richer, spa is the default */
[data-variant="handcraft"] {
  --sage:        oklch(0.560 0.082 152);
  --clay:        oklch(0.595 0.118 42);
  --clay-soft:   oklch(0.920 0.052 42);
  --bg:          oklch(0.958 0.013 70);
  --surface:    oklch(0.928 0.018 70);
  --surface-2:  oklch(0.892 0.020 70);
}
[data-theme="dark"][data-variant="handcraft"] {
  --sage:        oklch(0.770 0.090 152);
  --clay:        oklch(0.760 0.120 42);
  --bg:          oklch(0.175 0.012 70);
  --surface:    oklch(0.220 0.014 70);
  --surface-2:  oklch(0.262 0.016 70);
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* Bare inline SVGs (no width attr) default to text size, not the 300×150 UA default.
   Defined before component rules (e.g. .chip svg) so those keep their explicit sizing. */
svg:not([width]) { width: 1em; height: 1em; }

/* ============================================================
   Type scale
   ============================================================ */

.t-display { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; }
.t-h2 { font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
.t-h3 { font-size: 18px; font-weight: 500; line-height: 1.35; }
.t-body { font-size: 15px; font-weight: 400; line-height: 1.5; }
.t-small { font-size: 13px; font-weight: 400; line-height: 1.45; }
.t-cap { font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.t-mono { font-family: var(--font-mono); font-size: 12px; }
.t-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Primitives (used by both surfaces)
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(0.5px); }
.btn--primary {
  background: var(--sage);
  color: white;
  box-shadow: var(--shadow-1);
}
[data-theme="dark"] .btn--primary { color: var(--text-inverse); }
.btn--primary:hover { background: var(--sage-strong); }
.btn--ghost { background: transparent; border-color: var(--border); }
.btn--ghost:hover { background: var(--surface); }
.btn--danger { background: var(--brick); color: white; }
.btn--lg { height: 48px; padding: 0 var(--s-6); font-size: 15px; }
.btn--sm { height: 32px; padding: 0 var(--s-4); font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Pessimistic "applying…" state */
.btn--pending { background: var(--surface-2); color: var(--text-muted); }
.btn--pending::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chip / pill */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}
.chip--sage { background: var(--sage-soft); color: var(--sage-ink); border-color: transparent; }
.chip--clay { background: var(--clay-soft); color: var(--clay-ink); border-color: transparent; }
.chip--slate { background: var(--slate-soft); color: var(--slate-ink); border-color: transparent; }
.chip--amber { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.chip--brick { background: var(--brick-soft); color: var(--brick-ink); border-color: transparent; }
.chip--neutral { background: var(--neutral-soft); color: var(--neutral-ink); border-color: transparent; }
.chip--lg { height: 32px; font-size: 13.5px; padding: 0 14px; }
.chip--xs { height: 22px; font-size: 11.5px; padding: 0 8px; }
.chip svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.card--inset { background: var(--surface-inset); }
.card--flat { border: 1px solid var(--hairline); background: var(--bg); }
.card--lift { box-shadow: var(--shadow-2); border-color: transparent; }

/* Hairline */
.hr { height: 1px; background: var(--hairline); border: 0; margin: var(--s-4) 0; }

/* Input */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.field-hint { font-size: 12px; color: var(--text-subtle); }
.input {
  height: 44px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0 14px;
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input:focus { outline: none; border-color: var(--sage); background: var(--surface-inset); }
.input--warn { border-color: var(--amber); background: var(--amber-soft); }

/* Status strip dot */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); display: inline-block; }
.dot--done { background: var(--sage); }
.dot--active { background: var(--sage-strong); box-shadow: 0 0 0 4px var(--sage-soft); }
.dot--ahead { background: transparent; border: 1.5px solid var(--border-strong); }

/* Skeleton */
.skel {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-2);
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Placeholder image (striped) */
.ph {
  background:
    repeating-linear-gradient(135deg,
      var(--surface) 0px, var(--surface) 8px,
      var(--surface-2) 8px, var(--surface-2) 16px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  padding: 8px;
}

/* Inline annotation marker — for open-question pins */
.pin {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--clay);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.2), 0 0 0 4px var(--bg);
  z-index: 5;
  font-family: var(--font);
}
.pin:hover { transform: scale(1.08); }

/* Tooltip / annotation popover */
.note {
  position: absolute;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 12px;
  box-shadow: var(--shadow-3);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  z-index: 50;
}
.note .t-cap { margin-bottom: 6px; color: var(--clay); }

/* Hide scrollbar where we want, accessibly */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Modal overlay + card */
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: oklch(0.2 0.01 78 / 0.42);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: modal-fade-in var(--dur-2) var(--ease);
}
.modal-card {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: modal-pop-in var(--dur-2) var(--ease);
}

/* Inline text-action button (link-style, no border) */
.link-act {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0;
  cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); font-family: var(--font);
  transition: color var(--dur-1) var(--ease);
}
.link-act:hover { color: var(--text); }
.link-act--danger { color: var(--brick); }
.link-act--danger:hover { color: oklch(0.48 0.16 30); }

/* Dashed "add" button — full width */
.add-dashed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px;
  border-radius: var(--r-3); border: 1.5px dashed var(--border);
  background: transparent; color: var(--text-muted);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.add-dashed:hover { border-color: var(--sage); color: var(--sage-ink); }

/* Segmented button (label/type picker) */
.seg-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border-radius: var(--r-2);
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-muted); font-weight: 500; font-size: 13px;
  cursor: pointer; font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg-btn--active { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); font-weight: 600; }

/* Side-rail quick-link button */
.rail-link {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 10px; border-radius: var(--r-2);
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font);
  transition: background var(--dur-1) var(--ease);
}
.rail-link:hover { background: var(--surface-2); }

/* Address row button in popover */
.addr-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 8px 10px;
  border-radius: var(--r-3); border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.addr-row:hover { border-color: var(--sage); }
.addr-row--active { border-color: var(--sage); background: var(--sage-soft); }

/* "Use my location" button */
.loc-btn {
  margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px; border-radius: var(--r-2);
  border: 1px dashed var(--border); background: transparent;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.loc-btn:hover { border-color: var(--sage); color: var(--sage-ink); }

/* Location detecting spinner */
.loc-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--sage-soft); border-top-color: var(--sage);
  animation: loc-spin-anim 0.7s linear infinite; flex-shrink: 0;
}
@keyframes loc-spin-anim { to { transform: rotate(360deg); } }

/* Popover entrance animation */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Typing indicator dot */
.typing-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* FAQ topic card — hover accent */
.help-topic { transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.help-topic:hover { border-color: var(--sage); box-shadow: var(--shadow-1); }

/* ─────────────────────────────────────────────────────────────────────────
   Profile & Pincode handoff (5) — header redesign, design cards, cart,
   checkout, fit chooser. Ported from the design prototype; tokens only.
   ───────────────────────────────────────────────────────────────────────── */

/* Header — "Deliver to" location pill */
.loc-pill {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  max-width: 200px;
  border-radius: var(--r-2); border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.loc-pill:hover { border-color: var(--sage); background: var(--sage-soft); }

/* Header — bordered icon button (theme, wishlist, bag) */
.hdr-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r-2); border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hdr-icon:hover { border-color: var(--sage); color: var(--sage); background: var(--sage-soft); }

/* Header — avatar + chevron dropdown trigger */
.hdr-avatar {
  display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 8px 0 4px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hdr-avatar:hover { border-color: var(--sage); background: var(--sage-soft); }

/* Header — dropdown menu row */
.menu-row {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px;
  border: none; background: transparent; cursor: pointer; border-radius: var(--r-2);
  font-size: 13.5px; font-weight: 500; color: var(--text); text-align: left;
  font-family: var(--font);
  transition: background var(--dur-1) var(--ease);
}
.menu-row:hover { background: var(--surface-inset); }

/* Design card (catalog + wishlist grids) */
.design-card {
  border-radius: var(--r-3); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); cursor: pointer;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.design-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--border-strong); }

/* Floating add / remove button on a design card */
.card-add {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: oklch(1 0 0 / 0.92); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0;
  box-shadow: var(--shadow-2);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.design-card:hover .card-add { opacity: 1; }
.card-add:hover { transform: scale(1.08); }

/* Floating wishlist heart on a design card */
.card-heart {
  position: absolute; top: 10px; right: 52px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: oklch(1 0 0 / 0.92); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0;
  box-shadow: var(--shadow-2);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.design-card:hover .card-heart { opacity: 1; }
.card-heart:hover { transform: scale(1.08); }

/* Corner flag on a design card (e.g. "Kids") */
.card-flag {
  position: absolute; top: 10px; left: 10px; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.92); color: var(--text);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center;
}

/* Selectable fit-path option card (extends .card) */
.fit-opt { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.fit-opt:not([disabled]):hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--sage); }

/* Checkout layout — content + sticky price rail */
.checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 820px) { .checkout-grid { grid-template-columns: 1fr; } }

/* Cart/bag layout — items + sticky summary rail */
.cart-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
@media (max-width: 760px) { .cart-grid { grid-template-columns: 1fr; } }

/* Profile layout — content + side rail */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 28px; align-items: start; }
@media (max-width: 880px) { .profile-grid { grid-template-columns: 1fr; } }

/* Quantity stepper */
.qty {
  display: inline-flex; align-items: center; height: 32px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-pill);
}
.qty button {
  width: 32px; height: 30px; border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--text); font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
}
.qty button:hover:not(:disabled) { background: var(--surface-inset); }
.qty button:disabled { color: var(--text-subtle); cursor: not-allowed; }
.qty span { min-width: 30px; text-align: center; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Order-placed confirmation badge */
.placed-badge {
  width: 72px; height: 72px; border-radius: 50%; background: var(--sage); color: white;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
  animation: placed-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes placed-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ── Catalog redesign: hero chips, filter toolbar, product grid ──────────── */

/* Hero trust chips on the sage banner */
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border-radius: var(--r-pill); background: oklch(1 0 0 / 0.16); color: white;
  font-size: 12.5px; font-weight: 600; backdrop-filter: blur(4px);
}

/* Sticky filter/sort toolbar */
.filter-bar {
  position: sticky; top: 64px; z-index: 50; background: var(--bg);
  padding: 16px 0 14px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 13px;
  border-bottom: 1px solid var(--hairline);
}

/* Segmented gender control */
.segmented {
  display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2);
  border-radius: var(--r-pill); width: max-content;
}
.segmented-btn {
  height: 32px; padding: 0 16px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; transition: color var(--dur-1) var(--ease);
}
.segmented-btn:hover { color: var(--text); }
.segmented-btn.is-active { background: var(--surface); color: var(--sage-ink); box-shadow: var(--shadow-1); }

/* Custom sort dropdown */
.sort-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: var(--r-2); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 13px; color: var(--text); white-space: nowrap; flex-shrink: 0;
  transition: border-color var(--dur-1) var(--ease);
}
.sort-btn:hover { border-color: var(--sage); }
.sort-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 220px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  box-shadow: var(--shadow-3); padding: 6px; animation: pop-in var(--dur-2) var(--ease);
}
.sort-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 11px; border: none; background: transparent; cursor: pointer; border-radius: var(--r-2);
  font-size: 13px; color: var(--text); text-align: left; transition: background var(--dur-1) var(--ease);
}
.sort-opt:hover { background: var(--surface-inset); }
.sort-opt.is-active { color: var(--sage-ink); font-weight: 600; }

/* Filters popover (fit · price · fabric) */
.filters-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px;
  border-radius: var(--r-2); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.filters-btn:hover { border-color: var(--sage); }
.filters-btn.has-count { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }
.filters-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sage); color: white;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.filters-panel {
  position: absolute; top: calc(100% + 8px); left: 0; width: 320px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4);
  box-shadow: var(--shadow-3); overflow: hidden; animation: pop-in var(--dur-2) var(--ease);
}
.price-range { width: 100%; accent-color: var(--sage); }

/* Horizontal category scroller */
.cat-scroller { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cat-scroller::-webkit-scrollbar { display: none; }
.cat-chip {
  flex-shrink: 0; height: 34px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.cat-chip:hover { border-color: var(--sage); color: var(--sage-ink); }
.cat-chip.is-active { background: var(--sage); border-color: var(--sage); color: white; font-weight: 600; }

/* Removable active-filter pill */
.active-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-inset);
  cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.active-pill:hover { border-color: var(--brick, var(--sage)); color: var(--brick-ink, var(--sage-ink)); }

/* Product (PDP) two-column layout */
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .pdp-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 400; display: flex; align-items: center; gap: 9px;
  background: var(--text); color: var(--bg); padding: 11px 16px;
  border-radius: var(--r-pill); box-shadow: var(--shadow-3);
  font-size: 13px; font-weight: 500; animation: toast-in var(--dur-2) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }