/* Checkout & cart styles (WWW-WP05 / WS-M50) */

.w24h-checkout .woocommerce-billing-fields h3,
.w24h-checkout .woocommerce-shipping-fields h3,
.w24h-checkout #order_review_heading {
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
}

.w24h-billing-type .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: clamp(0.65rem, 1vw, 1rem);
}

.w24h-billing-type .input-radio {
	position: absolute;
	opacity: 0;
}

.w24h-billing-type label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0.8rem 1rem;
	border: 2px solid var(--w24h-border, #e8e8e8);
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}

.w24h-billing-type input:checked + label,
.w24h-billing-type label:has(input:checked) {
	border-color: var(--w24h-red, #c41e3a);
	background: rgba(196, 30, 58, 0.04);
}

.w24h-company-field.w24h-hidden {
	display: none !important;
}

.w24h-mount-intent {
	margin-top: 1.25rem;
	padding: 1rem;
	border: 1px solid var(--w24h-border, #e8e8e8);
	border-radius: 8px;
	background: #fafafa;
}

.w24h-mount-intent h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.w24h-mount-hint {
	font-size: 0.9rem;
	color: var(--w24h-muted, #666);
	margin-bottom: 0.75rem;
}

.w24h-pickup-info {
	margin: 1rem 0;
	padding: 1rem;
	border-left: 4px solid var(--w24h-yellow, #f5c518);
	background: #fffbea;
}

.w24h-pickup-info__title {
	margin: 0 0 0.35rem;
}

.w24h-pickup-info__hint {
	font-size: 0.88rem;
	color: var(--w24h-muted, #666);
	margin: 0.5rem 0 0;
}

.woocommerce-cart .cart-layout,
.woocommerce-checkout .checkout-layout {
	max-width: none;
	margin: 0;
}

.woocommerce table.shop_table {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.65rem 0.5rem;
	border-bottom: 1px solid var(--w24h-border, #e8e8e8);
}

.woocommerce .cart-collaterals .cart_totals {
	background: #fff;
	border: 1px solid var(--w24h-border, #e8e8e8);
	border-radius: 8px;
	padding: 1.25rem;
	float: none;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-cart .cart-layout {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 3rem);
	align-items: start;
}

.woocommerce-cart .product-thumbnail img {
	width: clamp(3.5rem, 7vw, 6rem);
	height: auto;
	object-fit: contain;
}

.woocommerce-cart .quantity .qty {
	max-width: 5rem;
	padding: 0.5rem;
}

.woocommerce-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

@media (min-width: 60em) {
	.woocommerce-cart .cart-layout {
		grid-template-columns: minmax(0, 1.6fr) minmax(min(100%, 20rem), 0.8fr);
	}

	.woocommerce-cart .cart-collaterals {
		width: auto;
	}

	/* The active WooCommerce cart template emits these as siblings of the
	 * .woocommerce wrapper instead of inside the optional cart-layout hook. */
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(min(100%, 20rem), 0.8fr);
		gap: clamp(1.25rem, 2.5vw, 3rem);
		align-items: start;
	}

	.woocommerce-cart .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .wc-empty-cart-message,
	.woocommerce-cart .return-to-shop {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .return-to-shop {
		text-align: center;
	}

	.woocommerce-cart .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
	}
}

.woocommerce-checkout #payment {
	background: #fafafa;
	border-radius: 8px;
	padding: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--w24h-border, #e8e8e8);
}

.woocommerce-checkout .place-order {
	margin-top: 1rem;
}

.woocommerce-checkout .place-order .button {
	width: 100%;
	padding: 0.85rem 1.25rem;
	font-size: 1rem;
}

/* WooCommerce emits customer details, the review heading and the review as
 * sibling nodes. checkout.js groups the latter two so CSS can keep the order,
 * shipping, payment and final CTA together as one sidebar. */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	min-width: 0;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(0.75rem, 1.25vw, 1.25rem);
}

.woocommerce-checkout .form-row {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
}

.woocommerce-checkout .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-checkout .form-row input:not([type="radio"]):not([type="checkbox"]),
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

.w24h-order-sidebar {
	display: grid;
	gap: clamp(0.75rem, 1.25vw, 1.25rem);
	min-width: 0;
}

.w24h-order-sidebar #order_review_heading {
	margin: 0;
}

@media (min-width: 66em) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 22rem), 0.85fr);
		gap: clamp(1.25rem, 3vw, 3.5rem);
		align-items: start;
	}

	.woocommerce-checkout .w24h-order-sidebar {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.woocommerce-checkout .col2-set,
	.woocommerce-checkout .w24h-mount-intent,
	.woocommerce-checkout #customer_details + .w24h-mount-intent {
		grid-column: 1;
	}
}
