/**
 * Single product page
 */

.product-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-16);
	padding-block: var(--space-8) var(--space-16);
}

/* --- Gallery --- */

.product-page__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.product-page__image {
	width: 100%;
	background: var(--color-surface-muted);
}

/* --- Details --- */

.product-page__sticky {
	position: sticky;
	top: calc(var(--control-height) + var(--space-8));
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-block: var(--space-16);
}

.product-page__title {
	font-family: var(--font-mono);
	font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0;
}

.product-page__price {
	font-size: var(--text-md);
}

.product-page__summary p {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: var(--line-relaxed);
	color: var(--color-heading);
	max-width: 40ch;
	margin: 0;
}

.product-page .rule {
	width: 100%;
	margin-block: 0;
}

/* --- Add to cart form --- */

.product-page__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.product-page__form .cart {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: 0;
}

.product-page__form .single_add_to_cart_button {
	width: 100%;
}

/*
 * WooCommerce's own stylesheet ships a `.woocommerce button.button.alt`
 * rule at (0,3,1) specificity for its default purple CTA; match it with
 * an extra ancestor class so the off-black override reliably wins.
 */
.woocommerce .product-page__form .single_add_to_cart_button.alt,
.product-page__form .single_add_to_cart_button {
	background: var(--ink);
	border-color: var(--ink);
}

.woocommerce .product-page__form .single_add_to_cart_button.alt:hover,
.product-page__form .single_add_to_cart_button:hover {
	background: var(--ink-dark);
	border-color: var(--ink-dark);
}

/*
 * WooCommerce's JS toggles a `.disabled` class (not always the `:disabled`
 * attribute) while a variation is unselected/unavailable, and its own
 * `.button.alt.disabled` rule matches at higher specificity than ours —
 * !important keeps the disabled state a flat grey regardless.
 */
.product-page__form .single_add_to_cart_button:disabled,
.product-page__form .single_add_to_cart_button.disabled {
	background: var(--color-muted) !important;
	border-color: var(--color-muted) !important;
	color: var(--color-inverse) !important;
	opacity: 1 !important;
}

/*
 * Quantity is chosen in the cart, not on the product page.
 *
 * !important is load-bearing: WooCommerce's add-to-cart-variation.js calls
 * jQuery .show() on the quantity wrapper every time a variation is selected,
 * which writes an inline `display` that a plain stylesheet rule cannot beat.
 */
.product-page__form .cart .quantity {
	display: none !important;
}

/* Variation selects, converted to swatches by main.js. */
.product-page__form .variations {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	margin: 0;
	border: 0;
}

.product-page__form .variations tr,
.product-page__form .variations td,
.product-page__form .variations th {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.product-page__form .variations label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-3);
}

.product-page__form .reset_variations {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-muted);
}

.product-page__form .woocommerce-variation-price {
	margin-bottom: var(--space-4);
}

/* --- Size / option swatches --- */

.swatch-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.swatch-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	min-height: var(--control-height-sm);
	padding: 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-heading);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast);
}

.swatch-button:hover {
	border-color: var(--color-border-strong);
}

.swatch-button.is-selected {
	background: var(--color-surface-muted);
	border-color: var(--color-border-strong);
	color: var(--color-heading);
}

.swatch-button:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 2px;
}

/* The underlying select stays in the DOM for form submission. */
.swatch-list + select,
select.is-swatched {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (max-width: 60rem) {
	.product-page {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.product-page__sticky {
		position: static;
		padding-block: 0;
	}

	.product-page__gallery {
		gap: var(--space-2);
	}
}