/**
 * 3D PrintXpress brand layer (body.lpz-brand-pxp, loaded only on those pages – inc/pxp.php).
 *
 * The page keeps the LuksPlayZ structure and dark surfaces. Inside the content area the accent
 * tokens (Astra palette slots 0/1 and --lpz-accent*) are re-pointed to champagne gold, so buttons,
 * links and the configurator follow without per-component colours (also the phone purchase bar,
 * which sits at the end of <body>). Header, footer and the cart drawer sit outside .site-content
 * and keep the LuksPlayZ purple. Gold on the dark background:
 * 8.6:1 (#c9a86a on #0b0d12); button text #0b0d12 on gold: 8.6:1.
 */

/* Cormorant Garamond 600 (SIL OFL 1.1, assets/fonts/OFL-cormorant-garamond.txt), headings only. */
@font-face {
	font-family: "LPZ Display";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "LPZ Display";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lpz-brand-pxp {
	--lpz-pxp-gold: #c9a86a;
	--lpz-pxp-gold-hover: #dcc28f;
	--lpz-pxp-gold-soft: rgb(201 168 106 / 0.12);
	--lpz-pxp-gold-line: rgb(201 168 106 / 0.32);
	--lpz-pxp-ivory: #efe9df;
	--lpz-font-display: "LPZ Display", "Cormorant Garamond", Georgia, serif;
}

.lpz-brand-pxp .site-content,
.lpz-brand-pxp .lpz-pz-bar {
	--ast-global-color-0: var(--lpz-pxp-gold);
	--ast-global-color-1: var(--lpz-pxp-gold-hover);
	--lpz-accent: var(--lpz-pxp-gold);
	--lpz-accent-hover: var(--lpz-pxp-gold-hover);
	--lpz-accent-soft: var(--lpz-pxp-gold-soft);
	--lpz-accent-line: var(--lpz-pxp-gold-line);
	--lpz-pz-stage: var(--lpz-pxp-ivory);
}

/* ------------------------------------------------------------ Headings */

.lpz-brand-pxp .product_title,
.lpz-brand-pxp .woocommerce-products-header__title {
	font-family: var(--lpz-font-display);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.08;
}

.lpz-brand-pxp div.product .product_title {
	margin-bottom: var(--lpz-space-2);
	font-size: clamp(2rem, 1.45rem + 1.6vw, 2.75rem);
}

/* Current menu entry (e.g. 3D PrintXpress): the header's own underline turns gold; colours stay as set in the Customizer. */
.lpz-brand-pxp #ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after,
.lpz-brand-pxp #ast-desktop-header .main-header-menu > .current_page_item > .menu-link::after,
.lpz-brand-pxp #ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link::after {
	background-color: var(--lpz-pxp-gold);
}

/* Product cards (related products, category): long button labels such as "Personaliziraj" wrap
   inside narrow phone columns instead of widening the page (shop-wide fix comes with Phase 4). */
.lpz-brand-pxp ul.products li.product .button {
	max-width: 100%;
	padding-inline: 0.75em;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------- Personalised product page */

.lpz-pxp-layout div.product .woocommerce-product-details__short-description {
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-base);
	line-height: var(--lpz-leading);
}

.lpz-pxp-layout div.product p.price {
	margin-bottom: var(--lpz-space-3);
}

/* Quantity and button side by side, the button takes the rest of the row. */
.lpz-pxp-layout div.product form.cart:not(.variations_form),
.lpz-pxp-layout div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--lpz-space-3);
}

/* WooCommerce's clearfix pseudo-elements would become empty flex items (an extra gap). */
.lpz-pxp-layout div.product form.cart:not(.variations_form)::before,
.lpz-pxp-layout div.product form.cart:not(.variations_form)::after {
	display: none;
}

.lpz-pxp-layout div.product form.cart .lpz-pz {
	flex: 1 1 100%;
}

.lpz-pxp-layout div.product form.cart .quantity {
	flex: none;
	margin: 0;
}

.lpz-pxp-layout div.product form.cart .quantity .qty {
	height: 100%;
	min-height: 52px;
}

.lpz-pxp-layout div.product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 52px;
	margin: 0;
	letter-spacing: 0.04em;
}

.lpz-pxp-layout .lpz-pz-aside {
	display: none;
}

/* Two columns from 768px: gallery with the live preview below it (sticky), details on the right.
   Selectors outrank Astra's inline product widths (#content .ast-woocommerce-container … 50% / 46%). */
@media (min-width: 768px) {
	body.lpz-pxp-layout.woocommerce #content div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		grid-template-rows: auto 1fr; /* Extra summary height goes to the preview row, not between gallery and preview. */
		align-items: start;
		column-gap: clamp(1.5rem, 4vw, 4rem);
	}

	body.lpz-pxp-layout.woocommerce #content div.product > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.lpz-pxp-layout.woocommerce #content div.product > div.images {
		grid-row: 1;
		grid-column: 1;
		width: auto;
		margin: 0 0 var(--lpz-space-4);
	}

	body.lpz-pxp-layout.woocommerce #content div.product > .lpz-pz-aside {
		display: block;
		grid-row: 2;
		grid-column: 1;
		align-self: stretch;
	}

	body.lpz-pxp-layout.woocommerce #content div.product > div.summary {
		grid-row: 1 / span 2;
		grid-column: 2;
		width: auto;
		margin: 0;
	}

	.lpz-pxp-layout .lpz-pz-aside .lpz-pz__preview-slot {
		position: sticky;
		top: calc(72px + var(--lpz-space-5)); /* Below the sticky header. */
	}
}