/**
 * Milestone 2 — single-page buy flow.
 *
 * Keeps the theme's existing language (brand blue #0171B9, 10px radius cards, semibold
 * option labels) and adds the states the stepper never needed: selected, unavailable,
 * focus, and a live price.
 *
 * Selectors are intentionally long. The legacy rules in bkp_12_06_19_style.css are nested
 * five levels deep (and size option titles at 30px for labels like "1TB"), so anything
 * shorter loses on specificity.
 */

.cei-m2-buyflow {
	--m2-brand: #0171B9;
	--m2-brand-dark: #015d96;
	--m2-line: #dfe3e8;
	--m2-ink: #1d2b36;
	--m2-muted: #6b7c8a;
}

/* Selects stay in the DOM (WooCommerce reads/writes them) but are visually replaced. */
.cei-m2-buyflow form.m2-enhanced .variations {
	display: none;
}

.cei-m2-buyflow .m2-cards {
	width: 100%;
	float: none;
}

/* ---------- one attribute block ---------- */

.cei-m2-buyflow .m2-cards .m2-attr {
	width: 100%;
	float: none;
	margin: 0 0 28px;
	padding: 0;
}

.cei-m2-buyflow .m2-cards .m2-attr .cei-hdd-ssd-left {
	width: 100%;
	float: none;
	margin: 0 0 12px;
}

.cei-m2-buyflow .m2-cards .m2-attr .cei-hdd-ssd-left h5 {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--m2-line);
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* Theme centres headings in this column; the option grid below is left-aligned. */
	text-align: left;
	color: var(--m2-muted);
	font-family: 'open_sanssemibold', sans-serif;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-axis {
	width: 100%;
	float: none;
}

/**
 * Drive-type header (HDD / SSD). The live page presents these as two labelled groups; merging
 * them into one flat alphabetical list was a regression, so the grouping is restored here even
 * though both feed a single variation axis.
 */
.cei-m2-buyflow .m2-cards .m2-attr .m2-group-label {
	margin: 4px 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--m2-brand);
	font-family: 'open_sanssemibold', sans-serif;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-group-label + .m2-grid {
	margin-bottom: 16px;
}

/* Grid rather than floats: option labels vary in length and floats leave ragged rows. */
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid {
	width: 100%;
	float: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid.m2-grid-colour {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* ---------- option card ---------- */

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option {
	position: relative;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	min-height: 62px;
	float: none;
	margin: 0;
	padding: 12px 10px;
	background: #fff;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label:hover {
	border-color: var(--m2-brand);
	box-shadow: 0 2px 10px rgba(1, 113, 185, .12);
}

/* The radio is the accessible control; keep it reachable but visually replaced. */
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label input[type="radio"]:focus-visible + .cei-attribute-title {
	outline: 2px solid var(--m2-brand);
	outline-offset: 6px;
	border-radius: 4px;
}

/* Override the legacy 30px title sizing — these cards carry a name AND a price. */
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.cei-attribute-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 0;
	font-size: 16px;
	line-height: 1.25;
	text-align: center;
	color: var(--m2-ink);
	font-family: 'open_sanssemibold', sans-serif;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.m2-option-name {
	display: block;
	padding: 0;
	font-size: 16px;
	line-height: 1.25;
	color: inherit;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.cei-attribute-price {
	display: block;
	padding: 0;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	/* Brand blue, not grey: the price is the second most important thing on the card. */
	color: var(--m2-brand);
	font-family: 'open_sanssemibold', sans-serif;
}

/* ---------- selected ---------- */

/**
 * The legacy stylesheet paints `input:checked + span` blue with its own 10px radius. Our
 * cards colour the whole label instead, so that would stack a second blue block inside the
 * first. Neutralise it here rather than editing the shared legacy file.
 */
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label input:checked + span.cei-attribute-title {
	background-color: transparent;
	border-radius: 0;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-selected label {
	background: var(--m2-brand);
	border-color: var(--m2-brand);
	box-shadow: 0 3px 12px rgba(1, 113, 185, .25);
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-selected label span.cei-attribute-title,
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-selected label span.m2-option-name,
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-selected label span.cei-attribute-price {
	color: #fff;
}

/* Tick, so selection survives being read in greyscale or by colour-blind users. */
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-selected label:after {
	content: "";
	position: absolute;
	top: 7px;
	right: 9px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- unavailable combination ---------- */

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-unavailable label {
	background: #f6f7f9;
	border-color: #ebeef1;
	cursor: not-allowed;
	box-shadow: none;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-unavailable label span.cei-attribute-title,
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-unavailable label span.m2-option-name,
.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-unavailable label span.cei-attribute-price {
	color: #a8b4bd;
	text-decoration: line-through;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-unavailable label input[type="radio"] {
	cursor: not-allowed;
}

/* ---------- colour swatches ---------- */

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.m2-swatch {
	display: block;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0 0 2px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option.m2-selected label span.m2-swatch {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 2px #fff;
}

.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.m2-swatch-fallback {
	background: linear-gradient(135deg, #e9edf1 0%, #cfd6dd 100%);
}

/* ---------- certification block ---------- */

/**
 * Certification: two equal cards side by side with the radio inside the label, rather than
 * stacked boxes of different heights with the control floating right.
 */
/**
 * Stacked, not side by side. The buy column is ~450px, so two cards never fit on one row and
 * flex-wrap left the "OR" stranded to the right of the first card.
 */
.cei-m2-buyflow .fips_level_wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 26px;
}

/**
 * The legacy stylesheet pins these to `width:40%; display:inline-block; text-align:center`,
 * sized for the old two-across stepper layout. Reset all three — in a ~450px column that left
 * the cards under half width with centred, wrapped text.
 */
.cei-m2-buyflow .fips_level_wrap .fips_level_conten {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.cei-m2-buyflow .fips_level_wrap .fips_level_conten label,
.cei-m2-buyflow .fips_level_wrap .fips_level_conten .m2-cert-text {
	text-align: left;
}

.cei-m2-buyflow .fips_level_conten label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	height: 100%;
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--m2-ink);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cei-m2-buyflow .fips_level_conten label:hover {
	border-color: var(--m2-brand);
}

.cei-m2-buyflow .fips_level_conten input[type="radio"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
	accent-color: var(--m2-brand);
}

.cei-m2-buyflow .fips_level_conten.m2-selected label {
	border-color: var(--m2-brand);
	box-shadow: inset 0 0 0 1px var(--m2-brand), 0 2px 10px rgba(1, 113, 185, .12);
}

.cei-m2-buyflow .fips_level_wrap .fips_level_conten_seperator {
	display: block;
	flex: 0 0 auto;
	width: 100%;          /* legacy sets 18%, sized for the old inline-block layout */
	padding: 0;
	font-size: 12px;
	letter-spacing: .08em;
	text-align: center;
	color: var(--m2-muted);
}

/* ---------- DriveSecurity licence add-on ---------- */

.cei-m2-buyflow .m2-drivesecurity {
	margin: 0 0 26px;
}

/**
 * The licence description is long marketing copy. On the old stepper it had a whole step to
 * itself; on one page it has to stay available without pushing the buttons off screen.
 */
.cei-m2-buyflow .m2-drivesecurity-desc {
	max-height: 132px;
	overflow-y: auto;
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #f7f9fb;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--m2-muted);
}

.cei-m2-buyflow .m2-drivesecurity-desc p {
	margin: 0 0 8px;
}

.cei-m2-buyflow .m2-drivesecurity-desc p:last-child {
	margin-bottom: 0;
}

.cei-m2-buyflow .m2-drivesecurity .m2-drivesecurity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 62px;
	margin: 0;
	padding: 12px 10px;
	background: #fff;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option label:hover {
	border-color: var(--m2-brand);
	box-shadow: 0 2px 10px rgba(1, 113, 185, .12);
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option label input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option span.cei-attribute-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 0;
	text-align: center;
	background: none;
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option span.m2-option-name {
	font-size: 15px;
	color: var(--m2-ink);
	font-family: 'open_sanssemibold', sans-serif;
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option span.cei-attribute-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--m2-brand);
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option.m2-selected label {
	background: var(--m2-brand);
	border-color: var(--m2-brand);
	box-shadow: 0 3px 12px rgba(1, 113, 185, .25);
}

.cei-m2-buyflow .m2-drivesecurity .m2-ds-option.m2-selected span.m2-option-name,
.cei-m2-buyflow .m2-drivesecurity .m2-ds-option.m2-selected span.cei-attribute-price {
	color: #fff;
}

/* Says what is still needed, instead of leaving a grey button unexplained. */
.cei-m2-buyflow .m2-hint {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--m2-muted);
}

.cei-m2-buyflow h2.cei-hsq-customisation-title {
	margin: 0 0 12px;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--m2-muted);
	font-family: 'open_sanssemibold', sans-serif;
}

/* ---------- price + add to cart ---------- */

.cei-m2-buyflow .woocommerce-variation-price {
	margin: 4px 0 16px;
}

.cei-m2-buyflow .woocommerce-variation-price .price {
	font-size: 34px;
	line-height: 1.1;
	color: var(--m2-ink);
	font-family: 'open_sanssemibold', sans-serif;
}

.cei-m2-buyflow .woocommerce-variation-availability p {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--m2-muted);
}

.cei-m2-buyflow .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 18px;
	border-top: 1px solid var(--m2-line);
}

.cei-m2-buyflow .woocommerce-variation-add-to-cart .quantity input.qty {
	width: 76px;
	height: 50px;
	padding: 0 8px;
	text-align: center;
	font-size: 16px;
	border: 1px solid var(--m2-line);
	border-radius: 8px;
}

.cei-m2-buyflow form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 50px;
	padding: 0 28px;
	background: var(--m2-brand);
	border: 0;
	border-radius: 8px;
	/*
	 * `form.cart` is in the selector purely for specificity. style.css:251 targets
	 * button.single_add_to_cart_button.button.alt (three classes); dropping the
	 * .woocommerce-variation-add-to-cart ancestor to cover simple products took this rule below
	 * that and the button reverted to the old white one.
	 *
	 * !important is needed, not preferred: style.css:251 sets `color:#000!important` on
	 * button.single_add_to_cart_button.button.alt for the old white-background button. Against
	 * this button's brand-blue fill that reads black-on-blue, so the white has to win.
	 */
	color: #fff !important;
	font-size: 16px;
	letter-spacing: .02em;
	font-family: 'open_sanssemibold', sans-serif;
	cursor: pointer;
	transition: background-color .15s ease;
}

.cei-m2-buyflow form.cart button.single_add_to_cart_button:hover {
	background: var(--m2-brand-dark);
	color: #fff !important;   /* style.css:261 turns it blue-on-blue on hover */
}

/* WooCommerce marks the button disabled until every axis is answered. */
.cei-m2-buyflow .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled button.single_add_to_cart_button {
	background: #b9c4cc;
	cursor: not-allowed;
}

.cei-m2-buyflow .single_variation_wrap .woocommerce-variation.single_variation {
	margin-bottom: 0;
}

.cei-m2-buyflow .reset_variations {
	font-size: 13px;
	color: var(--m2-muted);
}

/* ---------- tablet ---------- */

/* The grid (auto-fill/minmax) and add-to-cart row (flex-wrap + flex-basis) already
   reflow on their own at any width, so this doesn't need a full duplicate of the
   mobile block below -- just the one value that was still sized for desktop: a
   34px price reads oversized once the buy box is squeezed into a tablet-width
   sidebar next to the gallery. */
@media (min-width: 768px) and (max-width: 991px) {
	.cei-m2-buyflow .woocommerce-variation-price .price {
		font-size: 29px;
	}
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
	.cei-m2-buyflow .m2-cards .m2-attr .m2-grid {
		grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
		gap: 8px;
	}

	.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label {
		min-height: 56px;
		padding: 10px 8px;
	}

	.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.cei-attribute-title,
	.cei-m2-buyflow .m2-cards .m2-attr .m2-grid .m2-option label span.m2-option-name {
		font-size: 14px;
	}

	.cei-m2-buyflow .woocommerce-variation-price .price {
		font-size: 27px;
	}

	.cei-m2-buyflow .woocommerce-variation-add-to-cart {
		flex-direction: column;
		align-items: stretch;
	}

	.cei-m2-buyflow .woocommerce-variation-add-to-cart .quantity input.qty {
		width: 100%;
	}

	/* .single_add_to_cart_button's base rule sets flex: 1 1 220px for the row layout
	   above (220px preferred WIDTH next to the quantity box). flex-basis is main-axis,
	   and flex-direction just switched to column, so that same 220px is read as a
	   preferred HEIGHT instead -- the button was rendering ~220px tall. Reset to
	   flex: 0 0 auto so its height comes from min-height/padding again; align-items:
	   stretch above already makes it full width on the cross axis. */
	.cei-m2-buyflow form.cart button.single_add_to_cart_button {
		flex: 0 0 auto;
	}
}

/* ---------- add to cart: processing state ---------- */

/*
 * The add takes a few seconds on a cold cart, and with no page reload to signal it the button
 * used to look completely inert. Label is swapped for a spinner and clicks are blocked, so the
 * customer can see it is working and cannot fire a second add.
 *
 * WooCommerce already puts a .loading class on the button and styles its own ::after with an
 * icon glyph, so both content and font-size are overridden here rather than fought with.
 */
.cei-m2-buyflow form.cart button.single_add_to_cart_button.loading {
	position: relative;
	color: transparent !important;   /* same !important fight as the base rule above */
	pointer-events: none;
	background: var(--m2-brand-dark);
}

.cei-m2-buyflow form.cart button.single_add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	padding: 0;
	font-size: 0;
	opacity: 1;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: m2-spin .6s linear infinite;
}

/* Brief confirmation once the item is in — the popup opening is the main signal. */
.cei-m2-buyflow form.cart button.single_add_to_cart_button.added {
	background: #1f7a44;
	color: #fff !important;
}

.cei-m2-buyflow form.cart button.single_add_to_cart_button.added::after {
	content: " \2713";
	font-size: inherit;
	opacity: 1;
	margin: 0;
	border: 0;
	animation: none;
	position: static;
}

@keyframes m2-spin {
	to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: hold a static ring rather than spin it. */
@media (prefers-reduced-motion: reduce) {
	.cei-m2-buyflow form.cart button.single_add_to_cart_button.loading::after {
		animation: none;
	}
}

/* ---------- mini cart: busy state ---------- */

/*
 * The cart endpoints take ~4s (WordPress boots 47 plugins before reaching the cart), so the
 * panel shows progress rather than sitting inert.
 *
 * 2026-08-25 redesign: a dimmed scrim + centred spinner, replacing the old bare 16px ring
 * pinned to the top-right corner (which read as a stray loose element, not a loading state,
 * especially once real content had rendered underneath it).
 *
 * Two things this must NOT do, both learned the hard way:
 *   - never set `position` on .cei-mini-cart. style.css positions it absolute under the
 *     cart icon (top:calc(100% + 18px), left:50%, translateX(-50%)); overriding that dropped
 *     the whole panel into normal flow and it rendered unstyled and misplaced.
 *   - never use ::before/::after on .cei-mini-cart itself -- it has no pseudo-elements of its
 *     own now, but .cei-mini-cart-header and .widget_shopping_cart_content are its real children
 *     and either would still visually break if something else claimed their ::before/::after.
 * The scrim + spinner therefore both hang off .widget_shopping_cart_content, which owns neither.
 */
.cei-mini-cart.m2-cart-busy .widget_shopping_cart_content {
	position: relative;
	min-height: 80px;
}

.cei-mini-cart.m2-cart-busy .widget_shopping_cart_content::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .72);
	z-index: 1;
}

.cei-mini-cart.m2-cart-busy .widget_shopping_cart_content::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2.5px solid rgba(1, 113, 185, .2);
	border-top-color: #0171B9;
	border-radius: 50%;
	animation: m2-spin .6s linear infinite;
	z-index: 2;
}

/* Block further cart mutations while one is in flight, never the Basket/Checkout links. */
.cei-mini-cart.m2-cart-busy .remove_from_cart_button {
	pointer-events: none;
	opacity: .4;
}

/* The line being removed: visibly on its way out, but still holding its space. */
.cei-mini-cart .woocommerce-mini-cart-item.m2-removing {
	opacity: .45;
	transition: opacity .2s ease;
}

/* The running total on the product page, once a DriveSecurity licence is folded in. */
.cei-m2-buyflow .m2-price-note {
	margin-top: 4px;
	font-size: 13px;
	color: var(--m2-muted, #6b7785);
}

/* ---------- cloudAshur KeyWriter licence add-on ---------- */

.cei-m2-buyflow .m2-keywriter {
	margin: 0 0 26px;
}

.cei-m2-buyflow .m2-keywriter-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 12px 14px;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
}

.cei-m2-buyflow .m2-keywriter.m2-keywriter-on .m2-keywriter-controls {
	border-color: var(--m2-accent, #0f2c4d);
}

.cei-m2-buyflow .m2-keywriter-toggle,
.cei-m2-buyflow .m2-keywriter-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	cursor: pointer;
}

.cei-m2-buyflow .m2-keywriter-qty input {
	width: 90px;
	padding: 6px 8px;
	border: 1px solid var(--m2-line);
	border-radius: 6px;
}

/* Disabled until the box is ticked, so it has to read as inactive rather than broken. */
.cei-m2-buyflow .m2-keywriter-qty input:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/**
 * The tier table is reference, not a control. Kept compact and quiet so it does not compete with
 * the capacity and DriveSecurity choices above it.
 */
.cei-m2-buyflow .m2-keywriter-tiers {
	width: auto;
	margin: 10px 0 0;
	border-collapse: collapse;
	font-size: 12px;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-keywriter-tiers caption {
	padding: 0 0 4px;
	text-align: left;
	font-weight: 600;
}

.cei-m2-buyflow .m2-keywriter-tiers th,
.cei-m2-buyflow .m2-keywriter-tiers td {
	padding: 3px 14px 3px 0;
	text-align: left;
	font-weight: 400;
	border: 0;
}

/* ---------- engraving / customisation ---------- */

.cei-m2-buyflow .m2-customisation {
	margin: 0 0 26px;
}

.cei-m2-buyflow .m2-customisation-hint {
	margin: 0 0 10px;
	font-size: 13px;
	font-style: italic;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-customisation-item {
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	margin-bottom: 8px;
	overflow: hidden;
}

.cei-m2-buyflow .m2-customisation-item.m2-customisation-on {
	border-color: var(--m2-accent, #0f2c4d);
}

.cei-m2-buyflow .m2-customisation-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
}

.cei-m2-buyflow .m2-customisation-name {
	flex: 1;
}

.cei-m2-buyflow .m2-customisation-price {
	font-weight: 600;
}

/* Revealed by the checkbox; [hidden] alone loses to the flex display. */
.cei-m2-buyflow .m2-customisation-fields[hidden] {
	display: none;
}

.cei-m2-buyflow .m2-customisation-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 12px 14px 14px;
	border-top: 1px solid var(--m2-line);
	background: #f7f9fb;
}

.cei-m2-buyflow .m2-customisation-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 12px;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-customisation-field input[type="text"],
.cei-m2-buyflow .m2-customisation-field select {
	padding: 6px 8px;
	border: 1px solid var(--m2-line);
	border-radius: 6px;
	font-size: 14px;
	color: #1c1c1c;
}

.cei-m2-buyflow .m2-customisation-field input[type="text"] {
	min-width: 200px;
}

.cei-m2-buyflow .m2-customisation-style {
	display: flex;
	gap: 10px;
	padding-bottom: 7px;
}

.cei-m2-buyflow .m2-customisation-style label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	cursor: pointer;
}

.cei-m2-buyflow .m2-customisation-logo small {
	font-size: 11px;
}

/* ---------- cloudAshur buying options ---------- */

.cei-m2-buyflow .m2-cloudashur {
	margin: 0 0 26px;
}

.cei-m2-buyflow .m2-cloudashur-item {
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	margin-bottom: 8px;
	padding: 10px 14px;
}

.cei-m2-buyflow .m2-cloudashur-item.m2-cloudashur-on {
	border-color: var(--m2-accent, #0f2c4d);
}

.cei-m2-buyflow .m2-cloudashur-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-size: 14px;
}

.cei-m2-buyflow .m2-cloudashur-name {
	flex: 1;
	font-weight: 600;
}

.cei-m2-buyflow .m2-cloudashur-desc {
	margin: 6px 0 0 26px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-cloudashur-fields[hidden] {
	display: none;
}

.cei-m2-buyflow .m2-cloudashur-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 12px 0 0 26px;
	padding-top: 12px;
	border-top: 1px solid var(--m2-line);
}

.cei-m2-buyflow .m2-cloudashur-fields input[type="number"] {
	width: 90px;
	padding: 6px 8px;
	border: 1px solid var(--m2-line);
	border-radius: 6px;
}

/* Three terms side by side while there is room, stacking on narrow screens. */
.cei-m2-buyflow .m2-cloudashur-term {
	min-width: 130px;
}

.cei-m2-buyflow .m2-cloudashur-hint {
	margin-top: 8px;
	color: #b3261e;
	font-size: 13px;
}

/* ---------- engraving live preview ---------- */

/**
 * The surface photo, with the engraved text laid over it. Fixed aspect rather than a plain <img>
 * so the text can be centred on the plate regardless of the artwork's own dimensions.
 */
.cei-m2-buyflow .m2-customisation-preview {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 74px;
	margin-bottom: 4px;
	padding: 8px 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-align: center;
}

.cei-m2-buyflow .m2-customisation-preview-text {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.2;
	/* The plates are dark metal; white with a soft shadow reads on all of them. */
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* Untouched, it is an example rather than their engraving - say so visually. */
.cei-m2-buyflow .m2-customisation-preview-text.m2-preview-placeholder {
	opacity: .6;
	font-style: italic;
}

.cei-m2-buyflow .m2-customisation-logo-preview {
	max-height: 58px;
	max-width: 60%;
	object-fit: contain;
}

.cei-m2-buyflow .m2-customisation-logo-preview[hidden] {
	display: none;
}

/* ---------- Remote Management Console (managed-device licence) ---------- */

.cei-m2-buyflow .m2-rmc {
	margin: 0 0 26px;
}

/*
 * The opt-in question is a full-width prompt rather than a compact inline control: on live it is
 * a sentence the customer reads and answers, not a checkbox in a row of add-ons.
 */
.cei-m2-buyflow .m2-rmc-toggle {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	cursor: pointer;
}

.cei-m2-buyflow .m2-rmc-toggle input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.cei-m2-buyflow .m2-rmc-years[hidden] {
	display: none;
}

.cei-m2-buyflow .m2-rmc-years {
	margin-top: 16px;
}

/*
 * Three year blocks side by side, matching live's layout, but allowed to wrap rather than forced
 * into a 3-up grid -- a product may offer only one or two priced tables (the tier meta is
 * per-product and some markets fill in fewer), and a rigid 3-column grid left ghost gaps.
 */
.cei-m2-buyflow .m2-rmc-year-blocks {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.cei-m2-buyflow .m2-rmc-year-block {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	padding: 14px;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
}

.cei-m2-buyflow .m2-rmc-year-block h4 {
	margin: 0 0 10px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

.cei-m2-buyflow .m2-rmc-tiers {
	width: 100%;
	margin: 0 0 12px;
	border-collapse: collapse;
	font-size: 12px;
}

.cei-m2-buyflow .m2-rmc-tiers caption {
	padding: 0 0 6px;
	text-align: center;
	font-weight: 600;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-rmc-tiers th,
.cei-m2-buyflow .m2-rmc-tiers td {
	padding: 3px 6px;
	text-align: left;
	font-weight: 400;
	border: 0;
}

.cei-m2-buyflow .m2-rmc-tiers thead th {
	font-weight: 600;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-rmc-tiers td:last-child {
	text-align: right;
}

/* Pushed to the bottom so the quantity inputs line up across blocks of unequal tier counts. */
.cei-m2-buyflow .m2-rmc-qty {
	display: block;
	margin: auto 0 0;
	font-size: 13px;
	text-align: center;
}

.cei-m2-buyflow .m2-rmc-qty span {
	display: block;
	margin-bottom: 6px;
	color: var(--m2-muted, #6b7785);
}

.cei-m2-buyflow .m2-rmc-qty input {
	width: 100%;
	padding: 7px 8px;
	border: 1px solid var(--m2-line);
	border-radius: 6px;
	text-align: center;
}

/* Disabled until the question is answered, so it reads as inactive rather than broken. */
.cei-m2-buyflow .m2-rmc-qty input:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ---------- KRMC (Kanguru Remote Management Console) ---------- */

.cei-m2-buyflow .m2-krmc {
	margin: 0 0 26px;
}

.cei-m2-buyflow .m2-krmc h3 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
}

.cei-m2-buyflow .m2-krmc-types {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
}

.cei-m2-buyflow .m2-krmc-type-option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--m2-line);
	border-radius: 20px;
	font-size: 13px;
	cursor: pointer;
}

.cei-m2-buyflow .m2-krmc-type-option.m2-selected {
	border-color: var(--m2-accent, #0f2c4d);
	background: var(--m2-accent, #0f2c4d);
	color: #fff;
}

.cei-m2-buyflow .m2-krmc-years[hidden] {
	display: none;
}

.cei-m2-buyflow .m2-krmc-years {
	padding: 12px 14px;
	border: 1px solid var(--m2-line);
	border-radius: 10px;
	margin-top: 10px;
}

.cei-m2-buyflow .m2-krmc-year-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cei-m2-buyflow .m2-krmc-year-option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid var(--m2-line);
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
}

.cei-m2-buyflow .m2-krmc-year-option.m2-selected {
	border-color: var(--m2-accent, #0f2c4d);
	background: #eef3fa;
}

.cei-m2-buyflow .m2-krmc-year-option input:disabled {
	cursor: not-allowed;
}