/* ==========================================================================
   Pink Vial Co. — Block-theme single-product stylesheet
   Only enqueued when the current single-product template is a blockified
   WooCommerce template (see class-pvc-assets.php + class-pvc-compat.php).
   Targets WooCommerce's native product blocks directly instead of the
   classic-template markup pvc-product.css targets. Shared compliance/
   brand components live in pvc-product-components.css, loaded alongside
   this file; the compliance content itself (kicker, callouts, research
   note, assurance strip, COA card) is injected next to the right blocks
   via render_block filters in class-pvc-product-page-blocks.php.

   Why this file exists instead of reusing pvc-product.css:
   the classic file's grid selectors (`.single-product div.product`,
   `.summary`, `.woocommerce-product-gallery`) target markup that simply
   doesn't exist on a blockified template — WooCommerce renders a
   `core/columns` block with a fixed-width gallery column and a flexible
   second column instead. Applying classic-template CSS here does nothing
   useful and risks matching the wrong elements if a theme happens to
   reuse a class name coincidentally, so the two are kept fully separate.
   ========================================================================== */

body.single-product { background: var(--pvc-ivory); color: var(--pvc-ink); }

/* -------------------------------------------------------------------------
 * The two-column row (gallery + summary). WooCommerce's default block
 * template gives the gallery column a fixed inline `flex-basis` (e.g.
 * 512px) and leaves the second column with no width, i.e. flex:1 — which
 * is already exactly the "shrinkable gallery, flexible summary" strategy
 * the classic-template grid achieves manually. We only need to add a
 * floor/ceiling to the summary column so it can't get too narrow or too
 * wide, matching the classic template's minmax(360px, 440px).
 * ------------------------------------------------------------------------- */
.single-product .wp-block-columns.alignwide {
	max-width: min(1240px, calc(100% - 48px));
	margin-left: auto;
	margin-right: auto;
	align-items: flex-start;
	gap: 64px;
}
.single-product .wp-block-columns.alignwide > .wp-block-column {
	min-width: 0; /* prevents this column from ever forcing the row wider than its container */
}
.single-product .wp-block-columns.alignwide > .wp-block-column:last-child {
	flex-basis: 0;
	flex-grow: 1;
	min-width: 320px;
	max-width: 460px;
	font-family: var(--pvc-sans);
}

/* -------------------------------------------------------------------------
 * Gallery. The Product Gallery block renders WooCommerce's standard
 * gallery markup inside its own block wrapper, so the inner selectors
 * match the classic template's gallery classes.
 * ------------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-image-gallery { width: 100%; }
.single-product .woocommerce-product-gallery__wrapper {
	margin: 0;
	background: var(--pvc-blush-2);
	padding: 32px;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-product .woocommerce-product-gallery img {
	max-height: 560px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: auto;
	filter: drop-shadow(0 20px 24px rgba(72, 44, 48, 0.13));
}
.single-product .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin: 14px 0 0 !important;
	overflow: auto;
	padding: 0;
	list-style: none;
}
.single-product .flex-control-thumbs li { width: 72px !important; float: none !important; flex: 0 0 72px; }
.single-product .flex-control-thumbs img { border: 1px solid var(--pvc-line); padding: 4px; background: #fff; cursor: pointer; }
.single-product .flex-control-thumbs .flex-active img,
.single-product .flex-control-thumbs img:hover { border-color: var(--pvc-burgundy); }

/* -------------------------------------------------------------------------
 * Title. Same restrained clamp() as the classic template.
 * ------------------------------------------------------------------------- */
.single-product .wp-block-columns.alignwide .wp-block-post-title {
	font: 400 clamp(28px, 2.6vw, 40px) / 1.08 var(--pvc-serif) !important;
	color: var(--pvc-burgundy) !important;
	margin: 0 0 8px !important;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

/* Reviews are disabled site-wide by this plugin (see PVC_Compliance); hide
   the native rating block for consistency rather than showing "No Reviews". */
.single-product .wp-block-woocommerce-product-rating { display: none; }

/* Short description (native post-excerpt) is suppressed via render_block
   filter in class-pvc-product-page-blocks.php — this CSS is a defensive
   fallback in case a theme update ever renders it before the filter runs. */
.single-product .wp-block-columns.alignwide .wp-block-post-excerpt { display: none; }

/* -------------------------------------------------------------------------
 * Price.
 * ------------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-price {
	font: 500 24px/1 var(--pvc-serif) !important;
	color: var(--pvc-burgundy) !important;
	margin: 0 0 4px !important;
}

/* -------------------------------------------------------------------------
 * Add to cart form (also where the Strength swatches render, via the
 * classic variation dropdown the block still wraps internally).
 * ------------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-add-to-cart-form {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--pvc-line);
}
/* Resets the theme's default paragraph/block vertical rhythm inside the
   form — native blocks tend to wrap each piece (attribute label, select,
   quantity, button) in its own paragraph/div, each carrying its own
   margin, which is what produced the oversized gap before the price. */
.single-product .wp-block-woocommerce-add-to-cart-form > * {
	margin-top: 0;
	margin-bottom: 10px;
}
.single-product .wp-block-woocommerce-add-to-cart-form > *:last-child { margin-bottom: 0; }
.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button {
	background: var(--pvc-rose) !important;
	color: #fff !important;
	border-radius: var(--pvc-radius) !important;
	min-height: 46px;
	padding: 0 24px !important;
	font: 600 10px/1 var(--pvc-sans) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 0 !important;
}
.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover:not(:disabled) { background: var(--pvc-burgundy) !important; }
.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:focus-visible { outline: 2px solid var(--pvc-ink); outline-offset: 2px; }
.single-product .wp-block-woocommerce-add-to-cart-form .quantity .qty { height: 46px; border: 1px solid var(--pvc-line); background: #fff; }

/* -------------------------------------------------------------------------
 * Product meta (SKU/category/tags).
 * ------------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-meta {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--pvc-line);
	font: 11px/1.6 var(--pvc-sans);
	color: #77717a;
}

/* -------------------------------------------------------------------------
 * Product Details (Description / Additional Information / Reviews
 * accordion) — brand the "minimal" style rather than leaving default grey.
 * ------------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-details.is-style-minimal {
	max-width: min(1240px, calc(100% - 48px));
	margin-left: auto;
	margin-right: auto;
}
.single-product .wp-block-woocommerce-product-details.is-style-minimal h3,
.single-product .wp-block-woocommerce-product-details.is-style-minimal button {
	font: 600 13px/1.4 var(--pvc-sans) !important;
	color: var(--pvc-burgundy) !important;
}

/* -------------------------------------------------------------------------
 * "Additional Information" section — injected right after the Product
 * Details block by class-pvc-product-page-blocks.php. Contains the
 * scientific/technical description, composition, Important Research
 * Notice, and FAQ (the research-use note, assurance strip, and COA card
 * render in the purchase column instead — see decorate_price()/
 * decorate_meta()). Its own full-width section rather than literally
 * inside the native accordion tab, since block themes don't expose a hook
 * for that — see the class docblock for why.
 * ------------------------------------------------------------------------- */
.pvc-compliance-section { background: var(--pvc-blush-2); padding: 56px 0; border-top: 1px solid var(--pvc-line); margin-top: 8px; }
/* Match the 1240px width used elsewhere on this page (gallery/buy-box row,
   related products) rather than the smaller default .pvc-wrap (1180px,
   tuned for the storefront/homepage) — plus alignwide on the <section>
   itself lets it escape the theme's narrower constrained reading width. */
.pvc-compliance-section .pvc-wrap { width: min(1240px, calc(100% - 48px)); }
.pvc-compliance-subheading { font: 600 12px/1.3 var(--pvc-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pvc-burgundy); margin: 28px 0 14px; }
.pvc-compliance-faq { margin-top: 4px; }
.pvc-compliance-section .pvc-research-block:first-child { padding-top: 4px; }

/* -------------------------------------------------------------------------
 * Related Products block — heading text is static content set directly in
 * the Site Editor template (see class-pvc-product-page-blocks.php docblock
 * for why this plugin doesn't try to rename it).
 * ------------------------------------------------------------------------- */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 981px) and (max-width: 1280px) {
	.single-product .wp-block-columns.alignwide { gap: 48px; }
	.single-product .wp-block-columns.alignwide > .wp-block-column:last-child { min-width: 300px; max-width: 400px; }
}

@media (max-width: 980px) {
	.single-product .wp-block-columns.alignwide { flex-direction: column; }
	.single-product .wp-block-columns.alignwide > .wp-block-column:last-child { max-width: 100%; min-width: 0; }
	.single-product .woocommerce-product-gallery__wrapper { min-height: 360px; padding: 24px; }
	.single-product .woocommerce-product-gallery img { max-height: 440px; }
}