/**
 * Variation selection, native personalization fields, totals and purchase CTA.
 */

.myc-product-purchase .variations th,
.myc-native-field h3 {
	margin: 0 0 var(--ps-space-2);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ps-color-text);
	font-size: 15px;
	font-weight: 800;
}

.myc-product-purchase .variations th {
	margin-bottom: calc(var(--ps-space-3) + var(--ps-space-2));
}

.myc-native-field h3 span {
	color: var(--ps-color-danger);
}

.myc-product-purchase .variations td {
	margin-bottom: var(--ps-space-3);
}

.myc-variation-swatches {
	gap: var(--ps-space-2);
	margin-bottom: 0;
}

.myc-variation-swatch {
	min-height: 48px;
	border-radius: var(--ps-radius-sm);
	font-weight: 800;
}

.myc-variation-swatch.is-selected {
	border-color: var(--ps-color-brand-700);
	background: var(--ps-color-brand-700);
	box-shadow: 0 8px 18px rgb(112 23 35 / 18%);
}

.myc-variation-swatch:disabled {
	background: var(--ps-color-surface-muted);
	color: var(--ps-color-disabled);
	text-decoration: line-through;
}

.myc-native-product-fields {
	gap: var(--ps-space-5);
	margin: 0 0 var(--ps-space-5);
	padding-top: var(--ps-space-5);
	border-top: 1px solid var(--ps-color-summary-border);
}

.myc-native-field {
	gap: var(--ps-space-3);
}

.myc-native-field + .myc-native-field {
	padding-top: var(--ps-space-5);
	border-top: 1px solid var(--ps-color-summary-border);
}

/* ------------------------------------------------------- collapsible steps --- */

/* 44px so the row is a real touch target: it is the only way to reopen a step. */
.myc-field-step__summary {
	display: flex;
	min-height: 44px;
	align-items: center;
	gap: var(--ps-space-3);
	padding: var(--ps-space-2) 0;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

/* Safari paints its own disclosure triangle through a pseudo-element that
   `list-style: none` alone does not reach. */
.myc-field-step__summary::-webkit-details-marker {
	display: none;
}

.myc-field-step__number {
	display: flex;
	width: 24px;
	height: 24px;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
	font-size: 12px;
	font-weight: 800;
}

.myc-field-step__heading {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

/* The heading keeps its own margin for the expanded layout; inside the summary
   the flex gap places it instead. */
.myc-field-step__heading h3 {
	margin: 0;
}

.myc-field-step__choice {
	overflow: hidden;
	color: var(--ps-color-text-muted);
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The chosen option is the one thing worth reading on a closed step, so it only
   shows there — open, the checked row says it already. */
.myc-field-step[open] .myc-field-step__choice {
	display: none;
}

/*
 * A 9px square rotated 45° measures about 13px across, so its corner reached
 * 2px past the column's right edge. The margin gives the rotation that room
 * back instead of letting the chevron sit on the edge.
 */
.myc-field-step__toggle {
	width: 9px;
	height: 9px;
	flex: none;
	border-right: 2px solid var(--ps-color-text-muted);
	border-bottom: 2px solid var(--ps-color-text-muted);
	margin-right: 2px;
	margin-bottom: 3px;
	transform: rotate(45deg);
	transition: transform var(--ps-transition-fast);
}

.myc-field-step[open] .myc-field-step__toggle {
	margin-bottom: -3px;
	transform: rotate(-135deg);
}

.myc-field-step__body {
	padding-top: var(--ps-space-3);
}

/* ---------------------------------------------- a step left unanswered --- */

.myc-field-step.is-invalid .myc-field-step__number {
	background: var(--ps-color-danger-ring);
	color: var(--ps-color-danger);
}

.myc-field-step.is-invalid .myc-field-step__heading h3,
.myc-field-step.is-invalid .myc-field-step__heading h3 span {
	color: var(--ps-color-danger);
}

.myc-field-step__pending {
	flex: none;
	color: var(--ps-color-danger);
	font-size: 12px;
	font-weight: 800;
}

/* Closed, the header carries the whole message; open, the box below says it in
   full and the word would only repeat it. */
.myc-field-step[open] .myc-field-step__pending {
	display: none;
}

.myc-field-step__error {
	display: flex;
	align-items: flex-start;
	gap: var(--ps-space-2);
	margin: 0 0 var(--ps-space-3);
	padding: var(--ps-space-2) var(--ps-space-3);
	border: 1px solid var(--ps-color-danger);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-color-danger-soft);
	color: var(--ps-color-danger);
	font-size: 13px;
	line-height: 1.4;
}

.myc-field-step__error[hidden] {
	display: none;
}

/* Stroked, like the header icons, so it sits at the same weight as the rest of
   the theme's iconography rather than reading as a filled badge. */
.myc-field-step__error-icon {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 1px;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-width: 1.8;
}

/* The dot of the exclamation mark is the one part that is solid. */
.myc-field-step__error-icon circle:last-of-type {
	fill: currentcolor;
	stroke: none;
}

@media (hover: hover) {
	.myc-field-step__summary:hover .myc-field-step__toggle {
		border-color: var(--ps-color-brand-600);
	}
}

.myc-native-field-text {
	min-height: 52px;
	padding: 0 var(--ps-space-4);
	border-radius: var(--ps-radius-sm);
}

.myc-native-field-text-wrap {
	position: relative;
	display: block;
}

.myc-native-field-text-wrap .myc-native-field-text {
	width: 100%;
}

.myc-native-field-text-wrap.has-fixed-price .myc-native-field-text {
	padding-right: 120px;
}

.myc-native-field-text-price {
	position: absolute;
	top: 50%;
	right: var(--ps-space-4);
	color: var(--ps-color-text);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	transform: translateY(-50%);
	pointer-events: none;
}

.myc-product-purchase .myc-native-field-text:focus,
.myc-product-purchase .myc-native-field-text:focus-visible {
	border-color: var(--ps-color-brand-500);
	background: var(--ps-color-surface);
	box-shadow: none;
	outline: none;
}

.myc-native-field-options {
	gap: var(--ps-space-2);
}

.myc-native-field-option {
	min-height: 50px;
	padding: var(--ps-space-3);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-color-surface);

	/*
	 * An option is a label, and base.css only clears the native tap flash for
	 * buttons and a handful of link classes. Safari therefore painted its grey
	 * system overlay across the whole row on touch — a flash the row already
	 * answers for itself, in brand tint, a beat later.
	 */
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--ps-transition-fast), background-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast);
}

/*
 * Both states take the same tint the Buy now button uses when hovered, so the
 * whole purchase column answers a pointer the same way. A checked option sits
 * among identical rows and a one-pixel border was thin evidence of which one
 * the customer had chosen.
 *
 * The borders still separate the two: brand-500 while the pointer is over a
 * row, brand-600 once it is the choice.
 */
.myc-native-field-option:focus-within {
	border-color: var(--ps-color-brand-500);
	background: var(--ps-color-brand-50);
}

/*
 * A finger has nowhere to move away to, so iOS keeps :hover on whatever it
 * last passed over: scrolling down the options left a row tinted as though it
 * were the chosen one, next to the one actually checked. Asking whether the
 * device hovers at all keeps the treatment for pointers that can leave.
 */
@media (hover: hover) {
	.myc-native-field-option:hover {
		border-color: var(--ps-color-brand-500);
		background: var(--ps-color-brand-50);
	}
}

.myc-native-field-option:has(input:checked) {
	border-color: var(--ps-color-brand-600);
	background: var(--ps-color-brand-50);
	box-shadow: none;
}

.myc-native-field:has(input:user-invalid) h3,
.myc-native-field:has(input:user-invalid) h3 span {
	color: var(--ps-color-danger);
}

.myc-native-field-option:has(input:user-invalid),
.myc-native-field-text:user-invalid {
	border-color: var(--ps-color-danger);
	box-shadow: 0 0 0 3px var(--ps-color-danger-ring);
}

.myc-native-field-option input {
	width: 18px;
	height: 18px;
}

.myc-native-fields-summary {
	display: grid;
	gap: var(--ps-space-5);
	padding-top: var(--ps-space-5);
	border-top: 1px solid var(--ps-color-summary-border);
}

.myc-native-fields-summary h3 {
	margin: 0;
	color: var(--ps-color-text);
	font-size: 15px;
	font-weight: 800;
}

/*
 * Every gap inside this box measures 16px of actual ink: border to «Extras»,
 * «Extras» to the rule, the rule to «Total», «Total» to the border. The box
 * gets its height from these four, not from the type, which stays put.
 *
 * The half-pixels are not arbitrary. Even on a fixed line box the glyphs do
 * not fill it exactly — the leading left over sits outside the padding — so
 * each value carries the measured offset between its box edge and the ink:
 * +0.5 where the box sits inside the ink, -0.5 where it sits outside. Tuned
 * against the 15px rows and the 22px total below; if either size changes,
 * re-measure rather than assuming these still land.
 */
.myc-native-fields-total {
	gap: 16.5px;
	padding: 15.5px var(--ps-space-4);
	border: 1px solid var(--ps-color-summary-border);
	border-radius: var(--ps-radius-md);
	background: var(--ps-color-summary-fill);
}

/*
 * Both rows on a fixed line box. With line-height: normal the leading came
 * out of whatever each row's tallest glyph asked for — the 22px total made
 * row two 34px against row one's 18px — so equal CSS padding still produced
 * unequal space around the text. At 1, the box is the font size and the
 * padding below is what the eye actually sees.
 */
.myc-native-fields-total > div {
	line-height: 1;
}

.myc-native-fields-total > div:first-child {
	color: var(--ps-color-text-muted);
}

.myc-native-fields-total > div:last-child {
	padding-top: 15.5px;
	border-top: 1px solid var(--ps-color-summary-border);
	color: var(--ps-color-brand-700);
}

.myc-native-fields-total > div:last-child > span {
	color: var(--ps-color-text);
}

.myc-native-fields-total > div:last-child strong {
	font-size: 22px;
	font-variant-numeric: tabular-nums;
}

.myc-product-purchase .woocommerce-variation-availability,
.myc-product-purchase .woocommerce-error,
.myc-product-purchase .woocommerce-info,
.myc-product-purchase .woocommerce-message {
	margin: 0 0 var(--ps-space-4);
	padding: var(--ps-space-3) var(--ps-space-4);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-color-surface-subtle);
	box-shadow: none;
}

.myc-product-purchase .woocommerce-variation-availability:empty {
	display: none;
}

.myc-product-purchase .woocommerce-error {
	border-color: var(--ps-color-danger);
	background: var(--ps-color-danger-soft);
	color: var(--ps-color-danger);
}

.myc-product-purchase form.cart,
.myc-product-purchase .woocommerce-variation-add-to-cart {
	gap: var(--ps-space-3);
}

.myc-product-quantity-control {
	min-height: 56px;
	border-color: var(--ps-color-summary-border);
	border-radius: var(--ps-radius-sm);
}

.myc-product-quantity-control button,
.myc-product-quantity-value {
	min-height: 54px;
}

.myc-product-quantity-control button:focus-visible {
	position: relative;
	z-index: 1;
}

.myc-product-purchase button.single_add_to_cart_button,
.myc-product-purchase .single_add_to_cart_button,
.myc-product-purchase button.myc-ajax-add-to-cart-button,
.myc-product-purchase .myc-buy-now-button {
	min-height: 56px;
	border-radius: var(--ps-radius-sm);
	font-weight: 700;
	letter-spacing: .01em;
}

.myc-product-purchase .myc-buy-now-button {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	/* A muted rose fill and a border a shade stronger than the brand's own
	   --ps-color-brand-border, so the secondary action reads as filled rather
	   than as an outline of the primary. Neither tone has a slot on the brand
	   scale, hence the literals. */
	border: 1px solid #d28e96;
	background: #f9edef;
	color: var(--ps-color-brand-700);
	font: inherit;
	/* `font` is a shorthand: it resets weight to inherited along with family and
	   size, so the 850 above (which add-to-cart also needs and does not use this
	   shorthand) does not survive here on its own — this one has to restate it. */
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--ps-transition-fast), border-color var(--ps-transition-fast), color var(--ps-transition-fast);
}

/* #fcf4f5, which is --ps-color-brand-50 exactly. The border does not move:
   it is the button's own edge, not a hover signal. */
.myc-product-purchase .myc-buy-now-button:hover:not(:disabled),
.myc-product-purchase .myc-buy-now-button:focus-visible {
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
}

/* Same fill as the totals box and the add-to-cart button's disabled state,
   so all three read as one family. No external opacity touches this one —
   its own opacity: .5 only made it fainter than the colour already says on
   its own, so it stays dropped. */
.myc-product-purchase .myc-buy-now-button:disabled {
	border-color: var(--ps-color-summary-border);
	background: var(--ps-color-summary-fill);
	color: var(--ps-color-text-muted);
	opacity: 1;
}

.myc-product-purchase .myc-buy-now-button.is-loading {
	position: relative;
	border-color: var(--ps-color-brand-700);
	background: var(--ps-color-brand-50);
	color: transparent;
	opacity: 1;
	cursor: progress;
}

.myc-product-purchase .myc-buy-now-button.is-loading::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	border: 2px solid rgb(143 31 46 / 22%);
	border-top-color: var(--ps-color-brand-700);
	border-radius: 50%;
	content: '';
	transform: translate(-50%, -50%);
	animation: myc-cart-spinner .65s linear infinite;
}

.myc-product-purchase .single_add_to_cart_button.is-loading,
.myc-product-purchase .myc-ajax-add-to-cart-button.is-loading {
	background-color: var(--ps-color-brand-700);
}

@media (max-width: 760px) {
	.myc-product-purchase .quantity {
		flex: 0 0 128px;
	}

	.myc-product-purchase button.single_add_to_cart_button,
	.myc-product-purchase .single_add_to_cart_button,
	.myc-product-purchase button.myc-ajax-add-to-cart-button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-right: var(--ps-space-3);
		padding-left: var(--ps-space-3);
		font-size: 14px;
	}

	.myc-variation-swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}