/* =============================================================
   WooCommerce Single Product Page  —  Layer 4 of 4
   Depends on: tokens.css, base.css, layout.css
   Enqueued on: is_product() only, via inc/woocommerce/product.php

   Breakpoints (tokens.css constants):
     Mobile  ≤640px   (--bp-mobile / Tailwind sm)
   ============================================================= */


/* ─── 1. Gallery: image styling + remove hover artifacts ─────────── */

/* Rounded card treatment on the main image wrapper */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--card-shadow);
}

/* Space below image before the title — only present when gallery exists */
.woocommerce-product-gallery {
	margin-bottom: var(--space-6);
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Zoom is disabled via PHP (remove_theme_support in product.php),
 * but the trigger element may still render if JS fires before the
 * theme support check. Belt-and-suspenders hide.
 */
.woocommerce-product-gallery__trigger {
	display: none;
}

/*
 * base.css animates an underline on all <a> elements.
 * Gallery images are wrapped in <a> tags — reset the animation.
 */
.woocommerce-product-gallery a,
.woocommerce-product-gallery a:hover,
.woocommerce-product-gallery a:focus {
	background-image: none;
	background-size: 0;
}


/* ─── 2. Single-column product layout ───────────────────────────── */

/*
 * WooCommerce's woocommerce-layout.css floats .images left (48%) and
 * .summary right (48%) whenever .woocommerce is on the body. Override to
 * full-width stacked layout: gallery above, summary below.
 */
body.woocommerce div.product div.images,
body.woocommerce div.product div.summary,
body.woocommerce-page div.product div.images,
body.woocommerce-page div.product div.summary {
	float: none !important;
	width: 100% !important;
	clear: both;
}


/* ─── 3. Price styling ───────────────────────────────────────────── */

/*
 * Minimal selectors — this file only loads on is_product() pages so there's
 * no bleed risk. .entry-summary is the direct parent and always present.
 */
.entry-summary p.price,
.entry-summary span.price {
	color: var(--color-primary) !important;
	font-size: var(--title-subsection) !important;
	font-weight: var(--weight-heading) !important;
	margin-bottom: var(--space-4);
}

/* Regular price (struck through) on sale products */
.entry-summary p.price del,
.entry-summary span.price del {
	color: var(--color-text-muted) !important;
	opacity: 1 !important;
	font-weight: var(--weight-body) !important;
	font-size: var(--text-base) !important;
	text-decoration: line-through;
}

/* Sale price */
.entry-summary p.price ins,
.entry-summary span.price ins {
	color: var(--color-primary) !important;
	font-weight: var(--weight-heading) !important;
	font-size: var(--title-subsection) !important;
	text-decoration: none !important;
}


/* ─── 4. Add to cart button ──────────────────────────────────────── */

/*
 * Matches the modal primary button (.pmax-modal__btn--primary in modals.css):
 * gold fill, 32px pill radius, 15px/700 type, flat (no shadow, no hover lift).
 * Astra's specificity: .woocommerce-js div.product form.cart .button.single_add_to_cart_button
 * We beat it with body. prefix + matching both .button and .single_add_to_cart_button.
 */
body.single-product div.product form.cart .button.single_add_to_cart_button {
	margin-left: 0 !important;
	margin-bottom: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border-radius: 32px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	border: none;
	cursor: pointer;
	text-decoration: none;
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
	box-shadow: none;
	transition: background 0.15s;
}

body.single-product div.product form.cart .button.single_add_to_cart_button:hover,
body.single-product div.product form.cart .button.single_add_to_cart_button:focus {
	background: var(--color-accent-10) !important;
	background-color: var(--color-accent-10) !important;
	color: var(--button-primary-text) !important;
	background-image: none !important;
	transform: none !important;
	box-shadow: none !important;
}

body.single-product div.product form.cart .button.single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

/* Disabled state — shown when user already purchased */
body.single-product div.product .button.single_add_to_cart_button:disabled,
body.single-product div.product .button.single_add_to_cart_button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hide quantity input — virtual product is always qty 1 */
body.single-product div.product form.cart .quantity {
	display: none;
}

@media (max-width: 640px) {
	body.single-product div.product form.cart .button.single_add_to_cart_button {
		width: 100%;
	}
}


/* ─── 5. Description tabs — hide nav when only one tab ──────────── */

/*
 * When only one tab exists (e.g. Description only), the tab chrome is
 * redundant. CSS :has() hides the nav while leaving the panel content visible.
 * Browser support: Chrome 105+, Firefox 121+, Safari 15.4+.
 */
.woocommerce-tabs .tabs:has(> li:only-child) {
	display: none;
}

.woocommerce-tabs .tabs:has(> li:only-child) + .woocommerce-Tabs-panel {
	border-top: none;
	padding-top: 0;
}


/* ─── 6. "Already have access" notice ───────────────────────────── */

/*
 * wc_print_notice( ..., 'notice' ) renders as .woocommerce-info.
 * woocommerce.css is only enqueued on is_product() so this scoping is safe.
 */
.woocommerce-info {
	background-color: var(--color-primary-2);
	border-top-color: var(--color-primary);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	color: var(--color-text);
	padding: var(--space-4) var(--space-6);
	margin-bottom: var(--space-4);
	box-shadow: var(--card-shadow);
}

/* Remove WooCommerce's info icon — it looks out of place in this context */
.woocommerce-info::before {
	display: none;
}

.woocommerce-info strong {
	color: var(--color-primary);
}


/* ─── 7. General spacing ─────────────────────────────────────────── */

/* Astra sets #primary { margin: 4em 0 } globally. Remove the top margin on
 * mobile — a social share widget sits above it and the gap looks wrong. */
@media (max-width: 768px) {
	body.single-product #primary {
		margin-top: 0;
	}
}

.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce-js div.product .woocommerce-tabs {
	padding-top: 0 !important;
	margin-bottom: var(--space-12);
}


/* ─── 8. Purchase zone ───────────────────────────────────────────── */

/*
 * .pmax-purchase-zone is a wrapper div in the template override
 * (woocommerce/content-single-product.php) that groups price and CTA.
 * Flex row on desktop: price left, button right, vertically centered.
 */
.pmax-purchase-zone {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--color-border-neutral);
	border-bottom: 1px solid var(--color-border-neutral);
	margin-bottom: var(--space-6);
}

/* Price: no bottom margin (gap handles spacing), don't shrink */
.pmax-purchase-zone p.price,
.pmax-purchase-zone span.price {
	margin-bottom: 0 !important;
	flex-shrink: 0;
}

/*
 * Cart form: collapse Astra's clearfix (zoom:1 + ::before/::after display:table)
 * that makes the form a full-width block, causing the hover/hit area to be much
 * larger than the visible button. display:flex sizes the form to its content.
 */
.pmax-purchase-zone form.cart {
	margin: 0;
	display: flex;
	align-items: center;
}

.pmax-purchase-zone form.cart::before,
.pmax-purchase-zone form.cart::after {
	content: none !important;
}

/* Astra may wrap the button in .ast-woo-single-cart-button-wrap with flex + full width */
.pmax-purchase-zone .ast-woo-single-cart-button-wrap {
	width: auto;
}

/* Access notice: sits below the purchase zone as a full-width block */
.pmax-access-notice {
	margin-top: var(--space-3);
	margin-bottom: var(--space-4);
}

/* Mobile: keep price + button on the same row, allow wrapping if very narrow */
@media (max-width: 640px) {
	.pmax-purchase-zone {
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	body.single-product div.product form.cart .button.single_add_to_cart_button {
		width: auto;
	}
}

/* ─── 9. Short description ───────────────────────────────────────── */

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-top: var(--space-2);
	margin-bottom: var(--space-6);
	font-size: var(--text-base);
	color: var(--color-text);
	line-height: var(--lineheight-body);
}