/**
 * Achtis Kit Builder — one-step-at-a-time wizard styling.
 * Colours match the Achtis Group theme: $theme-colours' blue/grey/grey-light
 * (dev/theme/achtis-group/sass/abstracts/variables/_colors.scss — the same
 * blue used for .entry-title and .cta--blue) and the real WooCommerce error
 * colour wired up in _components.scss ($woocommerce__color-error), not the
 * dead woocommerce/colours.scss partial (its $theme-colours "green" key
 * doesn't exist and it's absent from the compiled style.css).
 */

.akb-builder {
	--akb-border: #ccc;
	--akb-muted: #919191;
	/* Primary/dominant accent is the theme's lighter blue — the actual CTA
	   colour used in the theme's own templates (content-snippet.php's "Learn
	   more" link is explicitly text--blue-light, not the darker entry-title
	   blue), and lighter fills read as less heavy across many repeated
	   controls (every step's button, badge, and selected swatch) than the
	   dark blue would. */
	--akb-accent: #419cd8;
	/* Dark blue is now the minority colour: settled/"done" state, hover-darken
	   on the primary button, and small text/glyphs where the lighter blue's
	   ~3.5:1 contrast on white would be too low to read comfortably. */
	--akb-accent-dark: #092c5f;
	/* Theme's "black" ($theme-colours black, #383838) doubles as a dark
	   neutral — used for the size pill's selected state so it reads as a
	   plain choice, distinct from the colour swatches' blue accent ring. */
	--akb-muted-dark: #383838;
	--akb-bg-soft: #f5f5f5;
	--akb-error: #e2401c;
	/* Shared control height for calculator fields. The store theme forces its
	   own tall padding + bottom margin onto product-page inputs, so the drawer
	   overrides both and pins every field to this height for a clean grid. */
	--akb-field-h: 2.75em;

	margin: 1.5em 0;
	font-size: 16px;
	line-height: 1.5;
}

[x-cloak] {
	display: none !important;
}

/* Stage — steps stacked with a vertical numbered rail down the left. Inactive
   steps grey their content only (the rail stays crisp) and can be clicked via
   their header to become active. The rail's dot + connector replace the old
   top progress bar and the side accent line. */

.akb-stage > section {
	display: flex;
	gap: 1.1em;
}

.akb-step__rail {
	flex: 0 0 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.akb-step__dot {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--akb-border);
	background: #fff;
	color: var(--akb-muted);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.akb-step__dot.is-active {
	border-color: var(--akb-accent);
	background: var(--akb-accent);
	color: #fff;
}

/* Completed steps settle into the darker blue — active stays the lighter
   primary accent so the current step is the brightest thing on the rail. */
.akb-step__dot.is-done {
	border-color: var(--akb-accent-dark);
	background: var(--akb-accent-dark);
	color: #fff;
}

.akb-step__rail-line {
	flex: 1 1 auto;
	width: 2px;
	min-height: 1.25em;
	margin-top: 0.4rem;
	background: var(--akb-border);
}

/* Fill the connector once a step is completed. */
.akb-step__dot.is-done + .akb-step__rail-line {
	background: var(--akb-accent-dark);
}

.akb-step__main {
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 1.9em;
	transition: opacity 0.2s ease;
}

.akb-stage > section:last-child .akb-step__main {
	padding-bottom: 0;
}

.akb-stage > section.is-inactive .akb-step__main {
	opacity: 0.4;
}

.akb-stage > section.is-inactive .akb-step__head {
	cursor: pointer;
}

.akb-step__eyebrow {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--akb-muted);
}

.akb-step__headline {
	margin: 0;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.2;
}

.akb-step__badge {
	display: inline-block;
	margin-top: 0.6em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--akb-accent);
	color: #fff;
	font-size: 0.65em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.akb-step__body {
	margin-top: 0.7em;
	font-size: 0.95em;
	color: var(--akb-muted);
}

.akb-step__body p {
	margin: 0 0 0.5em;
}

.akb-step__controls {
	margin-top: 1.6em;
}

.akb-step__product {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 0 1.2em;
	padding: 0.9em;
	border: 1px solid var(--akb-border);
	border-radius: 10px;
	transition: border-color 0.12s ease;
}

.akb-step__product:hover {
	border-color: var(--akb-muted-dark);
}

.akb-step__product-thumb {
	flex: 0 0 auto;
	display: block;
	width: 4.5em;
	height: 4.5em;
	border-radius: 8px;
	overflow: hidden;
	background: var(--akb-bg-soft);
}

.akb-step__product-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.akb-step__product-info {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.akb-step__product-name {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.akb-step__product-name:hover {
	color: var(--akb-accent-dark);
	text-decoration: underline;
}

.akb-step__product-desc {
	margin: 0.15em 0 0;
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--akb-muted);
}

.akb-step__product-meta {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-top: 0.4em;
}

.akb-step__product-price {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--akb-accent-dark);
}

.akb-step__product-stock {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--akb-error);
}

/* Attribute controls (colour, size, …) */

.akb-attr {
	margin: 1.5em 0;
}

.akb-attr__labelrow {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin-bottom: 0.8em;
}

.akb-attr__label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--akb-muted);
}

.akb-attr__selected {
	font-size: 0.9rem;
	font-weight: 600;
	/* Text needs the darker blue: the light accent's contrast on white is too
	   low to read comfortably at this size. */
	color: var(--akb-accent-dark);
}

.akb-attr__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.akb-attr__select {
	max-width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid var(--akb-border);
	border-radius: 6px;
}

/* Core step's mixed-size rows — one size per row, its own price and
   .akb-qty--compact stepper, instead of the single-select pills every other
   attribute uses (see the mixed-size purchase functions in kit-builder.js). */
.akb-core-sizes__rows {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.akb-core-size-row {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.7em 0.9em;
	border: 1px solid var(--akb-border);
	border-radius: 10px;
}

.akb-core-size-row.is-unavailable {
	opacity: 0.4;
}

.akb-core-size-row__label {
	flex: 1 1 auto;
	font-weight: 600;
}

.akb-core-size-row__price {
	color: var(--akb-muted);
	font-size: 0.9em;
}

.akb-core-size-row__price--soldout {
	color: var(--akb-error);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.akb-core-sizes__total {
	margin: 0.8em 0 0;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--akb-accent-dark);
}

/* Text pills — used for plain options like size. */
.akb-swatch {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 1.15em;
	background: #fff;
	border: 1px solid var(--akb-border);
	border-radius: 999px;
	font-size: 0.9em;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.akb-swatch:hover {
	border-color: var(--akb-muted-dark);
}

/* Plain text pills (size) get a neutral grey selected state — the blue
   accent ring is reserved for the colour swatches below, where colour is the
   whole point of the choice. */
.akb-swatch.is-selected:not(.akb-swatch--visual) {
	border-color: var(--akb-muted-dark);
	box-shadow: inset 0 0 0 1px var(--akb-muted-dark);
	font-weight: 600;
}

.akb-swatch--visual.is-selected {
	font-weight: 600;
}

.akb-swatch.is-unavailable {
	opacity: 0.4;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Colour circles — the swatch is the chip, no inline text (the selected name is
   shown next to the label instead). */
.akb-attr__options--visual {
	gap: 0.6em;
}

.akb-swatch--visual {
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
}

.akb-swatch--visual:hover {
	border: 0;
}

.akb-swatch__chip {
	display: block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.akb-swatch--visual.is-selected .akb-swatch__chip {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--akb-muted);
}

.akb-swatch--visual.is-unavailable {
	opacity: 0.3;
	text-decoration: none;
}

/* Standalone attribute-swatch picker (assets/js/attribute-swatches.js) —
   built on the native WooCommerce variation form for products that never
   load the wizard (see AKB_Swatches). Reuses .akb-swatch/.akb-swatch--visual/
   .akb-swatch__chip above verbatim, since it's the exact same chip either
   way; this wrapper only needs to define the same --akb-* custom properties
   locally, the same reason .akb-highlights keeps its own --akb-h-* copies —
   it renders outside .akb-builder too, so those properties aren't otherwise
   in scope here. */
.akb-swatch-picker {
	--akb-border: #ccc;
	--akb-muted: #919191;
	--akb-muted-dark: #383838;

	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0.75em 0;
	/* A selected chip's ring (see .akb-swatch--visual.is-selected below) is a
	   box-shadow, not real layout — it paints outside the chip's own box.
	   With zero padding here, an edge swatch's ring has nowhere to paint on
	   that side, and gets clipped by the theme's own overflow-x: hidden
	   wrapper around the gallery/summary column (see AKB_Frontend::
	   open_product_top()). Small padding, offset by matching negative
	   margin so the grid still lines up flush with everything else on the
	   page, gives every ring room regardless of which chip is selected. */
	padding: 5px;
	margin-left: -5px;
	margin-right: -5px;
}

/* The native variations table lays label <th> and value <td> out side by
   side — fine for a short dropdown, but it crowds a full swatch grid
   against a narrow label column. Stack them instead (label row, then a
   full-width grid below), matching the wizard's own label-above-options
   layout. Scoped to just the row attribute-swatches.js tagged, so a plain
   Size dropdown elsewhere in the same table is untouched. */
.variations tr.akb-swatch-picker-row {
	display: block;
}

.variations tr.akb-swatch-picker-row th.label,
.variations tr.akb-swatch-picker-row td.value {
	display: block;
	width: 100%;
	padding: 0;
}

.variations tr.akb-swatch-picker-row th.label {
	margin-bottom: 0.5em;
}

/* The native <label> (e.g. "Colour") and the "currently selected" name the
   picker's own JS adds next to it — same look and pairing as the wizard's
   .akb-attr__label/.akb-attr__selected (see kit-builder.css above), so
   selecting a swatch here is confirmed the same way it is there, not just
   by the (fairly subtle) ring on the chip itself. */
.akb-swatch-picker__label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #919191;
}

.akb-swatch-picker__selected {
	margin-left: 0.6em;
	font-size: 0.9rem;
	font-weight: 600;
	color: #092c5f;
}

/* WooCommerce's own "Clear" reset link starts out inside the variations
   table, right after the swatch grid — otherwise plain, default-sized theme
   link text sitting under a grid of large swatch chips, which reads as a
   stray leftover rather than a deliberate action. attribute-swatches.js'
   pairStockWithClear() physically moves it (once, the first time a variation
   is found) into a small flex row next to the stock pill instead — see
   .akb-stock-clear-row below — so this fallback rule only covers the brief
   moment before that move (or a no-JS visit): still adjacent to the picker
   in the DOM at that point, just not yet relocated. */
.akb-kit-active .summary.entry-summary .akb-swatch-picker + .reset_variations {
	display: inline-block;
	margin-top: 0.5em;
	font-size: 0.8em;
	font-weight: 600;
	color: #919191;
	text-decoration: none;
}

.akb-kit-active .summary.entry-summary .akb-swatch-picker + .reset_variations:hover {
	color: #092c5f;
	text-decoration: underline;
}

/* Relocated state (see pairStockWithClear()) — sits inline next to the stock
   pill now, not below the picker, so no top margin. The theme's own
   `.single-product div.product .summary a` rule (navy, underlined)
   out-specifies a plain two/three-class version of this selector — same
   issue as the buy-box .stock fix above — so the JS-added
   .akb-reset-relocated class pads this out to four classes to win outright. */
.akb-kit-active .summary.entry-summary .reset_variations.akb-reset-relocated {
	display: inline-block;
	margin: 0;
	font-size: 0.8em;
	font-weight: 600;
	color: #919191;
	text-decoration: none;
}

.akb-kit-active .summary.entry-summary .reset_variations.akb-reset-relocated:hover {
	color: #092c5f;
	text-decoration: underline;
}

/* The flex row pairStockWithClear() builds around .woocommerce-variation-
   availability and the Clear link, pairing the stock pill and "Clear" on
   one line instead of leaving a gap-separated stack between them. */
.akb-kit-active .summary.entry-summary .akb-stock-clear-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-bottom: 0.9em;
}

/* Colour chart add-on — a single physical product offered once under the
   colour swatches, shared across every product on the template. */
.akb-colourchart {
	display: inline-flex;
	align-items: center;
	margin-top: 0.9em;
	padding: 0.5em 1.1em;
	background: #fff;
	border: 1px solid var(--akb-accent-dark);
	border-radius: 999px;
	color: var(--akb-accent-dark);
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.akb-colourchart:hover {
	background: var(--akb-accent-dark);
	color: #fff;
}

.akb-colourchart.is-added {
	border-color: var(--akb-muted-dark);
	background: #fff;
	color: var(--akb-muted-dark);
}

/* Both add-on buttons (akb-colourchart shared style, see above) can be
   disabled: the sample when its price depends on a colour that hasn't been
   chosen yet, the colour chart while its own add-to-cart call is in flight
   or once it's already been bought (a customer only ever wants one). */
.akb-sample:disabled,
.akb-colourchart:disabled {
	border-color: var(--akb-border);
	color: var(--akb-muted);
	cursor: not-allowed;
}

.akb-sample:disabled:hover,
.akb-colourchart:disabled:hover {
	background: #fff;
	color: var(--akb-muted);
}

/* Area calculator. A discreet trigger opens a slide-out drawer holding the
   full calculator, so it never crowds the wizard (the Imperia pattern). The
   store theme forces tall padding + a bottom margin onto every product-page
   input, so the drawer overrides both and pins its fields to --akb-field-h. */

/* Trigger row — sits above the wizard, understated. */

.akb-calc-trigger {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1.6em;
	padding: 0.9em 0;
	border-top: 1px solid var(--akb-border);
	border-bottom: 1px solid var(--akb-border);
}

.akb-calc-trigger__help {
	font-size: 0.9em;
	color: var(--akb-muted);
}

.akb-calc-trigger__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--akb-accent-dark);
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: color 0.12s ease;
}

.akb-calc-trigger__btn:hover {
	color: var(--akb-accent);
}

.akb-calc-trigger__icon {
	width: 1.15em;
	height: 1.15em;
}

.akb-calc-trigger__result {
	font-size: 0.85em;
	color: var(--akb-muted);
}

/* Backdrop + drawer. Both stay in the DOM and slide/fade via a class toggle so
   the transition runs (x-show's display:none would kill it). Hidden state is
   the CSS default, so there's no flash before Alpine boots. */

.akb-calc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.akb-calc-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.akb-calc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	height: 100%;
	background: #fff;
	box-shadow: -6px 0 28px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.28s ease, visibility 0.28s ease;
}

.akb-calc-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Every free-standing field in the drawer, except the coats stepper's inner
   number input (which keeps its own borderless styling below). */
.akb-calc-drawer input[type="number"]:not(.akb-qty__input),
.akb-calc-drawer input[type="text"]:not(.akb-qty__input) {
	height: var(--akb-field-h);
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 1.1em !important;
	border: 1px solid var(--akb-border);
	border-radius: 999px;
	background: #fff;
	font-size: 1em;
	line-height: normal;
}

.akb-calc-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	padding: 1.5em 1.5em 0.75em;
}

.akb-calc-drawer__title {
	margin: 0;
	font-size: 1.5em;
	line-height: 1.2;
}

.akb-calc-drawer__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--akb-bg-soft);
	color: var(--akb-muted-dark);
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.akb-calc-drawer__close:hover {
	background: #e7e7e7;
}

.akb-calc-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.5em 1.5em 1.5em;
}

.akb-calc-drawer__lead {
	margin: 0.5em 0 1.35em;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--akb-muted);
}

/* Measure-my-walls vs I-know-my-area. Same is-active pattern as the step-level
   Add/No-thanks choice buttons, so it reads as a toggle rather than two
   unrelated buttons. */
.akb-calc-mode {
	display: flex;
	gap: 0.6em;
	margin: 0.5em 0 1.4em;
}

.akb-calc-mode__tab {
	flex: 1 1 0;
	padding: 0.65em 0.5em;
	border: 1px solid var(--akb-border);
	border-radius: 999px;
	background: #fff;
	color: var(--akb-muted-dark);
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	cursor: pointer;
}

.akb-calc-mode__tab.is-active {
	background: var(--akb-accent);
	border-color: var(--akb-accent);
	color: #fff;
}

.akb-calc-direct__field {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: 1em;
}

.akb-calc-direct__field > span {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--akb-muted);
}

.akb-calc-direct__input {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.akb-calc-direct__input input {
	flex: 1 1 0;
	min-width: 0;
}

.akb-calc-direct__unit {
	flex: 0 0 auto;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--akb-muted);
}

.akb-calc-direct__hint {
	margin: 0 0 1.6em;
	font-size: 0.8em;
	color: var(--akb-muted);
}

.akb-calc-units {
	display: flex;
	gap: 1.75em;
	margin-bottom: 1.6em;
}

.akb-calc-units label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--akb-muted-dark);
	cursor: pointer;
}

.akb-calc-wall {
	margin-bottom: 1em;
}

.akb-calc-wall__label {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--akb-muted);
}

.akb-calc-wall__inputs {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.akb-calc-wall__inputs input {
	flex: 1 1 0;
	min-width: 0;
}

.akb-calc-wall__remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	border: 1px solid var(--akb-border);
	border-radius: 50%;
	background: #fff;
	color: var(--akb-muted);
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.12s ease, color 0.12s ease;
}

.akb-calc-wall__remove:hover {
	border-color: var(--akb-error);
	color: var(--akb-error);
}

.akb-calc-drawer__links {
	display: flex;
	gap: 1.75em;
	margin: 0.75em 0 1.6em;
}

.akb-link {
	padding: 0;
	background: none;
	border: 0;
	color: var(--akb-accent-dark);
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: underline;
	cursor: pointer;
}

.akb-calc-openings {
	display: flex;
	gap: 1.75em;
}

.akb-calc-openings__field {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.akb-calc-openings__field > span {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--akb-muted);
}

.akb-calc-openings__field input {
	width: 5em;
}

.akb-calc-openings__hint {
	margin: 0.75em 0 1.6em;
	font-size: 0.8em;
	color: var(--akb-muted);
}

.akb-calc-coats {
	display: flex;
	align-items: center;
	gap: 1em;
}

.akb-calc-coats > span {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--akb-muted);
}

.akb-calc-coats__hint {
	margin: 0.75em 0 0;
	font-size: 0.8em;
	line-height: 1.45;
	color: var(--akb-muted);
}

.akb-calc-drawer__result {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	margin-top: 1.6em;
	padding-top: 1.35em;
	border-top: 1px solid var(--akb-border);
	font-size: 0.95em;
	color: var(--akb-muted);
}

.akb-calc-drawer__result strong {
	color: var(--akb-accent-dark);
	font-size: 1.25em;
}

.akb-calc-drawer__result .akb-btn {
	margin-left: auto;
}

.akb-calc-drawer__foot {
	padding: 1.35em 1.5em 1.75em;
	border-top: 1px solid var(--akb-border);
	background: var(--akb-bg-soft);
}

.akb-calc-note {
	margin: 0 0 1.1em;
	font-size: 0.82em;
	line-height: 1.5;
	color: var(--akb-muted);
}

.akb-calc-getintouch {
	display: inline-block;
}

/* Lock the page while the drawer is open (class set from Alpine's init watch).
   The drawer and backdrop are position:fixed, so they're unaffected. */
body.akb-drawer-open {
	overflow: hidden;
}

/* Per-step suggestion note (the drawer feeds every step's own suggestion) —
   one tinted card holding both the suggestion text and its "apply" button,
   same tinted-box + left-border language as .akb-error (red) and
   .akb-step__hint (grey) below, just the positive-suggestion colour, so the
   two read as one grouped unit instead of a text line floating above a
   separately-spaced pill button. */
.akb-calc-suggestion {
	margin-top: 1.25em;
	padding: 0.7em 0.8em;
	background: rgba(65, 156, 216, 0.1);
	border-left: 3px solid var(--akb-accent);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6em;
}

.akb-calc__suggestion {
	margin: 0;
	color: var(--akb-accent-dark);
	font-size: 0.9em;
	font-weight: 600;
}

.akb-calc__apply {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1.1em;
	background: #fff;
	border: 1px solid var(--akb-accent-dark);
	border-radius: 999px;
	color: var(--akb-accent-dark);
	font-size: 0.8em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.akb-calc__apply:hover {
	background: var(--akb-accent-dark);
	color: #fff;
}

/* Coats stepper: the shared quantity pill, sized to match the panel's field
   height so it lines up with the area input beside it. Each selector pairs
   .akb-qty with the modifier so it outranks the base .akb-qty rules regardless
   of source order. */

.akb-qty.akb-qty--compact {
	height: var(--akb-field-h);
}

.akb-qty.akb-qty--compact .akb-qty__btn {
	width: 2.4em;
	min-width: 2.4em;
	line-height: var(--akb-field-h);
}

.akb-qty.akb-qty--compact .akb-qty__input {
	width: 2.5em !important;
	line-height: var(--akb-field-h);
}

/* Buy row (price + quantity, or add/skip) */

.akb-buy {
	display: flex;
	/* flex-end, not center: .akb-qty-field is a label stacked above the
	   quantity pill, taller than the price beside it — centering the row
	   would centre the price against that whole stack instead of lining it
	   up with the pill itself. flex-end puts both on the same bottom edge. */
	align-items: flex-end;
	gap: 1.25em;
	flex-wrap: wrap;
	margin-top: 1.6em;
}

.akb-buy__price {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
}

.akb-buy__amount {
	font-size: 1.4em;
	font-weight: 700;
}

.akb-buy__suffix {
	font-size: 0.8em;
	color: var(--akb-muted);
}

.akb-buy__choice {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
}

.akb-buy__choice-price {
	font-weight: 600;
}

.akb-qty-field {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.akb-qty-field__label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--akb-muted);
}

/* Quantity stepper — fixed sizes with !important so theme input styles (which
   otherwise stretch the field and knock the number off-centre) can't win. */
.akb-qty {
	display: inline-flex;
	align-items: stretch;
	/* Explicit so the input's line-height below has a fixed value to match —
	   flex 'stretch' alone gives the input the right box height, but relying
	   on that plus auto text-centering is inconsistent across browsers, and
	   left the number pinned near the top of the box instead of centred. */
	height: 2.75em;
	border: 1px solid var(--akb-border);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.akb-qty__btn {
	flex: 0 0 auto;
	width: 2.75em;
	min-width: 2.75em;
	height: 100%;
	background: #fff;
	border: 0;
	color: var(--akb-accent-dark);
	font-size: 1.05em;
	line-height: 2.75em;
	cursor: pointer;
}

.akb-qty__btn:hover {
	background: var(--akb-bg-soft);
}

.akb-qty__input {
	flex: 0 0 auto;
	height: 100%;
	box-sizing: border-box;
	width: 3em !important;
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent;
	text-align: center !important;
	/* Matches the pill's own height so the value centres vertically: a
	   height inflated purely by flex stretch doesn't reliably re-centre an
	   input's text in every browser, but line-height == height does. */
	line-height: 2.75em;
	font-size: 1em;
	color: inherit;
	box-shadow: none !important;
	/* Chrome reserves layout space for the spin button on a number input's own
	   box even once its pseudo-elements are hidden below — textfield appearance
	   drops that reserved space so text-align: center lands truly centred. */
	appearance: textfield;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
}

.akb-qty__input::-webkit-outer-spin-button,
.akb-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Buttons */

.akb-btn {
	padding: 0.7em 1.4em;
	border: 1px solid var(--akb-border);
	border-radius: 999px;
	background: #fff;
	font-size: 0.95em;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.akb-btn--primary {
	background: var(--akb-accent-dark);
	border-color: var(--akb-accent-dark);
	color: #fff;
	font-weight: 600;
}

.akb-btn--primary:hover {
	background: var(--akb-accent);
	border-color: var(--akb-accent);
}

.akb-btn--ghost {
	border-color: var(--akb-border);
	color: var(--akb-muted);
}

.akb-btn--choice.is-active {
	background: var(--akb-accent);
	border-color: var(--akb-accent);
	color: #fff;
}

.akb-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Review */

.akb-review__list {
	margin: 1.25em 0 0;
	padding: 0;
	list-style: none;
}

.akb-review__row {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.85em 0;
	border-bottom: 1px solid var(--akb-border);
}

.akb-review__info {
	display: flex;
	flex-direction: column;
}

.akb-review__name {
	font-weight: 600;
}

.akb-review__detail {
	font-size: 0.82em;
	color: var(--akb-muted);
}

.akb-review__thumb {
	flex: 0 0 auto;
	display: block;
	width: 2.75em;
	height: 2.75em;
	border-radius: 6px;
	overflow: hidden;
	background: var(--akb-bg-soft);
}

.akb-review__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.akb-review__qty {
	margin-left: auto;
	color: var(--akb-muted);
	font-size: 0.9em;
}

/* Renamed from .akb-review__total (a duplicate of the unrelated kit-total
   summary class below, which silently leaked its flex/column styling onto
   this per-row price span since both selectors had equal specificity). */
.akb-review__price {
	min-width: 5em;
	font-weight: 600;
	text-align: right;
}

/* Jumps back to the line's own step (goTo()) — a plain text link rather than
   a bordered button so it doesn't compete with the price for attention in an
   already-tight row. */
.akb-review__edit {
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: none;
	color: var(--akb-accent-dark);
	font-size: 0.82em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.akb-review__edit:hover {
	color: var(--akb-accent);
}

.akb-review__empty {
	padding: 1em 0;
	color: var(--akb-muted);
}

.akb-error {
	margin: 1em 0 0;
	padding: 0.6em 0.8em;
	background: #fdece6;
	border-left: 3px solid var(--akb-error);
	color: #8a2609;
	font-size: 0.9em;
}

/* Guidance on the core step while colour/size is still unchosen — the normal
   starting state now that nothing is pre-selected, not a mistake, so it gets
   a neutral grey callout rather than the red .akb-error treatment above (same
   tinted-box + left-border language, just a calmer colour). */
.akb-step__hint {
	margin: 0.6em 0 0;
	padding: 0.6em 0.8em;
	background: var(--akb-bg-soft);
	border-left: 3px solid var(--akb-border);
	color: var(--akb-muted);
	font-size: 0.85em;
}

/* Per-step navigation (sits under the active step) */

.akb-step__foot {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1.6em;
}

.akb-step__back {
	padding: 0.5em 0;
	background: none;
	border: 0;
	color: var(--akb-muted);
	font-size: 0.9em;
	cursor: pointer;
}

.akb-step__back:hover {
	color: var(--akb-accent-dark);
}

.akb-step__next {
	margin-left: auto;
	flex: 0 0 auto;
}

/* Review summary (kit total + final action) */

/* The most important number on the page — what the customer is about to
   pay — deserves more presence than plain text competing with everything
   above it, so it gets its own divider and the brand accent colour. */
.akb-review__summary {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	margin-top: 1.35em;
	padding-top: 1.2em;
	border-top: 1px solid var(--akb-border);
}

.akb-review__total {
	display: flex;
	flex-direction: column;
}

.akb-review__total-label {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--akb-muted);
}

.akb-review__total-value {
	color: var(--akb-accent-dark);
	font-size: 1.75em;
	font-weight: 700;
}

.akb-review__total-note {
	font-size: 0.68rem;
	color: var(--akb-muted);
}

.akb-review__summary .akb-step__foot {
	margin: 0 0 0 auto;
	flex: 0 0 auto;
}

/* Cart grouping (rendered on the cart page, not the builder). Hardcoded
   colours rather than var(--akb-*) throughout this section: that custom
   property scope lives on .akb-builder, which never wraps cart-page markup. */

.akb-kit-heading {
	display: block;
	margin-bottom: 0.3em;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b6b66;
}

.akb-kit-heading__label {
	font-weight: 700;
}

.akb-kit-heading__remove {
	font-size: 0.9em;
	text-transform: none;
	letter-spacing: 0;
}

/*
 * Draws one visual boundary around a kit's rows in the classic cart table (see
 * AKB_Cart::cart_item_class()), so three-plus rows read as one kit rather than
 * as unrelated products that happen to share a caption. The left border runs
 * the full group via the shared background + border-left on every row, capped
 * top/bottom only on the first/last row so it reads as a single bracket. Works
 * unchanged in the theme's responsive stacked mode, since that just turns each
 * <td> into a block without removing the <tr> that carries these classes.
 */
.akb-kit-item {
	background: #f7fafc;
}

.akb-kit-item > td:first-child {
	box-shadow: inset 3px 0 0 #419cd8;
}

.akb-kit-item--first > td {
	border-top: 1px solid #419cd8;
}

.akb-kit-item--last > td {
	border-bottom: 1px solid #419cd8;
}

/* Classic cart's "Part of" row — a <dl class="variation"> WooCommerce renders
   from display_item_data()'s item_data. Same accented-badge treatment as the
   Cart block's version below, minus the redundant "Part of:" <dt> label —
   the kit heading directly above the first row (or the badge's own kit-name
   text on every row) already says as much. */
/* td.product-name (not just .cart_item) to outrank woocommerce.css's own
   ".woocommerce td.product-name dl.variation dt" rule — same selector depth,
   but that one's extra td type selector otherwise wins the tie and the
   redundant "Part of:" label stays put. */
.cart_item td.product-name dl.variation dt.variation-Partof {
	display: none;
}

.cart_item dl.variation dd.variation-Partof {
	margin: 0;
}

.cart_item dl.variation dd.variation-Partof p {
	margin: 0.5em 0 0;
	padding: 0.35em 0.65em;
	background: #eef6fc;
	border-left: 3px solid #419cd8;
	border-radius: 0 3px 3px 0;
	font-size: 0.85em;
	line-height: 1.5;
	color: #092c5f;
}

/*
 * The WooCommerce Cart block (as opposed to the classic [woocommerce_cart]
 * shortcode) never fires the woocommerce_cart_item_name filter that
 * .akb-kit-heading above depends on, so the bold group heading never appears
 * there — only this "Part of" row does (it rides on the Store API's
 * item_data, which the block *does* read from the same woocommerce_get_item_data
 * filter). This can't be turned into a true nested group heading with CSS
 * alone — every line in the kit renders the identical structure below with no
 * "first item" marker to select — so instead it's styled as a small accented
 * badge, distinct enough from a plain "Colour: X" row to read as its own kind
 * of information without needing markup the block doesn't expose.
 */
.wc-block-components-product-details__part-of {
	display: block;
	margin-top: 0.5em;
	padding: 0.35em 0.65em;
	background: #eef6fc;
	border-left: 3px solid #419cd8;
	border-radius: 0 3px 3px 0;
	font-size: 0.85em;
	line-height: 1.5;
}

.wc-block-components-product-details__part-of .wc-block-components-product-details__name {
	color: #092c5f;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

.wc-block-components-product-details__part-of .wc-block-components-product-details__value {
	color: #092c5f;
	font-weight: 600;
}

.akb-remove-kit-link {
	margin-left: 0.6em;
	color: #6b6b66;
	font-weight: 400;
	text-decoration: underline;
}

.akb-remove-kit-link:hover {
	color: #092c5f;
}

@media (max-width: 600px) {
	.akb-step__headline {
		font-size: 1.3em;
	}

	.akb-step__next {
		width: 100%;
	}

	/* .akb-step__next's width:100% above resolves against
	   .akb-review__summary .akb-step__foot's own flex:0 0 auto sizing (see that
	   rule below), which shrinks to content — back link + a 100%-wide button in
	   the same unwrapped row overflows past the container and off the edge of
	   the screen. Stacking both the summary and its foot row removes the
	   ambiguous sizing entirely: total first, then Back/Add full-width below it. */
	.akb-review__summary {
		flex-direction: column;
		align-items: stretch;
	}

	.akb-review__summary .akb-step__foot {
		width: 100%;
		flex-wrap: wrap;
	}

	/* A multi-line product name (colour + size detail) centred against a
	   single-line qty/price otherwise leaves the qty/price floating in empty
	   space — top-aligning keeps everything anchored to the same first line. */
	.akb-review__row {
		align-items: flex-start;
	}
}

/* Sticky product image.
   The plugin wraps the gallery + summary in .akb-product-top (see AKB_Frontend),
   which becomes the sticky gallery's containing block — so it sticks while the
   taller summary/builder scrolls, then RELEASES at the end of the summary,
   before the description/tabs, instead of overlapping them.

   .akb-product-top must stay display:flex at EVERY width, not just wide ones:
   the theme's own responsive layout (sass/plugins/woocommerce/_single-product.scss)
   puts flex-basis and order rules directly on .woocommerce-product-gallery/
   .summary to stack them (image reordered after the summary) below its own
   breakpoint(large) — max-width: 1000px, sass/abstracts/mixins/_breakpoints.scss
   at the theme's $font__size: 16 base — and side-by-side above it. Both
   properties only do anything when their element is an actual flex item; once
   this plugin wraps the pair in .akb-product-top, they're flex items of THAT
   div, not of div.product any more, so .akb-product-top has to relay
   display:flex unconditionally or the theme's own stacking silently breaks
   (an earlier version of this rule gated display:flex behind the same
   min-width as the sticky rule below, which did exactly that below 1000px).

   Only the STICKY positioning is width-gated, at the theme's own 1000px
   threshold: doing it any earlier made the gallery position:sticky while the
   theme still had it stacked *and* reordered below the summary — a short,
   sticky element trying to stick underneath a much taller wizard, which is
   what "the image appears under the wizard" described. Below 1000px this
   section now does nothing, leaving the theme's own stacked mobile layout
   alone; only once the theme itself has genuinely placed the gallery beside
   the summary does sticky positioning make sense. */
.akb-product-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

/* Below the theme's own stacking breakpoint, the theme puts the gallery
   *after* the summary (order: 1 on .woocommerce-product-gallery in
   _single-product.scss) — sensible for its own short add-to-cart form, where
   getting straight to "buy" beats a big photo first. This plugin's summary is
   a multi-step wizard instead, easily 1800px+ tall on its own (colour swatches,
   calculator, several add-on steps, review) — "after the summary" there means
   scrolling past the entire wizard before the product photo ever appears.
   Forcing the gallery first restores a sane mobile/tablet order: photo, then
   wizard. Scoped to .akb-product-top so it only touches kit-enabled products;
   every other product on the site keeps the theme's own ordering untouched.
   !important for the same reason as the sticky rule below — it has to beat
   the theme's own order rule on specificity + load order. */
@media (max-width: 1000px) {
	.akb-product-top > .woocommerce-product-gallery,
	.akb-product-top > .wp-block-woocommerce-product-image-gallery,
	.akb-product-top > .woo-variation-product-gallery {
		order: -1 !important;
	}
}

@media (min-width: 1001px) {
	/* !important beats WooCommerce's own `position:relative` on the gallery,
	   which wins on specificity + load order. --akb-sticky-top clears a sticky
	   site header; override it per theme.

	   .woo-variation-product-gallery is the wrapper the "Variation Gallery for
	   WooCommerce" plugin renders *in place of* the standard
	   .woocommerce-product-gallery — when it's active, the standard element no
	   longer exists in .akb-product-top at all, so without this selector the
	   sticky rule matches nothing and the gallery just scrolls away. */
	.akb-product-top > .woocommerce-product-gallery,
	.akb-product-top > .wp-block-woocommerce-product-image-gallery,
	.akb-product-top > .woo-variation-product-gallery {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: var(--akb-sticky-top, 6rem) !important;
		align-self: flex-start !important;
	}

	/* Logged-in views carry the 32px WordPress admin bar, which pushes a sticky
	   site header down by the same amount; add it so the gallery still clears the
	   header in the editor/preview as well as on the live (logged-out) store. */
	body.admin-bar .akb-product-top > .woocommerce-product-gallery,
	body.admin-bar .akb-product-top > .wp-block-woocommerce-product-image-gallery,
	body.admin-bar .akb-product-top > .woo-variation-product-gallery {
		top: calc(var(--akb-sticky-top, 6rem) + 32px) !important;
	}

	/* `position: sticky` only sticks relative to the nearest ancestor that's an
	   actual scrolling box — if ANY ancestor between the gallery and the
	   viewport has overflow other than visible, the gallery "sticks" against
	   that ancestor's own scroll port instead, which (when that ancestor never
	   scrolls independently — the page itself scrolls via body/html) looks
	   exactly like sticky doing nothing at all: the image just rides along
	   with the page. Seen in production with body/main/.product all carrying
	   overflow: hidden auto, traceable to no theme or plugin stylesheet rule —
	   almost certainly applied by a third-party script (a cookie-consent
	   widget is the most common source of exactly this "hidden auto" pattern,
	   normally a scroll-lock for its own banner) rather than authored CSS.
	   Scoped to .akb-kit-active (added by AKB_Frontend::add_body_class()
	   whenever maybe_wrap_product_top() decided this page needs the sticky
	   wrapper at all — the wizard, or, on a product with no wizard, the
	   standalone Highlights box or swatch picker) so this never touches
	   overflow anywhere else on the site.

	   BOTH axes have to be reset together, not just overflow-y: per the CSS
	   Overflow spec, if overflow-x and overflow-y disagree on whether either is
	   'visible', the 'visible' one is silently *computed* as 'auto' instead —
	   so overriding only overflow-y here (leaving overflow-x: hidden from
	   whatever set it) gets neutralised right back to 'auto' by the spec itself,
	   with sticky none the wiser. Confirmed live: overflow-y alone left the
	   gallery just as un-stuck as before; adding overflow-x here is what
	   actually made position: sticky take hold. */
	body.akb-kit-active,
	body.akb-kit-active main,
	body.akb-kit-active .product {
		overflow-x: visible !important;
		overflow-y: visible !important;
	}
}

/* Highlights box — sits between the short description and .akb-builder, so it
   can't inherit that element's --akb-* custom properties (they're scoped to
   .akb-builder itself, a following sibling, not an ancestor). Repeats the
   same palette locally rather than hoisting the variables to a shared
   ancestor the theme controls. */
.akb-highlights {
	/* Matches dev/theme/achtis-group/sass/abstracts/variables/_colors.scss
	   $theme-colours exactly: blue / blue-light are the real brand accent
	   pair (also what .single_add_to_cart_button uses: blue background,
	   blue-light hover — see _single-product.scss), used for every label/
	   heading here (checkmarks, badge, accordion titles, +/− icon).
	   "muted" is the theme's own body-text grey (#919191, also what
	   .summary/.short-description use) — kept only for genuinely secondary
	   bits (the difficulty tooltip trigger). Panel copy uses --akb-h-text
	   instead: once a section holds a 13-step procedure or a dense spec
	   table rather than a line or two, that same light grey reads as an
	   undifferentiated wall of text, so panel content gets a darker,
	   still-neutral tone for real readability. #6e6e6e — same grey the
	   short-description fix below settled on, so every body-copy colour
	   in the builder now matches instead of each component picking its
	   own; #4a4a4a (tried first here) read as too close to black.
	   --akb-h-error is a local copy of .akb-builder's --akb-error
	   (#e2401c) — that variable is scoped inside .akb-builder, a sibling
	   of this box, so it isn't inherited here and needs its own copy. */
	--akb-h-border: #ccc;
	--akb-h-muted: #919191;
	--akb-h-accent: #419cd8;
	--akb-h-accent-dark: #092c5f;
	--akb-h-text: #6e6e6e;
	--akb-h-error: #e2401c;

	margin: 1.5em 0;
	padding-top: 1.25em;
	border-top: 1px solid var(--akb-h-border);
	font-size: 16px;
	line-height: 1.5;
}

.akb-highlights__checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6em 1.5em;
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
}

.akb-highlights__checklist li {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.akb-highlights__check {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	color: var(--akb-h-accent);
}

.akb-highlights__checklist span {
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--akb-h-accent-dark);
}

.akb-highlights__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9em 0;
	border-top: 1px solid var(--akb-h-border);
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--akb-h-accent-dark);
}

/* The "?" trigger next to "Application Difficulty" — plain CSS hover/focus
   reveal, no JS, matching this whole box's Alpine-free footprint (it sits
   before the wizard's x-data root). */
.akb-highlights__tooltip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-left: 0.35em;
}

.akb-highlights__tooltip-trigger {
	display: inline-flex;
	padding: 0;
	background: none;
	border: none;
	color: var(--akb-h-muted);
	cursor: help;
}

.akb-highlights__tooltip-trigger svg {
	width: 1.05em;
	height: 1.05em;
}

.akb-highlights__tooltip-trigger:hover,
.akb-highlights__tooltip-trigger:focus-visible {
	color: var(--akb-h-accent-dark);
}

.akb-highlights__tooltip-bubble {
	position: absolute;
	bottom: calc(100% + 0.6em);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 16em;
	padding: 0.6em 0.8em;
	background: var(--akb-h-accent-dark);
	border-radius: 6px;
	color: #fff;
	font-size: 0.9em;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	pointer-events: none;
	z-index: 1;
}

.akb-highlights__tooltip-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--akb-h-accent-dark);
}

.akb-highlights__tooltip:hover .akb-highlights__tooltip-bubble,
.akb-highlights__tooltip-trigger:focus-visible + .akb-highlights__tooltip-bubble {
	opacity: 1;
	visibility: visible;
}

.akb-highlights__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border: 1px solid var(--akb-h-accent-dark);
	border-radius: 50%;
	color: var(--akb-h-accent-dark);
	text-transform: none;
	letter-spacing: normal;
}

/* Wraps whatever markup ACF's oEmbed field resolved to (typically a fixed-size
   iframe) and forces it to a responsive 16:9 box — the standard intrinsic-
   ratio trick, since the embed's own width/height attributes can't be
   trusted to match this column's actual width. */
.akb-highlights__video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	border-radius: 8px;
	background: var(--akb-h-border);
}

.akb-highlights__video iframe,
.akb-highlights__video embed,
.akb-highlights__video object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.akb-highlights__accordion {
	border-top: 1px solid var(--akb-h-border);
}

.akb-highlights__accordion summary {
	padding: 0.9em 0;
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--akb-h-accent-dark);
	cursor: pointer;
	list-style: none;
}

.akb-highlights__accordion summary::-webkit-details-marker {
	display: none;
}

.akb-highlights__accordion summary::after {
	content: '+';
	float: right;
	font-size: 1.6em;
	line-height: 1;
	color: var(--akb-h-accent);
}

.akb-highlights__accordion[open] summary::after {
	content: '\2212';
}

.akb-highlights__panel {
	padding: 0 0 1.25em;
	font-size: 0.95em;
	color: var(--akb-h-text);
}

/* A merchant can paste a plain HTML table into a section's WYSIWYG (e.g. a
   technical specifications table) — style it to match the rest of the panel
   rather than leaving it as unstyled browser-default table chrome. */
.akb-highlights__panel table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5em 0;
}

.akb-highlights__panel th,
.akb-highlights__panel td {
	padding: 0.5em 0.75em 0.5em 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--akb-h-border);
}

.akb-highlights__panel th {
	width: 45%;
	font-weight: 600;
	color: var(--akb-h-accent-dark);
}

/* Working Instructions is authored as a numbered <ol> — each step gets a
   filled circular number instead of the browser's default marker, with a
   hairline between steps so a long procedure stays scannable rather than
   reading as a wall of paragraphs. */
.akb-highlights__panel ol {
	list-style: none;
	counter-reset: akb-steps;
	margin: 0.5em 0;
	padding: 0;
}

.akb-highlights__panel ol li {
	counter-increment: akb-steps;
	position: relative;
	padding: 0.6em 0 0.6em 2.4em;
	border-bottom: 1px solid var(--akb-h-border);
}

.akb-highlights__panel ol li:last-child {
	border-bottom: none;
}

.akb-highlights__panel ol li::before {
	content: counter(akb-steps);
	position: absolute;
	left: 0;
	top: 0.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--akb-h-accent-dark);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
}

/* Disclaimers is authored as a <ul> — each caveat gets a warning mark
   instead of a bullet, in the site's error red, distinct from the neutral
   numbered steps above. */
.akb-highlights__panel ul {
	list-style: none;
	margin: 0.5em 0;
	padding: 0;
}

.akb-highlights__panel ul li {
	position: relative;
	padding: 0.6em 0 0.6em 2em;
	border-bottom: 1px solid var(--akb-h-border);
}

.akb-highlights__panel ul li:last-child {
	border-bottom: none;
}

.akb-highlights__panel ul li::before {
	content: '!';
	position: absolute;
	left: 0;
	top: 0.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	border: 1.5px solid var(--akb-h-error);
	color: var(--akb-h-error);
	font-size: 0.75em;
	font-weight: 700;
}

/* A full-width divider, matching .akb-highlights__row/__accordion above,
   separating the button from whatever the last section was (difficulty,
   or the last accordion) — the button itself stays a compact inline pill
   (see .akb-highlights__cta below), so the border lives on this wrapper
   instead of the button, which would only be as wide as the button. */
.akb-highlights__cta-row {
	margin-top: 1.25em;
	padding-top: 1.25em;
	border-top: 1px solid var(--akb-h-border);
}

/* Sized and coloured like the wizard's own .akb-btn--primary (kit-builder.css
   above) and the theme's real .single_add_to_cart_button — same blue,
   same hover-to-blue-light — rather than a full-width block of its own. */
.akb-highlights__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.4em;
	border: none;
	border-radius: 999px;
	background: var(--akb-h-accent-dark);
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.12s ease;
}

.akb-highlights__cta svg {
	width: 1em;
	height: 1em;
}

.akb-highlights__cta:hover {
	background: var(--akb-h-accent);
}

/* Quick-facts box and surfaces/finishes feature grid — used to replace the
   old hand-styled stack of bold/coloured <p> tags in a product's native
   short_description and description fields (see the training-course product
   redesign) with something consistent. Both render inside WooCommerce's own
   .summary / .woocommerce-Tabs-panel--description markup, *outside*
   .akb-highlights, so they can't rely on its --akb-h-* custom properties
   (those only cascade to its own descendants) — colours are the same
   palette but hard-coded here rather than duplicating another --akb-h-*
   block for a component that isn't part of the highlights box itself. */
/* Wraps the surrounding intro/note paragraphs in short_description and
   description, opting them out of the theme's own
   .woocommerce-product-details__short-description p / .entry-summary p rule
   (a washed-out #919191 "muted" grey, too light against .akb-quickfacts and
   .akb-feature-grid's own #6e6e6e body text right next to it) — scoped to
   only the paragraphs deliberately wrapped in it, not a site-wide override
   of that theme rule. */
.akb-copy p {
	color: #6e6e6e;
}

/* Heading-weight callout within .akb-copy — #0c376a is the theme's own dark
   blue for this kind of heading (matches what the original hand-authored
   <h4><span style="color: #0c376a;"> used), kept distinct from
   .akb-quickfacts/.akb-feature-grid's #092c5f so this reads as a call to
   action rather than a data label. */
.akb-copy p.akb-copy__callout {
	color: #0c376a;
	font-weight: 700;
	font-size: 1.05em;
}

/* A single real, attributed testimonial — not a fabricated trust metric.
   Centred pull-quote, placed just above the date picker (see the training-
   course product) so it lands right at the decision point rather than
   competing with .akb-quickfacts as a third bordered box in a row. Tinted
   background matches .akb-quickfacts' card treatment for a consistent
   "boxed content" language across the page. */
.akb-testimonial {
	margin: 1.5em 0;
	padding: 1.5em 1.75em;
	border-radius: 8px;
	background: #f7f9fb;
	text-align: center;
}

.akb-testimonial blockquote {
	margin: 0 auto 0.5em;
	max-width: 32em;
	padding: 0;
	border: none;
	font-style: italic;
	font-size: 1.15em;
	line-height: 1.5;
	color: #6e6e6e;
}

.akb-testimonial cite {
	display: block;
	font-style: normal;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #092c5f;
}

.akb-quickfacts {
	display: grid;
	gap: 0.75em;
	margin: 1.25em 0;
	padding: 1em 1.25em;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #f7f9fb;
}

.akb-quickfacts__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.75em;
	font-size: 0.95em;
	line-height: 1.4;
}

.akb-quickfacts__row::before {
	content: '';
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.5em;
	border-radius: 50%;
	background: #419cd8;
}

.akb-quickfacts__label {
	flex: 0 0 auto;
	min-width: 8.5em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.8em;
	font-weight: 700;
	color: #092c5f;
}

.akb-quickfacts__value {
	color: #6e6e6e;
}

.akb-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5em 2.5em;
	margin: 1.5em 0;
}

.akb-feature-grid__title {
	margin: 0 0 0.6em;
	font-size: 0.9em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-weight: 700;
	color: #092c5f;
}

.akb-feature-grid__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.akb-feature-grid__list li {
	position: relative;
	padding: 0.35em 0 0.35em 1.6em;
	font-size: 0.95em;
	line-height: 1.45;
	color: #6e6e6e;
}

.akb-feature-grid__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	border: 1.5px solid #419cd8;
}

.akb-feature-grid__note {
	margin: 0;
	font-style: italic;
	font-size: 0.9em;
	color: #919191;
}

/* ==========================================================================
   Enhanced non-wizard product pages — buy box / gallery / tabs polish.

   Scoped to body.akb-kit-active (see AKB_Frontend::add_body_class()), which
   is now set for any of: a resolved wizard, the standalone Highlights box,
   the standalone swatch picker, or a plain merchant opt-in
   (AKB_Config::is_enhanced_page() — see the "Use the enhanced page layout"
   checkbox on the product edit screen). Everything here targets WooCommerce's
   *native* markup (the buy box, the woo-variation-gallery plugin's gallery,
   the tabs widget) rather than anything the wizard itself renders, so a
   product with none of those four still gets nothing extra.

   Colours mirror --akb-accent/--akb-accent-dark above and .akb-highlights'
   own --akb-h-* copies — redefined locally on body.akb-kit-active (rather
   than repeated per selector, as .akb-swatch-picker does above) since custom
   properties inherit to every descendant from there, and everything in this
   section sits well outside .akb-builder's scope.
   ========================================================================== */

body.akb-kit-active {
	--akb-p-border: #ccc;
	--akb-p-muted: #919191;
	--akb-p-accent: #419cd8;
	--akb-p-accent-dark: #092c5f;
	--akb-p-bg-soft: #f5f5f5;
	--akb-p-field-h: 2.75em;
}

/* Buy box */

.akb-kit-active .summary.entry-summary {
	padding: 1.5em;
	background: #fff;
	border: 1px solid var(--akb-p-border, #ccc);
	border-radius: 12px;
}

.akb-kit-active .summary.entry-summary > .price {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0.4em 0 0.8em;
}

/* The theme's own short-description colour (woocommerce.css' inherited
   $color__text-main, #919191) reads as washed-out against the rest of the
   card. #4a4a4a was tried first and read as too close to black — #6e6e6e
   splits the difference between the two, and every other body-copy colour
   in the builder (.akb-highlights' --akb-h-text, .akb-copy, .akb-testimonial
   blockquote, .akb-quickfacts__value, .akb-feature-grid__list li) now
   matches it, rather than each picking its own. Headings inside it
   (h3/span.text--blue etc.) already carry their own colour and are
   unaffected. */
.akb-kit-active .summary.entry-summary .woocommerce-product-details__short-description p,
.akb-kit-active .summary.entry-summary .woocommerce-product-details__short-description li {
	color: #6e6e6e;
}

/* Text colour is set explicitly here rather than left to the theme:
   woocommerce.css's `.stock.in-stock`/`.stock.out-of-stock` (green/red) loses
   a specificity fight to its own more general
   `.woocommerce:where(...) div.product .stock` rule (3 classes vs 2), which
   paints every stock state the same olive-mustard — muddy against this
   pill's green/red background tint. Our 5-class selectors below out-specify
   both, so this is the only place these colours are actually decided. */
.akb-kit-active .summary.entry-summary .stock {
	display: inline-block;
	margin: 0 0 0.9em;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	background: var(--akb-p-bg-soft, #f5f5f5);
	font-weight: 600;
	font-size: 0.85em;
}

.akb-kit-active .summary.entry-summary .stock.in-stock {
	background: #e7f6ee;
	color: #0f836d;
}

.akb-kit-active .summary.entry-summary .stock.out-of-stock {
	background: #fbeae6;
	color: #e2401c;
}

/* Inside the relocated stock+Clear row (see .akb-stock-clear-row above),
   the row's own margin-bottom provides the spacing before the quantity/
   Add-to-basket row — the pill's own margin-bottom would just add extra
   empty space below it within that flex row. */
.akb-kit-active .summary.entry-summary .akb-stock-clear-row .stock {
	margin: 0;
}

.akb-kit-active .summary.entry-summary form.cart {
	margin-top: 1.2em;
	gap: 0.75em;
	align-items: stretch;
}

.akb-kit-active .summary.entry-summary form.cart .quantity .qty {
	height: var(--akb-p-field-h, 2.75em);
	min-width: 3.5em;
	border-radius: 8px;
	border-color: var(--akb-p-border, #ccc);
	font-size: 1em;
	appearance: textfield;
	-moz-appearance: textfield;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.akb-kit-active .summary.entry-summary form.cart .quantity .qty::-webkit-outer-spin-button,
.akb-kit-active .summary.entry-summary form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.akb-kit-active .summary.entry-summary form.cart .quantity .qty:hover {
	border-color: var(--akb-p-accent, #419cd8);
}

.akb-kit-active .summary.entry-summary form.cart .quantity .qty:focus {
	border-color: var(--akb-p-accent, #419cd8);
	box-shadow: 0 0 0 3px rgba(65, 156, 216, 0.15);
	outline: none;
}

.akb-kit-active .summary.entry-summary .single_add_to_cart_button {
	height: var(--akb-p-field-h, 2.75em);
	border-radius: 8px;
	padding: 0 1.6em;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.akb-kit-active .summary.entry-summary table.variations select {
	height: var(--akb-p-field-h, 2.75em);
	border-radius: 8px;
	padding: 0 0.75em;
}

/* Only reached by a variation attribute with no swatch/pill data at all —
   one that does gets .akb-swatch-picker-row's own label styling instead
   (see above), which this deliberately matches. */
.akb-kit-active .summary.entry-summary table.variations th.label label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--akb-p-muted, #919191);
}

/* Gallery chrome — image-level only (no overflow:hidden on any wrapper),
   since the woo-variation-gallery plugin's slick-slider arrows
   (.wvg-slider-prev-arrow etc.) sit at the edge of that wrapper and would
   get clipped by it. Covers the wvg markup plus the classic/block gallery
   fallbacks for a theme where wvg isn't active. */
.akb-product-top .woo-variation-gallery-slider-wrapper img,
.akb-product-top .woocommerce-product-gallery__image img,
.akb-product-top .woocommerce-product-gallery__wrapper img,
.akb-product-top .wp-block-woocommerce-product-image-gallery img {
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.akb-product-top .woo-variation-gallery-thumbnail-wrapper img {
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color 0.12s ease;
}

/* .slick-current is the thumbnail synced to whichever slide the main slider
   (asNavFor) is currently showing — the plugin's own selected-state signal. */
.akb-product-top .woo-variation-gallery-thumbnail-wrapper .slick-current img {
	border-color: var(--akb-p-accent, #419cd8);
}

/* Tabs — higher specificity than woocommerce.css's own
   .woocommerce-tabs ul.tabs / ul.tabs li a rules (3 classes vs 2 here), so
   this wins without !important regardless of stylesheet load order. */

.akb-kit-active .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	border-bottom: 1px solid var(--akb-p-border, #ccc);
	margin-bottom: 1.5em;
}

.akb-kit-active .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.akb-kit-active .woocommerce-tabs ul.tabs li a {
	padding: 0.75em 0.1em;
	font-weight: 600;
	color: var(--akb-p-muted, #919191);
	border-bottom: 2px solid transparent;
}

.akb-kit-active .woocommerce-tabs ul.tabs li.active a {
	color: var(--akb-p-accent-dark, #092c5f);
	border-bottom-color: var(--akb-p-accent, #419cd8);
}

.akb-kit-active .woocommerce-tabs .panel {
	padding-top: 0.5em;
}