/* ===========================================================================
   Yakuza — WooCommerce cart / checkout / account styling
   The Cart & Checkout pages use WooCommerce blocks. They render inside the
   theme's narrow article container, so the main fixes are: give them room,
   match the brand, and stay clean on mobile (mobile-first).
   =========================================================================== */

/* --- Give the block cart/checkout/account room (they are alignwide) -------- */
.woocommerce-cart .yk-content,
.woocommerce-checkout .yk-content,
.woocommerce-account .yk-content {
	max-width: 1140px;
}
/* The order-confirmation / thank-you page reads better a touch narrower. */
.woocommerce-order-received .yk-content {
	max-width: 880px;
}

/* Let alignwide/alignfull blocks actually use the width on these pages. */
.woocommerce-cart .yk-content .alignwide,
.woocommerce-checkout .yk-content .alignwide {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Never let a block table cause a horizontal scrollbar on small screens. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: 100%;
	overflow-x: hidden;
}

/* --- Brand the primary buttons (Proceed to checkout / Place order) --------- */
.wc-block-cart__submit-button,
.wc-block-components-button.contained {
	background: var(--brand) !important;
	border-radius: 999px !important;
	font-weight: 600;
	min-height: 48px;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover {
	background: #0b756e !important;
}

/* Secondary "apply coupon" / outline buttons: brand outline. */
.wc-block-components-button.outlined {
	border-radius: 999px !important;
}

/* --- Inputs / selects to match the theme ---------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-quantity-selector,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
	border-radius: 10px;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 1px var(--brand);
}

/* --- Totals / order summary card ------------------------------------------ */
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price {
	font-weight: 700;
}
.wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	border-radius: 16px;
}

/* The booking deposit "Pick up or ship" note we inject into the block cart. */
.yevb-cart-fulfilment {
	max-width: 100%;
}

/* --- Mobile-first: comfortable spacing, stacked layout -------------------- */
@media (max-width: 781px) {
	.woocommerce-cart .yk-content,
	.woocommerce-checkout .yk-content,
	.woocommerce-account .yk-content {
		padding-left: 4px;
		padding-right: 4px;
	}
	/* WooCommerce blocks already switch to a single column here; just make sure
	   buttons are full-width and tappable. */
	.wc-block-cart__submit-button,
	.wc-block-components-button.contained {
		width: 100%;
	}
	/* My Account tabs scroll horizontally instead of wrapping awkwardly. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}
}