/*
 * Webber Crimpex enquiry UI. Mobile-first.
 * Colour sources, in order (A4): 1. the custom theme's tokens (--wct-*) when that theme is active;
 * 2. the Elementor Kit globals (--e-global-color-*) when Elementor is active (Hello Elementor / Elementor Pro);
 * 3. neutral values. The plugin defines no brand colour of its own. Text inherits the page colour.
 * Sites can override any --wce-* variable in their own CSS.
 */
.wce-configurator,
.wce-enquiry,
.wce-thanks,
.wce-cart-link,
.wce-menu-enquiry {
	--wce-ink: var(--wct-ink, currentColor);
	--wce-muted: var(--wct-grey-600, #4b5563);
	--wce-border: var(--wct-grey-200, #d5dce4);
	--wce-surface: var(--wct-surface, #f4f6f9);
	--wce-accent: var(--wct-accent, var(--e-global-color-accent, var(--e-global-color-primary, #1f2937)));
	--wce-accent-dark: var(--wct-accent-dark, var(--wce-accent));
	--wce-on-accent: #fff;
	--wce-error: #b42318;
	--wce-success: #116b3b;
	--wce-radius: var(--wct-radius, 6px);
	--wce-focus-color: var(--wct-focus, #1f2937);
	--wce-focus: 0 0 0 2px #fff, 0 0 0 4px var(--wce-focus-color);
}
.wce-configurator,
.wce-enquiry,
.wce-thanks { color: var(--wce-ink); }

.wce-configurator {
	margin-top: 2rem;
	padding: 1.25rem;
	border: 1px solid var(--wce-border);
	border-radius: var(--wce-radius);
	background: var(--wce-surface);
}
.wce-configurator__title { margin: 0 0 0.25rem; font-size: 1.375rem; }
.wce-configurator__intro { margin: 0 0 1rem; color: var(--wce-muted); }

.wce-form { display: grid; gap: 1rem; }
.wce-form[hidden] { display: none; }
.wce-field { display: grid; gap: 0.375rem; min-width: 0; align-content: start; }
.wce-field[hidden] { display: none; }
.wce-field label { font-weight: 600; }
.wce-req { color: var(--wce-error); }
.wce-hint { margin: 0; font-size: 0.875rem; color: var(--wce-muted); }

.wce-form input[type="text"],
.wce-form input[type="email"],
.wce-form input[type="tel"],
.wce-form select,
.wce-form textarea,
.wce-line__qty input {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	border: 1px solid #8a97a6;
	border-radius: var(--wce-radius);
	background: #fff;
	color: var(--wce-ink);
	font: inherit;
	box-sizing: border-box;
}
.wce-form textarea { min-height: 88px; resize: vertical; }
.wce-form input:focus,
.wce-form select:focus,
.wce-form textarea:focus,
.wce-line__qty input:focus { outline: none; border-color: var(--wce-accent); box-shadow: var(--wce-focus); }
.wce-form [aria-invalid="true"],
.wce-line__qty [aria-invalid="true"] { border-color: var(--wce-error); border-width: 2px; }

.wce-error { margin: 0; color: var(--wce-error); font-size: 0.875rem; font-weight: 600; }
.wce-error:empty { display: none; }

.wce-qty { display: flex; gap: 0.5rem; align-items: center; }
.wce-qty input { flex: 1 1 auto; min-width: 0; }
.wce-qty select { flex: 0 0 auto; width: auto; min-width: 8rem; }
.wce-qty__unit { flex: 0 0 auto; font-weight: 700; white-space: nowrap; color: var(--wce-muted); }

.wce-alert {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--wce-error);
	background: #fef3f2;
	color: var(--wce-error);
	font-weight: 600;
}
.wce-alert[hidden] { display: none; }
.wce-alert:focus { outline: 2px solid var(--wce-error); outline-offset: 2px; }

.wce-status { min-height: 1.5em; color: var(--wce-success); font-weight: 600; }
.wce-status__link { font-weight: 600; } /* Site link colour. */

.wce-notice { padding: 0.75rem 1rem; border-radius: var(--wce-radius); background: #fffaeb; border: 1px solid #f5d38a; }

/*
 * Buttons. `button.` selectors (A4) outrank theme resets such as Hello Elementor's `[type=submit]`/`button` rules,
 * which otherwise turn plugin buttons into the theme's outline buttons, while an Elementor Kit "Buttons" setting
 * (`.elementor-kit-N button`, loaded later, same weight) still applies on top.
 */
.wce-button,
button.wce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--wce-radius);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
a.wce-button.wce-button,
a.wce-button.wce-button:hover,
a.wce-button.wce-button:focus { text-decoration: none; } /* Beats theme/Kit link rules such as `.elementor-kit-N a`. */
.wce-button--primary,
button.wce-button--primary,
a.wce-button.wce-button--primary { background-color: var(--wce-accent); color: var(--wce-on-accent); }
.wce-button--primary:hover,
button.wce-button--primary:hover,
button.wce-button--primary:focus,
a.wce-button.wce-button--primary:hover {
	/* --wce-accent-hover / --wce-hover-overlay come from ButtonContrast (Elementor Kit or override): the hover colour is
	   moved away from the text colour so contrast never drops. Without them: darken by 12 % (white text). */
	background-color: var(--wce-accent-hover, var(--wce-accent-dark));
	background-image: var(--wce-hover-overlay, linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)));
	color: var(--wce-on-accent);
}
.wce-button--large,
button.wce-button--large { width: 100%; padding-block: 0.875rem; font-size: 1.0625rem; }
.wce-button--whatsapp,
a.wce-button.wce-button--whatsapp { background: #1a7f45; color: #fff; } /* WhatsApp hand-off: functional colour, not site branding. */
.wce-button--whatsapp:hover,
a.wce-button.wce-button--whatsapp:hover { background: #12613a; color: #fff; }
.wce-button:focus-visible,
button.wce-button:focus-visible { outline: none; box-shadow: var(--wce-focus); }
.wce-button[disabled],
button.wce-button[disabled] { opacity: 0.6; cursor: progress; }

/* Cart */
.wce-enquiry { display: grid; gap: 2rem; }
.wce-cart__title { margin: 0 0 0.75rem; font-size: 1.5rem; }
.wce-cart__count { font-size: 1rem; font-weight: 400; color: var(--wce-muted); }
.wce-cart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.wce-line {
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
	border: 1px solid var(--wce-border);
	border-radius: var(--wce-radius);
	background: #fff;
}
.wce-line--error { border-color: var(--wce-error); }
.wce-line__head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.wce-line__name { font-weight: 700; font-size: 1.0625rem; color: var(--wce-ink); }
.wce-line__cat { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wce-muted); }
.wce-line__spec { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; }
.wce-line__spec div { display: flex; gap: 0.375rem; }
.wce-line__spec dt { color: var(--wce-muted); }
.wce-line__spec dt::after { content: ":"; }
.wce-line__spec dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.wce-line__qty { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wce-line__qty label { font-weight: 600; flex: 0 0 100%; }
.wce-line__qty input { flex: 1 1 8rem; max-width: 14rem; }
.wce-line__unit { font-weight: 700; color: var(--wce-muted); }
.wce-line__remove,
button.wce-line__remove {
	justify-self: start;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wce-border);
	border-radius: var(--wce-radius);
	background: #fff;
	color: var(--wce-error);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.wce-line__remove:hover,
button.wce-line__remove:hover,
button.wce-line__remove:focus { background: #fef3f2; color: var(--wce-error); }
.wce-line__remove:focus-visible { outline: none; box-shadow: var(--wce-focus); }
.wce-cart__more { margin: 1rem 0 0; }
.wce-cart__more a { font-weight: 600; } /* Site link colour. */

.wce-empty {
	padding: 2rem 1.25rem;
	border: 2px dashed var(--wce-border);
	border-radius: var(--wce-radius);
	text-align: center;
}
.wce-empty[hidden] { display: none; }
.wce-empty__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }

.wce-contact { padding: 1.25rem; border-radius: var(--wce-radius); background: var(--wce-surface); }
.wce-contact[hidden] { display: none; }
.wce-contact h2 { margin: 0 0 0.25rem; }
.wce-grid { display: grid; gap: 1rem; }
.wce-field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.625rem; }
.wce-field--check input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--wce-accent); }
.wce-field--check label { font-weight: 400; }
.wce-field--check .wce-error { grid-column: 1 / -1; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.wce-captcha--mock { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem; border: 1px dashed var(--wce-border, #cbd5e1); border-radius: 6px; }
.wce-captcha--mock input { width: 22px; height: 22px; margin: 0; accent-color: var(--wce-accent); }
.wce-captcha--mock .wce-hint { flex-basis: 100%; margin: 0; }
.wce-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Thank-you */
.wce-thanks__head { padding: 1.25rem; border-left: 4px solid var(--wce-success); background: #ecfdf3; border-radius: var(--wce-radius); }
.wce-thanks__head h2 { margin: 0 0 0.5rem; }
.wce-thanks__ref { font-size: 1.125rem; }
.wce-thanks__ref strong { display: block; font-size: 1.75rem; letter-spacing: 0.02em; }
.wce-whatsapp { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--wce-border); border-radius: var(--wce-radius); }
.wce-whatsapp h3 { margin-top: 0; }
.wce-thanks__items { padding-left: 1.25rem; }

/* Header cart link (any theme can output wce_cart_link()). */
.wce-cart-link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; min-width: 44px; justify-content: center; text-decoration: none; font-weight: 600; color: inherit; }
.wce-cart-link__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--wce-accent);
	color: var(--wce-on-accent);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}
.wce-cart-link__count[hidden] { display: none; }
/* A5: badge inside a menu item added to a WordPress menu (the item itself keeps the menu's own styles). */
.wce-menu-enquiry__count { margin-inline-start: 0.375em; vertical-align: middle; }
.wce-cart-link svg { width: 22px; height: 22px; }

@media (min-width: 700px) {
	.wce-configurator { padding: 1.75rem; }
	.wce-grid { grid-template-columns: 1fr 1fr; }
	.wce-field--wide { grid-column: 1 / -1; }
	.wce-button--large,
	button.wce-button--large { width: auto; }
	.wce-line { grid-template-columns: 1fr auto; align-items: start; column-gap: 1.5rem; }
	.wce-line__head,
	.wce-line__spec,
	.wce-line__qty,
	.wce-line .wce-error { grid-column: 1; }
	.wce-line__remove,
	button.wce-line__remove { grid-column: 2; grid-row: 1; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
	.wce-configurator *,
	.wce-enquiry * { transition: none !important; }
}

/*
 * [wce_products] catalogue listing. Layout only: text, links and headings inherit the page's own
 * (Elementor Kit / theme) typography and colours so the listing sits inside the existing design.
 */
.wce-products {
	--wce-border: var(--wct-grey-200, rgba(0, 0, 0, 0.14));
	--wce-muted-bg: var(--wct-surface, rgba(0, 0, 0, 0.04));
	--wce-radius: var(--wct-radius, 6px);
	--wce-cols: 3;
	display: grid;
	gap: 1.25rem;
	margin: 0;
}
.wce-products ul { margin: 0; padding: 0; list-style: none; }
.wce-products .screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wce-products__filter ul,
.wce-products__pages ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wce-products__filter a,
.wce-products__pages a {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px; padding: 0.375rem 0.875rem;
	border: 1px solid var(--wce-border); border-radius: var(--wce-radius);
	text-decoration: none; color: inherit; box-sizing: border-box;
}
.wce-products__filter a[aria-current="page"],
.wce-products__pages a[aria-current="page"] { border-color: currentColor; font-weight: 700; }
.wce-products__count,
.wce-products__empty { margin: 0; }
.wce-products__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.wce-products__item {
	display: flex; flex-direction: column; min-width: 0;
	border: 1px solid var(--wce-border); border-radius: var(--wce-radius); overflow: hidden;
}
.wce-products__media { display: block; aspect-ratio: 4 / 3; background: var(--wce-muted-bg); color: inherit; } /* Icon follows the text colour, not the link colour. */
.wce-products__media img,
.wce-products__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wce-products__placeholder { display: grid; place-items: center; width: 100%; height: 100%; }
.wce-products__placeholder .wce-icon { width: 64px; height: 64px; stroke-width: 1.1; opacity: 0.75; }
.wce-products__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; padding: 1rem; }
.wce-products__cat { margin: 0; font-size: 0.875em; opacity: 0.8; }
.wce-products__name { margin: 0; font-size: 1.125em; line-height: 1.3; overflow-wrap: anywhere; }
.wce-products__name a { color: inherit; text-decoration: none; }
.wce-products__name a:hover { text-decoration: underline; }
.wce-products__summary { margin: 0; }
.wce-products__cta {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; min-height: 44px; font-weight: 700;
}
.wce-products a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 560px) {
	.wce-products__grid { grid-template-columns: repeat(min(2, var(--wce-cols)), minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.wce-products__grid { grid-template-columns: repeat(var(--wce-cols), minmax(0, 1fr)); }
}