/* ==========================================================================
   PAMI — WooCommerce Single Product
   --------------------------------------------------------------------------
   Update-resistant enhancement layer for the classic WooCommerce product page.

   Requires WooCommerce core frontend styles. This file enhances the classic
   product and loop markup; it is not a standalone replacement for core CSS.

   Gallery safety contract:
   - preserves WooCommerce HTML templates;
   - preserves Flexslider calculated widths and navigation;
   - preserves PhotoSwipe and zoom JavaScript;
   - applies visual CSS only.

   Scope:
   - body.single-product.woocommerce for WooCommerce product UI;
   - body.single-product for page-level utilities;
   - no effect on representative furniture-model pages.
   ========================================================================== */


/* ==========================
   LOCAL TOKENS
========================== */

body.single-product {
	--pami-product-gallery-width: 58%;
	--pami-product-summary-width: 36%;


	--pami-product-section-gap:
		clamp(
			var(--space-9, 48px),
			7vw,
			var(--space-12, 96px)
		);

	--pami-related-column-gap:
		clamp(
			var(--space-5, 24px),
			3vw,
			var(--space-8, 40px)
		);

	--pami-related-row-gap:
		clamp(
			var(--space-8, 40px),
			5vw,
			var(--space-11, 80px)
		);

	--pami-related-media-height:
		clamp(
			190px,
			17vw,
			240px
		);

	--pami-related-title-min-height: 2.8em;
	--pami-related-price-min-height: 2.9em;

	--pami-product-ease-luxury:
		var(--motion-easing-emphasized);

	--pami-product-ease-standard:
		var(--motion-easing-standard);

	--pami-product-transition-fast:
		var(--motion-duration-fast);
	--pami-product-transition-base:
		var(--motion-duration-base);
	--pami-product-transition-slow:
		var(--motion-duration-media);

	background-color:
		var(--color-background, #faf8f5);
}



/* ==========================
   PAGE ENVIRONMENT
========================== */

body.single-product .site-main {
	box-sizing: border-box;

	width: 100%;
	max-width: var(--container-width, 1320px);

	margin-inline: auto;

	padding:
		clamp(
			var(--space-7, 32px),
			4vw,
			var(--space-10, 64px)
		)
		var(--container-padding, 20px)
		clamp(
			var(--space-10, 64px),
			8vw,
			120px
		);

	background: transparent;
}


/* ==========================
   KEYBOARD FOCUS
========================== */

body.single-product
	:is(
		a,
		button,
		input,
		select,
		textarea,
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
	outline:
		2px solid
		var(--color-primary, #8f2727);

	outline-offset: 3px;
}


/* ==========================
   BREADCRUMBS AND NOTICES
========================== */

body.single-product .woocommerce-breadcrumb {
	margin:
		0
		0
		clamp(
			var(--space-5, 24px),
			3vw,
			var(--space-7, 32px)
		);

	padding: 0;

	font-size: var(--font-size-caption, 13px);
	font-weight: var(--font-weight-regular, 400);
	line-height: 1.5;
	letter-spacing: 0.025em;

	color: var(--color-text-muted, #8d8378);
}

body.single-product .woocommerce-breadcrumb a {
	color: var(--color-text-light, #6a625c);

	text-decoration: none;

	transition:
		color
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury);
}

body.single-product .woocommerce-breadcrumb a:hover {
	color: var(--color-primary, #8f2727);
}

body.single-product .woocommerce-notices-wrapper {
	clear: both;

	width: 100%;

	margin:
		0
		0
		var(--space-7, 32px);
}

body.single-product .woocommerce-notices-wrapper:empty {
	display: none;
}


/* ==========================================================================
   PRIMARY PRODUCT LAYOUT
   --------------------------------------------------------------------------
   The summary intentionally remains non-sticky because tabs, upsells and
   related products share the same div.product containing block.
   ========================================================================== */

@media (min-width: 992px) {
	body.single-product.woocommerce
		div.product
		> div.images.woocommerce-product-gallery {
		float: left;

		width: var(--pami-product-gallery-width);

		margin:
			0
			0
			var(--pami-product-section-gap);
	}

	body.single-product.woocommerce
		div.product
		> .summary.entry-summary {
		position: static;
		top: auto;

		float: right;

		width: var(--pami-product-summary-width);

		margin:
			0
			0
			var(--pami-product-section-gap);

		padding-top:
			clamp(
				var(--space-3, 12px),
				1.8vw,
				var(--space-6, 28px)
			);
	}
}


/* ==========================
   SALE MARKER
========================== */

body.single-product.woocommerce
	div.product {
	position: relative;
}

body.single-product.woocommerce
	div.product
	> span.onsale {
	position: absolute;
	top: 16px;
	right: auto;
	left: 16px;
	z-index: 8;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: 0;

	margin: 0;
	padding:
		7px
		9px;

	font-size: 0.6875rem;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: var(--color-primary-dark, #741818);

	background: rgba(250, 248, 245, 0.9);

	border: 1px solid rgba(143, 39, 39, 0.16);
	border-radius: var(--radius-xs, 2px);

	box-shadow:
		0 7px 20px rgba(45, 42, 40, 0.055);

	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}


/* ==========================================================================
   CLASSIC WOOCOMMERCE GALLERY
   ========================================================================== */

body.single-product.woocommerce
	div.product
	> div.images.woocommerce-product-gallery {
	min-width: 0;

	padding: 0;

	background: transparent;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery,
body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.flex-viewport,
body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.woocommerce-product-gallery__wrapper,
body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.woocommerce-product-gallery__image {
	background: transparent;

	border: 0;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.woocommerce-product-gallery__image
	a,
body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.woocommerce-product-gallery__image
	img,
body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	img.zoomImg {
	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}


/* ==========================
   FLEXSLIDER THUMBNAILS
========================== */

/*
 * Native display, floats and calculated widths remain untouched.
 * Spacing is created only through inner padding.
 */

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	ol.flex-control-thumbs {
	margin:
		var(--space-4, 16px)
		-6px
		0;

	padding: 0;

	background: transparent;

	border: 0;

	list-style: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	ol.flex-control-thumbs
	li {
	box-sizing: border-box;

	margin-top: 0;
	margin-bottom: var(--space-3, 12px);

	padding-right: 6px;
	padding-left: 6px;

	background: transparent;

	border: 0;

	list-style: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	ol.flex-control-thumbs
	li
	img {
	display: block;

	max-width: 100%;

	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;
	border-radius: var(--radius-xs, 2px);

	box-shadow: none;

	cursor: pointer;

	opacity: 0.62;

	transition:
		opacity
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury);
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	ol.flex-control-thumbs
	li
	img:hover {
	opacity: 0.8;
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	ol.flex-control-thumbs
	li
	img.flex-active {
	opacity: 1;
}


/* ==========================
   PHOTOSWIPE TRIGGER
========================== */

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	z-index: 7;

	width: 42px;
	height: 42px;

	color: var(--color-text, #2d2a28);

	background: rgba(250, 248, 245, 0.82);

	border: 1px solid rgba(45, 42, 40, 0.12);
	border-radius: var(--radius-full, 999px);

	box-shadow:
		0 7px 20px rgba(45, 42, 40, 0.055);

	opacity: 0.86;

	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);

	transition:
		opacity
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		background-color
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		border-color
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		box-shadow
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury);
}

body.single-product.woocommerce
	div.product
	.woocommerce-product-gallery
	.woocommerce-product-gallery__trigger:hover {
	background: rgba(255, 255, 255, 0.94);

	border-color: rgba(45, 42, 40, 0.2);

	box-shadow:
		0 10px 26px rgba(45, 42, 40, 0.08);

	opacity: 1;
}


/* ==========================================================================
   PRODUCT SUMMARY
   ========================================================================== */

body.single-product.woocommerce
	div.product
	> .summary.entry-summary {
	min-width: 0;

	background: transparent;

	border: 0;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.summary
	.product_title {
	margin:
		0
		0
		var(--space-4, 16px);

	padding: 0;

	font-family:
		var(--font-family-heading, Arial, sans-serif);

	font-size:
		var(
			--font-size-product-title,
			clamp(2rem, 3.2vw, 2.75rem)
		);

	font-weight: var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-product-title, 1.05);

	letter-spacing:
		var(--letter-spacing-product-title, -0.035em);

	color: var(--color-text, #2d2a28);

	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

body.single-product.woocommerce
	div.product
	.summary
	p.price,
body.single-product.woocommerce
	div.product
	.summary
	span.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;

	margin:
		0
		0
		var(--space-6, 28px);

	font-size:
		var(
			--font-size-display-price,
			clamp(1.25rem, 1.7vw, 1.5rem)
		);

	font-weight: var(--font-weight-medium, 500);
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	letter-spacing: -0.02em;

	color: var(--color-text, #2d2a28);
}

body.single-product.woocommerce
	div.product
	.summary
	.price
	del {
	font-size: 0.68em;
	font-weight: var(--font-weight-regular, 400);

	color: var(--color-text-muted, #8d8378);

	opacity: 0.68;
}

body.single-product.woocommerce
	div.product
	.summary
	.price
	ins {
	font-weight: var(--font-weight-semibold, 600);

	color: var(--color-primary, #8f2727);

	background: transparent;

	text-decoration: none;
}

body.single-product.woocommerce
	div.product
	.summary
	.woocommerce-product-details__short-description {
	max-width: 620px;

	margin:
		0
		0
		var(--space-6, 28px);

	font-size:
		clamp(
			15px,
			1.25vw,
			17px
		);

	line-height: 1.75;

	color: var(--color-text-light, #6a625c);
}

body.single-product.woocommerce
	div.product
	.summary
	.stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin:
		0
		0
		var(--space-5, 24px);

	font-size: 11px;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.4;
	letter-spacing: 0.09em;
	text-transform: uppercase;

	color: var(--color-text-light, #6a625c);
}

body.single-product.woocommerce
	div.product
	.summary
	.stock::before {
	content: "";

	width: 6px;
	height: 6px;

	background: var(--color-primary, #8f2727);

	border-radius: var(--radius-full, 999px);

	box-shadow:
		0 0 0 4px rgba(143, 39, 39, 0.08);
}


/* ==========================================================================
   ADD TO CART
   ========================================================================== */

body.single-product.woocommerce
	div.product
	.summary
	form.cart {
	width: 100%;

	margin:
		var(--space-6, 28px)
		0
		0;

	padding:
		var(--space-6, 28px)
		0;

	border-top:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));

	border-bottom:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));
}

body.single-product.woocommerce
	div.product
	.summary
	form.cart:not(.variations_form):not(.grouped_form),
body.single-product.woocommerce
	div.product
	.summary
	.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-3, 12px);
}

body.single-product.woocommerce
	div.product
	.summary
	form.cart
	.quantity {
	display: inline-flex;
	align-items: stretch;

	float: none;

	margin: 0;
}

body.single-product.woocommerce
	div.product
	.summary
	form.cart
	.quantity
	.qty {
	width: 76px;
	min-width: 76px;
	height: 52px;
	min-height: 52px;

	margin: 0;
	padding:
		12px
		10px;

	font-size: var(--font-size-small, 14px);
	font-weight: var(--font-weight-medium, 500);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;

	color: var(--color-text, #2d2a28);

	background: rgba(255, 255, 255, 0.58);

	border:
		1px solid
		var(--color-border, rgba(45, 42, 40, 0.18));

	border-radius: var(--radius-sm, 6px);

	box-shadow:
		inset 0 1px 1px rgba(45, 42, 40, 0.025);
}

body.single-product.woocommerce
	div.product
	.summary
	.single_add_to_cart_button {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	float: none;

	flex: 1 1 220px;

	width: auto;
	min-width: 210px;
	min-height: 52px;

	margin: 0;
	padding:
		15px
		var(--space-7, 32px);

	font-size: 12px;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1;
	letter-spacing: 0.085em;
	text-align: center;
	text-transform: uppercase;

	color: var(--color-text-inverse, #ffffff);

	background:
		linear-gradient(
			180deg,
			var(--color-primary-light, #a73a3a) 0%,
			var(--color-primary, #8f2727) 55%,
			var(--color-primary-dark, #741818) 100%
		);

	border: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom-color: rgba(0, 0, 0, 0.17);
	border-radius: var(--radius-sm, 6px);

	box-shadow:
		var(
			--shadow-button-primary,
			0 12px 28px rgba(116, 24, 24, 0.2)
		);

	cursor: pointer;

	transition:
		transform
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		box-shadow
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury);
}

body.single-product.woocommerce
	div.product
	.summary
	.single_add_to_cart_button:hover {
	box-shadow:
		var(
			--shadow-button-primary-hover,
			0 16px 34px rgba(116, 24, 24, 0.26)
		);

	transform: translateY(-1px);
}

body.single-product.woocommerce
	div.product
	.summary
	.single_add_to_cart_button:disabled,
body.single-product.woocommerce
	div.product
	.summary
	.single_add_to_cart_button.disabled,
body.single-product.woocommerce
	div.product
	.summary
	.single_add_to_cart_button.wc-variation-selection-needed {
	cursor: not-allowed;

	opacity: 0.7;

	transform: none;
}


/* ==========================
   VARIATIONS AND META
========================== */

body.single-product.woocommerce
	div.product
	.summary
	form.variations_form
	table.variations {
	width: 100%;

	margin:
		0
		0
		var(--space-5, 24px);

	background: transparent;

	border: 0;
	border-collapse: collapse;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.summary
	form.variations_form
	table.variations
	th,
body.single-product.woocommerce
	div.product
	.summary
	form.variations_form
	table.variations
	td {
	padding:
		var(--space-2, 8px)
		0;

	background: transparent;

	border: 0;
}

body.single-product.woocommerce
	div.product
	.summary
	form.variations_form
	table.variations
	select {
	width: 100%;
	min-height: 50px;

	margin: 0;
	padding:
		12px
		42px
		12px
		15px;

	font-size: var(--font-size-small, 14px);

	color: var(--color-text, #2d2a28);

	background-color: rgba(255, 255, 255, 0.66);

	border:
		1px solid
		var(--color-border, rgba(45, 42, 40, 0.18));

	border-radius: var(--radius-sm, 6px);
}

body.single-product.woocommerce
	div.product
	.summary
	.product_meta {
	display: grid;
	gap: var(--space-2, 8px);

	margin:
		var(--space-6, 28px)
		0
		0;

	padding:
		var(--space-5, 24px)
		0
		0;

	font-size: var(--font-size-caption, 13px);
	line-height: 1.55;

	color: var(--color-text-muted, #8d8378);

	border-top:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));
}

body.single-product.woocommerce
	div.product
	.summary
	.product_meta
	a {
	color: var(--color-text-light, #6a625c);

	text-underline-offset: 0.22em;
}


/* ==========================================================================
   WOOCOMMERCE TABS
   ========================================================================== */

body.single-product.woocommerce
	div.product
	.woocommerce-tabs {
	clear: both;

	width: 100%;

	margin: 0;
	padding:
		clamp(
			var(--space-7, 32px),
			5vw,
			var(--space-10, 64px)
		)
		0
		0;

	background: transparent;

	border-top:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:
		clamp(
			var(--space-5, 24px),
			4vw,
			var(--space-8, 40px)
		);

	width: 100%;

	margin:
		0
		0
		var(--space-7, 32px);

	padding: 0;

	background: transparent;

	border: 0;

	list-style: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs::before,
body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs::after,
body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li::before,
body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li::after {
	content: none;

	display: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li {
	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li
	a {
	position: relative;

	display: inline-flex;
	align-items: center;

	min-height: 42px;

	padding:
		0
		0
		10px;

	font-size: 11px;
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--color-text-muted, #8d8378);

	text-decoration: none;

	transition:
		color
		var(--pami-product-transition-fast)
		var(--pami-product-ease-standard);
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li
	a::after {
	content: "";

	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	width: 0;
	height: 1px;

	margin-inline: auto;

	background: var(--color-primary, #8f2727);

	opacity: 0;

	transition:
		width
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		opacity
		var(--pami-product-transition-fast)
		var(--pami-product-ease-standard);
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li
	a:is(:hover, :focus-visible),
body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li.active
	a {
	color: var(--color-primary, #8f2727);
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	ul.tabs
	li.active
	a::after {
	width: 100%;

	opacity: 1;
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	.panel {
	width: 100%;
	max-width: 980px;

	margin: 0;
	padding: 0;

	font-size:
		clamp(
			15px,
			1.25vw,
			17px
		);

	line-height: 1.78;

	color: var(--color-text-light, #6a625c);

	background: transparent;

	border: 0;

	box-shadow: none;
}


body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	.panel
	> :is(h2, h3):first-child {
	margin:
		0
		0
		var(--space-5, 24px);

	font-size:
		var(
			--font-size-section-title,
			clamp(1.5rem, 2.15vw, 2rem)
		);

	font-weight: var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-section-title, 1.15);

	letter-spacing:
		var(--letter-spacing-section-title, -0.025em);

	color: var(--color-text, #2d2a28);
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	.panel
	:is(h3, h4):not(:first-child) {
	margin:
		var(--space-7, 32px)
		0
		var(--space-4, 16px);

	font-size:
		var(
			--font-size-subsection-title,
			clamp(1.25rem, 1.5vw, 1.5rem)
		);

	font-weight: var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-subsection-title, 1.2);

	letter-spacing:
		var(--letter-spacing-subsection-title, -0.018em);

	color: var(--color-text, #2d2a28);
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	table.shop_attributes {
	width: min(100%, 780px);

	margin: 0;

	background: transparent;

	border: 0;
	border-collapse: collapse;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	table.shop_attributes
	th,
body.single-product.woocommerce
	div.product
	.woocommerce-tabs
	table.shop_attributes
	td {
	padding:
		var(--space-4, 16px)
		0;

	background: transparent;

	border: 0;
	border-bottom:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));
}


/* ==========================================================================
   RELATED AND UPSELL PRODUCTS
   --------------------------------------------------------------------------
   Designed for the classic WooCommerce loop markup.

   Layout contract:
   - the outer product list is a responsive CSS Grid;
   - every card stretches to the height of its grid row;
   - every card is an internal vertical Flexbox;
   - the media slot has an explicit responsive height, so intrinsic image
     dimensions cannot shift titles, prices or buttons;
   - object-fit: contain preserves the original product-image proportions;
   - price space is reserved when the classic loop omits .price;
   - the primary action stays at the bottom of the card.

   Third-party extensions that replace the classic loop markup may require
   dedicated integration styles.
   ========================================================================== */

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products) {
	clear: both;

	width: 100%;

	margin: 0;
	padding:
		var(--pami-product-section-gap)
		0
		0;

	border-top:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	> h2 {
	margin:
		0
		0
		clamp(
			var(--space-7, 32px),
			4vw,
			var(--space-9, 48px)
		);

	font-family:
		var(--font-family-heading, Arial, sans-serif);

	font-size:
		var(
			--font-size-section-title,
			clamp(1.5rem, 2.15vw, 2rem)
		);

	font-weight: var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-section-title, 1.15);

	letter-spacing:
		var(--letter-spacing-section-title, -0.025em);

	color: var(--color-text, #2d2a28);
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: row;

	column-gap: var(--pami-related-column-gap);
	row-gap: var(--pami-related-row-gap);

	align-items: stretch;

	box-sizing: border-box;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products::before,
body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products::after {
	content: none;

	display: none;
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product {
	position: relative;

	display: flex;
	flex-direction: column;
	align-self: stretch;

	box-sizing: border-box;

	float: none;
	clear: none;

	width: auto;
	min-width: 0;

	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;

	box-shadow: none;
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	> a.woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;

	min-width: 0;

	color: var(--color-text, #2d2a28);

	text-decoration: none;
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	> a.woocommerce-loop-product__link
	> img {
	display: block;

	flex: 0 0 auto;

	box-sizing: border-box;

	width: 100%;
	max-width: 100%;
	height: var(--pami-related-media-height);

	margin:
		0
		0
		var(--space-4, 16px);

	object-fit: contain;
	object-position: center;

	background: rgba(255, 255, 255, 0.56);

	border:
		1px solid
		var(--color-border-soft, rgba(45, 42, 40, 0.11));

	border-radius: var(--radius-sm, 6px);

	box-shadow: none;

	transition:
		opacity
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		border-color
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury);
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product:hover
	> a.woocommerce-loop-product__link
	> img {
	opacity: 0.9;

	border-color: rgba(143, 39, 39, 0.16);
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	.woocommerce-loop-product__title {
	min-height: var(--pami-related-title-min-height);

	margin: 0;
	padding: 0;

	font-size:
		var(
			--font-size-card-title,
			clamp(0.9375rem, 1vw, 1.0625rem)
		);

	font-weight: var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-card-title, 1.4);

	letter-spacing:
		var(--letter-spacing-card-title, -0.012em);

	color: var(--color-text, #2d2a28);

	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	.price {
	display: block;

	min-height: var(--pami-related-price-min-height);

	margin:
		var(--space-2, 8px)
		0
		0;

	font-size: var(--font-size-small, 14px);
	font-weight: var(--font-weight-medium, 500);
	font-variant-numeric: tabular-nums;
	line-height: 1.45;

	color: var(--color-text-light, #6a625c);
}

/* Preserve the price row when WooCommerce omits .price entirely. */
@supports selector(a:has(.price)) {
	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		> a.woocommerce-loop-product__link:not(:has(.price))::after {
		content: "";

		display: block;
		flex: 0 0 var(--pami-related-price-min-height);

		margin-top: var(--space-2, 8px);
	}
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	> .button {
	align-self: flex-start;

	box-sizing: border-box;

	margin:
		auto
		0
		0;

	min-height: 42px;

	padding:
		12px
		17px;

	font-size: 0.6875rem;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	color: var(--color-primary, #8f2727);

	background: transparent;

	border: 1px solid rgba(143, 39, 39, 0.22);
	border-radius: var(--radius-sm, 6px);

	box-shadow: none;

	transition:
		color
		var(--pami-product-transition-fast)
		var(--pami-product-ease-standard),
		background-color
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		border-color
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury),
		transform
		var(--pami-product-transition-base)
		var(--pami-product-ease-luxury);
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	> .button:hover {
	color: var(--color-text-inverse, #ffffff);

	background-color: var(--color-primary, #8f2727);

	border-color: var(--color-primary, #8f2727);

	transform: translateY(-1px);
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	> .added_to_cart {
	align-self: flex-start;

	margin-top: var(--space-3, 12px);

	font-size: 0.6875rem;
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.07em;
	text-transform: uppercase;

	color: var(--color-primary, #8f2727);
}

body.single-product.woocommerce
	div.product
	:is(.upsells.products, .related.products)
	ul.products
	li.product
	.onsale {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	z-index: 2;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1279px) and (min-width: 992px) {
	body.single-product {
		--pami-product-gallery-width: 55%;
		--pami-product-summary-width: 39%;
		--pami-related-media-height: 250px;
	}

	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	body.single-product.woocommerce
		div.product
		> div.images.woocommerce-product-gallery,
	body.single-product.woocommerce
		div.product
		> .summary.entry-summary {
		position: static;
		top: auto;

		float: none;

		width: 100%;

		margin: 0;
	}

	body.single-product.woocommerce
		div.product
		> div.images.woocommerce-product-gallery {
		margin-bottom: var(--space-8, 40px);
	}

	body.single-product.woocommerce
		div.product
		> .summary.entry-summary {
		margin-bottom: var(--space-9, 48px);

		padding-top: 0;
	}

	body.single-product.woocommerce
		div.product
		.woocommerce-tabs
		ul.tabs {
		flex-wrap: nowrap;

		overflow-x: auto;
		overflow-y: hidden;

		-webkit-overflow-scrolling: touch;
	}

	body.single-product {
		--pami-related-media-height:
			clamp(
				210px,
				34vw,
				290px
			);
	}

	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.single-product .site-main {
		padding:
			var(--space-6, 28px)
			var(--container-padding, 18px)
			var(--space-9, 48px);
	}

	body.single-product.woocommerce
		div.product
		.woocommerce-product-gallery
		ol.flex-control-thumbs {
		margin:
			var(--space-3, 12px)
			-4px
			0;
	}

	body.single-product.woocommerce
		div.product
		.woocommerce-product-gallery
		ol.flex-control-thumbs
		li {
		padding-right: 4px;
		padding-left: 4px;
	}

	body.single-product.woocommerce
		div.product
		.summary
		form.cart:not(.variations_form):not(.grouped_form),
	body.single-product.woocommerce
		div.product
		.summary
		.woocommerce-variation-add-to-cart {
		display: grid;

		grid-template-columns:
			82px
			minmax(0, 1fr);
	}

	body.single-product.woocommerce
		div.product
		.summary
		form.cart
		.quantity,
	body.single-product.woocommerce
		div.product
		.summary
		form.cart
		.quantity
		.qty {
		width: 82px;
		min-width: 82px;
	}

	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products {
		column-gap: var(--space-4, 16px);
		row-gap: var(--space-8, 40px);
	}

	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		> .button {
		width: 100%;
	}
}

@media (max-width: 520px) {
	body.single-product {
		--pami-related-media-height:
			clamp(
				240px,
				68vw,
				360px
			);
	}

	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		.woocommerce-loop-product__title,
	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		.price {
		min-height: 0;
	}

	@supports selector(a:has(.price)) {
		body.single-product.woocommerce
			div.product
			:is(.upsells.products, .related.products)
			ul.products
			li.product
			> a.woocommerce-loop-product__link:not(:has(.price))::after {
			display: none;
		}
	}
}

@media (max-width: 420px) {
	body.single-product.woocommerce
		div.product
		.summary
		form.cart:not(.variations_form):not(.grouped_form),
	body.single-product.woocommerce
		div.product
		.summary
		.woocommerce-variation-add-to-cart {
		grid-template-columns:
			minmax(0, 1fr);
	}

	body.single-product.woocommerce
		div.product
		.summary
		form.cart
		.quantity,
	body.single-product.woocommerce
		div.product
		.summary
		form.cart
		.quantity
		.qty {
		width: 100%;
		min-width: 0;
	}
}


/* ==========================
   TOUCH AND REDUCED MOTION
========================== */

@media (hover: none) {
	body.single-product.woocommerce
		div.product
		.woocommerce-product-gallery
		ol.flex-control-thumbs
		li
		img:hover {
		opacity: 0.62;
	}

	body.single-product.woocommerce
		div.product
		.woocommerce-product-gallery
		ol.flex-control-thumbs
		li
		img.flex-active {
		opacity: 1;
	}

	body.single-product.woocommerce
		div.product
		.summary
		.single_add_to_cart_button:hover,
	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		> .button:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .woocommerce-breadcrumb a,
	body.single-product.woocommerce
		div.product
		.woocommerce-product-gallery
		ol.flex-control-thumbs
		li
		img,
	body.single-product.woocommerce
		div.product
		.woocommerce-product-gallery
		.woocommerce-product-gallery__trigger,
	body.single-product.woocommerce
		div.product
		.summary
		.single_add_to_cart_button,
	body.single-product.woocommerce
		div.product
		.woocommerce-tabs
		ul.tabs
		li
		a,
	body.single-product.woocommerce
		div.product
		.woocommerce-tabs
		ul.tabs
		li
		a::after,
	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		> a.woocommerce-loop-product__link
		> img,
	body.single-product.woocommerce
		div.product
		:is(.upsells.products, .related.products)
		ul.products
		li.product
		> .button {
		transition: none;
	}
}