/**
 * Steuber Theme: the print configurator of the Probo Connect plugin.
 *
 * Loaded only when that plugin is active. The configurator is a web component
 * that lays itself out for the width of the screen, so it needs the full
 * content width; inside a product column it collapses. Its colours and fonts
 * come from custom properties, which are pointed at the theme's presets here.
 */

/* The plugin's own tokens (cart, checkout, order pages and the uploader). */
html:root {
	--connect-color-primary: var(--wp--preset--color--primary);
	--connect-color-primary-hover: var(--wp--preset--color--primary-hover);
	--connect-color-primary-active: var(--wp--preset--color--primary-hover);
	--connect-color-bg-primary: var(--wp--preset--color--surface);
	--connect-color-bg-secondary: var(--wp--preset--color--surface-alt);
	--connect-box-shadow: var(--wp--custom--shadow--card);
	--connect-color-text-primary: var(--wp--preset--color--ink);
	--connect-color-text-secondary: var(--wp--preset--color--ink-muted);
	--connect-color-text-accent-1: var(--wp--preset--color--on-dark);
	--connect-border: 1px solid var(--wp--preset--color--line);
	--connect-radius: var(--wp--custom--radius--md);
	--connect-button-bg: var(--wp--preset--color--primary);
	--connect-button-color: var(--wp--preset--color--on-dark);
	--connect-color-link: var(--wp--preset--color--link);
	--connect-color-link-hover: var(--wp--preset--color--primary-hover);
	--connect-font-small: var(--wp--preset--font-size--body-sm);
	--connect-font-medium: var(--wp--preset--font-size--body);
	--connect-font-large: var(--wp--preset--font-size--body-lg);
	--connect-font-family-primary: var(--wp--preset--font-family--body);
	--connect-font-family-secondary: var(--wp--preset--font-family--display);
}

/* The configurator itself: buttons, text, fields and focus in theme colours. */
connect-product-configurator::part(configurator) {
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-hover: var(--wp--preset--color--primary-hover);
	--color-primary-active: var(--wp--preset--color--primary-hover);
	--color-primary-pressed: var(--wp--preset--color--primary-hover);
	--color-on-primary: var(--wp--preset--color--on-dark);
	--color-accent: var(--wp--preset--color--link);
	--color-accent-strong: var(--wp--preset--color--primary);
	--color-text-primary: var(--wp--preset--color--ink);
	--color-body-text: var(--wp--preset--color--ink);
	--color-border-default: var(--wp--preset--color--ink-muted);
	--font-sans: var(--wp--preset--font-family--body);

	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
}

connect-product-configurator::part(step) {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
}

connect-product-configurator::part(step-title) {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
}

/*
 * Product page: image and title next to each other, the configurator below
 * them across the full width, then the product meta. The column that holds
 * the configurator steps aside so its children join the grid.
 */
.wp-block-columns:has(> .wp-block-column > .connect-configurator-wrapper) {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 0 var(--wp--preset--spacing--12);
	align-items: start;
}

.wp-block-columns > .wp-block-column:has(> .connect-configurator-wrapper) {
	display: contents;
}

.wp-block-columns > .wp-block-column:has(> .connect-configurator-wrapper) > * {
	grid-column: 2;
}

.wp-block-columns:has(> .wp-block-column > .connect-configurator-wrapper) > .wp-block-column:not(:has(> .connect-configurator-wrapper)) {
	grid-row: 1 / span 4;
	grid-column: 1;
}

.wp-block-columns > .wp-block-column > .connect-configurator-wrapper {
	grid-column: 1 / -1;
	order: 1;
	margin-top: var(--wp--preset--spacing--8);
}

.wp-block-columns > .wp-block-column:has(> .connect-configurator-wrapper) > .wp-block-woocommerce-product-meta {
	grid-column: 1 / -1;
	order: 2;
}

connect-product-configurator {
	display: block;
}

@media (max-width: 781.98px) {

	.wp-block-columns:has(> .wp-block-column > .connect-configurator-wrapper) {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-columns > .wp-block-column:has(> .connect-configurator-wrapper) > *,
	.wp-block-columns:has(> .wp-block-column > .connect-configurator-wrapper) > .wp-block-column:not(:has(> .connect-configurator-wrapper)) {
		grid-row: auto;
		grid-column: 1;
	}
}