/* Kuck redesign — komponenty wspólne: cena, dostępność, znaczek, karta produktu, szybki podgląd, tor, zakładki, segment, pola, okruszki, paginacja.
   Plik wygenerowany: redesign/tools/jinja/codemod/build-shell-css.mjs (prefix.mjs) ze źródeł mockupu components.css, home.css (pause-btn, tabs--sm), catalogue.css (okruszki, stan pusty, paginacja), overlay/components.css.
   Nie edytuj ręcznie: zmiany wprowadzaj w mockupie albo w codemod/overlay/*.css i zbuduj ponownie. */

/* Kuck redesign — shared commerce components: price, stock, badge, product card
   (with variants, hover photo, quick view), rail, tabs, segmented control, fields.
   Maps onto ks-price, ks-stock-status, ks-badge, ks-product-card in production. */

/* ---------- product card ----------
   Compact and quiet: the photo is the hero of the card, text is small and precise.
   Four rows: photo / brand + availability / name / price block. Inside a rail the card is a
   subgrid of the track, so row heights are shared by every card and the hairline above the
   price block sits at exactly the same height on all of them. */

.kr-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--kr-paper);
}

.kr-pcard__body {
	display: contents;
}

.kr-pcard__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: radial-gradient(circle at 50% 42%, #fafaf9 0%, var(--kr-stone-deep) 100%);
}

.kr-pcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

.kr-pcard__link {
	position: absolute;
	inset: 0;
	display: block;
}

.kr-pcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 320ms var(--kr-ease-out), scale 700ms var(--kr-ease-out);
}

.kr-pcard__img--alt {
	object-fit: cover;
	mix-blend-mode: normal;
	opacity: 0;
	scale: 1.04;
}

@media (hover: hover) and (pointer: fine) {
	.kr-pcard:has(.kr-pcard__img--alt):hover .kr-pcard__img--main {
		opacity: 0;
	}

	.kr-pcard:hover .kr-pcard__img--alt {
		opacity: 1;
		scale: 1;
	}

	.kr-pcard:not(:has(.kr-pcard__img--alt)):hover .kr-pcard__img--main {
		scale: 1.05;
	}
}

.kr-pcard__badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	pointer-events: none;
}

/* ---- tools: at rest only a bare heart; on hover or focus a glass column unfolds under it ---- */

.kr-pcard__tools {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: grid;
	isolation: isolate;
}

.kr-pcard__tools::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 56%);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	backdrop-filter: blur(14px) saturate(1.6);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%), 0 0 0 1px rgb(17 17 17 / 9%), 0 12px 24px -10px rgb(0 0 0 / 30%);
	clip-path: inset(0 0 66.667% 0);
	opacity: 0;
	transition: clip-path 200ms var(--kr-ease-out), opacity 160ms var(--kr-ease-out);
}

.kr-tool {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kr-ink);
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out),
		opacity 140ms var(--kr-ease-icon), translate 140ms var(--kr-ease-icon), filter 140ms var(--kr-ease-icon);
}

/* 44 px hit area without growing the 40 px square */
.kr-tool::before {
	content: "";
	position: absolute;
	inset: -2px;
}

.kr-tool .kr-ms {
	font-size: 20px;
}

.kr-tool:active {
	scale: 0.96;
}

.kr-tool[aria-pressed="true"] {
	color: var(--kr-sale);
}

.kr-tool[aria-pressed="true"] .kr-ms {
	font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

.kr-tool[data-kuck-comparison-action][aria-pressed="true"] {
	background: var(--kr-ink);
	color: var(--kr-paper);
}

/* the two extra tools wait folded under the heart */
.kr-tool--x {
	opacity: 0;
	scale: 0.6;
	translate: 0 -10px;
	filter: blur(4px);
	pointer-events: none;
}

.kr-pcard:hover .kr-pcard__tools::before,
.kr-pcard:has(:focus-visible) .kr-pcard__tools::before {
	/* negative inset lets the ring and shadow out once the column is open */
	clip-path: inset(-2px -2px -28px -2px);
	opacity: 1;
	transition: clip-path 340ms var(--kr-ease-out), opacity 200ms var(--kr-ease-out);
}

.kr-pcard:hover .kr-tool--x,
.kr-pcard:has(:focus-visible) .kr-tool--x,
.kr-tool--x[aria-pressed="true"] {
	opacity: 1;
	scale: 1;
	translate: 0 0;
	filter: blur(0);
	pointer-events: auto;
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale 260ms var(--kr-ease-icon) calc(80ms + var(--kr-k, 0) * 55ms),
		opacity 240ms var(--kr-ease-icon) calc(80ms + var(--kr-k, 0) * 55ms), translate 300ms var(--kr-ease-out) calc(80ms + var(--kr-k, 0) * 55ms),
		filter 240ms var(--kr-ease-icon) calc(80ms + var(--kr-k, 0) * 55ms);
}

/* touch has no hover: all three are simply there, on the same glass */
@media (hover: none) {
	.kr-pcard__tools::before {
		clip-path: inset(-2px -2px -28px -2px);
		opacity: 1;
	}

	.kr-tool--x {
		opacity: 1;
		scale: 1;
		translate: 0 0;
		filter: none;
		pointer-events: auto;
	}
}

@media (hover: hover) and (pointer: fine) {
	.kr-tool:hover {
		background: rgb(255 255 255 / 70%);
	}

	.kr-tool[data-kuck-comparison-action][aria-pressed="true"]:hover {
		background: var(--kr-ink-soft);
	}

	/* what an icon-only button does, said once, to the left of it */
	.kr-tool[data-tip]:hover::after,
	.kr-tool[data-tip]:focus-visible::after {
		opacity: 1;
		translate: 0 -50%;
	}
}

.kr-tool[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	translate: 6px -50%;
	padding: 6px 10px;
	background: var(--kr-ink);
	color: var(--kr-paper);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 140ms var(--kr-ease-out), translate 160ms var(--kr-ease-out);
}

@media (hover: none) {
	.kr-tool[data-tip]::after {
		display: none;
	}
}

.kr-pcard__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px var(--kr-s3);
	padding-top: 14px;
}

.kr-pcard__brand {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kr-stock-mini {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--kr-muted);
}

.kr-stock-mini i {
	width: 6px;
	height: 6px;
	background: currentColor;
}

.kr-stock-mini.kr-stock--in {
	color: var(--kr-ok);
}

.kr-stock-mini.kr-stock--order {
	color: var(--kr-warn);
}

.kr-stock-mini.kr-stock--out {
	color: var(--kr-danger);
}

.kr-stock-mini.kr-stock--in i {
	background: var(--kr-ok);
}

.kr-stock-mini.kr-stock--order i {
	background: var(--kr-warn);
}

.kr-stock-mini.kr-stock--out i {
	background: var(--kr-danger);
}

.kr-pcard__name {
	margin-top: 6px;
	min-height: calc(2 * 1.35em);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-wrap: balance;
	/* pełna nazwa modelu jest informacją, nie ozdobą: bez przycinania (dawniej 2 linie z wielokropkiem); wiersze kart wyrównuje subgrid,
	   więc dłuższa nazwa podnosi tylko własny rząd (audyt wizualny 2026-10-08, D-R234) */
	overflow-wrap: anywhere;
}

.kr-pcard__name a {
	text-decoration: none;
}

.kr-pcard__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	.kr-pcard__name a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* price block: hairline, price + one quiet button */
.kr-pcard__buy {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: 40px;
	align-content: start;
	align-items: center;
	column-gap: var(--kr-s3);
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--kr-line);
	/* the container sits here, not on the card: containment would stop the card from being a subgrid */
	container: kr-pcard / inline-size;
}

/* on hover the hairline is drawn in ink from the left */
.kr-pcard__buy::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--kr-ink);
	scale: 0 1;
	transform-origin: left;
	transition: scale 200ms var(--kr-ease-out);
}

.kr-pcard:hover .kr-pcard__buy::before,
.kr-pcard:has(:focus-visible) .kr-pcard__buy::before {
	scale: 1 1;
	transition-duration: 480ms;
}

.kr-pcard__buy .kr-price {
	grid-column: 1;
	grid-row: 1;
}

.kr-pcard__buy .kr-pcard__add {
	grid-column: 2;
	grid-row: 1;
}

/* in a rail the cards share the track's rows */
.kr-rail__track > .kr-pcard {
	display: grid;
	grid-row: span 4;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	row-gap: 0;
}

.kr-rail__track > .kr-pcard .kr-pcard__name {
	min-height: 0;
}

@supports not (grid-template-rows: subgrid) {
	.kr-rail__track > .kr-pcard {
		display: flex;
		grid-row: auto;
	}

	.kr-rail__track > .kr-pcard .kr-pcard__name {
		min-height: calc(2 * 1.35em);
	}
}

.kr-price {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: baseline;
	gap: 0 var(--kr-s2);
	font-variant-numeric: tabular-nums;
}

.kr-price__now {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.kr-price__now--sale {
	color: var(--kr-sale);
}

.kr-price__was {
	font-size: 0.75rem;
	color: var(--kr-muted);
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.kr-price__from {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--kr-muted);
}

.kr-price__low {
	margin-top: 2px;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--kr-muted);
}

.kr-price__low b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.kr-btn--sm {
	min-height: 40px;
	padding: 0 14px;
	gap: var(--kr-s2);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
}

/* dotyk: cel co najmniej 44 px (WCAG 2.5.8 z zapasem) */
@media (pointer: coarse) {
	.kr-btn--sm {
		min-height: 44px;
	}
}

.kr-btn--sm .kr-ms {
	font-size: 18px;
}

.kr-pcard__add {
	flex: none;
}

/* hovering anywhere on the card fills the add-to-cart button with ink */
@media (hover: hover) and (pointer: fine) {
	.kr-pcard:hover .kr-pcard__add:not([disabled]):not([data-state="done"]) {
		background: var(--kr-ink);
		border-color: var(--kr-ink);
		color: var(--kr-paper);
	}

	.kr-pcard:hover .kr-pcard__add:not([disabled]):not([data-state="done"]):hover {
		background: var(--kr-ink-soft);
		border-color: var(--kr-ink-soft);
	}
}

@container kr-pcard (max-width: 239px) {
	.kr-pcard__add .kr-swap > span > span:not(.kr-ms) {
		display: none;
	}

	.kr-pcard__add {
		padding: 0 11px;
	}
}

/* A missing price is a full status line; keep its disabled action readable even in narrow cards. */
.kr-pcard__buy--unpriced {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	row-gap: var(--kr-s3);
}

.kr-pcard__buy--unpriced .kr-price {
	overflow-wrap: anywhere;
}

.kr-pcard__buy--unpriced .kr-pcard__add {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	max-width: 100%;
	white-space: normal;
}

.kr-pcard__buy--unpriced :is(.kr-swap, .kr-swap > *) {
	min-width: 0;
	max-width: 100%;
}

.kr-pcard__buy--unpriced .kr-pcard__add .kr-swap > span > span:not(.kr-ms) {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* state swap: one cell, three states. Icons scale .25 -> 1 + blur 4px -> 0 on (0.2, 0, 0, 1) */
.kr-swap {
	display: inline-grid;
	place-items: center;
}

.kr-swap > * {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	transition: opacity 200ms var(--kr-ease-icon), translate 200ms var(--kr-ease-icon), filter 200ms var(--kr-ease-icon);
}

.kr-swap > * > .kr-ms {
	transition: scale 200ms var(--kr-ease-icon), font-variation-settings var(--kr-t-hover) var(--kr-ease-icon);
}

.kr-swap__b,
.kr-swap__c {
	opacity: 0;
	filter: blur(4px);
	translate: 0 6px;
}

.kr-swap__b > .kr-ms,
.kr-swap__c > .kr-ms {
	scale: 0.25;
}

[data-state="busy"] .kr-swap__a,
[data-state="done"] .kr-swap__a {
	opacity: 0;
	filter: blur(4px);
	translate: 0 -6px;
}

[data-state="busy"] .kr-swap__c,
[data-state="done"] .kr-swap__b {
	opacity: 1;
	filter: blur(0);
	translate: 0 0;
}

/* mniej ruchu, nie zero: stany przełączają się zanikaniem, bez przesunięcia, rozmycia i skali ikony */
@media (prefers-reduced-motion: reduce) {
	.kr-swap > * {
		transition: opacity 120ms linear;
	}

	.kr-swap > * > .kr-ms {
		transition: none;
	}

	.kr-swap__b,
	.kr-swap__c,
	[data-state="busy"] .kr-swap__a,
	[data-state="done"] .kr-swap__a {
		translate: 0 0;
		filter: none;
	}

	.kr-swap__b > .kr-ms,
	.kr-swap__c > .kr-ms {
		scale: 1;
	}
}

[data-state="busy"] .kr-swap__c > .kr-ms,
[data-state="done"] .kr-swap__b > .kr-ms {
	scale: 1;
}

.kr-pcard__add[data-state="busy"],
.kr-qv__add[data-state="busy"] {
	pointer-events: none;
}

.kr-pcard__add[data-state="done"],
.kr-qv__add[data-state="done"] {
	background: var(--kr-ok) !important;
	border-color: var(--kr-ok) !important;
	color: #fff !important;
}

@keyframes kr-spin {
	to {
		rotate: 360deg;
	}
}

.kr-spinner {
	animation: kr-spin 900ms linear infinite;
}

.kr-stock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px var(--kr-s2);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.kr-stock .kr-ms {
	font-size: 18px;
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.kr-stock--in {
	color: var(--kr-ok);
}

.kr-stock--order {
	color: var(--kr-warn);
}

.kr-stock--out {
	color: var(--kr-danger);
}

.kr-badge {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0 var(--kr-s2);
	background: var(--kr-sale);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
/* ---------- quick view dialog (native <dialog>) ----------
   Same stage as the hero: a lit surface with the brand as a ghost watermark behind the photograph.
   The dialog scales in from .985, the backdrop blurs, the info column rises line by line. */

.kr-qv {
	--kr-qv-dir: 1;
	width: min(1120px, 100% - 2 * var(--kr-gutter));
	max-height: calc(100svh - 2 * var(--kr-gutter));
	padding: 0;
	border: 0;
	background: var(--kr-paper);
	color: var(--kr-ink);
	box-shadow: var(--kr-shadow-float);
	overflow: auto;
	overscroll-behavior: contain;
	opacity: 0;
	scale: 0.985;
	translate: 0 14px;
	transition: opacity 260ms var(--kr-ease-out), scale 320ms var(--kr-ease-out), translate 320ms var(--kr-ease-out),
		overlay 260ms allow-discrete, display 260ms allow-discrete;
}

.kr-qv[open] {
	opacity: 1;
	scale: 1;
	translate: 0 0;
}

@starting-style {
	.kr-qv[open] {
		opacity: 0;
		scale: 0.985;
		translate: 0 14px;
	}
}

.kr-qv::backdrop {
	background: rgb(17 17 17 / 48%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 260ms var(--kr-ease-out), overlay 260ms allow-discrete, display 260ms allow-discrete;
}

.kr-qv[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.kr-qv[open]::backdrop {
		opacity: 0;
	}
}

.kr-qv__close {
	position: absolute;
	top: var(--kr-s4);
	right: var(--kr-s4);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: rgb(255 255 255 / 60%);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	backdrop-filter: blur(12px) saturate(1.6);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 75%);
	color: var(--kr-ink);
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-qv__close:active {
	scale: 0.96;
}

@media (hover: hover) and (pointer: fine) {
	.kr-qv__close:hover {
		background: var(--kr-ink);
		color: var(--kr-paper);
	}
}

.kr-qv__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

/* ---- media ---- */

.kr-qv__media {
	position: relative;
	display: grid;
	background: radial-gradient(58% 70% at 56% 46%, #fcfcfb 0%, #ebe9e5 70%, #dfdcd7 100%);
	overflow: hidden;
}

.kr-qv__ghost {
	position: absolute;
	left: -2%;
	bottom: 9%;
	font-size: clamp(5rem, 12vw, 11rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.8;
	color: rgb(17 17 17 / 5%);
	white-space: nowrap;
	user-select: none;
}

.kr-qv__stage {
	position: relative;
	aspect-ratio: 1;
}

.kr-qv__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	opacity: 0;
	scale: 1.06;
	transition: opacity 420ms var(--kr-ease-out), scale 900ms var(--kr-ease-out);
}

.kr-qv__img--alt {
	object-fit: cover;
	mix-blend-mode: normal;
}

.kr-qv__img.is-on {
	opacity: 1;
	scale: 1;
}

.kr-qv__thumbs {
	position: absolute;
	left: var(--kr-s4);
	bottom: var(--kr-s4);
	display: flex;
	gap: 6px;
}

.kr-qv__thumb {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgb(17 17 17 / 18%);
	background: rgb(255 255 255 / 70%);
	opacity: 0.72;
	transition: opacity var(--kr-t-hover) ease, border-color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-qv__thumb:active {
	scale: 0.96;
}

.kr-qv__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.kr-qv__thumb[aria-pressed="true"] {
	opacity: 1;
	border-color: var(--kr-ink);
	box-shadow: inset 0 0 0 1px var(--kr-ink);
}

@media (hover: hover) and (pointer: fine) {
	.kr-qv__thumb:hover {
		opacity: 1;
	}
}

.kr-qv__pager {
	position: absolute;
	right: var(--kr-s4);
	bottom: var(--kr-s4);
	display: flex;
	align-items: center;
	gap: 6px;
}

.kr-qv__count {
	margin-right: var(--kr-s3);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--kr-muted);
}

.kr-qv__nav {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--kr-ink);
	background: rgb(255 255 255 / 60%);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	backdrop-filter: blur(12px) saturate(1.6);
	color: var(--kr-ink);
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-qv__nav:active {
	scale: 0.96;
}

@media (hover: hover) and (pointer: fine) {
	.kr-qv__nav:hover {
		background: var(--kr-ink);
		color: var(--kr-paper);
	}
}

/* ---- info ---- */

.kr-qv__info {
	display: grid;
	align-content: center;
	gap: var(--kr-s4);
	padding: var(--kr-s8) var(--kr-s7) var(--kr-s7);
}

.kr-qv__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kr-s2) var(--kr-s4);
	padding-right: var(--kr-s8);
}

.kr-qv__brand {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kr-qv__title {
	font-size: clamp(1.75rem, 2.7vw, 2.625rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.06;
	text-wrap: balance;
}

.kr-qv__ref {
	font-size: 0.8125rem;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

.kr-qv__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--kr-s2) var(--kr-s4);
	margin-top: var(--kr-s2);
	padding-top: var(--kr-s5);
	border-top: 1px solid var(--kr-line-strong);
}

.kr-qv__price .kr-badge {
	align-self: center;
	order: 3;
}

.kr-qv__price .kr-price__now {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 300;
	letter-spacing: -0.03em;
}

.kr-qv__price .kr-price__was {
	font-size: 1rem;
}

.kr-qv__cta {
	display: grid;
	margin-top: var(--kr-s2);
}

.kr-qv__quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kr-s2);
}

.kr-qv__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kr-s2);
	min-height: 48px;
	padding: 0 var(--kr-s4);
	border: 1px solid var(--kr-line);
	background: transparent;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, border-color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-qv__chip .kr-ms {
	font-size: 20px;
}

.kr-qv__chip:active {
	scale: 0.96;
}

.kr-qv__chip[aria-pressed="true"] {
	border-color: var(--kr-ink);
}

.kr-qv__chip[data-kr-qv-proxy="wish"][aria-pressed="true"] {
	color: var(--kr-sale);
	border-color: var(--kr-sale);
}

.kr-qv__chip[aria-pressed="true"] .kr-ms {
	font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

@media (hover: hover) and (pointer: fine) {
	.kr-qv__chip:hover {
		border-color: var(--kr-ink);
	}
}

.kr-qv__full {
	justify-self: start;
	margin-top: var(--kr-s2);
}

/* entrance: info rises line by line; moving between products slides both halves in the direction of travel */
.kr-qv__grid > .kr-qv__info > * {
	opacity: 0;
}

[data-kr-qv-body].is-in .kr-qv__info > * {
	animation: kr-qv-rise 520ms var(--kr-ease-out) both;
	animation-delay: calc(80ms + var(--kr-i, 0) * 45ms);
}

/* the photograph animates itself: a stacking context on the stage would stop its multiply blend */
[data-kr-qv-body].is-in .kr-qv__img.is-first {
	animation: kr-qv-stage 700ms var(--kr-ease-out) both;
}

[data-kr-qv-body].is-in .kr-qv__ghost {
	animation: kr-qv-ghost 900ms var(--kr-ease-out) both;
}

[data-kr-qv-body].is-out .kr-qv__grid {
	opacity: 0;
	translate: calc(var(--kr-qv-dir) * -24px) 0;
	transition: opacity 160ms var(--kr-ease-out), translate 170ms var(--kr-ease-out);
}

@keyframes kr-qv-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes kr-qv-stage {
	from {
		opacity: 0;
		translate: calc(var(--kr-qv-dir) * 32px) 0;
	}
}

@keyframes kr-qv-ghost {
	from {
		opacity: 0;
		translate: calc(var(--kr-qv-dir) * 64px) 0;
	}
}

@media (max-width: 767px) {
	.kr-qv__grid {
		grid-template-columns: 1fr;
	}

	/* thumbnails and pager leave the photograph and sit in a row under it */
	.kr-qv__media {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding-bottom: var(--kr-s4);
	}

	.kr-qv__stage {
		grid-column: 1 / -1;
		aspect-ratio: 5 / 4;
	}

	.kr-qv__thumbs,
	.kr-qv__pager {
		position: static;
		margin: var(--kr-s3) var(--kr-s4) 0;
	}

	.kr-qv__thumbs {
		grid-column: 1;
	}

	.kr-qv__pager {
		grid-column: 2;
	}

	.kr-qv__ghost {
		bottom: 22%;
	}

	.kr-qv__info {
		padding: var(--kr-s6) var(--kr-s5) var(--kr-s6);
	}

	.kr-qv__head {
		padding-right: 0;
	}

	.kr-qv__thumb {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kr-qv,
	.kr-qv[open] {
		scale: 1;
		translate: 0 0;
	}

	[data-kr-qv-body].is-in .kr-qv__img.is-first,
	[data-kr-qv-body].is-in .kr-qv__ghost {
		animation: none;
	}

	[data-kr-qv-body].is-in .kr-qv__info > * {
		animation-name: kr-qv-fade;
		animation-duration: 160ms;
	}

	@keyframes kr-qv-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	[data-kr-qv-body].is-out .kr-qv__grid {
		translate: 0 0;
	}
}

/* ---------- rail (scroll-snap) ---------- */

.kr-rail {
	position: relative;
}

/* a grid track: cards span four shared rows (photo, brand line, name, price block) */
.kr-rail__track {
	--kr-dir: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(236px, 22.2vw, 316px);
	grid-template-rows: auto auto auto auto;
	column-gap: var(--kr-s5);
	row-gap: 0;
	padding-inline: calc((100% - min(var(--kr-container), 100% - 2 * var(--kr-gutter))) / 2);
	scroll-padding-inline: calc((100% - min(var(--kr-container), 100% - 2 * var(--kr-gutter))) / 2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.kr-rail__track::-webkit-scrollbar {
	display: none;
}

.kr-rail__track > * {
	scroll-snap-align: start;
}

/* ---- switching the list (Bestsellery / Nowości / Wyprzedaż) ----
   Out: the current cards fade and slide a little against the direction of travel, 14 ms apart.
   In: each photo is wiped open from the side the new tab lies on while its image settles from 1.1,
   then the text below rises; 55 ms apart, only the first eight cards are staggered. */

.kr-rail__track.is-leaving > .kr-pcard {
	opacity: 0;
	translate: calc(var(--kr-dir) * -22px) 0;
	transition: opacity 180ms var(--kr-ease-out) calc(var(--kr-i, 0) * 14ms), translate 240ms var(--kr-ease-out) calc(var(--kr-i, 0) * 14ms);
	pointer-events: none;
}

.kr-rail__track[data-dir="1"] {
	--kr-wipe: inset(0 100% 0 0);
}

.kr-rail__track[data-dir="-1"] {
	--kr-wipe: inset(0 0 0 100%);
}

.kr-rail__track.is-entering > .kr-pcard .kr-pcard__media {
	animation: kr-card-wipe 720ms var(--kr-ease-out) both;
	animation-delay: calc(var(--kr-i, 0) * 55ms);
}

.kr-rail__track.is-entering > .kr-pcard .kr-pcard__img--main {
	animation: kr-card-settle 900ms var(--kr-ease-out) both;
	animation-delay: calc(var(--kr-i, 0) * 55ms);
}

.kr-rail__track.is-entering > .kr-pcard :is(.kr-pcard__top, .kr-pcard__name, .kr-pcard__buy) {
	animation: kr-card-rise 560ms var(--kr-ease-out) both;
	animation-delay: calc(140ms + var(--kr-i, 0) * 55ms);
}

@keyframes kr-card-wipe {
	from {
		clip-path: var(--kr-wipe, inset(0 100% 0 0));
	}
}

@keyframes kr-card-settle {
	from {
		scale: 1.1;
	}
}

@keyframes kr-card-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kr-rail__track.is-leaving > .kr-pcard {
		translate: 0 0;
		transition-delay: 0s;
	}

	.kr-rail__track.is-entering > .kr-pcard .kr-pcard__media,
	.kr-rail__track.is-entering > .kr-pcard .kr-pcard__img--main {
		animation: none;
	}

	.kr-rail__track.is-entering > .kr-pcard :is(.kr-pcard__top, .kr-pcard__name, .kr-pcard__buy) {
		animation: kr-card-fade 200ms linear both;
	}

	@keyframes kr-card-fade {
		from {
			opacity: 0;
		}
	}
}

.kr-rail__track:focus-visible {
	outline-offset: -3px;
}

.kr-round-btn {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--kr-ink);
	background: var(--kr-paper);
	color: var(--kr-ink);
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease, border-color var(--kr-t-hover) ease,
		scale var(--kr-t-press) var(--kr-ease-out), opacity var(--kr-t-hover) ease;
}

.kr-round-btn:active {
	scale: 0.96;
}

.kr-round-btn[disabled],
.kr-round-btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	scale: 1;
}

@media (hover: hover) and (pointer: fine) {
	.kr-round-btn:where(:not([disabled]):not([aria-disabled="true"])):hover {
		background: var(--kr-ink);
		color: var(--kr-paper);
	}
}

.kr-on-dark .kr-round-btn,
.is-dark .kr-round-btn {
	background: transparent;
	border-color: var(--kr-line-on-dark);
	color: var(--kr-paper);
}

@media (hover: hover) and (pointer: fine) {
	.kr-on-dark .kr-round-btn:where(:not([disabled]):not([aria-disabled="true"])):hover,
	.is-dark .kr-round-btn:where(:not([disabled]):not([aria-disabled="true"])):hover {
		background: var(--kr-paper);
		border-color: var(--kr-paper);
		color: var(--kr-ink);
	}
}

.kr-rail-progress {
	height: 1px;
	margin-top: var(--kr-s6);
	background: var(--kr-line);
	overflow: hidden;
}

.kr-rail-progress span {
	display: block;
	height: 100%;
	background: var(--kr-ink);
	transform-origin: left;
	scale: 0.2 1;
	transition: scale 160ms linear;
}

/* ---------- typographic tabs ---------- */

.kr-tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--kr-s2) var(--kr-s6);
}

.kr-tabs__tab {
	position: relative;
	padding: var(--kr-s2) 0 var(--kr-s3);
	border: 0;
	background: none;
	font-size: clamp(1.5rem, 3.1vw, 2.75rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--kr-muted);
	transition: color var(--kr-t-ui) ease;
}

.kr-tabs__tab[aria-selected="true"] {
	color: var(--kr-ink);
}

.kr-tabs__tab[data-sale] {
	color: var(--kr-sale);
}

.kr-tabs__indicator {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100px;
	height: 2px;
	background: var(--kr-ink);
	transform-origin: left;
	transition: transform 320ms var(--kr-ease-out);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.kr-tabs__tab:not([data-sale]):hover {
		color: var(--kr-ink);
	}
}

/* ---------- segmented control (radio group) ---------- */

.kr-seg {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 1px solid var(--kr-line-strong);
	background: var(--kr-paper);
}

.kr-seg legend {
	padding: 0;
}

.kr-seg label {
	position: relative;
	display: block;
	cursor: pointer;
}

.kr-seg input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kr-seg span {
	display: flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 44px;
	padding: 0 var(--kr-s4);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--kr-t-hover) ease, color var(--kr-t-hover) ease;
}

.kr-seg span .kr-ms {
	font-size: 20px;
}

.kr-seg input:checked + span {
	background: var(--kr-ink);
	color: var(--kr-paper);
}

.kr-seg input:focus-visible + span {
	outline: 3px solid var(--kr-focus);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.kr-seg input:not(:checked):hover + span {
		background: var(--kr-stone-deep);
	}
}

/* ---------- form fields ---------- */

.kr-field {
	display: grid;
	gap: var(--kr-s2);
}

.kr-field > label:not(.kr-check) {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The field border is a UI component boundary: at least 3:1 against the surface it sits on (WCAG 1.4.11).
   #868a8e is 3.5:1 on white; the dark variant below is 3.6:1 on the lightest part of the dark surface. */
.kr-field input[type="email"],
.kr-field input[type="text"] {
	height: 56px;
	padding: 0 var(--kr-s4);
	border: 1px solid #868a8e;
	background: var(--kr-paper);
	font-size: 1rem;
	transition: border-color var(--kr-t-hover) ease;
}

/* focus ring: the global :focus-visible rule (3 px --focus, light #7fb4ff on .is-dark) applies to fields, checkboxes
   and buttons alike; fields no longer carry a ring of their own */

.kr-field input[aria-invalid="true"] {
	border-color: var(--kr-danger);
}

.kr-field__error {
	display: flex;
	gap: var(--kr-s2);
	align-items: center;
	color: var(--kr-danger);
	font-size: 0.8125rem;
	font-weight: 500;
}

/* pusty komunikat nie zajmuje wiersza siatki */
.kr-field__error[hidden] {
	display: none;
}

.kr-check {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--kr-s3);
	align-items: start;
	font-size: 0.8125rem;
	line-height: 1.45;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.kr-check input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--kr-ink);
}

.kr-check a {
	text-underline-offset: 0.2em;
}

/* ---- dark surface (.is-dark): fields, consent checkbox and error. Same values the newsletter has always had,
   except the border (3:1) ---- */

.is-dark .kr-field label {
	color: var(--kr-paper);
}

.is-dark .kr-field input[type="email"],
.is-dark .kr-field input[type="text"] {
	border-color: #767a7e;
	background: var(--kr-ink-raised);
	color: var(--kr-paper);
}

.is-dark .kr-field input::placeholder {
	color: #8d9094;
}

.is-dark .kr-field input[aria-invalid="true"] {
	border-color: #ff7b72;
}

.is-dark .kr-field__error {
	color: #ff9d96;
}

.is-dark .kr-check {
	color: var(--kr-muted-on-dark);
}

.is-dark .kr-check input {
	accent-color: var(--kr-paper);
}

/* honeypot of the forms: reachable by a bot, not by a person or a screen reader */
.kr-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kr-pause-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--kr-s2);
	min-height: 44px;
	padding: 0 var(--kr-s4);
	border: 1px solid var(--kr-ink);
	background: var(--kr-paper);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kr-pause-btn .kr-ms {
	font-size: 20px;
}

/* display: inline-flex above would otherwise beat the hidden attribute */
.kr-pause-btn[hidden] {
	display: none;
}

.kr-tabs--sm {
	gap: var(--kr-s2) var(--kr-s6);
}

.kr-tabs--sm .kr-tabs__tab {
	font-size: clamp(1.25rem, 1.9vw, 1.75rem);
}

.kr-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--kr-s2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--kr-muted);
}

.kr-crumbs li + li::before {
	content: "/";
	margin-right: var(--kr-s2);
	color: var(--kr-line);
}

.kr-crumbs a {
	text-decoration: none;
}

.kr-crumbs [aria-current="page"] {
	color: var(--kr-ink);
}

@media (hover: hover) and (pointer: fine) {
	.kr-crumbs a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

.kr-cempty {
	display: grid;
	gap: var(--kr-s3);
	justify-items: start;
	max-width: 60ch;
	padding-block: var(--kr-s8);
}

.kr-cempty__t {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.kr-cempty p {
	color: var(--kr-muted);
}

.kr-cempty__act {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kr-s3);
	margin-top: var(--kr-s3);
}

.kr-cempty--err .kr-cempty__t {
	color: var(--kr-danger);
}

.kr-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--kr-s1) var(--kr-s2);
	padding-top: var(--kr-s5);
}

.kr-pager:empty {
	display: none;
}

.kr-pager__n,
.kr-pager__s,
.kr-pager__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kr-s1);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--kr-s2);
	border: 1px solid transparent;
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.kr-pager__s {
	padding-inline: var(--kr-s3);
}

.kr-pager__gap {
	min-width: 28px;
	color: var(--kr-muted);
	font-weight: 400;
}

.kr-pager__n[aria-current="page"] {
	background: var(--kr-ink);
	color: var(--kr-paper);
}

@media (hover: hover) and (pointer: fine) {
	.kr-pager__n:not([aria-current]):hover,
	.kr-pager__s:hover {
		border-color: var(--kr-ink);
	}
}

/* ---------- uzupełnienia komponentów (ręcznie pisane, już z prefiksem; nie pochodzą z mockupu) ---------- */

/* Indeksy do przesunięć w czasie (dawniej style="--i:n" w znaczniku, zabronione przez CSP): liczy je CSS po pozycji elementu.
   Karty w torze: pierwsze osiem dostaje 0…7, reszta 7. */
.kr-rail__track > .kr-pcard:nth-child(2) { --kr-i: 1; }
.kr-rail__track > .kr-pcard:nth-child(3) { --kr-i: 2; }
.kr-rail__track > .kr-pcard:nth-child(4) { --kr-i: 3; }
.kr-rail__track > .kr-pcard:nth-child(5) { --kr-i: 4; }
.kr-rail__track > .kr-pcard:nth-child(6) { --kr-i: 5; }
.kr-rail__track > .kr-pcard:nth-child(7) { --kr-i: 6; }
.kr-rail__track > .kr-pcard:nth-child(n + 8) { --kr-i: 7; }

/* narzędzia karty: dwa dodatkowe wysuwają się po kolei pod sercem */
.kr-pcard__tools > .kr-tool--x:nth-child(2) { --kr-k: 0; }
.kr-pcard__tools > .kr-tool--x:nth-child(3) { --kr-k: 1; }

/* szybki podgląd: informacje wchodzą wiersz po wierszu */
.kr-qv__info > :nth-child(2) { --kr-i: 1; }
.kr-qv__info > :nth-child(3) { --kr-i: 2; }
.kr-qv__info > :nth-child(4) { --kr-i: 3; }
.kr-qv__info > :nth-child(5) { --kr-i: 4; }
.kr-qv__info > :nth-child(6) { --kr-i: 5; }
.kr-qv__info > :nth-child(7) { --kr-i: 6; }

/* paginacja: ruch przycisków jak innych przycisków systemu (naciśnięcie .96), reszta reguł z catalogue.css (warstwa ruchu) zostaje w kr-catalogue.css */
.kr-pager__n,
.kr-pager__s {
	transition-property: background-color, color, border-color, scale;
	transition-duration: var(--kr-t-hover), var(--kr-t-hover), var(--kr-t-hover), var(--kr-t-press);
	transition-timing-function: ease, ease, ease, var(--kr-ease-out);
}

.kr-pager__n:active,
.kr-pager__s:active {
	scale: 0.96;
}

/* komunikat statusu formularza newslettera (kontrakt aplikacji: data-kuck-newsletter-status); na ciemnej powierzchni jaśniejszy */
.kr-newsletter-status {
	font-size: 0.8125rem;
	color: var(--kr-muted);
}

.kr-newsletter-status:empty {
	display: none;
}

.is-dark .kr-newsletter-status {
	color: var(--kr-muted-on-dark);
}

/* przycisk karty będący odsyłaczem (wybór wariantu, „Do koszyka” gościa): ten sam wygląd co przycisk */
a.kr-pcard__add {
	text-decoration: none;
}

/* dostępność „wymaga potwierdzenia” (stock_status state="unknown"; ten sam kolor co kr-pdp__stock-unknown) */
.kr-stock--unknown,
.kr-stock-mini.kr-stock--unknown {
	color: var(--kr-warn);
}

.kr-stock-mini.kr-stock--unknown i {
	background: var(--kr-warn);
}

/* ---------- pola formularza poza text/email: password, tel, select, textarea, podpowiedź (makra form_field, select_field, textarea_field) ----------
   Reguły mają zerową specyficzność (:where), żeby CSS rodziny (który ma własne warianty tych pól: konto, serwis, kontakt) zawsze wygrywał. */
:where(.kr-field input[type="password"], .kr-field input[type="tel"], .kr-field input[type="search"], .kr-field input[type="url"], .kr-field input[type="number"], .kr-field select, .kr-field textarea) {
	width: 100%;
	height: 56px;
	padding: 0 var(--kr-s4);
	border: 1px solid #868a8e;
	background: var(--kr-paper);
	color: var(--kr-ink);
	font-size: 1rem;
	transition: border-color var(--kr-t-hover) ease;
}

:where(.kr-field textarea) {
	height: auto;
	min-height: 128px;
	padding: var(--kr-s3) var(--kr-s4);
	line-height: 1.5;
	resize: vertical;
}

:where(.kr-field input[type="password"][aria-invalid="true"], .kr-field input[type="tel"][aria-invalid="true"], .kr-field select[aria-invalid="true"], .kr-field textarea[aria-invalid="true"]) {
	border-color: var(--kr-danger);
}

:where(.is-dark .kr-field input[type="password"], .is-dark .kr-field input[type="tel"], .is-dark .kr-field input[type="search"], .is-dark .kr-field input[type="url"], .is-dark .kr-field input[type="number"], .is-dark .kr-field select, .is-dark .kr-field textarea) {
	border-color: #767a7e;
	background: var(--kr-ink-raised);
	color: var(--kr-paper);
}

:where(.is-dark .kr-field input[type="password"][aria-invalid="true"], .is-dark .kr-field input[type="tel"][aria-invalid="true"], .is-dark .kr-field select[aria-invalid="true"], .is-dark .kr-field textarea[aria-invalid="true"]) {
	border-color: #ff7b72;
}

/* lista rozwijana: natywny select w ramce ze strzałką (ikona expand_more z fontu ikon) */
.kr-select {
	position: relative;
	display: grid;
}

.kr-select select {
	padding-right: var(--kr-s7);
	appearance: none;
	-webkit-appearance: none;
}

.kr-select .kr-ms {
	position: absolute;
	right: var(--kr-s3);
	top: 50%;
	translate: 0 -50%;
	pointer-events: none;
}

.kr-field__hint {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--kr-muted);
}

.is-dark .kr-field__hint {
	color: var(--kr-muted-on-dark);
}