/* Phase 5 pages: product page, My Matches, How we rate. Uses the site's design tokens (theme.css), so light and dark both work. */
/* Phase 3 Stage 2B-5 — Mobile Responsiveness + Accessibility + Performance hardening (owner §11-§19, §20-§25) */
.page-narrow { max-width: 880px; margin: 0 auto; padding: 24px 16px 72px; }
.page-narrow h1 { font-family: var(--serif); font-size: 2rem; line-height: 1.2; margin: 0 0 8px; }
.page-narrow h2 { font-size: 1.25rem; margin: 32px 0 8px; }
.page-narrow h3 { font-size: 1.05rem; margin: 0 0 6px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--brand); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.block, .offer-card, .result-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0; box-shadow: var(--shadow); min-width: 0; }
.offer-card h4 { margin: 0 0 6px; font-size: 1.05rem; }
.offer-disclosure { font-size: .88rem; color: var(--text-dim); margin: 4px 0 8px; }
.offer-price { margin: 6px 0; font-size: 1.1rem; }
.offer-stale { color: var(--danger); font-size: .85rem; }
.offer-used { font-size: .85rem; font-weight: 700; color: var(--brand); margin: 4px 0; }
.offer-terms { margin: 8px 0 0; padding-left: 18px; font-size: .92rem; }
.ratings { width: 100%; border-collapse: collapse; }
.ratings th, .ratings td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.ratings th { font-weight: 500; width: 38%; }
.ratings .bar { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); min-width: 80px; }
.ratings .bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; margin: 0; }
.facts dt { font-size: .8rem; color: var(--text-dim); }
.facts dd { margin: 0 0 10px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0; list-style: none; }
.sizes li { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; background: var(--surface); }
.notice-box { border: 1px solid var(--border); background: var(--accent-soft); padding: 12px 14px; border-radius: 10px; margin: 12px 0; }
.result-label { font-weight: 700; color: var(--brand); font-size: .9rem; margin: 0 0 4px; }
.match-pct { font-size: 1.7rem; font-weight: 700; margin: 0; }
.fit-note { font-size: .88rem; color: var(--text-dim); margin: 2px 0 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two ul { margin: 6px 0 0; padding-left: 18px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } .page-narrow h1 { font-size: 1.6rem; } }
@media (max-width: 480px) { .page-narrow { padding: 20px 14px 60px; } .page-narrow h1 { font-size: 1.4rem; } .match-pct { font-size: 1.5rem; } }
@media (max-width: 360px) { .page-narrow { padding: 18px 12px 56px; } }

/* Store Scan: large touch targets, a swipeable options row, and no sideways scrolling of the page itself. */
.btn-lg { min-height: 48px; padding: 12px 18px; font-size: 1.05rem; margin: 4px 6px 4px 0; }
.btn-link { background: none; border: 0; padding: 6px 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; min-height: 44px; }
.store-scan .scan-sec { margin: 16px 0; }
.store-scan .scan-sec h2 { margin-top: 0; }
.price-big { font-size: 1.5rem; font-weight: 700; margin: 4px 0; }
.price-input { width: 9em; min-height: 44px; font-size: 1.1rem; }
.options-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.options-row .option-card { flex: 0 0 min(88%, 340px); scroll-snap-align: start; margin: 0; min-width: 0; }
.label-badge { background: var(--brand); color: var(--surface); }
.delta { font-size: .9rem; font-weight: 700; }
.delta-save { color: var(--brand); }
.delta-more { color: var(--text-dim); }
.decision { border-left: 4px solid var(--brand); }
.compare-wrap { overflow-x: auto; }
.compare th, .compare td { min-width: 120px; font-size: .92rem; vertical-align: top; }
.visit-row { margin: 10px 0; }
.compare-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.compare-check input { width: 22px; height: 22px; }

/* 2B-5: universal focus-visible rule for all buttons / links / inputs on 2B surfaces */
.page-narrow a:focus-visible,
.page-narrow .btn:focus-visible,
.page-narrow button:focus-visible,
.page-narrow input:focus-visible,
.page-narrow select:focus-visible,
.page-narrow textarea:focus-visible,
.rp-main a:focus-visible,
.rp-main .btn:focus-visible,
.rp-main button:focus-visible,
.rp-main input:focus-visible,
.rp-main select:focus-visible,
.rp-main textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Phase 3 Stage 2B-3 — Matches card with image slot + Compare bar + Compare page */
.result-card-media { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.result-card-image { width: 100%; }
.result-card-image .pm-image { width: 100%; max-width: 180px; }
.result-card-body { min-width: 0; }
.result-card-media h3 { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .result-card-media { grid-template-columns: 140px 1fr; gap: 12px; }
  .result-card-image .pm-image { max-width: 140px; }
}
@media (max-width: 480px) {
  .result-card-media { grid-template-columns: 1fr; }
  .result-card-image .pm-image { max-width: 100%; }
}

.compare-bar { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.compare-bar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.compare-bar p { margin: 6px 0 0; }

/* Compare page — 2B-5: switch to horizontal-scrolling table on narrow screens, preserving product identity (owner §15). */
.compare-page .compare-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-page .compare-grid { display: grid; grid-template-columns: 160px repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: start; margin: 16px 0; }
.compare-page .compare-col { min-width: 0; }
.compare-page .compare-col .pm-image { max-width: 220px; }
.compare-page .compare-col h3 { overflow-wrap: anywhere; }
.compare-page .compare-row-label { font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.compare-page .compare-row-value { font-size: .95rem; min-width: 0; overflow-wrap: anywhere; }
.compare-page .compare-remove { font-size: .85rem; margin-top: 6px; }
.compare-page .compare-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 16px; }
.compare-page .compare-section h2 { margin: 0 0 10px; font-size: 1.05rem; }
@media (max-width: 640px) {
  /* Owner §15: at narrow widths, SWITCH TO HORIZONTAL SCROLL rather than stacking.
     Fixed column widths keep product identity side-by-side; wrapper scrolls. */
  .compare-page .compare-grid { grid-template-columns: 110px repeat(var(--compare-cols, 3), minmax(180px, 220px)); }
  .compare-page .compare-col .pm-image { max-width: 180px; }
  .compare-page .compare-row-label { font-size: .75rem; }
}
@media (max-width: 430px) {
  .compare-page .compare-grid { grid-template-columns: 96px repeat(var(--compare-cols, 3), minmax(160px, 200px)); gap: 12px; }
  .compare-page .compare-col .pm-image { max-width: 160px; }
}
@media (max-width: 360px) {
  .compare-page .compare-grid { grid-template-columns: 88px repeat(var(--compare-cols, 3), minmax(150px, 180px)); gap: 10px; }
}

/* Phase 3 Stage 2B-4 — Store Scan + RTM + Quote image slots (hardened in 2B-5) */
.scan-img { max-width: 240px; margin: 8px 0 12px; }
.scan-img .pm-image { max-width: 240px; }
.option-card .scan-img { max-width: 100%; margin: 0 0 10px; }
.option-card .scan-img .pm-image { max-width: 100%; }
.scan-candidate { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 10px 0; display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; }
.scan-candidate .scan-img { max-width: 140px; margin: 0; }
.scan-candidate .scan-img .pm-image { max-width: 140px; }
.scan-candidate-badge { margin: 0; }
.scan-candidate-name { margin: 4px 0 6px; overflow-wrap: anywhere; }
.scan-candidate-body { min-width: 0; }
@media (max-width: 480px) {
  .scan-candidate { grid-template-columns: 112px 1fr; gap: 10px; padding: 8px; }
  .scan-candidate .scan-img, .scan-candidate .scan-img .pm-image { max-width: 112px; }
}
@media (max-width: 360px) {
  .scan-candidate { grid-template-columns: 1fr; }
  .scan-candidate .scan-img, .scan-candidate .scan-img .pm-image { max-width: 100%; }
}

/* RTM card image slot */
.rp-card { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.rp-card.rp-card-media { grid-template-columns: 120px 1fr; align-items: start; }
.rp-card.rp-card-media .pm-image { max-width: 120px; }
.rp-card .rp-card-body { min-width: 0; }
.rp-card h3 { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .rp-card.rp-card-media { grid-template-columns: 96px 1fr; gap: 10px; }
  .rp-card.rp-card-media .pm-image { max-width: 96px; }
}
@media (max-width: 360px) {
  .rp-card.rp-card-media { grid-template-columns: 1fr; }
  .rp-card.rp-card-media .pm-image { max-width: 100%; }
}

/* Quote line image slot */
.quote-item-media { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: start; }
.quote-item-media .pm-image { max-width: 100px; }
.quote-item-media > div { min-width: 0; }
@media (max-width: 480px) {
  .quote-item-media { grid-template-columns: 80px 1fr; gap: 10px; }
  .quote-item-media .pm-image { max-width: 80px; }
}
@media (max-width: 360px) {
  .quote-item-media { grid-template-columns: 1fr; }
  .quote-item-media .pm-image { max-width: 100%; }
}

/* 2B-5 accessibility: ensure the viewport-safe scroll wrappers never swallow focus outlines */
.compare-wrap:focus-visible, .pm-gallery-strip:focus-visible, .compare-grid-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 2B-5 accessibility: screen-reader-only live region for Compare basket announcements (owner §22-§23). */
.sr-live, .sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}