/**
 * Barn2 Product Options styling fixes — CollabX 446.
 *
 * Two unrelated defects, both caused by someone else's CSS:
 *   1. option surcharge prices rendering at 30px on the single product page
 *      (Betheme's generic `.price` rule) — the original reason for this file;
 *   2. the cart / checkout "Order summary" laying the item's meta out in two
 *      columns, squeezing "Colour: … / Size: …" into a one-character-wide strip
 *      (Barn2's own block-cart grid, see the second block below).
 *
 * WHY THIS FILE EXISTS
 *
 * Betheme sizes *any* element with the generic `.price` class inside the product
 * summary at the headline product-price size:
 *
 *   betheme-old/css/woocommerce.css:753
 *   .woocommerce .product div.entry-summary .price { float:none; font-size:30px; line-height:30px }
 *
 * Barn2 reuses that same generic class on every option surcharge —
 * `<span class="price wpo-price-container">` — so each "+$9.90" rendered at 30px
 * beside a ~14px label, and the hard 30px line-height threw the baselines out and
 * pushed long option labels into awkward wraps.
 *
 * Barn2 does try to defend itself:
 *
 *   div.product span.price.wpo-price-container { font-size: var(--wpo-option-price-font-size) }
 *
 * but that is specificity (0,3,2) against Betheme's (0,4,1) — four classes beat
 * three regardless of load order, so the theme always won. The selectors below are
 * therefore deliberately more specific ((0,6,2)) rather than louder: no
 * `!important` is needed and none is used, so anything downstream can still
 * override this normally.
 *
 * We reuse Barn2's own `--wpo-option-price-font-size` (0.85em) rather than
 * inventing a size, so this stays in step with the plugin's design if it changes.
 *
 * NOTE: this is loaded independently of the Modern Skin toggle, because the bug
 * is a theme/plugin collision that exists either way.
 */

/* ---------------------------------------------- option surcharge prices ---- */

.woocommerce div.product div.entry-summary .wpo-field .price.wpo-price-container {
	font-size: var( --wpo-option-price-font-size, 0.85em );
	line-height: 1.5;
	font-weight: 600;
	margin-left: 0.45em;
	/* "+$32.50" must never break across two lines. */
	white-space: nowrap;
}

/* The currency and amount are separate spans; keep them on the container's
   metrics instead of inheriting Betheme's 30px line-height. */
.woocommerce div.product div.entry-summary .wpo-field .price.wpo-price-container .wpo-currency,
.woocommerce div.product div.entry-summary .wpo-field .price.wpo-price-container .wpo-price {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

/* ------------------------------------------------------- readability ------- */

/* With the price no longer 30px tall, the rows can breathe on their own metrics. */
.woocommerce div.product div.entry-summary .wpo-field .wpo-choice-item {
	line-height: 1.5;
}

.woocommerce div.product div.entry-summary .wpo-field .wpo-choice-label {
	line-height: 1.5;
}

/* Separate the option groups so "Embroidery logo size" / "DTF print size" /
   "Logo position" read as distinct questions rather than one run-on block. */
.woocommerce div.product div.entry-summary .wpo-field + .wpo-field {
	margin-top: 1.1em;
}

.woocommerce div.product div.entry-summary .wpo-field .wpo-option-name {
	margin-bottom: 0.5em;
}

/* ============================================================================
 * Cart / checkout "Order summary" — Barn2's block-cart grid vs Woo 10.9 markup
 * ============================================================================
 *
 * SYMPTOM: in the block Cart and Checkout order summary, an item carrying
 * decoration options rendered its two meta blocks SIDE BY SIDE — the Barn2
 * "Garment decoration: …" text in a normal column and the variation attributes
 * ("Colour: Navy / Size: 3XL") squeezed into an 8px-wide strip, one character
 * per line, running far below the rest of the row.
 *
 * CAUSE: woocommerce-product-options/assets/css/wpo-cart-checkout.css
 *
 *   div.wc-block-components-product-metadata:has([class^=wpo-])      { display:grid; gap:10px; grid-template-columns:auto 1fr }
 *   … :has([class^=wpo-]) > .wc-block-components-product-metadata__description { grid-column:1/-1 }
 *   … :has([class^=wpo-]) > ul     { grid-column:1/-1; grid-template-columns:subgrid }
 *   … :has([class^=wpo-]) > ul > li { grid-column:1/-1; grid-template-columns:subgrid }
 *
 * The two-track grid is only meant to align each option's name against its
 * value; every real child is supposed to span both tracks and re-use them via
 * `subgrid`. That works while the details list is a `<ul>` of `<li>`s — which is
 * what WooCommerce used to emit. **Woo 10.9 renders it as
 * `<div class="wc-block-components-product-details">` instead**, so the `> ul`
 * rules match nothing, the two sibling divs fall through as ordinary grid items,
 * and auto-placement drops one in each track: `auto` (171px) and `1fr` (8px).
 *
 * The `:has([class^=wpo-])` hook fires on any Barn2 markup anywhere in the meta,
 * so this hits every decorated line item, in the cart and the checkout both.
 *
 * FIX: when the container has no direct `<ul>` child, Barn2's subgrid scheme
 * cannot apply at all, so put WooCommerce's own layout back. Written as
 * `:not(:has(> ul))` rather than a blanket override so it **stops applying by
 * itself** the day either plugin restores the list markup — at which point
 * Barn2's alignment should be allowed to work as designed.
 *
 * Specificity: Barn2's is (0,2,1) — `div` + the class + the `[class^=wpo-]`
 * inside `:has()`. Adding `:not(:has(> ul))` takes ours to (0,2,2), so it wins
 * on specificity and needs no `!important`.
 */

div.wc-block-components-product-metadata:has( [class^="wpo-"] ):not( :has( > ul ) ) {
	display: flex;
	flex-direction: column;
	/* Woo's own gap for this container; Barn2 widens it to 10px for the grid. */
	gap: 4px;
}

/* Belt and braces for the reverse case: if Barn2 *does* emit a `<ul>` (file
   upload thumbnails) the rule above stands down, and the details divs would be
   squeezed again. Spanning every track keeps them full width either way, and is
   inert when the container is flex. */
div.wc-block-components-product-metadata:has( [class^="wpo-"] ) > .wc-block-components-product-details {
	grid-column: 1 / -1;
}