/* The Mannequin Shop child theme: high-fashion black (Chanel) front-end polish. */

/* WooCommerce buttons: black, sharp, uppercase, letter-spaced. */
.woocommerce a.button,
.woocommerce ul.products li.product .button,
.woocommerce button.button {
	background-color: #0A0A0A;
	color: #ffffff;
	border-radius: 0;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	padding: 0.85em 1.6em;
}

.woocommerce a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce button.button:hover {
	background-color: #000000;
	color: #ffffff;
}

/* Product cards: editorial, left-aligned, uppercase tracked titles, hairline image. */
.woocommerce ul.products li.product {
	text-align: left;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: #0A0A0A;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.82rem;
	line-height: 1.4;
}

.woocommerce ul.products li.product a img {
	border-radius: 0;
	border: 1px solid #E7E4DF;
}

/* Nav: uppercase, wide-tracked (fashion). */
header .wp-block-navigation {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
}

/* Shop archive title in the serif display face. */
.woocommerce-products-header__title,
.woocommerce .woocommerce-loop-product__link + *,
h1.entry-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Sharpen inputs and remove rounded corners site-wide for the couture look. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wp-block-search__input,
select {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Single product: the quote CTA band. Ported from the am theme.
 *
 * The band is a core/group, so its border, its 10px radius and its background
 * come from block supports in the template, not from here. The radius is the
 * one deliberate exception to the sharp-corner rule above: it is set inline by
 * the block, so it wins on specificity without fighting this file.
 *
 * Only the bits the block system cannot reach live here: WooCommerce renders
 * <form class="cart"> itself, and nothing in the group's layout can centre a
 * form it did not create.
 * ---------------------------------------------------------------------- */

.tms-quote-cta .wp-block-add-to-cart-form,
.tms-quote-cta .wc-block-add-to-cart-form {
	text-align: center;
}

/* Qty and button on one centred row. flex-wrap keeps them stacked, not
   squeezed, on a narrow phone. */
.tms-quote-cta form.cart {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.tms-quote-cta form.cart .quantity {
	margin: 0;
	float: none; /* Woo floats this by default, which breaks the flex row. */
}

/* The qty field arrives completely unstyled: the browser default is 58x20 with a
   2px inset grey border, sat next to a 48px black button. Measured on am, not
   guessed. Two things it has to fix:
     - the 28px height gap, which is what makes the band look unfinished
     - a 22px tap target on a phone, well under the 44px minimum
   Matching the button's height solves both. Note this theme sharpens inputs
   site-wide above; the 4px here is deliberate, so the field reads as part of the
   band rather than as a stray form control. */
.tms-quote-cta form.cart .quantity input {
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	width: 5rem;
	padding: 0 0 0 0.5rem;
	text-align: center;
	font-size: 16px; /* also the iOS zoom threshold, so it holds at every width */
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	appearance: auto; /* keep the steppers: quantity is what they are for */
}

.tms-quote-cta form.cart .quantity input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

/* The button must not stretch to the flex line. */
.tms-quote-cta form.cart button[type="submit"] {
	flex: 0 0 auto;
	margin: 0;
}

/* Out-of-stock renders instead of the form. Centre it too, or the band looks
   broken on every out-of-stock product. */
.tms-quote-cta p.stock {
	text-align: center;
	margin: 0;
}

/* On a phone the button's side padding leaves too little room for the label, so
   "ADD TO QUOTE" wraps to two lines and stands taller than the 48px input. Give
   the button the rest of the row instead of squeezing it. */
@media (max-width: 600px) {
	.tms-quote-cta form.cart {
		align-items: stretch;
	}

	.tms-quote-cta form.cart button[type="submit"] {
		flex: 1 1 auto;
		min-height: 48px;
		padding-left: 1rem;
		padding-right: 1rem;
		white-space: nowrap;
	}
}