/**
 * WooCommerce style overrides — cleanAF design system.
 *
 * Blends WooCommerce defaults (notices, ordering, result count) with the
 * child theme's brand palette (gold, earth, rust, cream).
 *
 * Extracted from the inline <style id="keyboardafrica-wc-overrides"> block
 * previously printed on wp_head by keyboardafrica_woocommerce_styles().
 *
 * @package keyboardafrica_child
 */

/* -------------------------------------------------------------------------
 * Full-bleed hero
 * -------------------------------------------------------------------------
 * woocommerce.php wraps all WooCommerce content in a
 * `.max-w-7xl.mx-auto.px-4` container so that core templates (form-checkout,
 * cart-empty, dashboard) — which carry no width container of their own —
 * stay readable.
 *
 * The hero partial, however, is designed to span the full viewport like the
 * heroes on front-page.php and invest.php, and it already provides its own
 * inner `.max-w-7xl` for its text. Sitting inside the outer container it was
 * being constrained twice and rendered inset.
 *
 * This breaks the hero out of the container without altering the container
 * itself, so no other WooCommerce page layout is affected.
 *
 * `100vw` includes the scrollbar gutter, which would cause horizontal
 * overflow; `100dvw` is used where supported, with a scrollbar-safe
 * fallback for older browsers.
 * ------------------------------------------------------------------------- */
.woocommerce-page .hero-gradient,
.woocommerce .hero-gradient {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

@supports ( width: 100dvw ) {
	.woocommerce-page .hero-gradient,
	.woocommerce .hero-gradient {
		width: 100dvw;
		max-width: 100dvw;
		margin-inline: calc( 50% - 50dvw );
	}
}

/* Result count */
.woocommerce-result-count {
	display: none;
}
/* Ordering select */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	font-family: var(--font-body);
	background: white;
	border: 1px solid rgb(234, 224, 204);
	border-radius: 0.25rem;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: rgb(28, 21, 16);
	cursor: pointer;
	outline: none;
	appearance: auto;
}
.woocommerce .woocommerce-ordering select:focus,
.woocommerce-page .woocommerce-ordering select:focus {
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.1);
}
/* Notices */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	font-family: var(--font-body);
	border-radius: 0.25rem;
	font-size: 0.875rem;
}
.woocommerce-info {
	background: rgb(245, 239, 228);
	border-top-color: var(--color-gold);
	color: rgb(28, 21, 16);
}
.woocommerce-message {
	background: rgb(30, 58, 47);
	border-top-color: rgb(30, 58, 47);
	color: white;
}
.woocommerce-error {
	background: rgb(255, 240, 232);
	border-top-color: var(--color-rust);
	color: var(--color-rust);
}
.onsale {
	font-family: var(--font-display);
}
.woocommerce-loop-product__title {
	font-family: var(--font-display);
	color: rgb(28, 21, 16);
	font-weight: 700;
}
.price {
	font-family: var(--font-display);
	color: rgb(28, 21, 16);
}
.price ins {
	text-decoration: none;
}
.price del {
	color: rgb(28, 21, 16, 0.4);
}
.add_to_cart_button,
.product .add_to_cart_button {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	background: linear-gradient(135deg, rgb(200, 146, 42), rgb(232, 184, 75)) !important;
	color: rgb(26, 18, 8) !important;
	border: none !important;
	border-radius: 0.25rem !important;
	padding: 0.625rem 1.5rem !important;
	transition: 0.3s !important;
	text-transform: none !important;
	font-size: 0.875rem !important;
}
.add_to_cart_button:hover,
.product .add_to_cart_button:hover {
	background: linear-gradient(135deg, rgb(232, 184, 75), rgb(200, 146, 42)) !important;
	transform: translateY(-1px);
}
.add_to_cart_button.added {
	background: rgb(30, 58, 47) !important;
	color: white !important;
}
.star-rating {
	color: var(--color-gold);
}
.products {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.products .product {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: 100% !important;
	position: relative;
}
ul.products {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss,
.woocommerce-info .wc-forward,
.woocommerce-message .wc-forward {
	color: var(--color-gold);
}
/* Cart page */
.woocommerce .cart-item .quantity,
.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgb(234, 224, 204);
	border-radius: 0.25rem;
	overflow: hidden;
}
.woocommerce .cart-item .quantity input.qty,
.woocommerce-cart .qty {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: rgb(28, 21, 16);
	background: white;
	border: none;
	text-align: center;
	width: 3rem;
	padding: 0.5rem 0;
	-moz-appearance: textfield;
}
.woocommerce .cart-item .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .cart-item .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce-cart .remove,
.cart-item .remove {
	text-decoration: none;
}
.woocommerce-cart .cart_totals table.shop_table {
	border: none;
	background: transparent;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 0.75rem 0;
	border: none;
	font-size: 0.875rem;
}
.woocommerce-cart .cart_totals table.shop_table th {
	font-family: var(--font-body);
	font-weight: 400;
	color: rgb(28, 21, 16, 0.6);
}
.woocommerce-cart .cart_totals table.shop_table td {
	font-family: var(--font-display);
	font-weight: 700;
	color: rgb(28, 21, 16);
	text-align: right;
}
.woocommerce-cart .shipping-calculator-form {
	margin-top: 0.75rem;
}
.woocommerce-cart .shipping-calculator-form input,
.woocommerce-cart .shipping-calculator-form select {
	font-family: var(--font-body);
	background: white;
	border: 1px solid rgb(234, 224, 204);
	border-radius: 0.25rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: rgb(28, 21, 16);
}
.woocommerce-cart .shipping-calculator-button {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-gold);
	text-decoration: none;
	font-size: 0.875rem;
}
.woocommerce-cart .shipping-calculator-button:hover {
	color: var(--color-rust);
}
.woocommerce-cart .cross-sells {
	margin-top: 3rem;
}
.woocommerce-cart .cross-sells h2 {
	font-family: var(--font-display);
	font-weight: 800;
	color: rgb(28, 21, 16);
}
/* My Account */
.woocommerce-form-login input.woocommerce-Input--text,
.woocommerce-form-register input.woocommerce-Input--text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
	font-family: var(--font-body);
	background: rgb(245, 239, 228);
	border: 1px solid rgb(234, 224, 204);
	border-radius: 0.25rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: rgb(28, 21, 16);
	width: 100%;
}
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.1);
	outline: none;
}
.woocommerce-form-login label,
.woocommerce-form-register label {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: rgb(28, 21, 16);
}
.woocommerce-form-login .button,
.woocommerce-form-register .button {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.03em;
	background: linear-gradient(135deg, rgb(200, 146, 42), rgb(232, 184, 75));
	color: rgb(26, 18, 8);
	border: none;
	border-radius: 0.25rem;
	padding: 0.75rem 2rem;
	cursor: pointer;
	transition: 0.3s;
	text-transform: none;
	font-size: 0.875rem;
}
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover {
	background: linear-gradient(135deg, rgb(232, 184, 75), rgb(200, 146, 42));
	transform: translateY(-1px);
}

/* ===================================================================
   CHECKOUT: ≥48px inputs, gold focus, trust signals
   =================================================================== */

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection,
.woocommerce-checkout .select2-container .select2-selection--single {
	font-family: var(--font-body);
	background: var(--color-cream);
	border: 1px solid var(--color-sand);
	border-radius: 0.25rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: var(--color-earth);
	min-height: 48px;
	width: 100%;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-selection:focus {
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.1);
	outline: none;
}

.woocommerce-checkout #place_order {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.03em;
	background: linear-gradient(135deg, rgb(200, 146, 42), rgb(232, 184, 75));
	color: rgb(26, 18, 8);
	border: none;
	border-radius: 0.25rem;
	padding: 0.875rem 2rem;
	min-height: 56px;
	font-size: 1.125rem;
	cursor: pointer;
	transition: 0.3s;
	width: 100%;
	text-transform: none;
}

.woocommerce-checkout #place_order:hover {
	background: linear-gradient(135deg, rgb(232, 184, 75), rgb(200, 146, 42));
}

.checkout-trust {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 16px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.woocommerce-checkout input[type="radio"] {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-sand);
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
}

.woocommerce-checkout input[type="radio"]:checked {
	border-color: var(--color-gold);
	background: var(--color-gold);
}

.woocommerce-checkout input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: white;
	border-radius: 50%;
}

.woocommerce-checkout-payment {
	background: white;
	border: 1px solid var(--color-sand);
	border-radius: 0.5rem;
}

@media (max-width: 1023px) {
	.checkout-container {
		flex-direction: column !important;
	}
	.checkout-sidebar {
		position: static !important;
		width: 100% !important;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: rgb(28, 21, 16);
	text-decoration: none;
	padding: 0.5rem 0;
	display: block;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--color-gold);
	font-weight: 700;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--color-rust);
}
.woocommerce fieldset {
	border: 1px solid rgb(234, 224, 204);
	border-radius: 0.25rem;
	padding: 1rem;
}
.woocommerce fieldset legend {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.875rem;
}
/* Hide the core empty-cart notice; branded empty card is rendered instead.
   Element stays in the DOM so cart.js can swap in the empty state via AJAX. */
.woocommerce-cart .woocommerce .wc-empty-cart-message {
	display: none;
}