/* Muscle Up Bundles - product page. Every rule is scoped under .mub-form or
 * .mub-contents so nothing leaks into the theme or other plugins. */
/* The Elementor add to cart widget lays the form out as a flex container, so
 * a plain block child shrinks to fit its longest line. Claiming the full basis
 * makes the box span its column. */
.mub-form .mub-contents {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 1.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 8px;
	padding: 1.25rem;
}
.mub-form .mub-heading {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mub-form .mub-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.mub-form .mub-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.06 );
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}
.mub-form .mub-row:last-child { border-bottom: 0; }
.mub-form label.mub-row { cursor: pointer; }
.mub-form .mub-qty { flex: 0 0 auto; opacity: 0.7; font-variant-numeric: tabular-nums; }
/* min-width:0 lets a long name shrink inside the flex row instead of pushing
 * the price out; margin-left:auto keeps the price hard right. */
.mub-form .mub-name { flex: 1 1 auto; min-width: 0; }
.mub-form .mub-price {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 1rem;
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}
.mub-form .mub-group { margin: 0 0 1rem; }
.mub-form .mub-group-title {
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}
.mub-form .mub-summary {
	width: 100%;
	box-sizing: border-box;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 2px solid rgba( 0, 0, 0, 0.12 );
}
.mub-form .mub-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.25rem;
	padding: 0.2rem 0;
	width: 100%;
	box-sizing: border-box;
}
.mub-form .mub-summary-row > span:last-child { margin-left: auto; white-space: nowrap; }
.mub-form .mub-summary-row--rrp { opacity: 0.7; }
.mub-form .mub-summary-row--rrp .mub-rrp { text-decoration: line-through; }
.mub-form .mub-summary-row--total { font-size: 1.25rem; font-weight: 700; }
.mub-form .mub-summary-row--save { justify-content: flex-end; }
.mub-form .mub-save { font-weight: 600; }

@media ( max-width: 480px ) {
	.mub-form .mub-contents { padding: 1rem; }
	.mub-form .mub-row { gap: 0.6rem; flex-wrap: wrap; }
	.mub-form .mub-price { width: 100%; padding-left: 0; text-align: right; }
}

/* Package selector and panels. The .variations table deliberately reuses
 * WooCommerce's own markup so the theme styles it like a variable product. */
.mub-form .mub-panels { margin: 0; flex: 1 1 100%; width: 100%; }
.mub-form .mub-group { width: 100%; box-sizing: border-box; }
.mub-form .mub-list { width: 100%; box-sizing: border-box; }
.mub-form .mub-panel[hidden] { display: none; }
.mub-form .mub-variations { margin-bottom: 1rem; }
.mub-form .single_add_to_cart_button.disabled,
.mub-form .single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}


/* Inline error, e.g. a component went out of stock while they were choosing. */
.mub-form .mub-notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	background: rgba( 190, 30, 45, 0.08 );
	border: 1px solid rgba( 190, 30, 45, 0.3 );
	font-size: 0.95em;
}
.mub-form .mub-submit.loading { opacity: 0.7; cursor: progress; }

/* After a successful add, WooCommerce marks the button "added" and its own
 * stylesheet appends a tick (.button.added::after). The theme fixes the button
 * at 250px and lets text wrap, which dropped the tick onto a second line.
 * Keep label and tick on one line. */
.mub-form .mub-submit {
	white-space: nowrap;
}
.mub-form .mub-submit.added::after {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

/* Package Price amount in the theme's own price red (rgb 216,0,0), so the
 * figure the customer pays stands out. Override with --mub-package-price-colour. */
.mub-form .mub-summary-row--total .mub-total {
	color: var( --mub-package-price-colour, rgb( 216, 0, 0 ) );
}

/* ---- Variation picker for variable components (e.g. collar colour) ---- */
.mub-form .mub-row--has-variation { flex-wrap: wrap; row-gap: 0.35rem; }
.mub-form .mub-variation {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 0 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-left: 2.2rem;
}
.mub-form .mub-group .mub-variation { padding-left: 2.2rem; margin-top: -0.2rem; }
.mub-form .mub-variation[hidden] { display: none !important; }
.mub-form .mub-variation-label {
	margin: 0;
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}
.mub-form .mub-variation-select {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 280px;
	margin: 0;
	padding: 0.45rem 2.2rem 0.45rem 1rem;
	font-size: 16px;
	height: auto;
	line-height: 1.3;
	border: 1px solid #000;
	border-radius: 40px;
	background-color: transparent;
}
/* Same dark grey as the theme's own variation dropdowns. The theme turns
 * focused form fields red (its link colour), which read as an error here. */
.mub-form .mub-variation-select,
.mub-form .mub-variation-select:focus,
.mub-form .mub-variation-select:hover,
.mub-form .mub-variation-select:active,
.mub-form .mub-variation-select option {
	color: rgb( 71, 83, 85 ) !important;
}
.mub-form .mub-variation-select option:disabled { color: #a0a6a8 !important; }
@media (max-width: 600px) {
	.mub-form .mub-variation,
	.mub-form .mub-group .mub-variation { padding-left: 0; }
	.mub-form .mub-variation-select { max-width: none; }
}