/**
 * NAM Product Long-Form Architecture -- Phase 3C.1 prototype.
 *
 * Markup/ownership: astra-child/inc/nam-product.php. Owns the visual system
 * for everything below the Phase 3B purchase summary: the reordered,
 * render-time-parsed NAM sections, the Plugin-product generic fallback
 * wrapper, and the repositioned native Reviews section.
 *
 * SCOPE: unscoped selectors below target `.tsc-product-longform`/
 * `.tsc-product-section*`, classes that ONLY ever exist in markup printed by
 * nam-product.php's own hooked callbacks -- no body-class guard is needed
 * the way catalog.css/product-card.css need one, since these classes are
 * never printed anywhere else on the site.
 *
 * CRITICAL LAYOUT NOTE (learned directly from the Phase 3B.2 debug pass):
 * `.tsc-product-longform` and `.tsc-product-section--reviews` now occupy
 * the exact structural position WooCommerce's native `.woocommerce-tabs`
 * wrapper used to occupy -- a normal-flow block sibling of the still-
 * floated `.woocommerce-product-gallery`/`.summary.entry-summary` pair
 * (single-product.css, Phase 3B, untouched). `.woocommerce-tabs` carried
 * its own native `clear: both`; these new wrappers do NOT inherit that for
 * free, and Phase 3B.2 live-verified exactly this failure mode (the
 * relocated `.tsc-review-card` painting over the floated columns because it
 * lacked `clear: both`). Both `.tsc-product-longform` and
 * `.tsc-product-section--reviews` explicitly clear below, deliberately, to
 * avoid repeating that bug.
 *
 * Enqueued after tsc-tokens only, conditionally on is_product() (see
 * functions.php) -- same pattern as tsc-single-product.
 */

/* ============================================================
 * 1. SHARED LONG-FORM SHELL
 * ============================================================
 * Outer container width reuses the sitewide --tsc-content-width token
 * (1240px) rather than a new arbitrary value -- "use the existing site's
 * content width system" per the Phase 3C.1 brief. Individual sections
 * narrow or widen their OWN inner content within this outer box (see each
 * section below), rather than the shell itself varying width.
 */
.tsc-product-longform {
	clear: both; /* see the critical layout note above */
	max-width: var(--tsc-content-width);
	margin: 0 auto;
	padding: var(--tsc-space-10) var(--tsc-space-5) 0;
}

@media (max-width: 767px) {
	.tsc-product-longform {
		padding-top: var(--tsc-space-8);
	}
}

/* Plugin products (TSC Rack): same shell/clearing, no section parsing --
   the filtered Description content renders as one plain flow, matching its
   "existing generic presentation temporarily" per the brief. Only base
   typography is normalized (Inter, not the raw Astra/Oswald WooCommerce-tab
   defaults) so it doesn't look broken next to the redesigned areas above
   and below it -- no NAM section treatment of any kind. */
.tsc-product-longform--generic {
	max-width: 760px;
	font-family: var(--tsc-font-body);
	line-height: var(--tsc-lh-body);
	color: var(--tsc-text-light);
}

.tsc-product-longform--generic h2,
.tsc-product-longform--generic h3,
.tsc-product-longform--generic h4 {
	font-family: var(--tsc-font-display);
	font-weight: 600;
	color: var(--tsc-text-light);
}

/* Defensive safety net -- Phase 3C.2. The known legacy TSC Rack promo
   image is now suppressed at render time (tsc_strip_legacy_rack_image() in
   nam-product.php), which is the real fix for the mobile overflow it
   caused (see that function's own comment for the live-measured root
   cause: an author-set `max-width: 480px` inline style with no responsive
   `width`, wider than any mobile content column). This rule is a second,
   general-purpose backstop for any OTHER image anywhere in the editor-
   authored Description content (present or future, NAM or Plugin) that
   might carry a similarly non-responsive inline style -- harmless for
   AudioIgniter's own small track-thumbnail images (`max-width: 100%` of an
   already-tiny container has no visible effect). The "Why This Capture Is
   Different" comparison image this comment originally referenced is now
   itself suppressed at render time as of Phase 3C.4
   (tsc_strip_waveform_comparison_block() in nam-product.php); this rule
   remains as the same general-purpose backstop for any other image. */
.tsc-product-longform img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
 * 2. SECTION RHYTHM -- Phase 3C.1 recovery
 * ============================================================
 * ROOT CAUSE of the "excessive/inconsistent spacing" reported live: the
 * original rule set BOTH `padding-bottom` on every section (via the bare
 * `.tsc-product-section` rule) AND `padding-top` on every section that
 * follows another one (via the adjacent-sibling rule) -- since padding
 * never collapses the way margin does, every ordinary section boundary was
 * getting the space-10 value TWICE (256px at desktop, confirmed via live
 * measurement: `.tsc-product-section--sound` computed `padding: 128px 0px`
 * -- both sides -- and the identical 128px repeated on the very next
 * section too). Only the first section (no preceding sibling to trigger
 * the `+` rule) ever showed the single, correctly-sized gap, which is
 * exactly why the rhythm read as "inconsistent," not just "too much."
 *
 * Fixed by moving to a single-sided model: every section carries its OWN
 * `padding-top` only (sized per its role -- primary sections get more,
 * closing/utility sections get less, restated explicitly per section below
 * rather than left to this base rule), with the divider `border-top`
 * riding along on the same rule. The very first section (Overview) opts
 * out entirely, since `.tsc-product-longform`'s own top padding already
 * provides its clearance from the purchase summary above.
 */
.tsc-product-section {
	padding-top: var(--tsc-space-9);
	padding-bottom: 0;
}

.tsc-product-section:first-child {
	padding-top: 0;
}

.tsc-product-section + .tsc-product-section {
	border-top: 1px solid var(--tsc-border-light);
}

@media (max-width: 767px) {
	.tsc-product-section {
		padding-top: var(--tsc-space-7);
	}
}

/* Hygiene only -- collapses empty <p></p>/spacer artifacts already present
   in the authored content (e.g. the empty paragraph WordPress's editor
   leaves behind, or a manual `<div style="height:20px">` spacer) without
   touching or removing them from the DOM; "preserve verbatim" is satisfied
   since the nodes remain, just visually collapsed where they add nothing. */
.tsc-product-longform p:empty {
	display: none;
}

/* Section headings: both H2 (only the 'overview' section ever had one, and
   that one is suppressed in PHP output -- see nam-product.php) and H3
   (every other recognized section) get IDENTICAL visual treatment here,
   deliberately -- the actual heading level from the authored content is
   preserved verbatim for document-outline/accessibility purposes, but
   visual hierarchy is controlled entirely by class, not tag name. */
.tsc-product-section > h2,
.tsc-product-section > h3,
.tsc-product-section__heading {
	margin: 0 0 var(--tsc-space-5);
	font-family: var(--tsc-font-display);
	font-size: var(--tsc-fs-h2);
	font-weight: 600;
	line-height: var(--tsc-lh-heading);
	color: var(--tsc-text-light);
}

/* Body copy defaults for every section -- Inter, comfortable reading
   line-height. Overridden narrower/wider per section below.
 *
 * ROOT CAUSE of the live "Audio Demo text is blacked-out" report: this
 * rule was originally written as a DESCENDANT selector (`.tsc-product-
 * section p`, `.tsc-product-section li`, no combinator), which does not
 * only match this file's own top-level prose -- it also matches AudioIgniter
 * plugin markup nested arbitrarily deep inside `.demo-audio` (confirmed
 * live: AudioIgniter's own track-title element is a bare `<p class="ai-
 * track-title">`). AudioIgniter's own CSS gives its player chrome
 * (`.ai-wrap`) a near-black background (`rgb(32,32,32)`) with white text by
 * design; this file's descendant selector was overriding that inner `<p>`'s
 * color to `--tsc-text-light` (near-black) with higher specificity than
 * whatever AudioIgniter itself declares, producing near-black text on a
 * near-black background -- not a contrast/opacity/z-index bug, a plain
 * selector-scope bug. Fixed by switching to CHILD combinators (`>`): every
 * node this file's own PHP parser (nam-product.php) ever appends is a
 * DIRECT child of its `<section>` (or, for list items, a direct child of a
 * direct-child `<ul>`) -- AudioIgniter's `.ai-track-title` is nested many
 * levels deeper via `.demo-audio > #audioigniter-XXXX > .ai-audioigniter >
 * ...`, so it no longer matches at all, with no `:not()` exclusion needed.
 */
.tsc-product-section > p,
.tsc-product-section > ul > li {
	font-family: var(--tsc-font-body);
	font-size: 1rem;
	line-height: var(--tsc-lh-body);
	color: var(--tsc-text-light);
}

.tsc-product-section > ul {
	margin: 0 0 var(--tsc-space-5);
	padding-left: var(--tsc-space-5);
}

.tsc-product-section > p {
	margin: 0 0 var(--tsc-space-4);
}

.tsc-product-section > p a {
	color: var(--tsc-text-light);
}

/* Readable-prose sections: capped at ~760px per the brief, LEFT-ALIGNED
   (no `margin: auto` anywhere in this file -- centering content merely
   because a section happens to be wider than its prose was the direct
   cause of the live "inconsistent alignment" report, see section 4 below).
   Applied to every section EXCEPT the ones that deliberately use the
   shell's full width (audio, included, technical, ecosystem -- each opts
   back out below). */
.tsc-product-section > *:not(h2):not(h3) {
	max-width: 760px;
}

/* ============================================================
 * 3. OVERVIEW
 * ============================================================
 * No heading rendered here (PHP-suppressed) -- the first paragraph (the
 * bold editorial lede, e.g. "Legendary tube dynamics. True stereo
 * precision. Mastering-grade elegance.") becomes the visual section lead
 * instead, sized up from body copy so it reads as a real statement rather
 * than the first sentence of a paragraph. Targets `:first-of-type`
 * structurally (every product-content sample checked this phase opens with
 * exactly this pattern) rather than matching on the specific wording, so it
 * survives verbatim across all 31 products' different opening lines.
 */
.tsc-product-section--overview > p:first-of-type {
	margin-bottom: var(--tsc-space-5);
	font-family: var(--tsc-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	font-weight: 600;
	line-height: var(--tsc-lh-heading);
	color: var(--tsc-text-light);
}

/* ============================================================
 * 4. AUDIO DEMO -- Phase 3C.1 recovery: alignment
 * ============================================================
 * PHASE 3C.1 CORRECTION: this section was originally the ONLY one with
 * `text-align: center` plus `margin: 0 auto` centering on its heading,
 * intro paragraph, and the player box -- live-measured this phase as the
 * direct, sole cause of the reported "some sections centered, some left-
 * aligned, headings don't share a left edge": every other section's
 * heading landed at x=124px (at 1440px width); Audio Demo's landed at
 * x=220px. Per the recovery brief's explicit rule ("left align everything
 * unless there is a very strong component-specific reason not to"), all
 * centering is removed here. Heading and intro copy now inherit the exact
 * same left edge as every other section (the shared base rule above); only
 * the player box itself is allowed to be WIDER (medium scale, ~1000px)
 * than the 760px prose default, starting from that same left edge rather
 * than floating independently in the middle of the section.
 *
 * AudioIgniter's own `.audioigniter-root { max-width: 800px }`
 * (audioigniter.css, untouched) still governs the player's own width
 * inside this section; nothing here touches AudioIgniter's DOM/JS/CSS.
 */
.tsc-product-section--audio > *:not(h2):not(h3) {
	max-width: 760px;
}

.tsc-product-section--audio .demo-audio {
	max-width: 1000px;
	margin: var(--tsc-space-6) 0 0;
	padding: var(--tsc-space-7) var(--tsc-space-6);
	background-color: var(--tsc-bg-light);
	border: 1px solid var(--tsc-border-light);
}

@media (max-width: 500px) {
	.tsc-product-section--audio .demo-audio {
		padding: var(--tsc-space-5) var(--tsc-space-4);
	}
}

/* ============================================================
 * 5. WHAT'S INCLUDED
 * ============================================================
 * The existing <ul><li><strong>Name</strong><br><em>Description</em><br>
 * <small>Settings</small></li></ul> markup, unmodified, restyled into a
 * bordered/divided row list -- two columns at desktop (this list runs 15
 * items long on YEAR 660), single column at mobile, no accordion, nothing
 * hidden.
 */
.tsc-product-section--included {
	max-width: 1000px;
}

.tsc-product-section--included ul {
	max-width: none;
	margin: var(--tsc-space-5) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--tsc-border-light);
}

.tsc-product-section--included li {
	padding: var(--tsc-space-4) var(--tsc-space-5) var(--tsc-space-4) 0;
	border-bottom: 1px solid var(--tsc-border-light);
}

.tsc-product-section--included li:nth-child(odd) {
	padding-left: 0;
	border-right: 1px solid var(--tsc-border-light);
	padding-right: var(--tsc-space-5);
}

.tsc-product-section--included li:nth-child(even) {
	padding-left: var(--tsc-space-5);
}

.tsc-product-section--included li strong {
	display: block;
	margin-bottom: var(--tsc-space-1);
	font-family: var(--tsc-font-display);
	font-weight: 600;
	font-size: 1rem;
	font-style: normal;
	color: var(--tsc-text-light);
}

.tsc-product-section--included li em {
	display: block;
	margin-bottom: var(--tsc-space-2);
	font-style: normal;
	font-size: 0.9375rem;
	color: var(--tsc-text-muted-light);
}

.tsc-product-section--included li small {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tsc-text-muted-light);
}

/* Non-list prose inside this section (intro paragraph, "Profiles
   included:" lead-in, the "True Stereo Operation" bold pseudo-heading and
   its follow-up paragraphs that the source content already authors as part
   of this same section) keeps the standard readable-prose width. */
.tsc-product-section--included > p {
	max-width: 760px;
}

@media (max-width: 767px) {
	.tsc-product-section--included ul {
		grid-template-columns: 1fr;
	}

	.tsc-product-section--included li,
	.tsc-product-section--included li:nth-child(odd),
	.tsc-product-section--included li:nth-child(even) {
		padding-left: 0;
		padding-right: 0;
		border-right: 0;
	}
}

/* ============================================================
 * 6. SOUND CHARACTERISTICS
 * ============================================================
 * Authored bullet list only -- no invented meters/scores. Given more
 * visual prominence than Technical Notes per the brief: larger body size,
 * no bullet-marker default (custom thin-rule marker instead, matching the
 * site's square/sharp geometry rather than a round bullet).
 */
.tsc-product-section--sound ul {
	max-width: 760px;
	list-style: none;
	padding: 0;
}

.tsc-product-section--sound li {
	position: relative;
	margin-bottom: var(--tsc-space-3);
	padding-left: var(--tsc-space-5);
	font-size: 1.0625rem;
}

.tsc-product-section--sound li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 12px;
	height: 1px;
	background-color: var(--tsc-accent);
}

/* ============================================================
 * 7. WHY THIS CAPTURE IS DIFFERENT
 * ============================================================
 * Same bullet treatment as Sound Characteristics for the list (a smaller,
 * quieter marker here since this section is evidence/differentiation, not
 * the primary sonic pitch).
 *
 * PHASE 3C.4: the generic "Waveform Comparison (Hardware vs NAM)" bold
 * label, its template-generated intro sentence, and the large comparison
 * graphic itself are now suppressed at render time for every NAM product
 * (tsc_strip_waveform_comparison_block() in nam-product.php) -- confirmed
 * via a full 29-product catalog audit to be the same generic, non-product-
 * specific template on every single product, while the bullet list above
 * it is genuinely product-specific and was left untouched. The section now
 * ends with the `<ul>`, whose margin-bottom already comes from the shared
 * `.tsc-product-section > ul` rule above -- no new bottom-spacing rule
 * needed, this naturally matches the existing Sound Characteristics
 * section's own bullets-only rhythm.
 *
 * `.tsc-product-section--different img` is kept, deliberately not deleted,
 * as a defensive rule: the audit found zero remaining images in this
 * section across the current catalog, but a future product with genuinely
 * unique, kept evidence imagery (audit classification D) should still get
 * sane responsive/bordered treatment rather than falling back to
 * unstyled browser defaults.
 */
.tsc-product-section--different ul {
	max-width: 760px;
	list-style: none;
	padding: 0;
}

.tsc-product-section--different li {
	position: relative;
	margin-bottom: var(--tsc-space-2);
	padding-left: var(--tsc-space-4);
	color: var(--tsc-text-muted-light);
}

.tsc-product-section--different li::before {
	content: "\2013"; /* en dash */
	position: absolute;
	left: 0;
	color: var(--tsc-text-muted-light);
}

.tsc-product-section--different img {
	display: block;
	margin-top: var(--tsc-space-4);
	border: 1px solid var(--tsc-border-light);
}

/* ============================================================
 * 8. TECHNICAL NOTES
 * ============================================================
 * PHP-rendered as `.tsc-tech-specs` rows (see tsc_render_nam_technical_
 * section_html() in nam-product.php) -- a compact spec-table/definition-
 * list language. Presentation only; the underlying five values remain
 * exactly what the product author typed.
 *
 * Section container widened to medium scale (1000px) per the Phase 3C.1
 * recovery brief's explicit width system; the actual `.tsc-tech-specs`
 * rows stay capped narrower (640px) so five short label/value rows don't
 * stretch into an oddly sparse, edge-to-edge table.
 */
.tsc-product-section--technical {
	max-width: 1000px;
}

.tsc-tech-specs {
	max-width: 640px;
	margin-top: var(--tsc-space-4);
	border-top: 1px solid var(--tsc-border-light);
}

.tsc-tech-specs__row {
	display: flex;
	gap: var(--tsc-space-5);
	padding: var(--tsc-space-3) 0;
	border-bottom: 1px solid var(--tsc-border-light);
	font-size: 0.9375rem;
}

.tsc-tech-specs__term {
	flex: 0 0 auto;
	width: 180px;
	font-family: var(--tsc-font-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: var(--tsc-text-muted-light);
}

.tsc-tech-specs__value {
	color: var(--tsc-text-light);
}

@media (max-width: 500px) {
	.tsc-tech-specs__row {
		flex-direction: column;
		gap: var(--tsc-space-1);
	}

	.tsc-tech-specs__term {
		width: auto;
	}
}

/* ============================================================
 * 9. GAIN STAGING ADVICE
 * ============================================================
 * Kept entirely product-specific this phase (Phase 3C.1 brief section 15
 * -- no shared/mixed extraction yet) -- readable prose width, matching the
 * shared 760px editorial column used everywhere else prose appears (was
 * 640px, an unexplained one-off narrower than the rest of the page --
 * aligned here for one consistent grid rather than a stray value).
 */
.tsc-product-section--gain {
	max-width: 760px;
}

/* ============================================================
 * 10. TSC ECOSYSTEM COMPONENT -- Phase 3C.2
 * ============================================================
 * Replaces the legacy editor-authored "Experience These Profiles with TSC
 * Rack" / "New to NAM?" block (`.tsc-product-section--ecosystem-legacy`,
 * no longer printed by nam-product.php -- see that file's own comments).
 * Markup: tsc_render_nam_ecosystem_component() in
 * inc/nam-product-components.php.
 *
 * Sharp/square geometry (thin border, no radius, no shadow) matching the
 * rest of the TSC visual language -- not a rounded SaaS promo card.
 * Text-led, no image: `.tsc-ecosystem` has no fixed height or image slot
 * baked into its layout, so it already "looks complete without an image"
 * per the brief, and a future `.tsc-ecosystem__media` element could be
 * added later as a genuine drop-in without restructuring this component.
 */
.tsc-product-section--ecosystem {
	max-width: 1000px;
}

.tsc-ecosystem {
	max-width: 640px;
	padding: var(--tsc-space-6);
	border: 1px solid var(--tsc-border-light);
	background-color: var(--tsc-bg-light);
}

.tsc-ecosystem__eyebrow {
	margin: 0 0 var(--tsc-space-3);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tsc-text-muted-light);
}

.tsc-ecosystem__headline {
	margin: 0 0 var(--tsc-space-3);
	font-family: var(--tsc-font-display);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 600;
	line-height: var(--tsc-lh-heading);
	color: var(--tsc-text-light);
}

.tsc-ecosystem__supporting {
	margin: 0 0 var(--tsc-space-5);
	font-family: var(--tsc-font-body);
	font-size: 1rem;
	line-height: var(--tsc-lh-body);
	color: var(--tsc-text-muted-light);
}

.tsc-ecosystem__cta {
	display: inline-block;
	box-sizing: border-box;
	padding: var(--tsc-space-3) var(--tsc-space-5);
	border: 1px solid var(--tsc-text-light);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tsc-text-light);
	background-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.tsc-ecosystem__cta {
		transition: background-color 160ms ease, color 160ms ease;
	}
}

.tsc-ecosystem__cta:hover,
.tsc-ecosystem__cta:focus-visible {
	background-color: var(--tsc-text-light);
	color: var(--tsc-surface-light);
}

.tsc-ecosystem__secondary {
	margin: var(--tsc-space-5) 0 0;
	font-family: var(--tsc-font-body);
	font-size: 0.875rem;
	color: var(--tsc-text-muted-light);
}

.tsc-ecosystem__secondary a {
	margin-left: var(--tsc-space-1);
	color: var(--tsc-text-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 500px) {
	.tsc-ecosystem {
		padding: var(--tsc-space-5) var(--tsc-space-4);
	}

	.tsc-ecosystem__cta {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ============================================================
 * 11. CLOSING UTILITY AREA (Disclaimer + Follow) -- Phase 3C.2
 * ============================================================
 * Rendered by tsc_render_product_closing_utility_section() (nam-
 * product.php, priority 18 -- AFTER Reviews, per the brief's explicit
 * preferred order). This is a SEPARATE top-level element from
 * `.tsc-product-longform` (not a section inside it -- see that function's
 * own comment for why), so it needs its own matching container width/
 * padding/clearing to share the same master-grid left edge -- the same
 * pattern already used for `.tsc-product-section--reviews`.
 *
 * The two sections inside share a tighter rhythm than the primary content
 * sections (`--tsc-space-7` instead of the `--tsc-space-9` default, and
 * the group's own first child skips its top padding entirely) so
 * Disclaimer and Follow read as one coherent low-priority closing area
 * rather than two more major sections chained after Reviews.
 */
.tsc-closing-utility {
	clear: both; /* same reasoning as .tsc-product-longform/--reviews above. */
	max-width: var(--tsc-content-width);
	margin: 0 auto;
	padding: var(--tsc-space-7) var(--tsc-space-5) var(--tsc-space-8);
}

.tsc-closing-utility .tsc-product-section {
	padding-top: var(--tsc-space-7);
}

.tsc-closing-utility .tsc-product-section:first-child {
	padding-top: 0;
}

.tsc-product-section--disclaimer,
.tsc-product-section--follow {
	max-width: 760px;
}

.tsc-product-section--disclaimer p,
.tsc-product-section--follow p {
	font-size: 0.875rem;
	color: var(--tsc-text-muted-light);
}

.tsc-product-section--disclaimer > h3,
.tsc-product-section--follow > h3 {
	font-size: 1.125rem;
}

.tsc-follow__link {
	display: inline-block;
	margin-top: var(--tsc-space-2);
	color: var(--tsc-text-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
 * 11. UNKNOWN/UNCLASSIFIED SECTIONS
 * ============================================================
 * Safety-net styling only -- readable prose, clearly still part of the
 * page, no special visual claim about what the content is (since the
 * parser could not classify it, this file cannot either).
 */
.tsc-product-section--unknown {
	max-width: 760px;
}

.tsc-product-section--fallback {
	max-width: 760px;
}

/* ============================================================
 * 12. REVIEWS SECTION -- Phase 3C.1 recovery
 * ============================================================
 * Native review list/form now built directly from WordPress/WooCommerce
 * primitives in nam-product.php (get_comments()/wp_list_comments()/
 * comment_form()) -- see that file's header comment for why the original
 * `wc_get_template_part()` call rendered nothing. Section-level heading/
 * spacing/clearing/width only here; the native comment list, rating input,
 * and submission form markup is untouched and already inherits sitewide
 * Inter typography from typography.css's existing `#content` heading/body
 * rules -- no deep restyle of WooCommerce's internal review markup in this
 * recovery pass.
 *
 * Rhythm: padding-top set to the "closing/utility" tier (--tsc-space-7).
 * [Comment corrected Phase 3C.3 -- the reasoning below was written when
 * Reviews followed Follow TSC directly; Phase 3C.2 moved Reviews to BEFORE
 * Disclaimer/Follow (Ecosystem -> Reviews -> Disclaimer/Follow), so this
 * value's original justification no longer applies verbatim. Left
 * unchanged this phase regardless -- Phase 3C.3 is scoped to Reviews-
 * internal polish only, and no live evidence was found that the Ecosystem
 * -> Reviews gap itself reads as a problem; revisit the actual number in a
 * future pass if it does.] padding-bottom trimmed from --tsc-space-10
 * (128px) to --tsc-space-8 (64px): "clear separation, but not hundreds of
 * pixels" before the native Related Products section (confirmed live to
 * carry zero margin/padding of its own, so this value alone determines
 * that gap).
 *
 * Width: widened from 760px to medium (1000px) for the actual review
 * list/form -- "wide enough for the WooCommerce review UI" (WooCommerce's
 * native comment-form layout benefits from more horizontal room than a
 * narrow prose column) -- while the section's own outer box still shares
 * the same master-grid left edge as every other section.
 */
.tsc-product-section--reviews {
	clear: both; /* same reasoning as .tsc-product-longform above -- this is
	                also a normal-flow sibling of the floated gallery/summary
	                pair when it fires directly (Plugin products skip the
	                parsed .tsc-product-longform but still get this section). */
	max-width: var(--tsc-content-width);
	margin: 0 auto;
	padding: var(--tsc-space-7) var(--tsc-space-5) var(--tsc-space-8);
}

.tsc-product-section--reviews > .tsc-product-section__heading {
	max-width: 1000px;
}

.tsc-product-section--reviews #reviews {
	max-width: 1000px;
}

/* PHASE 3C.5 alignment fix -- Plugin products only (class only ever printed
 * alongside `.tsc-product-section--reviews` when tsc_product_is_plugin() is
 * true; see tsc_render_product_reviews_section()'s own comment for the
 * live-measured 240px root cause). Matches `.tsc-product-longform--
 * generic`'s own hardcoded 760px exactly, so the two independently-centered
 * boxes share one left edge instead of jumping. NAM is untouched -- its
 * `.tsc-product-longform` is already the full --tsc-content-width, same as
 * the un-modified base rule above.
 */
.tsc-product-section--reviews--narrow {
	max-width: 760px;
}

/* ============================================================
 * 12a. EXISTING REVIEW ROWS -- light polish, Phase 3C.3
 * ============================================================
 * Live-audited before touching anything: the row/divider pattern already
 * exists natively (Astra/WooCommerce's own default comment-list CSS --
 * `li.review` already computed `border-bottom: 1px solid rgba(0,0,0,.07)`
 * and `margin: 0 0 30px`, author/date already inherit sitewide Inter via
 * typography.css) -- exactly the "simple rows/dividers, not boxed cards"
 * direction the brief says to KEEP. Nothing below touches that structure;
 * this only caps the review body's reading width (live-measured at a full
 * 950px with no max-width at all before this -- "review text does not
 * become excessively wide" per the brief) and lightly tunes the coupon-
 * disclosure badge so it stays visible but clearly secondary, never
 * hidden.
 *
 * PHASE 3C.5: `margin-bottom` on each review row tightened from Astra's
 * native 30px to the `--tsc-space-5` token (24px desktop / 20px mobile) --
 * "slightly tighten... not aggressively compress" per the brief. The
 * border-bottom divider itself (Astra's own native rule) is untouched.
 */
.commentlist > li.review {
	margin-bottom: var(--tsc-space-5);
}

.commentlist .description {
	max-width: 640px;
}

.commentlist .cr-incentivized-badge {
	margin-top: var(--tsc-space-2);
	opacity: 0.75;
}

@media (max-width: 767px) {
	/* The native layout indents review text with a left margin sized for
	   the 54px desktop avatar (confirmed live: `.comment-text { margin-
	   left: 50px }`); at narrow widths that indent eats too much of an
	   already-narrow column, and long author/verified/date meta can
	   collide -- neither was reported broken, but both are explicitly
	   listed as things to check under "mobile wrapping" this phase, so a
	   light, evidence-based adjustment is made rather than left untested. */
	.commentlist .meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--tsc-space-2);
	}
}

/* ============================================================
 * 12b. REVIEW FORM -- Phase 3C.3
 * ============================================================
 * Markup: comment_form(), configured by tsc_nam_review_form_args()/
 * tsc_nam_review_incentive_html()/tsc_nam_review_rating_field_html()
 * (nam-product.php) -- title/button copy and the new incentive + rating
 * field, nothing here invents any DOM WordPress/WooCommerce doesn't
 * already produce for the current visitor's logged-in/out state.
 *
 * Deliberately capped narrower (640px) than the review LIST above it
 * (1000px) -- "should NOT become a giant promotional card... a quiet
 * functional area underneath the real reviews" per the brief. Astra's own
 * default styling here (live-audited before writing any of this: thin
 * `rgba(0,0,0,.07)` borders, border-radius:0, Inter, a black/white/
 * uppercase submit button) already matched the TSC square/flat language
 * closely -- this section intentionally does NOT fight or replace that,
 * only adds the accent focus/hover states the brief asks for and the new
 * incentive/rating elements' own typography.
 */
#review_form_wrapper {
	max-width: 640px;
}

#reply-title {
	margin: 0 0 var(--tsc-space-2);
	font-family: var(--tsc-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--tsc-text-light);
}

#reply-title small {
	margin-left: var(--tsc-space-2);
	font-family: var(--tsc-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
}

.tsc-review-form__incentive {
	margin: 0 0 var(--tsc-space-5);
	font-family: var(--tsc-font-body);
	font-size: 0.9375rem;
	color: var(--tsc-text-muted-light);
}

.tsc-review-form__rating {
	margin: 0 0 var(--tsc-space-4);
}

.tsc-review-form__rating label {
	display: block;
	margin-bottom: var(--tsc-space-1);
	font-family: var(--tsc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tsc-text-muted-light);
}

.tsc-review-form__rating select {
	border-radius: 0;
	font-family: var(--tsc-font-body);
}

/* Focus states: the one place --tsc-accent is used in this form, per the
   brief's "TSC accent only for subtle interaction/focus states" -- rest-
   state borders/colors are left as Astra's own already-appropriate
   defaults, not replaced with accent everywhere. */
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus,
#commentform select:focus {
	outline: none;
	border-color: var(--tsc-accent);
}

#commentform .submit:hover,
#commentform .submit:focus-visible {
	background-color: var(--tsc-accent) !important; /* Astra's own dynamic Customizer CSS sets this button's background via a same-or-higher-specificity rule at rest -- confirmed live via the same class of specificity conflict already documented in single-product.css's own header comment; !important is the same, deliberate, evidence-based exception used there, not a default habit. */
	color: var(--tsc-text-on-accent) !important;
}

/* ============================================================
 * 12c. PROGRESSIVE REVIEW COLLAPSE -- Phase 3C.5
 * ============================================================
 * Markup: tsc_render_product_reviews_section() (nam-product.php), behavior:
 * assets/js/reviews-collapse.js. The list is ALWAYS fully rendered server-
 * side -- this rule only hides items 6+ once JS has added `.is-collapsed`
 * to the list itself, never unconditionally, so a visitor with JS disabled
 * (or a crawler) always sees every review; nth-child selects by structural
 * position only, no per-review markup was added or changed to support this.
 */
.commentlist.is-collapsed > li.review:nth-child(n + 6) {
	display: none;
}

/* Restrained text-button per the brief -- deliberately NOT Astra's solid
 * black/white CTA treatment the review-form submit button above uses
 * ("must not look like a primary Add to Cart CTA"): transparent, thin
 * border, uppercase small label matching the rating-field label's own
 * typography above, `--tsc-accent` reserved for the hover/focus state only.
 * `hidden` (the HTML attribute, removed by reviews-collapse.js) is the
 * progressive-enhancement gate -- see that file and the PHP comment above
 * for why, not a CSS display rule.
 */
.tsc-reviews-toggle {
	display: inline-block;
	margin-top: var(--tsc-space-5);
	padding: var(--tsc-space-2) var(--tsc-space-4);
	border: 1px solid var(--tsc-border-light);
	border-radius: 0;
	background: none;
	font-family: var(--tsc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tsc-text-light);
	cursor: pointer;
}

/* PHASE 3C.5.1 fix -- two live-confirmed bugs, both caused by the same
 * Astra dynamic-Customizer rule: a bare, sitewide `button:hover,
 * button:focus { color: #fff; background-color: var(--ast-global-color-0);
 * border-color: var(--ast-global-color-0); }` (specificity (0,1,1) -- one
 * class-equivalent pseudo + one type selector), where
 * `--ast-global-color-0` resolves to the same tan as `--tsc-accent`.
 *
 *   BUG A (invisible hover text): the original rule here only overrode
 *   `color`/`border-color` on hover -- `.tsc-reviews-toggle:hover` beats
 *   Astra's `button:hover` on specificity ((0,2,0) vs (0,1,1)) for the
 *   properties it actually declares, but declared no `background-color` at
 *   all, so Astra's `background-color: var(--ast-global-color-0)` (accent)
 *   applied unopposed underneath this rule's own `color: var(--tsc-accent)`
 *   -- accent text on an accent background, confirmed live via matching
 *   `getComputedStyle` background AND color to the same rgb(193,154,131).
 *   Fixed by explicitly setting `background-color` here too.
 *
 *   BUG B (stuck accent after a click): a mouse click leaves a `<button>`
 *   genuinely `:focus`ed (confirmed live: `btn.matches(':focus')` true)
 *   without matching `:focus-visible` (confirmed false) in every browser
 *   tested -- this file's own hover rule only ever targeted `:focus-
 *   visible`, so a plain post-click `:focus` state fell through to Astra's
 *   OWN bare `button:focus` (same combined rule as `:hover` above), which
 *   is exactly why the accent fill "stuck" after clicking instead of
 *   clearing on mouseout. Fixed with an explicit `:focus:not(:focus-
 *   visible)` reset back to the default state, specificity (0,3,0),
 *   comfortably ahead of Astra's (0,1,1) -- `:not(:hover)` is ALSO required
 *   on this reset (making it (0,4,0)): live-tested the version without it
 *   and found a regression it would otherwise cause -- clicking (leaving
 *   real `:focus`) and then hovering the SAME still-focused button no
 *   longer showed the accent hover state at all, because the higher-
 *   specificity focus-reset rule was winning over the `:hover` rule even
 *   while the pointer was genuinely over the button. `:not(:hover)`
 *   restricts the reset to "focused but NOT currently hovered", so actual
 *   mouse hover always still shows the accent feedback regardless of
 *   leftover focus state.
 *
 * Text color on the accent-filled state uses `--tsc-text-on-accent`
 * (#16161A, the same token the review-form submit button's own hover
 * state already uses two rules above) rather than literal white: measured
 * white-on-#C19A83 at ~2.6:1 contrast, well under WCAG AA's 4.5:1 (or even
 * the 3:1 large-text minimum) -- the existing dark-on-accent token is both
 * the established sitewide convention for this exact accent color and the
 * one that actually keeps "text must remain clearly visible" true.
 *
 * `!important` on the accent state only, matching the identical, already-
 * documented justification on the submit-button hover rule above -- same
 * Astra dynamic-CSS specificity conflict, same narrowly-scoped exception.
 */
.tsc-reviews-toggle:hover,
.tsc-reviews-toggle:focus-visible {
	outline: none;
	background-color: var(--tsc-accent) !important;
	border-color: var(--tsc-accent) !important;
	color: var(--tsc-text-on-accent) !important;
}

.tsc-reviews-toggle:focus:not(:focus-visible):not(:hover) {
	background-color: transparent !important;
	border-color: var(--tsc-border-light) !important;
	color: var(--tsc-text-light) !important;
}

@media (max-width: 767px) {
	/* Live-measured at 33px tall with the desktop padding -- under the
	   common ~44px touch-target guideline. Taller tap area on mobile only;
	   desktop keeps the more compact restrained sizing. */
	.tsc-reviews-toggle {
		padding: var(--tsc-space-3) var(--tsc-space-4);
	}
}

/* ============================================================
 * 13. RELATED PRODUCTS / RELATED CAPTURES -- Phase 3D
 * ============================================================
 * Markup: tsc_render_related_products_section() (nam-product.php). Per-card
 * styling is NOT duplicated here -- it lives in product-card.css's own 4th
 * context branch (`body.single-product .tsc-product-section--related
 * li.product.type-product`, etc.), reusing the exact same rules already
 * serving the homepage/shop/category cards. This block only owns the
 * outer section (grid/spacing/heading position), the same division of
 * responsibility already used for every other section in this file.
 *
 * `.tsc-product-section__heading` needs no new rule at all -- it is
 * already a bare, standalone selector in this file's own section 1 (not
 * combined with a `.tsc-product-section >` combinator), so the heading
 * automatically inherits the same Inter Display treatment every other
 * section heading uses.
 *
 * RHYTHM: live-audited before touching anything -- the previous native
 * "Related products" section had ZERO padding/margin of its own (confirmed
 * live: computed `padding: 0px; margin: 0px`) sitting flush against
 * `.tsc-closing-utility`, with no divider and a completely different
 * (Astra-default, full-viewport-width) horizontal axis. `padding-top` here
 * deliberately overrides the generic `.tsc-product-section` 96px
 * (--tsc-space-9) down to the same `--tsc-space-7` "closing/utility tier"
 * Reviews itself already uses (see section 12's own comment) -- `.tsc-
 * closing-utility` directly above already contributes its own bottom
 * padding, so stacking two full 96px gaps back-to-back would read as an
 * oversized gap, not a "clean closing rhythm". The adjacent-sibling
 * `.tsc-product-section + .tsc-product-section` divider rule (section 1)
 * does not fire here on its own, since this section's real previous DOM
 * sibling is `.tsc-closing-utility`, a different wrapper class -- the
 * explicit rule just below supplies the same divider for that one specific
 * transition, keeping every section boundary on the page visually
 * consistent.
 */
.tsc-product-section--related {
	clear: both; /* same reasoning as .tsc-product-longform/--reviews above. */
	max-width: var(--tsc-content-width);
	margin: 0 auto;
	padding: var(--tsc-space-7) var(--tsc-space-5) var(--tsc-space-9);
}

.tsc-closing-utility + .tsc-product-section--related {
	border-top: 1px solid var(--tsc-border-light);
}

/* Only ever printed with exactly 3 items (tsc_render_related_products_
 * section() explicitly requests 3 from wc_get_related_products()) -- a
 * fixed 3-column desktop grid is therefore always exactly full, never the
 * dead trailing 4th cell live-measured in the previous native
 * `columns-4`-but-3-items markup.
 */
.tsc-related-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important; /* Astra's own dynamic Customizer WooCommerce grid CSS (`.woocommerce ul.products:not(.elementor-grid)` etc., specificity (0,3,1)+) matches this same <ul> (it keeps the `products` class and sits inside a `.woocommerce` ancestor) and otherwise wins over this single-class (0,1,0) rule at every breakpoint -- live-confirmed Phase 3D.1 debug pass. Same narrowly-scoped exception already used twice elsewhere in this file for the identical conflict (review-form submit button, reviews show-more/fewer toggle). */
	gap: var(--tsc-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.tsc-related-products-grid {
		grid-template-columns: repeat(2, 1fr) !important; /* same Astra specificity conflict as the base rule above. */
	}
}

@media (max-width: 767px) {
	.tsc-product-section--related {
		padding-top: var(--tsc-space-6);
	}

	/* PHASE 3D.1: switched from 2 columns to 1 -- live visual review at
	   400px found 2-up too compressed for this card's actual content
	   (title + Short Description + rating + price + button, taller than
	   the archive/homepage cards this system was originally measured
	   against). Same breakpoint as the padding-top rule directly above and
	   as product-card.css's own established "mobile" tier (see that file's
	   section 8, `@media (max-width: 768px)`) -- no new breakpoint
	   introduced. Desktop (3-column) and tablet (2-column, still governed
	   by the max-width:1024px rule above, unchanged) are untouched; this
	   rule only wins at narrower widths by later source order. */
	.tsc-related-products-grid {
		grid-template-columns: 1fr !important; /* same Astra specificity conflict as the base rule above. */
	}
}

@media (max-width: 500px) {
	.tsc-related-products-grid {
		gap: var(--tsc-space-3);
	}
}