/* MityBilt configurator.
   Inherits the theme's type and colour; only structure and states are defined
   here so it sits inside the existing product template without fighting it. */

.mbc {
	--mbc-border: #e2e2e2;
	--mbc-border-strong: #111;
	--mbc-bg-soft: #f2f2f2;
	--mbc-muted: #666;
	margin: 1.5rem 0 2rem;
}

/* Running total ------------------------------------------------------- */
.mbc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: .75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--mbc-border);
}
.mbc__total-label {
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbc-muted);
}
.mbc__total-value { font-size: 1.5rem; font-weight: 700; }
.mbc__total-value.is-updating { opacity: .45; }

/* Steps --------------------------------------------------------------- */
.mbc__step { border: 1px solid var(--mbc-border); border-radius: 6px; margin-bottom: .5rem; }
.mbc__step.is-open { border-color: var(--mbc-border-strong); }

.mbc__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: .9rem 1rem;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.mbc__head:focus-visible { outline: 2px solid var(--mbc-border-strong); outline-offset: -2px; }

.mbc__label {
	flex: 1;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .8125rem;
}
.mbc__chosen { color: var(--mbc-muted); font-size: .9375rem; }

.mbc__chevron {
	width: 10px; height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .18s ease;
	flex: none;
}
.mbc__step.is-open .mbc__chevron { transform: rotate(-135deg); }

.mbc__panel { display: none; padding: 0 1rem 1rem; }
.mbc__step.is-open .mbc__panel { display: block; }

.mbc__series {
	margin: .75rem 0 .5rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--mbc-muted);
}

/* Options ------------------------------------------------------------- */
.mbc__panel--swatch .mbc__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: .75rem;
}
.mbc__panel--list .mbc__options { display: flex; flex-direction: column; gap: .25rem; }

.mbc__option { position: relative; cursor: pointer; display: block; }
.mbc__option input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Swatch tiles */
.mbc__option--swatch { text-align: center; }
.mbc__swatch {
	display: block;
	border: 2px solid transparent;
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--mbc-bg-soft);
}
.mbc__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbc__option--swatch .mbc__name {
	display: block;
	margin-top: .4rem;
	font-size: .75rem;
	line-height: 1.25;
}
.mbc__option--swatch input:checked ~ .mbc__swatch { border-color: var(--mbc-border-strong); }
.mbc__option--swatch input:focus-visible ~ .mbc__swatch { outline: 2px solid var(--mbc-border-strong); outline-offset: 2px; }

/* Text rows */
.mbc__panel--list .mbc__option {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .75rem;
	border: 1px solid var(--mbc-border);
	border-radius: 4px;
}
.mbc__panel--list .mbc__option:has(input:checked) { border-color: var(--mbc-border-strong); }
.mbc__panel--list .mbc__name { flex: 1; }

.mbc__surcharge { color: var(--mbc-muted); font-size: .875rem; white-space: nowrap; }

@media (max-width: 480px) {
	.mbc__panel--swatch .mbc__options { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.mbc__chevron { transition: none; }
}

/* ---------------------------------------------------------------------
   Corrections after first render on the live template.
   --------------------------------------------------------------------- */

/* The theme styles labels and inputs inside product forms; neutralise that
   inside the configurator so option tiles aren't drawn as form fields. */
.mbc label,
.mbc button {
	border: 0;
	outline: 0;
	box-shadow: none;
	background: none;
	margin: 0;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
}
.mbc .mbc__head { display: flex; }
.mbc__head:focus-visible { outline: 2px solid var(--mbc-border-strong); outline-offset: -2px; }

/* Colour swatches stay circular and fill the tile. Shape-led options
   (size, leg style, accessories, trays) are line drawings on transparent
   backgrounds, so they need containing in a square tile instead of
   cropping to a circle — otherwise you see the empty middle. */
[data-attribute="size"] .mbc__swatch,
[data-attribute="leg-style"] .mbc__swatch,
[data-attribute="accessories"] .mbc__swatch,
[data-attribute="height"] .mbc__swatch,
[data-attribute="tray"] .mbc__swatch,
[data-attribute="tray-colour"] .mbc__swatch,
[data-attribute="trays-colour"] .mbc__swatch {
	border-radius: 6px;
	background: #fff;
	border: 2px solid var(--mbc-border);
}
[data-attribute="size"] .mbc__swatch img,
[data-attribute="leg-style"] .mbc__swatch img,
[data-attribute="accessories"] .mbc__swatch img,
[data-attribute="height"] .mbc__swatch img,
[data-attribute="tray"] .mbc__swatch img,
[data-attribute="tray-colour"] .mbc__swatch img,
[data-attribute="trays-colour"] .mbc__swatch img {
	object-fit: contain;
	padding: 8%;
	box-sizing: border-box;
}
[data-attribute="size"] .mbc__option--swatch input:checked ~ .mbc__swatch,
[data-attribute="leg-style"] .mbc__option--swatch input:checked ~ .mbc__swatch,
[data-attribute="accessories"] .mbc__option--swatch input:checked ~ .mbc__swatch,
[data-attribute="height"] .mbc__option--swatch input:checked ~ .mbc__swatch,
[data-attribute="tray"] .mbc__option--swatch input:checked ~ .mbc__swatch,
[data-attribute="tray-colour"] .mbc__option--swatch input:checked ~ .mbc__swatch,
[data-attribute="trays-colour"] .mbc__option--swatch input:checked ~ .mbc__swatch {
	border-color: var(--mbc-border-strong);
}

/* Size tiles are wider than colour chips and carry a price line. */
[data-attribute="size"] .mbc__options {
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

/* Selected value in the collapsed header */
.mbc__chosen {
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Surcharge under a swatch tile rather than beside it */
.mbc__option--swatch .mbc__surcharge {
	display: block;
	margin-top: .1rem;
	font-size: .75rem;
}

/* The theme paints focused buttons in brand red, which leaves the last-clicked
   accordion header looking permanently selected. Keep the keyboard outline,
   drop the fill. */
.mbc__head:focus,
.mbc__head:active,
.mbc__head:hover {
	background: none !important;
	color: inherit !important;
	box-shadow: none !important;
}
.mbc__head:focus-visible {
	outline: 2px solid var(--mbc-border-strong);
	outline-offset: -2px;
}
.mbc__label { color: inherit; }

/* ---------------------------------------------------------------------
   Second pass: brand colour, smaller swatches, text pills for size.
   --------------------------------------------------------------------- */

.mbc { --mbc-brand: #db143d; }

.mbc__label { color: var(--mbc-brand); }

/* Swatches at roughly half the previous size */
.mbc__panel--swatch .mbc__options {
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: .6rem;
}
.mbc__option--swatch .mbc__name { font-size: .6875rem; margin-top: .3rem; }
.mbc__option--swatch .mbc__surcharge { font-size: .6875rem; }

/* Size and height as plain pills, Herman Miller style */
.mbc__panel--pill .mbc__options {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.mbc__option--pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	padding: .55rem .9rem;
	border: 1px solid var(--mbc-border);
	border-radius: 4px;
	line-height: 1.2;
	transition: border-color .12s ease, background-color .12s ease;
}
.mbc__option--pill .mbc__name { font-size: .875rem; font-weight: 500; }
.mbc__option--pill .mbc__surcharge { font-size: .75rem; }
.mbc__option--pill:hover { border-color: #999; }
.mbc__option--pill:has(input:checked) {
	background: #111;
	border-color: #111;
	color: #fff;
}
.mbc__option--pill:has(input:checked) .mbc__surcharge { color: #ddd; }
.mbc__option--pill:has(input:focus-visible) { outline: 2px solid var(--mbc-brand); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Third pass: header hierarchy, full-width hit area, softer pill borders.
   Specificity is raised with .mbc on each selector because the theme's own
   button and label rules were overriding the earlier declarations — which
   is what stopped the header filling its row and swallowing clicks.
   --------------------------------------------------------------------- */

.mbc .mbc__head {
	display: flex;
	width: 100%;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.1rem;
	cursor: pointer;
}

/* Attribute name leads; the chosen value and chevron sit right. */
.mbc .mbc__label {
	flex: 0 0 auto;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--mbc-brand);
}
.mbc .mbc__chosen {
	margin-left: auto;
	font-size: .9375rem;
	color: #555;
	max-width: 50%;
}
.mbc .mbc__chevron { margin-left: .25rem; }

/* Rule under the header while the panel is open, as on the reference. */
.mbc__step.is-open .mbc__head { border-bottom: 1px solid var(--mbc-border); }
.mbc__step.is-open .mbc__panel { padding-top: 1rem; }

/* Softer resting border on the size pills, firm when chosen. */
.mbc__option--pill {
	border-color: #dcdcdc;
	padding: .65rem 1.1rem;
	border-radius: 3px;
}
.mbc__option--pill:hover { border-color: #b5b5b5; }

/* The theme reset above (.mbc label) outweighs the single-class option rules,
   which is what stripped the pill and row borders. Re-declare them with two
   classes so they win, rather than reaching for !important. */
.mbc .mbc__option--pill {
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	padding: .65rem 1.1rem;
}
.mbc .mbc__option--pill:hover { border-color: #b5b5b5; }
.mbc .mbc__option--pill:has(input:checked) {
	background: #111;
	border-color: #111;
	color: #fff;
}

.mbc .mbc__panel--list .mbc__option {
	border: 1px solid var(--mbc-border);
	border-radius: 4px;
	padding: .55rem .75rem;
}
.mbc .mbc__panel--list .mbc__option:has(input:checked) { border-color: var(--mbc-border-strong); }

.mbc .mbc__option--swatch .mbc__swatch { border: 2px solid transparent; }
.mbc .mbc__option--swatch input:checked ~ .mbc__swatch { border-color: var(--mbc-border-strong); }

/* Selected swatch: a thin ring with breathing room reads better than a heavy
   band pressed against a transparent-background product photo. */
.mbc .mbc__option--swatch .mbc__swatch {
	border: 1px solid #e2e2e2;
	padding: 2px;
	background: #fff;
}
.mbc .mbc__option--swatch input:checked ~ .mbc__swatch {
	border-color: var(--mbc-border-strong);
	box-shadow: 0 0 0 1px var(--mbc-border-strong);
}

/* Heading rendered by the shortcode, so it appears only when the product
   actually has options rather than leaving an empty titled section. */
.mbc__heading {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

/* The theme renders h3 as serif uppercase. The original section heading was a
   Text Editor block in the body font, so match that rather than the h3 style. */
.mbc .mbc__heading,
.mbc__heading {
	font-family: inherit;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
	margin: 0 0 1rem;
}

/* Price shown on products with no options: same row treatment, no rule beneath
   since there is no option list following it. */
.mbc--price-only .mbc__total {
	border-bottom: 0;
	margin-bottom: 0;
}

/* Price-only products: the total row needs the same flex spacing as the
   configurable version, which the theme was not applying on its own. */
.mbc--price-only .mbc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	margin: 0 0 1rem;
	border-bottom: 0;
}
.mbc--price-only .mbc__total-label {
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbc-muted);
}
.mbc--price-only .mbc__total-value {
	font-size: 1.5rem;
	font-weight: 700;
}

/* Unanswered groups read "Choose" rather than a value, in the muted tone so
   the summary column still scans as a list of answers once filled in. */
.mbc__chosen.is-empty {
	color: var(--mbc-muted);
	font-style: italic;
}

/* Add to Cart while the configuration is incomplete. The theme has its own
   :disabled treatment that reads purple against the teal button, so set the
   colours explicitly rather than relying on opacity over the brand colour. */
form.cart button.mbc-disabled,
form.cart [type="submit"].mbc-disabled,
.single_add_to_cart_button.mbc-disabled,
.single_add_to_cart_button.mbc-disabled:hover,
.single_add_to_cart_button[disabled],
.single_add_to_cart_button:disabled,
form.cart [type="submit"]:disabled {
	background: #e0e0e0 !important;
	border-color: #e0e0e0 !important;
	color: #8c8c8c !important;
	opacity: 1;
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: auto;
}

/* A group with only one option is pre-selected on load, so it reads as
   settled rather than as something still waiting on the customer. */
.mbc [data-mbc-step].mbc-auto > [data-mbc-toggle] {
	color: inherit;
}

/* v4.13 — shown when Business Central cannot price the chosen configuration. */
.mbc__note {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #555;
}
.mbc__note[hidden] { display: none; }

/* v4.14 — BUY button for logged-out visitors, in place of the price. */
.mbc__total--gated {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.mbc-buy.button {
	display: inline-block;
	padding: 12px 36px;
	border-radius: 999px;
	background: #b5121b;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
}
.mbc-buy.button:hover { background: #8f0e15; color: #fff; }
.mbc-buy__note { font-size: 14px; color: #555; }