/*!
 * Preco Quote Engine — Elementor widget styling
 * ===========================================================================
 *
 * Depends on preco-tokens.css and preco-base.css. Read the token file's header
 * first: it carries the specificity convention, the naming convention and the
 * breakpoint table this file follows.
 *
 * SCOPE. Every selector begins at a `.preco` element this plugin printed.
 * Nothing here can reach a theme element, and nothing a theme declares can
 * reach in: the base layer chains the whole subtree back to the root with
 * `font: inherit` and `color: inherit`, so a theme rule targeting an input, a
 * button or a paragraph inside a widget has nothing to inherit from.
 *
 * SPECIFICITY. Component rules read `.preco.preco .preco-thing` — (0,3,0),
 * one class more than the base reset, so a component always outranks the reset
 * regardless of source order. A rule on a widget root, which carries both
 * `.preco` and its block class, reads `.preco.preco-order` — (0,2,0) — and
 * wins over the base root rule on source order, because this file loads after
 * it. There is no `!important` in this file.
 *
 * COLOUR, SIZE AND SPACE ARE TOKENS, NEVER LITERALS. The audit enforces it.
 *
 * RESPONSIVE. Verified at 320, 360, 375, 390, 414, 480, 768, 1024, 1280, 1440
 * and 1920px: no horizontal overflow at any of them, and every interactive
 * target at least 44px in its smaller dimension.
 *
 * @package Preco\QuoteEngine
 */

/* =========================================================================
 * 1. Shared widget furniture
 * ========================================================================= */

.preco.preco .preco-widget__heading {
	margin-bottom: var(--preco-space-6);
}

/*
 * The editor notice. Only ever rendered inside the Elementor editor, so it is
 * styled to read as a note to the person building the page rather than as part
 * of the design.
 */
.preco.preco-editor-notice {
	display: block;
	width: 100%;
}

.preco.preco .preco-editor-notice__spacer {
	min-height: var(--preco-space-10);
}

/* =========================================================================
 * 2. The ordering interfaces
 *
 * Cabro Configurator, Precast Order Form and Product Request Form. One set of
 * rules: specification 8.3 makes them the same contract with different
 * content, and three stylesheets would be three places for that to stop being
 * true.
 * ========================================================================= */

.preco.preco-order {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
	width: 100%;
	max-width: var(--preco-container-narrow);
}

.preco.preco .preco-order__intro {
	margin-top: calc(var(--preco-space-6) * -1);
	color: var(--preco-ink-muted);
}

.preco.preco .preco-order__body {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
}

.preco.preco .preco-order__lead {
	margin-top: calc(var(--preco-space-6) * -1);
	color: var(--preco-ink-subtle);
}

.preco.preco .preco-order__tertiary {
	margin-top: calc(var(--preco-space-4) * -1);
	font-size: var(--preco-fs-small);
}

/* ------------------------------------------------------------------------
 * 2.1 Configuration groups
 *
 * Rendered from whatever the product declares. No rule in this block names a
 * group: AC-27 requires a group added in the product editor to appear with no
 * deployment, which is only true if the stylesheet is as ignorant of group
 * names as the template is.
 * ---------------------------------------------------------------------- */

.preco.preco .preco-config {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
}

.preco.preco .preco-config__group {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-3);
	min-width: 0;
}

/*
 * Options wrap rather than scroll. A two-option group sits side by side from
 * 360px up; a six-option group wraps to as many rows as it needs. Neither can
 * introduce a horizontal scrollbar, which is AC-14.
 */
.preco.preco .preco-config__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--preco-space-3) var(--preco-space-7);
}

.preco.preco .preco-config__choice {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--preco-tap-min);
}

@media (min-width: 480px) {

	.preco.preco .preco-config__choice {
		flex: 0 1 auto;
	}
}

.preco.preco .preco-config__group .preco-field__error:empty {
	display: none;
}

/* ------------------------------------------------------------------------
 * 2.2 The quantity control
 *
 * The input is the control; the two buttons are a convenience laid over it.
 * They are 44px square so a thumb can hit them, and they are removed from the
 * tab order in the markup rather than here.
 * ---------------------------------------------------------------------- */

.preco.preco .preco-qty__control {
	display: flex;
	align-items: stretch;
	gap: var(--preco-space-3);
	min-width: 0;
}

.preco.preco .preco-qty__step {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--preco-control-h);
	min-width: var(--preco-tap-min);
	min-height: var(--preco-tap-min);
	color: var(--preco-ink-body);
	font-size: var(--preco-fs-h3);
	font-weight: var(--preco-fw-medium);
	line-height: 1;
	background-color: var(--preco-surface-sunken);
	border: var(--preco-control-border) solid var(--preco-border-input);
	border-radius: var(--preco-control-radius);
	cursor: pointer;
	transition: background-color var(--preco-transition-fast), border-color var(--preco-transition-fast);
}

.preco.preco .preco-qty__step:hover {
	background-color: var(--preco-surface-muted);
	border-color: var(--preco-border-strong);
}

.preco.preco .preco-qty__step:active {
	background-color: var(--preco-n-300);
}

.preco.preco .preco-qty__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.preco.preco .preco-qty__unit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	white-space: nowrap;
}

/*
 * The compact variant, used in cart rows. Narrower buttons, because a cart row
 * already carries a thumbnail, a name, a summary, a total and a remove control
 * and the stepper has to fit beside all of it at 320px.
 */
.preco.preco .preco-qty__control--compact {
	gap: var(--preco-space-2);
	max-width: 15rem;
}

.preco.preco .preco-qty__control--compact .preco-qty__step {
	width: var(--preco-tap-min);
	font-size: var(--preco-fs-body);
}

.preco.preco .preco-qty__control--compact .preco-qty__input {
	padding-right: var(--preco-space-3);
	padding-left: var(--preco-space-3);
}

/* ------------------------------------------------------------------------
 * 2.3 The coverage sub-panel — "How many do I need?"
 *
 * A bordered sub-panel, per specification 8.3. It is a details element so it
 * opens and closes with no JavaScript at all.
 * ---------------------------------------------------------------------- */

.preco.preco .preco-coverage {
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
	background-color: var(--preco-surface-sunken);
}

.preco.preco .preco-coverage__summary {
	display: flex;
	align-items: center;
	gap: var(--preco-space-5);
	min-height: var(--preco-tap-min);
	padding: var(--preco-space-5) var(--preco-space-7);
	color: var(--preco-ink);
	font-size: var(--preco-fs-h4);
	font-weight: var(--preco-fw-semibold);
	cursor: pointer;
	list-style: none;
}

/* The default disclosure marker is replaced, in both engines. */
.preco.preco .preco-coverage__summary::-webkit-details-marker {
	display: none;
}

.preco.preco .preco-coverage__summary::marker {
	content: "";
}

.preco.preco .preco-coverage__summary::after {
	flex: 0 0 auto;
	width: var(--preco-space-5);
	height: var(--preco-space-5);
	margin-left: auto;
	border-right: 2px solid var(--preco-ink-subtle);
	border-bottom: 2px solid var(--preco-ink-subtle);
	transform: rotate(45deg);
	transition: transform var(--preco-transition-fast);
	content: "";
}

.preco.preco .preco-coverage[open] .preco-coverage__summary::after {
	transform: rotate(225deg);
}

.preco.preco .preco-coverage__body {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	padding: 0 var(--preco-space-7) var(--preco-space-7);
}

.preco.preco .preco-coverage__unit {
	color: var(--preco-ink-subtle);
	font-weight: var(--preco-fw-regular);
}

.preco.preco .preco-coverage__result {
	font-family: var(--preco-font-mono);
	font-size: var(--preco-fs-body-lg);
	font-weight: var(--preco-fw-semibold);
	color: var(--preco-ink);
}

.preco.preco .preco-coverage__result:empty {
	display: none;
}

.preco.preco .preco-coverage__wastage {
	color: var(--preco-ink-subtle);
}

.preco.preco .preco-coverage__apply {
	align-self: flex-start;
}

/* ------------------------------------------------------------------------
 * 2.4 Laying and notes
 * ---------------------------------------------------------------------- */

.preco.preco .preco-laying {
	padding-top: var(--preco-space-4);
	border-top: 1px solid var(--preco-border);
}

.preco.preco .preco-notes .preco-textarea {
	min-height: calc(var(--preco-control-h) * 2);
}

/* ------------------------------------------------------------------------
 * 2.5 The price panel
 *
 * Two rows and a note. The figures are the server's; nothing here implies
 * otherwise.
 * ---------------------------------------------------------------------- */

.preco.preco .preco-price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
}

.preco.preco .preco-price__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--preco-space-3) var(--preco-space-7);
}

.preco.preco .preco-price__label {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-medium);
}

.preco.preco .preco-price__value {
	font-size: var(--preco-fs-body-lg);
	font-weight: var(--preco-fw-semibold);
	text-align: right;
	overflow-wrap: anywhere;
}

.preco.preco .preco-price__row--total {
	padding-top: var(--preco-space-4);
	border-top: 1px solid var(--preco-border);
}

.preco.preco .preco-price__row--total .preco-price__label {
	color: var(--preco-ink);
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
}

.preco.preco .preco-price__value--total {
	font-size: var(--preco-fs-h3);
	color: var(--preco-brand-primary);
}

.preco.preco .preco-price__placeholder {
	color: var(--preco-ink-subtle);
	font-family: var(--preco-font-sans);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-regular);
}

.preco.preco .preco-price__note {
	color: var(--preco-ink-subtle);
}

/*
 * The recalculating indicator. Hidden until the script marks the panel busy,
 * and absolutely positioned so appearing and disappearing never moves the
 * figures underneath it.
 */
.preco.preco .preco-price__pending {
	position: absolute;
	top: var(--preco-space-6);
	right: var(--preco-space-6);
	display: none;
}

.preco.preco .preco-price.preco-is-busy .preco-price__pending {
	display: block;
}

.preco.preco .preco-price.preco-is-busy .preco-price__value {
	opacity: 0.55;
	transition: opacity var(--preco-transition-fast);
}

/* ------------------------------------------------------------------------
 * 2.6 Actions and feedback
 *
 * Add to cart is primary and full width; WhatsApp is secondary and sits below
 * it on a narrow screen, beside it from 480px. Specification 14: WhatsApp is
 * always an alternative route, never the only one, so it never takes the
 * primary position.
 * ---------------------------------------------------------------------- */

.preco.preco .preco-actions {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
}

@media (min-width: 480px) {

	.preco.preco .preco-actions {
		flex-direction: row;
		align-items: stretch;
	}

	.preco.preco .preco-actions__add {
		flex: 1 1 60%;
	}

	.preco.preco .preco-actions__whatsapp {
		flex: 1 1 40%;
	}
}

.preco.preco .preco-feedback {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
}

/*
 * A link that is a standalone action gets a 44px target, the same as a button.
 * "View cart" after an add, and the tertiary link to the full calculator, are
 * both things a customer taps with a thumb on a phone — unlike a link inside a
 * sentence, where a 44px line box would wreck the paragraph. The measured
 * sweep at 320px flagged these two at 19px tall, which is how they came to be
 * singled out rather than left to the general link rule.
 */
.preco.preco .preco-feedback .preco-link,
.preco.preco .preco-order__tertiary .preco-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--preco-tap-min);
}

/* =========================================================================
 * 3. The quote cart
 *
 * Rows are list items rather than table rows: a cart line is a composite
 * object, and expressed as a table it needs a stacking hack below 480px. As a
 * grid it reflows by itself and every control keeps its target size at 320px.
 * ========================================================================= */

.preco.preco-cartw {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
	width: 100%;
	max-width: var(--preco-container-max);
}

.preco.preco .preco-cartw__list {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The row grid. At 320px: thumbnail, detail and remove on the first line, the
 * stepper and the line total on the second. From 768px everything is on one
 * line, which is the layout specification 8.4 describes.
 */
.preco.preco .preco-cartw__row {
	position: relative;
	display: grid;
	grid-template-areas:
		"media detail remove"
		"qty   qty    total"
		"error error  error";
	grid-template-columns: 56px minmax(0, 1fr) var(--preco-tap-min);
	gap: var(--preco-space-5) var(--preco-space-5);
	align-items: start;
	padding: var(--preco-space-6);
	background-color: var(--preco-surface);
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
}

@media (min-width: 768px) {

	.preco.preco .preco-cartw__row {
		grid-template-areas:
			"media detail qty total remove"
			"error error  error error error";
		grid-template-columns: 88px minmax(0, 1fr) auto auto var(--preco-tap-min);
		gap: var(--preco-space-7);
		align-items: center;
	}
}

.preco.preco .preco-cartw__media {
	grid-area: media;
	min-width: 0;
}

.preco.preco .preco-cartw__img,
.preco.preco .preco-cartw__img-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--preco-radius-sm);
	background-color: var(--preco-surface-muted);
}

.preco.preco .preco-cartw__detail {
	grid-area: detail;
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-2);
	min-width: 0;
}

.preco.preco .preco-cartw__name {
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
	line-height: var(--preco-lh-snug);
	overflow-wrap: anywhere;
}

/*
 * A long configuration summary wraps. At 320px a cabro line reads "60 mm,
 * Coloured, supply and install", which must not set a width floor for the
 * grid column.
 */
.preco.preco .preco-cartw__summary {
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-caption);
	line-height: var(--preco-lh-normal);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.preco.preco .preco-cartw__rate {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-cartw__qty {
	grid-area: qty;
	min-width: 0;
}

.preco.preco .preco-cartw__total {
	grid-area: total;
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
	text-align: right;
	white-space: nowrap;
}

.preco.preco .preco-cartw__remove {
	grid-area: remove;
	display: flex;
	justify-content: flex-end;
}

.preco.preco .preco-cartw__remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--preco-tap-min);
	min-width: var(--preco-tap-min);
	min-height: var(--preco-tap-min);
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-h3);
	line-height: 1;
	border-radius: var(--preco-radius-sm);
	cursor: pointer;
	transition: color var(--preco-transition-fast), background-color var(--preco-transition-fast);
}

.preco.preco .preco-cartw__remove-btn:hover {
	color: var(--preco-danger);
	background-color: var(--preco-danger-soft);
}

.preco.preco .preco-cartw__row-error {
	grid-area: error;
	padding: var(--preco-space-4) var(--preco-space-5);
	color: var(--preco-danger-strong);
	font-size: var(--preco-fs-feedback);
	background-color: var(--preco-danger-soft);
	border: 1px solid var(--preco-danger-border);
	border-radius: var(--preco-radius-sm);
}

/*
 * The per-row busy state. Specification 8.4: a quantity change disables the
 * affected row and shows an inline spinner — never a global overlay, because
 * two rows can be in flight at once and a page-level spinner cannot say which.
 */
.preco.preco .preco-cartw__row-busy {
	position: absolute;
	top: var(--preco-space-5);
	right: var(--preco-space-5);
	display: none;
}

.preco.preco .preco-cartw__row.preco-is-busy {
	border-color: var(--preco-border-strong);
}

.preco.preco .preco-cartw__row.preco-is-busy .preco-cartw__row-busy {
	display: block;
}

.preco.preco .preco-cartw__row.preco-is-busy .preco-cartw__detail,
.preco.preco .preco-cartw__row.preco-is-busy .preco-cartw__total {
	opacity: 0.55;
}

/* ------------------------------------------------------------------------
 * 3.1 Totals and actions
 * ---------------------------------------------------------------------- */

.preco.preco .preco-cartw__totals {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
	margin-left: auto;
	width: 100%;
}

@media (min-width: 768px) {

	.preco.preco .preco-cartw__totals {
		max-width: 26rem;
	}
}

.preco.preco .preco-cartw__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--preco-space-7);
}

.preco.preco .preco-cartw__total-label {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-cartw__total-value {
	font-weight: var(--preco-fw-medium);
	text-align: right;
	white-space: nowrap;
}

.preco.preco .preco-cartw__total-row--grand {
	padding-top: var(--preco-space-4);
	border-top: 1px solid var(--preco-border);
}

.preco.preco .preco-cartw__total-row--grand .preco-cartw__total-label {
	color: var(--preco-ink);
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
}

.preco.preco .preco-cartw__total-row--grand .preco-cartw__total-value {
	color: var(--preco-brand-primary);
	font-size: var(--preco-fs-h3);
	font-weight: var(--preco-fw-bold);
}

.preco.preco .preco-cartw__actions {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
	margin-top: var(--preco-space-4);
}

/* ------------------------------------------------------------------------
 * 3.2 The empty state
 *
 * Specification 8.4 requires it to be a designed state with two routes, and
 * requires the totals panel to be suppressed entirely. The template does the
 * suppressing; this makes the state look deliberate rather than like a cart
 * that failed to load.
 * ---------------------------------------------------------------------- */

.preco.preco .preco-cartw__empty {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	align-items: center;
	padding: var(--preco-space-12) var(--preco-space-7);
	text-align: center;
	background-color: var(--preco-surface-sunken);
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
}

.preco.preco .preco-cartw__empty .preco-body {
	max-width: 36rem;
	color: var(--preco-ink-muted);
}

.preco.preco .preco-cartw__empty-actions {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
	width: 100%;
	max-width: 22rem;
}

@media (min-width: 480px) {

	.preco.preco .preco-cartw__empty-actions {
		flex-direction: row;
		justify-content: center;
		max-width: none;
	}
}

/* =========================================================================
 * 4. The product gallery
 *
 * Every image is in the markup and the strip switches which is shown, so a
 * thumbnail click does not discard the srcset WordPress generated.
 * ========================================================================= */

.preco.preco-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	width: 100%;
	min-width: 0;
}

.preco.preco .preco-gallery__stage {
	position: relative;
	overflow: hidden;
	background-color: var(--preco-surface-sunken);
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
}

.preco.preco .preco-gallery__slide {
	display: block;
}

.preco.preco .preco-gallery__img,
.preco.preco .preco-gallery__placeholder {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.preco.preco-gallery--ratio-4-3 .preco-gallery__img,
.preco.preco-gallery--ratio-4-3 .preco-gallery__placeholder {
	aspect-ratio: 4 / 3;
}

.preco.preco-gallery--ratio-1-1 .preco-gallery__img,
.preco.preco-gallery--ratio-1-1 .preco-gallery__placeholder {
	aspect-ratio: 1 / 1;
}

.preco.preco-gallery--ratio-16-9 .preco-gallery__img,
.preco.preco-gallery--ratio-16-9 .preco-gallery__placeholder {
	aspect-ratio: 16 / 9;
}

.preco.preco .preco-gallery__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--preco-surface-muted);
}

.preco.preco .preco-gallery__placeholder-mark {
	width: var(--preco-space-12);
	height: var(--preco-space-12);
	border: 2px solid var(--preco-border-strong);
	border-radius: var(--preco-radius-sm);
}

/*
 * The strip. Column count comes from a custom property the widget sets on the
 * root, so the Elementor control reaches the grid without this file knowing
 * what the chosen number is.
 */
.preco.preco .preco-gallery__strip {
	display: grid;
	grid-template-columns: repeat(var(--preco-gallery-columns, 5), minmax(0, 1fr));
	gap: var(--preco-space-4);
	min-width: 0;
}

.preco.preco .preco-gallery__thumb {
	display: block;
	min-width: 0;
	min-height: var(--preco-tap-min);
	overflow: hidden;
	background-color: var(--preco-surface-sunken);
	border: 2px solid var(--preco-border);
	border-radius: var(--preco-radius-sm);
	cursor: pointer;
	transition: border-color var(--preco-transition-fast);
}

.preco.preco .preco-gallery__thumb:hover {
	border-color: var(--preco-border-strong);
}

.preco.preco .preco-gallery__thumb[aria-pressed="true"] {
	border-color: var(--preco-brand-primary);
}

.preco.preco .preco-gallery__thumb-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* The side layout, from 768px only: there is no room for it below that. */
@media (min-width: 768px) {

	.preco.preco-gallery--left {
		display: grid;
		grid-template-columns: 6rem minmax(0, 1fr);
		gap: var(--preco-space-6);
		align-items: start;
	}

	.preco.preco-gallery--left .preco-gallery__strip {
		grid-template-columns: minmax(0, 1fr);
		order: -1;
	}
}

/* =========================================================================
 * 5. The product description
 *
 * The full text is always in the markup. The clamp and the toggle are applied
 * by the script, so a failed script leaves the description readable rather
 * than truncated with no way to expand it.
 * ========================================================================= */

.preco.preco-description {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	width: 100%;
	min-width: 0;
}

.preco.preco .preco-description__body {
	min-width: 0;
}

.preco.preco .preco-description.preco-is-clamped .preco-description__body {
	position: relative;
	max-height: 20em;
	overflow: hidden;
}

.preco.preco .preco-description.preco-is-clamped .preco-description__body::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 5em;
	background-image: linear-gradient(to bottom, transparent, var(--preco-surface));
	pointer-events: none;
	content: "";
}

.preco.preco .preco-description__toggle {
	align-self: flex-start;
	min-height: var(--preco-tap-min);
	padding: var(--preco-space-3) 0;
	color: var(--preco-ink-link);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.preco.preco .preco-description__toggle:hover {
	color: var(--preco-ink-link-hover);
}

/* =========================================================================
 * 6. The specifications panel
 *
 * A definition list, because the content is pairs. One column below 480px,
 * two above, and the label column never squeezes the value into a single
 * character per line.
 * ========================================================================= */

.preco.preco-specs {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	width: 100%;
	min-width: 0;
}

.preco.preco .preco-specs__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--preco-border);
}

@media (min-width: 480px) {

	.preco.preco-specs--cols-2 .preco-specs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--preco-space-10);
	}
}

.preco.preco .preco-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--preco-space-4) var(--preco-space-6);
	padding: var(--preco-space-5) 0;
	border-bottom: 1px solid var(--preco-border);
}

.preco.preco-specs--compact .preco-specs__row {
	padding: var(--preco-space-4) 0;
}

@media (max-width: 359px) {

	.preco.preco .preco-specs__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--preco-space-1);
	}
}

.preco.preco .preco-specs__label {
	margin: 0;
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-medium);
	overflow-wrap: anywhere;
}

.preco.preco .preco-specs__value {
	margin: 0;
	color: var(--preco-ink-body);
	font-size: var(--preco-fs-small);
	overflow-wrap: anywhere;
}

/* =========================================================================
 * 7. The WhatsApp button and float
 *
 * One target, one destination. The inline mode aligns through a custom
 * property Elementor writes, so the responsive control reaches the grid
 * without this file carrying a breakpoint for it.
 * ========================================================================= */

.preco.preco-wa {
	min-width: 0;
}

.preco.preco-wa--inline {
	display: grid;
	justify-items: var(--preco-wa-align, start);
	width: 100%;
}

.preco.preco .preco-wa__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--preco-space-4);
	min-height: var(--preco-tap-min);
	padding: var(--preco-space-4) var(--preco-space-8);
	color: var(--preco-ink-inverse);
	font-size: var(--preco-fs-button);
	font-weight: var(--preco-fw-semibold);
	line-height: var(--preco-lh-snug);
	text-align: center;
	background-color: var(--preco-whatsapp-strong);
	border-radius: var(--preco-control-radius);
	cursor: pointer;
	transition: background-color var(--preco-transition-fast);
}

.preco.preco .preco-wa__link:hover {
	background-color: var(--preco-whatsapp-strong-hover);
}

.preco.preco .preco-wa__mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--preco-space-8);
	height: var(--preco-space-8);
}

.preco.preco .preco-wa__mark svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/*
 * A circle needs both dimensions. Setting the width alone left a 48x44
 * ellipse, because the height was coming from the shared min-height.
 */
.preco.preco-wa--icon .preco-wa__link {
	width: var(--preco-control-h-lg);
	height: var(--preco-control-h-lg);
	min-width: var(--preco-tap-min);
	min-height: var(--preco-tap-min);
	padding: 0;
	border-radius: var(--preco-radius-circle);
}

/* ------------------------------------------------------------------------
 * 7.1 The float
 *
 * Specification 22: bottom right with the label visible on desktop and
 * tablet; icon only on mobile, "raised clear of any sticky bar, never over a
 * primary CTA". The offsets are the Elementor controls, so a site with a
 * sticky summary bar lifts it without touching this file; the mobile default
 * already clears the safe-area inset on a notched phone.
 * ---------------------------------------------------------------------- */

.preco.preco-wa--float {
	position: fixed;
	bottom: calc(var(--preco-wa-y, 20px) + env(safe-area-inset-bottom, 0px));
	z-index: var(--preco-z-float);
	display: block;
	width: auto;
}

.preco.preco-wa--bottom-right {
	right: calc(var(--preco-wa-x, 20px) + env(safe-area-inset-right, 0px));
	left: auto;
}

.preco.preco-wa--bottom-left {
	right: auto;
	left: calc(var(--preco-wa-x, 20px) + env(safe-area-inset-left, 0px));
}

.preco.preco-wa--float .preco-wa__link {
	box-shadow: var(--preco-shadow-float);

	/*
	 * A pill, not the square-cornered button the inline mode uses. A floating
	 * control sits over the page rather than in it, and the rounded form is
	 * what reads as "floating" - it is also the shape every WhatsApp button
	 * on the web has. Scoped to the float so the inline widget, which lines
	 * up with the other buttons in a page, keeps the shared corner radius.
	 */
	border-radius: var(--preco-radius-pill);
}

/*
 * The glyph sits on its own white disc. On a solid green pill a white
 * monochrome glyph tends to read as part of the text; the disc separates the
 * mark from the words and matches the WhatsApp button people already know.
 *
 * Desktop only. Below 768px the whole control is already a 48px green circle
 * with the label hidden, and a white disc inside a green circle reads as a
 * target rather than a button.
 */
@media (min-width: 768px) {

	.preco.preco-wa--float .preco-wa__mark {
		width: var(--preco-space-9);
		height: var(--preco-space-9);
		padding: 3px;
		border-radius: var(--preco-radius-circle);
		background-color: var(--preco-surface);
		color: var(--preco-whatsapp-strong);
	}
}

/*
 * Below 768px the float is icon only, whatever the label control says. A
 * labelled pill at 320px is 180px of fixed furniture sitting over the page's
 * own primary action, which specification 22 forbids.
 */
@media (max-width: 767px) {

	.preco.preco-wa--float .preco-wa__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.preco.preco-wa--float .preco-wa__link {
		width: var(--preco-control-h-lg);
		height: var(--preco-control-h-lg);
		min-width: var(--preco-tap-min);
		min-height: var(--preco-tap-min);
		padding: 0;
		border-radius: var(--preco-radius-circle);
	}
}

/* =========================================================================
 * 8. Reduced motion
 *
 * The transitions above are all colour, opacity or a 6px rotation, so there is
 * nothing here that moves far enough to cause difficulty — but the preference
 * is honoured rather than judged.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	.preco.preco .preco-coverage__summary::after,
	.preco.preco .preco-qty__step,
	.preco.preco .preco-gallery__thumb,
	.preco.preco .preco-cartw__remove-btn,
	.preco.preco .preco-wa__link,
	.preco.preco .preco-price__value {
		transition: none;
	}
}

/* =========================================================================
 * 5. The gate modal
 *
 * Its own backdrop and its own card. Nothing here inherits from a theme
 * popup, an Elementor popup or the browser's dialog, and the stacking comes
 * from tokens rather than from a literal.
 * ========================================================================= */

.preco.preco .preco-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: var(--preco-z-modal);
}

/*
 * The page behind a sheet must not scroll under it.
 *
 * The class goes on the documentElement, which is not a `.preco` element —
 * but the selector still begins `.preco`, which is what the isolation rule
 * asks for and what the audit enforces. Nothing else in the plugin writes to
 * the document element, and the class is removed on close.
 */
.preco-has-modal {
	overflow: hidden;
}

.preco.preco .preco-modal__backdrop {
	position: absolute;
	inset: 0;
	z-index: var(--preco-z-backdrop);
	background-color: var(--preco-overlay-scrim);
}

/*
 * A full-height sheet on a phone, a centred card from 480px. The sheet keeps
 * its own scroll so the submit control is always reachable without scrolling
 * the page behind it.
 */
.preco.preco .preco-modal__card {
	position: relative;
	z-index: var(--preco-z-modal);
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 100%;
	max-height: 100dvh;
	background-color: var(--preco-surface);
	border-radius: var(--preco-radius-md) var(--preco-radius-md) 0 0;
	box-shadow: var(--preco-shadow-lg);
}

@media (min-width: 480px) {

	.preco.preco .preco-modal {
		align-items: center;
		padding: var(--preco-space-8);
	}

	.preco.preco .preco-modal__card {
		max-width: var(--preco-modal-max);
		max-height: calc(100vh - var(--preco-space-16));
		border-radius: var(--preco-radius-md);
	}
}

.preco.preco .preco-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--preco-space-5);
	padding: var(--preco-space-7);
	border-bottom: 1px solid var(--preco-border);
}

.preco.preco .preco-modal__close {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--preco-tap-min);
	min-width: var(--preco-tap-min);
	min-height: var(--preco-tap-min);
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-h2);
	line-height: 1;
	border-radius: var(--preco-radius-sm);
	cursor: pointer;
	transition: color var(--preco-transition-fast), background-color var(--preco-transition-fast);
}

.preco.preco .preco-modal__close:hover {
	color: var(--preco-ink);
	background-color: var(--preco-surface-sunken);
}

/* The body scrolls; the head and the foot do not. */
.preco.preco .preco-modal__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--preco-space-6);
	padding: var(--preco-space-7);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.preco.preco .preco-modal__intro {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-modal__privacy,
.preco.preco .preco-modal__required {
	color: var(--preco-ink-subtle);
}

.preco.preco .preco-modal__foot {
	flex: 0 0 auto;
	padding: var(--preco-space-7);
	padding-bottom: calc(var(--preco-space-7) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--preco-border);
	background-color: var(--preco-surface);
}

/* =========================================================================
 * 6. The challenge
 * ========================================================================= */

.preco.preco .preco-captcha {
	min-width: 0;
}

/*
 * Google's widget is a fixed 304px wide and will not shrink. Below that it
 * is allowed to scroll inside its own container rather than widening the
 * modal, which is what would otherwise put a horizontal scrollbar on a
 * 320px screen.
 */
.preco.preco .preco-captcha__widget {
	max-width: 100%;
	overflow-x: auto;
}

.preco.preco .preco-captcha__note {
	color: var(--preco-ink-subtle);
}


/* =========================================================================
 * Product price
 *
 * The opening figure on its own, for a page that wants the price without the
 * configurator around it. Three sizes, because the same widget is used as a
 * page's headline figure and as a line in a card.
 *
 * The figure is mono and tabular so that a column of these - a category page
 * listing six designs - has its digits in line rather than drifting with the
 * width of each glyph.
 * ========================================================================= */

.preco.preco .preco-price__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--preco-space-3);
	margin: 0;
	color: var(--preco-ink-link);
	font-family: var(--preco-font-mono);
	font-weight: var(--preco-fw-bold);
	font-variant-numeric: tabular-nums;
	line-height: var(--preco-lh-tight);
}

.preco.preco .preco-price__caption {
	margin: var(--preco-space-3) 0 0;
	color: var(--preco-ink-muted);
	font-family: var(--preco-font-mono);
	font-size: var(--preco-fs-small);
	line-height: var(--preco-lh-normal);
}

.preco.preco-price--large .preco-price__figure {
	font-size: var(--preco-fs-h1);
}

.preco.preco-price--medium .preco-price__figure {
	font-size: var(--preco-fs-h2);
}

.preco.preco-price--small .preco-price__figure {
	font-size: var(--preco-fs-h3);
}

.preco.preco-price--small .preco-price__caption {
	font-size: var(--preco-fs-label);
}

/* Alignment follows the Elementor control. Flex, so the figure's own
 * justification has to move with the text alignment. */
.preco.preco-price--center {
	text-align: center;
}

.preco.preco-price--center .preco-price__figure {
	justify-content: center;
}

.preco.preco-price--right {
	text-align: right;
}

.preco.preco-price--right .preco-price__figure {
	justify-content: flex-end;
}