/* -----------------------------------------------------------------------------
 * WooCommerce integration overrides
 * -----------------------------------------------------------------------------
 * Everything here exists because Bricks ships its own WooCommerce layer that
 * styles Woo markup Style Manager cannot reach. Scope is WooCommerce markup
 * ONLY - site-wide component rules belong in components.css, and anything a
 * Bricks control can express belongs on the global class, not in a stylesheet.
 * -------------------------------------------------------------------------- */

/* --- WooCommerce buttons ---------------------------------------------------
 * Bricks' WooCommerce integration layer hardcodes `.woocommerce .button` to a
 * cool grey (#e4e7e9) at weight 700, and never references .bricks-button, so
 * Style Manager cannot reach any of them. They are the most-clicked buttons in
 * the shop, so they are mapped here onto the same action tokens the Bricks
 * button uses.
 *
 * Woo's own convention decides the role: `.alt` is the primary CTA (single
 * add-to-cart, place order); plain `.button` is everything else (Read more,
 * View basket, Update basket, Apply coupon, account actions).
 *
 * Loads after woocommerce-layer.min.css, so equal specificity wins on order.
 * -------------------------------------------------------------------------- */

.woocommerce .button {
	padding: var(--brxw-space-s) var(--brxw-space-l);
	border: 1px solid var(--mw-action-secondary-border);
	border-radius: var(--mw-radius-control);
	background-color: var(--mw-action-secondary-bg);
	color: var(--mw-action-secondary-fg);
	font-family: var(--mw-font-sans);
	font-size: var(--mw-text-s);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	transition: var(--mw-transition-control);
}

.woocommerce .button:hover {
	background-color: var(--mw-action-secondary-bg-hover);
}

.woocommerce .button:active {
	transform: translateY(var(--mw-press-shift));
}

.woocommerce .button.alt {
	border-color: transparent;
	background-color: var(--mw-action-primary-bg);
	color: var(--mw-action-primary-fg);
}

.woocommerce .button.alt:hover {
	background-color: var(--mw-action-primary-bg-hover);
}

.woocommerce .button.alt:active {
	background-color: var(--mw-action-primary-bg-press);
}

.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce .button.disabled {
	background-color: var(--mw-action-disabled-bg) !important;
	color: var(--mw-action-disabled-fg) !important;
	border-color: transparent !important;
	transform: none !important;
	cursor: not-allowed;
}

/* --- Quantity stepper -----------------------------------------------------
 * Woo prints input, then minus, then plus, and the Bricks Woo layer strips the
 * input's side borders expecting a joined control but never draws the group, so
 * on the product page the stepper arrives unstyled. Woo already orders the three
 * children minus / input / plus, so only the group and the icons need styling.
 * The 1px border is Woo's, coloured by Bricks' global `* { border-color }`.
 * A pill is correct here: steppers are one of the three sanctioned pill shapes.
 * -------------------------------------------------------------------------- */

.woocommerce form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mw-border-strong);
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-surface-card);
	overflow: hidden;
}

/* Woo sizes this one: `form.cart .quantity` is a fixed 200px flex row and the
   input carries `flex: 1`, so it takes the space the two actions leave. */
.woocommerce form.cart .quantity .qty {
	border: 0 !important;
	background: transparent;
	color: var(--mw-text-strong);
	font-family: var(--mw-font-mono);
	font-size: var(--mw-text-s);
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.woocommerce form.cart .quantity .action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	flex-shrink: 0;
	border: 0;
	color: var(--mw-text-muted);
	cursor: pointer;
	transition: var(--mw-transition-control);
}

.woocommerce form.cart .quantity .action:hover {
	background-color: var(--mw-action-ghost-bg-hover);
	color: var(--mw-text-strong);
}

.woocommerce form.cart .quantity .action svg {
	width: 1.6rem;
	height: 1.6rem;
	stroke-width: 1.5;
}

/* --- Review form ----------------------------------------------------------
 * The section renders its own review list from the bm_reviews loop, so the native
 * Woo list is hidden and only its FORM is kept. The form must stay native: it
 * carries Woo's rating input, its nonce and its verification gate.
 *
 * Woo and WP print these rows with their own classes (.comment-form-author,
 * .comment-form-rating, ...), and the three extra inputs are printed by the theme,
 * so none of it can be reached from a Bricks control.
 * -------------------------------------------------------------------------- */

.bm-review-form .woocommerce-Reviews-title,
.bm-review-form .commentlist,
.bm-review-form .woocommerce-noreviews,
.bm-review-form .woocommerce-pagination {
	display: none;
}

.bm-review-form .comment-reply-title {
	font-family: var(--mw-font-display);
	font-size: var(--mw-h4);
	color: var(--mw-text-strong);
}

.bm-review-form .comment-form {
	display: flex;
	flex-direction: column;
	row-gap: var(--brxw-space-s);
}

/* One row treatment for Woo's rows and the theme's alike. */
.bm-review-form .comment-form > p,
.bm-review-form .comment-form-rating,
.bm-form__row {
	display: flex;
	flex-direction: column;
	row-gap: var(--brxw-space-3xs);
	margin: 0;
}

/* Required: the UA's `[hidden] { display: none }` is weaker than the rule above,
   so without this the attribute on the photo row would do nothing. */
.bm-form__row[hidden] {
	display: none;
}

/* These have to outrank the generic row rule above, which is (0,2,1) thanks to its
 * `> p`. A bare `.bm-form__row--inline` at (0,1,0) loses and the checkbox ends up
 * stacked above its label and centred. */
.bm-review-form .comment-form > p.bm-form__row--inline,
.bm-review-form .comment-form > p.comment-form-cookies-consent {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	column-gap: var(--brxw-space-2xs);
}

/* Field labels take the mono meta voice, the same as every other small label in
   the system. Checkbox labels are sentences, so they stay in the body face. */
.bm-review-form label {
	font-family: var(--mw-font-mono);
	font-size: var(--mw-text-2xs);
	letter-spacing: var(--mw-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mw-text-muted);
}

.bm-form__row--inline label,
.bm-review-form .comment-form-cookies-consent label {
	font-family: var(--mw-font-sans);
	font-size: var(--mw-text-s);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mw-text-body);
}

.bm-form__hint {
	font-family: var(--mw-font-mono);
	font-size: var(--mw-text-3xs);
	letter-spacing: var(--mw-tracking-wide);
	color: var(--mw-text-subtle);
}

.bm-review-form .comment-notes {
	font-size: var(--mw-text-xs);
	color: var(--mw-text-muted);
}

.bm-review-form .required {
	color: var(--mw-critical);
}

.bm-review-form input[type='text'],
.bm-review-form input[type='email'],
.bm-review-form input[type='url'],
.bm-review-form input[type='file'],
.bm-review-form select,
.bm-review-form textarea {
	width: 100%;
	padding: var(--brxw-space-2xs) var(--brxw-space-xs);
	border: 1px solid var(--mw-border-strong);
	border-radius: var(--mw-radius-control);
	background-color: var(--mw-surface-card);
	color: var(--mw-text-strong);
	font-family: var(--mw-font-sans);
	font-size: var(--mw-text-s);
	/* Bricks sets line-height:40px on every input, which is what made these ~50px
	   tall. It has to be restated or the padding stacks on top of it. */
	line-height: 1.4;
}

.bm-review-form textarea {
	min-height: 12rem;
	resize: vertical;
}

/* The file input's own button. ::file-selector-button is the only way in. */
.bm-review-form input[type='file'] {
	cursor: pointer;
}

.bm-review-form input[type='file']::file-selector-button {
	margin-right: var(--brxw-space-xs);
	padding: var(--brxw-space-3xs) var(--brxw-space-xs);
	border: 1px solid var(--mw-action-secondary-border);
	border-radius: var(--mw-radius-control);
	background-color: var(--mw-action-secondary-bg);
	color: var(--mw-action-secondary-fg);
	font-family: var(--mw-font-sans);
	font-size: var(--mw-text-xs);
	font-weight: 500;
	cursor: pointer;
	transition: var(--mw-transition-control);
}

.bm-review-form input[type='file']::file-selector-button:hover {
	background-color: var(--mw-action-secondary-bg-hover);
}

/* accent-color tints the native tick without appearance:none, which would mean
   drawing the tick by hand. The radius stays browser-controlled as a result. */
.bm-review-form input[type='checkbox'] {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--mw-action-primary-bg);
}

/* Woo's JS swaps the rating select for a .stars widget. The glyphs live on the
 * anchor's ::before, which carries its own colour (#d5d6d7, an off-palette cool
 * grey), so colouring the anchor alone changes nothing visible. */
.bm-review-form .stars a {
	color: var(--mw-text-accent);
}

.bm-review-form .stars a::before {
	color: var(--mw-border-soft);
}

.bm-review-form .stars a:hover::before,
.bm-review-form .stars a:focus-visible::before,
.bm-review-form .stars a.active::before,
.bm-review-form .stars.selected a.active::before {
	color: var(--mw-text-accent);
}

.bm-review-form input[type='submit'] {
	align-self: flex-start;
	width: auto;
	padding: var(--brxw-space-s) var(--brxw-space-l);
	border: 1px solid transparent;
	border-radius: var(--mw-radius-control);
	background-color: var(--mw-action-primary-bg);
	color: var(--mw-action-primary-fg);
	font-family: var(--mw-font-sans);
	font-size: var(--mw-text-s);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: var(--mw-transition-control);
}

.bm-review-form input[type='submit']:hover {
	background-color: var(--mw-action-primary-bg-hover);
}

.bm-review-form input[type='submit']:active {
	background-color: var(--mw-action-primary-bg-press);
	transform: translateY(var(--mw-press-shift));
}