/*
 * Single product page: gallery/summary two-column layout, price, the
 * product meta spec block, add-to-cart form, tabs, related products.
 * Relies on WooCommerce's own default markup (no template overrides for
 * gallery/tabs/related — just restyled).
 */

.woocommerce-page-wrap {
	padding-block: var(--space-section);
}

/*
 * Scoped to .single-product specifically (not shop/cart/checkout, which
 * also use .woocommerce-page-wrap) — the full --space-section here, on
 * top of the header's own height, read as an oversized gap before the
 * breadcrumb/gallery in practice.
 */
.single-product .woocommerce-page-wrap {
	padding-block: calc(var(--space-section) / 2);
}

/*
 * row-gap is deliberately 0: div.product also wraps the tabs/upsells/
 * related-products sections (see the grid-column: 1 / -1 rule below), and
 * a non-zero gap here would add its full value between every one of
 * those rows too — stacking on top of their own margins and ballooning
 * the space before "Additional information". Vertical spacing for those
 * sections is set explicitly on each of them instead; the gap here only
 * needs to separate the gallery from the summary on mobile.
 */
.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	column-gap: var(--space-2xl);
	row-gap: 0;
	margin-bottom: var(--space-lg);
}

.single-product .summary.entry-summary {
	margin-top: var(--space-lg);
}

@media (min-width: 960px) {
	.single-product .summary.entry-summary {
		margin-top: 0;
	}

	.single-product div.product {
		/*
		 * Not a plain 1fr/1fr: the product photo is a tall portrait
		 * mockup, so an even split makes it dwarf the summary column and
		 * leaves a block of empty space beneath the text. Giving the
		 * gallery a narrower share keeps the image from ballooning and
		 * narrows the height gap between the two columns.
		 */
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--space-3xl);
	}
}

/*
 * div.product doesn't just wrap the gallery + summary — WooCommerce also
 * fires the tabs, upsells, and related-products sections inside it (via
 * woocommerce_after_single_product_summary). Left alone, the 2-column
 * grid above swallows them as a second row and splits tabs/related
 * side by side instead of letting them run full width underneath.
 */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .up-sells,
.single-product div.product > .related.products {
	grid-column: 1 / -1;
}

/* Taken out of the grid flow — otherwise this unstyled sibling span (WC's
   sale badge, output before the gallery div) becomes an extra grid item
   and pushes the image into the second column instead of the first. */
.single-product .onsale {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3xs) var(--space-sm);
	border-radius: var(--radius-pill);
	background-color: var(--color-gold);
	color: var(--color-black);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/*
 * Capped and centered within its column: the product photo is a tall
 * portrait mockup, so letting it stretch to the full (already narrowed)
 * gallery column width on wide screens still renders it oversized.
 */
.woocommerce-product-gallery {
	max-width: 440px;
	margin-inline: auto;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

@media (min-width: 960px) {
	.woocommerce-product-gallery {
		margin-inline: 0;
	}
}

.woocommerce-product-gallery img {
	border-radius: var(--radius-lg);
}

.summary.entry-summary .product_title {
	margin-bottom: var(--space-sm);
}

.summary.entry-summary .price {
	display: block;
	margin-bottom: var(--space-md);
	font-size: var(--text-lg);
	font-weight: 600;
}

.summary.entry-summary .price del {
	margin-right: var(--space-2xs);
	color: rgba(0, 0, 0, 0.45);
	font-weight: 400;
}

.summary.entry-summary .price ins {
	text-decoration: none;
}

.product-meta {
	margin-bottom: var(--space-lg);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-grey-light);
	border-bottom: 1px solid var(--color-grey-light);
}

.product-meta__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	margin: 0 0 var(--space-md);
}

.product-meta__spec dt {
	margin-bottom: 2px;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(0, 0, 0, 0.5);
}

.product-meta__spec dd {
	margin: 0;
	font-weight: 600;
}

.product-meta__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.woocommerce-product-details__short-description {
	margin-bottom: var(--space-lg);
	line-height: 1.6;
}

form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

form.cart .qty {
	width: 64px;
	padding: var(--space-2xs) var(--space-sm);
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-sm);
}

.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--radius-pill);
	border: 2px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus-visible {
	background-color: transparent;
	color: var(--color-black);
}

.delivery-estimate {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	background-color: var(--color-grey-light);
}

.delivery-estimate svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--color-black);
}

.delivery-estimate__text strong {
	display: block;
	font-size: var(--text-sm);
}

.delivery-estimate__text p {
	margin: var(--space-3xs) 0 0;
	font-size: var(--text-xs);
	color: rgba(0, 0, 0, 0.6);
}

/*
 * Made-to-order window: this is the case that needs the customer's
 * attention (a much longer wait than "in stock" implies), so it gets the
 * brand's gold accent instead of the neutral grey — not an error state,
 * just deliberately harder to miss than the fast-shipping case.
 */
.delivery-estimate--extended {
	background-color: rgba(255, 217, 56, 0.2);
	border: 1px solid var(--color-gold);
}

.product-trust-bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) 0 0;
	list-style: none;
	border-top: 1px solid var(--color-grey-light);
}

.product-trust-bar li {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: rgba(0, 0, 0, 0.75);
}

.product-trust-bar svg {
	flex-shrink: 0;
	color: var(--color-black);
}

.woocommerce-tabs {
	margin-top: var(--space-xl);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-grey-light);
	list-style: none;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--space-sm) 0;
	font-weight: 600;
}

.woocommerce-tabs ul.tabs li.active a {
	border-bottom: 2px solid var(--color-black);
}

/* The tab label already reads "Additional information" — repeating it as
   an <h2> inside the panel (WooCommerce's default markup) is redundant. */
.woocommerce-Tabs-panel > h2 {
	display: none;
}

.woocommerce-product-attributes {
	width: 100%;
	max-width: 480px;
	border-collapse: collapse;
}

.woocommerce-product-attributes-item {
	border-bottom: 1px solid var(--color-grey-light);
}

.woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item__value {
	padding: var(--space-sm) 0;
	text-align: left;
	font-weight: 400;
}

.woocommerce-product-attributes-item__label {
	width: 40%;
	color: rgba(0, 0, 0, 0.5);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce-product-attributes-item__value p {
	margin: 0;
	font-weight: 600;
}

.related.products {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-grey-light);
}

.related.products > h2 {
	margin-bottom: var(--space-lg);
}