/* ==========================================================================
   Pink Vial Co. — Base stylesheet
   Design tokens, the age/research gate, and the global compliance footer.
   Loaded on every front-end page. Scoped under .pvc-*, .pvc-gate and
   .pvc-global-* wrappers — no bare element selectors.
   ========================================================================== */

:root {
	--pvc-ink: #17243a;
	--pvc-burgundy: #6f3d4a;
	--pvc-rose: #c77f91;
	--pvc-ivory: #fbf7f2;
	--pvc-blush: #f6e7e8;
	--pvc-blush-2: #f2e8e4;
	--pvc-gold: #b89a6a;
	--pvc-line: #ddd4cf;
	--pvc-body-text: #5d6879;
	--pvc-serif: Georgia, 'Times New Roman', serif;
	--pvc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
	--pvc-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Site logo size cap. WordPress's Site Logo block has its own "Image
 * width" setting (in the block sidebar, Appearance → Editor → header
 * template part → click the logo), but if that's never been set it
 * defaults to the uploaded image's own native size — a square photo
 * uploaded at e.g. 1254×1254px would otherwise render at that full size
 * in the header, pushing the whole page down. This caps it at a normal
 * header height regardless of the uploaded image's native dimensions or
 * whether that block setting has been configured, site-wide since the
 * header appears on every page, not just the ones this plugin renders.
 * ------------------------------------------------------------------------- */
.custom-logo { max-height: 72px; width: auto; height: auto; }

/* -------------------------------------------------------------------------
 * Research/age gate
 * ------------------------------------------------------------------------- */
html.pvc-gate-accepted #pvc-research-gate { display: none !important; }
body.pvc-gate-locked { overflow: hidden; }

.pvc-gate {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(23, 36, 58, 0.82);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 1;
	transition: opacity 0.2s ease;
}
.pvc-gate-hidden { opacity: 0; pointer-events: none; }
.pvc-gate-card {
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: var(--pvc-ivory);
	padding: 40px;
	box-shadow: 0 35px 90px rgba(0, 0, 0, 0.3);
	text-align: center;
}
.pvc-gate-mark {
	width: 68px;
	height: 68px;
	border: 1px solid var(--pvc-gold);
	border-radius: 50%;
	margin: 0 auto 20px;
	display: grid;
	place-items: center;
	color: var(--pvc-rose);
	font: 600 23px var(--pvc-serif);
	line-height: 0.6;
}
.pvc-gate-mark small { display: block; font: 600 7px var(--pvc-sans); letter-spacing: 0.18em; }
.pvc-gate-logo { max-height: 72px; width: auto; height: auto; margin: 0 auto 20px; display: block; }
.pvc-gate-card h2 { font: 400 clamp(32px, 5vw, 44px) var(--pvc-serif); margin: 14px 0; color: var(--pvc-burgundy); }
.pvc-gate-lead { color: #2e3742; font-size: 16px; line-height: 1.8; }
.pvc-gate-notice { text-align: left; background: var(--pvc-blush); padding: 18px; margin: 18px 0; }
.pvc-gate-notice strong { display: block; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; color: var(--pvc-ink); }
.pvc-gate-notice label { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.75; margin: 14px 0; color: #1f2733; }
.pvc-gate-notice input { margin-top: 3px; accent-color: var(--pvc-rose); flex-shrink: 0; width: 19px; height: 19px; }
.pvc-gate-small { font-size: 12px; line-height: 1.6; color: #7d7278; }
.pvc-gate-enter {
	width: 100%;
	border: 0;
	background: var(--pvc-burgundy);
	color: #fff;
	padding: 15px 20px;
	font: 600 10px var(--pvc-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--pvc-radius);
}
.pvc-gate-enter:disabled { opacity: 0.4; cursor: not-allowed; }
.pvc-gate-enter:focus-visible { outline: 2px solid var(--pvc-ink); outline-offset: 2px; }
.pvc-gate-exit { display: inline-block; margin-top: 16px; color: #6e5c62; font-size: 11px; text-decoration: underline; border: 0; background: transparent; cursor: pointer; }

@media (max-width: 640px) {
	.pvc-gate-card { padding: 28px 20px; }
}

/* -------------------------------------------------------------------------
 * Global compliance footer (every front-end page)
 * ------------------------------------------------------------------------- */
.pvc-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; }

.pvc-global-compliance-footer { background: var(--pvc-ink); color: #fff; padding: 42px 0 48px; }
/* Narrower than the earlier 1400px width: that was widened specifically
   to reduce vertical scrolling, but a ~1400px line length is genuinely
   hard to read regardless of font size — the eye loses its place
   tracking back to the start of the next line at that measure. ~780px
   lands closer to the ~65-75 character optimal reading line length,
   trading a bit more vertical scroll for text that's actually easy to
   read, which matters more given actual readability feedback. */
.pvc-global-compliance-footer .pvc-wrap { width: min(820px, calc(100% - 40px)); }
.pvc-global-brand { font: 400 26px var(--pvc-serif); margin-bottom: 16px; }
.pvc-global-disclaimer { max-width: 780px; }
.pvc-global-disclaimer h2 { margin: 0 0 12px; color: #fff; font: 400 26px var(--pvc-serif); }
.pvc-global-disclaimer p { margin: 14px 0; color: #e8ebf1; font: 14px/1.85 var(--pvc-sans); max-width: 780px; }
.pvc-global-disclaimer p strong { color: #fff; }
.pvc-global-disclaimer hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 16px 0; }
.pvc-global-compliance-footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.pvc-global-compliance-footer nav a { color: #fff; text-decoration: none; font: 600 10px/1 var(--pvc-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.pvc-global-compliance-footer nav a:hover,
.pvc-global-compliance-footer nav a:focus-visible { text-decoration: underline; }

.pvc-eyebrow { font: 600 10px var(--pvc-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pvc-rose); }

/* -------------------------------------------------------------------------
 * Order-received page: payment-still-pending notice. Deliberately styled
 * as an unmissable action item (amber warning treatment, not the site's
 * usual quiet blush tone) since it sits between "Order received" and the
 * order table, right where a customer could otherwise assume the order
 * is already fully complete and stop reading before reaching the actual
 * payment instructions further down the page.
 * ------------------------------------------------------------------------- */
.pvc-payment-pending-notice {
	margin: 4px 0 24px;
	padding: 16px 18px;
	background: #fdf3d9;
	border: 1px solid #e8c66a;
	border-left: 4px solid #b8860b;
	color: #4a3c0f;
	font: 13px/1.6 var(--pvc-sans);
}
.pvc-payment-pending-notice strong { display: block; margin-bottom: 4px; color: #7a5c00; font-size: 13px; }
.pvc-payment-switch { margin-top: 10px; }
.pvc-payment-switch a {
	display: inline-block;
	color: #7a5c00;
	font-weight: 600;
	font-size: 12px;
	text-decoration: underline;
}
.pvc-payment-switch a:hover, .pvc-payment-switch a:focus-visible { color: #4a3c0f; }

/* -------------------------------------------------------------------------
 * Manual Venmo payment gateway instructions (order-received page).
 * ------------------------------------------------------------------------- */
.pvc-venmo-instructions { margin: 24px 0; padding: 20px; background: var(--pvc-blush-2); border: 1px solid var(--pvc-line); }
.pvc-venmo-instructions h2 { margin: 0 0 10px; font: 400 22px var(--pvc-serif) !important; color: var(--pvc-burgundy); display: flex; align-items: center; gap: 10px; }
.pvc-venmo-instructions p { font-size: 15px !important; line-height: 1.7 !important; color: #2b2528 !important; font-weight: 700 !important; }
.pvc-venmo-highlight { color: hotpink !important; }
/* Element-type prefix (p.pvc-venmo-critical, not just .pvc-venmo-critical)
   is deliberate, not a typo — a bare single-class selector has the exact
   same specificity as .pvc-order-received-page * below, and since that
   rule appears later in this file, a specificity tie would let it win
   and shrink this back to 13px. The added "p" bumps specificity just
   enough to win regardless of source order. Applies to the matching
   Cash App and Zelle rules too, for the same reason. */
p.pvc-venmo-critical { font-size: 15px !important; line-height: 1.7 !important; color: #c0392b !important; font-weight: 700 !important; background: #fdf0ef; border-left: 3px solid #c0392b; padding: 10px 14px; margin: 12px 0 !important; }
.pvc-venmo-box { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.pvc-venmo-qr { border: 1px solid var(--pvc-line); background: #fff; padding: 8px; }
.pvc-venmo-details p { margin: 6px 0; font-size: 15px !important; color: #2b2528 !important; font-weight: 700 !important; }
.pvc-venmo-details p strong { color: var(--pvc-ink); }
.pvc-venmo-details .pvc-btn-venmo {
	display: inline-block;
	margin-top: 6px;
	padding: 12px 20px;
	background: #008CFF;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none;
	border-radius: var(--pvc-radius);
	transition: background 0.15s ease;
}
.pvc-venmo-details .pvc-btn-venmo:hover, .pvc-venmo-details .pvc-btn-venmo:focus-visible { background: #0070cc; }

/* Classic-checkout-template Venmo icon badge (see pvc_add_venmo_icon() in
   the-pink-vial-co.php) — matches the badge rendered by the block-
   checkout's own JS integration (pvc-venmo-blocks.js) for visual
   consistency between the two checkout systems. */
.pvc-gateway-icon--venmo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #008CFF;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	margin-right: 6px;
	vertical-align: middle;
}
/* Coin-style visual with a bold "B" and an inset white ring (built via
   box-shadow rather than an SVG image) — evokes a classic crypto-coin
   look without tracing any specific company's exact trademarked glyph
   paths. Deliberately still generic enough for a gateway that supports
   several different coins, not just Bitcoin specifically. */
.pvc-gateway-icon--crypto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #F7931A;
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #d67d0a;
	color: #fff;
	font: 700 12px Georgia, serif;
	margin-right: 6px;
	vertical-align: middle;
	flex-shrink: 0;
}
/* The gateway's own radio label doesn't lay itself out as a row by
   default, which is why the icon rendered above the "Cryptocurrency"
   text instead of beside it (confirmed via screenshot) — forced here
   specifically for the label containing this icon, without needing to
   touch the label's other, unrelated styling. */
label:has(.pvc-gateway-icon--crypto) { display: flex !important; align-items: center !important; gap: 4px !important; }

.pvc-gateway-icon--cashapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #00D632;
	color: #fff;
	font: 700 12px Georgia, serif;
	margin-right: 6px;
	vertical-align: middle;
	flex-shrink: 0;
}
label:has(.pvc-gateway-icon--cashapp) { display: flex !important; align-items: center !important; gap: 4px !important; }

/* -------------------------------------------------------------------------
 * Manual Cash App payment gateway instructions (order-received page) —
 * mirrors the Venmo instructions block styling for consistency.
 * ------------------------------------------------------------------------- */
.pvc-cashapp-instructions { margin: 24px 0; padding: 20px; background: var(--pvc-blush-2); border: 1px solid var(--pvc-line); }
.pvc-cashapp-instructions h2 { margin: 0 0 10px; font: 400 22px var(--pvc-serif) !important; color: var(--pvc-burgundy); display: flex; align-items: center; gap: 10px; }
.pvc-cashapp-instructions p { font-size: 15px !important; line-height: 1.7 !important; color: #2b2528 !important; font-weight: 700 !important; }
p.pvc-cashapp-critical { font-size: 15px !important; line-height: 1.7 !important; color: #c0392b !important; font-weight: 700 !important; background: #fdf0ef; border-left: 3px solid #c0392b; padding: 10px 14px; margin: 12px 0 !important; }
.pvc-cashapp-box { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.pvc-cashapp-qr { border: 1px solid var(--pvc-line); background: #fff; padding: 8px; }
.pvc-cashapp-details p { margin: 6px 0; font-size: 15px !important; color: #2b2528 !important; font-weight: 700 !important; }
.pvc-cashapp-details p strong { color: var(--pvc-ink); }
.pvc-cashapp-details .pvc-btn-cashapp {
	display: inline-block;
	margin-top: 6px;
	padding: 12px 20px;
	background: #00D632;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none;
	border-radius: var(--pvc-radius);
	transition: background 0.15s ease;
}
.pvc-cashapp-details .pvc-btn-cashapp:hover, .pvc-cashapp-details .pvc-btn-cashapp:focus-visible { background: #00b529; }

.pvc-gateway-icon--zelle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #6D1ED4;
	color: #fff;
	font: 700 12px Georgia, serif;
	margin-right: 6px;
	vertical-align: middle;
	flex-shrink: 0;
}
label:has(.pvc-gateway-icon--zelle) { display: flex !important; align-items: center !important; gap: 4px !important; }

/* -------------------------------------------------------------------------
 * Manual Zelle payment gateway instructions (order-received page) —
 * mirrors the Venmo/Cash App instructions block styling for consistency.
 * No button here: unlike Venmo/Cash App, there is no functional payment
 * link Zelle exposes publicly to link to (see class-pvc-gateway-
 * zelle.php docblock).
 * ------------------------------------------------------------------------- */
.pvc-zelle-instructions { margin: 24px 0; padding: 20px; background: var(--pvc-blush-2); border: 1px solid var(--pvc-line); }
.pvc-zelle-instructions h2 { margin: 0 0 10px; font: 400 22px var(--pvc-serif) !important; color: var(--pvc-burgundy); display: flex; align-items: center; gap: 10px; }
.pvc-zelle-instructions p { font-size: 15px !important; line-height: 1.7 !important; color: #2b2528 !important; font-weight: 700 !important; }
p.pvc-zelle-critical { font-size: 15px !important; line-height: 1.7 !important; color: #c0392b !important; font-weight: 700 !important; background: #fdf0ef; border-left: 3px solid #c0392b; padding: 10px 14px; margin: 12px 0 !important; }
/* The most severe warning on this page — confirmed automated bank
   rejection + permanent order cancellation, not just an inconvenience —
   so it's visually distinct from (and more prominent than) the "no
   payment link" notice above via the double border and darker red. */
p.pvc-zelle-prohibited {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: #7a1f1f !important;
	font-weight: 700 !important;
	background: #fce4e4;
	border: 2px solid #a83232;
	padding: 14px 16px;
	margin: 16px 0 !important;
}

/* Same severity treatment as p.pvc-zelle-prohibited above — the
   consequence here (funds sent to the wrong network/currency are
   permanently unrecoverable) is just as serious. Element-type prefix
   (div.pvc-crypto-network-warning, not just .pvc-crypto-network-warning)
   for the same reason as the Zelle/Venmo/Cash App critical rules — a
   bare single-class selector ties in specificity with
   .pvc-order-received-page * below, and since that rule appears later
   in this file, the tie would let it win and shrink this back down. */
div.pvc-crypto-network-warning {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: #7a1f1f !important;
	font-weight: 700 !important;
	background: #fce4e4;
	border: 2px solid #a83232;
	padding: 14px 16px;
	margin: 16px 0;
}
/* Nested how-to list — same element/class-combo specificity approach as
   the parent warning above, needed for the same reason (winning against
   .pvc-order-received-page * regardless of source order). The title and
   list items are deliberately NOT bold like the parent warning, so the
   scannable step-by-step instructions read as calmer, actionable
   guidance rather than another wall of urgent red text. */
p.pvc-crypto-howto-title { font-size: 14px !important; font-weight: 700 !important; margin: 12px 0 6px !important; color: #7a1f1f !important; }
.pvc-crypto-network-warning ul.pvc-crypto-howto { margin: 0 0 0 20px !important; padding: 0; }
.pvc-crypto-network-warning ul.pvc-crypto-howto li { font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; margin: 6px 0 !important; color: #5a2020 !important; }
.pvc-zelle-box { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.pvc-zelle-qr { border: 1px solid var(--pvc-line); background: #fff; padding: 8px; }
.pvc-zelle-details p { margin: 6px 0; font-size: 15px !important; color: #2b2528 !important; font-weight: 700 !important; }
.pvc-zelle-details p strong { color: var(--pvc-ink); }

/* -------------------------------------------------------------------------
 * Checkout: "Read Terms & Conditions · Read Privacy Policy" links,
 * inserted next to the terms/privacy acknowledgement checkbox on the
 * block-based checkout (see inject_checkout_terms_links_js() in
 * class-pvc-compliance.php). Explicit styling here since the inserted
 * element otherwise has none of its own and was inheriting an unrelated
 * strikethrough/no-spacing look from the surrounding checkout form.
 * ------------------------------------------------------------------------- */
.pvc-checkout-terms-links { margin: 6px 0 14px; font-size: 12px; line-height: 1.6; }
.pvc-checkout-terms-links a {
	color: var(--pvc-burgundy) !important;
	text-decoration: underline !important;
	font-weight: 600;
}
.pvc-checkout-terms-links a:hover, .pvc-checkout-terms-links a:focus-visible { color: var(--pvc-ink) !important; }

/* -------------------------------------------------------------------------
 * Shop page category filter bar (see inject_shop_category_filter_js() in
 * class-pvc-compliance.php) — replaces whatever native block/element was
 * previously showing only a single category rather than all of them.
 * ------------------------------------------------------------------------- */
.pvc-category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 28px; }
.pvc-category-pill {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--pvc-line);
	border-radius: 999px;
	font: 600 11px/1 var(--pvc-sans);
	letter-spacing: 0.03em;
	color: var(--pvc-ink);
	text-decoration: none;
	background: #fff;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.pvc-category-pill:hover, .pvc-category-pill:focus-visible { border-color: var(--pvc-rose); color: var(--pvc-rose); }
.pvc-category-pill--active { background: var(--pvc-rose); border-color: var(--pvc-rose); color: #fff; }

/* -------------------------------------------------------------------------
 * Checkout: "You're $X away from FREE shipping" progress bar (see
 * inject_free_shipping_progress_js() in class-pvc-compliance.php).
 * ------------------------------------------------------------------------- */
/* Negative margin-left is an estimate to pull this closer to "Order
   summary" — that heading's parent renders as a flex row (not the
   stacked layout originally assumed), so the actual gap comes from that
   parent's own flex spacing rather than anything this rule directly
   controls. If this doesn't look quite right once installed, the exact
   pixel value here is the one thing to adjust. */
.pvc-shipping-progress { margin: 12px 0 20px -16px; }
.pvc-shipping-progress-message { font: 600 13px/1.5 var(--pvc-sans); color: var(--pvc-ink); margin: 0 0 10px; }
.pvc-shipping-progress-message strong { color: hotpink; }
.pvc-shipping-progress-track {
	position: relative;
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: #e7e9ec;
	overflow: visible;
}
.pvc-shipping-progress-fill {
	position: relative;
	height: 100%;
	min-width: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, hotpink, #ff1493);
	transition: width 0.3s ease;
}
.pvc-shipping-progress-marker {
	position: absolute;
	top: 50%;
	right: -2px;
	transform: translate(50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #ff1493;
	box-shadow: 0 0 0 2px #ff1493, 0 2px 4px rgba(0, 0, 0, 0.15);
	animation: pvc-shipping-pulse 1.8s ease-in-out infinite;
}
/* Gentle, slow pulse to draw the eye without being distracting —
   subtle scale + a soft glow that breathes in and out. */
@keyframes pvc-shipping-pulse {
	0%, 100% { box-shadow: 0 0 0 2px #ff1493, 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 20, 147, 0.35); transform: translate(50%, -50%) scale(1); }
	50% { box-shadow: 0 0 0 2px #ff1493, 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(255, 20, 147, 0); transform: translate(50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
	.pvc-shipping-progress-marker { animation: none; }
}

/* Checkout add-on section heading (see inject_addon_heading_js() in
   class-pvc-compliance.php) — the actual checkboxes themselves are
   plain-text-label WooCommerce checkout fields (see
   register_block_checkout_fields()), styled via the general
   .wc-block-components-checkbox label rule already in this file. */
.pvc-addon-heading {
	font: 700 11px/1 var(--pvc-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0d8f8f;
	margin: 20px 0 10px;
}

/* -------------------------------------------------------------------------
 * Sale badge — here in the unconditionally-loaded base stylesheet rather
 * than pvc-product-blocks.css, since that file only enqueues on single-
 * product pages and this badge also needs to work on shop/category
 * archive pages (confirmed via screenshot: it was unstyled there,
 * because the stylesheet that had the rule never loaded on that page
 * type at all — not a CSS specificity issue, a "wrong file" issue).
 * ------------------------------------------------------------------------- */
.wp-block-woocommerce-product-sale-badge {
	background: hotpink !important;
	color: #fff !important;
	font: 700 10px/1 var(--pvc-sans) !important;
	border-radius: var(--pvc-radius) !important;
	border: 0 !important;
}
.onsale {
	background: hotpink !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * Order-received / confirmation page: the theme's/WooCommerce Blocks'
 * own default heading and text sizes here run noticeably larger than the
 * rest of this site's restrained typography. Scoped under a plugin-
 * controlled body class (see PVC_Compliance::add_order_received_body_class())
 * rather than guessing at this page's internal class names, which have
 * repeatedly turned out to be unreliable to target directly elsewhere in
 * this project.
 * ------------------------------------------------------------------------- */
body.pvc-order-received-page h1 { font: 400 clamp(22px, 3vw, 26px) var(--pvc-serif) !important; margin: 0 0 8px !important; }
body.pvc-order-received-page h2 { font: 400 clamp(15px, 2vw, 17px) var(--pvc-serif) !important; margin: 20px 0 8px !important; }
/* Universal, rather than a list of specific tags: the "Additional
   information" acknowledgement section (from WooCommerce's Additional
   Checkout Fields API) turned out not to use plain p/table/th/td at all,
   so the previous tag-specific rule missed it entirely. This catches
   every element's text size regardless of what tag WooCommerce/the
   theme happens to render it with; the h1/h2 rules above still win where
   they apply since !important rules break ties by selector specificity,
   and these are more specific than a bare *. */
.pvc-order-received-page * { font-size: 13px !important; line-height: 1.6 !important; }
/* "Additional information" acknowledgement summary: WooCommerce Blocks'
   own .wc-block-components-additional-fields-list dt elements default to
   font-weight:700 (confirmed via DevTools), making the acknowledgement
   text read as bold with no need for that emphasis here. */
.pvc-order-received-page dt { font-weight: 400 !important; }

/* Checkout page: the three acknowledgement checkboxes' text, confirmed
   directly via DevTools to be WooCommerce Blocks' own
   .wc-block-components-checkbox label class, currently sized via a CSS
   variable (var(--wp-preset--font-size--small, 14px)) — overridden here
   directly rather than trying to redefine that variable. This class is
   inherently checkout-specific WooCommerce Blocks markup, so it's safe
   to target without a page-scoping body class the way the order-received
   fix above needs one. */
.wc-block-components-checkbox label { font-size: 12px !important; line-height: 1.6 !important; font-weight: 700 !important; }

/* -------------------------------------------------------------------------
 * Checkout acknowledgement (appears on the checkout page only, but the
 * markup/classes are shared with the base stylesheet for simplicity)
 * ------------------------------------------------------------------------- */
.pvc-checkout-ack { margin: 18px 0 !important; padding: 14px; background: var(--pvc-blush); border: 1px solid rgba(111, 61, 74, 0.18); }
.pvc-checkout-ack label { display: flex !important; gap: 9px !important; align-items: flex-start !important; font-size: 12px !important; line-height: 1.6 !important; }