/**
 * Swatch styles.
 *
 * Everything is scoped to .kabaa-swatches so theme styles are left alone and
 * ours do not leak. Size and colour arrive as custom properties set inline.
 * --kabaa-swatch-font-size is set only when the store chose one; otherwise the
 * fallback keeps swatch text relative to the theme.
 */

.kabaa-swatches {
	--kabaa-swatch-width: 36px;
	--kabaa-swatch-height: 36px;
	--kabaa-swatch-gap: 8px;
	--kabaa-swatch-border: #c9ccd1;
	--kabaa-swatch-border-selected: #111;
	--kabaa-swatch-focus: #2271b1;
	--kabaa-swatch-selection: #2f80ed;
	--kabaa-swatch-on-selection: #111111;
	--kabaa-ring-gap: 3px;
	--kabaa-ring-width: 2px;
	/* How far a selection ring reaches beyond the swatch. */
	--kabaa-ring-reach: calc(var(--kabaa-ring-gap) + var(--kabaa-ring-width));
}

.kabaa-swatches__select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The real radio input, visually hidden but focusable and operable.
 *
 * Deliberately NOT .screen-reader-text. WordPress, Blocksy and WooCommerce all
 * ship `.screen-reader-text:focus { width:auto; clip-path:none; background:... }`
 * so that skip links appear when focused. That is right for a link and wrong for
 * a focusable form control: the moment the radio is focused it would un-hide
 * into a box painted over the swatch label.
 *
 * appearance:none matters: without it Chrome still paints the native control's
 * focus ring outside the clip, which shows up as a radio button sitting on top
 * of the swatch label. outline:none is safe because the visible focus indicator
 * is drawn on the label below.
 */
.kabaa-swatches__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

.kabaa-swatches__group {
	display: flex;
	flex-wrap: wrap;
	/* Derived, not fixed: a bigger ring must push neighbours further apart. */
	gap: max(var(--kabaa-swatch-gap), calc(var(--kabaa-ring-reach) * 2 + 4px));
	margin: 0;
	padding: 0;
	border: 0;
}

.kabaa-swatches__item {
	display: inline-flex;
	position: relative;
}

.kabaa-swatches__swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--kabaa-swatch-width);
	height: var(--kabaa-swatch-height);
	margin: 0;
	padding: 0;
	border: 1px solid var(--kabaa-swatch-border);
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

/*
 * Colour and image swatches are exactly the configured width. Width and height
 * are independent, so a round swatch with different values is an oval: 50% of
 * each side. The ring, cross-out and focus all follow it through inherit.
 */
.kabaa-swatches--color .kabaa-swatches__swatch,
.kabaa-swatches--image .kabaa-swatches__swatch {
	width: var(--kabaa-swatch-width);
}

/* A colour or image swatch showing its name as text must not clip it. */
.kabaa-swatches .kabaa-swatches__swatch.is-text {
	width: auto;
}

.kabaa-swatches--round .kabaa-swatches__swatch {
	border-radius: 50%;
}

.kabaa-swatches--square .kabaa-swatches__swatch {
	border-radius: 3px;
}

.kabaa-swatches--button .kabaa-swatches__swatch {
	border-radius: 3px;
	padding: 0 12px;
	width: auto;
}

.kabaa-swatches__color {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--kabaa-swatch-color, transparent);
}

.kabaa-swatches__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kabaa-swatches__text {
	font-size: var(--kabaa-swatch-font-size, 0.875em);
	line-height: 1;
	padding: 0 6px;
	white-space: nowrap;
}

/*
 * Selected state.
 *
 * The indicator must not depend on the swatch's own colour. Drawing it ON the
 * swatch in a fixed colour is how a black swatch ended up with an invisible
 * selection; every style below either sits outside the swatch or replaces it.
 */

/* RING — an outline outside the swatch, with a genuinely transparent gap.
 *
 * A box-shadow ring would need the page background painted into the gap, and we
 * do not know it. A pseudo-element lets whatever the theme uses show through, so
 * this works on light and dark themes alike. ::before, because ::after draws the
 * unavailable marking and a swatch can be both.
 */
.kabaa-swatches--sel-ring .kabaa-swatches__item {
	/* Room for the ring, so it cannot be clipped by a neighbour. */
	padding: var(--kabaa-ring-reach);
	margin: calc(var(--kabaa-ring-reach) * -1);
}

.kabaa-swatches--sel-ring .kabaa-swatches__input:checked + .kabaa-swatches__swatch::before,
.kabaa-swatches--sel-ring .kabaa-swatches__swatch.is-selected::before {
	content: "";
	position: absolute;
	inset: calc(var(--kabaa-ring-reach) * -1);
	border: var(--kabaa-ring-width) solid var(--kabaa-swatch-selection);
	border-radius: inherit;
	pointer-events: none;
}

.kabaa-swatches--sel-ring .kabaa-swatches__swatch {
	/* The ring is positioned against this. */
	position: relative;
	overflow: visible;
}

/* The swatch's own fill still needs clipping to the shape. */
.kabaa-swatches--sel-ring .kabaa-swatches__color,
.kabaa-swatches--sel-ring .kabaa-swatches__image {
	border-radius: inherit;
}

/* FILL — the swatch becomes the indicator. Right for text swatches, which have
 * no colour to obscure. The label colour is computed from the fill's luminance
 * in PHP, never configured, because the only thing a wrong value buys is
 * unreadable text. */
.kabaa-swatches--sel-fill .kabaa-swatches__input:checked + .kabaa-swatches__swatch,
.kabaa-swatches--sel-fill .kabaa-swatches__swatch.is-selected {
	background: var(--kabaa-swatch-selection);
	border-color: var(--kabaa-swatch-selection);
	color: var(--kabaa-swatch-on-selection);
}

.kabaa-swatches--sel-fill .kabaa-swatches__input:checked + .kabaa-swatches__swatch .kabaa-swatches__text,
.kabaa-swatches--sel-fill .kabaa-swatches__swatch.is-selected .kabaa-swatches__text {
	color: var(--kabaa-swatch-on-selection);
}

/* BORDER — what the plugin did before. Kept so nobody is forced off it. */
.kabaa-swatches--sel-border .kabaa-swatches__input:checked + .kabaa-swatches__swatch,
.kabaa-swatches--sel-border .kabaa-swatches__swatch.is-selected {
	border-width: 2px;
	border-color: var(--kabaa-swatch-selection);
	box-shadow: inset 0 0 0 2px #fff;
}

.kabaa-swatches--button.kabaa-swatches--sel-border .kabaa-swatches__input:checked + .kabaa-swatches__swatch,
.kabaa-swatches--button.kabaa-swatches--sel-border .kabaa-swatches__swatch.is-selected {
	box-shadow: none;
	background: #f2f3f5;
}

/*
 * Keyboard focus. Separated from selection by FORM and DISTANCE, not by colour:
 * a dashed outline further out. Relying on colour to tell focus from selection
 * would fail the moment someone picks a selection colour near the focus colour —
 * the same mistake this change exists to fix, one level up.
 */
.kabaa-swatches__input:focus-visible + .kabaa-swatches__swatch,
a.kabaa-swatches__swatch:focus-visible {
	outline: 2px dashed var(--kabaa-swatch-focus);
	outline-offset: calc(var(--kabaa-ring-reach) + 3px);
}

/*
 * Keyboard only. A plain :focus fallback would also fire on every mouse click,
 * leaving a dashed ring around a swatch the shopper just clicked — noise next to
 * the selection ring that is already there. The fallback is kept for browsers
 * without :focus-visible, where showing it too often beats not showing it at all.
 */
@supports not selector(:focus-visible) {
	.kabaa-swatches__input:focus + .kabaa-swatches__swatch,
	a.kabaa-swatches__swatch:focus {
		outline: 2px dashed var(--kabaa-swatch-focus);
		outline-offset: calc(var(--kabaa-ring-reach) + 3px);
	}
}

/* Out of stock display modes. */
.kabaa-swatches--oos-cross_out .kabaa-swatches__item.is-unavailable .kabaa-swatches__swatch {
	position: relative;
	opacity: 0.55;
}

/*
 * The stroke is two-tone rather than a single computed colour.
 *
 * Picking a colour to contrast with the swatch works for a colour swatch and is
 * impossible for an image one, whose pixels we do not know — which would leave
 * the original bug alive in two cases out of three. A dark line with a light
 * halo needs no knowledge of what it crosses: on a dark swatch the halo reads,
 * on a light one the line does.
 *
 * The shape is handled by the swatch's own border-radius and overflow.
 */
.kabaa-swatches--oos-cross_out .kabaa-swatches__item.is-unavailable .kabaa-swatches__swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 2px),
		rgba(255, 255, 255, 0.9) calc(50% - 2px),
		rgba(255, 255, 255, 0.9) calc(50% - 1px),
		rgba(17, 17, 17, 0.9) calc(50% - 1px),
		rgba(17, 17, 17, 0.9) calc(50% + 1px),
		rgba(255, 255, 255, 0.9) calc(50% + 1px),
		rgba(255, 255, 255, 0.9) calc(50% + 2px),
		transparent calc(50% + 2px)
	);
	pointer-events: none;
}

.kabaa-swatches--oos-blur .kabaa-swatches__item.is-unavailable .kabaa-swatches__swatch {
	opacity: 0.35;
	filter: blur(1px);
}

.kabaa-swatches--oos-hide .kabaa-swatches__item.is-unavailable {
	display: none;
}

.kabaa-swatches__empty {
	margin: 0;
	font-size: 0.875em;
	opacity: 0.75;
}

.kabaa-swatches__selected-name {
	font-weight: normal;
	opacity: 0.75;
}

.kabaa-swatches__selected-name::before {
	content: ": ";
}

/*
 * Tooltip. A sibling of the label, not a child: the label clips to the swatch
 * shape (overflow:hidden) and is blurred in the blur out-of-stock mode, and the
 * tooltip must escape both. Hidden with visibility, not display, so it can fade.
 *
 * Revealed on hover and on keyboard focus of the radio, the same signal the
 * focus ring uses. No JS, no native title, so there is no browser delay.
 */
.kabaa-swatches__tip {
	--kabaa-tip-bg: #1d2327;
	--kabaa-tip-fg: #fff;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	z-index: 20;
	width: max-content;
	max-width: min(240px, 80vw);
	padding: 4px 8px;
	border-radius: 3px;
	background: var(--kabaa-tip-bg);
	color: var(--kabaa-tip-fg);
	font-size: 0.8125rem;
	font-weight: normal;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity 120ms ease, visibility 120ms;
}

/* Arrow pointing at the swatch. */
.kabaa-swatches__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: var(--kabaa-tip-bg);
}

.kabaa-swatches--tooltips .kabaa-swatches__item:hover .kabaa-swatches__tip,
.kabaa-swatches--tooltips .kabaa-swatches__input:focus-visible ~ .kabaa-swatches__tip,
.kabaa-swatches--tooltips .kabaa-swatches__swatch:focus-visible ~ .kabaa-swatches__tip {
	visibility: visible;
	opacity: 1;
}

/*
 * Tooltip photo: the option's photo above the text, in the same tooltip.
 * Fixed width so the tooltip does not change size when the file arrives; the
 * img's width and height attributes give the browser its height up front.
 * Hidden until the script gives it a src, so a page without scripts keeps a
 * plain text tooltip rather than an empty box.
 */
.kabaa-swatches__tip.has-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 120px;
	padding: 4px 4px 6px;
}

.kabaa-swatches__tip-photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
}

.kabaa-swatches__tip-photo:not([src]) {
	display: none;
}

/* Same fallback reasoning as the focus ring above. */
@supports not selector(:focus-visible) {
	.kabaa-swatches--tooltips .kabaa-swatches__input:focus ~ .kabaa-swatches__tip,
	.kabaa-swatches--tooltips .kabaa-swatches__swatch:focus ~ .kabaa-swatches__tip {
		visibility: visible;
		opacity: 1;
	}
}

/*
 * Shop cards.
 *
 * A card swatch is a link, not a radio: there is no form on a card. The
 * selected state is a class card-swatches.js sets, mapped onto the same three
 * selection styles above, so a card swatch looks like its product-page self.
 * The group is inline-flex so it follows the card's own text alignment:
 * centred on themes that centre card text, left-aligned on the rest.
 */
.kabaa-card {
	margin: 6px 0 10px;
}

/* Alignment set in Swatches > Settings; "Follow theme" adds no class. */
.kabaa-card--align-left {
	text-align: left;
}

.kabaa-card--align-center {
	text-align: center;
}

.kabaa-card--align-right {
	text-align: right;
}

.kabaa-swatches--card + .kabaa-swatches--card {
	margin-top: var(--kabaa-card-row-gap, 6px);
}

/* A card is small: a tighter ring, so it needs less room between swatches. */
.kabaa-swatches--card {
	--kabaa-ring-gap: 2px;
}

.kabaa-swatches--card .kabaa-swatches__group {
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
	vertical-align: top;
	list-style: none;
	margin: 0;
	padding: 0;
	/* The owner's spacing as set: border, fill and tick draw inside the swatch. */
	gap: var(--kabaa-swatch-gap);
}

/* A ring draws outside the swatch; closer than this, neighbouring rings overlap. */
.kabaa-swatches--card.kabaa-swatches--sel-ring .kabaa-swatches__group {
	gap: max(var(--kabaa-swatch-gap), calc(var(--kabaa-ring-reach) * 2 + 4px));
}

.kabaa-swatches--card .kabaa-swatches__item {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	list-style: none;
}

/* Touch target: at least 24 x 24px (WCAG 2.2, 2.5.8) however small the swatch
 * is drawn. Behind the link, so the link keeps its hover and tooltip; the card
 * script treats a tap here as a tap on the swatch. Changes no layout. */
.kabaa-swatches--card .kabaa-swatches__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 24px);
	height: max(100%, 24px);
	transform: translate(-50%, -50%);
}

.kabaa-swatches--card a.kabaa-swatches__swatch {
	position: relative;
	z-index: 1;
}

.kabaa-swatches--card a.kabaa-swatches__swatch {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

/* Themes outline every focused link; ours shows the dashed ring on keyboard focus only. */
.kabaa-swatches--card a.kabaa-swatches__swatch:focus:not(:focus-visible) {
	outline: none;
}

/* Options past the limit wait for the "+N" control. Without scripts that
 * control is a link to the product, where every option is shown. */
.kabaa-swatches--card .kabaa-swatches__item.is-overflow {
	display: none;
}

.kabaa-swatches--card.is-expanded .kabaa-swatches__item.is-overflow {
	display: inline-flex;
}

/* Hide mode still hides an option the selection made unavailable, expanded or not. */
.kabaa-swatches--card.kabaa-swatches--oos-hide .kabaa-swatches__item.is-unavailable.is-overflow {
	display: none;
}

.kabaa-swatches--card .kabaa-swatches__more {
	display: inline-flex;
	align-items: center;
	list-style: none;
}

/* The display above would otherwise beat the hidden attribute. */
.kabaa-swatches--card .kabaa-swatches__more[hidden] {
	display: none;
}

.kabaa-swatches--card .kabaa-swatches__more-less,
.kabaa-swatches--card.is-expanded .kabaa-swatches__more-count {
	display: none;
}

.kabaa-swatches--card.is-expanded .kabaa-swatches__more-less {
	display: inline;
}

.kabaa-swatches--card .kabaa-swatches__more a {
	font-size: 0.875em;
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
}

.kabaa-swatches--card .kabaa-swatches__more a:hover,
.kabaa-swatches--card .kabaa-swatches__more a:focus-visible {
	text-decoration: underline;
	opacity: 1;
}

/* A complete choice on a card that cannot be bought: the button says why. */
.is-kabaa-blocked {
	opacity: 0.55;
	cursor: not-allowed;
}

/* "Add to cart" activated before every option was chosen: the rows still missing a choice. */
.kabaa-swatches--card.is-kabaa-missing .kabaa-swatches__group {
	outline: 2px solid var(--kabaa-swatch-selection, #2f80ed);
	outline-offset: 3px;
	border-radius: 4px;
}

.kabaa-card__notice {
	margin: 6px 0 0;
	font-size: 0.875em;
	line-height: 1.4;
}

.kabaa-card__notice:empty {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.kabaa-swatches__swatch,
	.kabaa-swatches__tip {
		transition: none;
	}
}

/*
 * Tiles: a photo with its price underneath. Larger than a swatch and always a
 * rounded rectangle, whatever the shape setting, because a price line cannot
 * sit inside a circle. Later in the file than the shape rules, so it wins.
 */
.kabaa-swatches--tile {
	--kabaa-tile-width: 88px;
}

.kabaa-swatches--tile .kabaa-swatches__swatch {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: var(--kabaa-tile-width);
	min-width: 0;
	/* A tap target of at least 24px is met many times over; never taller than its content. */
	height: auto;
	border-radius: 6px;
}

.kabaa-swatches--tile .kabaa-swatches__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 5px 5px 0 0;
}

/* No photo: the name takes the photo's place, so tiles in a row stay aligned. */
.kabaa-swatches--tile .kabaa-swatches__swatch.is-text {
	width: var(--kabaa-tile-width);
}

.kabaa-swatches--tile .kabaa-swatches__swatch.is-text .kabaa-swatches__text {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
}

.kabaa-swatches__price {
	display: block;
	padding: 4px 6px 5px;
	border-top: 1px solid var(--kabaa-swatch-border);
	font-size: 0.8125em;
	line-height: 1.3;
	text-align: left;
	overflow-wrap: anywhere;
}

.kabaa-swatches__price:empty {
	display: none;
}

/*
 * WooCommerce's sale markup: the regular price on its own line under the sale
 * one, as large stores show it. Only a sale becomes a column: a range has a
 * bare dash between its prices, which a column would put on a line of its own.
 * Some themes wrap the sale in .sale-price, through WooCommerce's filter.
 * Browsers without :has() keep WooCommerce's own order on one line there.
 */
.kabaa-swatches__price > .sale-price,
.kabaa-swatches__price:has(> del) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.kabaa-swatches__price del {
	order: 2;
	opacity: 0.6;
	font-size: 0.9em;
}

.kabaa-swatches__price .woocommerce-price-suffix {
	order: 3;
}

.kabaa-swatches__price ins {
	text-decoration: none;
	font-weight: 600;
}

.kabaa-swatches__price .woocommerce-price-suffix {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Fill selection: the photo stays visible, only the price line takes the colour. */
.kabaa-swatches--tile.kabaa-swatches--sel-fill .kabaa-swatches__input:checked + .kabaa-swatches__swatch,
.kabaa-swatches--tile.kabaa-swatches--sel-fill .kabaa-swatches__swatch.is-selected {
	background: #fff;
}

.kabaa-swatches--tile.kabaa-swatches--sel-fill .kabaa-swatches__input:checked + .kabaa-swatches__swatch .kabaa-swatches__price {
	background: var(--kabaa-swatch-selection);
	color: var(--kabaa-swatch-on-selection);
	border-top-color: var(--kabaa-swatch-selection);
}

/* Hover hint, on devices that hover: the tile previews its photo in the gallery. */
@media (hover: hover) {
	.kabaa-swatches--tile .kabaa-swatches__swatch:hover {
		border-color: var(--kabaa-swatch-border-selected);
	}
}

/*
 * Radio: one option per line, the browser's own radio control and the name
 * beside it. The input that every other type hides is shown, so focus, checked
 * state and keyboard handling are the browser's. appearance:auto wins over a
 * theme that hides every radio to draw its own, which would otherwise leave
 * this list with no visible control. The label loses its chip box: size,
 * shape and selection style describe chips, and a line of text has none.
 * Later in the file than the shape, focus and out-of-stock rules, so it wins.
 */
.kabaa-swatches--radio .kabaa-swatches__group {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 4px;
}

.kabaa-swatches--radio .kabaa-swatches__item {
	display: flex;
	/* Top, not centre: the control stays beside the first line of a name that wraps. */
	align-items: flex-start;
	gap: 0.5em;
	/* Same size as the name, so the control grows with the font size setting. */
	font-size: var(--kabaa-swatch-font-size, inherit);
	/* Touch target: at least 24px tall, matching the card swatch rule. */
	min-height: 24px;
}

.kabaa-swatches--radio .kabaa-swatches__input {
	position: static;
	flex: none;
	/* Form controls do not inherit font size; without this, em means the browser's 13px. */
	font-size: inherit;
	width: 0.8em;
	height: 0.8em;
	/* Centred on the first line: (line-height 1.5em - 0.8em) / 2. */
	margin: 0.35em 0 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	-webkit-appearance: auto;
	appearance: auto;
	accent-color: var(--kabaa-swatch-selection);
	cursor: pointer;
}

.kabaa-swatches--radio .kabaa-swatches__swatch {
	display: block;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
	/* Themes size every label (Blocksy: 15px); the name follows the item instead. */
	font-size: inherit;
}

.kabaa-swatches--radio .kabaa-swatches__text {
	display: block;
	padding: 0;
	font-size: inherit;
	line-height: 1.5;
	white-space: normal;
}

/* The control is visible now, so focus goes on it rather than on the label. */
.kabaa-swatches--radio .kabaa-swatches__input:focus-visible + .kabaa-swatches__swatch {
	outline: none;
}

.kabaa-swatches--radio .kabaa-swatches__input:focus-visible {
	outline: 2px dashed var(--kabaa-swatch-focus);
	outline-offset: 2px;
}

@supports not selector(:focus-visible) {
	.kabaa-swatches--radio .kabaa-swatches__input:focus + .kabaa-swatches__swatch {
		outline: none;
	}

	.kabaa-swatches--radio .kabaa-swatches__input:focus {
		outline: 2px dashed var(--kabaa-swatch-focus);
		outline-offset: 2px;
	}
}

/* Cross out: a struck-through name, not a diagonal across a line of text. */
.kabaa-swatches--radio.kabaa-swatches--oos-cross_out .kabaa-swatches__item.is-unavailable .kabaa-swatches__swatch {
	text-decoration: line-through;
}

.kabaa-swatches--radio.kabaa-swatches--oos-cross_out .kabaa-swatches__item.is-unavailable .kabaa-swatches__swatch::after {
	content: none;
}

/* The out-of-stock rules dim the label; the control beside it dims with it. */
.kabaa-swatches--radio.kabaa-swatches--oos-cross_out .kabaa-swatches__item.is-unavailable .kabaa-swatches__input {
	opacity: 0.55;
}

.kabaa-swatches--radio.kabaa-swatches--oos-blur .kabaa-swatches__item.is-unavailable .kabaa-swatches__input {
	opacity: 0.35;
}

/* ---------------------------------------------------------------------------
 * Copy-link control.
 *
 * Sits after the variation form, off by default. Deliberately plain: it
 * borrows the theme's own button colours rather than imposing ours, so it
 * reads as part of the page it lands in.
 *
 * It carries its own colours rather than reading the swatch custom
 * properties: those are declared on .kabaa-swatches, and this control is a
 * sibling of the variation form, not a descendant of any swatch group. A
 * var() reaching for them here resolves to nothing, which would take the
 * whole declaration with it.
 * ------------------------------------------------------------------------ */

.kabaa-swatches-share {
	--kabaa-share-border: #c9ccd1;
	--kabaa-share-border-hover: #111;
	--kabaa-share-focus: #2271b1;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
}

.kabaa-swatches-share__button {
	/* At least a 24x24 target, matching the card swatch rule, whatever the
	   theme does to the text size. */
	min-height: 24px;
	min-width: 24px;
	padding: 6px 12px;
	border: 1px solid var(--kabaa-share-border);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.kabaa-swatches-share__button:hover {
	border-color: var(--kabaa-share-border-hover);
}

.kabaa-swatches-share__button:focus-visible {
	outline: 2px solid var(--kabaa-share-focus);
	outline-offset: 2px;
}

/* Last resort, shown only when the browser refused both ways of copying.
   Its own row, so a long address never squeezes the button. */
.kabaa-swatches-share__url {
	flex: 1 1 100%;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--kabaa-share-border);
	border-radius: 4px;
	font: inherit;
}

/* Said beside the button, and announced: one element doing both, so the
   button never has to rename itself to report a result. */
.kabaa-swatches-share__status {
	font-size: 0.9em;
	opacity: 0.8;
}

.kabaa-swatches-share__status:empty {
	display: none;
}