/*
 * Single product page — Variant E "Onyx Accent" tokens.
 *
 * Target: body.single-product
 * Based on mock-product-compare.html#e tokens.
 */

body.single-product {
	--ppa-e-hairline: rgba(78, 168, 160, 0.30);
	--ppa-e-hairline-strong: rgba(78, 168, 160, 0.45);
	--ppa-e-teal: #4EA8A0;
	--ppa-e-teal-bright: #6BC4BC;
	--ppa-e-text: #EDE4D0;
	--ppa-e-sub: rgba(237, 228, 208, 0.72);

	/* [PARCHMENT-FIRST 2026-07-24] Three dedicated, mode-aware tokens replacing the old
	   pattern of a base !important rule + a separately-stacked :root[data-theme="light"]
	   !important override fighting over the same property. Single source of truth per
	   property = no specificity/stacking ambiguity. Dark values are UNCHANGED from what
	   shipped before this pass (verify: --ppa-e-panel-fill dark = the exact old
	   --ppa-glass-teal-weak value; --ppa-e-panel-border dark = the exact old
	   --ppa-glass-border value; --ppa-e-link-teal dark = --ppa-e-teal (#4EA8A0), the MAP
	   link's ORIGINAL base color -- see the SELF-CAUGHT note just below (NOT e-teal-bright,
	   which is only the hover color). */
	--ppa-e-panel-fill: rgba(78, 168, 160, 0.06);
	--ppa-e-panel-border: rgba(78, 168, 160, 0.28);
	/* [SELF-CAUGHT 2026-07-24] First pass aliased this to --ppa-e-teal-bright (#6BC4BC) --
	   wrong: the MAP link's ORIGINAL base color was var(--ppa-teal) (#4EA8A0, the DEEPER
	   teal); --ppa-e-teal-bright was only ever the HOVER color. Verified via a real headless
	   render that the wrong alias changed dark-mode's base link color -- corrected to
	   --ppa-e-teal so dark mode matches exactly what shipped before this pass. See
	   --ppa-e-link-teal-hover below for the separate (correct) hover-state alias. */
	--ppa-e-link-teal: var(--ppa-e-teal);
	--ppa-e-link-teal-hover: var(--ppa-e-teal-bright);

	background: var(--ppa-base, #000) !important;
}
/* [PDP LIGHT-MODE 2026-07-18] Flip the Onyx-Accent PDP to parchment: redefine the
   local --ppa-e-* vars + the page background under the light theme. Nav/footer stay
   obsidian via the global dark-anchor override. Product photos stay #fff. */
:root[data-theme="light"] body.single-product {
	--ppa-e-hairline: rgba(26, 29, 32, 0.18);
	--ppa-e-hairline-strong: rgba(26, 29, 32, 0.30);
	--ppa-e-teal: #0C8074;
	--ppa-e-teal-bright: #008F7A;
	--ppa-e-text: #1A1D20;
	--ppa-e-sub: rgba(26, 29, 32, 0.62);
	/* [PARCHMENT-FIRST 2026-07-24] Large surfaces = parchment (not teal): panel fill is now
	   the lifted-cream surface token, not a translucent teal wash. Structural hairlines
	   (panel/card borders) move from washed teal to a deeper, deliberate gold. Small-text
	   teal links get a darkened, AA-safe (>=4.5:1 on parchment) teal distinct from the
	   larger-context brand teal above (which stays lighter for icons/borders/large text). */
	--ppa-e-panel-fill: var(--ppa-surface);
	--ppa-e-panel-border: rgba(196, 148, 58, 0.4);
	--ppa-e-link-teal: #096459;
	/* Hover reuses the same AA-safe value in light mode -- deliberately simplified, no
	   separate lighter/darker hover shade in light mode, since accessibility here matters
	   more than preserving a cosmetic hover-brightness distinction that dark mode has. */
	--ppa-e-link-teal-hover: #096459;
	background: var(--ppa-base) !important;
}

/* ── Page wrapper ─────────────────────────────────────── */
body.single-product main.ppa-product-page {
	background: var(--ppa-base, #000);
}

/* ── Breadcrumb ──────────────────────────────────────── */
body.single-product .ppa-breadcrumb,
body.single-product .ppa-breadcrumb a {
	color: rgba(237, 228, 208, 0.55) !important;
}

body.single-product .ppa-breadcrumb a:hover {
	color: var(--ppa-e-teal-bright) !important;
}

body.single-product .ppa-breadcrumb-current {
	color: var(--ppa-e-text) !important;
}

/* ── Gallery ──────────────────────────────────────────── */
/* Product photos sit on WHITE, never the onyx panel. Distributor shots are
   cropped to the object on a #FFFFFF background, so any non-white frame
   renders that background as a hard-edged rectangle pasted on the page.
   White frame + object-fit:contain = the photo's own background becomes the
   frame's padding. Matches .ppa-card-img, which is already white. */
body.single-product .ppa-product-main-img {
	background: #FFFFFF !important;
	border: 1px solid var(--ppa-e-hairline) !important;
}

body.single-product .ppa-product-gallery .ppa-product-thumb {
	border: 1px solid var(--ppa-e-hairline);
}

body.single-product .ppa-product-gallery .ppa-product-thumb:hover,
body.single-product .ppa-product-gallery .ppa-product-thumb.active {
	border-color: var(--ppa-e-teal) !important;
	box-shadow: 0 0 12px rgba(78, 168, 160, 0.30);
}

/* ── Brand eyebrow — teal-bright per mock E (was gold) ── */
body.single-product .ppa-product-brand {
	color: var(--ppa-e-teal-bright) !important;
	letter-spacing: 0.22em;
}

/* ── Title ─────────────────────────────────────────────── */
body.single-product .ppa-product-title {
	color: var(--ppa-e-text) !important;
}

/* ── Gold divider under title → teal ─────────────────── */
body.single-product .ppa-pdp-divider {
	background: linear-gradient(90deg, var(--ppa-e-teal), transparent) !important;
	height: 1px;
}

/* ── Price block — E variant keyline top + bottom ───── */
body.single-product .ppa-product-price-block {
	padding: 14px 0 !important;
	border-top: 1px solid rgba(78, 168, 160, 0.25) !important;
	border-bottom: 1px solid rgba(78, 168, 160, 0.25) !important;
	margin-bottom: 16px !important;
}

body.single-product .ppa-product-price-current,
body.single-product .ppa-product-price-current .woocommerce-Price-amount,
body.single-product .ppa-product-price-current .woocommerce-Price-currencySymbol {
	color: var(--ppa-e-teal-bright) !important;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
}

/* ── Description ──────────────────────────────────────── */
body.single-product .ppa-product-desc {
	color: var(--ppa-e-text);
}

/* ── Add-to-Cart form ─────────────────────────────────── */
body.single-product .ppa-product-atc .stock.in-stock {
	color: var(--ppa-e-teal-bright) !important;
}

body.single-product .ppa-product-atc .stock.out-of-stock {
	color: #C4943A !important;
}

body.single-product form.cart .quantity input.qty {
	background: var(--ppa-base, #000) !important;
	color: var(--ppa-e-text) !important;
	border: 1px solid var(--ppa-e-hairline-strong) !important;
}

body.single-product form.cart .quantity input.qty:focus {
	border-color: var(--ppa-e-teal) !important;
	box-shadow: 0 0 0 3px rgba(78, 168, 160, 0.30) !important;
	outline: 0;
}

body.single-product form.cart .single_add_to_cart_button {
	background: rgba(78,168,160,0.12) !important;
	color: var(--ppa-parchment) !important;
	border: 1px solid var(--ppa-e-teal) !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	padding: 16px 28px !important;
	border-radius: 0;
	position: relative;
	overflow: hidden;
	transition: background 180ms ease, transform 180ms ease;
}

body.single-product form.cart .single_add_to_cart_button::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 720ms ease;
	pointer-events: none;
}

body.single-product form.cart .single_add_to_cart_button:hover::before {
	transform: translateX(120%);
}

body.single-product form.cart .single_add_to_cart_button:hover {
	background: rgba(78,168,160,0.22) !important;
	transform: translateY(-1px);
}

/* ── Trust strip — teal icons + teal hairlines ───────── */
body.single-product .ppa-pdp-trust-grid {
	border-top: 1px solid var(--ppa-e-hairline) !important;
	border-bottom: 1px solid var(--ppa-e-hairline) !important;
	padding: 20px 0;
}

body.single-product .ppa-pdp-trust-item svg {
	stroke: var(--ppa-e-teal-bright) !important;
}

body.single-product .ppa-pdp-trust-title {
	color: var(--ppa-e-text) !important;
}

body.single-product .ppa-pdp-trust-desc {
	color: var(--ppa-e-sub) !important;
}

/* ── Meta row (SKU, category, brand) ──────────────────── */
body.single-product .ppa-product-meta {
	border-top: 1px solid var(--ppa-e-hairline) !important;
}

body.single-product .ppa-product-meta-label {
	color: var(--ppa-e-sub) !important;
}

body.single-product .ppa-product-meta a {
	color: var(--ppa-e-teal-bright) !important;
}

/* ── Specs ─────────────────────────────────────────────── */
body.single-product .ppa-specs-section {
	border-top: 1px solid var(--ppa-e-hairline) !important;
	padding-top: 32px;
}

body.single-product .ppa-specs-section .ppa-section-label {
	color: var(--ppa-e-text) !important;
	border-left: 3px solid var(--ppa-e-teal);
	padding-left: 12px;
}

body.single-product .ppa-spec-row {
	border-bottom: 1px dotted var(--ppa-e-hairline) !important;
}

body.single-product .ppa-spec-key {
	color: var(--ppa-e-sub) !important;
}

body.single-product .ppa-spec-val {
	color: var(--ppa-e-text) !important;
}

/* ── Related products ────────────────────────────────── */
body.single-product .ppa-related-section {
	border-top: 1px solid var(--ppa-e-hairline) !important;
}

body.single-product .ppa-related-section .ppa-section-label {
	color: var(--ppa-e-text) !important;
	border-left: 3px solid var(--ppa-e-teal);
	padding-left: 12px;
}

body.single-product .ppa-related-grid .ppa-card {
	background: var(--ppa-base, #000) !important;
	border: 1px solid var(--ppa-e-hairline) !important;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

body.single-product .ppa-related-grid .ppa-card:hover {
	transform: translateY(-4px);
	border-color: var(--ppa-e-teal-bright) !important;
	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.6),
		0 0 0 1px var(--ppa-e-teal-bright) !important;
}

body.single-product .ppa-related-grid .ppa-card-brand {
	color: var(--ppa-e-teal-bright) !important;
}

body.single-product .ppa-related-grid .ppa-card-price,
body.single-product .ppa-related-grid .ppa-card-price .woocommerce-Price-amount {
	color: var(--ppa-e-teal-bright) !important;
}

/* ── PDP end rule ─────────────────────────────────────── */
body.single-product .ppa-pdp-end-rule {
	background: linear-gradient(90deg, transparent, var(--ppa-e-teal), transparent) !important;
	height: 1px;
}

body.single-product .ppa-pdp-end-back {
	color: var(--ppa-e-teal-bright) !important;
}

body.single-product .ppa-pdp-end-back:hover {
	color: var(--ppa-e-text) !important;
}

/* ══════════════════════════════════════════════════════
   v1.5.0 — Agent 8: PDP typography + trust + qty + OOS
   ══════════════════════════════════════════════════════ */

/* Title — 36px → 40px. Cormorant display reads more premium at this
   size on the E dark theme. */
body.single-product .ppa-product-title {
	font-size: 40px !important;
	line-height: 1.1 !important;
	letter-spacing: -0.005em;
}

/* Brand eyebrow — nudge to 14px, tighten letter-spacing. */
body.single-product .ppa-product-brand {
	font-size: 18px !important;        /* [2026-07-25] bigger eyebrow: the brand carries the identity now that the H1 drops it */
	letter-spacing: 0.2em !important;
}

/* Price — current 32px → 36px, regular 18px → 20px. The Cormorant
   serif lands better a little larger for the decision moment. */
body.single-product .ppa-product-price-current,
body.single-product .ppa-product-price-current .woocommerce-Price-amount,
body.single-product .ppa-product-price-current .woocommerce-Price-currencySymbol {
	font-size: 36px !important;
	line-height: 1.2 !important;
}

body.single-product .ppa-product-price-regular,
body.single-product .ppa-product-price-regular .woocommerce-Price-amount {
	font-size: 20px !important;
	line-height: 1.2 !important;
}

/* Add-to-Cart button — 11px → 14px text, tighter tracking. This is
   the single most visually jammed element on the live PDP. */
body.single-product form.cart .single_add_to_cart_button {
	font-size: 14px !important;
	letter-spacing: 0.2em !important;
	padding: 18px 32px !important;
}

/* Quantity input — tighten so the injected +/- buttons align. JS
   injects .ppa-qty-minus / .ppa-qty-plus siblings around this input. */
body.single-product form.cart .quantity {
	display: inline-flex !important;
	align-items: stretch;
	border: 1px solid rgba(78, 168, 160, 0.45);
	border-radius: 4px;
	overflow: hidden;
	background: var(--ppa-base, #000);
	height: 54px;
	margin-right: 12px;
	vertical-align: middle;
}

body.single-product form.cart .quantity input.qty {
	border: 0 !important;
	background: transparent !important;
	width: 60px;
	text-align: center;
	font-family: "Cormorant Garamond", serif;
	font-size: 20px;
	padding: 0 !important;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.single-product form.cart .quantity input.qty:focus {
	box-shadow: none !important;
	outline: none !important;
}

body.single-product form.cart .quantity:focus-within {
	border-color: var(--ppa-e-teal) !important;
	box-shadow: 0 0 0 3px rgba(78, 168, 160, 0.25);
}

body.single-product form.cart .quantity .ppa-qty-btn {
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(78, 168, 160, 0.25);
	border-right: 1px solid rgba(78, 168, 160, 0.25);
	color: var(--ppa-e-text);
	cursor: pointer;
	width: 36px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease, background-color 0.15s ease;
	padding: 0;
}

body.single-product form.cart .quantity .ppa-qty-minus {
	border-left: 0;
}

body.single-product form.cart .quantity .ppa-qty-plus {
	border-right: 0;
}

body.single-product form.cart .quantity .ppa-qty-btn:hover {
	color: var(--ppa-e-teal-bright);
	background: rgba(78, 168, 160, 0.08);
}

body.single-product form.cart .quantity .ppa-qty-btn:focus {
	outline: 2px solid rgba(78, 168, 160, 0.5);
	outline-offset: -2px;
}

body.single-product form.cart .quantity .ppa-qty-btn[disabled] {
	color: rgba(237, 228, 208, 0.28);
	cursor: not-allowed;
}

/* Specs — section label 9px → 12px, keys 12→13, values 14→15. */
/* [B3/B9/B13 2026-07-23] One shared heading scale across every v2 panel (specs/related/FFL)
   instead of ad hoc per-section sizes -- FFL's heading previously had NO override at all
   (too small/low-contrast per owner review); now explicitly sized + colored like its
   siblings, 12px -> 13px for all three, plus an explicit bright color so contrast never
   depends on inheritance. */
body.single-product .ppa-specs-section .ppa-section-label,
body.single-product .ppa-related-section .ppa-section-label,
body.single-product .ppa-pdp-ffl .ppa-section-label {
	font-size: 13px !important;
	letter-spacing: 0.22em !important;
	font-weight: 700 !important;
	color: var(--ppa-e-text) !important;
}
/* [B9 2026-07-23] Related section hugged the divider above it -- specs already had
   padding-top:32px (base rule), related never did. */
body.single-product .ppa-related-section {
	padding-top: 32px !important;
}
/* [SPEC-DOSSIER FILL FIX 2026-07-25] The old approach used the grid CONTAINER background as a
   gap-border (--ppa-e-panel-border: teal 0.28 dark / gold 0.4 light) with cards on --ppa-e-panel-fill.
   With an odd group count the empty grid cell exposed that strong container colour as a big
   mismatched block -- what read as "two layers of teal" (dark) / "two parchments" (light). Fix: the
   container is transparent and each group is its own teal-tinted, hairline-bordered card, so an
   empty cell just shows the page and the fill is ONE consistent teal in both themes. */
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dgrid {
	background: transparent !important;
	border: 0 !important;
	gap: 14px !important;
	overflow: visible !important;
}
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dg {
	background: var(--ppa-e-panel-fill) !important;
	border: 1px solid var(--ppa-e-panel-border) !important;
	border-radius: 4px;
}
/* [LIGHT-MODE OBSIDIAN 2026-07-25] William: teal-6% cards on parchment were near-invisible
   ("everything parchment / very light teal, hard to read"). Invert to an obsidian dossier panel
   with parchment text -- strong contrast on the light page, premium, highly readable. The
   .ppa-pdp-v2-dgrid qualifier lifts specificity above the base .ppa-pdp-v2-dg fill rule. */
:root[data-theme="light"] body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dgrid .ppa-pdp-v2-dg {
	background: #12201D !important;                       /* obsidian, faint teal cast */
	border-color: rgba(78, 168, 160, 0.30) !important;
}
:root[data-theme="light"] body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dgrid .ppa-pdp-v2-dg-h { color: #EDE4D0 !important; }
:root[data-theme="light"] body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dgrid .ppa-pdp-v2-dg-r dt { color: rgba(237, 228, 208, 0.62) !important; }
:root[data-theme="light"] body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dgrid .ppa-pdp-v2-dg-r dd { color: #EDE4D0 !important; }
:root[data-theme="light"] body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dgrid .ppa-pdp-v2-dg-r { border-bottom-color: rgba(237, 228, 208, 0.12) !important; }

/* [PICKUP BADGE LIGHT CONTRAST 2026-07-25] The badge kept its dark-theme cream text, which was
   unreadable on the light teal tint. Dark text + a deeper teal tint + deeper teal eyebrow so it
   reads in light mode. */
:root[data-theme="light"] body.single-product .ppa-pickup-banner {
	background: rgba(12, 128, 116, 0.10) !important;
	border-color: rgba(12, 128, 116, 0.34) !important;
}
:root[data-theme="light"] body.single-product .ppa-pickup-banner__eyebrow { color: #0C6E63 !important; }
:root[data-theme="light"] body.single-product .ppa-pickup-banner__title { color: #1A1D20 !important; }
:root[data-theme="light"] body.single-product .ppa-pickup-banner__copy { color: rgba(26, 29, 32, 0.82) !important; }

/* [FFL EITHER/OR 2026-07-25] On pickup-only firearms the manufacturer requires OUR Gilbert FFL, so
   the generic "ship to your designated FFL" disclaimer (ppa-compliance plugin, .ppa-ffl-disclaimer)
   contradicts the pickup badge. When the pickup badge is on the page, hide that disclaimer -- the
   badge covers it. Either/or, per William. */
body.single-product:has(.ppa-pickup-banner) .ppa-ffl-disclaimer { display: none !important; }
/* [CORRECTION 2026-07-24] .ppa-pdp-v2-chip and .ppa-pdp-v2-dg-r border colors are NOT
   consolidated into --ppa-e-panel-border here -- unlike dgrid/dg above (which were
   genuinely teal in dark mode via --ppa-glass-border/--ppa-glass-teal-weak), those two
   elements' base rule (inline, single-product.php) already uses plain var(--ppa-line),
   which was ALREADY gold-tinted in dark mode (rgba(196,148,58,0.10), not teal). Routing
   them through --ppa-e-panel-border (dark = teal 0.28) would have changed their dark-mode
   appearance -- exactly what this pass must not do. The sitewide --ppa-line light-mode
   deepening (style.css, 0.12 -> 0.22) already gives them a correctly-deepened warm-ink
   hairline in light mode with zero PDP-specific override needed, and zero dark-mode change
   (--ppa-line's dark value is untouched). No new rule required for these two. */
/* [B10 2026-07-23] The CPR chip (.ppa-pdp-cpr, styled sitewide in style.css) carries a
   margin-top meant for when it sat on its own line below the price. Now that it's rendered
   INSIDE #ppaPriceBlock's flex row (attached, not floating), zero that out here rather than
   editing the shared sitewide rule -- .ppa-pdp-cpr is ALSO driven by a second, separate
   system (functions.php's woocommerce_get_price_html filter, used on catalog/related cards),
   so this stays scoped to only the nested case this move actually created. */
body.single-product .ppa-pdp-v2 #ppaPriceBlock .ppa-pdp-cpr {
	margin-top: 0 !important;
}

body.single-product .ppa-spec-key {
	font-size: 13px !important;
	letter-spacing: 0.1em !important;
}

body.single-product .ppa-spec-val {
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* Product description body — 16px → 17px with generous line-height. */
body.single-product .ppa-product-desc,
body.single-product .ppa-product-desc p {
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: var(--ppa-e-text) !important;
}

/* Trust strip — titles 10→14 full opacity, desc 12→13, icons 20px. */
body.single-product .ppa-pdp-trust-grid {
	padding: 24px 0 !important;
}

body.single-product .ppa-pdp-trust-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	color: var(--ppa-e-text) !important;
	opacity: 1 !important;
	margin-bottom: 6px !important;
}

body.single-product .ppa-pdp-trust-desc {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--ppa-e-sub) !important;
}

body.single-product .ppa-pdp-trust-item svg {
	width: 24px !important;
	height: 24px !important;
	stroke-width: 1.8 !important;
	margin-bottom: 10px !important;
}

/* Meta row — labels 10→11, values 13→14. */
body.single-product .ppa-product-meta-label {
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
}

body.single-product .ppa-product-meta a,
body.single-product .ppa-product-meta-value {
	font-size: 14px !important;
}

/* OOS — upgrade from plain text to a gold badge + sub-text. JS
   (single-product-qty.js) also rewrites the text to "OUT OF STOCK"
   for typography consistency. */
body.single-product .ppa-product-atc .stock.out-of-stock {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 10px 18px !important;
	background: rgba(196, 148, 58, 0.08) !important;
	border: 1px solid rgba(196, 148, 58, 0.45) !important;
	border-left: 3px solid #C4943A !important;
	color: #C4943A !important;
	font-family: "Barlow Condensed", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	border-radius: 3px;
	margin: 8px 0 !important;
}

body.single-product .ppa-product-atc .ppa-oos-subtext {
	display: block;
	margin-top: 10px;
	font-family: "Barlow", sans-serif;
	font-size: 14px;
	font-style: italic;
	color: rgba(237, 228, 208, 0.72);
	max-width: 420px;
}

body.single-product .ppa-product-atc .ppa-oos-subtext a {
	color: var(--ppa-e-teal-bright);
	text-decoration: none;
	border-bottom: 1px solid rgba(78, 168, 160, 0.3);
	font-style: normal;
}

body.single-product .ppa-product-atc .ppa-oos-subtext a:hover {
	border-bottom-color: var(--ppa-e-teal);
}

/* ══════════════════════════════════════════════════════
   PDP IMAGE + SPECS POLISH (Shannon 2026-04-20)
   Image: full-size by default instead of small-then-hover-zoom.
   Specs: paragraph flow instead of two-column grid table.
   ══════════════════════════════════════════════════════ */

/* Main product image — fill the frame. Prior rule: max 90% × 90% with
   24px padding and a 1.4x hover zoom, which left the photo feeling
   postage-stamped against its own border. Now: 100% fill, 10px inner
   breathing room, and disable the hover pop (feels gimmicky at size). */
body.single-product .ppa-product-main-img {
	aspect-ratio: 1 !important;
	cursor: default !important;
	padding: 10px !important;
	box-sizing: border-box;
}
body.single-product .ppa-product-main-img img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	object-fit: contain !important;
	cursor: default !important;
	transform: none !important;
}
body.single-product .ppa-product-main-img:hover img {
	transform: none !important;
}


/* ══════════════════════════════════════════════════════
   Mobile overflow fix + tap-to-zoom lightbox (2026-04-27)

   Diagnosed via _diag-pdp-mobile-overflow.mjs at 390px:
   .ppa-product-layout (grid 1fr) was expanding to 472px
   because `1fr` = `minmax(auto, 1fr)` — the track grew to
   fit min-content of the WC <select.variations> and the
   ATC button (uppercase + 0.2em letter-spacing + 32px
   padding). Fix: `minmax(0, 1fr)` + min-width:0 on items
   so the column collapses to viewport width and inner
   elements clip/wrap instead of pushing out.
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	/* Page gutter — 24 → 16 reclaims 16px of usable width */
	body.single-product .ppa-product-page {
		padding: 0 16px 60px !important;
	}

	/* THE fix — replace 1fr with minmax(0, 1fr) so the track
	   can shrink below children's min-content. Also widen the
	   row gap a touch since gallery + details now stack. */
	body.single-product .ppa-product-layout {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 32px !important;
	}

	/* Allow grid items themselves to shrink. `min-width: 0` is
	   what unsticks the auto-sizing default. */
	body.single-product .ppa-product-gallery,
	body.single-product .ppa-product-details {
		min-width: 0 !important;
	}

	/* WooCommerce variations table / select — most common
	   culprit on variable products like StopBox Pro. Long
	   option labels ("OD Green Maple Camo / Black") size the
	   <select> > grid track > everything. */
	body.single-product .variations,
	body.single-product .variations table,
	body.single-product .variations tbody,
	body.single-product .variations tr,
	body.single-product .variations td,
	body.single-product .variations th {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.single-product .variations label {
		display: block;
		font-family: "Barlow Condensed", sans-serif;
		font-size: 12px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--ppa-e-sub);
		margin-bottom: 6px;
	}
	body.single-product .variations select {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	body.single-product .reset_variations {
		font-size: 12px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ppa-e-teal-bright);
		margin-top: 8px;
		display: inline-block;
	}

	/* Cart form — stack qty over ATC. Without this the inline
	   layout + 100% width button competes for the same row. */
	body.single-product form.cart {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		width: 100% !important;
		min-width: 0 !important;
	}
	body.single-product form.cart .quantity {
		width: 100% !important;
		max-width: 200px !important;
		margin: 0 !important;
	}
	body.single-product form.cart .single_add_to_cart_button {
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 16px 20px !important;
	}

	/* Belt-and-suspenders — clip any future stray child. Use
	   `clip` (not `hidden`) so we don't establish a scroll
	   container that breaks the sticky back-bar. */
	body.single-product,
	body.single-product .ppa-product-page {
		overflow-x: clip;
	}
}

/* ── Tap-to-zoom lightbox ────────────────────────────────
   Opens when the main product image is tapped/clicked.
   Inside, the OS handles native pinch-zoom (touch-action:
   pinch-zoom). Closes on backdrop click, X, or Escape.
   Markup + JS in single-product.php. */

body.single-product .ppa-product-main-img,
body.single-product .ppa-product-main-img img {
	cursor: zoom-in !important;
}

.ppa-img-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: ppaLightboxIn 180ms ease;
}

.ppa-img-lightbox[hidden] {
	display: none !important;
}

@keyframes ppaLightboxIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ppa-img-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	touch-action: pinch-zoom;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	background: var(--ppa-base, #000);
}

.ppa-img-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 14, 16, 0.7);
	border: 1px solid rgba(78, 168, 160, 0.4);
	border-radius: 50%;
	color: var(--ppa-e-text);
	font-family: var(--ppa-font-display, "Cormorant Garamond"), serif;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.ppa-img-lightbox__close:hover,
.ppa-img-lightbox__close:focus-visible {
	background: rgba(78, 168, 160, 0.15);
	border-color: rgba(78, 168, 160, 0.7);
	outline: none;
}

.ppa-img-lightbox__hint {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(237, 228, 208, 0.55);
	font-family: var(--ppa-font-ui, "Barlow Condensed"), sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	pointer-events: none;
}

/* When lightbox is open, lock body scroll so pinch only
   affects the image, not the page underneath. */
body.ppa-lightbox-open {
	overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════
   PDP V2 — non-apparel redesign, cosmetic/polish layer
   (2026-07-22)

   Structural rules for the same .ppa-pdp-v2-* classes live
   inline in single-product.php (Porkbun strips ?ver= and
   edge-caches assets/css/* for a year — see the comment on
   that inline block). This file only adds refinement that's
   safe to arrive late: hover states, transitions, and font
   sizing on top of the box model the inline rules already
   set up.

   Everything here is scoped under .ppa-pdp-v2 (the wrapper
   class single-product.php adds to <main> for every
   NON-apparel product — see $_ppa_is_apparel). Apparel PDPs
   never get that class, so nothing in this block can ever
   reach them; every class name below is also ppa-pdp-v2-*
   prefixed so it can't collide with anything else on the
   site either way.

   Tokens consumed here (--ppa-base / --ppa-parchment /
   --ppa-gold / --ppa-teal / --ppa-price-color / --ppa-line /
   --ppa-font-display / --ppa-font-ui / --ppa-font-body) are
   the theme's real, existing custom properties (style.css:
   19-115) — NOT hardcoded hex — so this responds to the
   existing light/dark toggle automatically, same as the rest
   of this file already does via --ppa-e-*.

   Font weights used below: Barlow Condensed 600 (loaded),
   Barlow 400 (loaded), Cormorant Garamond 400/italic/600
   (600 added to the Google Fonts URL in functions.php as
   part of this same change — see the font-fix comment
   there). Nothing here requests an unloaded weight.
   ══════════════════════════════════════════════════════ */

/* Chips — hover lift, matches the related-card / button hover language
   already used elsewhere on this page. */
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-chip {
	transition: border-color 180ms ease, color 180ms ease;
}
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-chips:hover .ppa-pdp-v2-chip {
	border-color: var(--ppa-e-hairline-strong, var(--ppa-line));
}

/* MAP link — brighten on hover so the dotted-underline affordance reads
   as interactive without needing a full badge treatment.
   [PARCHMENT-FIRST 2026-07-24] --ppa-e-link-teal-hover aliases to --ppa-e-teal-bright in
   dark mode (byte-identical to what shipped before this pass) and to a deepened, AA-safe
   teal in light mode instead of --ppa-e-teal-bright's #008F7A (measured 3.19 contrast on
   parchment -- also below AA, not just the base link color). */
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-info-t:hover,
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-info-t:focus-visible {
	color: var(--ppa-e-link-teal-hover, var(--ppa-teal));
}
/* [G9 2026-09-12] WCAG 2.2 target-size (2.5.8): these inline text-buttons measured
   20px tall. Vertical padding lifts the hit target past 24px; the matching negative
   margins keep the text exactly where it was, so nothing visually shifts. */
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-info-t {
	padding-top: 4px; padding-bottom: 4px;
	margin-top: -4px; margin-bottom: -4px;
}

/* Dossier — italic serif group headings read a little large flush against
   the 13px condensed labels below them at the base 21px; hold desktop size,
   tighten only on narrow screens where the single-column layout already
   gives the heading more visual room relative to the card. */
@media (max-width: 480px) {
	body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dg-h {
		font-size: 19px;
	}
}

/* Dossier card — same hover lift language as .ppa-related-grid .ppa-card
   (single-product-e.css above) and .ppa-card sitewide, applied consistently
   here instead of introducing a third hover treatment. */
body.single-product .ppa-pdp-v2 .ppa-pdp-v2-dg {
	transition: background 180ms ease;
}

/* Reduced motion — the popover already only animates opacity/transform at
   160ms (set inline); nothing further to gate here, but stated for the
   record per the site's motion-preference convention. */
@media (prefers-reduced-motion: reduce) {
	body.single-product .ppa-pdp-v2 .ppa-pdp-v2-info-p {
		transition: none;
	}
}