/*!
 * WooKit — Product Price + Add to Cart (standalone).
 * Styled wrapper around WC's native single_add_to_cart form so it adopts the
 * theme's accent/surface/radius via --wookit-* tokens, and matches the look
 * of WooKit's other product widgets.
 */

.wookit-product-price-cart {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: var( --wookit-font, inherit ) !important;
	color: var( --wookit-body, inherit ) !important;
	container-type: inline-size;
	container-name: wookit-price-cart;
}

.wookit-product-price-cart *,
.wookit-product-price-cart *::before,
.wookit-product-price-cart *::after { box-sizing: border-box !important; }

/* ── Price block ───────────────────────────────────────────────────── */
.wookit-product-price-cart__price {
	font-size: clamp( 1.25rem, 1.1rem + 0.6cqi, 1.625rem ) !important;
	font-weight: 700 !important;
	/* Accent: the price is the focal point of the buy box. When a variation is
	   selected, JS swaps the range out for that variation's exact price_html. */
	color: var( --wookit-accent, #6366f1 ) !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em !important;
	line-height: 1.1 !important;
}

/* WC's own variation price/range markup inherits the accent too (it's injected
   into the same block on selection via .price_html). */
.wookit-product-price-cart__price .woocommerce-Price-amount,
.wookit-product-price-cart__price .price {
	color: inherit !important;
}

/* "De la" prefix before the minimum price on variable products. */
.wookit-product-price-cart__price .wookit-price-from {
	font-size: 0.6em !important;
	font-weight: 500 !important;
	color: var( --wookit-muted, #6b7280 ) !important;
	margin-right: 0.3em !important;
	letter-spacing: normal !important;
}

.wookit-product-price-cart__price del {
	font-weight: 400 !important;
	font-size: 0.78em !important;
	color: var( --wookit-muted, #9ca3af ) !important;
	margin-right: 0.5rem !important;
	text-decoration: line-through !important;
}

.wookit-product-price-cart__price ins {
	text-decoration: none !important;
	color: var( --wookit-accent, currentColor ) !important;
}

.wookit-product-price-cart__price .woocommerce-Price-amount {
	white-space: nowrap !important;
}

/* ── Form (WC's native single_add_to_cart output) ──────────────────── */
.wookit-product-price-cart__form .variations {
	border: 0 !important;
	margin: 0 0 14px !important;
}

.wookit-product-price-cart__form .variations th,
.wookit-product-price-cart__form .variations td {
	padding: 0.375rem 0 !important;
	vertical-align: middle !important;
}

.wookit-product-price-cart__form .variations label {
	font-weight: 600 !important;
	color: var( --wookit-text, inherit ) !important;
	font-size: 0.9rem !important;
}

.wookit-product-price-cart__form .variations select {
	border: 1px solid var( --wookit-border-input, #d1d5db ) !important;
	border-radius: var( --wookit-radius-sm, 4px ) !important;
	padding: 0.5rem 0.75rem !important;
	background: var( --wookit-surface, #fff ) !important;
	color: var( --wookit-text, inherit ) !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
}

.wookit-product-price-cart__form .reset_variations {
	color: var( --wookit-muted, #6b7280 ) !important;
	font-size: 0.8125rem !important;
}

/* Variation single price: hidden. When a variation is selected we lift its
   price_html up into .wookit-product-price-cart__price (see inline JS), so this
   native duplicate below the form is redundant — keep it out of the layout. */
.wookit-product-price-cart__form .single_variation_wrap .woocommerce-variation-price {
	display: none !important;
}

.wookit-product-price-cart__form .woocommerce-variation-availability {
	margin-bottom: 10px !important;
	font-size: 0.875rem !important;
	color: var( --wookit-muted, #6b7280 ) !important;
}

.wookit-product-price-cart__form .woocommerce-variation-description {
	margin-bottom: 12px !important;
	font-size: 0.9rem !important;
	line-height: 1.5 !important;
	color: var( --wookit-body, inherit ) !important;
}

/* ── "No products matched your selection" notice ────────────────────────
   WC prints <p class="wc-no-matching-variations woocommerce-info"> when the
   chosen attribute combination has no purchasable variation. Override WC's /
   the theme's default info-banner chrome (full-width blue bar + check icon)
   with a soft, plugin-styled inline alert that reads as part of the buy box. */
.wookit-product-price-cart__form .wc-no-matching-variations,
.wookit-product-price-cart__form .single_variation_wrap .woocommerce-info {
	display: flex !important;
	align-items: flex-start !important;
	gap: 9px !important;
	margin: 0 0 12px !important;
	padding: 11px 14px !important;
	background: var( --wookit-warning-soft, #fef3c7 ) !important;
	color: var( --wookit-warning-text, #b45309 ) !important;
	border: 0 !important;
	border-left: 3px solid var( --wookit-warning, #f59e0b ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	list-style: none !important;
}

/* Drop WC's / theme's default ::before icon (the blue checkbox in the shot)
   and supply our own warning glyph. */
.wookit-product-price-cart__form .wc-no-matching-variations::before,
.wookit-product-price-cart__form .single_variation_wrap .woocommerce-info::before {
	content: "" !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	background: var( --wookit-warning-text, #b45309 ) !important;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E" ) center / contain no-repeat !important;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E" ) center / contain no-repeat !important;
	border-radius: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
}

/* Cart row (qty + ATC) — a clear, deliberate gap separates the quantity
   stepper from the CTA so they never read as one fused control. */
.wookit-product-price-cart__form .cart {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0 !important;
}

/* For VARIABLE products the qty + ATC live in .woocommerce-variation-add-to-cart
   (inside .single_variation_wrap), not directly in .cart — so the gap above
   doesn't reach them. Apply the same clear gap here. */
.wookit-product-price-cart__form .woocommerce-variation-add-to-cart {
	display: flex !important;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

@container wookit-price-cart ( max-width: 280px ) {
	/* Very narrow buy box: stack qty above the CTA, keep the gap vertical. */
	.wookit-product-price-cart__form .cart { gap: 12px; }
	.wookit-product-price-cart__form .quantity { width: 100%; }
	.wookit-product-price-cart__form .quantity .qty { width: 100%; }
}

.wookit-product-price-cart__form .quantity {
	display: inline-flex;
	margin: 0 !important;
}

.wookit-product-price-cart__form .quantity .qty {
	width: 72px;
	padding: 0.625rem 0.5rem !important;
	border: 1px solid var( --wookit-border-input, #d1d5db ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	background: var( --wookit-surface, #fff ) !important;
	color: var( --wookit-text, inherit ) !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-variant-numeric: tabular-nums;
	text-align: center !important;
	min-height: 44px;
}

.wookit-product-price-cart__form .single_add_to_cart_button,
.wookit-product-price-cart__form .single_add_to_cart_button:hover,
.wookit-product-price-cart__form .single_add_to_cart_button:focus,
.wookit-product-price-cart__form .single_add_to_cart_button:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 0.75rem 1.5rem !important;
	min-height: 44px !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var( --wookit-accent-fg, #fff ) !important;
	background: var( --wookit-accent, #2271b1 ) !important;
	border: 0 !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color 150ms ease, transform 150ms ease !important;
	flex: 1 1 auto;
}

.wookit-product-price-cart__form .single_add_to_cart_button:hover {
	background: var( --wookit-accent-hover, var( --wookit-accent, #2271b1 ) ) !important;
}

.wookit-product-price-cart__form .single_add_to_cart_button:active {
	transform: translateY( 1px ) !important;
}

.wookit-product-price-cart__form .single_add_to_cart_button:disabled,
.wookit-product-price-cart__form .single_add_to_cart_button.disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
}

/* External / "Buy product" CTA reuses the same button styling */
.wookit-product-price-cart__form .button.product_type_external {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem !important;
	min-height: 44px;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: var( --wookit-accent-fg, #fff ) !important;
	background: var( --wookit-accent, #2271b1 ) !important;
	border: 0 !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	text-decoration: none !important;
}