/* ============================================================
 * ConceptStoreAI · P4 styles
 * Loaded last — coexists with p3-override.css tokens.
 * Uses --bg, --paper, --ink, --muted, --line, --blue, --orange,
 * --blue-soft, --orange-soft, --blue-deep, etc.
 * ============================================================ */

/* ─── Generic primitives ─────────────────────────────────── */
.p4-page { max-width: 1240px; margin: 0 auto; padding: 32px 28px 80px; }
.p4-page-title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.p4-page-sub  { font-size: 14px; color: var(--muted); margin: 0 0 24px; line-height: 1.55; }
.p4-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }

.p4-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 16px; align-items: center; }
.p4-crumbs a { color: var(--muted); }
.p4-crumbs span { opacity: 0.55; }

.p4-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.p4-card-soft { background: var(--bg-soft, #F1F3F6); border: none; }
.p4-card-head { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.p4-card-head-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }

.p4-muted { color: var(--muted); font-size: 12.5px; }
.p4-link  { color: var(--ink); font-size: 13px; cursor: pointer; }
.p4-link-blue { color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.p4-link-blue:hover { text-decoration: underline; }

.p4-row-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Buttons */
.p4-btn       { padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--ink); transition: background .15s, border-color .15s; display: inline-flex; gap: 6px; align-items: center; justify-content: center; line-height: 1; }
.p4-btn-blue  { background: var(--blue); color: #fff; }
.p4-btn-blue:hover { background: var(--blue-deep); }
.p4-btn-soft  { background: var(--blue-soft); color: var(--blue-deep); }
.p4-btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.p4-btn-ghost:hover { background: var(--bg); }
.p4-btn-block { display: flex; width: 100%; padding: 14px 18px; }
.p4-btn-text  { background: none; color: var(--ink); padding: 8px 14px; font-weight: 600; }
.p4-btn-text:hover { background: var(--bg); border-radius: 8px; }

/* Pills / tags */
.p4-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.p4-pill-blue   { background: var(--blue-soft); color: var(--blue-deep); }
.p4-pill-orange { background: var(--orange-soft); color: var(--orange-deep); }
.p4-pill-violet { background: #ECE6FF; color: #5A3FE0; }
.p4-pill-soft   { background: var(--bg); color: var(--muted); }

/* Toggles */
.p4-toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.p4-toggle-row + .p4-toggle-row { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 4px; }
.p4-toggle-icon { width: 22px; text-align: center; color: var(--muted); }
.p4-toggle-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.p4-toggle { width: 36px; height: 20px; border-radius: 999px; background: #D7D9E0; position: relative; transition: background .15s; flex-shrink: 0; }
.p4-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.p4-toggle.on { background: var(--blue); }
.p4-toggle.on::after { left: 18px; }

/* Avatar */
.p4-avatar { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff; font-weight: 700; font-size: 14px; }
.p4-avatar-blue   { background: var(--blue); }
.p4-avatar-orange { background: var(--orange); }

/* Chips — see canonical definition below (~line 230) under advisor;
   .p4-chip is shared between advisor follow-up suggestions, help-center
   tag filters, and pickup-screen filters. */

/* Toast */
.p4-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.p4-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Three-column app layout (advisor / support) ───────── */
.p4-app { display: grid; grid-template-columns: 260px 1fr 320px; height: calc(100vh - 150px); min-height: 480px; background: var(--bg); overflow: hidden; }
.p4-app.support { grid-template-columns: 320px 1fr; }
/* When the sidebar is hidden (first-time / single empty chat), collapse to 2-col */
.p4-app.no-side { grid-template-columns: 1fr 320px; }
/* Tablet — rail moves below thread; sidebar narrows. */
@media (max-width: 1100px) {
  .p4-app { grid-template-columns: 220px 1fr; }
  .p4-app.no-side { grid-template-columns: 1fr; }
  .p4-rail { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); }
}
/* Phone — single column, sidebar hides entirely (use + New from header). */
@media (max-width: 720px) {
  .p4-app, .p4-app.no-side { grid-template-columns: 1fr; }
  .p4-side { display: none; }
  .p4-thread { padding: 18px 14px; }
  .p4-composer { padding: 12px 14px; }
  .p4-bubble-row { max-width: 92%; }
  .p4-rec-grid { grid-template-columns: 1fr 1fr; }
}
.p4-side { background: var(--paper); border-right: 1px solid var(--line); padding: 20px 16px; overflow-y: auto; }
.p4-side-cta { width: 100%; padding: 10px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); margin-bottom: 18px; }
.p4-side-cta:hover { background: var(--bg); }
.p4-side-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); padding: 4px 12px; margin-bottom: 6px; }
.p4-side-list { display: flex; flex-direction: column; gap: 2px; }
/* Sidebar chat row — flex with title + reveal-on-hover delete × */
.p4-side-row {
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px 0 12px; border-radius: 8px; font-size: 13px;
  color: var(--ink); cursor: pointer; position: relative;
}
.p4-side-row:hover { background: var(--bg); }
.p4-side-row.active { background: var(--bg); font-weight: 700; }
.p4-side-row-link {
  flex: 1; min-width: 0; padding: 9px 0;
  color: inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: inherit;
}
.p4-side-row-del {
  width: 22px; height: 22px; border-radius: 5px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px; line-height: 1;
  display: grid; place-items: center; flex-shrink: 0;
  opacity: 0;             /* hidden by default */
  transition: opacity .12s, background .12s, color .12s;
}
.p4-side-row:hover .p4-side-row-del { opacity: 1; }
.p4-side-row-del:hover { background: #fee; color: #c33; }
.p4-side-row-del:focus { opacity: 1; outline: 2px solid var(--blue); outline-offset: -1px; }

.p4-ticket-row { display: flex; gap: 10px; align-items: center; padding: 12px; }
.p4-ticket-lang { font-family: 'JetBrains Mono', monospace; background: var(--blue-soft); color: var(--blue-deep); font-size: 10px; padding: 3px 7px; border-radius: 5px; font-weight: 700; flex-shrink: 0; }
.p4-ticket-body { flex: 1; min-width: 0; overflow: hidden; }
.p4-ticket-title { font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p4-ticket-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p4-ticket-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

.p4-main {
  display: flex; flex-direction: column;
  min-width: 0;
  /* CRITICAL: without min-height: 0 the inner .p4-thread (flex:1; overflow-y:auto)
     can't actually shrink — its intrinsic content height becomes this column's
     floor, the column overflows the grid track, and .p4-app { overflow: hidden }
     hides the bottom (composer + most of thread). With min-height: 0, the column
     is allowed to be shorter than its content, and thread's overflow-y: auto
     finally activates. */
  min-height: 0;
}
/* Same fix for the grid children themselves — grid items default to a
   min-content min-size, which keeps them at intrinsic height even when
   the grid track is shorter. */
.p4-app > * { min-height: 0; min-width: 0; }
.p4-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.p4-header-text { flex: 1; min-width: 0; }
.p4-header-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.p4-header-sub { font-size: 12px; color: var(--muted); }

/* v3.5.4: per-chat message-cap badge in the header. Three states. */
.p4-cap-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line);
  cursor: default; user-select: none;
}
.p4-cap-badge-warn {
  background: #fffbeb; color: #92400e; border-color: #fde68a;
}
.p4-cap-badge-full {
  background: #fef2f2; color: #991b1b; border-color: #fecaca;
}

/* Capacity notices (warn / full).
 * - Warn: thin amber strip ABOVE the composer.
 * - Full: full panel REPLACING the composer, with a new-chat CTA.  */
.p4-cap-notice {
  background: var(--paper); border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5;
  padding: 10px 24px;
}
.p4-cap-notice-warn {
  background: #fffbeb; color: #92400e; border-top-color: #fde68a;
}
.p4-cap-notice-full {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px;
  background: #fef2f2; color: #991b1b; border-top-color: #fecaca;
}
.p4-cap-notice-full strong { font-weight: 700; display: block; margin-bottom: 2px; }
.p4-cap-notice-sub { font-size: 12.5px; color: #b54312; }
.p4-cap-notice-full .p4-btn { flex-shrink: 0; }

.p4-thread {
  flex: 1; padding: 28px 24px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 16px; background: var(--bg);
  /* Don't propagate wheel events to the page body when user hits the
     top/bottom of the thread — prevents accidentally scrolling away
     from the chat while flicking through messages. */
  overscroll-behavior: contain;
  /* Smooth out programmatic scroll-to-bottom transitions. */
  scroll-behavior: smooth;
}

.p4-bubble-row { display: flex; gap: 10px; max-width: 75%; }
.p4-bubble-row-user { margin-left: auto; }
.p4-bubble-row-ai .p4-avatar { width: 32px; height: 32px; font-size: 13px; }
.p4-bubble-row-ai { max-width: 85%; }
.p4-bubble-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.p4-bubble { padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.p4-bubble-user { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; max-width: 100%; }
.p4-bubble-ai   { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.p4-bubble p { margin: 0 0 10px; }
.p4-bubble p:last-child { margin: 0; }

/* v3.5.4: Markdown rendering inside AI bubbles — tables, lists, bold/italic, code. */
.p4-bubble .p4-md-table,
.p4-bubble table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;       /* long product names → table scrolls within bubble */
  margin: 8px 0 12px;
  border-collapse: collapse;
  font-size: 13px;
  -webkit-overflow-scrolling: touch;
}
.p4-bubble .p4-md-table th,
.p4-bubble .p4-md-table td,
.p4-bubble table th,
.p4-bubble table td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;    /* keep cells one-line so the scroll works correctly */
}
.p4-bubble .p4-md-table thead th,
.p4-bubble table thead th {
  background: var(--bg);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
}
.p4-bubble .p4-md-table tbody tr:nth-child(even),
.p4-bubble table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.015);
}
.p4-bubble .p4-md-list,
.p4-bubble ul {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.p4-bubble .p4-md-list li,
.p4-bubble ul li { margin: 2px 0; }
.p4-bubble strong { font-weight: 700; }
.p4-bubble em { font-style: italic; }
.p4-bubble .p4-md-code,
.p4-bubble code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.p4-translate-tag { font-size: 11px; color: var(--muted); margin-top: 6px; padding-left: 4px; }

/* Thinking-state animated dots — replaces static "thinking…" text. */
.p4-bubble-thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.p4-thinking-dots { display: inline-flex; gap: 4px; }
.p4-thinking-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  animation: p4Dot 1.2s ease-in-out infinite;
}
.p4-thinking-dots i:nth-child(2) { animation-delay: .16s; }
.p4-thinking-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes p4Dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.p4-thinking-label { font-size: 13px; }

/* Error bubble — amber tint with inline retry button. */
.p4-bubble-error { background: #FFF7E6; border-color: #F0B868; color: #6B4A0E; }
.p4-btn-link { background: none; border: none; color: var(--blue); font-weight: 700; cursor: pointer; padding: 0 2px; text-decoration: underline; font-size: inherit; }
.p4-btn-link:hover { color: var(--blue-deep); }

/* Empty state — large clickable prompt tiles, not just placeholder text. */
/* Empty-state — top-anchored compact layout so composer stays visible
   without scrolling. Previously margin:auto centered it vertically,
   pushing the composer below the fold. */
.p4-empty { margin: 24px auto 16px; text-align: center; max-width: 640px; padding: 12px 20px; }
.p4-empty-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-size: 22px; font-weight: 800; margin: 0 auto 10px; }
.p4-empty h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; }
.p4-empty p { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.45; }
.p4-prompt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.p4-prompt-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
  font-family: inherit; text-align: left;
}
.p4-prompt-tile:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,111,235,0.10); }
.p4-prompt-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--blue); }
.p4-prompt-q { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.p4-prompt-hint { font-size: 11px; color: var(--muted); line-height: 1.3; }

@media (max-width: 720px) {
  .p4-prompt-grid { grid-template-columns: 1fr; }
}

.p4-composer { background: var(--paper); border-top: 1px solid var(--line); padding: 18px 24px; }
.p4-composer-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.p4-composer-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-softer); }
.p4-composer-plus { color: var(--muted); font-size: 16px; font-weight: 700; }
.p4-composer-row input {
  flex: 1; border: none !important; outline: none; font-size: 14px;
  background: transparent !important; color: var(--ink);
  padding: 0 !important;     /* outer .p4-composer-row owns the padding */
  border-radius: 0 !important;
  box-shadow: none !important;
}
.p4-composer-row input:focus { box-shadow: none !important; }
.p4-composer-row input:disabled { opacity: 0.5; cursor: not-allowed; }
.p4-composer-row .p4-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.p4-suggest-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.p4-lang-row { display: flex; gap: 16px; align-items: center; padding: 0 4px 12px; flex-wrap: wrap; font-size: 13px; }
.p4-lang-label { color: var(--muted); margin-right: 8px; }
.p4-lang-tab { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 0; font-weight: 600; }
.p4-lang-tab.active { color: var(--blue); border-bottom: 2px solid var(--blue); }

/* Recommendation cards inside ai bubble.
   Two-zone card: art (with progressive fallback overlay) + body (name/price/actions). */
.p4-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.p4-rec-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.p4-rec-card:hover { transform: translateY(-1px); border-color: var(--blue); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.p4-rec-art {
  display: block;
  aspect-ratio: 1; position: relative; overflow: hidden; cursor: pointer;
  background: var(--bg);
}
/* Background placeholder (colored gradient) — sits behind the image so it
   shows through during load and if the image fails. */
.p4-rec-art-bg { position: absolute; inset: 0; }
.p4-rec-art-bg svg { width: 100%; height: 100%; }
.p4-rec-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.p4-rec-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.p4-rec-name { font-weight: 700; font-size: 13.5px; color: var(--ink); cursor: pointer; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p4-rec-name:hover { color: var(--blue); }
.p4-rec-tag { font-size: 11.5px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.p4-rec-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.p4-rec-price { font-weight: 800; font-size: 14px; color: var(--ink); }
.p4-rec-rating { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.p4-rec-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.p4-btn-rec-add { padding: 6px 10px; font-size: 11.5px; flex: 1; min-width: 0; }
.p4-btn-rec-add:disabled { opacity: 0.65; cursor: default; }

/* Square icon button (wishlist heart, etc) */
.p4-btn-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: 14px; display: grid; place-items: center;
  transition: color .15s, background .15s, border-color .15s;
  flex-shrink: 0;
}
.p4-btn-icon:hover { color: #E33; border-color: #FBC; background: #FFF5F7; }
.p4-btn-icon-sm {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--blue-soft); border: none; color: var(--blue-deep);
  cursor: pointer; font-size: 15px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s;
}
.p4-btn-icon-sm:hover { background: var(--blue); color: #fff; }

/* Follow-up chip strip under the latest AI message */
.p4-followup-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-left: 4px; }
.p4-followup-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.p4-chip {
  padding: 6px 12px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line); font-size: 12px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s;
  font-family: inherit;
}
.p4-chip:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-deep); }
.p4-chip.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-deep); }

/* Right rail (advisor) — running list of products from the chat */
.p4-rail { background: var(--paper); border-left: 1px solid var(--line); overflow-y: auto; }
.p4-rail-pad { padding: 22px 18px; }
.p4-rail-title { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.p4-rail-count {
  background: var(--blue-soft); color: var(--blue-deep);
  border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800;
}
.p4-rail-empty { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.p4-rail-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.p4-rail-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; transition: background .15s; }
.p4-rail-row:hover { background: var(--bg); }
.p4-rail-art {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  position: relative; display: block; background: var(--bg); cursor: pointer;
}
.p4-rail-art .p4-rec-art-bg { position: absolute; inset: 0; }
.p4-rail-art .p4-rec-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.p4-rail-info { flex: 1; min-width: 0; }
.p4-rail-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: block; }
.p4-rail-name:hover { color: var(--blue); }
.p4-rail-price { font-size: 12.5px; color: var(--muted); }
.p4-rail-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 12px; border-top: 1px solid var(--border-soft);
  font-size: 13px; color: var(--ink);
}
.p4-rail-total strong { font-size: 15px; font-weight: 800; }
.p4-rail-savings { background: var(--blue-soft); color: var(--blue-deep); padding: 10px 12px; border-radius: 10px; margin: 4px 0 12px; font-size: 12px; line-height: 1.5; }
.p4-rail-savings strong { display: block; font-size: 13px; margin-bottom: 1px; }
.p4-btn-block:disabled { opacity: 0.65; cursor: default; }

/* ─── Help center ─────────────────────────────────────── */
.p4-help-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.p4-help-search-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.p4-help-search { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: 14px; }
.p4-help-search span { color: var(--muted); font-size: 18px; }
.p4-help-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--ink); }
.p4-help-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.p4-help-results { display: flex; flex-direction: column; gap: 8px; }
.p4-help-item { background: var(--bg); border-radius: 10px; padding: 12px 16px; }
.p4-help-item summary { font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; list-style: none; }
.p4-help-item summary::-webkit-details-marker { display: none; }
.p4-help-item[open] summary { color: var(--blue-deep); }
.p4-help-a { font-size: 13px; line-height: 1.6; color: var(--ink2); margin-top: 8px; }
.p4-help-meta { font-size: 11px; color: var(--muted); margin-top: 6px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.p4-help-empty { text-align: center; padding: 32px 16px; color: var(--muted); font-size: 13.5px; }

.p4-help-side { display: flex; flex-direction: column; gap: 14px; }
.p4-help-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.p4-help-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.p4-help-card-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-help-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.p4-help-link { color: var(--blue); font-weight: 600; font-size: 13.5px; display: inline-block; margin-top: 4px; }

/* ─── Passkey ─────────────────────────────────────────── */
.p4-passkey { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 90px); background: var(--bg); }
.p4-passkey-left { padding: 80px 60px; background: linear-gradient(160deg, var(--blue-softer), var(--bg)); display: flex; flex-direction: column; justify-content: center; }
.p4-passkey-left h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; margin: 16px 0 16px; }
.p4-passkey-left p { font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 380px; }
.p4-passkey-left .p4-pill { align-self: flex-start; }
.p4-passkey-right { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; max-width: 480px; }
.p4-passkey-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--blue); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.p4-passkey-email { font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 26px; cursor: text; }
.p4-passkey-emailInput { display: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; margin-bottom: 26px; outline: none; }
.p4-passkey-emailInput:focus { border-color: var(--blue); }
.p4-passkey-prompt { background: var(--blue-softer); border: 1px solid var(--blue); border-radius: 16px; padding: 32px 24px; text-align: center; margin-bottom: 22px; }
.p4-passkey-fingerprint { width: 56px; height: 56px; border-radius: 999px; background: var(--paper); border: 2px solid var(--blue); color: var(--blue); display: grid; place-items: center; font-size: 24px; margin: 0 auto 16px; }
.p4-passkey-prompt-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.p4-passkey-prompt-sub { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.p4-passkey-waiting { font-size: 12.5px; color: var(--blue); font-weight: 600; }
.p4-passkey-or { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.p4-passkey-or::before, .p4-passkey-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.p4-passkey-or span { font-size: 12px; color: var(--muted); }
.p4-passkey-alt { padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; margin-bottom: 10px; }
.p4-passkey-alt:hover { background: var(--bg); }
.p4-passkey-alt-text { background: none; border: none; color: var(--ink); padding: 12px; font-size: 14px; cursor: pointer; }
.p4-passkey-alt-text:hover { text-decoration: underline; }
.p4-passkey-footer { background: var(--bg); padding: 12px 14px; border-radius: 10px; font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.p4-passkey-prompt-success { background: #DCF7E8 !important; border-color: #22C39A !important; }

/* ─── Account-style two-column layout (Family) ────────── */
.p4-acct-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
.p4-acct-side { display: flex; flex-direction: column; gap: 2px; }
.p4-acct-side-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); padding: 6px 0 8px; }
.p4-acct-side-row { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.p4-acct-side-row:hover { background: var(--bg); }
.p4-acct-side-row.active { background: var(--blue-soft); color: var(--blue-deep); font-weight: 700; }

.p4-acct-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.p4-acct-rail { display: flex; flex-direction: column; gap: 16px; }

/* ─── Family ──────────────────────────────────────────── */
.p4-fam-list { display: flex; flex-direction: column; gap: 8px; }
.p4-fam-member { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; }
.p4-fam-member:hover { background: var(--bg); }
.p4-fam-info { flex: 1; min-width: 0; }
.p4-fam-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-fam-role { font-weight: 500; font-size: 12px; color: var(--muted); }
.p4-fam-right { text-align: right; }
.p4-fam-pending { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--border-soft); margin-top: 10px; flex-wrap: wrap; font-size: 12.5px; }

.p4-fam-approval { padding: 12px; }
.p4-fam-approval + .p4-fam-approval { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 4px; }
.p4-fam-approval-card { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--bg); border-radius: 10px; margin: 8px 0 12px; }
.p4-fam-approval-card .p4-rec-art { width: 40px; height: 40px; }
.p4-fam-approval-card .p4-rec-name { font-size: 13.5px; }

/* ─── Subscriptions ───────────────────────────────────── */
.p4-sub-groups { display: flex; flex-direction: column; gap: 6px; }
.p4-sub-group { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.p4-sub-group:first-child { border-top: none; padding-top: 4px; }
.p4-sub-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; flex-wrap: wrap; }
.p4-sub-group-head strong { font-size: 15px; color: var(--ink); }
.p4-sub-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.p4-sub-row .p4-rec-art { width: 36px; height: 36px; }
.p4-sub-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.p4-sub-price { font-weight: 700; font-size: 13.5px; color: var(--ink); }

.p4-stat-big { font-size: 36px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; line-height: 1.1; }
.p4-spark { margin-top: 14px; }

.p4-freq-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.p4-freq-chip { padding: 10px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 600; cursor: pointer; }
.p4-freq-chip.active { background: var(--blue-softer); border-color: var(--blue); color: var(--blue-deep); }

/* ─── Pickup ────────────────────────────────────────────
   v3.9.14-hotfix25 — page chrome + bounded layout. The page used to be
   full-bleed with no header, making the map dominate the entire viewport
   and hiding any way back out. Now wrapped in a centered shell with a
   sticky header (back link + title + close), tighter sidebar/map ratio,
   and a height cap so the map doesn't span the whole screen. */
.p4-pickup-page { padding: 0; max-width: 1280px; margin: 0 auto; }
.p4-pickup-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.p4-pickup-back, .p4-pickup-close {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--bg); color: var(--ink);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.p4-pickup-back:hover, .p4-pickup-close:hover {
  background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue);
}
.p4-pickup-close { margin-left: auto; padding: 8px 12px; min-width: 36px; justify-content: center; }
.p4-pickup-title {
  flex: 1; text-align: center;
  font-size: 16px; font-weight: 700;
  color: var(--ink); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p4-pickup-grid {
  display: grid; grid-template-columns: 420px 1fr;
  height: calc(100vh - 64px - 56px); /* viewport minus site header minus pickup header */
  min-height: 480px; max-height: 760px;
}
.p4-pickup-side { padding: 20px 22px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; }
.p4-pickup-hint {
  margin: 0 0 12px; padding: 8px 10px;
  background: var(--bg); border-radius: 8px;
  font-size: 11.5px; color: var(--muted);
}
.p4-pickup-addr { font-size: 22px; font-weight: 800; color: var(--ink); margin: 4px 0 14px; letter-spacing: -0.01em; }
.p4-pickup-filters { display: flex; gap: 8px; margin: 14px 0 18px; flex-wrap: wrap; }
.p4-pickup-list { display: flex; flex-direction: column; gap: 6px; }
.p4-pickup-row { display: flex; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; align-items: flex-start; }
.p4-pickup-row:hover { background: var(--bg); }
.p4-pickup-row.active { background: var(--blue-softer); }
.p4-pickup-pin-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.p4-pickup-row.active .p4-pickup-pin-mark { background: var(--blue); color: #fff; }
.p4-pickup-info { flex: 1; min-width: 0; }
.p4-pickup-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.p4-pickup-meta { font-size: 12.5px; color: var(--blue); font-weight: 600; margin-top: 2px; }
.p4-pickup-dist { font-size: 12px; color: var(--muted); flex-shrink: 0; }

/* Map */
.p4-pickup-map { position: relative; background: #EBEFF6; overflow: hidden; }
.p4-map-canvas { position: absolute; inset: 0; }
.p4-map-grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(135deg, #DCE3EE 0%, #E8EEF6 100%);
  background-size: 120px 120px, 120px 120px, 100% 100%;
}
.p4-map-park { position: absolute; left: 60%; top: 28%; width: 24%; height: 30%; background: #DCEFE0; border-radius: 16px; }
.p4-map-water { position: absolute; right: -10%; bottom: -10%; width: 70%; height: 40%; background: #C8DBEE; border-radius: 50% 50% 0 0 / 80% 80% 0 0; transform: rotate(-12deg); }
.p4-map-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; }
.p4-map-pin-bg { width: 12px; height: 12px; background: var(--ink); border-radius: 999px; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.p4-map-pin-label { display: inline-block; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.p4-map-pin.active .p4-map-pin-label { background: var(--blue); }
.p4-map-pin.active .p4-map-pin-bg { background: var(--blue); }
.p4-map-me { position: absolute; width: 16px; height: 16px; background: var(--blue); border: 3px solid #fff; border-radius: 999px; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(31,111,235,0.18); }
.p4-map-popover { position: absolute; bottom: 32px; left: 32px; right: 32px; max-width: 480px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; box-shadow: 0 16px 40px rgba(0,0,0,0.12); z-index: 500; }
.p4-map-popover .p4-pickup-pin-mark { background: var(--blue-soft); }
.p4-map-pop-info { min-width: 0; }
.p4-map-pop-actions { grid-column: 1 / -1; display: flex; gap: 8px; }

/* v3.9.14-hotfix21 — Leaflet custom-pin markers.
   Replaces the CSS-fake pin (.p4-map-pin) with a divIcon that Leaflet
   positions via lat/lng. iconAnchor is set so the dot lines up at the
   physical lat/lng, with the pill label sitting above it. .leaflet-popup
   z-index needs to clear our overlay popover (z 500). */
.csa-leaf-icon { background: transparent !important; border: none !important; }
.csa-leaf-pin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink, #0b0f19); color: #fff;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transform: translate(-50%, calc(-100% - 6px));  /* anchor pill above the lat/lng dot */
  transition: background 120ms;
}
.csa-leaf-pin-dot { font-size: 9px; line-height: 1; }
.csa-leaf-pin-label { line-height: 1; }
.csa-leaf-pin-active {
  background: var(--blue, #1f6feb);
  box-shadow: 0 4px 14px rgba(31,111,235,0.4);
}
/* Leaflet's tile container needs to fill the map host */
#leafletMap.leaflet-container { background: #EBEFF6; font-family: inherit; }
/* v3.9.14-hotfix26 — Leaflet panes default to z-index 200-700 which is
   high enough to punch through other modal overlays in the app. Scope
   them to a local stacking context so they live entirely inside
   #pickupMap and don't compete with checkout/lightbox z-indices. */
.p4-pickup-map { position: relative; isolation: isolate; z-index: 0; }
.p4-pickup-map .leaflet-pane,
.p4-pickup-map .leaflet-top,
.p4-pickup-map .leaflet-bottom { z-index: auto; }
[data-theme="dark"] #leafletMap.leaflet-container { background: #131726; }

/* ─── Review (deep dive) ─────────────────────────────── */
.p4-review { max-width: 1100px; }
.p4-review-head { margin-bottom: 22px; }
.p4-review-head h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.022em; color: var(--ink); line-height: 1.1; margin: 12px 0 18px; }
.p4-review-author { display: flex; align-items: center; gap: 12px; }
.p4-review-author .p4-avatar { width: 40px; height: 40px; }
.p4-author-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-review-actions { margin-left: auto; display: flex; gap: 8px; }

.p4-review-hero { width: 100%; aspect-ratio: 2.5 / 1; border-radius: 18px; overflow: hidden; margin: 0 0 28px; }

.p4-review-body { display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
.p4-review-toc { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.p4-toc-link { padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.p4-toc-link:hover { color: var(--ink); background: var(--bg); }
.p4-toc-link.active { color: var(--blue); border-left: 2px solid var(--blue); padding-left: 10px; font-weight: 700; }
.p4-toc-score { margin-top: 18px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }

.p4-review-prose { font-size: 16px; line-height: 1.7; color: var(--ink2); max-width: 720px; }
.p4-review-prose h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 36px 0 14px; }
.p4-review-prose p  { margin: 0 0 16px; }
.p4-review-list { padding-left: 20px; }
.p4-review-list li { margin-bottom: 8px; }
.p4-review-cta { display: flex; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }

.p4-freq-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 18px 0 24px; }
.p4-freq-chart { margin: 14px 0 8px; }
.p4-freq-legend { display: flex; gap: 20px; font-size: 12.5px; color: var(--muted); }
.p4-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.p4-dot-blue   { background: var(--blue); }
.p4-dot-violet { background: #7C5CFF; }

/* ─── PDP injections (Subscribe & save, Deep dive teaser) ─── */
.p4-pdp-subscribe { margin: 16px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.p4-pdp-sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p4-pdp-sub-radio { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: all .15s; position: relative; }
.p4-pdp-sub-radio input { position: absolute; opacity: 0; pointer-events: none; }
.p4-pdp-sub-radio.active { border-color: var(--blue); background: var(--blue-softer); }
.p4-pdp-sub-title { font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p4-pdp-sub-price { font-weight: 800; font-size: 18px; color: var(--ink); }
.p4-pdp-sub-radio.active .p4-pdp-sub-price { color: var(--blue-deep); }
.p4-pdp-sub-meta { font-size: 12.5px; color: var(--muted); padding: 0 4px; }

.p4-pdp-deepdive { margin: 36px 0; }
.p4-deepdive-row { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center; padding: 4px; border-radius: 12px; cursor: pointer; }
.p4-deepdive-row:hover { background: var(--bg); }
.p4-deepdive-art { aspect-ratio: 2.5/1; border-radius: 12px; overflow: hidden; }
.p4-deepdive-info > * + * { margin-top: 6px; }
.p4-deepdive-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.p4-deepdive-score { font-size: 13px; color: var(--blue); font-weight: 700; }

/* ─── Checkout pickup option ──────────────────────────── */
.p4-co-pickup { margin: 14px 0 24px; }
.p4-co-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.p4-co-toggle { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 13px; }
.p4-co-toggle.active { border-color: var(--blue); background: var(--blue-softer); }
.p4-co-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.p4-co-toggle strong { font-size: 13.5px; color: var(--ink); }
.p4-co-toggle .p4-muted { font-size: 12px; }
.p4-co-pickup-info { flex: 1; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 980px) {
  .p4-app { grid-template-columns: 1fr; }
  .p4-app .p4-side { display: none; }
  .p4-app .p4-rail { display: none; }
  .p4-help-grid { grid-template-columns: 1fr; }
  .p4-acct-layout { grid-template-columns: 1fr; }
  .p4-acct-grid { grid-template-columns: 1fr; }
  .p4-passkey { grid-template-columns: 1fr; }
  .p4-passkey-left { padding: 40px 28px; }
  .p4-passkey-right { padding: 24px 28px 60px; }
  /* v3.9.14-hotfix25 — on narrow viewports stack vertically. Header collapses
     title to hidden when there's no room (back+close still visible). */
  .p4-pickup-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, 50vh) 1fr;
    height: auto; max-height: none;
  }
  .p4-pickup-side { max-height: none; border-right: none; border-top: 1px solid var(--line); }
  .p4-pickup-header { padding: 10px 14px; gap: 8px; }
  .p4-pickup-title { font-size: 14px; }
  .p4-review-body { grid-template-columns: 1fr; }
  .p4-review-toc { position: static; flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
  .p4-toc-score { display: none; }
}

@media (max-width: 640px) {
  .p4-page { padding: 20px 16px 60px; }
  .p4-page-title { font-size: 24px; }
  .p4-rec-grid { grid-template-columns: 1fr; }
  .p4-co-toggle-row { grid-template-columns: 1fr; }
  .p4-pdp-sub-row { grid-template-columns: 1fr; }
  .p4-deepdive-row { grid-template-columns: 1fr; }
  .p4-deepdive-art { aspect-ratio: 16/9; }
  /* Hide title on very narrow screens — back/close are enough chrome */
  .p4-pickup-title { display: none; }
}

/* ─── Dark mode handled by tokens ─────────────────────── */
[data-theme="dark"] .p4-pickup-map { background: #131726; }
[data-theme="dark"] .p4-map-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #1A1F32 0%, #131726 100%);
}
[data-theme="dark"] .p4-map-park { background: #1F3225; }
[data-theme="dark"] .p4-map-water { background: #1A2A3D; }

/* ─── Additional P4 components ─────────────────────────── */
.p4-skeleton { height: 80px; background: linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%); background-size: 200% 100%; animation: p4-shimmer 1.4s linear infinite; border-radius: 12px; margin-bottom: 12px; }
@keyframes p4-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Note: .p4-bubble-thinking canonical definition is earlier in this file —
   uses animated dots, not italic text. Don't redefine here. */

/* Passkey extras */
.p4-passkey-emailInput-visible { display: block; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; outline: none; background: var(--paper); color: var(--ink); }
.p4-passkey-emailInput-visible:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-softer); }

/* Notification badge */
.p4-notif-badge { display: inline-block; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; min-width: 16px; text-align: center; }
.p4-notif-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.p4-notif-row:last-child { border-bottom: none; }
.p4-notif-row.unread { background: var(--blue-softer); padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.p4-notif-info { min-width: 0; }
.p4-notif-title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.p4-notif-time { font-size: 11.5px; color: var(--muted); }

/* Group buy + bargain shared list */
.p4-gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.p4-gb-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; cursor: pointer; }
.p4-gb-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.p4-gb-art { aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.p4-gb-info > * + * { margin-top: 6px; }
.p4-gb-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-gb-pricing { display: flex; gap: 8px; align-items: baseline; }
.p4-gb-price-now { font-weight: 800; font-size: 17px; color: var(--orange-deep); }
.p4-gb-price-old { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.p4-gb-meta { display: flex; gap: 8px; align-items: center; }
.p4-gb-bar { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.p4-gb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--blue)); border-radius: 999px; transition: width .3s; }

/* Group buy detail */
.p4-gb-detail { display: grid; grid-template-columns: 360px 1fr; gap: 36px; align-items: start; }
.p4-gb-hero { aspect-ratio: 1; border-radius: 18px; overflow: hidden; }
.p4-gb-detail-info > * + * { margin-top: 14px; }
.p4-gb-detail-title { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.p4-gb-pricing-large { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.p4-gb-pricing-large .p4-gb-price-now { font-size: 28px; }
.p4-gb-progress { font-size: 13px; color: var(--muted); }
.p4-gb-members { display: flex; gap: 6px; flex-wrap: wrap; }
.p4-avatar-empty { background: var(--bg-soft) !important; color: var(--faint); border: 1px dashed var(--line); }

/* Bargain detail */
.p4-bargain-card { max-width: 540px; margin: 0 auto; background: linear-gradient(180deg, #FFE3CC, #FFF6EE 60%, var(--paper)); border-radius: 24px; padding: 28px; }
.p4-bargain-hero { text-align: center; }
.p4-bargain-thumb { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 16px; overflow: hidden; }
.p4-bargain-hero h1 { font-size: 22px; font-weight: 800; margin: 0 0 14px; color: var(--ink); }
.p4-bargain-prices { display: flex; gap: 10px; justify-content: center; align-items: baseline; margin-bottom: 14px; }
.p4-bargain-now { font-size: 38px; font-weight: 800; color: var(--orange-deep); letter-spacing: -0.02em; }
.p4-bargain-was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.p4-bargain-helps { background: var(--paper); border-radius: 14px; padding: 16px; margin: 22px 0; }
.p4-bargain-help { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.p4-bargain-help:first-of-type { border-top: none; }
.p4-bargain-help .p4-avatar { width: 32px; height: 32px; font-size: 13px; }
.p4-bargain-help-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.p4-bargain-help-amt { font-weight: 700; color: var(--orange-deep); }

/* Invite */
.p4-invite-hero { background: linear-gradient(160deg, #1F6FEB, #0E4FB8); color: #fff; padding: 36px 28px; border-radius: 24px; text-align: center; }
.p4-invite-hero .p4-pill { background: rgba(255,255,255,0.18); color: #fff; }
.p4-invite-hero h1 { font-size: 30px; font-weight: 800; margin: 14px 0 10px; letter-spacing: -0.02em; }
.p4-invite-hero p  { color: rgba(255,255,255,0.85); font-size: 14px; margin: 0 0 22px; }
.p4-invite-code { background: rgba(255,255,255,0.12); border: 1px dashed rgba(255,255,255,0.4); border-radius: 14px; padding: 18px; margin: 18px auto; max-width: 360px; }
.p4-invite-code-label { font-size: 11px; letter-spacing: 0.12em; opacity: 0.7; }
.p4-invite-code-value { font-size: 32px; font-weight: 800; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; margin: 8px 0 14px; }
.p4-invite-code .p4-btn { background: #fff; color: var(--blue-deep); }
.p4-invite-progress { max-width: 360px; margin: 18px auto 0; }
.p4-invite-progress-head { display: flex; gap: 10px; align-items: baseline; justify-content: center; margin-bottom: 8px; }
.p4-invite-progress-head strong { font-size: 28px; font-weight: 800; }
.p4-invite-progress-head .p4-muted { color: rgba(255,255,255,0.7); }
.p4-invite-progress .p4-gb-bar { background: rgba(255,255,255,0.2); }
.p4-invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.p4-invite-stats > div { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; }
.p4-invite-stats strong { display: block; font-size: 24px; font-weight: 800; }
.p4-invite-stats .p4-muted { color: rgba(255,255,255,0.7); font-size: 12px; }

/* Story feed */
.p4-story-loading { width: 100%; height: 80vh; background: #0B0F19; }
.p4-story-screen { position: fixed; inset: 0; z-index: 100; color: #fff; overflow: hidden; }
.p4-story-segs { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 4; }
.p4-story-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 999px; }
.p4-story-seg.active { background: rgba(255,255,255,0.95); }
.p4-story-seg.done   { background: rgba(255,255,255,0.7); }
.p4-story-head { position: absolute; top: 30px; left: 16px; right: 16px; display: flex; gap: 10px; align-items: center; z-index: 4; }
.p4-story-handle { font-weight: 700; }
.p4-story-x { background: none; border: none; color: #fff; font-size: 22px; margin-left: auto; cursor: pointer; }
.p4-story-art { position: absolute; inset: 0; display: grid; place-items: center; }
.p4-story-caption { position: absolute; left: 16px; right: 96px; bottom: 110px; font-size: 16px; line-height: 1.5; z-index: 4; }
.p4-story-tags { margin-top: 10px; font-size: 12px; opacity: 0.7; }
.p4-story-product { position: absolute; left: 16px; right: 96px; bottom: 24px; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; z-index: 4; cursor: pointer; }
.p4-story-product .p4-rec-art { width: 48px; height: 48px; border-radius: 8px; }
.p4-story-product .p4-rec-name { color: #fff; font-weight: 700; font-size: 14px; }
.p4-story-product .p4-muted { color: rgba(255,255,255,0.7); font-size: 12px; }
.p4-story-rail { position: absolute; right: 14px; bottom: 110px; display: flex; flex-direction: column; gap: 18px; z-index: 4; }
.p4-story-action { background: none; border: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.p4-story-action span:first-child { font-size: 26px; }
.p4-story-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 22px; cursor: pointer; z-index: 4; }
.p4-story-nav.left { left: 16px; }
.p4-story-nav.right { right: 16px; }

/* ───── v3.6 Live room page ─────────────────────────────────── */
.p4-live-page { max-width: 760px; }
.p4-back-link {
  display: inline-block;
  color: var(--muted, #5A6678);
  font-size: 13px;
  margin-bottom: 8px;
  text-decoration: none;
}
.p4-back-link:hover { color: var(--ink, #0B0F19); }
.p4-live-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.p4-live-status { display: inline-flex; gap: 8px; align-items: center; }
.p4-live-status .live-pill { position: static; }
.p4-live-viewers {
  padding: 4px 10px;
  background: rgba(11,15,25,0.78);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
}
.p4-live-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.p4-live-stage-inner {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
}
.p4-live-stage-visual {
  flex: 1;
  margin: 4px auto;
  width: min(420px, 78%);
  max-height: 70%;
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.p4-live-stage-visual img,
.p4-live-stage-visual svg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* 老 class 留作兜底，避免历史快照里有占位 div 的样式漏 */
.p4-live-stage-icon {
  flex: 1;
  margin: 4px auto;
  width: min(280px, 65%);
  max-height: 60%;
  border-radius: 14px;
  background: rgba(11,15,25,0.05);
}
.p4-live-stage-meta {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
  text-shadow: 0 1px 12px rgba(11,15,25,0.5);
}
.p4-live-stage-product { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.p4-live-stage-price   { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

.p4-live-info { margin-bottom: 22px; }
.p4-live-title { font-size: 22px; font-weight: 800; margin: 0 0 12px; color: var(--ink, #0B0F19); }
.p4-live-host-row { display: flex; align-items: center; gap: 12px; }
.p4-live-host-row .live-avatar {
  position: static;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.p4-live-hostname { font-weight: 700; color: var(--ink, #0B0F19); font-size: 14px; }

.p4-live-products {
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(15,20,40,0.08));
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.p4-live-product {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line, rgba(15,20,40,0.06));
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.p4-live-product:first-of-type { border-top: 0; }
.p4-live-product-art {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft, #F1F3F6);
  display: flex; align-items: center; justify-content: center;
}
.p4-live-product-art img,
.p4-live-product-art svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.p4-live-product-text { flex: 1; min-width: 0; }
.p4-live-product-name { font-weight: 700; font-size: 14px; color: var(--ink, #0B0F19); }
.p4-live-product-cta { font-size: 13px; color: var(--blue, #1F6FEB); font-weight: 600; }

.p4-live-chat {
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(15,20,40,0.08));
  border-radius: 14px;
  padding: 16px 18px 14px;
}
.p4-live-stream {
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.p4-live-msg {
  padding: 6px 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
.p4-live-msg-author {
  color: var(--blue, #1F6FEB);
  font-weight: 700;
  margin-right: 8px;
}
.p4-live-msg-text { color: var(--ink, #0B0F19); word-break: break-word; }
.p4-live-msg-system .p4-live-msg-author { color: var(--muted); }
.p4-live-msg-purchase .p4-live-msg-author { color: var(--orange, #FF6A1F); }

.p4-live-compose {
  display: flex; gap: 8px; margin-top: 12px;
}
.p4-live-input {
  flex: 1; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line, rgba(15,20,40,0.12));
  background: var(--bg, #F7F8FA);
  font-size: 13.5px;
  outline: none;
}
.p4-live-input:focus { border-color: var(--blue, #1F6FEB); }

/* Live grid 容器 (list 页) */
.p4-live-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .p4-live-grid { grid-template-columns: repeat(3, 1fr); }
}

.live-pill-soon  { background: var(--ink, #0B0F19) !important; opacity: 0.78; }
.live-pill-ended { background: var(--muted, #5A6678) !important; opacity: 0.8; }

/* ───── v3.6.1 Brand detail page ─────────────────────────────── */
.p4-brand-page { max-width: 1080px; }
.p4-brand-hero {
  position: relative;
  padding: 48px 32px 56px;
  border-radius: 18px;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 24px;
}
.p4-brand-mark-xl {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 86px; height: 86px;
  border-radius: 22px;
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 18px;
}
.p4-brand-name {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ink, #0B0F19);
  letter-spacing: -0.02em;
}
.p4-brand-tag {
  color: var(--muted, #5A6678);
  font-size: 16px;
}
.p4-brand-story {
  max-width: 720px;
  margin: 0 auto 26px;
  color: var(--ink, #0B0F19);
  font-size: 15px;
  line-height: 1.7;
}
.p4-brand-story p { margin: 0 0 14px; }

/* v3.9.14-hotfix41 — 品牌主页富媒体内容块 */
.p4-brand-rich {
  max-width: 760px;
  margin: 0 auto 26px;
  color: var(--ink, #0B0F19);
}
.p4-brand-rich .p4-blk-h {
  font-size: 22px; font-weight: 700; line-height: 1.3;
  margin: 28px 0 12px;
}
.p4-brand-rich .p4-blk-h:first-child { margin-top: 0; }
.p4-brand-rich .p4-blk-p {
  font-size: 15px; line-height: 1.7; margin: 0 0 16px;
  color: var(--ink2, #36404F);
}
.p4-brand-rich .p4-blk-fig {
  margin: 18px 0; text-align: center;
}
.p4-brand-rich .p4-blk-fig img {
  max-width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.p4-brand-rich .p4-blk-fig figcaption {
  font-size: 12.5px; color: var(--faint, #8A94A6); margin-top: 8px;
}
.p4-brand-rich .p4-blk-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 18px 0; border-radius: 14px; overflow: hidden;
  background: #000; box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}
.p4-brand-rich .p4-blk-video iframe,
.p4-brand-rich .p4-blk-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  object-fit: cover;
}
.p4-brand-rich .p4-blk-table-wrap { overflow-x: auto; margin: 18px 0; }
.p4-brand-rich .p4-blk-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  border: 1px solid var(--line, #E5E9F0); border-radius: 10px; overflow: hidden;
}
.p4-brand-rich .p4-blk-table th,
.p4-brand-rich .p4-blk-table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line, #E5E9F0);
}
.p4-brand-rich .p4-blk-table th {
  background: var(--bg-soft, #F4F6FA); font-weight: 600;
}
.p4-brand-rich .p4-blk-table tr:last-child td { border-bottom: 0; }
.p4-brand-rich .p4-blk-chart { margin: 18px 0; }
.p4-brand-rich .p4-blk-chart-title { font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 8px; color: var(--ink, #0B0F19); }
.p4-brand-rich .p4-blk-chart svg { width: 100%; height: auto; max-height: 320px; }

/* 系列 tabs */
.p4-series-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px;
}
.p4-series-tab {
  padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line, #E5E9F0); background: var(--paper, #fff);
  color: var(--ink2, #36404F); cursor: pointer; transition: all .15s ease;
}
.p4-series-tab:hover { border-color: var(--accent, #1F6FEB); }
.p4-series-tab.is-active {
  background: var(--accent, #1F6FEB); border-color: var(--accent, #1F6FEB); color: #fff;
}
.p4-brand-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.p4-brand-product-card {
  display: flex; flex-direction: column;
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(15,20,40,0.08));
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.p4-brand-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,20,40,0.08);
}
.p4-brand-product-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-soft, #F1F3F6);
  display: flex; align-items: center; justify-content: center;
}
.p4-brand-product-art img,
.p4-brand-product-art svg {
  width: 100%; height: 100%;
  object-fit: cover;
}
.p4-brand-product-info {
  padding: 12px 14px 14px;
}
.p4-brand-product-name {
  font-size: 14px; font-weight: 700; color: var(--ink, #0B0F19);
  margin-bottom: 2px;
  line-height: 1.35;
}
.p4-brand-product-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.p4-brand-product-price {
  font-weight: 800; font-size: 15px; color: var(--ink, #0B0F19);
  font-variant-numeric: tabular-nums;
}
.p4-brand-product-rating {
  font-size: 12px;
  color: var(--muted, #5A6678);
}

@media (max-width: 600px) {
  .p4-brand-hero { padding: 36px 20px 40px; }
  .p4-brand-name { font-size: 28px; }
  .p4-brand-mark-xl { width: 68px; height: 68px; font-size: 34px; }
  .p4-brand-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .p4-brand-product-name { font-size: 13px; }
}