/* ===========================================================
   Swatch shade labels
   Loaded after gr-redesign.css, which owns the base rule.
   =========================================================== */

/* Default: no label. gr-redesign prints attr(data-cgkit-tooltip), which is
   the full "1 - Nicht auf Lager" sentence; nowrap inside a 40px swatch on a
   50px pitch made eight of them overlap. Suppressed unless the short shade
   number has been extracted. */
html body .cgkit-attribute-swatches li.cgkit-attribute-swatch[data-cgkit-tooltip]::after {
	content: none;
}

/* The shade number, centred under its own swatch. */
html body .cgkit-attribute-swatches li.cgkit-attribute-swatch[data-gr-shade]::after {
	content: attr(data-gr-shade);
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translateX(-50%);
	margin-top: 5px;
	width: auto;
	max-width: 46px;
	height: auto;
	border: 0;
	padding: 0;
	background: none;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .02em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #5C5153;
	pointer-events: none;
}

/* Room for the label, so it does not collide with what follows. */
html body .cgkit-attribute-swatches {
	row-gap: 26px;
}

html body .cgkit-attribute-swatches li.cgkit-attribute-swatch {
	margin-bottom: 18px;
}

/* Out of stock: struck through, not faded out.
 *
 * Fading to opacity .4 washed real colours -- black, plum, petrol blue --
 * into near-identical pale grey, so the row read as eight blank discs and
 * you could not tell which shades were actually available. The colour now
 * stays legible and the state is carried by a diagonal line instead.
 *
 * CommerceKit already renders a .cross span, absolutely positioned and
 * display:none, so nothing new is added to the markup.
 *
 * The line is white with a dark hairline either side, which keeps it
 * visible on both the near-black shades and the pale grey one. */
html body .cgkit-attribute-swatches li.cgkit-attribute-swatch[data-gr-oos] .cgkit-swatch,
html body .cgkit-attribute-swatches li.cgkit-attribute-swatch[data-gr-oos] .cgkit-swatch.cgkit-as-outofstock,
html body .cgkit-attribute-swatch[data-gr-oos] .cgkit-swatch .color-div {
	opacity: .85;
	cursor: not-allowed;
}

html body .cgkit-attribute-swatch[data-gr-oos] .cgkit-swatch .cross {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1.4px),
		rgba(32, 26, 28, .45) calc(50% - 1.4px),
		rgba(255, 255, 255, .95) calc(50% - .7px),
		rgba(255, 255, 255, .95) calc(50% + .7px),
		rgba(32, 26, 28, .45) calc(50% + 1.4px),
		transparent calc(50% + 1.4px)
	);
}

/* The shade number under a struck-through swatch is muted, but not
   struck through as well -- one signal is enough. */
html body .cgkit-attribute-swatch[data-gr-oos]::after {
	color: #9A9092;
}