/* SCG Expert Choice Guide — front-end styles.
Deliberately theme-agnostic: no assumptions about the host theme's
design system beyond standard box-sizing, so this works inside any
free/commercial WordPress theme without a page builder dependency. */
.scg-ecg {
max-width: 960px;
margin: 0 auto;
font-family: inherit;
box-sizing: border-box;
}
.scg-ecg *,
.scg-ecg *::before,
.scg-ecg *::after {
box-sizing: inherit;
}
.scg-ecg-disclosure {
font-size: 0.8rem;
color: #777;
margin: 0 0 1rem;
}
.scg-ecg-error {
padding: 1rem;
border: 1px solid #e0b4b4;
background: #fdf2f2;
color: #8a2c2c;
border-radius: 4px;
}
/* ---------------------------------------------------------------- */
/* Locked YMM -> Pit Stop screens (Owner directive 2026-08-19, revised */
/* same day for the "clean" background photos — SCG_YMM_FINAL.png and */
/* SCG_PITSTOP_FINAL.png no longer have any panel/nameplate/tab UI */
/* baked in, so nothing here recreates that panel; controls sit */
/* directly over the photo). Only ever rendered by */
/* expert-choice-guide.js inside the shortcode (never on the */
/* scg_scanner/scg_comparison CPT pages, which use only the */
/* card/compare-table rules further below), but kept self-contained */
/* here rather than assuming any host-theme class exists, per this */
/* file's own "theme-agnostic" rule (see file header). Background- */
/* image itself is supplied by the host theme's own stylesheet */
/* (scg-theme-components/assets/css/homepage.css) — this file only */
/* owns sizing, the hidden-by-default state, and the interactive */
/* controls' legibility over that photo. */
/* ---------------------------------------------------------------- */
.scg-ecg-screen {
display: none; /* hidden until .is-active — default state on every page load, no JS flash */
position: relative;
width: 100%;
max-width: 960px; /* same desktop form factor as the approved Hero — see homepage.css */
margin: 0 auto 1.5rem;
aspect-ratio: 3 / 2; /* matches the locked 1536x1024 assets exactly */
border-radius: 24px; /* Owner directive 2026-08-19: matches the approved LIVE Hero's own visible corner radius (same value applied to .scg-home-hero in homepage.css) */
overflow: hidden; /* clips to the rounded corners only — see background-size below for why this never crops the image itself */
/* Owner directive 2026-08-21: the clip above was already correct, but
invisible — SCG_YMM_FINAL.png/SCG_PITSTOP_FINAL.png paint nearly the
same off-white right into their own corners (sampled ~rgb(242,239,235)
vs this box's #F7F3EC / the page's rgb(247,243,236)), so the rounded
cut had no contrast to read against, unlike Hero's dark photo. A thin
outline that follows this same border-radius makes the existing curve
visible without touching the image or the box's size. */
box-shadow: 0 0 0 1px rgba(27, 20, 13, 0.14);
box-sizing: border-box;
background-color: #F7F3EC; /* fallback ivory if the theme's background-image rule hasn't loaded yet */
/* `contain`, not `cover`: the box is locked to the exact 3:2 ratio the
assets are exported at, so contain vs cover render identically in
practice — contain is the deliberate choice because it can never
crop even a sub-pixel of the image if some future viewport rounds
the box to slightly off 3:2, per the "do not crop" requirement.
No gradient/overlay is added anywhere in this rule — the clean photo
renders exactly as supplied. */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.scg-ecg-screen.is-active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4% 5%;
}
.scg-ecg-screen--pitstop.is-active {
/* Both the vehicle readout and the controls row are positioned
absolutely against specific bands of the clean photo (see their own
rules below), not laid out by this flex context — display:block
here so a lone in-flow child (errorEl, only ever present when an
error is showing) doesn't get stretched/misplaced by leftover
flex alignment rules. */
display: block;
}
/* ---- YMM screen: controls sit directly on the photo's own empty ---- */
/* center band, no wrapping panel (Owner directive: "do not recreate */
/* the deleted image panel"). */
/*
* Owner directive 2026-08-19 (visual correction pass): row, not column.
* The previous column layout gave .scg-ecg-step `flex:1 1 auto` inside a
* flex-COLUMN — that grows along the vertical (main) axis, which stretched
* the grid's two "auto" rows to fill the leftover height and (with
* align-items:end on .scg-ecg-step) pushed the MAKE/MODEL/YEAR labels up
* near the top while the selects landed far below, nowhere near their own
* label. Switching to a flex ROW makes the exact same flex-grow instead
* expand .scg-ecg-step's WIDTH (harmless, desired), and align-items:end
* bottom-aligns GO with .scg-ecg-step's own bottom edge — which is the
* select row, since label sits in .scg-ecg-step's row 1 and select in row
* 2 — putting GO in the same visual row as the three dropdowns without
* moving the labels at all.
*/
.scg-ecg-screen--ymm.is-active {
flex-direction: row;
flex-wrap: wrap;
/*
* Owner directive 2026-08-21: the whole Make/Model/Year+GO block (one
* unit — its own internal spacing untouched) moves from the
* below-the-logo band to the large central empty band of the photo
* (roughly 30%-65% down SCG_YMM_FINAL.png, between the subtitle and
* the ScanChoiceGuide logo). align-items:center on a single-line flex
* row vertically centers that whole line within the full height of
* this box (there's no align-content override, so — per the flexbox
* spec — a lone line is positioned using align-items directly against
* the container's full cross-axis space, not just its own line box),
* which lands it inside that band; justify-content:center (inherited
* from the base .scg-ecg-screen.is-active rule) keeps it horizontally
* centered as before. GO now centers against the label+select block's
* own height rather than sitting flush with the select row's bottom —
* still one visually cohesive unit, just centered instead of
* bottom-aligned.
*/
align-items: center;
gap: clamp(0.75rem, 2vw, 1.5rem);
}
.scg-ecg-screen--ymm .scg-ecg-step {
flex: 1 1 auto;
width: auto; /* overrides .scg-ecg-step's own width:100% below — 100% here would leave GO no room and force it onto its own line */
}
/* Owner directive 2026-08-21: align-items:center above centers GO's MARGIN
BOX against the full label+select block height, landing its center at the
label/select boundary rather than against the selects themselves. Because
align-items:center centers the margin box (not the content box), a
top-only margin only moves the rendered content by HALF of itself — the
other half is absorbed back into the auto-centering offset — so reaching
the measured ~15.6px content shift needed to reach the select boxes'
center takes ~31px of margin-top, not ~16px (verified by measuring
getBoundingClientRect() before/after: 16px of margin-top only moved
content 8px). This offset is font-size/line-height driven, not
viewport-driven, so it holds at both desktop and tablet widths. */
.scg-ecg-screen--ymm .scg-ecg-go {
margin-top: 31px;
}
@media (max-width: 480px) {
/* Reverts to the stacked column layout (below) once Make/Model/Year
themselves stack into one column — a horizontal row stops making
sense at that width, and GO simply follows as its own row. */
.scg-ecg-screen--ymm.is-active {
flex-direction: column;
align-items: center;
}
.scg-ecg-screen--ymm .scg-ecg-step {
width: 100%;
}
.scg-ecg-screen--ymm .scg-ecg-go {
margin-top: 0; /* own row in the stacked layout — no cross-row centering to correct for */
}
}
/*
* Grid, not flex: children are the flat sequence
* label,select,label,select,label,select (Make/Model/Year — see
* expert-choice-guide.js). grid-auto-flow:column with two explicit rows
* fills column-by-column (item 1+2 -> column 1 rows 1-2, item 3+4 ->
* column 2, ...), which is what actually keeps each label directly above
* its own select without needing a wrapper element per pair. Fluid
* minmax() column width plus the 480px stack breakpoint below is what
* keeps this usable across viewports without hardcoding it to one width.
*/
.scg-ecg-step {
display: grid;
grid-template-rows: auto auto;
grid-auto-flow: column;
grid-auto-columns: minmax(100px, 1fr);
gap: 0.3rem clamp(0.6rem, 2vw, 1.25rem);
align-items: end;
width: 100%;
max-width: 640px;
}
@media (max-width: 480px) {
.scg-ecg-step {
grid-template-rows: none;
grid-auto-flow: row;
grid-template-columns: 1fr;
}
/* Stacking Make/Model/Year vertically (above) needs more height than a
strict 3:2 box has room for at narrow widths — YMM's content is
normal document flow (not absolutely positioned, unlike Pit Stop's),
so letting height follow content here, instead of the locked ratio,
is what keeps every control visible and unclipped (requirement:
"controls remain usable... no horizontal [or vertical] overflow").
background-size:contain on the image itself is unaffected: the photo
still renders at its own correct proportions, just with more ivory
margin around it in the taller box. Pit Stop is NOT included in this
rule — its content is positioned against specific photo bands and
depends on the aspect-ratio height, see its own comments below. */
.scg-ecg-screen--ymm {
aspect-ratio: auto;
/* Anchoring the photo to the top (instead of the default vertical
center) means everything below its own bottom edge, in this
auto-height box, is guaranteed plain background-color — never
part of the image's title/logo artwork — so the controls have a
real place to live without overlapping either. The photo itself
is untouched: same file, same background-size:contain, same
full-width/uncropped render, just anchored differently. */
background-position: center top;
}
.scg-ecg-screen--ymm.is-active {
min-height: 78vw; /* keeps a landscape feel close to 3:2 (66.7vw) with headroom for the stacked controls, rather than collapsing to bare content height */
padding-top: 6%;
padding-bottom: 6%;
/* Owner directive 2026-08-21: the controls used to be centered
against the FULL box height, which is also where the photo itself
is centered — since the stacked Make/Model/Year+GO block is much
taller than the "empty" band between the photo's baked-in title
and its logo, centering both on the same point guaranteed the
controls would spill into the title (above) and the logo (below)
no matter how tall the box grew. flex-start + the spacer below
moves the controls out of the photo's title/logo bands entirely,
into the box's own auto-growing space beneath the photo. */
justify-content: flex-start;
}
.scg-ecg-screen--ymm .scg-ecg-step {
position: relative;
gap: 0.2rem;
}
.scg-ecg-screen--ymm .scg-ecg-step::before {
/* Reserves exactly the photo's own rendered footprint (3:2, i.e.
66.67% of this element's own width, since it shares the same
border-box sizing/width basis as the image) plus a small
clearance, so Make's label/select never render over the photo's
title/logo graphics. Computed from this element's own width
rather than a fixed px/vw guess, so it tracks the real rendered
image size at any width in this breakpoint. */
content: '';
display: block;
width: 100%;
padding-top: calc(66.67% + 24px);
}
.scg-ecg-screen--ymm .scg-ecg-step label {
font-size: 0.7rem;
margin-bottom: 0.2rem;
}
.scg-ecg-screen--ymm .scg-ecg-step select {
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
}
.scg-ecg-screen--ymm.is-active {
gap: 0.5rem;
}
.scg-ecg-screen--ymm .scg-ecg-go {
padding: 0.5rem 1.4rem;
font-size: 0.9rem;
}
/*
* Pit Stop's readout/controls-row/error are absolutely positioned
* against specific percentage bands of the photo on desktop (see their
* own rules above) — at narrow widths where the three controls wrap
* onto multiple stacked rows (each flex item's 200px basis no longer
* fits side by side), that fixed "bottom:5%" block grows tall enough
* to collide with the "top:46%" readout above it. Switching all three
* to normal in-flow stacking (readout, then any error, then controls)
* with the same auto-height box as YMM removes the fixed bands
* entirely, so nothing can overlap regardless of how many rows the
* controls wrap onto.
*/
.scg-ecg-screen--pitstop {
aspect-ratio: auto;
/* Owner directive 2026-08-21: same fix as YMM's mobile breakpoint —
the readout/controls used to be flex-start stacked while the photo
stayed vertically CENTERED in this auto-growing box, so the top of
the stack (the readout) landed on the photo's own baked-in
"PIT STOP" title/logo, and the controls below it landed on the
service-bay artwork. Anchoring the photo to the top instead means
everything below its own bottom edge is guaranteed plain
background-color, never part of the artwork — see the readout's
own spacer below for how the controls get pushed into that space.
Photo itself is untouched: same file, same background-size:contain,
same full-width/uncropped render, just anchored differently. */
background-position: center top;
}
.scg-ecg-screen--pitstop.is-active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.85rem;
min-height: 78vw;
padding-top: 6%;
padding-bottom: 6%;
}
/*
* Owner directive 2026-08-21: these three overrides never actually
* applied at any viewport — `.scg-ecg-screen--pitstop .scg-ecg-*`
* (2 classes) has the exact same specificity as each element's own
* desktop `position:absolute` rule further down this file (also 2
* classes), and CSS breaks specificity ties by source order, so the
* later desktop rule always won regardless of media query. That's WHY
* the readout and controls were rendering absolutely-positioned (against
* 46%/bottom:5% of the box) directly on top of each other and on top of
* the photo's own artwork, instead of the intended static, in-flow,
* non-overlapping stack. Compounding in `.is-active` (always present
* whenever this screen is visible, so behavior is unchanged) raises
* these to 3 classes, which reliably wins regardless of source order.
*/
.scg-ecg-screen--pitstop.is-active .scg-ecg-vehicle-readout {
position: static;
transform: none;
width: 100%;
order: 1;
/* Reserves the photo's own rendered footprint (3:2, i.e. 66.67% of
this element's own width, since it shares the same border-box
width basis as the image) plus a small clearance, so the readout
text renders below the photo instead of over its title/logo.
Computed from this element's own width rather than a fixed px/vw
guess, so it tracks the real rendered image size at any width in
this breakpoint — same technique verified on YMM's mobile fix. */
padding-top: calc(66.67% + 24px);
}
.scg-ecg-screen--pitstop.is-active .scg-ecg-error-message {
position: static;
transform: none;
width: 100%;
max-width: none;
order: 2;
}
.scg-ecg-screen--pitstop.is-active .scg-ecg-controls-row {
position: static;
transform: none;
width: 100%;
order: 3;
}
}
.scg-ecg-step label {
display: block;
/* MAKE / MODEL / YEAR labels: prominent, bold, orange — Owner directive
2026-08-19 (the clean image no longer carries this text itself). */
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: clamp(0.75rem, 0.6rem + 0.5vw, 0.9rem);
color: #E1601A;
margin-bottom: 0.3rem;
/* A thin light halo keeps the orange label legible if it ever sits
directly over a busier part of the photo at very narrow widths. */
text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}
.scg-ecg-step select,
.scg-ecg-budget input {
width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.6rem;
font-size: 1rem;
font-weight: 600;
color: #1B2A4A;
border: 1.5px solid #1B2A4A;
border-radius: 4px;
background: #fff;
}
.scg-ecg-go {
display: inline-block;
padding: 0.7rem 1.75rem;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #fff;
background: #E1601A;
border: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 4px 10px -4px rgba(168, 63, 14, .6);
}
.scg-ecg-go:disabled {
background: #a9a9a9;
box-shadow: none;
cursor: not-allowed;
}
.scg-ecg-go:not(:disabled):hover {
background: #A83F0E;
}
/* ---- Pit Stop screen: dynamic vehicle readout ---- */
/* Positioned absolutely against the clean photo's own empty canyon band
(roughly 40%-55% down the 1536x1024 asset) — well clear of the baked-in
logo/"PIT STOP"/subtitle block above it (ends ~30% down) so the two
never overlap. Absolute, not flex-flow, so it can sit in that exact band
regardless of the controls row's own position below. */
.scg-ecg-screen--pitstop .scg-ecg-vehicle-readout {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 640px;
}
.scg-ecg-vehicle-readout {
text-align: center;
padding: 0.4rem 1rem;
}
.scg-ecg-vehicle-readout-makemodel {
/* MAKE MODEL: large, bold, SCG navy — Owner directive 2026-08-19. */
font-size: clamp(1.4rem, 1rem + 2.5vw, 2.25rem);
font-weight: 800;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 0.01em;
color: #12294B;
text-shadow: 0 1px 3px rgba(255, 255, 255, .55);
/* Long make/model combinations wrap onto a second line instead of
overflowing the locked box (requirement: never overflow). */
overflow-wrap: break-word;
}
.scg-ecg-vehicle-readout-year {
margin-top: 0.15rem;
font-size: clamp(1rem, 0.85rem + 0.8vw, 1.35rem);
font-weight: 700;
color: #12294B;
text-shadow: 0 1px 3px rgba(255, 255, 255, .55);
}
/* ---- Pit Stop screen: the three locked controls ---- */
/* Positioned absolutely against the clean photo's own lower band (the
light floor strip just below the pit/service-bay graphic, roughly the
bottom 10% of the 1536x1024 asset — where the prior locked design's
button strip sat) rather than flex-flow, for the same reason as the
vehicle readout above: precise placement against a specific photo band,
independent of whatever else is in the screen. */
.scg-ecg-screen--pitstop .scg-ecg-controls-row {
position: absolute;
left: 50%;
bottom: 5%;
transform: translateX(-50%);
width: 92%;
max-width: 820px;
}
.scg-ecg-controls-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: clamp(0.6rem, 2vw, 1.25rem);
width: 100%;
}
.scg-ecg-control {
position: relative; /* anchors this control's own .scg-ecg-popup */
flex: 1 1 200px;
max-width: 260px;
}
.scg-ecg-control-btn {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 0.9rem;
background: #FBF7EF;
border: 1.5px solid #E1601A;
border-radius: 8px;
color: #12294B;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
text-align: center;
cursor: pointer;
box-shadow: 0 6px 16px -10px rgba(18, 41, 75, .5);
}
.scg-ecg-control-btn:hover {
background: #fff;
}
.scg-ecg-control-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: #E1601A;
display: inline-flex;
}
.scg-ecg-control-icon svg {
width: 100%;
height: 100%;
}
.scg-ecg-control-label {
overflow-wrap: break-word;
}
.scg-ecg-submit.scg-ecg-control-btn {
background: #E1601A;
border-color: #A83F0E;
color: #fff;
}
.scg-ecg-submit.scg-ecg-control-btn:not(:disabled):hover {
background: #A83F0E;
}
.scg-ecg-submit.scg-ecg-control-btn:disabled {
background: #a9a9a9;
border-color: #a9a9a9;
color: #fff;
cursor: not-allowed;
box-shadow: none;
}
/* Compact popup (Choose Functions / Set Your Budget): opens ABOVE its own
trigger — the controls row sits near the bottom edge of the locked
screen (justify-content:space-between on .scg-ecg-screen--pitstop), and
the screen clips to its rounded corners with overflow:hidden, so a
popup opening downward from a bottom-edge trigger would be cut off.
Opening upward, into the screen's own open middle band, keeps it fully
visible and never covers the whole image. Closes on outside click/Escape
(JS) — sized to stay inside the viewport at any width. */
.scg-ecg-popup {
position: absolute;
bottom: calc(100% + 8px);
top: auto;
left: 50%;
transform: translateX(-50%);
z-index: 5;
width: max-content;
max-width: min(320px, 90vw);
max-height: min(240px, 45vh);
overflow-y: auto;
background: #FBF7EF;
border: 1.5px solid #E1601A;
border-radius: 8px;
box-shadow: 0 12px 28px -10px rgba(18, 41, 75, .45);
padding: 0.85rem 1rem;
text-align: left;
}
@media (max-width: 480px) {
.scg-ecg-popup {
max-width: 88vw;
}
}
.scg-ecg-functions {
border: none;
padding: 0;
margin: 0 0 0.5rem;
}
.scg-ecg-functions legend {
font-weight: 700;
color: #12294B;
padding: 0 0 0.4rem;
font-size: 0.85rem;
}
.scg-ecg-functions label {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.3rem 0;
font-weight: normal;
font-size: 0.9rem;
color: #1B2A4A;
}
.scg-ecg-popup-clear {
display: inline-block;
margin-top: 0.3rem;
padding: 0;
border: none;
background: none;
color: #E1601A;
font-size: 0.8rem;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.scg-ecg-budget {
max-width: 100%;
}
.scg-ecg-budget label {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
font-size: 0.85rem;
color: #12294B;
}
.scg-ecg-budget input {
margin-bottom: 0.5rem;
}
.scg-ecg-budget .scg-ecg-no-maximum-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: normal;
margin-top: 0.4rem;
}
.scg-ecg-error-message {
padding: 0.75rem 1rem;
border: 1px solid #e0b4b4;
background: #fdf2f2;
color: #8a2c2c;
border-radius: 4px;
margin-bottom: 1rem;
}
/* Inside the Pit Stop screen specifically: positioned just above the
controls row (itself bottom:5%, see above) rather than in normal flow,
since its sibling controls row is now absolutely positioned too. Only
ever visible when showError() has actually set display:block. */
.scg-ecg-screen--pitstop .scg-ecg-error-message {
position: absolute;
left: 50%;
bottom: 22%;
transform: translateX(-50%);
width: 90%;
max-width: 560px;
margin-bottom: 0;
text-align: center;
}
.scg-ecg-loading,
.scg-ecg-empty {
padding: 1rem;
background: #f4f4f4;
border-radius: 4px;
}
.scg-ecg-reduced-results {
padding: 0.75rem 1rem;
background: #fff8ec;
border: 1px solid #f0d9a6;
border-radius: 4px;
margin-bottom: 1rem;
font-size: 0.9rem;
color: #6a5300;
}
.scg-ecg-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
margin-bottom: 2rem;
}
.scg-ecg-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: #fff;
}
.scg-ecg-card-best-value {
border-color: #1a6b3a;
box-shadow: 0 0 0 2px rgba(26, 107, 58, 0.15);
}
.scg-ecg-card-tier {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
font-weight: 700;
color: #666;
}
.scg-ecg-card-title {
margin: 0;
font-size: 1.15rem;
}
.scg-ecg-card-price {
font-size: 1.4rem;
font-weight: 700;
}
.scg-ecg-suitability-badge {
display: inline-block;
align-self: flex-start;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
background: #eee;
}
.scg-ecg-suitability-beginner { background: #e6f4ea; color: #1a6b3a; }
.scg-ecg-suitability-intermediate { background: #fff4e0; color: #8a5a00; }
.scg-ecg-suitability-professional { background: #e6ecff; color: #2a3e9c; }
.scg-ecg-recommendation-summary {
font-size: 0.95rem;
font-weight: 600;
color: #1a6b3a;
margin: 0;
}
.scg-ecg-why-matches {
font-size: 0.9rem;
color: #444;
}
.scg-ecg-advanced-note {
font-size: 0.8rem;
color: #6a5300;
background: #fffaf0;
border-radius: 4px;
padding: 0.4rem 0.6rem;
margin: 0.25rem 0 0;
}
.scg-ecg-requested-function-note {
font-size: 0.8rem;
color: #2a3e6c;
background: #eef2ff;
border-radius: 4px;
padding: 0.4rem 0.6rem;
margin: 0.25rem 0 0;
}
.scg-ecg-suitability-explanation {
font-size: 0.85rem;
color: #555;
font-style: italic;
}
.scg-ecg-fn-list,
.scg-ecg-why-not-list {
margin: 0.25rem 0 0;
padding-left: 1.1rem;
font-size: 0.9rem;
}
.scg-ecg-why-not {
font-size: 0.85rem;
color: #7a5200;
background: #fff8ec;
border-radius: 4px;
padding: 0.5rem 0.75rem;
}
.scg-ecg-card-actions {
margin-top: auto;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.scg-ecg-buy-btn {
display: inline-block;
padding: 0.6rem 1rem;
border-radius: 4px;
border: none;
background: #f0a500;
color: #fff;
font-weight: 700;
cursor: not-allowed;
opacity: 0.7;
text-decoration: none;
text-align: center;
}
.scg-ecg-buy-btn-active {
cursor: pointer;
opacity: 1;
}
.scg-ecg-buy-btn-active:hover {
background: #d69200;
}
.scg-ecg-learn-more {
padding: 0.6rem 1rem;
border-radius: 4px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
font-weight: 600;
}
.scg-ecg-learn-more:hover {
background: #f4f4f4;
}
.scg-ecg-guide-link {
padding: 0.6rem 1rem;
border-radius: 4px;
color: #1a6b3a;
text-decoration: underline;
font-weight: 600;
}
.scg-ecg-compare-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scg-ecg-compare-table {
/* Owner directive 2026-08-25 (QA fix): was width:100%, which forced
every column to compress instead of wrapping/scrolling — a wide
3-column comparison became unreadable. Cell text now wraps (see
th/td rule below), so auto layout sizes each column to its wrapped
content instead of one unbroken line; .scg-ecg-compare-wrap's
overflow-x:auto is still there as a fallback for anything that
still doesn't fit at min-width. */
min-width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
/* Same cream/orange-outline treatment as the Pros/Cons and Sources
boxes above (Owner directive 2026-08-24) — this table is shared by
the scanner page's live spec table and the comparison page, so this
also brings the comparison table into the same visual family. */
background: #FBF7EF;
border: 1.5px solid #E1601A;
border-radius: 8px;
}
.scg-ecg-compare-table th,
.scg-ecg-compare-table td {
border: 1px solid rgba(225, 96, 26, 0.25);
padding: 0.5rem 0.75rem;
text-align: left;
/* Owner directive 2026-08-25 (QA fix): was nowrap, which forced every
column as wide as its longest single line (e.g. a full Update Policy
sentence) and made 3-scanner comparisons scroll far more than the
content needed. Wrapping + a per-column max-width lets long text
break onto multiple lines instead, so the table only needs to
scroll when it genuinely doesn't fit, not for every comparison. */
white-space: normal;
max-width: 260px;
vertical-align: top;
}
.scg-ecg-compare-table td:first-child {
white-space: nowrap;
max-width: none;
font-weight: 600;
}
.scg-ecg-compare-table thead th {
background: rgba(225, 96, 26, 0.1);
color: #12294B;
}
/* ---------------------------------------------------------------- */
/* Scanner product page: hero photo + editorial content typography */
/* (SCG_CONTENT_WRITING_STANDARD.md, 2026-08-24). The photo comes */
/* from the post's own Featured Image (the_post_thumbnail()) so it */
/* stays editable through the normal WordPress/Elementor featured- */
/* image mechanism — nothing here hardcodes a specific image file. */
/* ---------------------------------------------------------------- */
/* The active theme (Twenty Twenty-Four) has no header.php of its own, so
get_header() falls back to its generic classic-compat shim — a plain,
unbranded "
" block (this is the exact "Scan Choice Guide /
Find the right OBD2 scanner..." text the Owner saw sitting above the
real branded header on the 2026-08-24 pilot review). get_header() still
has to run — it's what opens the actual / document, not
optional — so the real fix is hiding just this one fallback block once
the real .scg-home-header has rendered right after it, not skipping
get_header() itself (see single-scg_scanner.php's own comment for why
that earlier approach broke the page's CSS/JS loading entirely). */
body:has(.scg-home-header) #header,
body:has(.scg-home-header) #header + hr {
display: none;
}
.scg-ecg-scanner-body {
max-width: 760px;
margin: 0 auto;
}
.scg-ecg-scanner-body h1 {
font-size: 2rem;
line-height: 1.25;
margin: 0 0 1rem;
color: #12294B;
}
.scg-ecg-scanner-photo {
/* Owner directive 2026-08-24: gap above the photo roughly matching the
title's own font-size, so it doesn't sit flush against the header. */
margin: 2rem 0 1rem;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 3 / 2;
}
.scg-ecg-scanner-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.scg-ecg-card-actions-top,
.scg-ecg-card-actions-bottom {
justify-content: center;
margin: 0 0 1.5rem;
}
.scg-ecg-card-actions-bottom {
/* Spaced apart from the spec table right above it (Owner directive
2026-08-24) — the shared .scg-ecg-card-actions base rule's
margin-top:auto does nothing here (this isn't a flex parent), so
the two sat flush against each other without this. */
margin-top: 1.75rem;
}
.scg-ecg-page-content {
font-size: 1.05rem;
line-height: 1.65;
}
.scg-ecg-page-content p {
margin: 0 0 1.1em;
}
.scg-ecg-page-content h2 {
font-size: 1.5rem;
margin: 1.8em 0 0.6em;
}
.scg-ecg-page-content h3 {
font-size: 1.2rem;
margin: 1.5em 0 0.5em;
}
.scg-ecg-page-content h4 {
font-size: 1.05rem;
margin: 1.3em 0 0.4em;
}
.scg-ecg-page-content ul,
.scg-ecg-page-content ol {
margin: 0 0 1.1em;
padding-left: 1.4em;
}
/* Pros/Cons and any other editorial table: same cream-background +
orange-outline treatment already established for popups elsewhere
on the site (.scg-ecg-popup), reused here for visual consistency
rather than inventing a new color language just for this page.
display:block + overflow-x:auto lets a wide table scroll within its
own box on a narrow phone instead of the whole page scrolling. */
.scg-ecg-page-content table.scg-content-table {
display: block;
overflow-x: auto;
width: 100%;
border-collapse: collapse;
margin: 0 0 1.5rem;
font-size: 0.95rem;
background: #FBF7EF;
border: 1.5px solid #E1601A;
border-radius: 8px;
}
.scg-ecg-page-content table.scg-content-table th,
.scg-ecg-page-content table.scg-content-table td {
border: 1px solid rgba(225, 96, 26, 0.25);
padding: 0.6rem 0.85rem;
text-align: left;
vertical-align: top;
}
.scg-ecg-page-content table.scg-content-table thead th {
background: rgba(225, 96, 26, 0.1);
color: #12294B;
font-weight: 700;
}
/* Compact inline citation tags (e.g. "[Amazon]", "[Autel]") used only
inside the "What Amazon Says vs. What Manufacturer Confirms" section,
immediately after the claim they support. Deliberately smaller and
more muted than body text/normal links, so the editorial sentence
stays the visually primary thing on the line and the citation reads
as a footnote, not a second hyperlink competing with the prose. */
.scg-ecg-page-content .scg-cite {
font-size: 0.75rem;
color: #777;
text-decoration: none;
white-space: nowrap;
}
.scg-ecg-page-content .scg-cite + .scg-cite {
margin-left: 0.3em;
}
.scg-ecg-page-content .scg-cite:hover,
.scg-ecg-page-content .scg-cite:focus {
color: #E1601A;
text-decoration: underline;
}
/* "Sources" box: same cream/orange-outline card treatment as the
Pros/Cons table above, so both read as one family of "boxed"
content rather than one being a plain bullet list. */
.scg-ecg-page-content .scg-content-sources {
background: #FBF7EF;
border: 1.5px solid #E1601A;
border-radius: 8px;
padding: 1rem 1.25rem;
margin: 0 0 1.5rem;
}
.scg-ecg-page-content .scg-content-sources h3 {
margin-top: 0;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #E1601A;
}
.scg-ecg-page-content .scg-content-sources ul {
margin-bottom: 0;
}
/* ---------------------------------------------------------------- */
/* "Individual Review" archive (/scanners/) — card grid reusing the */
/* homepage's Featured Scanners card design (.scg-home-card-grid / */
/* .scg-home-content-card, from scg-theme-components/homepage.css), */
/* which already lays out ~3 per row at this container width via its */
/* own auto-fit grid — no new column logic needed here. */
/* ---------------------------------------------------------------- */
.scg-ecg-scanner-archive {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.scg-ecg-archive-header {
text-align: center;
max-width: 640px;
margin: 0 auto 2rem;
}
.scg-ecg-archive-header h1 {
font-size: 2rem;
color: #12294B;
margin: 0 0 0.75rem;
}
.scg-ecg-archive-header p {
color: #555;
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
.scg-ecg-archive-header--secondary {
margin-top: 3.5rem;
}
.scg-ecg-archive-header--secondary h2 {
font-size: 1.5rem;
color: #12294B;
margin: 0;
}
/* ---------------------------------------------------------------- */
/* "Compare Scanners" interactive picker (/compare/) */
/* ---------------------------------------------------------------- */
.scg-ecg-compare-picker {
/* Owner directive 2026-08-25: one large rounded-corner frame (same
24px radius as the homepage hero image) holding both the selector
controls and the results together, instead of a thin bordered strip
above a separate, disconnected results block. */
background: linear-gradient(180deg, #FBF7EF 0%, #F5ECDD 100%);
border: 1.5px solid rgba(225, 96, 26, 0.35);
border-radius: 24px;
box-shadow: var(--scg-shadow, 0 8px 24px -12px rgba(27,20,13,.18));
padding: 2.5rem 2rem;
margin-bottom: 2rem;
text-align: center;
}
.scg-ecg-compare-picker-selects {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: 1rem;
}
.scg-ecg-compare-picker-selects select {
padding: 0.6rem 0.8rem;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 0.95rem;
min-width: 220px;
}
.scg-compare-picker-status {
margin: 0.75rem 0 0;
font-size: 0.9rem;
color: #555;
min-height: 1.2em;
}
#scg-compare-results:empty {
display: none;
}
#scg-compare-results {
margin-top: 1.5rem;
text-align: left;
}
/* ---------------------------------------------------------------- */
/* Comparison-table / recommendation-card thumbnails (Owner directive */
/* 2026-08-25) — same small product photo the Individual Review */
/* archive cards show, now also on the Compare picker's table header */
/* and the Pit Stop recommendation cards. */
/* ---------------------------------------------------------------- */
.scg-ecg-compare-thumb {
margin: 0 0 0.5rem;
}
.scg-ecg-compare-thumb img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 6px;
display: block;
}
.scg-ecg-compare-table thead th {
white-space: normal;
vertical-align: top;
}
.scg-ecg-card-media {
margin: 0 0 0.75rem;
border-radius: 8px;
overflow: hidden;
}
.scg-ecg-card-media img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
display: block;
}
/* ---------------------------------------------------------------- */
/* Compare Scanners — card-grid results (Owner directive 2026-08-25). */
/* Replaces a raw table for the interactive picker specifically: */
/* equal-width columns (--scg-compare-cols set inline per result), */
/* a plain-English capability summary, then the same 10 verified data */
/* points as label/value pairs instead of an uneven table. */
/* ---------------------------------------------------------------- */
.scg-ecg-compare-cardgrid {
display: grid;
grid-template-columns: repeat(var(--scg-compare-cols, 2), 1fr);
gap: 1.25rem;
text-align: left;
margin-top: 1.5rem;
}
@media (max-width: 780px) {
.scg-ecg-compare-cardgrid {
grid-template-columns: 1fr;
}
}
.scg-ecg-compare-card {
background: #fff;
border: 1px solid rgba(225, 96, 26, 0.25);
border-radius: 16px;
padding: 1.25rem;
display: flex;
flex-direction: column;
}
.scg-ecg-compare-card .scg-ecg-compare-thumb {
align-self: center;
margin-bottom: 0.75rem;
}
.scg-ecg-compare-card .scg-ecg-compare-thumb img {
width: 96px;
height: 96px;
}
.scg-ecg-compare-card-title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
color: #12294B;
text-align: center;
}
.scg-ecg-compare-card-summary {
margin: 0 0 1rem;
font-size: 0.9rem;
color: #444;
line-height: 1.5;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(225, 96, 26, 0.2);
}
.scg-ecg-compare-card-specs {
margin: 0;
}
.scg-ecg-compare-card-spec {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.45rem 0;
border-bottom: 1px dashed rgba(225, 96, 26, 0.2);
font-size: 0.88rem;
}
.scg-ecg-compare-card-spec:last-child {
border-bottom: none;
}
.scg-ecg-compare-card-spec dt {
color: #666;
font-weight: 600;
}
.scg-ecg-compare-card-spec dd {
margin: 0;
text-align: right;
color: #12294B;
}