/* Shopwise components, v1.1. Reads only design/tokens.css. 360 px first.
   Rules carried by these components (PRD v3): a pick or link verdict has no reply buttons (R7, L7);
   the R8 disclosure rides every buy button; nothing shows a score, weight, rank or count (R5, spec 7.6);
   one coral button per surface; coral is otherwise only the tick. */

/* ---------- Base ---------- */
.sw { margin: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body);
      font-size: var(--fs-body); line-height: var(--lh-body); -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
/* Base resets carry zero specificity so every component class wins over them. */
:where(.sw) *, :where(.sw) *::before, :where(.sw) *::after { box-sizing: border-box; }
:where(.sw) :where(img, svg) { display: block; max-width: 100%; }
:where(.sw) a { color: inherit; }
:where(.sw) :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sw-display, .sw-h1, .sw-h2, .sw-h3 { font-family: var(--font-display); color: var(--text-heading); margin: 0;
      font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.sw-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.025em; }
.sw-h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; }
.sw-h2 { font-size: var(--fs-h2); line-height: 1.15; }
.sw-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.005em; }
.sw-price { font-family: var(--font-price); font-weight: 700; font-size: var(--fs-price); line-height: 1.2;
      letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.sw-lead { font-size: var(--fs-body-lg); color: var(--text-muted); max-width: var(--measure); margin: 0; }
.sw-small { font-size: var(--fs-body-sm); }
.sw-caption { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.45; }
.sw-muted { color: var(--text-muted); }
.sw-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display);
      font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
      color: var(--text-heading); }
.sw-eyebrow::before { content: ""; flex: 0 0 16px; height: 3px; background: var(--accent);
      transform: skewX(var(--angle)); border-radius: 1px; }
.sw-section { margin: var(--space-8) 0 0; }
.sw-section > .sw-eyebrow { margin-bottom: var(--space-3); }

.sw-card { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
      padding: var(--space-4); box-shadow: var(--shadow-card); }
.sw-card--flat { box-shadow: none; }
.sw-card--sunken { background: var(--bg-sunken); border-color: transparent; box-shadow: none; }

/* ---------- The tick: the Shopwise mark itself (from assets/shopwise-tick.svg), never a generic check ---------- */
.sw-tick { width: 1em; height: 1em; flex: none; color: var(--tick); fill: currentColor; stroke: none; }
/* Theme-swapped images (wordmark): no script needed. */
.sw-only-dark { display: none !important; }
:root[data-theme="dark"] .sw-only-dark { display: revert !important; }
:root[data-theme="dark"] .sw-only-light { display: none !important; }
/* The tick arrives: wiped in along its stroke, once, when an answer lands. */
.sw-tick--arrive { clip-path: inset(0 100% 0 0); animation: sw-tick-arrive var(--dur-arrive) var(--ease-out) 180ms forwards; }
@keyframes sw-tick-arrive { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .sw-tick--arrive { animation: none; clip-path: none; } }

/* ---------- Buttons ---------- */
.sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
      padding: 12px 22px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
      font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: .005em;
      text-decoration: none; cursor: pointer; transition: transform var(--dur-quick) var(--ease-out),
      background-color var(--dur-quick) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.sw-btn:active { transform: translateY(1px); }
.sw-btn--block { display: flex; width: 100%; }
.sw-btn--primary { background: var(--accent); color: var(--on-accent); padding-right: calc(22px + var(--cut));
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.sw-btn--primary:hover { background: var(--welcome-600); }
.sw-btn--secondary { background: transparent; color: var(--text-heading); border-color: currentColor; }
.sw-btn--secondary:hover { background: var(--bg-sunken); }
.sw-btn--on-inverse { background: transparent; color: var(--text-on-inverse); border-color: rgba(250, 246, 238, .55); }
.sw-btn svg { width: 18px; height: 18px; flex: none; }
.sw-link { color: var(--text-heading); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
      text-underline-offset: 3px; }
.sw-disclosure { margin: var(--space-2) 0 0; font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.4; }

/* ---------- Stamp (verdict and badges): one forward cut ---------- */
.sw-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px 7px 12px; margin: 0;
      font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1;
      clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.sw-stamp .sw-tick { width: 16px; height: 16px; }
.sw-stamp--right { background: var(--counsel-100); color: var(--counsel-900); }
.sw-stamp--right .sw-tick { color: var(--welcome-700); }
.sw-stamp--consider { background: var(--fn-attention-tint); color: var(--fn-attention-text); }
.sw-stamp--wait { background: var(--fn-neutral-tint); color: var(--fn-neutral-text); }
.sw-stamp--on-inverse { background: rgba(250, 246, 238, .12); color: var(--text-on-inverse); }
.sw-stamp--on-inverse .sw-tick { color: var(--tick-on-inverse); }

/* ---------- Callouts ---------- */
.sw-callout { display: flex; gap: 10px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
      font-size: var(--fs-body-sm); line-height: 1.5; }
.sw-callout svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.sw-callout b { font-weight: 700; }
.sw-callout--catch { background: var(--fn-attention-tint); color: var(--text-primary); }
.sw-callout--catch svg { color: var(--fn-attention-text); }
.sw-callout--note { background: var(--counsel-100); color: var(--counsel-900); }
.sw-callout--error { background: var(--fn-critical-tint); color: var(--fn-critical-text); }

/* ---------- Chips: the buyer's own words ---------- */
.sw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sw-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: var(--radius-sm);
      background: var(--bg-card); border: 1px solid var(--border-strong); font-size: var(--fs-body-sm); line-height: 1.3; }
.sw-chip__what { font-weight: 600; color: var(--text-heading); }
.sw-chip__said { color: var(--text-muted); font-size: var(--fs-caption); }
.sw-chip__said::before { content: "\201C"; } .sw-chip__said::after { content: "\201D"; }
.sw-chip--assumed { border-style: dashed; background: transparent; }
.sw-chip--assumed .sw-chip__said { font-style: italic; }
.sw-chip--assumed .sw-chip__said::before, .sw-chip--assumed .sw-chip__said::after { content: none; }

/* ---------- The verdict block (top of every why-page) ---------- */
.sw-verdict { position: relative; background: var(--bg-inverse); color: var(--text-on-inverse);
      border-radius: var(--radius-lg); padding: var(--space-5); overflow: hidden; }
.sw-verdict::after { content: ""; position: absolute; right: -36px; top: -40px; width: 120px; height: 150px;
      background: rgba(250, 246, 238, .05); transform: skewX(var(--angle)); pointer-events: none; }
.sw-verdict__for { margin: 0 0 var(--space-3); }
.sw-verdict__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15;
      letter-spacing: -0.015em; color: var(--text-on-inverse); text-wrap: balance; }
.sw-verdict__why { margin: var(--space-2) 0 0; color: var(--text-on-inverse-muted); font-size: var(--fs-body); }
.sw-verdict__row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.sw-verdict__img { width: 76px; height: 76px; flex: none; border-radius: var(--radius-sm); background: #fff;
      padding: 6px; object-fit: contain; }
.sw-verdict__price { font-family: var(--font-price); font-weight: 700; font-size: 1.75rem; line-height: 1;
      letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.sw-verdict__age { display: block; margin-top: 4px; font-size: var(--fs-caption); color: var(--text-on-inverse-muted); }
.sw-verdict .sw-btn--primary { margin-top: var(--space-4); }
.sw-verdict .sw-disclosure { color: var(--text-on-inverse-muted); text-align: center; }

/* ---------- The narrowing strip: the market through the buyer's own needs ---------- */
.sw-funnel { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sw-funnel__step { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: var(--space-3); }
.sw-funnel__bar { height: 30px; justify-self: center; border-radius: 6px;
      clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 7px 100%); }
.sw-funnel__step:nth-child(1) .sw-funnel__bar { width: 100%; background: var(--funnel-1); }
.sw-funnel__step:nth-child(2) .sw-funnel__bar { width: 80%; background: var(--funnel-2); }
.sw-funnel__step:nth-child(3) .sw-funnel__bar { width: 62%; background: var(--funnel-3); }
.sw-funnel__step:nth-child(4) .sw-funnel__bar { width: 46%; background: var(--funnel-4); }
.sw-funnel__step:nth-child(5) .sw-funnel__bar { width: 34%; background: var(--funnel-4); }
.sw-funnel__label { font-size: var(--fs-body-sm); line-height: 1.3; }
.sw-funnel__label b { display: block; font-weight: 600; color: var(--text-heading); }
.sw-funnel__label span { color: var(--text-muted); font-size: var(--fs-caption); }
/* The pick is always the last step; the doubled class outranks the nth-child widths above, whatever its position. */
.sw-funnel__step.sw-funnel__pick .sw-funnel__bar { width: 30px; height: 30px; clip-path: none; border-radius: 50%;
      background: var(--bg-inverse); display: grid; place-items: center; }
.sw-funnel__pick .sw-funnel__bar .sw-tick { width: 18px; height: 18px; color: var(--tick-on-inverse); }
.sw-funnel__pick .sw-funnel__label b { font-family: var(--font-display); font-size: 1rem; }

/* ---------- Importance: three fixed sizes from the engine's MOST / MORE / SOME, always with words ---------- */
.sw-weight { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 600;
      color: var(--text-muted); }
.sw-weight__bars { display: inline-flex; gap: 3px; }
.sw-weight__bars i { width: 6px; height: 13px; border-radius: 1.5px; background: var(--weight-off);
      transform: skewX(var(--angle)); }
.sw-weight--most .sw-weight__bars i, .sw-weight--more .sw-weight__bars i:nth-child(-n+2),
.sw-weight--some .sw-weight__bars i:first-child { background: var(--weight-on); }

/* ---------- Marks against the runner-up: wins, level, gives up ---------- */
.sw-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; }
.sw-mark svg { width: 14px; height: 14px; }
.sw-mark--win { background: var(--mark-win); color: var(--bg-card); }
.sw-mark--level { background: transparent; border: 2px solid var(--mark-level); color: var(--mark-level); }
.sw-mark--give { background: transparent; border: 2px dashed var(--mark-give); color: var(--mark-give); }

/* ---------- Factor cards (W2) ---------- */
.sw-factors { display: grid; gap: var(--space-3); }
.sw-factor { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
      padding: var(--space-4); }
.sw-factor__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sw-factor__name { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 700; color: var(--text-heading);
      font-size: 1.05rem; line-height: 1.25; }
.sw-factor__value { margin: var(--space-1) 0 0; font-size: var(--fs-body); }
.sw-factor__value strong { font-weight: 700; }
.sw-factor__said { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 3px solid var(--accent);
      font-size: var(--fs-body-sm); color: var(--text-muted); }
.sw-factor__said q { color: var(--text-primary); font-weight: 600; }
.sw-factor__vs { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0;
      font-size: var(--fs-body-sm); color: var(--text-muted); }
.sw-factor--most { border: 1.5px solid var(--counsel-300); box-shadow: var(--shadow-card); padding: var(--space-5); }
.sw-factor--most .sw-factor__name { font-size: 1.3rem; }
.sw-factor--some { padding: var(--space-3) var(--space-4); background: var(--bg-sunken); border-color: transparent; }
.sw-factor--some .sw-factor__name { font-size: .98rem; }

/* ---------- Compare (W3): two or three columns, the pick first ---------- */
.sw-compare { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
      overflow: hidden; }
.sw-compare__head, .sw-compare__row { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); }
.sw-compare__head > div { padding: var(--space-3) var(--space-4); }
.sw-compare__head > div:first-child { background: var(--counsel-100); color: var(--counsel-900); }
.sw-compare__tag { display: block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; opacity: .8; }
.sw-compare__product { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700;
      font-size: .98rem; line-height: 1.2; }
.sw-compare__head .sw-price { font-size: 1.05rem; }
.sw-compare__factor { grid-column: 1 / -1; padding: var(--space-3) var(--space-4) 0; font-size: var(--fs-caption);
      font-weight: 700; color: var(--text-muted); letter-spacing: .03em; text-transform: uppercase;
      border-top: 1px solid var(--border-hairline); }
.sw-compare__cell { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3);
      font-size: var(--fs-body-sm); }
.sw-compare__cell--win { font-weight: 700; color: var(--text-primary); }
.sw-compare__foot { padding: var(--space-3) var(--space-4); background: var(--bg-sunken); font-size: var(--fs-body-sm); }
.sw-compare__foot p { margin: 0; }

/* ---------- Must-have proof (W4) ---------- */
.sw-proof { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
      background: var(--bg-card); }
.sw-proof li + li { border-top: 1px solid var(--border-hairline); }
.sw-proof details { padding: var(--space-3) var(--space-4); }
.sw-proof summary { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-3); align-items: center;
      cursor: pointer; list-style: none; }
.sw-proof summary::-webkit-details-marker { display: none; }
.sw-proof summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-muted);
      border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--dur-quick); }
.sw-proof details[open] summary::after { transform: rotate(-135deg); }
.sw-proof__need { font-weight: 600; font-size: var(--fs-body-sm); line-height: 1.3; }
.sw-proof__need span { display: block; font-weight: 400; color: var(--text-muted); }
.sw-proof blockquote { margin: var(--space-3) 0 0 34px; padding: var(--space-2) var(--space-3); border-radius: 8px;
      background: var(--bg-sunken); font-family: var(--font-data); font-size: .78rem; line-height: 1.5; }
.sw-proof cite { display: block; margin-top: 4px; font-family: var(--font-body); font-style: normal;
      font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- Price: range bar and history chart (W6) ---------- */
.sw-range { position: relative; padding-top: 30px; }
.sw-range__track { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; }
.sw-range__track i { flex: 1; }
.sw-range__track i:nth-child(1) { background: var(--chart-low); }
.sw-range__track i:nth-child(2) { background: var(--chart-usual); flex: 1.4; }
.sw-range__track i:nth-child(3) { background: var(--chart-high); }
.sw-range__today { position: absolute; top: 0; left: var(--pos, 50%); transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; }
.sw-range__today b { font-family: var(--font-price); font-size: var(--fs-body-sm); white-space: nowrap; }
.sw-range__today::after { content: ""; width: 3px; height: 22px; margin-top: 2px; border-radius: 2px;
      background: var(--text-heading); }
.sw-range__ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-caption);
      color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sw-chart { width: 100%; height: auto; margin-top: var(--space-4); }
.sw-chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.sw-chart .area { fill: var(--chart-area); }
.sw-chart .line { fill: none; stroke: var(--chart-line); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.sw-chart .today { fill: var(--accent); stroke: var(--bg-card); stroke-width: 2.5; }
.sw-chart text { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body); }

/* ---------- Service in your city (W5) ---------- */
.sw-service { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: start; }
.sw-service__pin { width: 36px; height: 36px; border-radius: 50%; background: var(--counsel-100); color: var(--counsel-700);
      display: grid; place-items: center; }
.sw-service__pin svg { width: 18px; height: 18px; }
.sw-service p { margin: 0; font-size: var(--fs-body-sm); }
.sw-service b { font-family: var(--font-display); font-size: 1rem; color: var(--text-heading); }

/* ---------- Delivery checklist (W7) ---------- */
.sw-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.sw-checklist label { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start;
      padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-card);
      border: 1px solid var(--border-hairline); font-size: var(--fs-body-sm); cursor: pointer; }
.sw-checklist input { appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 6px;
      border: 2px solid var(--border-strong); display: grid; place-items: center; background: var(--bg-card); }
.sw-checklist input:checked { background: var(--counsel-700); border-color: var(--counsel-700); }
.sw-checklist input:checked::after { content: ""; width: 10px; height: 6px; margin-top: -3px;
      border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.sw-checklist input:checked + span { color: var(--text-muted); text-decoration: line-through; }

/* ---------- The note for the person it's for (W8) ---------- */
.sw-note { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
      padding: var(--space-5); box-shadow: var(--shadow-card); }
.sw-note__to { margin: 0 0 var(--space-2); font-size: var(--fs-caption); color: var(--text-muted); font-weight: 600; }
.sw-note__text { margin: 0; font-size: var(--fs-body-lg); line-height: 1.5; }
.sw-note .sw-btn { margin-top: var(--space-4); }

/* ---------- For whoever opens a forward ---------- */
.sw-forward { text-align: center; padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg);
      background: var(--bg-sunken); }
.sw-forward p:not([class]) { margin: var(--space-2) auto var(--space-4); max-width: 26rem; color: var(--text-muted); }
.sw-forward .sw-tick { width: 28px; height: 28px; margin: 0 auto; }

/* ---------- Page shell: head, section jump, sticky buy bar, footer ---------- */
.sw-page { max-width: 480px; margin: 0 auto; padding: var(--space-3) var(--space-4) 120px; }
.sw-pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
      padding: var(--space-2) 0 var(--space-4); }
.sw-pagehead img { height: 22px; width: auto; }
.sw-pagehead span { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 600; }
.sw-hello { margin: 0 0 var(--space-3); font-size: var(--fs-body); color: var(--text-muted); }
.sw-hello b { color: var(--text-primary); }
.sw-jump { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
      margin: var(--space-4) calc(-1 * var(--space-4)) 0; padding: var(--space-2) var(--space-4);
      background: color-mix(in srgb, var(--bg-page) 94%, transparent); backdrop-filter: blur(6px); }
.sw-jump::-webkit-scrollbar { display: none; }
.sw-jump a { flex: none; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
      background: var(--bg-card); color: var(--text-heading); font-size: var(--fs-caption); font-weight: 600;
      text-decoration: none; white-space: nowrap; }
.sw-anchor { display: block; height: 0; scroll-margin-top: 56px; }
.sw-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center;
      gap: var(--space-3); padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom));
      background: var(--bg-card); border-top: 1px solid var(--border-hairline); box-shadow: 0 -8px 24px rgba(14, 55, 51, .08);
      transition: transform var(--dur-arrive) var(--ease-out); }
.sw-buybar[data-hidden="true"] { transform: translateY(110%); }
.sw-buybar__what { flex: 1; min-width: 0; line-height: 1.2; }
.sw-buybar__what b { display: block; font-size: var(--fs-body-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-buybar .sw-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 520px) { .sw-buybar { left: 50%; right: auto; width: 480px; transform: translateX(-50%);
      border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .sw-buybar[data-hidden="true"] { transform: translate(-50%, 110%); } }
.sw-pagefoot { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline);
      font-size: var(--fs-caption); color: var(--text-muted); }
.sw-pagefoot p { margin: 0 0 var(--space-2); }

/* ---------- Expert lines (W7): what matters at this price, mistakes, what helps more ---------- */
.sw-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.sw-lines li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start;
      padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-hairline);
      border-radius: var(--radius-sm); font-size: var(--fs-body-sm); }
.sw-lines__kind { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
      background: var(--counsel-100); color: var(--counsel-700); font-family: var(--font-display); font-weight: 800; font-size: .8rem; }
.sw-lines__kind--mistake { background: var(--fn-attention-tint); color: var(--fn-attention-text); }
.sw-lines b { display: block; color: var(--text-heading); font-family: var(--font-display); font-size: .95rem; margin-bottom: 2px; }
.sw-lines__kind--plus { background: var(--fn-success-tint); color: var(--fn-success-text); }

/* ---------- Today's price across stores (L3): the cheapest marked ---------- */
.sw-stores { margin: 0 0 var(--space-2); padding: 0; list-style: none; background: var(--bg-card);
      border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.sw-stores li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
      padding: var(--space-3) var(--space-4); font-size: var(--fs-body-sm); }
.sw-stores li + li { border-top: 1px solid var(--border-hairline); }
.sw-stores em { font-style: normal; font-size: var(--fs-caption); color: var(--text-muted); margin-left: 6px; }
.sw-stores .sw-price { font-size: 1rem; }
.sw-stores li.is-low { background: color-mix(in srgb, var(--fn-success-tint) 70%, transparent); }
.sw-stores li.is-low .sw-price { color: var(--fn-success-text); }

/* ---------- The discount check (L4): the claim against what it really sold for ---------- */
.sw-discount { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md);
      background: var(--bg-card); border: 1px solid var(--border-hairline); }
.sw-discount__claim { display: flex; align-items: baseline; gap: var(--space-3); color: var(--text-muted); }
.sw-discount__claim s { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-faint);
      text-decoration-thickness: 3px; text-decoration-color: var(--accent); }
.sw-discount__real { display: flex; align-items: baseline; gap: var(--space-3); }
.sw-discount__real b { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-heading); }
.sw-discount p { margin: 0; font-size: var(--fs-body-sm); }

/* ---------- Alternatives that beat a product the buyer brought (L3) ---------- */
.sw-alt { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); padding: var(--space-4);
      background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.sw-alt img { width: 56px; height: 56px; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; }
.sw-alt h4 { margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--text-heading); line-height: 1.25; }
.sw-alt p { margin: 4px 0 0; font-size: var(--fs-body-sm); }
.sw-alt .sw-diff { font-family: var(--font-price); font-weight: 700; }
.sw-alt .sw-link { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-body-sm); }
.sw-alt .sw-btn { margin-top: var(--space-3); }

/* ---------- The share card (the link preview, 1200 x 630, drawn server-side) ---------- */
.sw-sharecard { position: relative; aspect-ratio: 1200 / 630; container-type: inline-size; overflow: hidden;
      border-radius: var(--radius-md); background: var(--counsel-900); color: var(--paper); font-family: var(--font-body); }
.sw-sharecard__copy { position: absolute; left: 6cqw; top: 7.5cqw; width: 52cqw; }
.sw-sharecard__for { display: inline-flex; align-items: center; gap: 1.2cqw; font-family: var(--font-display);
      font-weight: 700; font-size: 3cqw; letter-spacing: .05em; text-transform: uppercase; color: var(--welcome-300); }
.sw-sharecard__for .sw-tick { width: 3.2cqw; height: 3.2cqw; color: var(--welcome-500); }
.sw-sharecard__hook { margin: 1.8cqw 0 0; font-family: var(--font-display); font-weight: 800; font-size: 6cqw;
      line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.sw-sharecard__product { margin: 2.4cqw 0 0; font-size: 3.4cqw; line-height: 1.2; color: var(--counsel-200); }
.sw-sharecard__product b { font-family: var(--font-price); color: var(--paper); font-size: 3.8cqw; }
.sw-sharecard__img { position: absolute; right: 6cqw; top: 9cqw; width: 30cqw; height: 30cqw; border-radius: 3cqw;
      background: #fff; padding: 2cqw; object-fit: contain; transform: rotate(2deg); }
.sw-sharecard__brand { position: absolute; left: 6cqw; bottom: 5.5cqw; width: 16cqw; }
.sw-sharecard__cut { position: absolute; right: -4cqw; bottom: -8cqw; width: 26cqw; height: 22cqw;
      background: var(--welcome-500); transform: skewX(var(--angle)); opacity: .9; }

/* ---------- WhatsApp-true threads (website demos). Shopwise colours, WhatsApp's layout ---------- */
.sw-wa { background: var(--wa-ground); border-radius: var(--radius-lg); padding: var(--space-3); display: grid;
      gap: var(--space-2); font-size: .9375rem; line-height: 1.45; }
.sw-wa__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--space-1); }
.sw-wa__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--counsel-900); display: grid; place-items: center; }
.sw-wa__avatar .sw-tick { width: 20px; height: 20px; color: var(--welcome-500); }
.sw-wa__name { font-family: var(--font-display); font-weight: 700; color: var(--text-heading); line-height: 1.1; }
.sw-wa__status { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); color: var(--text-muted); }
.sw-bubble { max-width: 88%; padding: 8px 11px 6px; border-radius: 12px; box-shadow: 0 1px 1px rgba(14, 55, 51, .08);
      overflow-wrap: anywhere; }
.sw-bubble p { margin: 0 0 6px; } .sw-bubble p:last-of-type { margin-bottom: 0; }
.sw-bubble--buyer { justify-self: end; background: var(--wa-buyer); border-top-right-radius: 4px; }
.sw-bubble--advisor { justify-self: start; background: var(--wa-advisor); border-top-left-radius: 4px; }
.sw-bubble__time { display: block; text-align: right; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.sw-bubble__footer { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.sw-bubble__reason { color: var(--text-muted); }
.sw-wa__msg { justify-self: start; max-width: 88%; display: grid; gap: 2px; }
.sw-wa__msg > .sw-bubble { max-width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.sw-wa__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px;
      background: var(--wa-advisor); border-radius: 4px; color: var(--text-heading); font-weight: 600; font-size: .9rem;
      box-shadow: 0 1px 1px rgba(14, 55, 51, .08); }
.sw-wa__btn:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.sw-wa__btn svg { width: 15px; height: 15px; }
.sw-wa__preview { display: grid; grid-template-columns: 1fr; margin: 0 0 6px; border-radius: 8px; overflow: hidden;
      background: var(--bg-sunken); }
.sw-wa__preview .sw-sharecard { border-radius: 0; }
.sw-wa__preview figcaption { padding: 6px 9px 8px; font-size: var(--fs-caption); line-height: 1.35; }
.sw-wa__preview figcaption b { display: block; color: var(--text-primary); }
.sw-wa__preview figcaption span { color: var(--text-muted); }