/*
 * Single-product presentation. WooCommerce owns the gallery, variation form,
 * stock controls, cart action, tabs and notices; these rules only shape them.
 */

/*
 * The single-product template (no theme override; WooCommerce's own block
 * template applies) renders breadcrumbs and store-notices as separate
 * top-level blocks that both carry WooCommerce's generic .woocommerce
 * compatibility class, unlike the shop archive's single legacy-template
 * wrapper. Framing the boxed content area against `main` itself (rather than
 * `main > .woocommerce`) avoids padding those two unrelated blocks.
 */
.single-product main {
	width: min(100%, var(--toga-wide-width));
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 5rem) var(--toga-gutter);
}

.single-product div.product {
	display: flow-root;
}

.single-product div.product .woocommerce-product-gallery {
	margin-block-end: var(--toga-space-6);
}

.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__wrapper img {
	width: 100%;
	aspect-ratio: var(--toga-ratio-card);
	object-fit: cover;
	background: var(--toga-paper);
}

/* Colour/pattern variation controls update WooCommerce's existing gallery.
   Give each selected option position a distinct animation name so changing
   the retained WooCommerce select restarts the image crossfade. This stays
   CSS-only and works whether the select is visible or driven by a swatch UI. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes toga-variation-crossfade-2 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-3 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-4 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-5 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-6 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-7 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-8 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-9 {
		from { opacity: 0.18; }
	}

	@keyframes toga-variation-crossfade-10 {
		from { opacity: 0.18; }
	}

	body.single-product:has(
		.variations_form select:is(
			[data-attribute_name*="color" i],
			[data-attribute_name*="colour" i],
			[data-attribute_name*="pattern" i]
		) option:not(:first-child):checked
	) .woocommerce-product-gallery__image img {
		animation-duration: var(--toga-duration-base);
		animation-timing-function: var(--toga-ease);
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(2):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-2;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(3):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-3;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(4):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-4;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(5):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-5;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(6):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-6;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(7):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-7;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(8):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-8;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(9):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-9;
	}

	body.single-product:has(.variations_form select:is([data-attribute_name*="color" i], [data-attribute_name*="colour" i], [data-attribute_name*="pattern" i]) option:nth-child(10):checked) .woocommerce-product-gallery__image img {
		animation-name: toga-variation-crossfade-10;
	}
}

.single-product div.product .summary {
	margin-block-end: var(--toga-space-7);
}

.single-product .product_title {
	margin: 0 0 var(--toga-space-2);
	font: 500 clamp(2rem, 4vw, 3.75rem)/var(--toga-leading-tight) var(--toga-font-editorial);
	letter-spacing: -0.025em;
}

.toga-product-detail__vendor {
	margin: 0 0 var(--toga-space-4);
	color: var(--toga-muted);
	font-size: var(--toga-text-small);
}

.toga-product-detail__vendor span {
	margin-inline-end: 0.2em;
}

.toga-product-detail__vendor a {
	color: var(--toga-ink);
	text-underline-offset: 0.18em;
}

.single-product div.product p.price {
	margin-block: var(--toga-space-4);
	color: var(--toga-ink);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 600;
}

.single-product div.product p.price del {
	color: var(--toga-muted);
	font-weight: 400;
}

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--toga-space-3);
	align-items: end;
	margin-block: var(--toga-space-5);
}

.single-product table.variations {
	flex-basis: 100%;
	margin: 0;
}

.single-product table.variations th,
.single-product table.variations td {
	display: block;
	padding: 0 0 var(--toga-space-2);
	text-align: start;
}

.single-product table.variations select,
.single-product .quantity .qty {
	min-height: var(--toga-control-height);
	border: 1px solid var(--toga-border-strong);
	background: var(--toga-surface);
}

.single-product table.variations select {
	width: min(100%, 24rem);
	padding-inline: var(--toga-space-3);
}

/* variation-swatches.js drives this same <select> from the buttons below it
   (value + a native change event) — WooCommerce's own variation script,
   price, stock and gallery sync all keep reading it exactly as before.
   Visually hidden, not display:none, so it stays in the accessibility tree
   as a fallback and jQuery's `:visible` checks keep passing. */
.single-product .toga-variation-swatches__select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.single-product .toga-variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--toga-space-2);
}

.single-product .toga-variation-swatches__button {
	min-width: 3.25rem;
	min-height: var(--toga-control-height);
	padding-inline: var(--toga-space-4);
	border: 1px solid var(--toga-border-strong);
	background: var(--toga-surface);
	color: var(--toga-ink);
	font: inherit;
	font-size: var(--toga-text-small);
	cursor: pointer;
}

.single-product .toga-variation-swatches__button:hover:not(:disabled) {
	border-color: var(--toga-ink);
}

.single-product .toga-variation-swatches__button:focus-visible {
	outline: 2px solid var(--toga-terracotta);
	outline-offset: 2px;
}

.single-product .toga-variation-swatches__button.is-selected {
	border-color: var(--toga-terracotta);
	background: var(--toga-terracotta);
	color: var(--toga-paper);
}

.single-product .toga-variation-swatches__button:disabled {
	border-style: dashed;
	background: var(--toga-paper);
	color: var(--toga-muted);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.7;
}

.single-product .stock.out-of-stock {
	display: inline-flex;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--toga-border-strong);
	color: var(--toga-muted);
	font-weight: 600;
}

.single-product .woocommerce-tabs {
	clear: both;
	margin-block: var(--toga-space-7);
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	overflow-x: auto;
	gap: var(--toga-space-4);
	padding: 0;
	border-block-end: 1px solid var(--toga-border);
	list-style: none;
}

/* WooCommerce's minimal Product Details block declares overflow: visible
   with higher specificity. Keep extra Dokan tabs inside this scroll region. */
html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
	overflow-x: auto;
	overflow-y: hidden;
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	border: 0;
	background: transparent;
}

.single-product .woocommerce-tabs ul.tabs a {
	display: inline-flex;
	min-height: var(--toga-tap-target);
	align-items: center;
	color: var(--toga-muted);
	text-decoration: none;
	white-space: nowrap;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--toga-ink);
	box-shadow: inset 0 -2px var(--toga-ink);
}

/* WooCommerce's review form otherwise renders with unstyled browser-default
   inputs and cramped default paragraph spacing; these rules only shape it —
   the form fields, star widget, and submit button stay WooCommerce's own. */
.single-product .woocommerce-noreviews {
	margin: 0 0 var(--toga-space-6);
	color: var(--toga-muted);
}

.single-product .comment-reply-title {
	display: block;
	margin: 0 0 var(--toga-space-5);
	font-size: var(--toga-text-lead);
	font-weight: 600;
}

.single-product .comment-reply-title small {
	display: block;
	margin-block-start: var(--toga-space-1);
	font-size: var(--toga-text-small);
	font-weight: 400;
}

.single-product .comment-reply-title small a {
	color: var(--toga-muted);
}

.single-product .comment-notes {
	margin: 0 0 var(--toga-space-5);
	color: var(--toga-muted);
	font-size: var(--toga-text-small);
}

.single-product .comment-form {
	display: grid;
	max-width: 34rem;
	gap: var(--toga-space-5);
}

.single-product .comment-form p {
	margin: 0;
}

.single-product .comment-form label {
	display: block;
	margin-block-end: var(--toga-space-2);
	font-size: var(--toga-text-small);
	font-weight: 600;
}

.single-product .comment-form .required {
	color: var(--toga-error);
}

.single-product .comment-form textarea,
.single-product .comment-form input[type="text"],
.single-product .comment-form input[type="email"] {
	width: 100%;
	min-height: var(--toga-control-height);
	padding: var(--toga-space-3);
	border: 1px solid var(--toga-border-strong);
	background: var(--toga-surface);
	font: inherit;
	color: var(--toga-ink);
}

.single-product .comment-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.single-product .comment-form textarea:focus-visible,
.single-product .comment-form input[type="text"]:focus-visible,
.single-product .comment-form input[type="email"]:focus-visible {
	outline: 2px solid var(--toga-terracotta);
	outline-offset: 1px;
}

.single-product p.stars {
	margin: 0;
	color: var(--toga-border-strong);
}

.single-product p.stars a::before {
	font-size: 28px;
}

.single-product p.stars a:hover::before,
.single-product p.stars:hover a::before,
.single-product p.stars.selected a.active::before {
	color: var(--toga-terracotta);
}

.single-product .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--toga-space-2);
}

.single-product .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--toga-text-small);
	font-weight: 400;
}

.toga-more-from-vendor {
	clear: both;
	margin-block-start: clamp(3rem, 7vw, 6rem);
}

.toga-more-from-vendor > h2 {
	margin: 0 0 var(--toga-space-5);
	font: 500 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--toga-font-editorial);
}

@media (min-width: 768px) {
	.single-product div.product .woocommerce-product-gallery {
		width: 54%;
	}

	.single-product div.product .summary {
		width: 40%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .woocommerce-product-gallery *,
	.toga-more-from-vendor * {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
	}
}