/**
 * WooCommerce standard form styling — Cruiser Accessories shared theme.
 *
 * The PDP now renders WooCommerce's REAL add-to-cart form (variations, qty,
 * button) instead of the old hand-rolled markup, so core features and plugins
 * work. This file restyles those standard selectors to match the theme's
 * existing design language (.btn / .product-quantity .input-group), keeping the
 * page visually faithful to the old custom UI.
 *
 * Brand accent comes from --ca-brand, set in each brand's custom.css
 * (rocktamers: #D42531, cruiser: #1946b9). Fallback is the RT red.
 */

:root {
	--ca-brand: #D42531;
}

/* ---- form layout: match the old .product-form row ---- */

/* .product-form is a flex row in the brand CSS (form.cart + Buy It Now). The
 * standard Woo simple.php also prints an availability/stock line before the
 * form; as a flex item it squeezed the row (qty wrapping over the button, Buy
 * It Now pushed away). Let the row wrap and give the stock line its own
 * full-width line above the buttons. Astra sometimes wraps the stock <p> in
 * .ast-stock-detail, so target both. */
.product-form {
	flex-wrap: wrap;
	align-items: center;
}

.product-form > .stock,
.product-form > .ast-stock-detail {
	width: 100%;
	flex: 0 0 100%;
	margin: 0 0 4px;
}

.product-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}

/* Variable products stack the variations table above the row. */
.product-form form.cart.variations_form {
	display: block;
}

.product-form form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Form controls don't inherit fonts by default — pin the theme's body face. */
.product-form form.cart select,
.product-form form.cart input,
.product-form form.cart .quantity::before,
.product-form form.cart .variations label {
	font-family: 'GeneralSans-Variable', sans-serif;
}

/* ---- quantity: reproduce the .input-group look (gray "Qty" prepend + input) ---- */
.product-form form.cart .quantity {
	display: flex;
	max-width: 145px;
}

.product-form form.cart .quantity::before {
	content: "Qty";
	background-color: #F1F1F2;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 500;
	height: 45px;
	line-height: 45px;
	width: 45px;
	box-sizing: border-box;
	text-align: center;
	border: solid 1px #e4e4e4;
	border-right: 0;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.product-form form.cart .quantity input.qty {
	border: 1px solid #E4E4E7;
	padding: 8px 12px;
	height: 45px;
	width: 70px;
	border-radius: 0;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

/* ---- add-to-cart button: reproduce the old outline .btn look ---- */
.product-form form.cart button.single_add_to_cart_button {
	font-family: "Fjalla One", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: 0.25em;
	padding: 14px 20px;
	background-color: transparent;
	color: #000;
	text-decoration: none;
	border: solid 1px #000;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	text-transform: uppercase;
	transition: all 0.3s;
	border-radius: 6px;
	height: 45px;
	box-sizing: border-box;
}

.product-form form.cart button.single_add_to_cart_button:hover {
	background-color: #000;
	color: #fff;
	border-color: #000;
}

.product-form form.cart button.single_add_to_cart_button.disabled,
.product-form form.cart button.single_add_to_cart_button:disabled {
	pointer-events: none;
	opacity: 0.6;
}

/* ---- variations (variable products): stacked label-over-select layout ---- */
/* Woo renders a two-column table (th.label | td.value). Flatten it so the
 * attribute label sits above a clean full-width select — reads better in the
 * narrow product-info column than the side-by-side table default. */
.product-form form.cart .variations,
.product-form form.cart .variations tbody,
.product-form form.cart .variations tr,
.product-form form.cart .variations th,
.product-form form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.product-form form.cart .variations {
	margin: 0 0 14px;
}

.product-form form.cart .variations tr {
	margin-bottom: 12px;
}

.product-form form.cart .variations label {
	display: block;
	font-weight: 600;
	font-size: 12px;
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #46505C;
}

.product-form form.cart .variations select {
	display: block;
	width: 100%;
	max-width: 340px;
	border: 1px solid #E4E4E7;
	border-radius: 6px;
	height: 45px;
	padding: 8px 36px 8px 12px;
	font-size: 15px;
	background-color: #fff;
	color: inherit;
}

.product-form form.cart .variations select:focus {
	outline: none;
	border-color: var(--ca-brand);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ca-brand) 25%, transparent);
}

/* "Clear options" link: small utility line under the select, no underline noise. */
.product-form form.cart .reset_variations {
	display: inline-block;
	font-size: 12px;
	margin-top: 6px;
	color: var(--ca-brand);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

/* Selected-variation price/stock line before the buttons. */
.product-form .woocommerce-variation.single_variation {
	margin-bottom: 12px;
}

.product-form .woocommerce-variation-price .price {
	font-size: 22px;
	font-weight: 700;
	color: var(--ca-brand);
}

.product-form .woocommerce-variation-availability .stock {
	font-size: 13px;
	margin: 2px 0 0;
}

/* Keep the qty + button row tidy on variable products. */
.product-form .woocommerce-variation-add-to-cart {
	margin-top: 2px;
}

/* ---- stock / messages inside the form area ---- */
.product-form .stock {
	font-size: 14px;
	margin: 0 0 8px;
}

.product-form .stock.out-of-stock {
	color: var(--ca-brand);
	font-weight: 600;
}