/* Native WooCommerce product details and related-product presentation. */

.single-product div.product > .sola-product-details,
.single-product div.product > .related.products,
.single-product div.product > .upsells.products,
.single-product div.product > .cross-sells.products {
	float: none;
	grid-column: 1 / -1;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
	padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
	background: var(--color-canvas);
}

.single-product .sola-recently-viewed-mount:not([hidden]) {
	clear: both;
	grid-column: 1 / -1;
	inline-size: 100%;
	min-inline-size: 0;
}

.single-product .sola-recently-viewed {
	margin-block-start: clamp(var(--space-12), 8vw, var(--space-20));
}

.single-product .sola-recently-viewed > h2 {
	max-inline-size: 20ch;
	margin: 0;
	color: var(--color-ink);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	text-align: start;
}

body.woocommerce-page:not(.home) #primary .site-main .sola-recently-viewed > ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--space-8) var(--space-6);
	direction: rtl;
	inline-size: 100%;
	margin-block: var(--space-6) 0;
	padding: 0 0 var(--space-2);
	list-style: none;
}

body.woocommerce-page:not(.home) #primary .site-main .sola-recently-viewed > ul.products > li.product {
	inline-size: auto;
	max-inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
}

.single-product div.product > .sola-product-details {
	--sola-details-border: rgb(32 34 30 / 0.24);
	--sola-product-details-background: #F6ECDD;
	position: relative;
	inset-inline-start: calc(-1 * var(--sola-product-gutter));
	inline-size: calc(100% + (2 * var(--sola-product-gutter)));
	max-inline-size: none;
	margin-block-start: var(--space-8);
	margin-inline: 0;
	background: var(--sola-product-details-background);
	padding-block-end: clamp(var(--space-8), 6vw, var(--space-16));
	direction: rtl;
	overflow: clip;
}

.single-product .sola-product-details__inner {
	inline-size: calc(100% - (2 * var(--sola-product-gutter)));
	max-inline-size: none;
	margin-inline: auto;
}

.single-product .sola-product-details--has-editorial.sola-product-details--has-accordion .sola-product-details__inner {
	display: grid;
	grid-template-areas: "editorial accordion";
	grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.85fr);
	gap: clamp(var(--space-8), 6vw, var(--space-16));
	align-items: start;
}

.single-product .sola-product-details__editorial {
	grid-area: editorial;
	min-inline-size: 0;
}

.single-product .sola-product-details__accordion {
	grid-area: accordion;
	min-inline-size: 0;
}

.single-product .sola-product-details__heading {
	margin: 0 0 var(--space-4);
	color: var(--color-ink);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	text-align: start;
}

.single-product .sola-product-details__editorial-content {
	max-inline-size: var(--reading-max);
	color: var(--color-ink);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body);
}

.single-product .sola-product-details__editorial-content :where(h2, h3, h4) {
	max-inline-size: 24ch;
	margin-block: var(--space-6) var(--space-3);
	color: var(--color-ink);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.single-product .sola-product-details__editorial-content :where(p, ul, ol) {
	max-inline-size: var(--reading-max);
}

.single-product .sola-product-details__editorial-content > :first-child {
	margin-block-start: 0;
}

.single-product .sola-product-details__editorial-content > :last-child {
	margin-block-end: 0;
}

.single-product .sola-product-details__list {
	border-block-start: 1px solid var(--sola-details-border, var(--color-border));
}

.single-product .sola-product-details__item {
	margin: 0;
	border-block-end: 1px solid var(--sola-details-border, var(--color-border));
}

.single-product .sola-product-details__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-block-size: 3.25rem;
	padding-block: var(--space-3);
	padding-inline: var(--space-1);
	color: var(--color-ink);
	font-size: var(--font-size-body-large);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	text-align: start;
	cursor: pointer;
	list-style: none;
	overflow-wrap: anywhere;
}

.single-product .sola-product-details__summary::-webkit-details-marker {
	display: none;
}

.single-product .sola-product-details__summary::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.75rem;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 0;
	border-radius: 0;
	color: var(--color-ink);
	content: '+';
	direction: ltr;
	font-size: 1.25rem;
	font-weight: var(--font-weight-regular);
	line-height: 1;
}

.single-product .sola-product-details__item[open] > .sola-product-details__summary::after {
	content: '−';
}

.single-product .sola-product-details__summary:hover::after {
	color: var(--color-accent);
}

.single-product .sola-product-details__summary:focus-visible {
	border-radius: var(--radius-button);
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.single-product .sola-product-details__panel {
	inline-size: min(100%, var(--reading-max));
	max-inline-size: 100%;
	padding-block: 0 var(--space-5);
	padding-inline: var(--space-1);
	color: var(--color-ink-soft);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	overflow-wrap: anywhere;
}

.single-product .sola-product-details__panel a {
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.single-product .sola-product-details__panel > :first-child {
	margin-block-start: 0;
}

.single-product .sola-product-details__panel > :last-child {
	margin-block-end: 0;
}

.single-product .sola-product-details__panel :where(h2, h3, h4) {
	max-inline-size: 24ch;
	margin-block: 0 var(--space-3);
	color: var(--color-ink);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.single-product .sola-product-details__panel :where(p, ul, ol) {
	max-inline-size: var(--reading-max);
}

.single-product .sola-product-details__panel .woocommerce-product-attributes {
	inline-size: 100%;
	max-inline-size: var(--reading-max);
	margin: 0;
	border-block-start: 1px solid var(--color-border);
	border-collapse: collapse;
	color: var(--color-ink-soft);
	font-size: var(--font-size-body);
	text-align: start;
}

.single-product .sola-product-details__panel .woocommerce-product-attributes th,
.single-product .sola-product-details__panel .woocommerce-product-attributes td {
	padding-block: var(--space-3);
	padding-inline: 0 var(--space-4);
	border-block-end: 1px solid var(--color-border);
	background: transparent;
	line-height: var(--line-height-body);
	text-align: start;
	vertical-align: baseline;
}

.single-product .sola-product-details__panel .woocommerce-product-attributes th {
	inline-size: min(38%, 14rem);
	color: var(--color-ink);
	font-weight: var(--font-weight-semibold);
}

.single-product .sola-product-details__panel .woocommerce-product-attributes td {
	padding-inline: var(--space-4) 0;
}

.single-product .sola-product-details__panel .woocommerce-product-attributes p {
	margin: 0;
}

.single-product div.product > .related.products,
.single-product div.product > .upsells.products,
.single-product div.product > .cross-sells.products {
	clear: both;
	margin-block-start: clamp(var(--space-12), 8vw, var(--space-20));
	padding-block-start: 0;
	padding-block-end: 0;
}

.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product .cross-sells.products > h2 {
	max-inline-size: 20ch;
	margin: 0;
	color: var(--color-ink);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	text-align: start;
}

/* product-card.css owns a broad, higher-specificity `ul.products` reset and
 * is loaded before this product-only bundle. Keep the native related/upsell
 * presentation on the full product path so these final rules win without an
 * !important override. */
body.woocommerce-page:not(.home) #primary .site-main div.product > .related.products > ul.products,
body.woocommerce-page:not(.home) #primary .site-main div.product > .upsells.products > ul.products,
body.woocommerce-page:not(.home) #primary .site-main div.product > .cross-sells.products > ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	column-gap: var(--space-6);
	row-gap: var(--space-8);
	direction: rtl;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	padding-inline: 0;
	padding-block-end: var(--space-2);
	overflow: visible;
	overscroll-behavior-inline: contain;
	margin-block: var(--space-6) 0;
	list-style: none;
}

body.woocommerce-page:not(.home) #primary .site-main div.product > .related.products > ul.products > li.product,
body.woocommerce-page:not(.home) #primary .site-main div.product > .upsells.products > ul.products > li.product,
body.woocommerce-page:not(.home) #primary .site-main div.product > .cross-sells.products > ul.products > li.product {
	inline-size: auto;
	max-inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
}

.single-product .related.products .sola-product-card,
.single-product .upsells.products .sola-product-card,
.single-product .cross-sells.products .sola-product-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* The full product-page rows are navigation-only; the compact upsell next to
 * the primary product form has its own separate action. */
body.single-product #primary .site-main ul.products li.product.sola-product-card a.woocommerce-LoopProduct-link
	:is(.woocommerce-loop-product__title, .price) {
	align-self: stretch;
	inline-size: 100%;
	min-inline-size: 0;
	text-align: right;
}

body.single-product #primary .site-main ul.products li.product.sola-product-card a.woocommerce-LoopProduct-link .price {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--space-2);
	margin-inline: 0;
	padding-inline: 0;
	direction: rtl;
	font-family: var(--font-family-sans);
}

body.single-product #primary .site-main ul.products li.product > :is(.button, .added_to_cart) {
	display: none !important;
}

@media (max-width: 63.99rem) {
	body.woocommerce-page:not(.home) #primary .site-main .sola-recently-viewed > ul.products {
		display: flex;
		flex-flow: row nowrap;
		gap: var(--space-4);
		padding-inline: var(--space-1);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: inline mandatory;
	}

	body.woocommerce-page:not(.home) #primary .site-main .sola-recently-viewed > ul.products > li.product {
		inline-size: clamp(14.375rem, 32vw, 18rem);
		max-inline-size: none;
		flex: 0 0 clamp(14.375rem, 32vw, 18rem);
		scroll-snap-align: start;
	}
	.single-product .sola-product-details__inner {
		inline-size: calc(100% - (2 * var(--sola-product-gutter)));
		max-inline-size: none;
	}

	.single-product .sola-product-details--has-editorial.sola-product-details--has-accordion .sola-product-details__inner {
		display: grid;
		grid-template-areas: "editorial" "accordion";
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}

	.single-product .sola-product-details__panel {
		inline-size: 100%;
	}

	.single-product div.product > .sola-product-details,
	.single-product div.product > .related.products,
	.single-product div.product > .upsells.products,
	.single-product div.product > .cross-sells.products {
		padding-block-start: var(--space-8);
	}

	.single-product div.product > .sola-product-details {
		padding-block-end: var(--space-8);
	}

	.single-product .sola-product-details__summary {
		min-block-size: 3.5rem;
		padding-inline: 0;
	}

	.single-product .sola-product-details__panel {
		padding-inline: 0;
	}

	.single-product div.product > .related.products,
	.single-product div.product > .upsells.products,
	.single-product div.product > .cross-sells.products {
		margin-block-start: var(--space-12);
	}

	body.woocommerce-page:not(.home) #primary .site-main div.product > .related.products > ul.products,
	body.woocommerce-page:not(.home) #primary .site-main div.product > .upsells.products > ul.products,
	body.woocommerce-page:not(.home) #primary .site-main div.product > .cross-sells.products > ul.products {
		display: flex;
		flex-flow: row nowrap;
		gap: var(--space-4);
		padding-inline: var(--space-1);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-padding-inline: var(--space-1);
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	body.woocommerce-page:not(.home) #primary .site-main div.product > .related.products > ul.products > li.product,
	body.woocommerce-page:not(.home) #primary .site-main div.product > .upsells.products > ul.products > li.product,
	body.woocommerce-page:not(.home) #primary .site-main div.product > .cross-sells.products > ul.products > li.product {
		inline-size: clamp(14.375rem, 32vw, 18rem);
		max-inline-size: none;
		flex: 0 0 clamp(14.375rem, 32vw, 18rem);
		scroll-snap-align: start;
	}
}

/* Keep the mobile rail in the Article-inspired peek range: roughly 1.2–1.4
 * cards are visible at 360–390px while the next card remains discoverable. */
@media (max-width: 47.99rem) {
	body.woocommerce-page:not(.home) #primary .site-main .sola-recently-viewed > ul.products > li.product {
		inline-size: clamp(16rem, 72vw, 18rem);
		flex-basis: clamp(16rem, 72vw, 18rem);
	}
	.single-product div.product > .sola-product-details {
		inset-inline-start: calc(-1 * var(--space-4));
		inline-size: calc(100% + var(--space-8));
		max-inline-size: none;
		margin-inline: 0;
		padding-inline: var(--space-4);
	}

	.single-product .sola-product-details__inner {
		inline-size: 100%;
	}

	body.woocommerce-page:not(.home) #primary .site-main div.product > .related.products > ul.products > li.product,
	body.woocommerce-page:not(.home) #primary .site-main div.product > .upsells.products > ul.products > li.product,
	body.woocommerce-page:not(.home) #primary .site-main div.product > .cross-sells.products > ul.products > li.product {
		inline-size: clamp(16rem, 72vw, 18rem);
		flex-basis: clamp(16rem, 72vw, 18rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .sola-product-details__summary::after {
		transition: none;
	}
}