/**
 * Minimal styling that INHERITS the theme (§3.8, and CC-BRIEF-WOO-SHIP-01 §5.2).
 *
 * ★ NO FONT FAMILY IS SET ANYWHERE IN THIS FILE, and that is deliberate -- but the
 * absence of a rule turned out not to be enough. Alan's visual check on 12 Oct found
 * the cart caveat rendering in a system font rather than the theme's.
 *
 * The reason is that "inherit by default" is only true if something up the chain sets
 * the family on an ancestor that actually encloses the element. The caveat is injected
 * as a row INSIDE WooCommerce's cart-totals table, and the plugin's own elements sit
 * inside Elementor widgets whose typography rules are scoped to Elementor's own
 * classes. Anything the theme styles by selector rather than by inheritance simply does
 * not reach markup it has never heard of, and the browser default takes over.
 *
 * So every element this plugin outputs now asks for inheritance EXPLICITLY --
 * font-family, style and colour -- which is not the same thing as choosing a font.
 * (Weight is NOT forced globally, because several of these elements deliberately set
 * their own.) Whatever the theme puts on the surrounding text is what these elements get, and
 * if the theme changes they change with it.
 *
 * Sizes are relative (em) for the same reason: they scale with whatever they land in
 * rather than fixing a pixel value that looks wrong at another breakpoint.
 *
 * Every class is prefixed lcbp- and the prefix is safelisted against WP Rocket's
 * Remove Unused CSS in the plugin bootstrap, so these rules survive optimisation.
 *
 * @package lc-branded-pricing
 */

/* The one rule that matters: everything this plugin renders inherits its typography
   and colour from whatever encloses it, rather than falling back to the UA default. */
.lcbp-unit-wrap,
.lcbp-unit,
.lcbp-each,
.lcbp-total,
.lcbp-amount,
.lcbp-tooling-note,
.lcbp-options,
.lcbp-group,
.lcbp-group-label,
.lcbp-select,
.lcbp-logo,
.lcbp-logo-label,
.lcbp-logo-help,
.lcbp-logo-notice,
.lcbp-guide,
.lcbp-guide-heading,
.lcbp-guide-table,
.lcbp-guide-table th,
.lcbp-guide-table td,
.lcbp-guide-caption,
.lcbp-min-notice,
.lcbp-logo-to-follow,
.lcbp-note,
.lcbp-notes,
.lcbp-notes-row,
.lcbp-notes-row th,
.lcbp-notes-row td {
	font-family: inherit;
	font-style: inherit;
	color: inherit;
}

/* A <select> and a file <input> are form controls, which browsers style with their own
   font regardless of the page. These are the only elements that need the size and
   weight forced as well. */
.lcbp-select,
.lcbp-logo-input {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	color: inherit;
	max-width: 100%;
}

.lcbp-each {
	font-size: 0.7em;
	font-weight: 400;
	white-space: nowrap;
}

/* ★ THE TOTAL TOUCHED THE ADD TO CART BUTTON (Alan, 16 Oct 2026).
   It is printed straight after the button, inside the same form, and the live theme lays
   the quantity and the button out as a row, so the paragraph's own small top margin was
   swallowed and the two touched. clear and a full gap put it on its own line below. */
.lcbp-total {
	clear: both;
	display: block;
	/* Padding, not margin: the button floats, and a cleared element's top margin is
	   absorbed by the clearance -- measured, a 1em margin left a 6px gap. */
	margin: 0 0 0.75em;
	padding-top: var( --lcbp-gap, 1em );
	font-weight: 600;
}

.lcbp-tooling-note,
.lcbp-guide-caption,
.lcbp-logo-help,
.lcbp-logo-to-follow {
	display: block;
	font-size: 0.85em;
	line-height: 1.4;
	opacity: 0.8;
}

.lcbp-options .lcbp-group {
	margin: 0 0 0.75em;
}

/* The heading to its control: Box size, each option and "Upload your logo (optional)".
   Alan's 1.1.1 check (16 Oct) found 0.25em cramped; 0.6 of the shared gap, so it follows the
   theme's spacing and the three headings match. */
.lcbp-group-label,
.lcbp-logo-label {
	display: block;
	margin-bottom: calc( var( --lcbp-gap, 1em ) * 0.6 );
	font-weight: 600;
}

/* ★ ONE FIGURE FOR THE THREE VERTICAL GAPS IN THE PRODUCT BLOCK.
   Alan's walk-through asked for the gap above "Upload your logo" and the gap below the
   logo helper text to match the one he approved between Add to cart and the price
   guide. They are all the same custom property now, so they cannot drift apart and one
   change moves all three. It is an em, so it scales with whatever type size the theme
   sets rather than fixing a pixel figure. The figure is only a var() fallback and is
   not declared anywhere, so a theme or an Elementor kit that sets --lcbp-gap (to a
   single length) on any ancestor replaces all three gaps with its own spacing token
   without touching this file. */
.lcbp-logo {
	margin: var( --lcbp-gap, 1em ) 0;
}

/* More room above "Upload your logo (optional)" than the shared gap (Alan, 16 Oct 2026):
   it is a new step after the options, and at the shared figure it read as part of the
   last selector. Half as much again, still in em so it follows the theme's type. */
.lcbp-logo {
	margin-top: calc( var( --lcbp-gap, 1em ) * 1.5 );
}

/* The last selector's own bottom margin would otherwise decide the gap above the logo
   field (it was 0.75em, visibly tighter than the gap below the button). Zeroed, so the
   margin above the logo field is the only thing setting it. */
.lcbp-options .lcbp-group:last-of-type,
.lcbp-options .lcbp-group.lcbp-group-last {
	margin-bottom: 0;
}

/* 1.2: a group the chosen box size does not offer. The theme or a rule above may set
   display on .lcbp-group, which would beat the hidden attribute's own display:none. */
.lcbp-options .lcbp-group[hidden] {
	display: none !important;
}

.lcbp-logo-help {
	margin-top: 0.35em;
}

.lcbp-logo-notice {
	display: block;
	margin-top: 0.35em;
	font-size: 0.85em;
	font-weight: 600;
}

/* The price guide is information, not a selector (§6A): no pointer, no hover
   affordance, nothing that reads as clickable. */
.lcbp-guide {
	margin: var( --lcbp-gap, 1em ) 0;
}

.lcbp-guide-heading {
	margin: 0 0 0.35em;
	font-weight: 600;
}

.lcbp-guide-table {
	width: auto;
	border-collapse: collapse;
	cursor: default;
	font-size: inherit;
}

.lcbp-guide-table th,
.lcbp-guide-table td {
	padding: 0.3em 1.2em 0.3em 0;
	text-align: left;
	font-weight: 400;
	border: 0;
	/* currentColor so the hairline follows the theme's text colour and stays visible
	   on a dark one. An earlier revision followed this with
	   `border-bottom-color: rgba(0,0,0,0.08)`, which simply won -- the colour was a
	   hard-coded black and the currentColor declaration did nothing at all. The
	   softening is done with opacity on the cell instead, which currentColor allows. */
	border-bottom: 1px solid currentColor;
	opacity: 0.85;
}

/* §6A: no hover affordance. Many themes highlight a table row on hover, which would
   make the price guide read as a set of choices rather than information. This rule was
   dropped in a rewrite while the comment promising it stayed -- restored. */
.lcbp-guide-table tr:hover,
.lcbp-guide-table tr:hover th,
.lcbp-guide-table tr:hover td {
	background: none;
	cursor: default;
}

.lcbp-guide-caption {
	margin-top: 0.4em;
}

/* The tooling-once sentence ("Ordering more than one branded item? …") sat tight under
   the quantity and button row (Alan, 16 Oct 2026). */
p.lcbp-tooling-note {
	margin-top: var( --lcbp-gap, 1em );
}

/* ★ THE COLLECTION NOTICE IS RED, AND MEANT TO BE (architect's ruling, 16 Oct 2026).
   This is the one deliberate exception to "inherit the theme's colour": the shop shows no
   freight figure on a branded order, and this sentence is the only thing saying so. A
   fixed red with a tinted panel: about 6.6:1 on white. On a DARK theme it falls to about
   2.9:1, below the 4.5:1 guideline -- the live theme is light, but revisit this if that
   changes. */
.lcbp-collection-notice {
	display: block;
	clear: both;
	margin: var( --lcbp-gap, 1em ) 0;
	padding: 0.6em 0.8em;
	border-left: 4px solid #b3261e;
	background: rgba( 179, 38, 30, 0.08 );
	color: #b3261e;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
}

.lcbp-min-notice {
	margin: 0.25em 0;
	font-size: 0.9em;
	font-weight: 600;
}

/* ★ ONE NOTES BLOCK, NOT A FREIGHT ROW AND A CAVEAT ROW.
   Alan's walk-through consolidated the two into a single "Notes" row in the cart, the
   checkout, the order page, the confirmation email and the admin order screen. It is
   still deliberately the loudest thing in the totals block: a branded order must not be
   dispatched before freight is agreed, and a $0.00 delivery line is otherwise read as
   free delivery. Colour comes from currentColor and the size from the theme, so it
   cannot clash with the theme -- the rule above it and the heading's weight do the
   work instead. */
.lcbp-notes-row th,
.lcbp-notes-row td {
	border-top: 2px solid currentColor;
	padding-top: 0.6em;
}

.lcbp-notes-row th {
	font-weight: 700;
	white-space: normal;
	vertical-align: top;
}

.lcbp-note {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.4;
}

.lcbp-note + .lcbp-note {
	margin-top: 0.5em;
}

/* The same block on the customer's own order page and in the order confirmation,
   where there is no totals table to hang a row on. */
.lcbp-notes {
	border: 2px solid currentColor;
	padding: 0.6em 0.8em;
	margin: 0 0 1em;
}

.lcbp-notes strong {
	display: block;
	margin-bottom: 0.4em;
}

/* ★ THE THEME CAPITALISES EVERY WORD IN CART LABELS.
   Alan's walk-through found "Tooling Charged Once Across Your Branded Items" in the
   cart: the theme applies text-transform to its labels, and a sentence is not a label.
   text-transform inherits, so saying "none" on each element the plugin outputs is
   enough to cover everything inside it.
   !important is here on purpose, and only on this property. The theme's rules are
   scoped to its own cart selectors, which are more specific than anything this file can
   write without copying them -- and copying them would break the next time the theme
   changes. Nothing else in this file uses it.
   SIDE EFFECT, STATED: the fee and item-data selectors below are WooCommerce's own
   markup, not the plugin's -- WooCommerce renders the saving's name and the chosen
   options itself, so there is no lcbp- class to hang this on. Any OTHER plugin's fee
   row or item data in the cart, the mini-cart or the checkout will also read as typed.
   On this store the only fee is this plugin's. The order-details page is deliberately
   left alone: its totals rows carry no per-row class, so the only way to reach the fee
   there would be to re-style "Subtotal" and "Total" as well. */
[class*="lcbp-"],
.cart_totals .fee th,
.cart_totals .fee td,
.woocommerce-checkout-review-order-table .fee th,
.woocommerce-checkout-review-order-table .fee td,
.woocommerce-cart-form dl.variation dt,
.woocommerce-cart-form dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-mini-cart dl.variation dt,
.woocommerce-mini-cart dl.variation dd,
.widget_shopping_cart dl.variation dt,
.widget_shopping_cart dl.variation dd,
.wc-block-components-product-details__name,
.wc-block-components-product-details__value,
.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value {
	text-transform: none !important;
}

/* ★ THE ADD TO CART ROW ON A FLEX FORM (1.1.2, Alan's 1.1.1 check, 16 Oct 2026).
   The live store's Elementor Pro Add to Cart widget lays the simple-product form out as a
   flex row (form.cart{display:flex;flex-wrap:nowrap}), so the total printed after the
   button sat beside it, touching -- and a block-layout margin or clear does nothing there.
   On a branded product only (the form holds .lcbp-total), the form is taken in hand:
   - it wraps, with the shared gap between columns AND between rows;
   - the quantity, the button and the total share a row, the total at least one gap from
     the button;
   - everything else the plugin (or another plugin) prints in the form takes a full row,
     stacked as before;
   - on a narrow screen the total no longer fits beside the button and wraps onto its own
     line, with the same gap above it.
   The vertical gaps are the row gap now, so the plugin's own block margins are zeroed
   inside such a form, with the logo keeping its extra half gap above. A form without the
   plugin's total (every ordinary product) is not touched. */
form.cart:has( > .lcbp-total ) {
	display: flex;
	/* !important: Elementor's own rule is far more specific (about 0,6,2) and says nowrap. */
	flex-wrap: wrap !important;
	align-items: center;
	column-gap: var( --lcbp-gap, 1em );
	row-gap: var( --lcbp-gap, 1em );
}

form.cart:has( > .lcbp-total ) > :not( .quantity ):not( button ):not( .lcbp-total ) {
	flex: 0 0 100%;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

form.cart:has( > .lcbp-total ) > .lcbp-total {
	flex: 0 1 auto;
	clear: none;
	margin: 0;
	padding-top: 0;
}

/* Doubled classes: the full-row rule above is (0,4,2) and would zero this otherwise. */
form.cart.cart:has( > .lcbp-total ) > .lcbp-logo.lcbp-logo {
	margin-top: calc( var( --lcbp-gap, 1em ) * 0.5 );
}

/* 1.5.2: a branded line's options on one line in the cart and checkout. The row's own label
   ("Choices:") is not shown: the labels inside it say what each part is. Doubled classes:
   WooCommerce's own `.woocommerce td.product-name dl.variation dt` (inline-block) is (0,3,3). */
.woocommerce dl.variation dt.variation-Choices.variation-Choices {
	display: none;
}

.woocommerce dl.variation dd.variation-Choices.variation-Choices,
.woocommerce dl.variation dd.variation-Choices.variation-Choices p,
.lcbp-choices {
	margin: 0;
	text-transform: none;
	font-family: inherit;
}