/* ============================================================
   WeMkr — concepts.css
   Extracted from concepts.html as part of WM-ARCH-01.
   Source: public/concepts.html (lines 52–3217 + 8597–8611)
   DO NOT edit inline styles in concepts.html — edit this file.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
button, [role="button"], .md-link, .send-btn, .hamburger-btn, .mobile-drawer-close,
.rb-continue, .rb-fresh, .rb-dismiss, .pin-popup-cta, .chip, .upload-btn,
.mg-card, .gcard, .nav-link, .footer-link { touch-action: manipulation; }

:root { --accent: #00D4AA; --accent-bg: #E0FBF5; --accent-border: rgba(0,212,170,0.2); --accent-shadow: rgba(0,212,170,0.35); --dc-card-img-h: 200px; }

body {
  background: #F6F4F1;
  font-family: Inter, sans-serif;
  color: #000000;
  padding: 0;
  height: 100vh;
  height: 100dvh; /* iOS Safari: tracks actual visible viewport, not the static 100vh */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
  text-align: center;
  padding: 20px 0 8px;
  background: #F6F4F1;
}
.sublabel {
  min-height: 38px;
  background: #0C1A27;
  border-bottom: 4px solid #00D4AA;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* iOS safe area: push below status bar notch on all devices */
  padding-top: env(safe-area-inset-top, 0px);
}
.sublabel-msg {
  position: absolute;
  left: 210px;
  right: 320px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: #C8F5E8;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  white-space: nowrap;
  pointer-events: none;
}
.sublabel-msg.active {
  opacity: 1;
  transform: translateY(0);
}
.sublabel-msg.exiting {
  opacity: 0;
  transform: translateY(-8px);
}

/* ══════════════════════════════════════════
   THE SHELL
══════════════════════════════════════════ */
.shell {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #FFFFFF;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 210px 1fr 320px;
  grid-template-rows: 1fr 106px 65px;
  overflow: hidden;
}

/* ── LEFT NAV ── */
.nav {
  background: #F6F4F1;
  border-right: 1px solid #E4DED2;
  display: flex;
  flex-direction: column;
  padding: 28px 0 24px;
}

.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 24px 36px;
  text-decoration: none;
  width: 100%;
}

.logo-mark {
  width: 54px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

.logo-text {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  color: #000;
  letter-spacing: 0;
  text-align: center;
}

.nav-section {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  gap: 1px;
}

.nav-section + .nav-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #E4DED2;
}

.nav-link {
  font-size: 13px;
  color: #555;
  padding: 7px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}
.nav-link:hover { background: #E4DED2; color: #000; }
.nav-link.active { color: var(--accent); }
.nav-link svg { opacity: 0.5; flex-shrink: 0; }
.nav-link.active svg { opacity: 1; }

.nav-link.sub {
  font-size: 12px;
  padding-left: 24px;
  color: #A89E96;
}

.nav-spacer { flex: 1; }

/* ── CENTER PANEL ── */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  gap: 28px;
  background: #fff;
  /* min-height:0 prevents the grid track from auto-expanding beyond its 1fr allocation.
     overflow:hidden is intentionally omitted here — Safari desktop clips the first flex
     child (headline) when overflow:hidden + justify-content:center are combined on a
     flex column. The shell's own overflow:hidden handles outer clipping instead. */
  min-height: 0;
}

.headline {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  font-weight: 400;
  color: #000000;
  text-align: center;
  line-height: 1.25;
  max-width: 440px;
  letter-spacing: -0.2px;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.45s ease, opacity 0.3s ease, margin 0.45s ease;
  margin-bottom: 4px;
}
.headline em {
  font-style: italic;
  color: var(--accent);
}

.input-card {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border: 1.5px solid #E4DED2;
  border-radius: 4px;
  padding: 20px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.input-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212,133,138,0.1), 0 2px 8px rgba(0,0,0,0.04);
}

.input-text {
  font-size: 15px;
  color: #2A2A2A;
  font-family: inherit;
  line-height: 1.5;
  padding: 2px 0;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
}
.input-text::placeholder { color: #C4BCB5; }
.input-text:focus { color: #2A2A2A; }

.input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #E4DED2;
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888;
}
.upload-btn svg { opacity: 0.5; }

/* ── WM-UI-03: Upload-hero zone ── */
.upload-hero-zone {
  width: 100%;
  max-width: 480px;
  border: 2px dashed var(--accent);
  background: var(--accent-bg);
  border-radius: 12px;
  padding: 28px 20px;         /* WM-UI-04: was 24px 16px — more breath */
  text-align: center;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.upload-hero-zone:hover {
  border-color: #00b894;
  background: #c8f5e8;
  box-shadow: inset 0 0 0 1px rgba(0,212,170,0.2); /* WM-UI-04: tappable confidence */
}
.upload-hero-label {
  font-size: 15px;             /* WM-UI-04: was 14px */
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
}
.upload-hero-sub {
  font-size: 13px;             /* WM-UI-04: was 12px */
  color: #6B6560;              /* WM-UI-04: was #A09890 — more readable */
  margin-top: 4px;
  line-height: 1.45;           /* WM-UI-04: add breathing room */
}

/* ── WM-UI-03: Pre-chat greeting ── */
.pre-chat-greeting {
  margin-bottom: 12px;
  max-width: 500px;
  width: 100%;
}
.center.chat-active .pre-chat-greeting { display: none; }

/* ── WM-UI-03: Upload divider ── */
.upload-divider {
  font-size: 11px;
  color: #A09890;
  text-align: center;
  margin: 8px 0 12px;
}
.center.chat-active .upload-divider { display: none; }

/* ── WM-UI-03: Hide upload-hero-zone in chat-active ── */
.center.chat-active .upload-hero-zone { display: none; }

/* ── WM-UI-03c: Upload staged preview zone ── */
.upload-staged-zone {
  display: none;          /* shown by JS after file selected */
  width: 100%;
  max-width: 480px;
  border: 2px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
  animation: staged-in 0.22s ease both;
}
@keyframes staged-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.upload-staged-zone.visible { display: block; }
.center.chat-active .upload-staged-zone { display: none; }

.upload-staged-thumb {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(0,212,170,0.35);
  display: block;
  margin: 0 auto 10px;
}
.upload-staged-name {
  font-size: 11px;
  color: #A09890;
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.upload-staged-cta {
  width: 100%;
  max-width: 280px;
  padding: 12px 20px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,212,170,0.4);
  transition: opacity 0.15s, transform 0.15s;
  display: block;
  margin: 0 auto 10px;
  font-family: inherit;
}
.upload-staged-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.upload-staged-change {
  font-size: 11.5px;
  color: #A09890;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 4px;
  transition: color 0.15s;
}
.upload-staged-change:hover { color: #555; }


.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 2px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--accent-shadow);
}
.send-btn svg { color: #fff; }

/* Product chips */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 480px;
  overflow: hidden;
  max-height: 80px;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #fff;
  border: 1.5px solid #E4DED2;
  border-radius: 3px;
  color: #555;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,212,170,0.25); }
.chip.active svg { opacity: 0.9; }
.chip svg { width: 14px; height: 14px; opacity: 0.6; }
.cat-item.active .cat-name { color: var(--accent); font-weight: 600; }
.cat-item.active .cat-icon { color: var(--accent); }

/* ── CHAT THREAD ── */
#chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  max-width: 500px;
}
.msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  padding: 10px 15px;
  max-width: 72%;
  border-radius: 18px 18px 4px 18px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  animation: msg-in 0.25s ease both;
}
.msg-ai { align-self: flex-start; max-width: 72%; width: 100%; animation: msg-in 0.3s ease both; }
.msg-ai-text {
  font-size: 13.5px;
  color: #4A4543;
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 0 2px;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #E4DED2;
  border-radius: 4px;
  width: fit-content;
}
.typing-indicator span {
  width: 7px; height: 7px;
  background: #C4BCB5;
  border-radius: 50%;
  animation: tdot 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tdot {
  0%,60%,100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.design-card {
  background: #fff;
  border: 1.5px solid #E4DED2;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
  animation: msg-in 0.35s ease both;
}
.design-card-img {
  width: 100%;
  height: var(--dc-card-img-h);
  background: #F6F4F1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.design-card-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
/* ── Zoom hint overlay on card image ── */
.dc-zoom-hint {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.88);
  border: 1.5px solid rgba(255,255,255,0.65);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 300; color: #333; line-height: 1;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
  user-select: none;
}
/* ── Image lightbox ── */
.img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.img-lightbox.open { opacity: 1; pointer-events: auto; }
.img-lightbox img {
  max-width: min(90vw, 640px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: scale(0.92);
  transition: transform 0.22s ease;
}
.img-lightbox.open img { transform: scale(1); }
.img-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  color: rgba(255,255,255,0.7); font-size: 28px; line-height: 1;
  cursor: pointer; font-weight: 300; user-select: none;
}
.img-lightbox-close:hover { color: #fff; }
.design-card-body { padding: 14px 16px 16px; cursor: pointer; }
.design-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.design-card-title {
  font-size: 14px; font-weight: 600; color: #1C1C1C; line-height: 1.3; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-card-meta { font-size: 12px; color: #A09890; margin-bottom: 14px; }
/* Refine button — secondary action on card, above pills */
.btn-refine-card {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: #A09890;
  background: none; border: none; padding: 0;
  cursor: pointer; margin-bottom: 6px;
  transition: color 0.15s;
  font-family: inherit;
}
.btn-refine-card:hover { color: #555; }
.design-card-actions { display: flex; gap: 8px; }
.btn-refine {
  flex: 1; padding: 9px 10px;
  border: 1.5px solid #E4DED2; border-radius: 3px;
  font-size: 12.5px; font-weight: 500; color: #555;
  cursor: pointer; background: #fff; text-align: center;
  transition: border-color 0.15s;
}
.btn-refine:hover { border-color: #999; }
.btn-order {
  flex: 1; padding: 9px 10px;
  background: var(--accent); border: none; border-radius: 3px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  cursor: pointer; text-align: center;
  box-shadow: 0 2px 8px var(--accent-shadow);
  transition: opacity 0.15s;
}
.btn-order:hover { opacity: 0.88; }

/* ── Design Card — Save / Configure action row ── */
.dc-card-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.dc-btn-save {
  flex: 1; padding: 9px 10px;
  border: 1.5px solid #E4DED2; border-radius: 3px;
  font-size: 12.5px; font-weight: 500; color: #555;
  cursor: pointer; background: #fff; text-align: center;
  transition: border-color 0.15s;
}
.dc-btn-save:hover { border-color: #19D2A9; color: #19D2A9; }
.dc-btn-configure {
  flex: 1; padding: 9px 10px;
  background: var(--accent); border: none; border-radius: 3px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  cursor: pointer; text-align: center;
  box-shadow: 0 2px 8px var(--accent-shadow);
  transition: opacity 0.15s;
}
.dc-btn-configure:hover { opacity: 0.88; }
/* Inline save email expand */
.dc-save-expand {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.22s ease, margin-top 0.22s ease;
  margin-top: 0;
}
.dc-save-expand.open {
  max-height: 80px;
  opacity: 1;
  margin-top: 8px;
}
.dc-save-row {
  display: flex; gap: 6px; align-items: center;
}
.dc-save-input {
  flex: 1; padding: 8px 11px;
  border: 1.5px solid #E4DED2; border-radius: 3px;
  font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.dc-save-input:focus { border-color: #19D2A9; }
.dc-save-submit {
  padding: 8px 14px;
  background: #19D2A9; border: none; border-radius: 3px;
  color: #fff; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s;
}
.dc-save-submit:hover { opacity: 0.85; }
.dc-save-status { font-size: 11.5px; margin-top: 5px; color: #888; min-height: 16px; }

/* ── Design Card — Price Tiers ── */
.dc-price-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #A09890; text-transform: uppercase;
  margin-bottom: 7px; margin-top: 12px;
}
.dc-price-tiers {
  display: flex; gap: 5px; margin-bottom: 12px;
}
.dc-price-tier {
  flex: 1; padding: 7px 4px 6px;
  border: 1.5px solid #E4DED2; border-radius: 6px;
  text-align: center; cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.dc-price-tier:hover { border-color: var(--accent); }
.dc-price-tier.featured {
  border-color: var(--accent);
  background: #E0FBF5;
}
.dc-price-tier-qty {
  font-size: 10px; font-weight: 600; color: #6B6560;
  line-height: 1.2; margin-bottom: 3px;
}
.dc-price-tier.featured .dc-price-tier-qty { color: #00695C; }
.dc-price-tier-amt {
  font-size: 13px; font-weight: 700; color: #1C1C1C;
  line-height: 1.1;
}
.dc-price-tier.featured .dc-price-tier-amt { color: #007A60; }
.dc-price-tier-unit {
  font-size: 9px; color: #A09890; font-weight: 500;
}
.dc-price-tier.featured .dc-price-tier-unit { color: #00695C; }
/* ── Design Card — Qty Pre-selector Pills ── */
.dc-price-row {
  display: flex; gap: 5px; margin: 10px 0 4px;
}
.dc-price-pill {
  flex: 1; padding: 5px 4px;
  border: 1.5px solid #E4DED2; border-radius: 20px;
  text-align: center; cursor: pointer;
  font-size: 11px; font-weight: 600; color: #6B6460;
  background: #fff; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.dc-price-pill:hover { border-color: var(--accent); color: var(--accent); }
.dc-price-pill.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.dc-price-pill.more {
  border-style: dashed;
  color: #A09890;
  font-size: 10.5px;
}
.dc-price-pill.more:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.dc-price-pill.more.active { background: var(--accent); color: #fff; border-style: solid; }
/* ── Design Card — Configure hint (small teal text link — matches mockup) ── */
.dc-configure-hint {
  display: flex; align-items: center; gap: 5px;
  margin-top: 10px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  transition: opacity 0.15s;
  user-select: none;
}
.dc-configure-hint:hover { opacity: 0.75; }
/* ── Design Card — Trust line ── */
.dc-trust {
  display: flex; align-items: center; gap: 5px;
  margin-top: 9px;
  font-size: 11px; color: #6B6560;
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.4;
}
.dc-trust-check {
  width: 14px; height: 14px; flex-shrink: 0;
  background: #E0FBF5; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 9px; font-weight: 700;
}
/* ── Design Card — Save secondary CTA ── */
.dc-save-cta {
  margin-top: 10px;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px;
  border: 1.5px dashed #D4CFC9; border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dc-save-cta:hover { border-color: var(--accent); background: #F6FFFE; }
.dc-save-cta-icon {
  font-size: 13px; flex-shrink: 0;
}
.dc-save-cta-text {
  flex: 1;
  font-size: 11.5px; font-weight: 500; color: #555;
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.3;
}
.dc-save-cta-text span {
  display: block; font-size: 10px; color: #A09890; font-weight: 400;
}
.dc-save-cta-arrow {
  font-size: 13px; color: #A09890;
}

/* ── Save Design Bar ── */
@keyframes save-pulse {
  0%, 100% { color: #00695C; }
  50% { color: #19D2A9; }
}
/* Save design — collapsed text link that reveals email input on click */
.save-design-trigger {
  margin-top: 10px;
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: #00695C;
  font-family: 'Inter', Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  user-select: none;
  transition: opacity 0.15s;
}
.save-design-trigger.open { color: #00695C; }
.save-design-trigger:hover { opacity: 0.75; }
.save-design-trigger .save-trigger-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-style: normal;
  margin-left: 2px;
}
.save-design-trigger.open .save-trigger-arrow { transform: rotate(90deg); }
.save-design-reveal {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
  margin-top: 0;
}
.save-design-reveal.open {
  max-height: 120px;
  opacity: 1;
  margin-top: 8px;
}
.save-bar-input-row {
  display: flex;
  gap: 6px;
}
.save-bar-hint {
  font-size: 10.5px;
  color: #A09890;
  font-family: 'Inter', Arial, sans-serif;
  margin-bottom: 6px;
  line-height: 1.4;
}
.save-bar-email {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #D9D4CE;
  border-radius: 5px;
  font-size: 12px;
  font-family: 'Inter', Arial, sans-serif;
  background: #fff;
  color: #1C1C1C;
  outline: none;
}
.save-bar-email:focus { border-color: #19D2A9; }
.save-bar-btn {
  padding: 7px 12px;
  background: #19D2A9;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
  white-space: nowrap;
}
.save-bar-btn:hover { background: #00B894; }
.save-bar-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.save-bar-success {
  font-size: 11px;
  color: #00917a;
  font-weight: 500;
  margin-top: 4px;
  font-family: 'Inter', Arial, sans-serif;
}
.save-bar-error {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
  font-family: 'Inter', Arial, sans-serif;
}

/* ── Generating Animation — 4×4 WeMkr logo tile grid + diagonal wave ── */
.design-card-generating {
  position: relative;
  width: 100%;
  height: var(--dc-card-img-h);
  background: #F6F4F1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px 20px 48px;
}

/* Radial mint glow behind the grid — breathes with the wave */
.design-card-generating::before {
  content: '';
  position: absolute;
  width: 340px; height: 260px;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  background: radial-gradient(ellipse, rgba(0,212,170,0.10) 0%, transparent 70%);
  animation: gen-glow 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gen-glow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -54%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -54%) scale(1.1); }
}

.gen-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 32px);
  grid-template-rows: repeat(4, 32px);
  gap: 5px;
  position: relative;
  z-index: 1;
}

/* Diagonal sweep — teal band traveling top-left → bottom-right */
.gen-sweep {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(0,212,170,0.06) 46%,
    rgba(0,212,170,0.12) 50%,
    rgba(0,212,170,0.06) 54%,
    transparent 60%
  );
  animation: sweep-pass 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes sweep-pass {
  0%   { transform: translateX(-65%) translateY(-65%); }
  100% { transform: translateX(65%)  translateY(65%); }
}

.gen-tile {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: block;
  animation: tile-wave 2.8s ease-in-out infinite;
  will-change: opacity, transform, filter;
  /* start invisible & grayscale */
  opacity: 0.07;
  filter: grayscale(1) brightness(0.8);
}
@keyframes tile-wave {
  0%, 8% {
    opacity: 0.07;
    filter: grayscale(1) brightness(0.8);
    transform: scale(1);
    box-shadow: none;
  }
  38% {
    opacity: 0.92;
    filter: grayscale(0) brightness(1.05);
    transform: scale(1.08);
    box-shadow: 0 0 0 1.5px rgba(0,212,170,0.65), 0 4px 14px rgba(0,212,170,0.18);
  }
  62% {
    opacity: 0.32;
    filter: grayscale(0.6) brightness(1.0);
    transform: scale(1.02);
    box-shadow: 0 0 0 1px rgba(0,212,170,0.12);
  }
  100% {
    opacity: 0.07;
    filter: grayscale(1) brightness(0.8);
    transform: scale(1);
    box-shadow: none;
  }
}

.gen-status-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 14px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to top, rgba(246,244,241,1) 45%, rgba(246,244,241,0) 100%);
  z-index: 3;
}

.gen-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: dot-beat 1.4s ease-in-out infinite;
}
@keyframes dot-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.8); }
}

.gen-text-cycler {
  height: 14px;
  overflow: hidden;
  flex: 1;
}
.gen-text-cycler .cycler-track {
  animation: cycle-text 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.gen-text-cycler span {
  display: block;
  height: 14px;
  line-height: 14px;
  font-size: 11px;
  color: #7AA09A;
  font-weight: 500;
  letter-spacing: 0.3px;
}
@keyframes cycle-text {
  0%,  18%  { transform: translateY(0); }
  22%, 40%  { transform: translateY(-14px); }
  45%, 63%  { transform: translateY(-28px); }
  68%, 86%  { transform: translateY(-42px); }
  95%, 100% { transform: translateY(0); }
}

/* Slim indeterminate progress bar */
.gen-progress {
  width: 40px;
  height: 2px;
  background: rgba(0,212,170,0.15);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.gen-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  animation: progress-scan 2.4s ease-in-out infinite;
  transform-origin: left;
}
@keyframes progress-scan {
  0%   { transform: translateX(-100%) scaleX(0.4); }
  50%  { transform: translateX(60%)   scaleX(0.6); }
  100% { transform: translateX(200%)  scaleX(0.4); }
}

/* ── WM-UI-01: Generation progress bar inside typing indicator ──
   Uses distinct class names (.ui01-) to avoid colliding with the
   existing .gen-progress-fill keyframe animation on the generating card. */
.ui01-prog-wrap {
  width: 100%; height: 3px;
  background: #F0EDE8; border-radius: 2px;
  overflow: hidden; margin-top: 10px;
}
.ui01-prog-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #00897B, #26A69A);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.ui01-status-text {
  font-size: 11px; color: #A09890;
  margin-top: 6px; font-style: italic;
}

/* ── Skeleton body shimmer — mirrors .design-card-body height during generation ── */
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-body { padding: 14px 16px 16px; }
.skel-line {
  border-radius: 3px;
  background: linear-gradient(90deg, #E8E4DF 0%, #F0EDE8 50%, #E8E4DF 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
.skel-eyebrow { height: 10px; width: 58%; margin-bottom: 8px; }
.skel-title   { height: 14px; width: 82%; margin-bottom: 12px; }
.skel-pills   { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.skel-pill {
  height: 26px; width: 54px; border-radius: 20px;
  background: linear-gradient(90deg, #E8E4DF 0%, #F0EDE8 50%, #E8E4DF 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
.skel-pill:nth-child(2) { animation-delay: 0.1s; }
.skel-pill:nth-child(3) { animation-delay: 0.2s; }
.skel-pill:nth-child(4) { animation-delay: 0.3s; }
.skel-pill-wide  { width: 62px; }
.skel-pill-small { width: 46px; opacity: 0.6; }
.skel-hint { height: 12px; width: 52%; margin-top: 10px; }

.send-btn.busy { opacity: 0.5; pointer-events: none; }

/* ── CHAT ACTIVE STATE ── */
.center.chat-active {
  overflow: hidden; /* re-applied here only — needed to contain the scrollable chat thread */
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
/* Element ordering: headline & chips first (collapse away), thread fills middle, input at bottom */
.center.chat-active .headline  { order: 0; }
.center.chat-active .chips     { order: 1; }
.center.chat-active #chat-thread { order: 2; }
.center.chat-active .input-card  { order: 3; }
/* Collapse headline and chips */
.center.chat-active .headline,
.center.chat-active .chips {
  max-height: 0 !important;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
/* Chat thread: grow to fill remaining space, scroll within */
.center.chat-active #chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  pointer-events: auto;
  padding: 24px 48px 16px;
  box-sizing: border-box;
  align-self: stretch;
  max-width: 900px;
  margin: 0 auto;
}
/* Input docked to bottom — 60% width, centered */
.center.chat-active .input-card {
  max-width: 60%;
  width: 60%;
  margin: 0 auto 12px;
  border-radius: 4px;
  padding: 14px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* ── RIGHT GALLERY ── */
.gallery {
  background: #F6F4F1;
  border-left: 1px solid #E4DED2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  min-height: 0; /* fix: grid items default to min-height:auto which breaks overflow clipping */
}

.gcol { display: flex; flex-direction: column; gap: 0; min-height: 0; }
.gcol-b { color: inherit; }

.gcard {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  flex-shrink: 0;
  transition: box-shadow 0.2s;
  cursor: pointer;
  margin-bottom: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.gcard:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

.gcard-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gcard-img svg { width: 32px; height: 32px; color: var(--accent); opacity: 0.6; }

.gcard-body { padding: 9px 10px 10px; }
.gcard-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.gcard-text { font-size: 10.5px; color: #777; line-height: 1.4; }

/* ── Seamless infinite scroll via CSS animation ──
   translateY(-50%) moves exactly one 'set' of cards because
   the content is duplicated: total height = 2 × one-set height.
   No JS measurement needed — always pixel-perfect. */
@keyframes scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes scroll-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.gcol { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.gcol-anim-up   { animation: scroll-up   65s linear infinite; }
.gcol-anim-down { animation: scroll-down 53s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .gcol-anim-up, .gcol-anim-down { animation: none; }
}

/* -- FOOTER BAR -- */
.footer-bar {
  grid-column: 1/-1;
  grid-row: 3;
  min-height: 65px;
  background: #F6F4F1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.footer-links { display: flex; align-items: center; gap: 20px; }
.footer-link {
  font-size: 11px;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.footer-link:hover { color: #333; }
.footer-divider { width: 1px; height: 14px; background: #D4CEC9; flex-shrink: 0; }
.footer-socials { display: flex; align-items: center; gap: 16px; }
.footer-social-icon { width: 18px; height: 18px; color: #888; cursor: pointer; transition: color 0.15s; }
.footer-social-icon:hover { color: #333; }
/* Review cards */
.rcard {
  background: #fff;
  border-radius: 2px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  flex-shrink: 0;
  margin-bottom: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.rcard-top { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 7px; }
.rcard-img {
  width: 44px; height: 44px;
  border-radius: 2px;
  background: var(--accent-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rcard-img svg { width: 22px; height: 22px; color: var(--accent); opacity: 0.7; }
.rcard-meta { display: flex; flex-direction: column; gap: 2px; }
.rcard-verified { font-size: 9px; font-weight: 600; color: #2E8B57; letter-spacing: 0.4px; text-transform: uppercase; }
.rcard-product { font-size: 11px; font-weight: 600; color: #000; }
.rcard-stars { font-size: 10px; color: var(--accent); letter-spacing: 1px; }
.rcard-name { font-size: 10px; color: #888; }
.rcard-review { font-size: 10.5px; color: #555; line-height: 1.5; font-style: italic; margin: 0; }

/* ── CATEGORY DOCK ── */
.cat-dock {
  grid-column: 1/-1;
  grid-row: 2;
  background: #F6F4F1;
  border-top: 1px solid #E4DED2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 320px 14px 210px;
}

.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  max-width: 120px;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 2px;
  transition: background 0.15s;
}
.cat-item:hover { background: #F0EDE8; }

.cat-icon {
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1.5px solid #E4DED2;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s;
}
.cat-item:hover .cat-icon { border-color: #D4858A; }
.cat-icon svg { width: 20px; height: 20px; color: #7A726A; }
.cat-item:hover .cat-icon svg { color: #D4858A; }

.cat-name {
  font-size: 10px;
  color: #A89E96;
  font-weight: 500;
  text-align: center;
  transition: color 0.15s;
}
.cat-item:hover .cat-name { color: #D4858A; }

/* ══ CHAT STATE PREVIEW ══ */
.shell-chat {
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 210px 1fr 320px;
  overflow: hidden;
}

.chat-stage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.chat-msgs {
  flex: 1;
  overflow: hidden;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg-ai {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.msg-avatar {
  width: 32px; height: 32px;
  border-radius: 2px;
  background: var(--accent-bg);
  border: 1.5px solid #EDE8E2;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.msg-avatar svg { width: 16px; height: 16px; color: var(--accent); }

.bubble-ai {
  background: #F6F4F1;
  border: 1.5px solid #E4DED2;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: #000;
  max-width: 72%;
  line-height: 1.6;
}

.bubble-user {
  background: var(--accent-bg);
  border: 1.5px solid var(--accent-border);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: #000;
  max-width: 60%;
  margin-left: auto;
  line-height: 1.6;
}

.pin-result {
  background: var(--accent-bg);
  border-radius: 2px;
  padding: 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
}
.pin-img-placeholder {
  width: 168px;
  height: 168px;
  background: var(--accent-bg);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.chat-input-bar {
  padding: 14px 24px 18px;
  border-top: 1px solid #E4DED2;
  background: #F6F4F1;
}
.chat-input-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #E4DED2;
  border-radius: 2px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.chat-input-text { flex: 1; font-size: 13.5px; color: #C4BCB5; }

/* ══════════════════════════════════════════════
   CHECKOUT MODAL — 4-step purchase flow
   Follows wemkr design system: paper/stone/coral
   ══════════════════════════════════════════════ */

.co-overlay {
  position: fixed; inset: 0;
  /* backdrop-filter removed: iOS Safari compositing bug causes co-panel children
     to not paint when backdrop-filter is set on a position:fixed parent. */
  background: rgba(28,20,16,0.72);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
.co-overlay.open { opacity: 1; pointer-events: auto; }

.co-panel {
  background: #fff;
  width: 480px; max-width: calc(100vw - 24px);
  /* 92dvh uses the dynamic viewport height on iOS (excludes address bar) */
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  overflow: hidden;
  /* Force own GPU compositing layer — prevents iOS paint issues inside fixed overlay */
  transform: translateZ(0);
}

/* ── Top bar ── */
.co-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px 12px;
  border-bottom: 1px solid #E4DED2;
  flex-shrink: 0;
  background: #fff;
}
.co-back-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: #888;
  cursor: pointer; border: none; background: none; padding: 0;
  transition: color 0.15s; font-family: inherit;
}
.co-back-btn:hover { color: #2A2A2A; }
.co-back-btn svg { opacity: 0.6; }
.co-steps { display: flex; align-items: center; gap: 0; }
.co-step-node {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #E4DED2;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #C4BCB5;
  transition: all 0.2s; background: #fff;
}
.co-step-node.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.co-step-node.done   { border-color: var(--accent); background: var(--accent); color: #fff; }
.co-step-line {
  width: 22px; height: 1.5px; background: #E4DED2;
  transition: background 0.25s;
}
.co-step-line.done { background: var(--accent); }

/* ── Design strip ── */
.co-design-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid #E4DED2;
  background: #F6F4F1; flex-shrink: 0;
}
.co-thumb {
  width: 58px; height: 58px; border-radius: 3px;
  border: 1.5px solid #E4DED2; object-fit: contain;
  background: #fff; flex-shrink: 0;
}
.co-design-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2px;
}
.co-design-name {
  font-size: 13.5px; font-weight: 600; color: #1C1C1C;
  margin-bottom: 2px; font-family: "DM Serif Display", serif;
}
.co-design-meta { font-size: 11.5px; color: #A09890; }

/* ── Scrollable body ── */
.co-body { padding: 18px 20px; flex: 1; overflow-y: auto; min-height: 0; }
.co-body + .co-body { display: none; }

/* ── Section labels ── */
.co-section {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: #A09890;
  margin: 18px 0 10px; display: block;
}
.co-section:first-child { margin-top: 0; }

/* ── Size pills ─── */
.co-size-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.co-size-pill {
  padding: 6px 13px; border: 1.5px solid #E4DED2;
  border-radius: 3px; font-size: 12.5px; font-weight: 500;
  color: #555; cursor: pointer; background: #fff;
  transition: all 0.12s; font-family: inherit;
}
.co-size-pill:hover { border-color: #aaa; color: #000; }
.co-size-pill.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.co-finish-featured {
  background: rgba(0,212,170,0.08);
  border-color: rgba(0,212,170,0.35);
}
.co-finish-featured.active { background: #19D2A9; border-color: #19D2A9; color: #fff; }
.co-finish-featured.active span:first-child {
  background: #19D2A9 !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
}

/* ruler replaced by circle sizer */

/* ── Quantity grid ── */
.co-qty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.co-qty-btn {
  border: 1.5px solid #E4DED2; border-radius: 3px;
  padding: 9px 4px; text-align: center; cursor: pointer;
  background: #fff; transition: all 0.12s;
  position: relative;
}
.co-qty-btn:hover { border-color: #aaa; }
.co-qty-btn.active { border-color: #19D2A9; background: #19D2A9; color: #fff; }
.co-qty-btn-featured {
  background: rgba(0,212,170,0.08);
  border-color: rgba(0,212,170,0.35);
}
.co-qty-btn-featured.active { background: #19D2A9; border-color: #19D2A9; color: #fff; }
.co-qty-num {
  font-size: 13px; font-weight: 700; color: #1C1C1C; line-height: 1; margin-bottom: 3px;
}
.co-qty-ea { font-size: 10.5px; color: #A09890; }
.co-qty-btn.active .co-qty-num { color: #fff; }
.co-qty-btn.active .co-qty-ea  { color: rgba(255,255,255,0.8); }
.co-qty-popular {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
  background: #19D2A9;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.co-qty-btn.active .co-qty-popular {
  color: #fff;
  background: #19D2A9;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.co-qty-note {
  font-size: 10.5px; color: #B0A89E; margin-top: 7px; font-style: italic;
}

/* ── Order summary box ── */
.co-summary-box {
  border: 1.5px solid #E4DED2; border-radius: 3px; padding: 13px 15px;
}
.co-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: #666; padding: 2px 0;
}
.co-summary-row.total {
  font-size: 14px; font-weight: 700; color: #1C1C1C;
  border-top: 1px solid #E4DED2; margin-top: 8px; padding-top: 9px;
}
.co-summary-row.free-value {
  color: #999;
}
.co-summary-row.free-value .co-strike {
  text-decoration: line-through; color: #bbb; margin-right: 6px; font-size: 11.5px;
}
.co-summary-row.free-value .co-free-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: #19D2A9;
  background: #e6faf5; padding: 1px 7px; border-radius: 10px;
}
.co-summary-row.savings {
  color: #19D2A9; font-weight: 600; font-size: 12px;
  border-top: 1px dashed #d4ece5; margin-top: 6px; padding-top: 7px;
}

/* ── Form fields ── */
.co-field { margin-bottom: 10px; }
.co-field label, .co-field-half label, .co-field-third label {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: #888;
  margin-bottom: 4px;
}
.co-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.co-field input, .co-field select,
.co-field-half input, .co-field-half select,
.co-field-third input, .co-field-third select {
  width: 100%; padding: 9px 11px; box-sizing: border-box;
  border: 1.5px solid #E4DED2; border-radius: 3px;
  font-size: 13.5px; color: #2A2A2A; font-family: inherit;
  background: #fff; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.co-field input:focus, .co-field select:focus,
.co-field-half input:focus, .co-field-half select:focus,
.co-field-third input:focus, .co-field-third select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212,133,138,0.1);
}
.co-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-row-3 { display: grid; grid-template-columns: 1fr 80px 80px; gap: 10px; }
.co-field-half label { display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 4px; }
.co-field-third label { display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 4px; }

/* ── Review step ── */
.co-review-block {
  border: 1.5px solid #E4DED2; border-radius: 3px;
  padding: 13px 15px; margin-bottom: 10px;
}
.co-review-row {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: #555; padding: 2px 0;
}
.co-review-row strong { color: #1C1C1C; }

/* ── Payment placeholder ── */
.co-stripe-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: #F6F4F1;
  border: 1.5px solid #E4DED2; border-radius: 3px; margin-bottom: 14px;
  font-size: 12px; color: #777;
}
.co-stripe-field {
  padding: 10px 11px; border: 1.5px solid #E4DED2; border-radius: 3px;
  background: #FAFAF9; font-size: 13.5px; color: #C4BCB5;
  margin-bottom: 10px; box-sizing: border-box; width: 100%;
}

/* ── Success screen ── */
.co-success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 20px;
}
.co-success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 18px;
}
.co-success-title {
  font-family: "DM Serif Display", serif; font-size: 22px;
  color: #1C1C1C; margin-bottom: 10px;
}
.co-success-text { font-size: 13.5px; color: #666; line-height: 1.6; max-width: 340px; }

/* ── Trust bar ── */
.co-trust {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 20px; border-top: 1px solid #E4DED2;
  background: #F6F4F1; flex-shrink: 0;
}
.co-trust-text { font-size: 11px; color: #888; line-height: 1.45; }

/* ── Footer buttons ── */
.co-footer {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 13px 20px;
  border-top: 1px solid #E4DED2; flex-shrink: 0; background: #fff;
}
.co-btn-back {
  padding: 10px 20px; border: 1.5px solid #E4DED2; border-radius: 3px;
  font-size: 13px; font-weight: 500; color: #666;
  cursor: pointer; background: #fff; font-family: inherit;
  transition: border-color 0.15s;
}
.co-btn-back:hover { border-color: #999; }
.co-btn-next {
  flex: 1; padding: 10px 20px; background: var(--accent);
  border: none; border-radius: 3px; font-size: 13px; font-weight: 700;
  color: #fff; cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 8px var(--accent-shadow); transition: opacity 0.15s;
  letter-spacing: 0.2px;
}
.co-btn-next:hover { opacity: 0.88; }
.co-btn-next:disabled { opacity: 0.4; cursor: default; }


/* ── Refine context bar (shown when user clicks "Refine this design") ── */
.refine-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FEF6F5;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  padding: 7px 12px;
  font-size: 12px;
  color: #555;
  animation: msg-in 0.2s ease both;
}
.refine-bar strong { color: var(--accent); font-weight: 600; }
.refine-bar-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #A09890;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}
.refine-bar-close:hover { color: #555; }


/* ── Circle size visualizer ── */
.co-sizer-wrap { padding: 14px 0 4px; }
.co-sizer-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; /* enough for 3" circle at 80px/in */
  padding: 8px 0;
  position: relative;
}
.co-sizer-circle {
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(212,133,138,0.07);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: width 0.28s cubic-bezier(.4,0,.2,1), height 0.28s cubic-bezier(.4,0,.2,1);
  min-width: 44px; min-height: 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.co-sizer-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.co-sizer-img.loaded { opacity: 1; }
.co-sizer-circle:has(.co-sizer-img.loaded) {
  background: transparent;
}
.co-sizer-label {
  font-size: 11px; line-height: 1.35; color: var(--accent);
  pointer-events: none;
}
.co-sizer-circle:has(.co-sizer-img.loaded) .co-sizer-label {
  color: #fff;
}
.co-sizer-label strong { display: block; font-size: 13px; font-weight: 700; }
.co-sizer-hint {
  text-align: center; font-size: 11.5px; color: #A09890;
  min-height: 16px; padding: 2px 0 6px;
}

/* ── Large review design image ── */
.co-review-render {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 16px;
}
.co-review-render img {
  width: 220px; height: 220px;
  object-fit: contain; border-radius: 4px;
  border: 1.5px solid #E4DED2; background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.co-review-approved {
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px; font-size: 11.5px; font-weight: 600;
  color: #3DAA78; letter-spacing: 0.2px;
}

/* ── "What happens next" steps ── */
.co-next-steps { display: flex; flex-direction: column; gap: 12px; }
.co-next-step {
  display: flex; align-items: flex-start; gap: 12px;
}
.co-next-step-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 1px;
}
.co-next-step strong { display: block; font-size: 12.5px; color: #1C1C1C; margin-bottom: 2px; font-weight: 600; }
.co-next-step p { margin: 0; font-size: 11.5px; color: #888; line-height: 1.45; }

/* ── Remove old ruler CSS (kept for safety, just de-scoped) ── */

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (max-width: 767px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Shell: collapse to single column, hide sidebars ── */
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto auto;
    overflow: hidden;
    flex: 1;
    height: auto;
    min-height: 0;
  }

  /* Hide left nav and right gallery — decorative, break layout at ≤767px */
  .nav     { display: none; }
  .gallery { display: none; }
  .mobile-header-bar { display: flex; }
  .mobile-gallery-strip {
    display: block;
    grid-column: 1/-1;
    grid-row: 2;
    min-height: 96px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chips { display: none !important; }
  /* WM-UI-03: Upload hero zone full-width on mobile */
  .upload-hero-zone {
    max-width: 100%;
    width: 100%;
    padding: 28px 20px;       /* WM-UI-04: match desktop padding bump — don't let mobile override it */
  }
  .cat-dock { grid-row: 3; }
  /* Push notice bar below iPhone status bar — use max() to ensure at least the design-intended spacing */
  .sublabel { padding-top: max(4px, env(safe-area-inset-top, 0px)); }
  /* WM-BUG-17: desktop left:210px/right:320px offset for nav logo+links shifts text off-center on mobile. Reset to 0. */
  .sublabel-msg { left: 0; right: 0; }

  /* WM-UI-03b: Center panel: full width, scrollable so input is never buried behind gallery strip */
  .center {
    padding: 20px 16px 16px;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    align-items: stretch;
  }

  /* Headline: compact on mobile — 18px sits cleanly below the notch bar */
  /* WM-BUG-24: max-height/overflow from desktop base rule clips headline on short phones — override */
  .headline {
    font-size: 18px;
    line-height: 1.25;
    max-width: 100%;
    text-align: center;
    max-height: none;    /* WM-BUG-24: remove desktop 200px clip — collapse handled by input-focused class */
    overflow: visible;   /* WM-BUG-24: ensure no clipping on mobile */
  }

  /* Input card: full width, no max-width constraint */
  .input-card {
    max-width: 100%;
    width: 100%;
  }

  /* Chat input: 16px prevents iOS auto-zoom on focus */
  .input-text {
    font-size: 16px;
    min-height: 44px;
  }

  /* Upload button: 44px tap area */
  .upload-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Send button: 44×44 tap target */
  .send-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* Chips: horizontal scroll on mobile, no wrap */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    max-width: 100%;
    max-height: none;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }

  .chip {
    flex-shrink: 0;
    min-height: 44px;
    align-items: center;
    white-space: nowrap;
  }

  /* ── Chat active state: mobile layout ── */
  .center.chat-active #chat-thread {
    /* WM-BUG-14: 12px was not enough — the last design card's teal Configure button
       was hidden behind the input card on short mobile viewports. 100px ensures the
       full card (incl. actions row) scrolls above the input bar after scrollDown(). */
    padding: 16px 16px 100px;
    max-width: 100%;
    margin: 0;
  }

  /* Input: full width minus side margins */
  .center.chat-active .input-card {
    max-width: calc(100% - 32px);
    width: calc(100% - 32px);
    margin: 0 16px 12px;
  }

  /* Chat bubbles: wider on small screens */
  .msg-user {
    max-width: 88%;
    font-size: 14px;
  }
  .msg-ai        { max-width: 96%; }
  .msg-ai-text   { font-size: 14px; }
  .bubble-user   { max-width: 88%; }
  .bubble-ai     { max-width: 96%; }

  /* ── Design cards: shrink whole card on mobile ── */
  .design-card { width: calc(100% - 25px); margin: 0 auto; }

  .design-card-img { height: calc(var(--dc-card-img-h) + 15px); } /* slightly taller on mobile */

  /* Action buttons: stacked vertically, full width, 44px tap area */
  .design-card-actions {
    flex-direction: column;
    gap: 8px;
  }
  .btn-refine,
  .btn-order {
    width: 100%;
    min-height: 44px;
    padding: 11px 10px;
    font-size: 14px;
  }

  /* Generating animation: slightly smaller tiles on mobile */
  .design-card-generating {
    padding: 14px 16px 44px;
  }
  .gen-logo-grid {
    grid-template-columns: repeat(4, 28px);
    grid-template-rows: repeat(4, 28px);
    gap: 5px;
  }
  .gen-tile { width: 28px; height: 28px; }

  /* ── Category dock: hidden on mobile, replaced by gallery strip ── */
  .cat-dock { display: none; }

  /* ── Footer bar: single column, links wrap ── */
  .footer-bar {
    min-height: 40px;
    height: auto;
    padding: 0 16px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    gap: 0;
    justify-content: center;
  }
  .footer-links {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
  }
  .footer-link {
    font-size: 10px;
    min-height: auto;
    white-space: nowrap;
  }
  .footer-divider { display: none; }
  /* Hide non-essential links on mobile */
  .footer-link:nth-child(n+9) { display: none; } /* Cookie, Blog onward */
  .footer-socials { display: none; }

  /* ── Checkout modal: full-screen on mobile ── */
  .co-overlay {
    align-items: stretch;
    justify-content: stretch;
  }
  .co-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
    /* iOS safe areas: keep checkout content clear of notch + home indicator */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Close/back button: taller touch target */
  .co-back-btn {
    min-height: 44px;
    padding: 0 10px;
  }

  /* Form inputs: 16px prevents iOS auto-zoom */
  .co-field input,
  .co-field select,
  .co-field-half input,
  .co-field-half select,
  .co-field-third input,
  .co-field-third select {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 11px;
  }

  /* Checkout textarea */
  #co-notes {
    font-size: 16px !important;
    min-height: 80px;
  }

  /* City/State/ZIP: city spans full width, state+zip share second row */
  .co-row-3 { grid-template-columns: 1fr 1fr; }
  .co-row-3 > :first-child { grid-column: 1 / -1; }

  /* Quantity grid: 2 columns on mobile */
  .co-qty-grid { grid-template-columns: repeat(2, 1fr); }

  /* Design card price tiers: 2×2 grid on mobile */
  .dc-price-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dc-price-tier { padding: 9px 6px 8px; min-height: 44px; }
  .dc-price-tier-qty { font-size: 11px; }
  .dc-price-tier-amt { font-size: 14px; }
  .dc-price-tier-unit { font-size: 10px; }
  .dc-trust { font-size: 12px; }
  .dc-save-cta { padding: 10px 12px; min-height: 44px; }
  .dc-save-cta-text { font-size: 12.5px; }
  .dc-save-cta-text span { font-size: 11px; }

  /* Footer buttons: full height tap targets */
  .co-btn-next,
  .co-btn-back {
    min-height: 44px;
    font-size: 13.5px;
  }

  /* shell-chat fallback */
  .shell-chat { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (min-width: 768px) and (max-width: 1199px)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {

  /* ── Shell: narrower sidebar columns ── */
  .shell {
    grid-template-columns: 180px 1fr 220px;
  }

  /* ── Center: reduced horizontal padding ── */
  .center {
    padding: 36px 24px;
  }

  /* Chat active: slightly wider input */
  .center.chat-active .input-card {
    max-width: 72%;
    width: 72%;
  }

  /* ── Design card buttons: comfortable height ── */
  .btn-refine,
  .btn-order {
    min-height: 40px;
    font-size: 13px;
  }

  /* ── Cat-dock: align with center column ── */
  .cat-dock { padding: 14px 220px 14px 180px; }

  /* ── Footer: wrap if needed on narrow tablet ── */
  .footer-links {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .footer-divider { display: none; }

  /* ── Checkout: full-width cap for narrow viewports ── */
  .co-panel {
    width: min(480px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
  }

  /* shell-chat fallback */
  .shell-chat { grid-template-columns: 180px 1fr 220px; }
}

/* ══ MOBILE-ONLY COMPONENTS ══ */
.mobile-header-bar{display:none;height:56px;background:#F6F4F1;border-bottom:1px solid #E4DED2;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0}
.mobile-logo-link{display:flex;align-items:center;gap:8px;text-decoration:none}
.m-logo-img{height:28px;width:auto;display:block;object-fit:contain}
.m-logo-fallback{font-family:"DM Serif Display",serif;font-size:17px;color:#000;display:none}
.m-logo-fallback span{color:var(--accent)}
.hamburger-btn{width:40px;height:40px;background:transparent;border:1.5px solid #E4DED2;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0}
.hamburger-btn span{display:block;width:18px;height:1.5px;background:#555;border-radius:2px}
.mobile-drawer-overlay{display:none;position:fixed;inset:0;z-index:200}
.mobile-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.4)}
.mobile-drawer{position:relative;width:280px;height:100%;background:#F6F4F1;border-right:1px solid #E4DED2;display:flex;flex-direction:column;padding:0 0 24px;padding-top:env(safe-area-inset-top, 0px);z-index:1;overflow-y:auto}
.mobile-drawer-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #E4DED2;flex-shrink:0}
.mobile-drawer-close{width:36px;height:36px;border:1.5px solid #E4DED2;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer}
.md-section{padding:20px 12px 0}
.md-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#C4BCB5;padding:0 12px 8px}
.md-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:4px;font-size:14px;color:#444;font-weight:400;cursor:pointer;text-decoration:none}
.md-link:hover{background:#EDEAE5}
.md-link.active{color:var(--accent);font-weight:500}
.md-link svg{width:16px;height:16px;opacity:0.5;flex-shrink:0}
.md-link.active svg{opacity:1}
.md-sub{font-size:13px;color:#888;padding-left:36px;font-weight:400}
.md-divider{height:1px;background:#E4DED2;margin:12px}
.md-spacer{flex:1}
.md-footer{padding:16px;border-top:1px solid #E4DED2;font-size:11px;color:#A89E96}
.md-footer a{color:#00695C;text-decoration:none}
.mobile-gallery-strip{display:none;grid-column:1/-1;overflow:hidden;background:#F6F4F1;border-top:1px solid #E4DED2;padding:8px 0}
.mg-track{display:flex;width:max-content;-webkit-animation:mg-scroll 28s linear infinite;animation:mg-scroll 28s linear infinite;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.mg-group{display:flex;gap:8px;padding-right:8px}
@-webkit-keyframes mg-scroll{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}
@keyframes mg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mg-card{width:80px;border-radius:4px;overflow:hidden;flex-shrink:0;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.08);display:flex;flex-direction:column;cursor:pointer;transition:transform .15s;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.mg-card:active{transform:scale(0.96)}
.mg-card-label{font-size:8.5px;font-weight:500;color:#666;text-align:center;padding:5px 4px 3px;line-height:1.3;background:#fff;flex-shrink:0}
.mg-card-img{width:80px;height:80px;object-fit:cover;display:block}
.pin-popup-overlay{display:none;position:fixed;inset:0;z-index:20000;background:rgba(28,20,16,0.72);align-items:center;justify-content:center}
.pin-popup-sheet{
  width:480px;
  max-width:calc(100vw - 24px);
  max-height:92vh;
  max-height:92dvh;
  background:#fff;
  border-radius:4px;
  box-shadow:0 24px 64px rgba(0,0,0,0.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:24px 24px 28px;
  position:relative;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateZ(0);
}
@media(max-width:767px){
  /* Bottom sheet — slides up from bottom, not full-screen */
  .pin-popup-overlay { align-items: flex-end; justify-content: center; }
  .pin-popup-sheet {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pin-popup-cta { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  /* Image: bigger in the tray but still contained */
  .pin-popup-img {
    width: 100% !important;
    height: auto !important;
    max-height: 48vh;
    object-fit: contain !important;
    padding: 0 !important;
    border-radius: 8px;
  }
}
.pin-popup-close{position:absolute;top:12px;right:16px;width:32px;height:32px;border:1.5px solid #E4DED2;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#888}
#pin-popup-gallery-panel{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding-top:6px}
.pin-popup-img{width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:8px}
.pin-popup-tag{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);align-self:flex-start}
.pin-popup-prompt{font-size:15px;font-weight:400;color:#1C1C1C;text-align:center;line-height:1.6}
.popup-hl{color:var(--accent);font-weight:600}
.input-card.drag-over{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(25,210,169,0.15)!important}
.gcard.dragging{opacity:0.45}
.pin-popup-cta{width:100%;padding:13px;background:var(--accent);border:none;border-radius:4px;font-size:14px;font-weight:600;color:#fff;cursor:pointer;box-shadow:0 2px 10px var(--accent-shadow)}
.pin-popup-testimonial{display:none;width:100%;background:#F6F4F1;border-radius:8px;padding:12px 14px}

/* WM-UI-03d: Upload-mode popup panel */
.pin-popup-upload-panel { display:none; width:100%; flex-direction:column; align-items:center; gap:12px; }
.pin-popup-upload-panel.active { display:flex; }
.pin-popup-upload-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(0,212,170,0.3);
  display: block;
}
.pin-popup-upload-question {
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1C;
  text-align: center;
  line-height: 1.5;
  width: 100%;
}
.pin-popup-upload-textarea {
  width: 100%;
  min-height: 64px;
  border: 1.5px solid #E4DED2;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #1C1C1C;
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.pin-popup-upload-textarea:focus { border-color: var(--accent); }
.pin-popup-upload-textarea::placeholder { color: #C4BCB5; }

/* WM-UI-03d: Input-focused pre-chat collapse */
.center.input-focused .headline { max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; }
.center.input-focused .pre-chat-greeting { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; }
.center.input-focused .upload-hero-zone { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.3s ease; }
.center.input-focused .upload-divider { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease; }
/* Carousel stays visible when input is focused */

/* WM-UI-03e: Smooth entry animation for all chat messages */
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-user, .msg-ai {
  animation: msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* WM-UI-03d: Inline upload row — full tap zone */
.upload-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  cursor: pointer;
  flex: 1;
  padding: 4px 0;
}

/* ══ MOBILE OVERRIDES — must come AFTER component defaults above ══ */
@media (max-width: 767px) {
  .mobile-header-bar { display: flex !important; }
  .mobile-gallery-strip {
    display: block !important;
    grid-column: 1/-1;
    grid-row: 2;
    min-height: 96px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* WM-UI-03e: Pre-chat — headline+upload breathe at top, input docks to bottom */
  .center:not(.chat-active) {
    justify-content: flex-start;
    padding-top: 24px;   /* WM-BUG-24: was 32px — pull headline into view on short phones */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Input card: push to bottom of the flex column via margin-top auto */
  .center:not(.chat-active) .input-card {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
    border-top: 1px solid #E4DED2;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    /* ensure it sits against bottom edge cleanly */
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
  /* Hide non-essential pre-chat elements on mobile — info lives in sublabel bar */
  .center:not(.chat-active) #price-estimate-pill { display: none !important; }
  .center:not(.chat-active) .pre-chat-greeting { display: none !important; }
  /* WM-BUG-24: slightly smaller + tight gap so headline + upload zone fit above docked input */
  .center:not(.chat-active) .headline { font-size: 20px; margin-bottom: 4px; }
  /* Upload zone: ensure full width with some bottom gap before the docked input */
  .center:not(.chat-active) .upload-hero-zone { margin-bottom: 0; }
  .footer-bar { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }

  /* ── Chat-active mobile: input docked at bottom, thread scrolls ── */
  .center.chat-active {
    padding-top: 0;
    position: relative;
  }
  .center.chat-active #chat-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 120px;
    max-width: 100%;
    margin: 0;
  }
  .center.chat-active .input-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #E4DED2;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    z-index: 50;
    box-sizing: border-box;
  }
  /* Hide gallery strip + footer when chat is active */
  .center.chat-active ~ .mobile-gallery-strip,
  .shell:has(.center.chat-active) .mobile-gallery-strip {
    display: none !important;
  }
  .shell:has(.center.chat-active) .footer-bar {
    display: none !important;
  }

  /* Return banner — mobile */
  #return-banner { max-width: 100%; overflow: visible; cursor: pointer; }
  .rb-inner { flex-wrap: wrap; }
  .rb-actions { display: none !important; }
  .center.chat-active #return-banner { margin-bottom: 80px; }

  /* Price chips — compact on mobile */
  .chip { min-height: 32px !important; height: auto; padding-top: 6px; padding-bottom: 6px; }

  /* Trust section — visible on mobile */
  .trust-section { display: flex; }
}

/* ── RETURN SESSION BANNER ── */
#return-banner { display: none; width: 100%; max-width: 500px; background: #fff; border: 1.5px solid #E4DED2; border-radius: 4px; box-shadow: 0 3px 14px rgba(0,0,0,0.08); overflow: hidden; position: relative; }
#return-banner.visible { display: block; animation: banner-slide-in 0.4s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes banner-slide-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
#return-banner::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, rgba(0,212,170,0.3) 100%); }
.rb-inner { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
.rb-thumb { width: 72px; height: 72px; flex-shrink: 0; background: #F6F4F1; border-radius: 3px; border: 1px solid #E4DED2; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rb-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.rb-content { flex: 1; min-width: 0; }
.rb-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.rb-title { font-size: 14px; font-weight: 600; color: #1C1C1C; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-sub { font-size: 12px; color: #A09890; margin-bottom: 12px; }
.rb-actions { display: flex; gap: 8px; }
.rb-continue { flex: 1; padding: 9px 10px; background: var(--accent); border: none; border-radius: 3px; font-size: 12.5px; font-weight: 600; color: #fff; cursor: pointer; box-shadow: 0 2px 8px var(--accent-shadow); transition: opacity 0.15s; font-family: inherit; }
.rb-continue:hover { opacity: 0.88; }
.rb-fresh { flex: 1; padding: 9px 10px; border: 1.5px solid #E4DED2; border-radius: 3px; font-size: 12.5px; font-weight: 500; color: #555; cursor: pointer; background: #fff; font-family: inherit; transition: border-color 0.15s; }
.rb-fresh:hover { border-color: #999; }
.rb-dismiss { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #C4BCB5; border-radius: 2px; transition: color 0.15s, background 0.15s; }
.rb-dismiss:hover { color: #888; background: #F6F4F1; }


@keyframes pill-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── PROMPT TAG CHIPS — 3-stage prompt builder ── */
/* WM-UI-03b: pt-section permanently hidden — chips unused in current alpha */
.pt-section { display: none !important; }
.center.chat-active .pt-section { display: none; }
.pt-label {
  font-size: 11.5px;
  font-weight: 500;
  color: #6b6460;
  line-height: 1.4;
  padding-left: 22px;
  transition: opacity 0.15s ease;
}
.pt-label em { font-style: normal; color: var(--accent); font-weight: 600; }
.pt-strip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-arrow {
  width: 20px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid #E4DED2;
  border-radius: 3px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #A09890;
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
  user-select: none;
  padding: 0;
}
.pt-arrow.dim { opacity: 0.28; pointer-events: none; }
.pt-arrow.teal { color: var(--accent); border-color: var(--accent); }
.pt-strip {
  flex: 1;
  overflow-x: auto;
  display: flex;
  gap: 7px;
  scrollbar-width: none;
}
.pt-strip::-webkit-scrollbar { display: none; }

/* contenteditable input */
#chat-input[contenteditable] {
  min-height: 48px;
  max-height: 120px;
  overflow-y: auto;
  outline: none;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  color: #2A2A2A;
}
#chat-input[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: #C4BCB5;
  pointer-events: none;
}
.chip-accent { color: var(--accent); font-weight: 500; }
.cursor-placeholder {
  display: inline-block;
  background: var(--accent-bg);
  border-radius: 4px;
  color: var(--accent);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  padding: 4px 12px 7px;
  vertical-align: middle;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Prompt tag breadcrumb — selected stage chips shown above strip */
.pt-breadcrumb {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-left: 22px;
}
.pt-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--accent-bg);
  border: 1.5px solid rgba(0,212,170,0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.pt-crumb button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.6;
}
.pt-crumb button:hover { opacity: 1; }

/* ── DESIGN ATTRIBUTE CHIPS (Task 3 — Gallery) ── */
#design-chips-ui {
  display: none;
  padding: 0;
}
#design-chips-ui.visible { display: block; }
.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.attr-chip {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 80px;
}
.attr-chip:hover { border-color: #555; }
.attr-chip.editing { border-color: #00c9b1; padding: 6px 10px; }
.chip-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 3px;
}
.chip-value {
  font-size: 13px;
  color: #eee;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
.chip-edit-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: #00c9b1;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  width: 120px;
  padding: 0;
}
.chip-design-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: #00c9b1;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0d0d0d;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.chip-design-btn:hover { opacity: 0.88; }
.chip-escape-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #555;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
}
.chip-escape-link:hover { color: #888; }

/* ── Newsletter signup modal ── */
.nl-overlay{position:fixed;inset:0;background:rgba(44,36,30,0.52);backdrop-filter:blur(5px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.22s ease}
.nl-overlay.open{opacity:1;pointer-events:auto}
.nl-card{background:#fff;border-radius:4px;padding:28px 24px 22px;width:480px;max-width:calc(100vw - 24px);position:relative;box-shadow:0 24px 64px rgba(0,0,0,0.22)}
.nl-close{position:absolute;top:12px;right:14px;background:none;border:none;cursor:pointer;color:#aaa;font-size:20px;line-height:1;padding:4px 8px;transition:color 0.15s;font-family:inherit}
.nl-close:hover{color:#333}
.nl-logo{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.nl-logo img{width:24px;height:24px}
.nl-logo span{font-size:12px;font-weight:600;color:#2A2A2A;letter-spacing:0.4px}
.nl-heading{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:#2A2A2A;margin-bottom:5px;line-height:1.2}
.nl-sub{font-size:13px;color:#888;margin-bottom:20px;line-height:1.55}
.nl-input-wrap{display:flex;gap:8px}
.nl-input{flex:1;border:1.5px solid #E4DED2;border-radius:3px;padding:9px 12px;font-size:13px;font-family:Inter,sans-serif;color:#2A2A2A;outline:none;transition:border-color 0.15s;min-width:0}
.nl-input:focus{border-color:var(--accent)}
.nl-btn{background:var(--accent);color:#fff;border:none;border-radius:2px;padding:9px 18px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:Inter,sans-serif;transition:opacity 0.15s;flex-shrink:0;box-shadow:0 2px 8px var(--accent-shadow)}
.nl-btn:hover{opacity:0.88}
.nl-btn:disabled{opacity:0.5;cursor:default}
.nl-error{font-size:12px;color:#C04040;margin-top:8px;min-height:16px}
.nl-success{display:none;text-align:center;padding:8px 0 4px}
.nl-success-icon{width:44px;height:44px;background:var(--accent-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.nl-success h3{font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:#2A2A2A;margin-bottom:5px}
.nl-success p{font-size:13px;color:#888;line-height:1.55}

/* ── TRUST SECTION ── */
.trust-section {
  display: none;
  background: #F6F4F1;
  border-top: 1px solid #E4DED2;
  padding: 32px 20px 40px;
  flex-direction: column;
  gap: 0;
}
.trust-block {
  padding: 24px 0;
  border-bottom: 1px solid #E4DED2;
}
.trust-block:last-child { border-bottom: none; }
.trust-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.trust-steps { display: flex; flex-direction: column; gap: 16px; }
.trust-step { display: flex; align-items: flex-start; gap: 14px; }
.trust-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.trust-step-body { display: flex; flex-direction: column; gap: 2px; }
.trust-step-body strong { font-size: 14px; font-weight: 600; color: #1C1C1C; }
.trust-step-body span { font-size: 13px; color: #6B6560; line-height: 1.5; }
.trust-brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1C;
  margin-bottom: 10px;
}
.trust-brand-desc {
  font-size: 13px;
  color: #6B6560;
  line-height: 1.6;
  margin: 0;
}
.trust-contact-link {
  display: block;
  font-size: 14px;
  color: #1C1C1C;
  text-decoration: none;
  padding: 6px 0;
}
.trust-contact-ext {
  color: var(--accent);
  font-weight: 500;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════
   CHECKOUT MODAL — two-panel desktop + bottom sheet mobile
   CSS from mockup-desktop.html adapted for concepts.html
   ═══════════════════════════════════════════════════════ */

/* ── Modal container ── */
.co-checkout {
  width: 860px; max-width: calc(100vw - 40px);
  max-height: 90vh;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  display: flex; overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.co-overlay.open .co-checkout { transform: scale(1) translateY(0); }

/* ── Left panel ── */
.co-panel-left {
  width: 380px; flex-shrink: 0;
  background: #F6F4F1;
  border-right: 1px solid #E4DED2;
  display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #E4DED2 transparent;
}
.co-panel-left::-webkit-scrollbar { width: 4px; }
.co-panel-left::-webkit-scrollbar-thumb { background: #E4DED2; border-radius: 4px; }

/* ── Design image ── */
.co-modal-img {
  height: 270px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: hidden;
}
.co-modal-img-inner {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.co-modal-img-inner img {
  display: block; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
}
.co-btn-refine {
  position: absolute; bottom: 10px; left: 10px;
  padding: 7px 13px; border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: #333;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.15s;
}
.co-btn-refine:hover { background: #fff; }
.co-btn-zoom {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; font-weight: 300; color: #333;
  transition: background 0.15s;
}
.co-btn-zoom:hover { background: #fff; }

/* ── Left panel sections ── */
.co-lsec { padding: 14px 18px 12px; }
.co-lsec.border-top { border-top: 1px solid #E4DED2; }
.co-lsec.backing { padding: 0 18px 14px; }
.co-lsec.notes { padding: 14px 18px 18px; border-top: 1px solid #E4DED2; }

/* ── Section labels ── */
.co-sec-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #A09890; margin-bottom: 7px;
}
.co-hint-text {
  font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 9px; color: #bbb;
}

/* ── Size strip ── */
.co-size-strip-wrap { display: flex; align-items: center; gap: 5px; }
.co-size-arrow {
  width: 22px; height: 28px; flex-shrink: 0;
  border: 1.5px solid #E4DED2; border-radius: 3px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #A09890; font-size: 15px; line-height: 1;
  transition: border-color 0.15s, color 0.15s; user-select: none;
}
.co-size-arrow.dim { opacity: 0.28; pointer-events: none; }
.co-size-arrow.teal { color: var(--accent); border-color: var(--accent); }
.co-size-strip {
  flex: 1; min-width: 0; display: flex; gap: 7px; overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.co-size-strip::-webkit-scrollbar { display: none; }
.co-size-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 12px; background: #fff;
  border: 1.5px solid #E4DED2; border-radius: 3px;
  color: #6B6460; font-size: 12.5px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.15s; white-space: nowrap;
}
.co-size-chip:hover { border-color: var(--accent); color: var(--accent); }
.co-size-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(0,212,170,0.25);
}
.co-size-chip-mm { font-size: 9px; font-weight: 400; opacity: 0.75; }
.co-size-chip.active .co-size-chip-mm { opacity: 0.85; }

/* ── Sizer ring ── */
.co-sizer-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 12px 0 6px;
}
.co-sizer-ring {
  border-radius: 50%; border: 2.5px solid var(--accent);
  position: relative; overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), height 0.25s cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0; background: #F6F4F1;
}
.co-sizer-ring img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.co-sizer-label { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.3px; }
.co-sizer-hint { font-size: 11px; color: #A09890; text-align: center; line-height: 1.4; }

/* ── Backing ── */
.co-backing-row { display: flex; gap: 7px; }
.co-backing-pill {
  flex: 1; padding: 10px 8px; border-radius: 8px;
  border: 1.5px solid #E4DED2; background: #fff;
  text-align: center; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #6B6460;
  position: relative; line-height: 1.35;
  transition: all 0.15s;
}
.co-backing-pill:hover { border-color: var(--accent); }
.co-backing-pill.active { border-color: var(--accent); background: #E0FBF5; color: var(--accent); }
.co-backing-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 8px; font-weight: 700;
  padding: 2px 6px; border-radius: 20px; white-space: nowrap; text-transform: uppercase;
}
.co-backing-hint { font-size: 9.5px; color: #bbb; margin-top: 2px; font-weight: 400; display: block; }

/* ── Notes ── */
.co-notes-field {
  width: 100%; padding: 9px 11px;
  border: 1.5px solid #E4DED2; border-radius: 8px;
  font-size: 12.5px; font-family: inherit; color: #1C1C1C;
  resize: vertical; outline: none; background: #fff;
  line-height: 1.4; min-height: 64px;
  transition: border-color 0.15s; box-sizing: border-box;
}
.co-notes-field:focus { border-color: var(--accent); }
.co-notes-hint { font-size: 10.5px; color: #A09890; margin-top: 5px; line-height: 1.4; }

/* ── Right panel ── */
.co-panel-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Right panel header ── */
.co-config-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid #E4DED2;
  flex-shrink: 0; position: relative;
}
.co-modal-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.co-modal-title {
  font-size: 17px; font-weight: 700; color: #1C1C1C;
  line-height: 1.25; padding-right: 36px;
}
.co-close-btn {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #E4DED2; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; color: #A09890;
  transition: border-color 0.15s; font-family: inherit;
}
.co-close-btn:hover { border-color: #A09890; color: #1C1C1C; }

/* ── Right scroll ── */
.co-config-scroll {
  flex: 1; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #E4DED2 transparent;
  padding: 20px 24px 0;
  display: flex; flex-direction: column; gap: 18px;
}
.co-config-scroll::-webkit-scrollbar { width: 4px; }
.co-config-scroll::-webkit-scrollbar-thumb { background: #E4DED2; border-radius: 4px; }

/* ── Finish pills ── */
.co-finish-row { display: flex; gap: 8px; padding-top: 10px; }
.co-finish-pill {
  flex: 1; padding: 9px 12px; text-align: center;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1.5px solid #E4DED2; color: #A09890;
  cursor: pointer; transition: all 0.15s; position: relative;
  font-family: inherit;
}
.co-finish-pill:hover { border-color: var(--accent); color: var(--accent); }
.co-finish-pill.active { border-color: var(--accent); background: #E0FBF5; color: var(--accent); }

/* ── Pill badge ── */
.co-pill-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 8px; font-weight: 700;
  padding: 2px 6px; border-radius: 20px; white-space: nowrap; text-transform: uppercase;
  pointer-events: none;
}
.co-pill-badge.soft {
  background: #E0FBF5; color: var(--accent); border: 1px solid rgba(0,212,170,0.4);
}

/* ── Qty primary 4-col grid ── */
.co-qty-primary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  padding-top: 10px;
}
.co-qty-cell {
  background: #F6F4F1; border: 1.5px solid #E4DED2;
  border-radius: 8px; padding: 9px 8px; text-align: center;
  cursor: pointer; transition: all 0.15s; position: relative;
}
.co-qty-cell:hover { border-color: var(--accent); }
.co-qty-cell.active { background: #E0FBF5; border-color: var(--accent); }
.co-qc-qty { font-size: 10px; font-weight: 600; color: #A09890; }
.co-qty-cell.active .co-qc-qty { color: var(--accent); }
.co-qc-price { font-size: 15px; font-weight: 800; color: #1C1C1C; line-height: 1.1; }
.co-qc-unit { font-size: 9px; color: #A09890; margin-top: 1px; }

/* ── Qty secondary ── */
.co-qty-secondary { display: flex; gap: 6px; margin-top: 6px; }
.co-qty-pill-sm {
  flex: 1; padding: 7px 6px; text-align: center;
  border-radius: 8px; font-size: 11.5px; font-weight: 600;
  border: 1.5px solid #E4DED2; color: #6B6460; background: #fff;
  cursor: pointer; line-height: 1.3; transition: all 0.15s;
}
.co-qty-pill-sm:hover { border-color: var(--accent); }
.co-qty-pill-sm.active { border-color: var(--accent); background: #E0FBF5; color: var(--accent); }
.co-qps-qty { font-size: 11px; }
.co-qps-price { font-size: 10.5px; color: #A09890; font-weight: 500; }
.co-qty-pill-sm.active .co-qps-price { color: var(--accent); }

/* B1+B2: Price anchor in Screen 1 footer — populated by JS from live pricingGrid */
.co-s1-price-anchor {
  font-size: 11.5px; color: #6B6460; text-align: center;
  padding: 6px 0 10px;
  min-height: 1em;
}
/* B7: Post-checkout-button hint */
.co-checkout-hint {
  font-size: 11px; color: #A09890; text-align: center; margin-top: 6px; line-height: 1.4;
}
/* Qty confirm strip on Screen 1 — info only */
.co-qty-confirm {
  padding: 6px 0 10px;
  border-bottom: 1px solid #E4DED2;
  margin-bottom: 10px;
}
.co-qty-confirm-text {
  font-size: 12.5px; color: #6B6460; display: block;
}
.co-qty-confirm-text strong { color: #1C1C1C; font-weight: 700; }

/* ── Custom qty ── */
.co-qty-custom-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #F6F4F1;
  border: 1.5px dashed #E4DED2; border-radius: 8px;
}
.co-qty-custom-label { font-size: 12px; color: #A09890; font-weight: 500; white-space: nowrap; }
.co-qty-custom-input {
  flex: 1; border: 1.5px solid #E4DED2; border-radius: 5px;
  padding: 5px 8px; font-size: 13px; font-weight: 600;
  color: #1C1C1C; background: #fff; font-family: inherit;
  outline: none; min-width: 0;
}
.co-qty-custom-unit { font-size: 11px; color: #A09890; white-space: nowrap; }

/* ── Check rows ── */
.co-check-row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: 8px;
}
.co-check-row input {
  margin-top: 2px; flex-shrink: 0; accent-color: var(--accent);
  width: 14px; height: 14px; cursor: pointer;
}
.co-check-label { font-size: 12.5px; color: #1C1C1C; line-height: 1.5; }
.co-check-label strong { color: var(--accent); }
.co-check-row.discount { background: #E0FBF5; border: 1.5px solid rgba(0,212,170,0.3); }
.co-check-row.ack { background: #FEFCF9; border: 1.5px solid #D4A574; position: relative; }
.co-ack-badge {
  position: absolute; top: -8px; right: 10px;
  background: #FEFCF9; padding: 0 5px;
  font-size: 8px; font-weight: 700; color: #c0392b;
  letter-spacing: 0.5px; text-transform: uppercase;
  border: 1px solid #D4A574; border-radius: 3px;
}

/* ── Modal sticky footer ── */
.co-modal-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid #E4DED2;
  flex-shrink: 0; background: #fff;
}

/* ── Price breakdown card ── */
.co-price-breakdown {
  background: #fff; border: 1.5px solid #E4DED2;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.co-pb-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: #1C1C1C;
}
.co-pb-row.muted { font-size: 13px; color: #A09890; }
.co-pb-hint { font-size: 11px; color: #A09890; font-weight: 400; margin-left: 4px; }
.co-pb-val { font-weight: 600; }
.co-pb-total {
  font-size: 16px; font-weight: 700; color: var(--accent);
  padding-top: 8px; border-top: 1px solid #E4DED2; margin-top: 2px;
}
.co-pb-total .co-pb-val { font-size: 16px; font-weight: 700; color: var(--accent); }
.co-pb-est { font-size: 11px; font-weight: 400; color: #A09890; margin-left: 3px; }
/* empty state */
.co-ptl { font-size: 12px; color: #A09890; padding: 4px 0; }

/* ── Footer: two buttons ── */
.co-footer-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.co-btn-add-cart {
  flex: 1; padding: 13px 10px; border-radius: 8px;
  border: 1.5px solid var(--accent); background: #E0FBF5;
  color: var(--accent); font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}
.co-btn-add-cart:hover { background: var(--accent); color: #fff; }
.co-btn-pay {
  flex: 1; padding: 13px 10px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(0,212,170,0.28);
  transition: opacity 0.15s;
}
.co-btn-pay:hover { opacity: 0.9; }
.co-btn-pay:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Footer sub: trust ── */
.co-footer-sub {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.co-trust-line {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #00A882; font-weight: 500;
}
.co-stripe-lock {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #A09890; font-weight: 500;
}

/* ── Error block ── */
.co-error {
  display: none; padding: 8px 12px;
  background: #FFF0F0; border: 1px solid #FFCCCC;
  border-radius: 6px; font-size: 12px; color: #C0392B;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 767px) {
  .co-overlay { align-items: flex-end; }

  /* WM-BUG-15: use dvh so iOS browser chrome doesn't eat into the sheet height.
     overflow:hidden clips children to rounded corners; flex children handle their own scroll. */
  .co-checkout {
    width: 100%; max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92vh; max-height: 92dvh;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  }
  .co-overlay.open .co-checkout { transform: translateY(0); }

  /* WM-BUG-15: Panel left — flex:1 + min-height:0 gives it a real height constraint
     so overflow-y:auto activates and .co-cta-1 sticky works correctly. */
  .co-panel-left {
    width: 100%;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .co-panel-left:not(.active) { display: none; }

  /* WM-BUG-15: Panel right — same pattern. overflow:hidden so co-config-scroll
     can scroll independently while co-modal-footer stays pinned at bottom. */
  .co-panel-right {
    width: 100%;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .co-panel-right:not(.active) { display: none; }

  /* WM-BUG-15: Page 2 scroll area — must fill remaining space and scroll */
  .co-config-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 0; gap: 14px;
  }

  /* WM-BUG-15: Page 2 footer — never grows, never scrolls away */
  .co-modal-footer {
    flex-shrink: 0;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 16px));
    border-top: 1px solid #E4DED2;
    background: #fff;
  }

  .co-modal-img { height: 200px; padding: 18px; }
  .co-config-header { padding: 14px 16px 12px; }
  .co-modal-title { font-size: 14px; }
  .co-qty-primary { grid-template-columns: repeat(2, 1fr); }
  .co-lsec { padding: 12px 16px 10px; }
  .co-lsec.backing { padding: 0 16px 12px; }
  .co-lsec.notes { padding: 0; } /* accordion on mobile — now lives inside co-cta-1 */
  /* Notes inside the CTA footer: flush with footer padding, border below to sep from button */
  .co-cta-1 .co-lsec.notes {
    border-bottom: 1px solid #E4DED2;
    margin-bottom: 10px;
  }
  .co-notes-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; cursor: pointer; user-select: none; -webkit-user-select: none;
  }
  .co-notes-toggle .co-sec-label { margin-bottom: 0; }
  .co-notes-chevron {
    transition: transform 0.22s ease; color: #A09890; flex-shrink: 0;
  }
  .co-notes-chevron.open { transform: rotate(180deg); }
  .co-notes-body {
    overflow: hidden; max-height: 0;
    transition: max-height 0.25s ease, padding-bottom 0.25s ease;
  }
  .co-notes-body.open { max-height: 180px; padding-bottom: 14px; }

  /* WM-BUG-15: Disable textarea resize on mobile — prevents layout breaks */
  .co-notes-field { resize: none; }

  /* WM-BUG-15: Cap sizer ring — at 3" the ring was 331px tall, overflowing the panel.
     220px is large enough to read while keeping backing pills visible below it. */
  .co-sizer-ring {
    max-width: 220px !important;
    max-height: 220px !important;
  }

  /* Drag handle */
  .co-drag-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: #D4CFC9; margin: 10px auto 0; flex-shrink: 0;
  }
  /* Mobile topbar on panel-right */
  .co-mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 10px; border-bottom: 1px solid #E4DED2;
    flex-shrink: 0;
  }
  .co-mobile-back {
    background: none; border: none; cursor: pointer;
    color: #6B6460; display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; font-family: inherit; padding: 0;
  }
  .co-mobile-heading { font-size: 13px; font-weight: 700; color: #1C1C1C; }
  .co-mobile-step { font-size: 11px; color: #A09890; margin-left: auto; }
  /* Mobile: hide desktop header on right panel */
  .co-config-header { display: none; }
  /* Screen 1 CTA — sticky so it's always visible while panel-left scrolls */
  .co-cta-1 {
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 16px)); border-top: 1px solid #E4DED2;
    flex-shrink: 0; background: #fff;
    position: sticky; bottom: 0; z-index: 10;
  }
  .co-btn-screen-next {
    width: 100%; padding: 14px; border-radius: 8px; border: none;
    background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
    font-family: inherit; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,212,170,0.28);
  }
  .co-cta-trust {
    text-align: center; font-size: 11px; color: #00A882; font-weight: 500;
    margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 5px;
  }
}

/* ── Desktop: centered modal ── */
@media (min-width: 768px) {
  .co-overlay { align-items: center; justify-content: center; }
  .co-checkout { flex-direction: row; }
  .co-panel-left { display: flex !important; }
  .co-panel-right { display: flex !important; }
  .co-drag-handle { display: none; }
  .co-mobile-topbar { display: none; }
  /* co-cta-1 contains notes — show on desktop, hide mobile-only CTA children */
  .co-cta-1 {
    position: static;         /* not sticky on desktop */
    border-top: 1px solid #E4DED2;
    padding: 0 24px 20px;
    background: transparent;
  }
  .co-cta-1 .co-btn-screen-next { display: none; }  /* mobile-only CTA */
  .co-cta-1 .co-cta-trust      { display: none; }  /* mobile-only trust */
  .co-cta-1 .co-lsec.notes { border-bottom: none; margin-bottom: 0; }

  /* WM-UI-03: Upload-first hero elements are mobile-only — hide on desktop */
  .upload-hero-zone,
  .upload-staged-zone,
  .upload-divider,
  .pre-chat-greeting { display: none !important; }
}

/* ── Trailing block — was at end of concepts.html (lines 8596–8611) ── */
/* WM-UI-03b: Greeting typewriter cursor */
.greeting-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: cursor-blink 0.9s steps(1) infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}