/* =============================================================================
   inventory-pdp.css — v1.6.0 PDP redesign (Phase 3)
   =============================================================================
   Styles for /inventory/{slug-id}/ — the v4 Blue Fox PDP mockup ported as
   semantic class hooks the template parts in template-parts/detail/ emit.

   Loaded conditionally by dealer_fule_enqueue_inventory_assets() when
   $view === 'single'. Listing pages don't pay the byte cost.

   Cascade dependencies: tokens.css (--navy / --paper / --gold etc.) +
   base.css (typography baseline) + components.css (button base).

   Section index (commits land in this order during Phase 3):
     Commit 1 — Base shell, section-head pattern, trust band, hero
                (gallery + info rail + price block + cta stack),
                quick-specs strip, about, highlights card
     Commit 2 — Floorplan section + walkthrough video + tabbed specs
     Commit 3 — FAQ section + inquiry navy card
     Commit 4 — Why-buy-here + similar units + mobile CTA bar + polish
     Commit 5 — (JS only — no CSS this commit)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. BASE SHELL — body bg + article reset
   -----------------------------------------------------------------------------
   The v4 PDP runs on a warm paper background. Each section template part
   carries its own bg color override where the mockup specifies a deeper
   cream (floorplan), warm cream (specs), or deep navy (inquiry card).
   Other sections inherit this body bg unchanged.
   ----------------------------------------------------------------------------- */

body.unit-pdp-active,
.unit-pdp {
	background: var(--paper);
	color: var(--body-text);
	font-family: var(--sans);
}

.unit-pdp h1,
.unit-pdp h2,
.unit-pdp h3,
.unit-pdp h4 {
	font-family: var(--display);
	color: var(--navy);
	margin: 0;
}

.unit-pdp .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

/* Breadcrumbs sit on the same paper bg as the body; the v1.5
   common/breadcrumbs partial already exists and is fine — this just
   tightens its vertical rhythm above the hero. */
.unit-pdp .pdp-crumbs-wrap {
	padding-top: 16px;
	padding-bottom: 0;
}

/* -----------------------------------------------------------------------------
   2. SECTION-HEAD PATTERN
   -----------------------------------------------------------------------------
   Every editorial section (about, floorplan, video, specs, faq, inquiry,
   why-blue-fox, similar) opens with a section-head grid: title block left
   (1.5fr), section-sub copy right (1fr). On narrow viewports the two
   collapse to one column.
   ----------------------------------------------------------------------------- */

.unit-pdp .section {
	padding: 72px 0;
}

.unit-pdp .section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 40px;
	align-items: end;
	margin-bottom: 40px;
}

.unit-pdp .section-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The paw-print glyph next to each section eyebrow. CSS no-ops gracefully
   when --asset-brand-mark resolves to a missing file. */
.unit-pdp .section-label .glyph {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: var(--asset-brand-mark);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

.unit-pdp .section-title {
	font-weight: 500;
	font-size: clamp(28px, 3.5vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.unit-pdp .section-title em {
	font-style: italic;
	font-weight: 500;
	/* Brand yellow on all italicized section-title accents (literally,
	   sorted, no sales pitch). Overrides base.css's global h2 em rule
	   which paints them rust orange. */
	color: var(--gold);
}
.unit-pdp .section-title em.gold { color: var(--gold); }

.unit-pdp .section-sub {
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted);
	max-width: 480px;
}

@media (max-width: 720px) {
	.unit-pdp .section-head {
		grid-template-columns: 1fr;
		gap: 12px;
		align-items: start;
	}
	.unit-pdp .section { padding: 56px 0; }
}

/* -----------------------------------------------------------------------------
   3. TRUST BAND — above-hero affordance row (Phase 1 part, v1.6 styling)
   -----------------------------------------------------------------------------
   Lives in template-parts/detail/trust-band.php. 4 items (left) +
   phone block (right) inside a warm-cream rounded card.
   ----------------------------------------------------------------------------- */

.trust-band {
	max-width: 1280px;
	margin: 16px auto 0;
	padding: 0 clamp(16px, 3vw, 32px);
}

.trust-band-inner {
	background: var(--paper-warm);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.trust-band .items {
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
}

.trust-band .item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--body-text);
	font-weight: 500;
}

.trust-band .item svg {
	width: 18px;
	height: 18px;
	color: var(--success);
	flex-shrink: 0;
}

.trust-band .phone-block {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.trust-band .phone-block .label {
	font-size: 13px;
	color: var(--muted);
}

.trust-band .phone-block .num {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 16px;
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.trust-band .phone-block .num svg {
	width: 16px;
	height: 16px;
	color: var(--gold-deep);
}

@media (max-width: 720px) {
	/* M0: hide the PDP trust band entirely on phones. The outer .trust-band
	   carries margin-top: 16px + padding-inline, so hiding it (not just
	   .trust-band-inner) eliminates the reserved gap that would otherwise
	   remain between the breadcrumbs and the gallery. Desktop + tablet are
	   unchanged. The column-flow rules below stay as dead code under this
	   `display: none` — kept (rather than deleted) so un-hiding is a
	   one-line revert if the trust band returns on phones in a later release. */
	.trust-band { display: none; }

	.trust-band-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 16px;
	}
	.trust-band .items { gap: 12px 22px; }
	.trust-band .item  { font-size: 13px; }
}

/* -----------------------------------------------------------------------------
   4. HERO SECTION
   -----------------------------------------------------------------------------
   Two-column at desktop: gallery left (1.5fr), info rail right (380px+).
   Collapses to one column at 960px.
   ----------------------------------------------------------------------------- */

.pdp-hero-section {
	background: var(--paper);
}

.pdp-hero {
	padding: 24px 0 32px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr);
	gap: 40px;
}

@media (max-width: 960px) {
	.pdp-hero {
		/* minmax(0, 1fr) — NOT bare 1fr — so the track can't expand to fit
		   children's intrinsic min-content. Bare 1fr resolves to
		   minmax(auto, 1fr); the auto min-track-size pulls in the gallery
		   strip's intrinsic flex-children width (was 14 × 88px = 1232px
		   pre-M0-fix) and blows past the viewport, which iOS Safari then
		   scales the whole page down to fit. Pairs with fule-station's
		   gallery.css thumb-sizing change so neither side has armor that
		   forces the strip wider than the column.
		   row-gap is 22px (NOT the surrounding `gap: 24px`) because the
		   H1-reorder rule below promotes .info's 5 children to direct
		   grid items of .pdp-hero via display:contents — the 22px row
		   spacing matches .info's flex `gap: 22px` so the mobile rhythm
		   between badges/H1/stock/price/cta stays identical to today. */
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	/* M0 H1 reorder — mobile-only. .info is the right-column info-rail
	   wrapper from template-parts/detail/hero/info-rail.php; on desktop
	   it stays as `display: flex; flex-direction: column; gap: 22px`
	   (rule above, outside this @media block — untouched by M0).
	   At the mobile breakpoint we promote .info's 5 children
	   (.info-badges, h1, .info-stock, price-block, cta-stack) to direct
	   grid items of .pdp-hero via display: contents. The .info box
	   itself vanishes from layout/style/a11y; H1 keeps its semantics.
	   Then `order: -1` floats the single H1 above the gallery while
	   every other promoted child keeps its natural source order
	   (DOM order: gallery, badges, h1, stock, price, cta —
	   after order:-1 on h1 → h1, gallery, badges, stock, price, cta).
	   .pdp-hero's `gap: 22px` above governs spacing between the
	   promoted children, matching .info's prior flex gap exactly. */
	.pdp-hero .info { display: contents; }
	.pdp-hero .info > h1 { order: -1; }

	/* M0: hide the PDP breadcrumb on mobile (@<=960px, same breakpoint
	   as the H1 reorder above). With the H1 floated to the top, the
	   breadcrumb's trailing segment — which is the unit title as text
	   — sits immediately above an H1 that says the same thing, doubling
	   the visible title on phones. Hiding the wrapper eliminates the
	   duplication without removing the markup: the breadcrumb stays in
	   the DOM source so its BreadcrumbList JSON-LD + the visible <nav>
	   continue to be crawled (mobile-first indexing). Same
	   hidden-but-present pattern as the .trust-band rule at
	   @<=720px above. Desktop + tablet (>960px) render unchanged —
	   breadcrumb stays visible in its normal pre-hero position. */
	.unit-pdp .pdp-crumbs-wrap { display: none; }
}

/* ----- 4a. Gallery — MIGRATED to fule-station plugin (v1.60.0+) -----
   All hero-gallery selectors (.gallery .lead, .gallery-counter,
   .actions-overlay, .icon-btn, .gallery .strip, .thumb, .thumb--more)
   plus the dead "+N more" rule are now owned by
   fule-station/assets/css/gallery.css under the .fule-gallery* namespace.
   The plugin component renders into the same .pdp-hero grid column
   the theme info rail occupies — the .pdp-hero two-column layout above
   (Section 4) is unchanged. */

/* ----- 4b. Info rail — badges + title + stock-meta + price-block + cta-stack ----- */

.pdp-hero .info {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pdp-hero .info-badges {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.pdp-hero .badge {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 4px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pdp-hero .badge.used      { background: var(--ink);  color: #fff; }
.pdp-hero .badge.new       { background: var(--gold); color: var(--navy); }
.pdp-hero .badge.certified { background: var(--navy); color: #fff; }
.pdp-hero .badge.lot {
	background: transparent;
	color: var(--success);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
}
.pdp-hero .badge.lot::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--success);
	border-radius: 50%;
	display: inline-block;
}

.pdp-hero .viewing-now {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.04em;
}

.pdp-hero .info h1 {
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.pdp-hero .info h1 em {
	font-style: italic;
	font-weight: 500;
	color: var(--navy);
}

.pdp-hero .info-stock {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	display: flex;
	gap: 14px;
	align-items: center;
	letter-spacing: 0.02em;
	flex-wrap: wrap;
}
.pdp-hero .info-stock svg {
	width: 13px;
	height: 13px;
	vertical-align: -2px;
	margin-right: 2px;
}
.pdp-hero .info-stock__location {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ----- 4c. Price block — centered MSRP + price + monthly row ----- */

.pdp-hero .price-block {
	background: var(--paper-warm);
	border: 1px solid var(--line);
	padding: 28px 24px 22px;
	border-radius: 12px;
	text-align: center;
}

.pdp-hero .price-block .msrp-line {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.pdp-hero .price-block .msrp-line .strike { text-decoration: line-through; }

.pdp-hero .price-block .price {
	font-family: var(--display);
	font-weight: 500;
	font-size: 56px;
	line-height: 0.95;
	color: var(--navy);
	letter-spacing: -0.02em;
	display: inline-block;
}
.pdp-hero .price-block .price .dollar {
	font-size: 0.5em;
	vertical-align: top;
	margin-right: 2px;
	color: var(--muted);
}

/* Case 3 — MSRP-only as headline, with explanatory tag + CTA below. */
.pdp-hero .price-block .price.price--msrp-only .msrp-tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 400;
	margin-left: 6px;
	vertical-align: 18px;
}
.pdp-hero .price-block .contact-for-price {
	margin-top: 10px;
	font-size: 14px;
	color: var(--gold-deep);
	font-weight: 600;
}

/* Case 4 — "Contact for pricing" without a number at all. Tighter
   visual weight than the dollar-amount price so it doesn't try to
   masquerade as a number. */
.pdp-hero .price-block .price.price--contact {
	font-size: clamp(24px, 3vw, 32px);
	color: var(--navy);
}

.pdp-hero .price-block .monthly {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	text-align: left;
}
.pdp-hero .price-block .monthly .label-mono {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 2px;
}
.pdp-hero .price-block .monthly .num {
	font-family: var(--display);
	font-weight: 500;
	font-size: 22px;
	color: var(--navy);
}
.pdp-hero .price-block .monthly .num em {
	font-style: normal;
	color: var(--gold-deep);
}
.pdp-hero .price-block .monthly .terms {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	text-align: right;
	line-height: 1.6;
	letter-spacing: 0.02em;
}
.pdp-hero .price-block .monthly .terms a {
	color: var(--navy);
	text-decoration: underline;
	font-weight: 500;
}

/* ----- 4d. CTA stack — Check Availability + Price Drop Alert ----- */

.pdp-hero .cta-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Generic button rules for the PDP. Naming aligns with the v4 mockup
   (.btn / .btn-primary / .btn-secondary / .btn-dark) rather than
   the v1.5 .btn--primary modifier convention — the v4 set is local
   to the PDP and doesn't conflict with v1.5's listing-page buttons. */
.pdp-hero .btn,
.cta-stack .btn,
.inquiry-form .btn,
.mobile-cta .btn,
.modal--price-alert .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 20px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.005em;
	transition: all 0.15s var(--ease-out);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--sans);
	line-height: 1;
}

.pdp-hero .btn-primary,
.cta-stack .btn-primary,
.inquiry-form .btn-primary,
.mobile-cta .btn-primary,
.modal--price-alert .btn-primary {
	background: var(--gold);
	color: var(--navy);
}
.pdp-hero .btn-primary:hover,
.cta-stack .btn-primary:hover,
.inquiry-form .btn-primary:hover,
.mobile-cta .btn-primary:hover,
.modal--price-alert .btn-primary:hover {
	background: var(--gold-deep);
	color: var(--navy);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(245, 184, 0, 0.3);
}

.pdp-hero .btn-secondary,
.cta-stack .btn-secondary,
.mobile-cta .btn-secondary {
	background: var(--paper);
	color: var(--navy);
	border-color: var(--navy);
}
.pdp-hero .btn-secondary:hover,
.cta-stack .btn-secondary:hover,
.mobile-cta .btn-secondary:hover {
	background: var(--navy);
	color: #fff;
}

.pdp-hero .btn svg,
.cta-stack .btn svg,
.inquiry-form .btn svg,
.mobile-cta .btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   5. QUICK SPECS STRIP — full-bleed 5-cell row below the hero
   ----------------------------------------------------------------------------- */

.quickspecs-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.quickspecs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.quickspecs .item {
	padding: 24px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	border-right: 1px solid var(--line);
}
.quickspecs .item:last-child { border-right: 0; }

.quickspecs .icon {
	width: 28px;
	height: 28px;
	color: var(--gold-deep);
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
}
.quickspecs .icon svg {
	width: 100%;
	height: 100%;
}

.quickspecs .label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 2px;
}

.quickspecs .value {
	font-family: var(--display);
	font-weight: 500;
	font-size: 22px;
	color: var(--navy);
	line-height: 1;
}
.quickspecs .value .unit {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	margin-left: 3px;
	font-weight: 400;
}

@media (max-width: 960px) {
	.quickspecs { grid-template-columns: repeat(2, 1fr); }
	/* M0 v1.8.3: tighter horizontal padding gives the 2-col rhythm room to
	   breathe at 390px viewport — desktop's 24px 18px left only ~143px
	   usable per cell after subtracting padding, which crowded values like
	   "26,000 lbs" against the right edge. 18px 12px restores ~155px
	   usable. Icon stays at 28px (desktop parity). No white-space:nowrap
	   on .value — let a freak value wrap, don't overflow. */
	.quickspecs .item {
		padding: 18px 12px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.quickspecs .item:nth-child(odd) { border-right: 1px solid var(--line); }
	/* 5-item odd-cell tidy: the last item lands solo at row 3 col 1 with
	   nothing to its right. Suppress the row-divider line so the trailing
	   item doesn't draw a half-row underline. */
	.quickspecs .item:last-child:nth-child(odd) { border-bottom: 0; }
}
/* Sub-374px fallback to 1-col: 374px keeps iPhone 12/13 mini (375px) +
   iPhone 12/13/14/15 (390-393px) + the vast majority of phones in the
   2-col layout from the rule above. The clamp() floor on .quickspecs-wrap
   padding doesn't tighten until below 376px, so cell math is equivalent
   at 375px and 390px (~113px usable per cell — same headroom). Only the
   genuinely narrow ~360px Galaxy-class portraits fall through here,
   where a 2-col cell shrinks to ~114px usable after padding and a
   7-character value like "26,000 lbs" starts to crowd the edge. */
@media (max-width: 374px) {
	.quickspecs { grid-template-columns: 1fr; }
	.quickspecs .item { border-right: 0 !important; }
}

/* -----------------------------------------------------------------------------
   6. ABOUT SECTION — prose left (1.5fr), highlights card right (1fr)
   ----------------------------------------------------------------------------- */

.unit-pdp .about-section {
	background: var(--paper);
}

.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 48px;
}

@media (max-width: 720px) {
	.about-grid { grid-template-columns: 1fr; gap: 24px; }
}

.about-section .prose {
	font-size: 17px;
	line-height: 1.7;
	color: var(--body-text);
}
.about-section .prose p + p { margin-top: 16px; }
.about-section .prose strong { color: var(--navy); font-weight: 600; }

.about-section .about-meta {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 36px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.04em;
	flex-wrap: wrap;
}
.about-section .about-meta strong {
	color: var(--navy);
	font-weight: 500;
	margin-right: 4px;
}

/* -----------------------------------------------------------------------------
   7. HIGHLIGHTS CARD — right column of about section
   ----------------------------------------------------------------------------- */

.highlights-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 28px;
	align-self: start;
	position: relative;
}

.highlights-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.highlights-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.highlights-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	font-size: 15px;
	color: var(--body-text);
	font-weight: 500;
}
.highlights-list li .check {
	width: 22px;
	height: 22px;
	background: var(--gold);
	color: var(--navy);
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.highlights-list li .check svg {
	width: 12px;
	height: 12px;
}

.highlights-card .full-specs {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 12px;
	color: var(--navy);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
}
.highlights-card .full-specs:hover { color: var(--gold-deep); }
.highlights-card .full-specs svg { width: 12px; height: 12px; }

/* -----------------------------------------------------------------------------
   8. FLOORPLAN SECTION — full-bleed paper-deep bg, white card, data strip
   -----------------------------------------------------------------------------
   Phase 2 template renders the actual CloudFule-supplied floorplan image
   (PNG/JPG from img.cdn) inside the white card — the v4 mockup's hand-drawn
   SVG zones are mockup-only. Real floorplan images vary widely in aspect
   ratio, so the card adapts: max-width caps it; height auto-flows.
   ----------------------------------------------------------------------------- */

.floorplan-section {
	background: var(--paper-deep);
	padding: 72px 0;
}

.floorplan-section .head-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.floorplan-section .floorplan-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 32px;
}

.floorplan-canvas {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

/* v1.6.4 — white image card. The "card" used to be the <a> element
   itself; v1.6.4-iter promotes it to a wrapper div (.floorplan-card)
   so the length annotation can live inside the card alongside the
   image link without polluting the <a>'s accessible name.
   Cohesive card: when followed by a specs strip, flatten bottom
   corners + drop bottom border so the strip below seams into the
   same card with an internal hairline divider. The :has(...) gate
   keeps the rounded bottom on sparse units that have a floorplan
   image but no spec cells. */
.floorplan-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
}

.floorplan-canvas:has(+ .floorplan-data-wrap) .floorplan-card {
	border-bottom: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.floorplan-card a { display: block; }

.floorplan-card img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
	background: #fff;
}

/* v1.6.4-iter — dashed-line length annotation, now inside the white
   card at the top with measurement-bracket ticks at the left + right
   edges. Pattern matches an architectural dimension callout: vertical
   tick at each endpoint, horizontal dashed line spanning between them,
   text label centered on the line with the card's white background
   masking the dashed line behind it. When the plugin helper returns
   ''  (no length data), the entire annotation block is skipped so
   we never render an empty bracket. */
.floorplan-card .floorplan-length-annotation {
	position: relative;
	margin: 16px 28px 20px;
	padding: 6px 0;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted);
	text-align: center;
	border-left: 1px solid var(--line-strong);
	border-right: 1px solid var(--line-strong);
}
.floorplan-card .floorplan-length-annotation::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	border-top: 1px dashed var(--line-strong);
}
.floorplan-card .floorplan-length-annotation span {
	position: relative;
	background: #fff; /* mask dashed line; card bg is white */
	padding: 0 14px;
}

.floorplan-data-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.floorplan-data {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 1px solid var(--line); /* internal hairline divider */
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
}

.floorplan-data .item {
	padding: 22px 20px;
	border-right: 1px solid var(--line);
}
.floorplan-data .item:last-child { border-right: 0; }

.floorplan-data .label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}
.floorplan-data .value {
	font-family: var(--display);
	font-weight: 500;
	font-size: 19px;
	color: var(--navy);
}

@media (max-width: 720px) {
	.floorplan-data { grid-template-columns: repeat(2, 1fr); }
	.floorplan-data .item { border-right: 0; border-bottom: 1px solid var(--line); }
	.floorplan-data .item:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* -----------------------------------------------------------------------------
   9. VIDEO SECTION — paper bg, dark iframe frame, narrative meta strip
   -----------------------------------------------------------------------------
   Replaces the v1.5 .video-embed (which was just an aspect-ratio iframe
   with no chrome). v1.6 surrounds it with section-head editorial + a
   meta strip below the iframe matching the v4 mockup's "Filmed at the
   Logan Lot" treatment.
   ----------------------------------------------------------------------------- */

.video-section { background: var(--paper); }

.video-section .video-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #6b7c8e 0%, #455a6e 100%);
	border-radius: 12px;
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
}

.video-section .video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Caption strip beneath the iframe — only visible when nothing's playing
   (the iframe covers the gradient bg, the .meta block sits underneath
   and only peeks at the corners where YouTube's player chrome is
   transparent). Treat as decorative; aria-hidden in the template. */
.video-section .video-wrap .meta {
	position: absolute;
	bottom: 12px;
	left: 16px;
	right: 16px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 12px;
	pointer-events: none;
	z-index: 0;
}

.video-section .video-wrap .meta .title {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 500;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.video-section .video-wrap .meta .lot {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------------------------------------
   10. TABBED SPECS — paper-warm bg, white specs-box card, 3-tab nav
   -----------------------------------------------------------------------------
   Replaces the v1.5 .specs-by-category accordions with the v4 mockup's
   3-tab cohesive box. Each tab has icon + label + count pill + sub-desc;
   each pane has a 2-col grid of category cards inside.

   Accessibility: all 3 panes are in the DOM (not lazy-loaded); only one
   has .active at a time. Screen readers and crawlers see every spec
   value without JS. Tab click reveals the active pane via class toggle.
   ----------------------------------------------------------------------------- */

.specs-section { background: var(--paper-warm); }

.specs-section .specs-box {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.specs-section .tabs-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	background: var(--paper-deep);
	border-bottom: 1px solid var(--line);
}

.specs-section .tab {
	padding: 22px 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--line);
	position: relative;
	transition: background 0.18s var(--ease-out);
	font-family: var(--sans);
	color: var(--body-text);
}
.specs-section .tab:last-child { border-right: 0; }
.specs-section .tab:hover:not(.active) {
	background: rgba(255, 255, 255, 0.45);
}
.specs-section .tab.active {
	background: var(--paper);
}
.specs-section .tab.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gold);
}

.specs-section .tab .ico {
	width: 38px;
	height: 38px;
	background: var(--navy);
	border-radius: 8px;
	display: grid;
	place-items: center;
	color: var(--gold);
	flex-shrink: 0;
}
.specs-section .tab .ico svg {
	width: 19px;
	height: 19px;
}

.specs-section .tab .text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.specs-section .tab .name {
	font-family: var(--display);
	font-weight: 500;
	font-size: 17px;
	color: var(--navy);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}
.specs-section .tab .name .count {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	font-weight: 400;
}
.specs-section .tab .desc {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

@media (max-width: 720px) {
	.specs-section .tabs-wrap { grid-template-columns: 1fr; }
	.specs-section .tab {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.specs-section .tab:last-child { border-bottom: 0; }
}

/* ----- Panes — 2-col grid of category cards ----- */

.specs-section .specs-content {
	padding: 8px 32px 24px;
}
@media (max-width: 720px) {
	.specs-section .specs-content { padding: 8px 20px 20px; }
}

.specs-section .tab-pane { display: none; }
.specs-section .tab-pane.active { display: block; }

.specs-section .specs-empty {
	padding: 24px 0;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

.specs-section .specs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
}
@media (max-width: 720px) {
	.specs-section .specs-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.specs-section .spec-group {
	padding: 24px 0 8px;
}

.specs-section .spec-group h4 {
	font-family: var(--display);
	font-weight: 500;
	font-size: 18px;
	color: var(--navy);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line-strong);
	margin-bottom: 6px;
}
.specs-section .spec-group h4 .count {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	font-weight: 400;
}

.specs-section .spec-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px dotted var(--line);
	font-size: 14px;
	gap: 12px;
}
.specs-section .spec-row:last-child { border-bottom: 0; }
.specs-section .spec-row .l { color: var(--muted); }
.specs-section .spec-row .v {
	color: var(--body-text);
	font-weight: 500;
	text-align: right;
	font-family: var(--mono);
	font-size: 13px;
}

/* -----------------------------------------------------------------------------
   11. FAQ SECTION — paper-warm bg, native <details>/<summary> stack
   -----------------------------------------------------------------------------
   Phase 2 ships authored FAQs only (v1.24.0 layer). Phase 4 layers
   generated Qs on top via the .faq-generated mount point in the template
   (no CSS needed yet for that — same .faq-item shape will be reused).

   <details> + <summary> is a deliberate semantic choice: no JS to
   open/close, screen readers get the right affordance, and the
   answer text is in the DOM for crawlers + FAQPage schema even when
   collapsed.
   ----------------------------------------------------------------------------- */

.faq-section { background: var(--paper); }  /* v1.6.2: shifted from --paper-warm to --paper after FAQ moved below the --paper-deep why-section */

.faq-list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 18px 22px;
	transition: border-color 0.18s var(--ease-out);
}
.faq-item[open] { border-color: var(--line-strong); }

.faq-item summary {
	cursor: pointer;
	font-family: var(--display);
	font-weight: 500;
	font-size: 18px;
	color: var(--navy);
	letter-spacing: -0.005em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Custom open/close glyph — rotated chevron. Matches the trust band's
   stroke-icon style. */
.faq-item summary::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.18s var(--ease-out);
}
.faq-item[open] summary::after {
	transform: rotate(180deg);
}

.faq-answer {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dotted var(--line);
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-text);
}
.faq-answer p:first-child { margin-top: 0; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.faq-answer a:hover { color: var(--gold-deep); }

/* -----------------------------------------------------------------------------
   12. INQUIRY SECTION — navy card with mascot, contact left, form right
   -----------------------------------------------------------------------------
   The riskiest visual piece in the rebuild. The fox-accent mascot
   positions at the bottom seam between the left column (navy bg)
   and the right column (cream form card), pointing into the form.

   Mockup geometry: --container 1280px, .inquiry-card 1-col-wide,
   .inquiry-grid 2-col (.inquiry-left + form), gap 0. Fox positioned
   absolutely with bottom: 12px and left: calc(50% - 145px). On real
   sites the container may render narrower than 1280px (depending
   on viewport + scrollbar), but the fox is anchored to .inquiry-card
   not the viewport, so the math holds proportionally regardless of
   actual rendered width.

   Decorative gradient circles in ::before / ::after create the
   subtle gold-glow corners. Pointer-events: none so they don't
   block form interaction.
   ----------------------------------------------------------------------------- */

.inquiry-section { background: var(--paper); }

.inquiry-card {
	background: var(--navy);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(13, 39, 69, 0.18);
}

.inquiry-card::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(245, 184, 0, 0.14) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}
.inquiry-card::after {
	content: '';
	position: absolute;
	bottom: -180px;
	left: -100px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(245, 184, 0, 0.06) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.inquiry-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	align-items: stretch;
	position: relative;
	z-index: 1;
}

@media (max-width: 960px) {
	.inquiry-grid { grid-template-columns: 1fr; }
}

/* ----- 12a. Left column — eyebrow, headline, lede, contact list, callout ----- */

.inquiry-left {
	padding: 48px;
	color: #fff;
	position: relative;
}

@media (max-width: 720px) {
	.inquiry-left { padding: 32px; }
}

.inquiry-left .section-label {
	color: rgba(255, 255, 255, 0.55);
}
.inquiry-left .section-label .glyph {
	filter: brightness(1.6) saturate(0.6);
	opacity: 0.9;
}

.inquiry-left h2 {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #fff;
	margin-bottom: 16px;
}
.inquiry-left h2 em {
	font-style: italic;
	color: var(--gold);
	font-weight: 500;
}

.inquiry-left p {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 28px;
	max-width: 380px;
}

/* Contact methods list — phone / email / address rows. */
.inquiry-left .contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.inquiry-left .contact-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	transition: all 0.15s var(--ease-out);
}
.inquiry-left .contact-list li:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
}

.inquiry-left .contact-list .ico {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	display: grid;
	place-items: center;
	color: var(--gold);
	flex-shrink: 0;
}
.inquiry-left .contact-list .ico svg {
	width: 16px;
	height: 16px;
}

.inquiry-left .contact-list .text { flex: 1; min-width: 0; }
.inquiry-left .contact-list .label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.inquiry-left .contact-list .value {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	word-break: break-word;
}
.inquiry-left .contact-list a {
	color: inherit;
	text-decoration: none;
}
.inquiry-left .contact-list a:hover {
	color: var(--gold);
}

/* "You're inquiring about" reassurance card */
.inquiry-left .inquiring-callout {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.inquiry-left .inquiring-callout .label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 2px;
}
.inquiry-left .inquiring-callout .unit {
	font-family: var(--display);
	font-size: 16px;
	color: #fff;
	font-weight: 500;
	line-height: 1.25;
}
.inquiry-left .inquiring-callout .price {
	font-family: var(--display);
	font-weight: 500;
	font-size: 22px;
	color: var(--gold);
	white-space: nowrap;
}

/* ----- 12b. Fox mascot — bottom-seam positioning ----- */

/* Mockup math: 155×155 px asset, bottom: 12px from card edge, left:
   calc(50% - 145px) so it sits centered-but-slightly-left of the
   .inquiry-card midline (the 50%) — overlapping into the right
   column's form card while pointing right. Rotated -3deg for
   personality. Filter drop-shadow for visual depth without
   needing an alpha-clipped PNG.

   z-index: 3 over the form card so the fox is visually in front.
   pointer-events: none so dragging across the fox doesn't block
   form clicks.

   Asset reference: var(--asset-fox-rv). When the file is missing
   the background-image silently no-ops and the div takes no
   visible space (still 155×155 but transparent) — Phase 3 ships
   correctly even without the mascot on disk yet. */
.inquiry-card .fox-accent {
	position: absolute;
	width: 155px;
	height: 155px;
	bottom: 12px;
	left: calc(50% - 145px);
	background-image: var(--asset-fox-rv);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	pointer-events: none;
	z-index: 3;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
	transform: rotate(-3deg);
}

/* On narrow viewports the .inquiry-grid stacks single-column, so the
   "bottom seam" no longer exists between two columns. Move the fox
   to the top-right corner of the navy card as a smaller accent —
   still readable as a brand element without dominating layout. */
@media (max-width: 960px) {
	.inquiry-card .fox-accent {
		width: 110px;
		height: 110px;
		bottom: auto;
		top: 16px;
		left: auto;
		right: 18px;
		/* Flip horizontally so the pointing direction makes sense
		   on the right edge (pointing inward, not off-screen). */
		transform: rotate(-3deg) scaleX(-1);
	}
}

@media (max-width: 480px) {
	.inquiry-card .fox-accent {
		width: 80px;
		height: 80px;
		top: 12px;
		right: 12px;
	}
}

/* ----- 12c. Right column — inset cream form card ----- */

.inquiry-section .inquiry-form {
	background: var(--paper);
	border: 0;
	border-radius: 12px;
	padding: 32px;
	margin: 32px 32px 32px 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	font-family: var(--sans);
}

@media (max-width: 960px) {
	.inquiry-section .inquiry-form {
		margin: 0 32px 32px 32px;
	}
}
@media (max-width: 720px) {
	.inquiry-section .inquiry-form {
		margin: 0 24px 24px 24px;
		padding: 24px;
	}
}

.inquiry-form .field { margin-bottom: 14px; }
.inquiry-form .field label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--body-text);
	margin-bottom: 4px;
}
.inquiry-form .field input,
.inquiry-form .field textarea,
.inquiry-form .field select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: var(--body-text);
}
.inquiry-form .field input:focus,
.inquiry-form .field textarea:focus,
.inquiry-form .field select:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(13, 39, 69, 0.08);
}
.inquiry-form .field textarea {
	resize: vertical;
	min-height: 90px;
}

.inquiry-form .fieldrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 480px) {
	.inquiry-form .fieldrow { grid-template-columns: 1fr; }
}

/* Honeypot — visually hidden, AT-hidden, but still focusable for
   bot detection to fire. Off-screen rather than display:none so
   keyboard nav doesn't notice but submission still includes it. */
.inquiry-form .honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.inquiry-form .consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--muted);
	margin: 16px 0;
	line-height: 1.5;
	cursor: pointer;
}
.inquiry-form .consent input { margin-top: 2px; flex-shrink: 0; }
.inquiry-form .consent span { line-height: 1.5; }

.inquiry-form__submit {
	width: 100%;
}

.inquiry-form .form-footer {
	margin-top: 14px;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.inquiry-form .form-footer svg {
	width: 12px;
	height: 12px;
}

/* -----------------------------------------------------------------------------
   13. WHY-BUY-HERE STATS ROW — paper-deep bg, 5 stat cards
   -----------------------------------------------------------------------------
   Decorative pop of the paw glyph as a background element top-right of
   the section (subtle, 5% opacity). 5-col grid of stat cards collapses
   to 2-col at 960px and 1-col at 480px.

   Reviews card is the only "live data" card (Google review score +
   count from primary location); the other 4 are editorial pillars
   from dealer_pillars_* settings. CSS doesn't differentiate them —
   visual rhythm stays consistent across all 5.
   ----------------------------------------------------------------------------- */

.why-section {
	background: var(--paper-deep);
	position: relative;
	overflow: hidden;
}

.why-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: -100px;
	width: 380px;
	height: 380px;
	background-image: var(--asset-brand-mark);
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.05;
	transform: rotate(-15deg);
	pointer-events: none;
}

.why-section .stats-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	position: relative;
}

@media (max-width: 960px) {
	.why-section .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.why-section .stats-row { grid-template-columns: 1fr; }
}

.why-section .stat-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 24px;
}

.why-section .stat-card .ico {
	width: 32px;
	height: 32px;
	color: var(--gold-deep);
	margin-bottom: 14px;
}
.why-section .stat-card .ico svg {
	width: 100%;
	height: 100%;
}

.why-section .stat-card .num {
	font-family: var(--display);
	font-weight: 500;
	font-size: 26px;
	color: var(--navy);
	letter-spacing: -0.01em;
	line-height: 1;
}
.why-section .stat-card .num em {
	font-style: italic;
	color: var(--gold-deep);
}

.why-section .stat-card .label {
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	margin: 6px 0 4px;
}

.why-section .stat-card .sub {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   14. SIMILAR UNITS — 3-card grid, see-all link in head row
   -----------------------------------------------------------------------------
   Defers card markup to template-parts/listing/unit-card.php (shared
   with archive page); the inner .similar-grid carries an additional
   .dealer-fule-listing class so the listing-scoped card CSS in
   inventory.css cascades into these cards. Without that opt-in
   wrapper, the .photo-count + .badge-condition chips lose their
   absolute positioning and surface inline (v1.6.2 fix).
   This section just handles the section chrome + grid container +
   see-all CTA in the head row.
   ----------------------------------------------------------------------------- */

.similar-section { background: var(--paper); }

.similar-section .similar-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 16px;
}

.similar-section .see-all {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--navy);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.similar-section .see-all:hover { color: var(--gold-deep); }
.similar-section .see-all svg { width: 12px; height: 12px; }

.similar-section .similar-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 960px) {
	.similar-section .similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.similar-section .similar-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   15. MOBILE STICKY CTA BAR — fixed bottom, 3-col (price + Call + Inquire)
   -----------------------------------------------------------------------------
   Hidden on desktop (>720px). On narrow viewports shows above the
   normal page footer with the body getting padding-bottom so footer
   content isn't covered.
   ----------------------------------------------------------------------------- */

.mobile-cta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 12px clamp(16px, 3vw, 32px);
	z-index: 100;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
	.mobile-cta {
		display: grid;
		grid-template-columns: auto 1fr 1fr;
		gap: 8px;
		align-items: center;
	}
	/* Push the rest of the page above the sticky bar so content
	   isn't hidden behind it. */
	body { padding-bottom: 80px; }
}

.mobile-cta .pricebit {
	font-family: var(--display);
	font-weight: 600;
	font-size: 18px;
	color: var(--navy);
	white-space: nowrap;
	padding-right: 8px;
	border-right: 1px solid var(--line);
}

.mobile-cta .btn {
	padding: 12px;
	font-size: 13px;
	white-space: nowrap;
}

/* Disabled "Call" state when no phone number is configured. Keeps
   the 3-col layout intact instead of hiding the cell. */
.mobile-cta .btn.is-disabled {
	pointer-events: none;
	opacity: 0.55;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   16. POLISH PASS — micro-fixes after the section sweep
   ----------------------------------------------------------------------------- */

/* Smooth-scroll anchors (Check Availability → #fule-inquiry, etc.).
   Already in tokens via prefers-reduced-motion, but explicit here so
   the PDP behaves correctly even when the global html scroll-behavior
   isn't set by a parent theme. */
.unit-pdp { scroll-behavior: smooth; }

/* The breadcrumbs partial inherits from .crumbs in v1.5 inventory.css —
   override its bottom margin so it tucks tight against the trust band. */
.unit-pdp .pdp-crumbs-wrap > * { margin-bottom: 0; }

/* When the inquiry card sits next to a long left column (lots of
   contact methods + a verbose callout), the form card can end up
   shorter than the navy column and hover with empty navy below it.
   align-self: stretch on .inquiry-form pulls it to match the
   .inquiry-left height. */
.inquiry-grid > .inquiry-form { align-self: stretch; }

/* Reduce-motion preference suppresses the transform-on-hover lift on
   buttons. Matches the global preference set in tokens.css. */
@media (prefers-reduced-motion: reduce) {
	.pdp-hero .btn-primary:hover,
	.cta-stack .btn-primary:hover,
	.inquiry-form .btn-primary:hover,
	.mobile-cta .btn-primary:hover {
		transform: none;
		box-shadow: none;
	}
	.faq-item summary::after { transition: none; }
}

/* -----------------------------------------------------------------------------
   17. JS-driven toast (announce on save / share / etc.)
   -----------------------------------------------------------------------------
   Created lazily by inventory-pdp.js' announce() — sits bottom-right
   above the mobile CTA bar (z-index 200 > .mobile-cta z-index 100).
   ----------------------------------------------------------------------------- */

.pdp-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: var(--success);
	color: #fff;
	padding: 14px 20px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	z-index: 200;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
	pointer-events: none;
	max-width: calc(100vw - 48px);
}
.pdp-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

/* Below the mobile-cta breakpoint, lift the toast above the sticky bar. */
@media (max-width: 720px) {
	.pdp-toast { bottom: 88px; right: 16px; }
}

/* -----------------------------------------------------------------------------
   18. PRICE DROP ALERT MODAL — display only (v1.6.2 polish pass)
   -----------------------------------------------------------------------------
   Markup lives at template-parts/detail/modals/price-alert-modal.php
   and is rendered from single-inventory.php after the article tag.
   The generic data-modal pattern in inventory-pdp.js section 5 owns
   open/close (.is-open class, aria-hidden swap, body overflow lock).
   The form's no-op submit handler (section 7) swaps data-state on the
   modal body so the success pane shows in place of the form.
   Backend (subscribe row + cron + email) is the v1.28 parking lot.
   ----------------------------------------------------------------------------- */

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8, 26, 48, 0.62);
	backdrop-filter: blur(2px);
	display: grid;
	place-items: center;
	padding: 24px 16px;
	z-index: 250;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s var(--ease-out), visibility 0.18s var(--ease-out);
}
.modal-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.modal-backdrop .modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px -12px rgba(8, 26, 48, 0.38), 0 4px 16px rgba(8, 26, 48, 0.16);
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	position: relative;
	padding: 36px 32px 28px;
	transform: translateY(8px) scale(0.985);
	transition: transform 0.22s var(--ease-out);
}
.modal-backdrop.is-open .modal {
	transform: translateY(0) scale(1);
}

.modal-backdrop .modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: var(--color-text-muted);
	display: grid;
	place-items: center;
	padding: 0;
	transition: background 0.12s, color 0.12s;
}
.modal-backdrop .modal-close:hover {
	background: var(--paper);
	color: var(--navy);
}

/* State swap — only one .modal-body shows at a time. The `hidden`
   attribute is set on the success pane by default; JS toggles
   data-state on the parent .modal to swap between them. */
.modal--price-alert .modal-body[hidden] { display: none; }

.modal--price-alert .icon-hero {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(245, 184, 0, 0.14);
	color: var(--gold-deep);
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
}
.modal--price-alert .icon-hero svg {
	width: 30px;
	height: 30px;
}
.modal--price-alert .icon-hero--success {
	background: rgba(34, 134, 67, 0.14);
	color: var(--success, #228643);
}

.modal--price-alert .modal-title {
	font-family: var(--font-display);
	font-size: clamp(22px, 3vw, 26px);
	font-weight: 600;
	color: var(--navy);
	text-align: center;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	line-height: 1.2;
}
.modal--price-alert .modal-sub {
	color: var(--color-text-muted);
	font-size: 14px;
	text-align: center;
	margin: 0 0 22px;
	line-height: 1.5;
}

.modal--price-alert .unit-line {
	background: var(--paper);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 20px;
}
.modal--price-alert .unit-line__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--navy);
	line-height: 1.3;
}
.modal--price-alert .unit-line__price {
	font-size: 13px;
	color: var(--color-text-muted);
}
.modal--price-alert .unit-line__price strong {
	color: var(--navy);
	font-weight: 600;
}
.modal--price-alert .unit-line__stock {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	color: var(--color-text-subtle);
	letter-spacing: 0.04em;
}

.modal--price-alert .price-alert-form .field {
	display: block;
	margin-bottom: 14px;
}
.modal--price-alert .field__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--navy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.modal--price-alert .price-alert-form input[type="email"],
.modal--price-alert .price-alert-form input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--navy);
	transition: border-color 0.12s, box-shadow 0.12s;
}
.modal--price-alert .price-alert-form input[type="email"]:focus,
.modal--price-alert .price-alert-form input[type="text"]:focus {
	outline: none;
	border-color: var(--gold-deep);
	box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.22);
}

.modal--price-alert .checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 22px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
	cursor: pointer;
}
.modal--price-alert .checkbox-row input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	accent-color: var(--gold-deep);
	cursor: pointer;
}

.modal--price-alert .modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.modal--price-alert .modal-actions--centered {
	justify-content: center;
}
.modal--price-alert .modal-actions .btn {
	min-width: 120px;
	padding: 11px 18px;
	font-size: 14px;
}
.modal--price-alert .btn-ghost {
	background: transparent;
	color: var(--color-text-muted);
	border-color: var(--color-border);
}
.modal--price-alert .btn-ghost:hover {
	background: var(--paper);
	color: var(--navy);
}

/* Mobile shrink. Below 480px the modal becomes near-fullscreen with
   tighter padding so it doesn't feel cramped on small phones. */
@media (max-width: 520px) {
	.modal-backdrop { padding: 12px; }
	.modal-backdrop .modal {
		padding: 30px 22px 22px;
		max-height: calc(100vh - 24px);
	}
	.modal--price-alert .modal-actions { flex-direction: column-reverse; }
	.modal--price-alert .modal-actions .btn { width: 100%; }
}