/**
 * WooCommerce Blocks primitives — shared by Cart and Checkout.
 *
 * Both pages are block pages (`wp:woocommerce/cart`, `wp:woocommerce/checkout`)
 * whose markup is React-rendered and owned by WooCommerce. The rule followed
 * throughout this file and the two that build on it:
 *
 *   restyle appearance, never fight mechanics.
 *
 * Colour, border, radius, font and weight are ours. Layout that WooCommerce's
 * own JS depends on — the floating-label transform on text inputs, the panel
 * open/close, the sidebar breakpoints, the quantity stepper — is left alone.
 * Anything that overrode those would break the moment WooCommerce updates the
 * block, and the visual gain would be small.
 *
 * Selectors are scoped to .wc-page so nothing here reaches the shop archive or
 * product page, which have their own designed treatments.
 */

/* ----------------------------------------------------------- typography --- */

.wc-page .wc-block-components-title,
.wc-page .wc-block-cart__totals-title,
.wc-page .wc-block-components-checkout-step__title {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-heading);
	text-transform: none;
}

.wc-page .wc-block-components-product-name {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	color: var(--color-product-name);
	text-decoration: none;
}

.wc-page .wc-block-components-product-name:hover {
	color: var(--color-accent);
}

.wc-page .wc-block-components-product-price,
.wc-page .wc-block-components-formatted-money-amount {
	font-family: var(--font-body);
	color: var(--color-product-price);
}

.wc-page .wc-block-components-product-metadata {
	font-size: 13px;
	line-height: 22px;
	color: var(--color-wc-muted);
}

/* -------------------------------------------------------------- buttons --- */

/*
 * The one place a block button differs from the theme button is that
 * WooCommerce sets its background through a CSS variable, so setting
 * background alone leaves the variable-driven fill showing on hover.
 */
.wc-page .wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wc-btn-height);
	padding: 10px 28px;
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--wc-btn-radius);
	font-family: var(--font-body);
	font-size: var(--button-text);
	font-weight: var(--button-text-weight);
	line-height: 22px;
	letter-spacing: var(--button-letter-spacing);
	text-transform: uppercase;
	color: var(--color-white);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wc-page .wc-block-components-button:not(.is-link):hover,
.wc-page .wc-block-components-button:not(.is-link):focus {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
	outline: none;
}

.wc-page .wc-block-components-button:not(.is-link):disabled,
.wc-page .wc-block-components-button:not(.is-link).is-disabled {
	background: var(--color-bg-placeholder);
	border-color: var(--color-bg-placeholder);
	color: var(--color-white);
	cursor: not-allowed;
}

.wc-page .wc-block-components-button__text {
	font-weight: inherit;
	letter-spacing: inherit;
}

/* Text-style buttons (Remove item, Edit address, coupon toggle). */
.wc-page .wc-block-components-button.is-link,
.wc-page .wc-block-cart-item__remove-link,
.wc-page .wc-block-components-address-card__edit {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 20px;
	color: var(--color-wc-muted);
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	background: none;
	border: 0;
	min-height: 0;
	padding: 0;
}

.wc-page .wc-block-components-button.is-link:hover,
.wc-page .wc-block-cart-item__remove-link:hover,
.wc-page .wc-block-components-address-card__edit:hover {
	color: var(--color-accent);
}

/* --------------------------------------------------------------- fields --- */

/*
 * Border, radius, colour and font only. The padding and line-height are
 * WooCommerce's, because the floating label animates against them — changing
 * the box height here makes the label land off-centre in its resting state.
 */
.wc-page .wc-block-components-text-input input[type="text"],
.wc-page .wc-block-components-text-input input[type="email"],
.wc-page .wc-block-components-text-input input[type="number"],
.wc-page .wc-block-components-text-input input[type="tel"],
.wc-page .wc-block-components-text-input input[type="url"],
.wc-page .wc-block-components-text-input input[type="password"],
.wc-page .wc-block-components-textarea,
.wc-page .wc-block-components-select__select,
.wc-page .wc-block-components-combobox-control input.components-combobox-control__input {
	background: var(--color-white);
	border: 1px solid var(--wc-field-border);
	border-radius: var(--wc-field-radius);
	font-family: var(--font-body);
	color: var(--color-heading);
	transition: border-color 0.2s ease;
}

.wc-page .wc-block-components-text-input input:focus,
.wc-page .wc-block-components-textarea:focus,
.wc-page .wc-block-components-select__select:focus,
.wc-page .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--color-accent);
	box-shadow: none;
	outline: none;
}

.wc-page .wc-block-components-text-input label,
.wc-page .wc-block-components-select__label {
	font-family: var(--font-body);
	color: var(--color-wc-muted);
}

.wc-page .wc-block-components-text-input.is-active label {
	color: var(--color-accent);
}

.wc-page .wc-block-components-validation-error {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 18px;
	color: var(--color-wc-danger);
}

.wc-page .has-error input,
.wc-page .has-error .wc-block-components-select__select {
	border-color: var(--color-wc-danger);
}

/* Checkboxes and radios pick up the brand gold without new markup. */
.wc-page .wc-block-components-checkbox__input,
.wc-page .wc-block-components-radio-control__input {
	accent-color: var(--color-accent);
}

.wc-page .wc-block-components-checkbox__label,
.wc-page .wc-block-components-radio-control__label {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--color-body-88);
}

.wc-page .wc-block-components-radio-control__description {
	font-size: 13px;
	color: var(--color-wc-muted);
}

/* Selected shipping/payment option reads as chosen, not just checked. */
.wc-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-page .wc-block-checkout__shipping-method-option--selected {
	border-color: var(--color-accent);
	background: var(--color-bg-cream-2);
}

/* --------------------------------------------------------------- panels --- */

.wc-page .wc-block-components-panel__button {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-heading);
}

.wc-page .wc-block-components-panel__button-icon {
	fill: var(--color-accent);
}

/* --------------------------------------------------------------- totals --- */

.wc-page .wc-block-components-totals-item {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 26px;
	color: var(--color-body-88);
}

.wc-page .wc-block-components-totals-item__label {
	font-weight: 400;
}

.wc-page .wc-block-components-totals-item__value {
	font-weight: 500;
	color: var(--color-heading);
}

/* Grand total — the one number that should carry weight. */
.wc-page .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--wc-row-border);
	padding-top: 16px;
	margin-top: 4px;
}

.wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	color: var(--color-heading);
}

.wc-page .wc-block-components-totals-wrapper {
	border-top-color: var(--wc-row-border);
}

/* Coupon field sits inline with its button. */
.wc-page .wc-block-components-totals-coupon__form .wc-block-components-button:not(.is-link) {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 13px;
}

/* -------------------------------------------------------------- notices --- */

.wc-page .wc-block-components-notice-banner {
	border-radius: var(--wc-field-radius);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 24px;
}

.wc-page .wc-block-components-notice-banner.is-success {
	border-color: var(--color-wc-success);
}

.wc-page .wc-block-components-notice-banner.is-error {
	border-color: var(--color-wc-danger);
}

/* -------------------------------------------------------------- spinner --- */

.wc-page .wc-block-components-spinner::after {
	border-top-color: var(--color-accent);
}