/*!
 * Memorial Product Designer — product page design entry block
 * Plain CSS, no build chain. Every class name uses the mpd- prefix so nothing clashes with theme styles.
 *
 * ⭐ Principle: **this block inherits the theme, it does not dress itself.**
 *
 * The site's product page is WooCommerce's, styled by the active block theme. The block used to ship
 * its own card (grey panel, dashed quote box, blue primary button, 8px radius), which made one page
 * carry two visual systems next to the theme's own controls. The buttons now use the theme's own
 * classes (`wp-block-button__link` / `wp-element-button` in the template), the type comes from the
 * theme, and the colours come from the theme's preset variables — with a plain fallback in case a
 * different theme has none.
 *
 * ⭐ 0.1.31: this stylesheet no longer hides WooCommerce's option rows. Every option control on the
 * page is WooCommerce's own (size, quantity tier, colour, printing method, finish…), and the entry
 * block adds only the tier quote and the two actions that replace add-to-cart. The colour row is
 * *decorated* in place by assets/js/designer.js — the select stays in the DOM, keeps the value, and is
 * hidden from JavaScript only after the blocks exist.
 */

/* ------------------------------------------------------------------ */
/* What the entry block replaces                                       */
/* ------------------------------------------------------------------ */

/*
 * Add-to-cart is the one native control this plugin deliberately replaces: the real order is placed on
 * the design page, so WooCommerce's buy button, its free-number quantity input and the whole
 * `single_variation_wrap` around them have no job here.
 *
 * ⚠️ `single_variation_wrap` is hidden as a whole, not just the price inside it. Measured (product #563):
 * when WooCommerce finds a variation it switches that wrapper to `display: block`, and even with the
 * price hidden and the availability/description empty it contributes **19 px** — the entry block below
 * it jumped down by exactly that the moment the shopper picked a size, with no price appearing to
 * explain the move. The wrapper's visible parts are the price (the entry block quotes it instead), the
 * availability and description (empty on these made-to-order products) and the buy button (replaced).
 *
 * ⚠️ `!important` is required. Measured on WooCommerce 11.1.2: WooCommerce's own
 * add-to-cart-variation.js calls `$singleVariationWrap.show()` while initialising, and its jQuery ready
 * callback runs after this plugin's footer script, so a plain rule (or an inline style written from
 * JavaScript) comes back as `display: block`.
 *
 * The quantity input is hidden on purpose: the priced dimension here is the `pa_quantity` tier select,
 * which WooCommerce renders itself, and leaving a second, free-number quantity next to it would
 * multiply the tier ("500 sheets" × "3"). Everything else stays untouched.
 */
.mpd-designer-active form.cart .single_variation_wrap,
.mpd-designer-active form.cart .woocommerce-variation-add-to-cart,
.mpd-designer-active form.cart .single_add_to_cart_button,
.mpd-designer-active form.cart .quantity {
	display: none !important;
}

/* The form stays in the DOM (WooCommerce's variation script keeps working). */
.mpd-designer-active form.cart {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* The entry block: quote + the two actions                            */
/* ------------------------------------------------------------------ */

/*
 * No panel, no border, no background: the block is a continuation of the product summary, so it only
 * spaces itself and inherits the theme's typography and colours. There are no `--mpd-*` custom
 * properties any more — the rules below use the theme's `--wp--preset--*` tokens (or plain values).
 */
.mpd-entry {
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--40, 1.5rem) 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.mpd-entry *,
.mpd-entry *::before,
.mpd-entry *::after {
	box-sizing: inherit;
}

.mpd-entry__title {
	margin: 0 0 0.75rem;
	/* Inherit the theme's heading size/weight/line-height on purpose. */
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	color: inherit;
}

/*
 * The tier quote. Plain running text in the theme's own colours — WooCommerce already shows the
 * variation price above, so this is a summary line, not a panel of its own.
 *
 * ⚠️ Every value keeps a line of its own even while it is empty (`min-height`). Before this, an empty
 * Unit price / Subtotal left those two items one line tall while Lead time took two, so the row looked
 * scattered and moved the moment a price finally appeared. The Lead time sentence also gets a line to
 * itself (`flex-basis`) because it is a sentence, not a number.
 */
.mpd-entry__quote {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.35rem 1.75rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.mpd-entry__quote-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.mpd-entry__quote-item:last-child {
	/* The lead time reads as a sentence under the two numbers. */
	flex: 1 0 100%;
}

.mpd-entry__quote-key {
	color: inherit;
	opacity: 0.7;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.2;
}

.mpd-entry__quote-val {
	min-height: 1.35em;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 600;
	line-height: 1.35;
}

.mpd-entry__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

/*
 * The look of the buttons comes from the theme (`wp-block-button__link` / `wp-element-button` in the
 * template). These are only the two things block button markup cannot express on its own: a link that
 * is not inside `.wp-block-button` would still be styled, and the disabled state.
 */
.mpd-entry__btn {
	text-decoration: none;
	cursor: pointer;
}

.mpd-entry__btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/*
 * The two entry points are peers, but "Design online" leads ("Upload your design" is the alternative).
 * The theme's outline button style (`is-style-outline`, which its own patterns use) does not reach a
 * `<button>` element in this install — measured: both actions rendered as filled dark buttons — so the
 * secondary restates it with the theme's own colour token. This styles the plugin's own element, not
 * the theme's.
 */
.mpd-entry__actions .is-style-outline .mpd-entry__btn {
	background: transparent;
	color: var(--wp--preset--color--contrast, #111);
	border: 2px solid currentColor;
}

.mpd-entry__hint {
	margin: 0;
	color: inherit;
	opacity: 0.75;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.6;
}

.mpd-entry__hint--error {
	color: var(--wp--preset--color--accent-6, #b91c1c);
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Price: WooCommerce's placeholder becomes the real calculator range  */
/* ------------------------------------------------------------------ */

.mpd-price-range {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Colour blocks                                                       */
/* ------------------------------------------------------------------ */

/*
 * Drawn either inside WooCommerce's own colour row (when the shop made the colour a variation
 * dimension, so WooCommerce renders a select) or in the entry block (when it did not, so WooCommerce
 * renders no control at all — see decorateColours() in assets/js/designer.js). One control either way.
 *
 * The name sits under the block, which keeps every label readable whatever the colour; the grid and
 * the ring inherit the theme's colours so the blocks sit in the page instead of on top of it.
 */
.mpd-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem 0.85rem;
	margin: 0.15rem 0;
}

.mpd-swatch-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.mpd-swatch {
	display: block;
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	background-color: #e5e7eb;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base, #fff);
}

.mpd-swatch-wrap.is-active .mpd-swatch {
	box-shadow:
		inset 0 0 0 2px var(--wp--preset--color--base, #fff),
		0 0 0 2px var(--wp--preset--color--contrast, #111);
}

.mpd-swatch-wrap.is-active .mpd-swatch::after {
	content: '\2713';
	display: block;
	color: var(--wp--preset--color--base, #fff);
	font-size: 0.8rem;
	line-height: 2.1rem;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mpd-swatch__name {
	max-width: 5.5rem;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	line-height: 1.15;
	text-align: center;
}

/* The shade picker for a `picker` colour, shown only while that colour is selected. */
.mpd-swatch__shade {
	width: 2.1rem;
	height: 1.35rem;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background: none;
}

/*
 * A dimension with no swatch to show — size, quantity, printing method: the dropdown WooCommerce
 * rendered is presented as these flat blocks instead (see tileAttributeSelects() in assets/js/designer.js).
 * Same blocks, text instead of a colour dot, so every dimension reads the same way.
 */
.mpd-swatches--text {
	gap: 0.4rem;
}

.mpd-swatch-wrap--text {
	flex-direction: row;
	padding: 0.35rem 0.8rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	line-height: 1.2;
}

.mpd-swatch-wrap--text .mpd-swatch__name {
	max-width: none;
}

.mpd-swatch-wrap--text.is-active {
	border-color: var(--wp--preset--color--contrast, #111);
	background-color: var(--wp--preset--color--contrast, #111);
	color: var(--wp--preset--color--base, #fff);
}

/*
 * The dropdown behind a tiled dimension.
 *
 * ⚠️ `!important`, and not the `hidden` attribute: measured on this theme, `hidden` lost to
 * WooCommerce's own `display: block` on form controls, so the dropdown stayed on screen above the
 * blocks — two controls for one dimension. The select stays in the DOM with its value, so
 * WooCommerce's variation script, the price lookup and a visitor without JavaScript are unaffected.
 */
.mpd-designer-active form.cart select.mpd-select-tiled {
	display: none !important;
}

/*
 * WooCommerce's "Clear" link ("reset variations").
 *
 * It only exists to undo a dropdown choice, and the shop's note is right: with every dimension drawn as
 * blocks and the first option chosen up front there is nothing to clear — a shopper changes an answer by
 * clicking another block. Hidden rather than removed, so nothing WooCommerce owns is rewritten.
 */
.mpd-designer-active form.cart .reset_variations {
	display: none !important;
}

/* Caption above the blocks when they are the entry block's own control. */
.mpd-entry__colours {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
}

.mpd-entry__field-label {
	color: inherit;
	opacity: 0.7;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.2;
}

/*
 * While an option is still un-chosen the two actions are held back (the script adds this class and
 * blocks the click). WooCommerce gates add-to-cart the same way; without it a shopper could walk into
 * the designer without a printing method and only meet "…is a required field" at the very end.
 */
.mpd-entry__actions .is-incomplete {
	opacity: 0.5;
	cursor: not-allowed;
}