/**
 * Single Product Styles
 *
 * Styles for the WooCommerce single product page (FSE block template).
 *
 * @package WPR\NPX
 */

/* ==========================================================================
   Column Layout (Figma: 1144px total, 556px each, 32px gap)
   ========================================================================== */

.npx-single-product__columns {
	gap: 32px !important;
	max-width: 1144px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.npx-single-product__columns>.wp-block-column {
	flex-basis: 556px !important;
	max-width: 556px !important;
	width: 100% !important;
}

/* Product Title — layout only (typography set via block attributes) */
h1.wp-block-post-title {
	margin: 0 0 var(--wp--preset--spacing--20) !important;
}

/* Product Price — layout only (typography set via block attributes) */
.wp-block-woocommerce-product-price .wc-block-components-product-price,
.wc-block-components-product-price {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.wc-block-components-product-price del {
	color: #6e6e73 !important;
	margin-right: var(--wp--preset--spacing--10) !important;
	font-size: 24px !important;
}

.wc-block-components-product-price ins {
	text-decoration: none !important;
}

/* ==========================================================================
   Key Specs
   ========================================================================== */

.npx-key-specs {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0;
	border: none;
}

.npx-key-specs__title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-l);
	font-weight: 500 !important;
	color: var(--wp--preset--color--black);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.npx-key-specs__list {
	list-style: disc;
	margin: 0;
	padding-left: 30px;
}

.npx-key-specs__item {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-l);
	color: #000000;
	font-weight: 400;
	margin-bottom: 4px;
	line-height: 1.4;
}

.npx-key-specs__item:last-child {
	margin-bottom: 0;
}

/* Product Description — ensure correct size (block attributes may be overridden by WC) */
.wp-block-post-excerpt__excerpt {
	font-size: 18px;
	line-height: 1.7;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* ==========================================================================
   Variable Product — Dropdown
   ========================================================================== */

.wp-block-add-to-cart-form,
.wc-block-add-to-cart-form,
form.variations_form {
	display: block !important;
	flex: 1 1 100% !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
	width: 100% !important;
	max-width: 100% !important;
}

form.variations_form table.variations {
	width: 100% !important;
	border-collapse: collapse !important;
	margin-bottom: var(--wp--preset--spacing--20) !important;
}

form.variations_form table.variations .label {
	display: none !important;
}

form.variations_form table.variations tbody,
form.variations_form table.variations tr,
form.variations_form table.variations .value {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

form.variations_form table.variations select {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 16px 44px 16px 20px !important;
	line-height: normal !important;
	height: auto !important;
	min-height: 52px !important;
	overflow: visible !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 16px !important;
	color: var(--wp--preset--color--black) !important;
	background-color: var(--wp--preset--color--white) !important;
	border: 1px solid #d2d2d7 !important;
	border-radius: 8px !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	cursor: pointer !important;
}

form.variations_form table.variations select:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1) !important;
}

/* ==========================================================================
   Variable Product — Dynamic Variation Price
   ========================================================================== */

.woocommerce-variation-price {
	margin-bottom: var(--wp--preset--spacing--30) !important;
	display: block !important;
}

.woocommerce-variation-price .price {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--black) !important;
	margin: 0 !important;
}

.woocommerce-variation-price .price del {
	font-size: 20px !important;
	font-weight: 400 !important;
	color: #a1a1a6 !important;
}

.woocommerce-variation-price .price ins {
	text-decoration: none !important;
	background: transparent !important;
}

/* Reset Variations Link */
.reset_variations {
	display: none !important;
}

.woocommerce-variation-availability {
	color: rgb(188, 6, 6);
	font-size: 16px;
	font-weight: 600;
}

/* ==========================================================================
   Add to Cart Form
   ========================================================================== */

.woocommerce-variation-add-to-cart.variations_button {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: 16px !important;
	align-items: center !important;
	margin: 0 !important;
}

/* Hidden inputs must not participate in grid */
.woocommerce-variation-add-to-cart input[type="hidden"] {
	display: none !important;
}

/* Quantity: row 1, spans full width but border hugs content */
.woocommerce-variation-add-to-cart .quantity {
	grid-row: 1 !important;
	grid-column: 1 / -1 !important;
	justify-self: start !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
	border: 1px solid #d2d2d7 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

/* Button: row 2, column 1 */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
	grid-row: 2 !important;
	grid-column: 1 !important;
}

/* COA link: row 2, column 2 */
.woocommerce-variation-add-to-cart .npx-coa-link {
	grid-row: 2 !important;
	grid-column: 2 !important;
}

.woocommerce-variation-add-to-cart .quantity .npx-quantity__button,
.woocommerce-variation-add-to-cart .quantity button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: #f5f5f7 !important;
	color: var(--wp--preset--color--black) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	line-height: 1 !important;
	font-family: var(--wp--preset--font-family--primary) !important;
}

.woocommerce-variation-add-to-cart .quantity .npx-quantity__button:hover,
.woocommerce-variation-add-to-cart .quantity button:hover {
	background: #e8e8ed !important;
}

.woocommerce-variation-add-to-cart .quantity input.qty,
.woocommerce-variation-add-to-cart .quantity input.npx-quantity__input {
	width: 56px !important;
	height: 48px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-left: 1px solid #d2d2d7 !important;
	border-right: 1px solid #d2d2d7 !important;
	background: var(--wp--preset--color--white, #fff) !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--black) !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	outline: none !important;
}

.woocommerce-variation-add-to-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-variation-add-to-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Add to Cart Button */
.woocommerce-variation-add-to-cart button.single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px 32px !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	background-color: var(--wp--preset--color--primary, #0071E3) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	border-radius: 50px !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
	white-space: nowrap !important;
}

.woocommerce-variation-add-to-cart button.single_add_to_cart_button:hover {
	filter: brightness(0.85) !important;
}

.woocommerce-variation-add-to-cart button.single_add_to_cart_button:active {
	transform: scale(0.98) !important;
}

.woocommerce-variation-add-to-cart button.single_add_to_cart_button:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* ==========================================================================
   COA Link
   ========================================================================== */

.npx-coa-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--black) !important;
	transition: opacity 0.2s ease !important;
	margin: 0 !important;
}

/* ==========================================================================
   Two-Step Variation Selector (Dose → Bundle)
   ========================================================================== */

/* Hide the original variations table when custom selector is active */
form.variations_form.npx-has-combined-variation table.variations {
	display: none !important;
}

/* Pre-hide multi-attribute tables instantly (prevents flash before JS runs) */
form.variations_form table.variations:has(tr + tr) {
	display: none !important;
}

/* Container */
.npx-variation-steps {
	margin-bottom: var(--wp--preset--spacing--40, 16px) !important;
	width: 100% !important;
}

/* Each step group (Dose / Bundle) */
.npx-variation-steps__group {
	margin-bottom: var(--wp--preset--spacing--20, 16px) !important;
}

.npx-variation-steps__group:last-child {
	margin-bottom: 0 !important;
}

/* Disabled step (Bundle before a dose is chosen) */
.npx-variation-steps__group--disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* Label */
.npx-variation-steps__label {
	display: block !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--black) !important;
	margin-bottom: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* Button row */
.npx-variation-steps__buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

/* Individual chip button */
.npx-variation-steps__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 20px !important;
	min-width: 64px !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--black) !important;
	background-color: var(--wp--preset--color--white) !important;
	border: 1.5px solid #d2d2d7 !important;
	border-radius: 50px !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
	white-space: nowrap !important;
}

.npx-variation-steps__btn:hover {
	border-color: var(--wp--preset--color--black) !important;
}

/* Active / selected state */
.npx-variation-steps__btn--active {
	background-color: var(--wp--preset--color--black) !important;
	border-color: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--white) !important;
}

.npx-variation-steps__btn--active:hover {
	border-color: var(--wp--preset--color--black) !important;
}

/* Disabled state (before dose is selected) */
.npx-variation-steps__btn--disabled {
	cursor: default !important;
	border-color: #e8e8ed !important;
	color: #a1a1a6 !important;
}

/* Unavailable combination (dose chosen but this bundle doesn't exist for it) */
.npx-variation-steps__btn--unavailable {
	cursor: not-allowed !important;
	border-color: #e8e8ed !important;
	color: #c7c7cc !important;
	text-decoration: line-through !important;
	background-color: #fafafa !important;
}

/* ==========================================================================
   SALE Badge (hide if not in Figma design)
   ========================================================================== */

.wc-block-components-product-sale-badge,
.npx-product__gallery .onsale,
.woocommerce-product-gallery__trigger,
.wc-block-woocommerce-product-image-gallery .wc-block-product-gallery-dialog-on-click {
	display: none !important;
}

/* ==========================================================================
   Product Meta / SKU (Styles managed via Block Editor)
   ========================================================================== */


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.npx-single-product__columns {
		flex-direction: column !important;
	}

	.npx-single-product__columns>.wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}