/**
 * Konfigurátor nálepky - produktová stránka.
 *
 * Načítava sa len na konfigurovateľných produktoch, takže si tu dovolíme
 * aj opravy layoutu témy pre túto stránku (form.cart, .price).
 * Brand farby berieme z premenných témy: --color-primary = limetková.
 */

/* ── opravy layoutu témy ─────────────────────────────────────────────── */

/* Téma skladá form.cart pre simple produkty ako flex RIADOK
   [obsah][qty][button] - s konfigurátorom vnútri sa to rozpadne
   (roztiahnuté CTA cez celú výšku). Prepíname na stĺpec. */
.ms-single-product__content form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Téma má .price { flex-direction: row-reverse } (kvôli zľavám) - otočilo
   by nám „od“ za sumu: „4,70 €od“. Na konfigurovateľnom produkte je cena
   informatívna a malá; hlavné číslo žije v nákupnom paneli. */
.ms-single-product .ms-single-product__content .price {
	flex-direction: row;
	gap: .3em;
	font-size: 20px;
	margin-bottom: 1.25rem;
	color: var(--color-contrast-medium, #6b7280);
}

.ms-single-product .ms-single-product__content .price bdi {
	font-weight: 700;
	letter-spacing: 0;
	color: var(--color-contrast-higher, #111);
}

/* Poistka: niektoré resety témy vedia prebiť [hidden]. */
.nalepcar-konfigurator [hidden],
.nk-kupa [hidden] {
	display: none !important;
}

/* ── konfigurátor ────────────────────────────────────────────────────── */

.nalepcar-konfigurator {
	--nk-ram: var(--color-contrast-low, #d7dbe0);
	--nk-aktiv: var(--color-contrast-higher, #111);
	--nk-tlmeny: var(--color-contrast-medium, #6b7280);
	--nk-brand: var(--color-primary, #abcf0a);
	--nk-radius: 12px;

	margin: 0 0 1.5rem;
}

.nk-blok {
	margin-bottom: 1.75rem;
}

.nk-nadpis {
	display: flex;
	align-items: baseline;
	gap: .5em;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 .75rem;
}

.nk-vybrane {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: .875rem;
	color: var(--nk-tlmeny);
}

.nk-skupina {
	font-size: .75rem;
	color: var(--nk-tlmeny);
	margin: .875rem 0 .375rem;
}

.nk-skupina:first-of-type {
	margin-top: 0;
}

/* ── dlaždice ────────────────────────────────────────────────────────── */

.nk-velkosti {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
}

.nk-materialy {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.nk-dlazdica {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .125rem;
	padding: .625rem .75rem;
	border: 1.5px solid var(--nk-ram);
	border-radius: var(--nk-radius);
	background: var(--color-bg, #fff);
	cursor: pointer;
	line-height: 1.3;
	margin: 0;
	transition: border-color .12s ease, background-color .12s ease;
}

.nk-dlazdica:hover {
	border-color: var(--nk-aktiv);
}

/* prepínač schovaný, ale dosiahnuteľný klávesnicou */
.nk-dlazdica input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.nk-dlazdica:focus-within {
	outline: 2px solid var(--nk-aktiv);
	outline-offset: 2px;
}

.nk-dlazdica:has(input:checked) {
	border-color: var(--nk-aktiv);
	background: var(--nk-aktiv);
}

.nk-dlazdica:has(input:checked) .nk-dlazdica-rozmer,
.nk-dlazdica:has(input:checked) .nk-dlazdica-rozmer small {
	color: #fff;
}

.nk-dlazdica:has(input:checked) .nk-dlazdica-cena {
	color: var(--nk-brand);
}

.nk-dlazdica-rozmer {
	font-weight: 600;
	font-size: .9375rem;
	white-space: nowrap;
}

.nk-dlazdica-rozmer small {
	font-weight: 400;
	font-size: .75em;
	color: var(--nk-tlmeny);
}

.nk-dlazdica-cena {
	font-size: .8125rem;
	color: var(--nk-tlmeny);
	font-variant-numeric: tabular-nums;
}

/* badge „Obľúbená“ */
.nk-badge {
	position: absolute;
	top: -0.5rem;
	right: .5rem;
	padding: .1rem .45rem;
	border-radius: 999px;
	background: var(--nk-brand);
	color: #111;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	pointer-events: none;
}

.nk-dlazdica--top {
	border-color: var(--nk-aktiv);
}

.nk-dlazdica--vlastny {
	border-style: dashed;
}

/* ── materiály so swatchmi ───────────────────────────────────────────── */

.nk-dlazdica--material {
	flex-direction: row;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem .5rem .625rem;
}

.nk-swatch {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .18);
	background: #ddd;
}

.nk-swatch--biela    { background: #fff; }
.nk-swatch--cierna   { background: #14161a; }
.nk-swatch--original { background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #8b5cf6, #f43f5e); }
.nk-swatch--zlata    { background: linear-gradient(135deg, #f8e08e 0%, #d4a017 55%, #b8860b 100%); }
.nk-swatch--reflexna { background: linear-gradient(135deg, #f6f7f8 0%, #c8cdd3 40%, #eef1f4 60%, #9aa1a9 100%); }

.nk-dlazdica--material:has(input:checked) .nk-swatch {
	box-shadow: 0 0 0 2px var(--nk-aktiv), inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* na tmavej zvolenej dlaždici nech biely swatch nesplýva */
.nk-dlazdica--material:has(input:checked) {
	background: var(--nk-aktiv);
}

.nk-dlazdica--material:has(input:checked) .nk-swatch {
	box-shadow: 0 0 0 2px var(--nk-brand);
}

/* ── vlastný rozmer ──────────────────────────────────────────────────── */

.nk-vlastny {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-top: .75rem;
	padding: .875rem 1rem;
	border: 1.5px dashed var(--nk-ram);
	border-radius: var(--nk-radius);
}

.nk-vlastny label {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	margin: 0;
}

.nk-vlastny input[type="number"] {
	width: 5.5rem;
	margin: 0;
	padding: .45em .6em;
	border: 1px solid var(--nk-ram);
	border-radius: 8px;
	background: var(--color-bg, #fff);
}

.nk-krat {
	color: var(--nk-tlmeny);
}

.nk-poznamka {
	flex-basis: 100%;
	margin: 0;
	font-size: .8125rem;
	color: var(--nk-tlmeny);
}

.nk-chyba {
	flex-basis: 100%;
	margin: 0;
	font-size: .875rem;
	color: #b91c1c;
	font-weight: 600;
}

/* ── nákupný panel: súhrn + množstvo + CTA ───────────────────────────── */

.nk-kupa {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	padding: 1rem;
	border-radius: 16px;
	background: var(--color-contrast-lower, #f2f3f5);
}

.nk-suhrn {
	margin-right: auto;
	min-width: 0;
}

.nk-suhrn-cena {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.nk-suhrn-detail {
	font-size: .8125rem;
	color: var(--nk-tlmeny);
	margin-top: .125rem;
}

/* množstvo z témy - v paneli, normálna výška */
.nk-kupa .ms-quantity {
	width: 7.5rem;
	flex: none;
	border-radius: 10px;
	overflow: hidden;
}

.nk-kupa .ms-quantity .input-text,
.nk-kupa .ms-quantity .button-minus,
.nk-kupa .ms-quantity .button-plus {
	height: 48px;
	background: var(--color-bg, #fff);
}

/* CTA: limetková s ČIERNYM textom (biely má na limetke kontrast ~1,9:1) */
.nk-kupa .single_add_to_cart_button {
	flex: none;
	height: 48px;
	margin: 0;
	padding: 0 1.75rem;
	display: inline-flex;
	align-items: center;
	border-radius: 10px;
	background-color: var(--nk-brand, var(--color-primary));
	color: #111 !important;
	font-weight: 700;
	align-self: auto;
}

.nk-kupa .single_add_to_cart_button:hover {
	filter: brightness(1.06);
	transform: none;
}

.nk-kupa .single_add_to_cart_button:disabled,
.nk-kupa .single_add_to_cart_button.disabled {
	background-color: var(--nk-ram);
	color: var(--nk-tlmeny) !important;
	cursor: not-allowed;
	filter: none;
}

/* ── katalóg ─────────────────────────────────────────────────────────── */

.nalepcar-cena-od {
	font-size: .8em;
	color: var(--nk-tlmeny, #6b7280);
}

/* ── mobil ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.nk-velkosti {
		grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
	}

	/* panel drží pri palci - konfiguruješ hore, kupuješ dole */
	.nk-kupa {
		position: sticky;
		bottom: .5rem;
		z-index: 30;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
		background: var(--color-bg, #fff);
	}

	.nk-suhrn-cena {
		font-size: 1.375rem;
	}

	.nk-kupa .single_add_to_cart_button {
		flex: 1;
		justify-content: center;
		padding: 0 1rem;
	}
}

/* ── sticky galéria na desktope ──────────────────────────────────────────
   Keď je pravý panel (konfigurátor) vyšší než obrázok, galéria sa lepí
   k vrchu okna a scrolluje spolu s obsahom až po koniec riadku stĺpcov -
   teda presne po začiatok sekcie Popis/Recenzie. */
@media (min-width: 768px) {
	.ms-single-product .row > .col-md-6 {
		align-self: stretch;
	}

	.ms-single-product__media {
		position: sticky;
		top: 108px; /* rezerva na plávajúci header témy */
	}
}


/* ── personalizácia: meno na nálepke ─────────────────────────────────── */

.nk-nahlad {
	background: var(--nk-aktiv, #101114);
	border-radius: var(--nk-radius);
	padding: .75rem;
	margin-bottom: .75rem;
	max-width: 22rem;
}

.nk-nahlad-svg {
	display: block;
	width: 100%;
	height: auto;
}

.nk-meno-input {
	width: 100%;
	max-width: 22rem;
	padding: .8em 1em;
	font-weight: 600;
	box-shadow: 0 .12em .55em rgba(21, 23, 28, .10);
	border: 2px solid var(--nk-aktiv, #101114);
	border-radius: 10px;
	font-size: 1rem;
	background: var(--color-bg, #fff);
}

.nk-meno-input:focus {
	outline: none;
	border-color: var(--nk-aktiv);
	box-shadow: 0 0 0 .22em rgba(21, 23, 28, .16);
}

.nk-meno-input::placeholder {
	font-weight: 400;
	opacity: .55;
}

/* ── editor vlastného nápisu ─────────────────────────────────────────── */

.nk-nahlad--editor {
	transition: background .2s ease;
}

.nk-nahlad--editor .nk-nahlad-svg {
	width: 100%;
	height: auto;
	display: block;
}

.nk-editor-pisma {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: .5rem;
	margin: .75rem 0 0;
}

.nk-dlazdica--pismo {
	text-align: center;
	padding: .6rem .4rem;
}

.nk-pismo-ukazka {
	display: block;
	font-size: 1.5rem;
	line-height: 1.2;
	margin-bottom: .15rem;
}

.nk-editor-sirka {
	margin-top: 1rem;
}

.nk-editor-sirka label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 600;
	margin-bottom: .35rem;
}

.nk-editor-sirka input[type="range"] {
	width: 100%;
	accent-color: var(--color-primary, #abcf0a);
}

/* ── editor v2: interaktívne plátno ──────────────────────────────────── */

.nk-platno-obal {
	border-radius: 12px;
	overflow: hidden;
	transition: background .2s ease;
	margin-top: .5rem;
	/* jemný raster, nech plocha pôsobí ako pracovné plátno */
	background-image: radial-gradient(rgba(128, 128, 128, .18) 1px, transparent 1px);
	background-size: 22px 22px;
}

.nk-platno {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;       /* ťahanie prstom nesmie skrolovať stránku */
	user-select: none;
	outline: none;
	cursor: default;
}

.nk-platno g[data-id] {
	cursor: grab;
}

.nk-vyber-ram {
	fill: none;
	stroke: var(--color-primary, #abcf0a);
	stroke-width: 2;
	stroke-dasharray: 6 4;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.nk-vyber-spoj {
	stroke: var(--color-primary, #abcf0a);
	stroke-width: 2;
	pointer-events: none;
}

.nk-uchyt {
	fill: var(--color-primary, #abcf0a);
	stroke: #fff;
	stroke-width: 3;
}

.nk-uchyt--mierka { cursor: nwse-resize; }
.nk-uchyt--rotacia { cursor: grab; }

.nk-editor-hint {
	margin-top: -.25rem;
}

.nk-editor-listy {
	display: flex;
	gap: .5rem;
	margin-top: .75rem;
}

.nk-editor-btn {
	border: 1.5px solid var(--color-contrast-higher, #14161a);
	background: var(--color-contrast-higher, #14161a);
	color: #fff;
	border-radius: 999px;
	padding: .5rem 1.1rem;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}

.nk-editor-btn--tichy {
	background: transparent;
	color: var(--color-contrast-higher, #14161a);
}

.nk-editor-vlastnosti {
	margin-top: .75rem;
}

/* ── editor v3: plocha v ľavom stĺpci, lišta, knižnica ───────────────── */

.nk-editor-plocha {
	position: relative;
}

.nk-editor-plocha .nk-platno-obal {
	border-radius: 14px;
	transition: background .2s ease;
	background-image: radial-gradient(rgba(128, 128, 128, .16) 1px, transparent 1px);
	background-size: 22px 22px;
	touch-action: none;
}

.nk-editor-plocha canvas {
	display: block;
}

.nk-editor-plocha .nk-editor-listy {
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 .6rem;
}

.nk-listy-delic {
	width: 1px;
	align-self: stretch;
	background: var(--color-contrast-low, #d7dbe0);
	margin: 0 .25rem;
}

.nk-editor-btn--ikona {
	padding: .45rem .7rem;
	font-size: 1rem;
	line-height: 1;
	background: transparent;
	color: var(--color-contrast-higher, #14161a);
}

.nk-editor-btn--zmazat:hover {
	border-color: #c0392b;
	color: #c0392b;
}

.nk-editor-plocha .nk-editor-pisma {
	margin-top: .6rem;
}

/* knižnica motívov - panel cez plátno */
.nk-kniznica {
	position: absolute;
	inset: 3.2rem 0 auto 0;
	max-height: 32rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--color-bg, #fff);
	border: 1.5px solid var(--color-contrast-low, #d7dbe0);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
	z-index: 40;
}

.nk-kniznica-hlava {
	display: flex;
	gap: .5rem;
	padding: .75rem;
}

.nk-kniznica-hlava input[type="search"] {
	flex: 1;
	border: 1.5px solid var(--color-contrast-low, #d7dbe0);
	border-radius: 999px;
	padding: .5rem 1rem;
	font-size: .9375rem;
}

.nk-kniznica-kategorie {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	padding: 0 .75rem .5rem;
}

.nk-kniznica .nk-chip {
	border: 1px solid var(--color-contrast-low, #d7dbe0);
	background: transparent;
	border-radius: 999px;
	padding: .25rem .7rem;
	font-size: .8125rem;
	cursor: pointer;
}

.nk-kniznica .nk-chip--aktivny {
	background: var(--color-contrast-higher, #14161a);
	border-color: var(--color-contrast-higher, #14161a);
	color: #fff;
}

.nk-kniznica-mriezka {
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
	gap: .5rem;
	padding: .25rem .75rem .75rem;
}

.nk-motiv {
	border: 1.5px solid var(--color-contrast-low, #d7dbe0);
	border-radius: 10px;
	background: #fff;
	aspect-ratio: 1;
	padding: .5rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: border-color .12s ease, transform .12s ease;
}

.nk-motiv:hover {
	border-color: var(--color-contrast-higher, #14161a);
	transform: translateY(-1px);
}

.nk-motiv img {
	max-width: 100%;
	max-height: 100%;
}

/* ── triedy fólií + vzorkovník farieb ────────────────────────────────── */

.nk-material-vzorka {
	display: inline-flex;
	gap: 2px;
	margin-bottom: .3rem;
}

.nk-material-vzorka i {
	width: .95rem;
	height: .95rem;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, .18);
}

.nk-material-vzorka--dura {
	background: conic-gradient(#e8467c, #ffd500, #00853e, #005ca9, #e8467c);
}

.nk-farby {
	margin-top: 1rem;
}

.nk-farby-mriezka {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.nk-farba {
	cursor: pointer;
	position: relative;
}

.nk-farba input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nk-farba-vzorka {
	display: block;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 2px solid var(--color-contrast-low, #d7dbe0);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
	transition: transform .1s ease, border-color .1s ease;
}

.nk-farba:hover .nk-farba-vzorka {
	transform: scale(1.12);
}

.nk-farba input:checked + .nk-farba-vzorka {
	border-color: var(--color-contrast-higher, #14161a);
	box-shadow: 0 0 0 2px var(--color-primary, #abcf0a);
}

/* akcia 5+1 - štítok + dovetok pod súhrnom ceny */
.nk-darcek-hint {
	display: flex;
	align-items: center;
	gap: .6em;
	flex-wrap: wrap;
	margin: .5em 0 1em;
	font-size: .875em;
	color: var(--color-contrast-medium, #6b7280);
}
.nk-darcek-tag {
	display: inline-block;
	padding: .22em .7em;
	border-radius: 999px;
	background: #14161a;
	color: var(--color-primary, #abcf0a);
	font-weight: 700;
	font-size: .95em;
	letter-spacing: .01em;
	white-space: nowrap;
}