/**
 * woocommerce/add-to-cart-form block styles.
 *
 * Moved here out of assets/scss/woocommerce/_single-product.scss --
 * DECISIONS.md #4. Enqueued for the block from functions.php; there is no
 * build step for this file, so edit it directly, and write logical
 * properties because it never passes through rtlcss.
 *
 * The block renders WooCommerce's classic `form.cart`, so everything below is
 * an override of markup and CSS the plugin ships. Two of its stylesheets
 * matter here and load order between block stylesheets is not guaranteed, so
 * each override has to win on specificity alone:
 *
 *   add-to-cart-form-style.css   the block's own -- it lays the form out as a
 *                                `min-content auto auto` grid from
 *                                `.wp-block-woocommerce-add-to-cart-form
 *                                form.cart`, and styles the quantity input
 *                                from a five-class selector
 *   woocommerce-blocktheme.css   the plugin's block-theme layer -- it pads the
 *                                attribute selects from `.woocommerce
 *                                table.variations tr td select`
 *
 * Hence the two-class root. The block element carries both
 * `.wp-block-add-to-cart-form` and `.wc-block-add-to-cart-form`; compounding
 * them costs no nesting and puts every rule in the file one class above the
 * plugin's own root, which is what most of these overrides need and no more.
 * The two places that need more than that say so where they sit.
 *
 * Nested per DECISIONS.md #5, mobile-first with the breakpoint blocks last per
 * #2.
 *
 * Sections:
 *   1. Form frame
 *   2. Variations -- the attribute selects, the Clear link, the variation price
 *   3. Quantity -- the stepper, matched to the cart block's
 *   4. Add to cart button
 *   5. Stock notices
 *   6. Grouped products
 *   7. Responsive
 */

.wp-block-add-to-cart-form.wc-block-add-to-cart-form {

	/* --------------------------------------------------------------------------
	 * 1. Form frame
	 *
	 * The block wraps the stock notice and the form; the form itself is a row of
	 * controls that wrap. Both are flex rather than the plugin's grid, whose
	 * fixed `min-content auto auto` tracks squeeze anything full-width -- the
	 * variations table above all -- into a fraction of the column.
	 *
	 * The form's `flex` is what stops it shrink-wrapping its widest control as a
	 * flex item of the block: left to itself it came out as narrow as the
	 * longest option in the variations table, which is what squeezed the
	 * attribute selects. A basis rather than a flat `width: 100%` because the
	 * stock notice is a sibling of the form, not part of it, and the two are
	 * meant to sit on one line where there is room for both -- below that the
	 * form wraps under the notice and takes the width to itself.
	 * ----------------------------------------------------------------------- */

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;

	form.cart {
		display: flex;
		flex: 1 1 300px;
		flex-wrap: wrap;
		gap: 20px;
		min-width: 0;
	}

	/* --------------------------------------------------------------------------
	 * 2. Variations
	 * ----------------------------------------------------------------------- */

	.variations_form.cart {

		.single_variation_wrap {
			width: 100%;

			.woocommerce-variation-add-to-cart {
				display: flex;
				flex-wrap: wrap;
				gap: 24px;
			}
		}

		/*
		 * The variation panel is hidden until an attribute combination resolves,
		 * so its margins are the gap between the selects above it and the
		 * quantity row below. It used to pull itself up by 20px to sit closer to
		 * the selects; the Clear link now occupies that space in flow (below), so
		 * the pull would land the price on top of it.
		 */
		.woocommerce-variation {
			margin-top: 0;
			margin-bottom: 30px;
		}

		/*
		 * The resolved variation's price is the number the page is finally
		 * quoting, so it is set at the same 34px as the range the product price
		 * block shows before a selection is made -- the figure does not shrink
		 * for having been narrowed down.
		 */
		.woocommerce-variation-price {
			font-weight: 700;

			&,
			.price,
			.woocommerce-Price-amount.amount {
				color: var(--wp--preset--color--gray-100);
				font-size: 34px;
				line-height: 1.2;
			}
		}

		.woocommerce-variation-description {
			font-size: 14px;

			p:first-child {
				margin-top: 0;
			}

			p:last-child {
				margin-bottom: 20px;
			}
		}

		.variations {

			/*
			 * The selects were coming out only as wide as their longest option,
			 * which is what clipped "Choose an option" under the chevron. The
			 * plugin already sets `display: block` on the table, but a
			 * `table-row-group` body inside a block-level table still generates
			 * an anonymous, shrink-to-fit table box around the rows -- so the
			 * width has to come off the body as well as the table.
			 */
			width: 100%;
			margin-bottom: 30px;

			tbody {
				display: block;
				width: 100%;
			}

			td,
			th {
				padding: 0;
			}

			tr {
				display: flex;
				flex-direction: column;
				gap: 10px;
				text-align: left;

				& + tr {
					padding-top: 16px;
				}
			}

			.label {
				color: var(--wp--preset--color--gray-100);
				font-weight: 500;
			}

			label {
				margin-bottom: 0;
				font-weight: 600;
				line-height: 20px;
			}

			/*
			 * The value cell holds the select and -- on the last attribute only,
			 * which is where WooCommerce prints it -- the Clear link. Stacking
			 * them is what puts the link under the control it resets; see below.
			 */
			td.value {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 10px;
			}

			/*
			 * The chevron comes from the site-wide `select` rule in
			 * assets/scss/base/_base.scss: a 26px-wide background image sitting
			 * 0.65rem from the inline end, so it covers the last ~29px of the
			 * control. That rule pads 40px to clear it, but
			 * `woocommerce-blocktheme.css` re-pads the select from `.woocommerce
			 * table.variations tr td select` and gives it 1.1em -- about 15px --
			 * which ran "Choose an option" straight under the chevron. Two
			 * classes of root plus this nesting is what wins the clearance back.
			 */
			select {
				width: 100%;
				padding-block: 9px;
				padding-inline: 15px 44px;
				background-color: var(--wp--preset--color--base);
			}
		}

		/*
		 * "Clear" resets every attribute back to "Choose an option". It used to
		 * be positioned into the top-right corner of the table, which put it
		 * level with the *first* attribute's label and a long way from anything
		 * it acts on -- and since WooCommerce keeps it `visibility: hidden` until
		 * a selection exists, it appeared out of nowhere in a corner. Left in
		 * flow it sits directly under the last select, inside the same cell,
		 * reading as part of the control group. `visibility` still reserves the
		 * space, so revealing it does not move the form.
		 */
		.reset_variations {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: var(--wp--preset--color--gray-900);
			font-size: 14px;
			font-weight: 500;
			line-height: 1;
			text-decoration: none;

			&::before {
				content: "";
				display: block;
				width: 9px;
				height: 9px;
				background-color: currentcolor;
				mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%209%209%27%3E%3Cpath%20d=%27M1.06%200%204.5%203.44%207.94%200%209%201.06%205.56%204.5%209%207.94%207.94%209%204.5%205.56%201.06%209%200%207.94%203.44%204.5%200%201.06Z%27/%3E%3C/svg%3E);
				mask-position: center;
				mask-repeat: no-repeat;
				mask-size: contain;
			}

			&:hover,
			&:focus {
				color: var(--wp--preset--color--gray-100);
				text-decoration: none;
			}
		}
	}

	/* --------------------------------------------------------------------------
	 * 3. Quantity
	 *
	 * The stepper is built by assets/js/script.js, which wraps the number input
	 * in `.qty-container` and appends two text buttons. This matches it to the
	 * cart block's `.wc-block-components-quantity-selector` -- same pill, same
	 * 28px discs, same glyphs, same hover -- so the control the customer meets
	 * on the product page is the one they meet again in the cart.
	 *
	 * The glyphs are masks rather than background images, as in the cart, so the
	 * button's own `color` paints them. The buttons carry literal "-" and "+"
	 * text; `font-size: 0` is what hides it in favour of the mask.
	 *
	 * Unlike the cart's, these buttons are never given a `disabled` attribute --
	 * script.js clamps the value instead -- so there is no disabled state to
	 * style here.
	 *
	 * `form.cart .quantity` is two levels of nesting for weight, not structure:
	 * the plugin sets the input's margin and padding from
	 * `.wp-block-woocommerce-add-to-cart-form form.cart > .quantity:not(...)
	 * .qty`, five classes and an element, and left alone that margin pushes the
	 * number off the centre of the pill. `.qty-container` only ever appears
	 * inside a `.quantity` inside the form, so nothing is narrowed by it.
	 * ----------------------------------------------------------------------- */

	form.cart .quantity .qty-container {
		display: flex;
		align-items: center;
		width: 118px;
		padding: 4px;
		border: 1px solid var(--wp--preset--color--gray-1100);
		border-radius: 60px;
		background: var(--wp--preset--color--base);

		.qty {
			flex: 1 1 auto;
			min-width: 0;
			margin: 0;
			padding: 0;
			border-width: 0;
			border-radius: 0;
			background: transparent;
			font-size: 14px;
			font-weight: 400;
			line-height: 24px;
			text-align: center;
		}

		button {

			/*
			 * As in the cart: without this the discs are squeezed oval by the
			 * number input beside them, whose intrinsic width is far more than
			 * the pill holds.
			 */
			flex-shrink: 0;
			width: 28px;
			height: 28px;
			min-width: 0;
			padding: 0;
			border-width: 0;
			border-radius: 50%;
			background-color: var(--wp--preset--color--base-3);
			color: var(--wp--preset--color--gray-100);
			font-size: 0;
			outline: 0;
			cursor: pointer;
			transition: background-color 0.2s ease;

			&::before {
				content: "";
				display: block;
				margin: auto;
				background-color: currentcolor;
				mask-position: center;
				mask-repeat: no-repeat;
				mask-size: contain;
			}

			&:hover,
			&:focus-visible {
				background-color: var(--wp--preset--color--gray-1100);
				color: var(--wp--preset--color--gray-100);
			}
		}

		/* The input is printed first, so the minus button is ordered ahead of it. */
		.qty-minus {
			order: -1;

			&::before {
				width: 6px;
				height: 2px;
				mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%276%27%20height=%272%27%20viewBox=%270%200%206%202%27%3E%3Cpath%20d=%27M0%201.065V0H5.94V1.065H0Z%27/%3E%3C/svg%3E);
			}
		}

		.qty-plus::before {
			width: 7px;
			height: 7px;
			mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%277%27%20height=%277%27%20viewBox=%270%200%207%207%27%3E%3Cpath%20d=%27M0%203.795V2.73H2.865V0H3.99V2.73H6.855V3.795H3.99V6.54H2.865V3.795H0Z%27/%3E%3C/svg%3E);
		}
	}

	/* --------------------------------------------------------------------------
	 * 4. Add to cart button
	 * ----------------------------------------------------------------------- */

	.single_add_to_cart_button {
		min-width: 178px;
		background: var(--wp--preset--color--gray-100);
		color: var(--wp--preset--color--base);
		font-weight: 900;

		&:hover,
		&:focus {
			background: var(--wp--preset--color--primary);
		}

		/*
		 * The home patterns wrap the block in `.home-product`, and the Home v2
		 * deals slider wraps it in `.eride-deals-group`; both drop the label
		 * for an icon: a green disc carrying the cart glyph, drawn as the
		 * button's `::before` so the button element itself is only the hit
		 * area. Moved here out of assets/scss/gb-block/_gb-block.scss --
		 * DECISIONS.md #4.
		 *
		 * `.eride-deals-group` kept its copy there for a while, on the grounds
		 * that it renders add-to-cart-with-options rather than this block. It
		 * does, but WooCommerce renders that block's simple-product case as
		 * the same classic `form.cart` under the same
		 * `.wp-block-add-to-cart-form.wc-block-add-to-cart-form` wrapper, so
		 * the rules in this file reach it either way -- and at two classes the
		 * copy in the SCSS lost `min-width` and `background` to the default
		 * above, which is how the dark 178px pill ended up drawn behind the
		 * disc. Both wrappers share the rule here instead. The block's entry
		 * in the `$block_styles` map in functions.php names both block types
		 * so this file loads for either one.
		 *
		 * These are classes on pattern wrappers, so on their own they are one
		 * class against this file's two-class root and lose every declaration
		 * they share with the rule above. Nested here they are a class heavier
		 * than the default, and the hover is spelled out rather than left to
		 * outweigh the one above by source order.
		 *
		 * The `min-width` reset matters as much as the background: without it
		 * the transparent button keeps the 178px the labelled one needs and
		 * leaves an invisible click target beside the disc.
		 *
		 * `line-height` is what keeps the disc level with the quantity pill
		 * beside it. `woocommerce-blocktheme.css` sets the button
		 * `display: inline-block` from `.woocommerce div.product form.cart
		 * button.single_add_to_cart_button` -- four classes and three elements,
		 * heavier than this rule -- and as a flex item of the form that
		 * blockifies to `block`, so the disc is laid out as an inline-block on
		 * a text baseline. The line box then keeps the strut's half-leading
		 * under it: with the button's own `font-size: 0`, that is half of the
		 * inherited 26px line-height, and the box came out 53px tall around a
		 * 40px disc sitting at the top of it. `align-items: center` on the form
		 * centred that box faithfully, which left the disc riding about 5px
		 * high. Zeroing the line-height collapses the strut, so the box is the
		 * disc and centring it centres what you can see. The button carries no
		 * visible text -- the label is hidden by `font-size: 0` -- so there is
		 * no line for the line-height to set.
		 */
		.home-product &,
		.eride-deals-group & {
			min-width: 0;
			padding: 0;
			background: transparent;
			font-size: 0;
			line-height: 0;

			&::before {
				content: "";
				display: inline-block;
				width: 42px;
				height: 40px;
				border: 2px solid var(--wp--preset--color--primary);
				border-radius: 50px;
				background-color: var(--wp--preset--color--primary);
				background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20xmlns:xlink=%27http://www.w3.org/1999/xlink%27%20width=%2721px%27%20height=%2720px%27%3E%3Cpath%20fill-rule=%27evenodd%27%20fill=%27%2523ffffff%27%20d=%27M17.641,16.539%20C17.485,16.538%2017.444,16.577%2017.445,16.731%20C17.452,17.821%2017.449,18.910%2017.449,19.999%20C16.878,19.999%2016.307,19.999%2015.736,19.999%20C15.736,18.910%2015.733,17.819%2015.740,16.729%20C15.742,16.572%2015.695,16.538%2015.543,16.539%20C14.506,16.546%2013.469,16.539%2012.432,16.546%20C12.273,16.547%2012.218,16.512%2012.223,16.345%20C12.236,15.914%2012.237,15.481%2012.223,15.050%20C12.217,14.879%2012.279,14.851%2012.434,14.852%20C13.464,14.858%2014.494,14.851%2015.524,14.859%20C15.698,14.861%2015.742,14.816%2015.741,14.645%20C15.732,13.610%2015.739,12.575%2015.733,11.540%20C15.733,11.402%2015.760,11.349%2015.913,11.353%20C16.365,11.363%2016.818,11.363%2017.270,11.353%20C17.420,11.350%2017.453,11.397%2017.452,11.538%20C17.446,12.573%2017.453,13.608%2017.445,14.643%20C17.444,14.811%2017.483,14.861%2017.660,14.859%20C18.773,14.851%2019.886,14.855%2020.1000,14.855%20C20.1000,15.418%2020.1000,15.980%2020.1000,16.542%20C19.880,16.542%2018.760,16.546%2017.641,16.539%20ZM19.810,9.447%20C19.783,9.550%2019.745,9.591%2019.630,9.590%20C19.115,9.583%2018.600,9.584%2018.085,9.589%20C17.957,9.590%2017.930,9.556%2017.971,9.434%20C18.034,9.246%2018.071,9.050%2018.134,8.862%20C18.176,8.740%2018.146,8.700%2018.019,8.703%20C17.838,8.708%2017.657,8.705%2017.476,8.705%20C12.638,8.705%207.799,8.705%202.960,8.705%20C2.680,8.705%202.681,8.705%202.755,8.969%20C3.366,11.147%203.979,13.323%204.583,15.502%20C4.634,15.689%204.713,15.744%204.908,15.743%20C6.600,15.734%208.292,15.740%209.983,15.734%20C10.168,15.733%2010.234,15.772%2010.227,15.968%20C10.211,16.413%2010.217,16.859%2010.225,17.305%20C10.228,17.442%2010.200,17.493%2010.046,17.493%20C8.257,17.487%206.467,17.492%204.678,17.488%20C3.865,17.486%203.175,16.985%202.955,16.214%20C2.376,14.183%201.811,12.149%201.240,10.117%20C1.048,9.432%200.854,8.749%200.661,8.065%20C0.652,8.033%200.656,7.995%200.614,7.982%20C0.614,7.872%200.614,7.762%200.614,7.652%20C0.629,7.639%200.651,7.629%200.656,7.613%20C0.829,7.119%201.196,6.945%201.705,6.949%20C2.972,6.959%204.240,6.950%205.507,6.956%20C5.642,6.957%205.719,6.912%205.793,6.806%20C7.018,5.051%208.249,3.300%209.471,1.543%20C9.709,1.200%209.948,0.876%2010.389,0.779%20C10.431,0.779%2010.473,0.779%2010.515,0.779%20C10.957,0.872%2011.197,1.192%2011.435,1.537%20C12.639,3.289%2013.856,5.032%2015.063,6.782%20C15.152,6.910%2015.242,6.957%2015.399,6.956%20C16.673,6.949%2017.947,6.952%2019.221,6.952%20C19.967,6.953%2020.361,7.457%2020.167,8.164%20C20.049,8.592%2019.924,9.019%2019.810,9.447%20ZM10.452,3.227%20C9.576,4.477%208.721,5.696%207.852,6.934%20C9.592,6.934%2011.296,6.934%2013.023,6.934%20C12.160,5.690%2011.313,4.468%2010.452,3.227%20Z%27/%3E%3C/svg%3E);
				background-position: center;
				background-repeat: no-repeat;
				transition: background-color 0.3s ease-in-out;
			}

			&:hover,
			&:focus {
				background: transparent;

				/* primary-2 is the hover theme.json gives every button. */
				&::before {
					border-color: var(--wp--preset--color--primary-2);
					background-color: var(--wp--preset--color--primary-2);
				}
			}
		}
	}

	/* --------------------------------------------------------------------------
	 * 5. Stock notices
	 * ----------------------------------------------------------------------- */

	.no-stock {
		display: none;
	}

	.stock {
		display: inline-block;
		min-width: 178px;
		margin-block: 0;
		padding: 10px;
		border-radius: 50px;
		color: var(--wp--preset--color--base);
		font-size: 14px;
		font-weight: 600;
		text-align: center;
	}

	.out-of-stock {
		background-color: var(--wp--preset--color--danger-2);
	}

	/* In stock is a line of text, not a badge -- it keeps the colour only. */
	.in-stock {
		min-width: auto;
		padding: 0;
		background-color: transparent;
		color: var(--wp--preset--color--success);
	}

	/*
	 * The backorder notice is a sentence, not a word, so it takes the line to
	 * itself and the form goes under it whatever the width.
	 */
	.available-on-backorder {
		min-width: 220px;
		background-color: var(--wp--preset--color--info);

		& + .cart {
			width: 100%;
		}
	}

	/* --------------------------------------------------------------------------
	 * 6. Grouped products
	 * ----------------------------------------------------------------------- */

	.woocommerce-grouped-product-list {
		width: 100%;
		margin-bottom: 0;

		.woocommerce-Price-amount.amount,
		.woocommerce-grouped-product-list-item__price del {
			font-size: 14px;
		}

		.woocommerce-Price-amount.amount {
			font-weight: 500;
		}

		tbody {
			display: flex;
			flex-direction: column;

			/*
			 * The rule this replaces drew the line in
			 * `--wp--preset--color--bg-1`, which is not a preset this theme
			 * defines -- an undefined custom property in a shorthand drops the
			 * whole declaration's colour back to `currentcolor`, so the line was
			 * painting itself in the text colour. gray-1100 is the hairline the
			 * rest of the theme uses.
			 */
			tr {
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid var(--wp--preset--color--gray-1100);
			}

			tr:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom-width: 0;
			}
		}

		&.group_table {
			margin-bottom: 30px;
		}
	}

	.woocommerce-grouped-product-list-item {
		display: flex;
		flex-direction: column;
		gap: 10px;

		td {
			padding: 0;

			label {
				font-weight: 500;
			}
		}

		.woocommerce-grouped-product-list-item__label label {
			margin-bottom: 0;
		}

		ins {
			padding-inline-start: 6px;
		}

		.quantity {
			margin-bottom: 0 !important; /* the plugin's own, from `div.quantity` */
		}
	}
}

/* --------------------------------------------------------------------------
 * 7. Responsive
 * ----------------------------------------------------------------------- */

/* md */
@media (min-width: 48rem) {

	.wp-block-add-to-cart-form.wc-block-add-to-cart-form {

		.single_add_to_cart_button {
			margin-top: 0;
		}

		.woocommerce-grouped-product-list tbody tr {
			margin-bottom: 15px;
			padding-bottom: 15px;
			border-bottom: 0;
		}

		.woocommerce-grouped-product-list-item {
			flex-direction: row;
			align-items: center;
			gap: 20px;

			.woocommerce-grouped-product-list-item__price {
				margin-inline-start: auto;
			}
		}
	}
}

/* xl */
@media (min-width: 80rem) {

	/*
	 * From xl the summary column is wide enough that a full-width select reads
	 * as an empty bar; half of it is still comfortably wider than the longest
	 * option plus the chevron.
	 */
	.wp-block-add-to-cart-form.wc-block-add-to-cart-form .variations_form.cart .variations {
		width: 50%;
	}
}