/* ==========================================================================
   Pink Vial Co. — Shared single-product components
   Enqueued on every WooCommerce single-product page regardless of whether
   the active theme uses the classic PHP template (pvc-product.css) or a
   blockified Single Product template (pvc-product-blocks.css). Anything
   here is markup/class-name driven, not layout-driven, so both templates
   can render identical-looking kickers, research notes, swatches, and COA
   cards even though the surrounding grid/columns structure differs.
   ========================================================================== */

.pvc-product-kicker,
.pvc-eyebrow-serif {
	font: 600 10px/1.2 var(--pvc-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pvc-rose);
	display: block;
}

.pvc-product-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pvc-product-proof span {
	padding: 7px 10px;
	border: 1px solid #d9c4c7;
	background: #fff8f7;
	color: var(--pvc-burgundy);
	font: 600 9px/1 var(--pvc-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pvc-product-research-note {
	padding: 14px 16px;
	background: var(--pvc-blush);
	border-left: 3px solid var(--pvc-rose);
	color: #5e5961;
	font: 12px/1.65 var(--pvc-sans);
	margin: 16px 0;
}
.pvc-product-research-note strong { color: var(--pvc-burgundy); }
.pvc-product-research-note a { color: var(--pvc-burgundy); text-decoration: underline; }
.pvc-product-research-note a:hover, .pvc-product-research-note a:focus-visible { color: var(--pvc-rose); }

/* -------------------------------------------------------------------------
 * Technical callout row (Research Grade link + CAS/formula/purity) —
 * replaces the marketing short-description paragraph in both templates.
 * ------------------------------------------------------------------------- */
.pvc-product-callouts { margin: 4px 0 18px; }
.pvc-callout-link {
	display: inline-block;
	font: 600 11px/1.3 var(--pvc-sans);
	letter-spacing: 0.04em;
	color: var(--pvc-burgundy);
	text-decoration: none;
	border-bottom: 1px solid var(--pvc-rose);
	margin-bottom: 10px;
}
.pvc-callout-link:hover, .pvc-callout-link:focus-visible { color: var(--pvc-ink); border-color: var(--pvc-ink); }
.pvc-callout-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font: 12px/1.4 var(--pvc-sans); color: #5e5961; }
.pvc-callout-specs strong { color: var(--pvc-burgundy); font-weight: 600; }
.pvc-callout-formula { font-family: 'JetBrains Mono', Consolas, monospace; }
.pvc-callout-purity { color: var(--pvc-burgundy); font-weight: 600; }

/* -------------------------------------------------------------------------
 * FAQ accordion — shared by both templates' Additional Information
 * content (.pvc-compliance-faq wraps it in both cases).
 * ------------------------------------------------------------------------- */
.pvc-compliance-faq details { border-bottom: 1px solid var(--pvc-line); padding: 16px 0; }
.pvc-compliance-faq summary { cursor: pointer; font: 600 13px/1.4 var(--pvc-sans); color: var(--pvc-ink); }
.pvc-compliance-faq summary:focus-visible { outline: 2px solid var(--pvc-ink); outline-offset: 2px; }
.pvc-compliance-faq p { margin: 10px 0 0; color: var(--pvc-body-text); font: 13px/1.7 var(--pvc-sans); }

/* -------------------------------------------------------------------------
 * Additional-information content blocks — scientific/technical
 * description, composition, Important Research Notice. Shared by the
 * classic template's Additional Information tab
 * (class-pvc-product-page.php::render_additional_information_tab) and the
 * block theme's equivalent section
 * (class-pvc-product-page-blocks.php::decorate_product_details).
 * ------------------------------------------------------------------------- */
.pvc-research-block { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--pvc-line); font: 13px/1.75 var(--pvc-sans); color: var(--pvc-body-text); }
.pvc-research-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pvc-research-block h3 { font: 600 12px/1.3 var(--pvc-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pvc-burgundy); margin: 0 0 10px; }

.pvc-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.pvc-important-notice { background: var(--pvc-blush); border-left: 3px solid var(--pvc-rose); padding: 18px 20px; }
.pvc-important-notice p { margin: 0 0 10px; }
.pvc-important-notice p:last-child { margin-bottom: 0; }

.pvc-purchase-note { margin-top: 14px; color: #7b7477; font: 10px/1.6 var(--pvc-sans); text-transform: uppercase; letter-spacing: 0.06em; }

/* -------------------------------------------------------------------------
 * Out-of-stock / on-backorder notice for the currently selected variation
 * — populated by pvc-strength-selector.js based on WooCommerce's own
 * variation stock data. Out-of-stock (backorders not allowed) hides the
 * Add to Cart button entirely; on-backorder keeps it purchasable but
 * sets expectations on timing.
 * ------------------------------------------------------------------------- */
.pvc-stock-notice { margin-top: 12px; padding: 12px 14px; font: 12px/1.6 var(--pvc-sans); }
.pvc-stock-notice--unavailable { background: #fbe9e7; border-left: 3px solid #b3453a; color: #7a2e22; }
.pvc-stock-notice--backorder { background: var(--pvc-blush); border-left: 3px solid var(--pvc-rose); color: #5e5961; }

/* Confirmed via DevTools: the quantity stepper's wrapping .quantity div
   carries its own inline style="display:flex" set by a React/Preact-
   managed component (WooCommerce's "Add to Cart with Options" block),
   which gets reset on every re-render regardless of any jQuery .hide()
   call — that's why three previous attempts at this all failed despite
   trying different selectors each time; the selector was never the
   actual problem. !important in a stylesheet rule always wins over a
   plain (non-!important) inline style no matter how many times the
   component resets its own style attribute, which is what makes this
   approach work where direct DOM manipulation couldn't. */
body.pvc-qty-hidden .quantity,
body.pvc-qty-hidden input[type="number"].qty { display: none !important; }

.pvc-product-assurance { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--pvc-line); background: #fff; margin-top: 16px; }
.pvc-product-assurance > div { padding: 14px 12px; border-right: 1px solid var(--pvc-line); }
.pvc-product-assurance > div:last-child { border-right: 0; }
.pvc-product-assurance strong { display: block; color: var(--pvc-burgundy); font: 600 9px/1.3 var(--pvc-sans); text-transform: uppercase; letter-spacing: 0.08em; }
.pvc-product-assurance span { display: block; margin-top: 5px; color: #77717a; font: 10px/1.45 var(--pvc-sans); }

.pvc-coa-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px; background: var(--pvc-blush-2); border: 1px solid #e2d2cd; }
.pvc-coa-card strong { display: block; color: var(--pvc-burgundy); font: 500 18px/1.1 var(--pvc-serif); }
.pvc-coa-card p { margin: 5px 0 0; color: #776f70; font: 10px/1.5 var(--pvc-sans); }
.pvc-coa-card a { white-space: nowrap; color: var(--pvc-burgundy); font: 600 9px/1 var(--pvc-sans); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; }
.pvc-coa-card a:hover { text-decoration: underline; }

.pvc-product-coa { margin-top: 12px; font-size: 11px; display: flex; gap: 14px; flex-wrap: wrap; }
.pvc-product-coa a { color: var(--pvc-burgundy); font-weight: 600; text-decoration: none; }
.pvc-product-coa a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
 * Strength swatches (and any other attribute added via the
 * pvc_swatch_attribute_labels filter). Identical markup either way, since
 * class-pvc-strength-selector.php hooks a WooCommerce PHP filter that fires
 * regardless of which single-product template is active.
 * ------------------------------------------------------------------------- */
.pvc-native-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.pvc-swatch-wrap { position: relative; margin: 4px 0 6px; }
/* WooCommerce's default variation-price paragraph carries its own top
   margin on top of .pvc-swatch-wrap's own bottom margin above — the two
   were stacking into a bigger gap than either alone. */
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-price p,
.single-product .wp-block-woocommerce-product-price { margin-top: 0 !important; }
.pvc-swatch-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Repositioned via JS (see repositionStrengthLabel() in
   pvc-strength-selector.js) to sit directly above the swatch buttons,
   styled as a small caption rather than the larger, bolder heading-like
   text it rendered as in its original position. */
.pvc-swatch-label { display: block; margin: 0 0 6px; font: 600 11px/1 var(--pvc-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pvc-body-text); }

/* WooCommerce's default "Clear" reset link is redundant with clicking an
   already-selected swatch to deselect it (see pvc-strength-selector.js),
   and its own margin/padding was part of what left the oversized gap
   before the price. Hidden rather than removed from the DOM, so it still
   exists for anything (including our own JS) that might reference it.
   The classic .reset_variations class doesn't exist in the block
   theme's own component, though — see hideClearVariationsLink() in the
   JS for that case, matched by text content instead. */
.single-product .reset_variations { display: none; }

.pvc-swatch {
	appearance: none;
	background: #fff;
	border: 1px solid var(--pvc-line);
	color: var(--pvc-ink);
	padding: 10px 16px;
	font: 600 12px/1 var(--pvc-sans);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
/* :not(:disabled) excluded a disabled swatch from hover styling, but not
   a SELECTED one — and :hover:not(:disabled) actually carries higher
   specificity than .pvc-swatch--selected alone (each pseudo-class adds
   specificity), so hovering a selected swatch silently overrode its
   white text back to rose — invisible against the same-colored rose
   background. Confirmed via screenshot: text disappeared specifically
   while hovering the selected button. Excluding the selected state here
   directly, rather than relying on specificity to sort itself out. */
.pvc-swatch:hover:not(:disabled):not(.pvc-swatch--selected) { border-color: var(--pvc-rose); color: var(--pvc-rose); }
.pvc-swatch:focus-visible { outline: 2px solid var(--pvc-rose); outline-offset: 2px; }
.pvc-swatch--selected,
.pvc-swatch[aria-pressed="true"] {
	background: var(--pvc-rose) !important;
	border-color: var(--pvc-rose) !important;
	color: #fff !important;
}
.pvc-swatch--disabled,
.pvc-swatch:disabled {
	opacity: 0.4;
	text-decoration: line-through;
	cursor: not-allowed;
	background: #fff;
	color: var(--pvc-ink);
}

@media (max-width: 640px) {
	.pvc-product-assurance { grid-template-columns: 1fr; }
	.pvc-product-assurance > div { border-right: 0; border-bottom: 1px solid var(--pvc-line); }
	.pvc-product-assurance > div:last-child { border-bottom: 0; }
	.pvc-coa-card { flex-direction: column; align-items: flex-start; }
}