/**
 * HLX Performance Guard - product page (PDP) presentation layer.
 *
 * CSS only. No markup, template or PHP behaviour is changed, so this is fully
 * reversible by dequeuing one stylesheet.
 *
 * Colours are the site's own computed tokens, read from the live DOM 2026-07-27:
 *   gold #D9B168 / deep gold #C79C4E / ink #1A1A1A / body #444 / border #EAEAEA
 *
 * Every rule is scoped to body.single-product so nothing else can be affected.
 */

/* ==========================================================================
   1. ADD TO CART - the measured contrast failure
   White on #D9B168 measures 2.0:1 and fails WCAG AA badly. Keeping the brand
   gold but darkening the label takes it to 9.1:1.
   ========================================================================== */
body.single-product .single_add_to_cart_button,
body.single-product .single_add_to_cart_button.aux-black {
	background-color: #D9B168 !important;
	color: #1A1A1A !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 10px rgba(199, 156, 78, .28);
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

body.single-product .single_add_to_cart_button .aux-text {
	color: #1A1A1A !important;
	font-weight: 700 !important;
}

body.single-product .single_add_to_cart_button:hover:not(.disabled) {
	background-color: #C79C4E !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(199, 156, 78, .38);
}

/* The theme's hover overlay washes the label out - neutralise it. */
body.single-product .single_add_to_cart_button .aux-overlay {
	display: none !important;
}

/* Disabled state must not look like the primary action. */
body.single-product .single_add_to_cart_button.disabled {
	background-color: #EFE4CE !important;
	color: #8A8A8A !important;
	box-shadow: none;
}
body.single-product .single_add_to_cart_button.disabled .aux-text {
	color: #8A8A8A !important;
}

/* ==========================================================================
   2. PRICE - the range currently collapses into "$29.99$164.99"
   ========================================================================== */
body.single-product .summary p.price {
	font-size: 30px;
	font-weight: 700;
	color: #C79C4E;
	letter-spacing: -.5px;
	line-height: 1.2;
	margin-bottom: 6px;
	/* The theme sets this element to display:flex, which makes the bare " - "
	   text node an anonymous flex item and collapses the whitespace around it -
	   so "$29.99 - $164.99" renders as "$29.99-$164.99". word-spacing cannot fix
	   that inside a flex container; gap is the correct lever. */
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .3em;
}

body.single-product .summary p.price .amount {
	white-space: nowrap;
}

body.single-product .summary p.price del {
	opacity: .5;
	font-weight: 400;
	font-size: .7em;
}

body.single-product .summary p.price ins {
	text-decoration: none;
}

/* ==========================================================================
   3. STRENGTH SELECTOR - a 56px bare dropdown reads as an afterthought
   ========================================================================== */
body.single-product .auxshp-variations .auxshp-label label {
	font-size: 13px;
	font-weight: 700;
	color: #1A1A1A;
	text-transform: none;
	letter-spacing: 0;
}

body.single-product .variations .aux-dropdown,
body.single-product .variations select {
	width: 100%;
	max-width: 100%;
}

body.single-product .variations select {
	min-height: 56px;
	border: 1.5px solid #EAEAEA !important;
	border-radius: 10px !important;
	background-color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #1A1A1A !important;
	padding-inline: 16px !important;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}

body.single-product .variations select:hover,
body.single-product .variations select:focus {
	border-color: #D9B168 !important;
	box-shadow: 0 0 0 3px rgba(217, 177, 104, .16) !important;
	outline: none !important;
}

/* Make it visually obvious a choice is still required. */
body.single-product .woocommerce-variation-add-to-cart-disabled ~ * ,
body.single-product .variations_form.wc-variation-selection-needed .variations select {
	border-color: #D9B168 !important;
}

/* ==========================================================================
   4. QUANTITY - align it to the button height so the row reads as one control
   ========================================================================== */
body.single-product .summary .quantity,
body.single-product .summary .quantity .ui-spinner {
	border-radius: 10px !important;
	border-color: #EAEAEA !important;
}

body.single-product .summary .quantity input {
	font-weight: 700 !important;
	color: #1A1A1A !important;
}

/* ==========================================================================
   5. BULK PRICING - this is the AOV lever and it renders as a spec sheet.
   Restyled into something that reads as an offer, without touching markup.
   ========================================================================== */
body.single-product table.wdr_bulk_table_msg {
	width: 100%;
	border: 1px solid #EAEAEA;
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 18px 0;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

body.single-product table.wdr_bulk_table_msg th {
	background: #1A1A1A;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 12px 16px;
	text-align: left;
	border: 0;
}

body.single-product table.wdr_bulk_table_msg td {
	padding: 13px 16px;
	font-size: 14px;
	color: #1A1A1A;
	border: 0;
	border-top: 1px solid #F2F2F2;
	background: #fff;
}

body.single-product table.wdr_bulk_table_msg tr:nth-child(even) td {
	background: #FCF9F3;
}

/* The discount column is the payoff - make it read as a saving. */
body.single-product table.wdr_bulk_table_msg td:last-child {
	font-weight: 800;
	color: #2E7D52;
	text-align: right;
	white-space: nowrap;
}

body.single-product table.wdr_bulk_table_msg th:last-child {
	text-align: right;
}

/* ==========================================================================
   6. LAYOUT - close the dead space, and stop the gallery pushing price
   and add-to-cart below two folds on mobile.
   ========================================================================== */
body.single-product .summary.entry-summary > * + * {
	margin-top: 14px;
}

body.single-product .product_meta {
	font-size: 12.5px;
	color: #8A8A8A;
	padding-top: 14px;
	border-top: 1px solid #EAEAEA;
}

@media (max-width: 1023px) {
	/* Header chrome measured at 293px before any product content:
	     68px promo bar (16px text wrapping onto two lines)
	    150px logo band (the logo image renders at 212x130)
	     75px search bar
	   Nothing is removed - the logo, search and promo message all stay. They are
	   only sized sensibly, which recovers roughly 100px above the fold.
	   NOTE: the desktop header sections are already display:none at this width,
	   so they are deliberately not targeted here. */
	body.single-product header.aux-elementor-header .aux-header-elements-wrapper img {
		max-height: 52px !important;
		width: auto !important;
	}

	body.single-product header.aux-elementor-header .elementor-element-bb2c138,
	body.single-product header.aux-elementor-header .elementor-element-bb2c138 * {
		font-size: 12px !important;
		line-height: 1.35 !important;
	}

	/* Cap the gallery so price and the strength selector reach the first screen. */
	body.single-product .woocommerce-product-gallery .flex-viewport {
		max-height: 46vh;
	}
	body.single-product .woocommerce-product-gallery .flex-viewport img {
		max-height: 46vh;
		width: auto;
		margin-inline: auto;
		object-fit: contain;
	}

	body.single-product .woocommerce-product-gallery {
		margin-bottom: 14px;
	}

	body.single-product .flex-control-thumbs {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	body.single-product .flex-control-thumbs li {
		width: 58px;
		margin: 0;
	}

	body.single-product .summary p.price {
		font-size: 26px;
	}

	/* 7. STICKY ADD TO CART - thumb zone. Sticky (not fixed) so it can never
	   cover content or trap the viewport; it pins while the buy box is on
	   screen and releases naturally afterwards. */
	body.single-product .woocommerce-variation-add-to-cart,
	body.single-product form.cart:not(.variations_form) {
		position: sticky;
		bottom: 0;
		z-index: 20;
		background: #fff;
		padding: 12px 0 14px;
		margin-bottom: 0;
		box-shadow: 0 -6px 18px rgba(0, 0, 0, .07);
	}

	/* Lay the quantity stepper and the button out as one full-width row so the
	   primary action spans the thumb zone instead of sitting in a narrow box. */
	body.single-product .woocommerce-variation-add-to-cart,
	body.single-product form.cart:not(.variations_form) {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: nowrap;
	}

	/* The stepper was taking 131px of a 305px row, squeezing the primary action
	   into 164px. Cap it so the button gets the remaining width. */
	body.single-product .woocommerce-variation-add-to-cart .quantity,
	body.single-product form.cart:not(.variations_form) .quantity {
		flex: 0 0 auto;
		width: 104px !important;
		max-width: 104px !important;
		margin: 0 !important;
	}

	body.single-product .woocommerce-variation-add-to-cart .quantity .ui-spinner,
	body.single-product form.cart:not(.variations_form) .quantity .ui-spinner {
		width: 100% !important;
	}

	body.single-product .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		min-height: 54px;
		margin: 0 !important;
		/* the theme reserves 68px on the right for the bag icon, which throws the
		   label off centre once the button is full width */
		padding: 16px 20px !important;
		text-align: center;
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	/* The FunnelKit floating cart bubble is deliberately left at its default
	   position. It is fixed, so any offset simply moves which element it covers;
	   repositioning it moved the overlap onto the bulk pricing table, which is
	   worse. Worth revisiting as a product decision, not a CSS one. */
}

/* ==========================================================================
   8. Respect reduced-motion preferences.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	body.single-product .single_add_to_cart_button {
		transition: none;
	}
	body.single-product .single_add_to_cart_button:hover:not(.disabled) {
		transform: none;
	}
}