/**
 * Single Product purchase area -- Phase 3B, recovered Phase 3B.1.
 *
 * Markup/ownership: astra-child/inc/single-product.php owns the summary
 * ORDER (eyebrow, title, Short Description, rating, price, Add to Cart) via
 * the `astra_woo_single_product_structure` filter and the `astra_woo_
 * single_*_before/after` hooks that wrap each remaining item -- confirmed
 * still correct after the Phase 3B upload (live DOM order matched exactly).
 * This file owns every visual rule for that column, plus its relationship
 * to the gallery.
 *
 * PHASE 3B.1 ROOT CAUSE (why the Phase 3B upload looked cramped/unchanged):
 * every rule below was already live and byte-identical to source (confirmed
 * via a direct diff of the fetched live file against local source -- this
 * was NOT an upload/caching problem). The actual problem is cascade
 * specificity: Astra's own native WooCommerce CSS -- both its shipped
 * `woocommerce-grid.min.css`/`woocommerce-layout-grid.min.css` files AND a
 * separate block of Astra's *dynamic* Customizer-generated inline CSS
 * (`<style>`, no `href`, so it doesn't show up as a normal enqueued
 * stylesheet when just checking "is my file loaded") -- routinely uses
 * long compound selectors such as
 * `.woocommerce-js div.product div.summary .woocommerce-product-details__
 * short-description :last-child` (5 effective classes) or
 * `.woocommerce #content .ast-woocommerce-container div.product div.images`
 * (1 ID + 4 classes + 2 elements, from the dynamic Customizer block). Live
 * specificity inspection (matching every candidate rule against the real
 * DOM via `Element.matches()` across every loaded stylesheet, per property)
 * found MULTIPLE such rules beating this file's simpler 1-3 class
 * selectors on individual properties -- not uniformly (some properties,
 * like font-family and color where no competing rule existed, WERE already
 * winning), but enough of them (gallery/summary width+float+margin, the
 * H1's font-family specifically, the price's font-size/weight/color/
 * margin, the Add to Cart button's padding, the Short Description
 * paragraph's margin) to produce exactly the "looks unchanged / cramped"
 * result reported. Confirmed no competing declaration anywhere in this
 * investigation itself uses `!important`, so `!important` here is a clean,
 * unambiguous win -- not a fight against another `!important`.
 *
 * FIX: every meaningful visual declaration in this file now carries
 * `!important`. This is not a shortcut taken instead of understanding the
 * cascade -- it follows exactly this codebase's own established pattern
 * for this exact class of problem (see woocommerce.css's badge/zoom-
 * trigger hiding, moderncart-quantity-fallback.css, and utility-commerce-
 * typography.css's checkout rules, all of which use `!important`
 * specifically to override Astra/WooCommerce/plugin native CSS that isn't
 * otherwise reachable). A pure specificity-escalation alternative was
 * evaluated and rejected: it would require a different, awkwardly long
 * selector prefix tuned per-property (some competing rules have 2 classes,
 * others 5), is fragile against Astra regenerating its dynamic Customizer
 * CSS with different selectors later, and produces far less readable code
 * than one consistent, well-documented `!important` policy for this one
 * self-contained file.
 *
 * Scope: `body.single-product` throughout -- unchanged from Phase 3B,
 * still correct.
 *
 * LAYOUT: still deliberately float-based, NOT flex/grid on the shared
 * parent -- unchanged from Phase 3B, still correct (re-verified this
 * phase: `div.product.type-product` is still the direct parent of
 * `.woocommerce-tabs`/`section.related.products`, and `.woocommerce-tabs
 * {clear:both}` still relies on the float model to let them flow normally
 * beneath the gallery/summary pair).
 *
 * Enqueued after tsc-tokens only (functions.php) -- unchanged.
 */

/* ============================================================
 * 1. GALLERY / SUMMARY COLUMNS
 * ============================================================
 * REVISED this phase: 52% / 44% (was 47%/47%). The 47/47 split itself was
 * never actually proven wrong live -- it never rendered at all, because the
 * width/float/margin declarations were losing to Astra's dynamic
 * Customizer CSS (`#content .ast-woocommerce-container div.product
 * div.images/.summary`, live-confirmed 1 ID + 4 classes + 2 elements,
 * gating the native ~50%/~46% split under `@media (min-width:922px)`).
 * Re-evaluated anyway per the brief's request to re-measure rather than
 * assume: 52/44 (a 4%-of-container gap, ~54px at this site's 1340px
 * single-product content width) gives the gallery slightly more presence
 * than a plain 50/50 split while keeping the summary column comfortably
 * wide (44% of 1340 = ~590px) for a 37.5px heading and full-measure body
 * text -- evidence-based, not the original 47/47 guess carried forward.
 */
body.single-product .woocommerce-product-gallery {
	float: left !important;
	width: 52% !important;
	margin: 0 0 var(--tsc-space-6) !important;
}

body.single-product .summary.entry-summary {
	float: right !important;
	width: 44% !important;
	margin: 0 0 var(--tsc-space-6) !important;
}

@media (max-width: 768px) {
	body.single-product .woocommerce-product-gallery,
	body.single-product .summary.entry-summary {
		float: none !important;
		width: 100% !important;
	}
}

/* Image containment -- unchanged from Phase 3B, already confirmed live
   winning (no competing rule targets `.woocommerce-product-gallery__
   wrapper` or sets width on the gallery image itself), kept `!important`
   anyway for consistency with the rest of this file's policy. */
body.single-product .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--tsc-border-light) !important;
}

body.single-product .woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

/* ============================================================
 * 2. EYEBROW
 * ============================================================
 * Live-confirmed already winning without `!important` (no competing Astra/
 * WooCommerce rule targets this child-theme-only class) -- added anyway
 * for a single consistent policy across the file, not because a conflict
 * was found here.
 */
.tsc-single-product-eyebrow {
	margin: 0 0 var(--tsc-space-3) !important;
	font-family: var(--tsc-font-body) !important;
	font-size: var(--tsc-fs-caption) !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--tsc-text-muted-light) !important;
}

/* ============================================================
 * 3. TITLE
 * ============================================================
 * Live-confirmed this phase: font-size/weight/color/text-transform were
 * already winning (25px flat-uppercase baseline correctly overridden), but
 * `font-family` specifically was NOT -- typography.css's own sitewide rule
 * `body:not(.home):not(.woocommerce-checkout) #content h1, ...
 * { font-family: var(--tsc-font-body); }` (1 ID + 2 pseudo-class-as-class +
 * 2 elements) out-specifies this file's `.product_title.entry-title`
 * (2 classes) for that one property, rendering the title in Inter instead
 * of Inter Display even though every other property was already correct.
 * `margin` was also losing (Astra's `.woocommerce-js div.product
 * .product_title { margin: 0 0 0.5em }`, 3 classes + 1 element, beat this
 * file's 2-class selector). Both fixed by `!important` below, consistent
 * with the rest of this file.
 */
.product_title.entry-title {
	margin: 0 0 var(--tsc-space-4) !important;
	font-family: var(--tsc-font-display) !important;
	font-size: var(--tsc-fs-h2) !important;
	font-weight: 600 !important;
	line-height: var(--tsc-lh-heading) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--tsc-text-light) !important;
}

/* ============================================================
 * 4. SHORT DESCRIPTION
 * ============================================================
 * Live-confirmed the paragraph's own margin was losing specifically to
 * `.woocommerce-js div.product div.summary .woocommerce-product-details__
 * short-description :last-child { margin-bottom: 1em; }` (5 effective
 * classes, including `:last-child`, which counts as a class for
 * specificity purposes) -- font-size/color/line-height on the paragraph
 * were already winning (no competing rule for those specific properties).
 */
.woocommerce-product-details__short-description {
	margin: 0 0 var(--tsc-space-5) !important;
	max-width: 46em !important;
}

.woocommerce-product-details__short-description p {
	margin: 0 !important;
	font-family: var(--tsc-font-body) !important;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem) !important;
	font-weight: 400 !important;
	line-height: var(--tsc-lh-body) !important;
	color: var(--tsc-text-muted-light) !important;
}

/* ============================================================
 * 5. RATING ROW
 * ============================================================
 * Live-confirmed already fully winning without `!important` (child-theme-
 * only classes, no native WooCommerce/Astra rule targets them) -- added
 * for policy consistency only.
 */
.tsc-single-product-rating {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: var(--tsc-space-2) !important;
	margin: 0 0 var(--tsc-space-5) !important;
	font-family: var(--tsc-font-body) !important;
	font-size: 0.9375rem !important;
}

.tsc-single-product-rating__stars {
	color: var(--tsc-text-muted-light) !important;
	letter-spacing: 0.05em !important;
}

.tsc-single-product-rating__average {
	font-weight: 600 !important;
	color: var(--tsc-text-light) !important;
}

.tsc-single-product-rating__link.woocommerce-review-link {
	color: var(--tsc-text-muted-light) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

@media (prefers-reduced-motion: no-preference) {
	.tsc-single-product-rating__link.woocommerce-review-link {
		transition: color 160ms ease;
	}
}

.tsc-single-product-rating__link.woocommerce-review-link:hover,
.tsc-single-product-rating__link.woocommerce-review-link:focus-visible {
	color: var(--tsc-accent-hover) !important;
}

/* ============================================================
 * 6. PRICE
 * ============================================================
 * Live-confirmed font-size/weight/color/margin were ALL losing to
 * `.woocommerce-js div.product p.price, .woocommerce-js div.product
 * span.price { color:...; font-size:1.5rem; font-weight:700; margin:0 0
 * 0.2em; }` and a separate dynamic-Customizer color rule for `.price` --
 * both have more total specificity than this file's `.summary.entry-
 * summary > .price` once element-selector counts are included (CSS
 * specificity compares ID, then class, then element counts in that order;
 * this file's selector had a higher class count but a LOWER element count,
 * and ties/losses on the element column still lose the whole comparison
 * once the class column is equal or behind). This was the single biggest
 * contributor to the "cramped" report: price-to-button spacing was
 * rendering at 4.5px (Astra's `0.2em`) instead of the intended 32px.
 * font-family was already winning (no competing rule sets it for `.price`).
 */
.summary.entry-summary > .price {
	margin: 0 0 var(--tsc-space-6) !important;
	font-family: var(--tsc-font-display) !important;
	font-size: clamp(1.375rem, 2vw, 1.75rem) !important;
	font-weight: 600 !important;
	color: var(--tsc-text-light) !important;
}

.summary.entry-summary > .price del {
	margin-right: var(--tsc-space-2) !important;
	font-weight: 400 !important;
	font-size: 0.75em !important;
	color: var(--tsc-text-muted-light) !important;
	opacity: 1 !important; /* overrides WooCommerce core's own default del{opacity:.5} -- muted color already carries the de-emphasis, so the price amount stays fully legible rather than doubly faded. */
}

.summary.entry-summary > .price ins {
	font-weight: 600 !important;
	text-decoration: none !important;
	color: var(--tsc-text-light) !important;
}

/* ============================================================
 * 7. ADD TO CART
 * ============================================================
 * Live-confirmed `padding` specifically was losing to Astra's own
 * `.woocommerce-js div.product form.cart .button.single_add_to_cart_button
 * { padding: 10px 20px; }` (5 classes + 2 elements) -- background-color/
 * color/border-radius were already winning (this file's 3-class selector
 * beat the lower-specificity generic `.button`/`.ast-button` reset rules
 * for those specific properties). The lost `padding` alone was enough to
 * keep the button visually identical to Astra's native small button
 * despite every color/family declaration already being "correct."
 */
.summary.entry-summary form.cart {
	margin: 0 !important;
}

.summary.entry-summary .single_add_to_cart_button {
	display: inline-block !important;
	min-width: 220px !important;
	box-sizing: border-box !important;
	text-align: center !important;
	padding: var(--tsc-space-4) var(--tsc-space-7) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--tsc-text-light) !important;
	color: var(--tsc-surface-light) !important;
	font-family: var(--tsc-font-body) !important;
	font-size: var(--tsc-fs-body) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
}

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

.summary.entry-summary .single_add_to_cart_button:hover,
.summary.entry-summary .single_add_to_cart_button:focus-visible {
	background-color: var(--tsc-accent) !important;
	color: var(--tsc-text-on-accent) !important;
}

.summary.entry-summary .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 2px;
}

@media (max-width: 500px) {
	/* Comfortable full-width hit target at narrow widths rather than a
	   small content-sized button -- the summary column itself is already
	   full-width here (see section 1's mobile stacking), so this reads as
	   a deliberate mobile CTA treatment, not a generic full-bleed bar. */
	.summary.entry-summary .single_add_to_cart_button {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
	}
}