/* ===========================================================================
   WooCommerce — only the parts where the plugin's chrome meets ours.

   Loaded from functions.php behind a `class_exists( 'WooCommerce' )` guard, so
   this file is inert on any install without the plugin. Deliberately small: the
   shop is a staging experiment, and a full WooCommerce skin is a design job, not
   a patch. What is here fixes things that are visibly wrong, nothing more.
   =========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

/* Hello Elementor's reset.css paints EVERY button pink:
 *
 *   [type=button],[type=submit],button {
 *     background-color: transparent; border: 1px solid #c36; color: #c36;
 *   }
 *   ...:focus, ...:hover { background-color: #c36; color: #fff }
 *
 * That is a different leak from the `a { color: #c36 }` handled in style.css,
 * and it lands on the single most important control in the shop — Place Order
 * rendered as pink text on nothing, with a pink box around it.
 *
 * The values are not a guess at WooCommerce's defaults. WooCommerce's own button
 * colour arrives through a custom property from global styles, so it cannot be
 * restored by overriding a literal. These are the site's own tokens instead,
 * which is what the buttons should have been anyway — every other button on this
 * site is .fts-btn--navy.
 */
.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.wc-block-components-button,
.wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--fts-navy);
	border: 1px solid var(--fts-navy);
	color: #fff;
}

/* WooCommerce's own classic-template buttons are purple (#7f54b3) and are
 * declared at (0,3,1) — `.woocommerce button.button.alt` — which outranks the
 * (0,2,1) selector above, so Add to cart stayed purple while everything else
 * went navy. These selectors mirror that weight exactly and win on source order,
 * since this file is enqueued at priority 25, after the plugin's stylesheets. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	background-color: var(--fts-navy);
	border: 1px solid var(--fts-navy);
	color: #fff;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background-color: var(--fts-blue);
	border-color: var(--fts-blue);
	color: #fff;
}

/* The price sits in WooCommerce's default olive. Every programme card on the
   site states its price in navy; this is the same figure. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--fts-navy);
	font-weight: 600;
}

.woocommerce button[type="submit"]:hover,
.woocommerce button[type="submit"]:focus,
.woocommerce input[type="submit"]:hover,
.woocommerce input[type="submit"]:focus,
.wc-block-components-button:hover,
.wc-block-components-button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
	background-color: var(--fts-blue);
	border-color: var(--fts-blue);
	color: #fff;
}

/* The button label is its own element in the Blocks checkout and inherits the
   reset's pink independently of the button it sits in. */
.wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text {
	color: inherit;
}

/* --- Checkout at 360px ---------------------------------------------------- */

/* The Blocks checkout wraps its payment methods in a <fieldset>, and a fieldset
 * carries a UA default of `min-inline-size: min-content` that no amount of
 * `width: 100%` overrides. At 360px the payment fieldset measured 432px inside a
 * 345px column and pushed the whole page 17px wide — the only horizontal
 * overflow anywhere in the 20-cell breakpoint matrix.
 *
 * `min-inline-size: 0` is the specific counter to that UA rule; `max-width` alone
 * does nothing here. Measured before 362/345, after 345/345.
 */
fieldset.wc-block-checkout__payment-method {
	min-inline-size: 0;
}

.wc-block-checkout__payment-method,
.wc-block-components-radio-control {
	min-width: 0;
	max-width: 100%;
}

/* --- Small links inside Blocks components --------------------------------- */

/* "Edit" beside a saved address is a button element, so `a { color: inherit }`
   never reached it. */
.wc-block-components-address-card__edit {
	color: var(--fts-navy);
	border-color: transparent;
	background-color: transparent;
}

.wc-block-components-address-card__edit:hover,
.wc-block-components-address-card__edit:focus {
	color: var(--fts-blue);
	background-color: transparent;
}

/* --- Touch screens ------------------------------------------------------- */

@media (max-width: 48.875rem), (pointer: coarse) {
	.woocommerce .woocommerce-ordering select,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea {
		min-height: 44px;
	}

	.woocommerce ul.products li.product a.button,
	.woocommerce form button.button,
	.woocommerce form input.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	.woocommerce .password-input .show-password-input {
		top: 0;
		right: 0;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
	}

	.woocommerce .woocommerce-form__label-for-checkbox {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.woocommerce .woocommerce-form__label-for-checkbox input[type="checkbox"] {
		width: 20px;
		height: 20px;
		margin-right: 0.5rem;
	}
}