/*
 * Single product page. Loaded on is_product().
 */

/* Breadcrumb: shop.css isn't enqueued on single product, so it gets its air here. */
.single-product .woocommerce-breadcrumb {
	padding-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
	margin: 0;
	font-size: 0.88rem; color: var(--ud-muted);
}
.single-product .woocommerce-breadcrumb a { color: var(--ud-muted); }
.single-product .woocommerce-breadcrumb a:hover { color: var(--ud-accent-text); }

/* The product node itself is the grid: gallery | summary, with tabs/related spanning both.
   Grid ignores Woo's default floats, so .related can never ride up over the gallery. */
.single-product div.product {
	padding-block: var(--ud-section-y);
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .entry-summary { width: 100% !important; float: none !important; }
.single-product div.product > :where(.woocommerce-tabs, .related.products, .upsells, .woocommerce-Reviews) { grid-column: 1 / -1; }

/* Gotcha 4: sticky gallery offset only for the 2-col desktop layout; reset on mobile or the
   image shifts down over the title. */
@media (min-width: 861px) {
	.single-product div.product .woocommerce-product-gallery { position: sticky; top: calc(var(--ud-header-h) + 20px); }
}
@media (max-width: 860px) {
	.single-product div.product { grid-template-columns: 1fr; }
	.single-product div.product .woocommerce-product-gallery { position: static; top: auto; }
}

.single-product .product_title { font-size: var(--ud-fs-h2); margin-bottom: 0.5rem; }
.single-product .woocommerce-product-gallery { margin: 0; }
.single-product .woocommerce-product-gallery img { border-radius: var(--ud-radius); }

/* Outgun Woo's default .woocommerce div.product p.price colour. */
.single-product div.product p.price, .single-product div.product span.price { color: var(--ud-text); font-size: 1.5rem; font-weight: 700; font-family: var(--ud-font-head); }
.single-product div.product p.price ins { color: var(--ud-accent-text); text-decoration: none; }
.single-product div.product p.price del { opacity: 0.55; font-weight: 400; font-size: 1.1rem; }

.single-product .woocommerce-product-details__short-description { color: var(--ud-muted); line-height: 1.7; }

.single-product .single_add_to_cart_button, .single-product .button[type="submit"] {
	background: var(--ud-accent) !important; color: var(--ud-accent-ink) !important;
	font-family: var(--ud-font-head); font-weight: 600; padding: 0.85em 1.8em !important; border-radius: var(--ud-radius-sm) !important; border: none !important;
}
.single-product .quantity input { border: 1px solid var(--ud-line); border-radius: var(--ud-radius-sm); padding: 0.6em; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 3rem; }
.woocommerce-tabs ul.tabs { border: none; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li { background: var(--ud-surface-2); border: 1px solid var(--ud-line); border-radius: 999px; margin: 0; }
.woocommerce-tabs ul.tabs li.active { background: var(--ud-ink); border-color: var(--ud-ink); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ud-on-dark); }
.woocommerce-tabs ul.tabs li a { color: var(--ud-text); }

/* Related products header */
.related.products > h2, .upsells > h2 { font-size: var(--ud-fs-h3); margin-bottom: 1.5rem; }