/* =========================================================
   KEYPLO — WooCommerce token bridge
   Only maps WooCommerce's default elements (buttons, inputs,
   notices, prices, badges) to the design tokens so nothing
   looks broken on a dark background. No layout redesign here:
   product page, cart and checkout are redesigned in later steps.
   ========================================================= */

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	min-height: var(--kp-control-h);
	padding: 0 var(--kp-space-5);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--kp-surface-2);
	border: 1px solid var(--kp-border-strong);
	border-radius: var(--kp-radius-sm);
	color: var(--kp-text);
	font-weight: var(--kp-weight-bold);
	font-size: var(--kp-text-sm);
	line-height: 1;
	transition: background-color var(--kp-dur) var(--kp-ease), box-shadow var(--kp-dur) var(--kp-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--kp-surface-3); color: var(--kp-text); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
	background: var(--kp-orange);
	border-color: var(--kp-orange);
	color: var(--kp-on-orange);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--kp-orange-hover);
	border-color: var(--kp-orange-hover);
	color: var(--kp-on-orange);
	box-shadow: var(--kp-glow-sm);
}
.woocommerce .button:focus-visible { outline: none; box-shadow: var(--kp-focus-ring); }
.woocommerce .button.disabled,
.woocommerce .button:disabled { opacity: 0.5; }

/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.woocommerce-page .input-text,
.woocommerce .select2-container .select2-selection--single {
	min-height: var(--kp-control-h);
	background: var(--kp-surface-2);
	border: 1px solid var(--kp-border-strong);
	border-radius: var(--kp-radius-sm);
	color: var(--kp-text);
	font-size: var(--kp-text-base);
	padding: 0 var(--kp-space-3);
}
.woocommerce form .form-row textarea { padding: var(--kp-space-3); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
	outline: none; border-color: var(--kp-orange); box-shadow: var(--kp-focus-ring);
}
.woocommerce form .form-row label { color: var(--kp-text); font-weight: var(--kp-weight-semi); font-size: var(--kp-text-sm); }
.woocommerce form .form-row .required { color: var(--kp-error); }
.woocommerce .select2-container .select2-selection__rendered { color: var(--kp-text); line-height: var(--kp-control-h); }
.select2-dropdown { background: var(--kp-surface-2); border-color: var(--kp-border-strong); color: var(--kp-text); }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .wc-block-components-notice-banner {
	background: var(--kp-surface);
	color: var(--kp-text-2);
	border: 1px solid var(--kp-border);
	border-top: 3px solid var(--kp-info);
	border-radius: var(--kp-radius-sm);
}
.woocommerce-message { border-top-color: var(--kp-success); }
.woocommerce-error   { border-top-color: var(--kp-error); }
.woocommerce-message::before { color: var(--kp-success); }
.woocommerce-info::before    { color: var(--kp-info); }
.woocommerce-error::before   { color: var(--kp-error); }

/* Prices + sale badge */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--kp-orange);
	font-family: var(--kp-font-display);
	font-weight: var(--kp-weight-heavy);
}
.woocommerce .price del { color: var(--kp-text-muted); font-weight: var(--kp-weight-medium); opacity: 1; }
.woocommerce .price ins { text-decoration: none; }
.woocommerce span.onsale {
	min-height: 0; min-width: 0; line-height: 1;
	padding: 6px 10px;
	background: var(--kp-orange); color: var(--kp-on-orange);
	border-radius: var(--kp-radius-pill);
	font-size: var(--kp-text-xs); font-weight: var(--kp-weight-bold);
}

/* Tables (cart, orders, account) */
.woocommerce table.shop_table {
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius-md);
	background: var(--kp-surface);
	color: var(--kp-text-2);
}
.woocommerce table.shop_table th { color: var(--kp-text); }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--kp-border); }

/* Text colors inside Woo content */
.woocommerce div.product .product_title { color: var(--kp-text); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--kp-text); }
.woocommerce .woocommerce-breadcrumb { color: var(--kp-text-muted); font-size: var(--kp-text-sm); }
.woocommerce .woocommerce-breadcrumb a { color: var(--kp-text-2); }
.woocommerce .star-rating span::before { color: var(--kp-orange); }

/* Tabs / account nav: dark neutral backgrounds only */
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--kp-surface-2); border-color: var(--kp-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--kp-surface); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--kp-text-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--kp-text); }

/* WooCommerce Blocks (cart/checkout blocks): inherit tokens */
.wc-block-components-button:not(.is-link) {
	background: var(--kp-orange); color: var(--kp-on-orange);
	border-radius: var(--kp-radius-sm); font-weight: var(--kp-weight-bold);
}
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	background: var(--kp-surface-2) !important;
	border-color: var(--kp-border-strong) !important;
	color: var(--kp-text) !important;
	border-radius: var(--kp-radius-sm) !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label { color: var(--kp-text-muted) !important; }