/* Weebe Art Configurator - frontend
 * Vzhľad zladený s JaSiDe-theme (root.css/pages.css/e-shop.css) - rovnaká
 * paleta, rovnaký rádius/CTA jazyk ako "Sprievodca nákupom" (wb-pill,
 * wb-step__btn) a zvyšok stránky, nie samostatný štýl pluginu.
 */

:root {
	/* 22/12/8px - rovnaká škála ako --wb-radius (22px) a karty/pilulky (12px)
	 * v theme; 8px pre drobné prvky (vstupy pod-políčok a pod.). */
	--wac-radius-lg: 22px;
	--wac-radius-md: 12px;
	--wac-radius-sm: 8px;
	--wac-gap: 28px;

	/* Brand palette - fixed brand look, not a light/dark adaptive theme
	 * (see the removed prefers-color-scheme block this replaces): the
	 * dark chip/summary surfaces below are intentional design choices,
	 * not a "dark mode", so they must not get re-inverted by OS theme. */
	--wac-brand-50: #fffbeb;
	--wac-brand-100: #fef3c7;
	--wac-brand-200: #fde58a;
	--wac-brand-300: #fdd24c;
	--wac-brand-400: #fcbe23;
	--wac-brand-500: #f69f10;
	--wac-brand-600: #da7605;
	--wac-brand-700: #b55208;
	--wac-brand-800: #923f0e;
	--wac-brand-900: #78340f;
	--wac-brand-950: #451a03;

	--wac-gray-50: #f9faf9;
	--wac-gray-100: #f4f5f4;
	--wac-gray-200: #e6e6e5;
	--wac-gray-300: #d4d4d3;
	--wac-gray-400: #a5a5a1;
	--wac-gray-500: #747470;
	--wac-gray-600: #545451;
	--wac-gray-700: #41413f;
	--wac-gray-800: #272726;
	--wac-gray-900: #1d1d1b;
	--wac-gray-950: #0b0b0a;

	--wac-bg: var(--wac-gray-50);
	--wac-bg-subtle: var(--wac-gray-100);
	--wac-text: var(--wac-gray-900);
	--wac-text-muted: var(--wac-gray-500);
	--wac-border: var(--wac-gray-300);

	--wac-accent: var(--wac-brand-500);
	--wac-accent-contrast: #ffffff;
	/* Druhý, tmavší odtieň brandu (bp-600/da7605) - v theme sa používa
	 * konkrétne pre "aktívne/zvolené" stavy (wb-pill--active border,
	 * vybraná bodka hero slidera, otvorená položka akordeónu), zatiaľ čo
	 * svetlejší --wac-accent (bp-500) ostáva na eyebrow/ikony. */
	--wac-accent-selected: var(--wac-brand-600);

	/* Pill/card choices: presne štýl .wb-pill z pages.css (napr. "Bez
	 * pasparty / S paspartou" v Sprievodcovi nákupom) - biela plocha,
	 * nezvolené má obyčajný tmavý obrys, zvolené prehodí obrys na
	 * --wac-accent-selected a podleje plochu teplou neutrálnou #f8f6f2
	 * (rovnaká farba ako zvýraznené panely inde v theme), nie plnou
	 * brand farbou. */
	--wac-chip-bg: var(--wac-bg);
	--wac-chip-text: var(--wac-text);
	--wac-chip-border: var(--wac-gray-950);
	--wac-chip-bg-selected: #f8f6f2;

	--wac-summary-bg: var(--wac-bg);
	--wac-summary-text: var(--wac-text);
	--wac-summary-text-muted: var(--wac-text-muted);
	--wac-summary-border: var(--wac-gray-950);
	/* CTA farba - bp-800 z Figma dizajnu "Vlastný obraz - modifikátor"
	 * (node 493:4921), rovnaká rodina ako --wac-brand-800. */
	--wac-cta-bg: #923f0e;
	--wac-cta-bg-hover: #7a350c;
	--wac-cta-text: #ffffff;

	--wac-shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06);
	--wac-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);
	/* Rovnaký focus-ring odtieň ako --wb-brand-ring v theme (rgba z bp-500). */
	--wac-brand-ring: rgba(246, 159, 16, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--wac-transition: 0ms;
	}
}

/* border-box everywhere inside the configurator, regardless of what the
 * active theme sets globally - without this, padding+border silently
 * pushes elements past their declared width and overlaps neighbours
 * (the most common cause of "everything looks scattered"). */
.wac-configurator,
.wac-configurator *,
.wac-configurator *::before,
.wac-configurator *::after {
	box-sizing: border-box;
}

.wac-configurator {
	font-family: var(--wb-font, 'Oxanium', sans-serif);
	color: var(--wac-text);
	max-width: 1200px;
	margin: 40px 0;
}

.wac-configurator img {
	max-width: 100%;
}

.wac-configurator__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--wac-gap);
	align-items: start;
}

.wac-configurator__preview {
	/* Rovnaký dôvod ako min-width:0 na .wac-configurator__options vyššie -
	 * druhý grid item v tom istom riadku, rovnaké riziko. */
	min-width: 0;
	position: sticky;
	top: 24px;
	/* Samostatne scrollovateľný stĺpec - keď je obsah (náhľad + text + prípadný
	 * "vybrané médium" panel) vyšší než dostupná výška okna, kurzor nad touto
	 * časťou scrolluje LEN ju, nie celú stránku (prirodzené správanie
	 * prehliadača pre overflow:auto element, kým sa v ňom dá ešte scrollovať).
	 * overscroll-behavior:contain zastaví scroll presne na jej hranici -
	 * nepretiahne sa ("nechytí") do scrollu zvyšku stránky. */
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* .wac-preview caps at a max-width (see below) - center it here so it
	 * doesn't just hug the left edge on a wide options column. */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wac-preview__heading {
	align-self: flex-start;
	margin: 0 0 12px;
	font-size: 25px;
	font-weight: 600;
	color: var(--wac-gray-950);
}

/* Obyčajná tlmená poznámka, nie farebná pilulka/badge - theme drobné
 * vysvetlivky (napr. .wb-mini-cart__note) rieši rovnako, plným textom
 * bez rámčeka/pozadia, nie zvýraznením niečoho, čo nie je upozornenie. */
.wac-configurator__preview-note {
	margin: 14px 0 0;
	max-width: 560px;
	color: var(--wac-text-muted);
	font-size: 15px;
	font-weight: 300;
	text-align: center;
	line-height: 1.5;
}

.wac-info-panel {
	margin: 16px 0 0;
	max-width: 560px;
	width: 100%;
	padding: 18px;
	border: 1px solid var(--wac-border);
	border-radius: var(--wac-radius-md);
	background: var(--wac-bg);
}

.wac-info-panel__title {
	margin: 0 0 10px;
	font-size: 16px;
}

.wac-info-panel__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.wac-info-panel__gallery:empty {
	display: none;
}

.wac-info-panel__gallery img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.wac-info-panel__description {
	margin: 0;
	color: var(--wac-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.wac-configurator__options {
	/* Bez toho si grid item ponecháva predvolenú "auto" minimálnu šírku =
	 * min-content jeho obsahu (napr. najdlhšie nedeliteľné slovo v
	 * krokovníku) - na úzkom telefóne to vie natlačiť CELÚ stránku širšiu
	 * než 100vw, aj keď má track grid-template-columns: minmax(0, 1fr)
	 * (to rieši len samotný track, nie automatické minimum položky v ňom). */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	/* Automatické číslovanie krokov (1. Nahrajte fotografiu, 2. ... atď.) -
	 * pozri .wac-step nižšie. Počíta len skutočne vykreslené (nie "hidden",
	 * teda display:none) fieldsety, takže napr. 3 skryté panely rozmerov v
	 * photo-request-size.php (len jeden viditeľný naraz) sa počítajú ako 1. */
	counter-reset: wac-step;
}

/* Krokový nadpis "N. Názov" pre celý modifikátor "Vlastný obraz" - podľa
 * Figma "mod-head" (Oxanium SemiBold 25px). Trieda sa dáva na top-level
 * fieldset/wrapper daného kroku, číslo sa generuje samo cez counter, aby
 * fungovalo aj pre dynamické admin-definované skupiny (Médium, Rám,
 * Pasparta a pod.), nie len pre pevné kroky šablóny. */
.wac-step {
	counter-increment: wac-step;
}

.wac-step:not(.wac-step--no-divider) {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wac-border);
}

.wac-step > .wac-group__label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
	font-size: 25px;
	font-weight: 600;
	line-height: 1;
	color: var(--wac-gray-950);
}

.wac-step > .wac-group__label::before {
	content: counter(wac-step) ".";
}

/* ---------- Preview compositor ---------- */

.wac-preview {
	position: relative;
	width: 100%;
	max-width: 560px;
	/* Sharp corners throughout the whole preview, including this outer
	 * card - a framed print is a square-cornered physical object, a
	 * rounded product-shot backdrop looked inconsistent with that. */
	overflow: visible;
	box-shadow: var(--wac-shadow-soft);
	background: var(--wac-bg-subtle);
}

.wac-preview--pickable {
	cursor: pointer;
}

.wac-preview__frame {
	position: absolute;
	inset: 0;
	background-size: auto;
	/* Jemný tieň naznačuje že rám vyčnieva nad tým čo drží. */
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
	transition: background-color var(--wac-transition);
	box-sizing: border-box;
}

.wac-preview__frame.is-disabled {
	background-image: none;
	box-shadow: none;
}

.wac-preview__mat {
	position: absolute;
	inset: 0;
	/* AL rám má cca 20mm vonkajšiu hĺbku - vrhá tieň na paspartu pod sebou. */
	box-shadow:
		inset 0 3px 8px -4px rgba(0, 0, 0, 0.35),
		inset 0 -3px 8px -4px rgba(0, 0, 0, 0.35),
		inset 3px 0 8px -4px rgba(0, 0, 0, 0.35),
		inset -3px 0 8px -4px rgba(0, 0, 0, 0.35);
	transition: inset var(--wac-transition), background-color var(--wac-transition);
	box-sizing: border-box;
}

.wac-preview__mat.is-disabled {
	box-shadow: none;
}

.wac-preview__artwork {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: inset var(--wac-transition);
	/* Skosený 45° rez paspartovacieho kartónu (cca 1,5mm) - jemný náznak
	 * svetlého jadra kartónu, nie výrazný biely prstenec. */
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.25),
		inset 0 0 4px rgba(0, 0, 0, 0.25);
}

/* "Obraz z vašej fotografie" - výrez sa upravuje vo veľkom samostatnom
 * okne (wac-photo-crop-modal nižšie), nie priamo v tejto malej ukážke
 * (tá má cez seba rám/paspartu/sklo, na presné doťahovanie kraja fotky
 * nevhodné) - tu je len tlačidlo, čo to okno otvorí. */
.wac-photo-crop-controls {
	width: 100%;
	max-width: 560px;
	margin: 14px 0 0;
	text-align: center;
}

/* Presne podľa Figma "Orezať fotografiu" (node 597:479, wb-btn-solid,
 * Default variant) - rovnaké CTA tokeny ako .wac-add-to-cart, symetrický
 * 32/12px padding (na rozdiel od CTA nižšie, tá má kvôli optickému
 * vycentrovaniu asymetrický 16/32/12). */
.wac-photo-crop-controls__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	background: var(--wac-cta-bg);
	color: var(--wac-cta-text);
	border-radius: 6px;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--wac-transition), transform var(--wac-transition);
}

.wac-photo-crop-controls__open svg {
	flex-shrink: 0;
}

.wac-photo-crop-controls__open:hover {
	background: var(--wac-cta-bg-hover);
	transform: translateY(-1px);
}

/* ---------- Photo crop modal (veľké okno na úpravu výrezu) ---------- */
/* Presne podľa Figma "Upravte výrez fotky" (node 602:547) - biela karta
 * 762×962 s vnútorným obsahom 650px (padding 56px vodorovne / ~44px
 * zvisle), gap 24px medzi hlavičkou/fotkou/zoomom/akciami. Klik na
 * pozadie okno zámerne NEZATVÁRA (žiadny data-wac-crop-modal-close na
 * .wac-photo-crop-modal__backdrop) - zatvára len krížik, ukladá len
 * "Uložiť"; "Resetovať" len vráti výrez na default a okno nechá otvorené
 * (viď initPhotoCropControls() v configurator-v2.js). */

.wac-photo-crop-modal:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.wac-photo-crop-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

.wac-photo-crop-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: min(762px, 100%);
	max-height: 92vh;
	background: #fff;
	border-radius: var(--wac-radius-md);
	padding: 44px 56px;
	overflow-y: auto;
}

.wac-photo-crop-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: #f65110;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color var(--wac-transition);
}

.wac-photo-crop-modal__close svg {
	width: 24px;
	height: 24px;
}

.wac-photo-crop-modal__close:hover {
	/* Jemne tmavšia, bez podfarbenia pozadia. */
	color: #c54110;
}

.wac-photo-crop-modal__close:focus-visible {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 2px;
}

.wac-photo-crop-modal__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	color: var(--wac-gray-950);
	text-align: center;
}

.wac-photo-crop-modal__title {
	margin: 0;
	font-size: 25px;
	font-weight: 600;
	line-height: 1;
}

.wac-photo-crop-modal__hint {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
}

/* Rámik s pomerom strán zvoleného výrezu - rozmer (px) nastavuje JS
 * (fitCropViewportSize()), rohové "zaostrovacie" značky sú podľa Figma
 * fixné 4px hrubé pruhy bp-500 dlhé ~15 % strany, nie súvislý rámik. */
/* Hranatý rámik (žiadny border-radius - to majú len rohové značky nižšie,
 * ktoré zámerne PRETŔČAJÚ pár px mimo fotku, takže samotný obrázok musí
 * byť tiež hranatý, inak by vznikla viditeľná medzera medzi rovným rohom
 * značky a zaobleným rohom fotky). Klip fotky (overflow:hidden) je v
 * samostatnom vnútornom wrapperi - rohové značky sedia priamo na
 * .wac-photo-crop-modal__viewport, aby ich pretŕčajúca časť nebola
 * odseknutá tým istým overflow:hidden. */
.wac-photo-crop-modal__viewport {
	position: relative;
	flex: none;
	max-width: 100%;
	background: var(--wac-bg-subtle);
}

.wac-photo-crop-modal__viewport-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.wac-photo-crop-modal__canvas {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	cursor: grab;
	touch-action: none;
}

.wac-photo-crop-modal__canvas.is-dragging {
	cursor: grabbing;
}

/* Rohové "zaostrovacie" značky - dĺžka ramena 15 % strany, hrúbka 4px,
 * presahujú 3px mimo fotku na oboch stranách rohu (nie len dovnútra). */
.wac-photo-crop-modal__corner {
	position: absolute;
	width: 15%;
	height: 15%;
	border-color: var(--wac-accent);
	border-style: solid;
	border-width: 0;
	pointer-events: none;
}

.wac-photo-crop-modal__corner--tl {
	top: -3px;
	left: -3px;
	border-top-width: 4px;
	border-left-width: 4px;
}

.wac-photo-crop-modal__corner--tr {
	top: -3px;
	right: -3px;
	border-top-width: 4px;
	border-right-width: 4px;
}

.wac-photo-crop-modal__corner--bl {
	bottom: -3px;
	left: -3px;
	border-bottom-width: 4px;
	border-left-width: 4px;
}

.wac-photo-crop-modal__corner--br {
	bottom: -3px;
	right: -3px;
	border-bottom-width: 4px;
	border-right-width: 4px;
}

.wac-photo-crop-modal__zoom {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 272px;
}

.wac-photo-crop-modal__zoom-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--wac-gray-950);
	cursor: pointer;
}

.wac-photo-crop-modal__zoom-btn svg {
	width: 16px;
	height: 16px;
}

.wac-photo-crop-modal__zoom-btn:hover {
	background: var(--wac-bg-subtle);
}

.wac-photo-crop-modal__zoom-btn:focus-visible {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 2px;
}

/* Natívny <input type="range"> pre presné ťahanie (a11y aj klávesnica) -
 * prekreslený, aby vyzeral presne ako Figma (dráha gs-300, štvorcový
 * "gombík" bp-500 s 1.4px čiernym obrysom, rádius 6px, nie kruh). */
.wac-photo-crop-modal__zoom input[type="range"] {
	flex: 1 1 auto;
	-webkit-appearance: none;
	appearance: none;
	height: 16px;
	background: transparent;
	cursor: pointer;
}

.wac-photo-crop-modal__zoom input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 1px;
	background: var(--wac-gray-300);
}

.wac-photo-crop-modal__zoom input[type="range"]::-moz-range-track {
	height: 2px;
	border-radius: 1px;
	background: var(--wac-gray-300);
}

.wac-photo-crop-modal__zoom input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -7px;
	border-radius: 6px;
	border: 1.4px solid var(--wac-gray-950);
	background: var(--wac-accent);
}

.wac-photo-crop-modal__zoom input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 6px;
	border: 1.4px solid var(--wac-gray-950);
	background: var(--wac-accent);
}

.wac-photo-crop-modal__zoom input[type="range"]:focus-visible {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 4px;
}

.wac-photo-crop-modal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.wac-photo-crop-modal__reset {
	border: none;
	background: none;
	color: var(--wac-accent);
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 8px 0;
}

/* Presne rovnaké CTA ako .wac-photo-crop-controls__open a .wac-add-to-cart
 * (rovnaké --wac-cta-* tokeny) - len bez ikony, tú doplníme neskôr. */
.wac-photo-crop-modal__confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 6px;
	background: var(--wac-cta-bg);
	color: var(--wac-cta-text);
	font-size: 16px;
	font-weight: 600;
	padding: 12px 32px;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--wac-transition);
}

.wac-photo-crop-modal__confirm:hover {
	background: var(--wac-cta-bg-hover);
}

/* ---------- Photo crop modal - telefón/tablet ---------- */
@media (max-width: 640px) {
	.wac-photo-crop-modal:not([hidden]) {
		padding: 0;
		align-items: stretch;
	}

	.wac-photo-crop-modal__dialog {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		padding: 56px 20px 24px;
		gap: 20px;
	}

	.wac-photo-crop-modal__close {
		top: 8px;
		right: 8px;
	}

	.wac-photo-crop-modal__title {
		font-size: 21px;
	}

	.wac-photo-crop-modal__hint {
		font-size: 15px;
	}

	.wac-photo-crop-modal__actions {
		width: 100%;
		gap: 16px;
	}

	.wac-photo-crop-modal__confirm {
		flex: 1 1 auto;
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.wac-photo-crop-modal__dialog {
		padding: 32px 28px;
	}
}

.wac-preview__glass {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.08) 100%);
	opacity: 1;
	transition: opacity var(--wac-transition);
}

.wac-preview__glass.is-disabled {
	opacity: 0;
}

/* ---------- Option groups ---------- */

.wac-group {
	border: none;
	margin: 0;
	padding: 0;
}

/* "Obraz z vašej fotografie" - 3 kroky (fotka+rozmer / vyhotovenie /
 * kontakt), viď initPhotoRequestWizard() v configurator-v2.js. Fieldset
 * nesie svoj vlastný
 * flex+gap (nie len reset) - jeho potomkovia už nie sú priamymi deťmi
 * .wac-configurator__options, takže by inak stratili 32px odstup medzi
 * krokmi. */
.wac-photo-wizard-step {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* :not([hidden]), nie holé "display: flex" - autorský štýl by inak prebil
 * predvolené UA pravidlo "[hidden] { display: none; }" (autorské štýly
 * majú vždy prednosť pred UA, bez ohľadu na špecifickosť), takže by
 * atribút hidden krok vizuálne vôbec neschoval. Rovnaký princíp ako
 * .wac-photo-crop-modal:not([hidden]) nižšie. */
.wac-photo-wizard-step:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.wac-photo-wizard-progress-compact {
	display: none;
	flex-direction: column;
	gap: 2px;
}

.wac-photo-wizard-progress-compact__step {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--wac-accent-selected);
}

.wac-photo-wizard-progress-compact__next {
	/* Zámerne TMAVÁ, nie tlmená sivá ako bežná pomocná poznámka - toto je
	 * presne tá veta, ktorá má zákazníkovi zabrániť myslieť si, že po
	 * kroku 1 je koniec (viď komentár pri šablóne). Musí byť vidieť na
	 * prvý pohľad, nie vyzerať ako drobný "fine print". */
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--wac-gray-950);
}

.wac-photo-wizard-progress-compact__next:empty {
	display: none;
}

.wac-photo-wizard-progress {
	/* Rovnaký dôvod ako min-width:0 na .wac-configurator__options - je to
	 * flex item v stĺpcovom rodičovi, bez tohto by si držal vlastné
	 * "auto" minimum (súčet min-content šírok krokov) a vytlačil by celú
	 * stránku širšiu než 100vw na úzkom telefóne. */
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Telefón - plný krokovník (kruhy + text pod nimi) nahradí jednoduché
 * "Krok X z 3". Aj po oprave pretečenia (min-width:0 vyššie) ostávali 3
 * kruhy s popiskom na úzkej obrazovke zbytočne nahusto. Musí byť AŽ ZA
 * .wac-photo-wizard-progress vyššie - inak by ho pri rovnakej
 * špecifickosti prebilo poradie v súbore bez ohľadu na @media. */
@media (max-width: 480px) {
	.wac-photo-wizard-progress {
		display: none;
	}

	.wac-photo-wizard-progress-compact {
		display: flex;
		/* .wac-configurator__options má gap:32px medzi VŠETKÝMI krokmi -
		 * správne pre plnohodnotné sekcie, ale pre tento malý 2-riadkový
		 * blok pod nadpisom produktu to vyzeralo ako zbytočne veľká medzera.
		 * Záporný margin ju vizuálne stiahne bližšie k nadpisu, bez zásahu
		 * do gapu pre ostatné (plnohodnotné) kroky. */
		margin-top: -20px;
	}
}

.wac-photo-wizard-progress__step {
	/* Rovnaký reťazec ako na .wac-photo-wizard-progress vyššie - bez
	 * min-width:0 by si label (text) držal nezalomenú šírku ako svoje
	 * flex "auto" minimum, aj keď má white-space: normal. */
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wac-text-muted);
}

.wac-photo-wizard-progress__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--wac-border);
	font-size: 13px;
	font-weight: 700;
	transition: border-color var(--wac-transition), background var(--wac-transition), color var(--wac-transition);
}

.wac-photo-wizard-progress__label {
	font-size: 13px;
	font-weight: 700;
}

.wac-photo-wizard-progress__line {
	flex: 1 1 auto;
	/* Bez toho vie na úzkych obrazovkách (pri dlhších nadpisoch krokov)
	 * flexbox čiaru stlačiť až na 0px, kým zvyšné miesto zoberú samotné
	 * kroky - krátky minimum ju udrží viditeľnú aj v tesnom priestore. */
	min-width: 16px;
	height: 2px;
	background: var(--wac-border);
}

.wac-photo-wizard-progress__step.is-active .wac-photo-wizard-progress__circle {
	border-color: var(--wac-accent-selected);
	background: var(--wac-accent-selected);
	color: #fff;
}

.wac-photo-wizard-progress__step.is-active .wac-photo-wizard-progress__label,
.wac-photo-wizard-progress__step.is-done .wac-photo-wizard-progress__label {
	color: var(--wac-text);
}

.wac-photo-wizard-progress__step.is-done .wac-photo-wizard-progress__circle {
	border-color: var(--wac-accent-selected);
	color: var(--wac-accent-selected);
}

.wac-photo-wizard-back:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 10px;
	border: none;
	background: none;
	color: var(--wac-text-muted);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	padding: 8px 0;
}

.wac-photo-wizard-back:hover {
	color: var(--wac-text);
}

/* Rovnaká váha ako .form-row label v checkoute (700, ~1.05rem) - jediný
 * skutočný "form label" vzor v theme. */
.wac-group__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
}

/* Rovnaká farba ako .form-row .required v checkoute - brand, nie
 * ľubovoľná červená (červená v theme patrí len skutočným chybám). */
.wac-required {
	color: var(--wac-accent-selected);
}

.wac-group__description {
	color: var(--wac-text-muted);
	font-size: 14px;
	margin: 0 0 12px;
}

.wac-group__note-below {
	color: var(--wac-text-muted);
	font-size: 13px;
	margin: 10px 0 0;
}

/* Rovnaká rodina ako .wac-size-select - zjednotený radius (rovnaký ako
 * ostatné formulárové polia) + vlastný oranžový chevron namiesto natívnej
 * šípky prehliadača, aby oba "brandové" selecty v paneli vyzerali ako
 * jedna rodina, nie dve rôzne. */
.wac-category-select {
	width: 100%;
	/* Rovnaké padding/font-size ako .wac-size-select/.wac-photo-size-select
	 * (presne uprostred pôvodných hodnôt oboch) - "Rám" aj "Rozmer" majú
	 * vyzerať ako jedna rodina selectov, nie dva rôzne rozmery. */
	padding: 12px 42px 12px 18px;
	margin-top: 10px;
	border-radius: var(--wac-radius-md);
	/* !important, rovnako ako .wac-size-select - inak vlastný :focus štýl
	 * motívu stránky prebije farbu a mimo fokusu zostane sivá. Vždy
	 * oranžová, nielen pri focuse - kategória je v podstate vždy "aktívne"
	 * zvolená (nikdy nie je prázdna), tak nech to tak aj vyzerá. */
	border: 2px solid var(--wac-accent) !important;
	background-color: var(--wac-bg);
	color: var(--wac-text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f69f10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 15px;
}

.wac-category-select:focus {
	outline: none;
	box-shadow: none;
}

.wac-category-select-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.wac-category-select-row .wac-category-select {
	width: auto;
	flex: 1;
	min-width: 160px;
	margin-top: 0;
}

.wac-category-detail-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--wac-accent);
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.wac-category-detail-link:hover {
	color: var(--wac-text);
}

.wac-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 10px;
}

/* Rám a Pasparta - VŽDY presných 4 rovnako veľkých stĺpcov (grid), nie
 * flex-wrap ako ostatné dlaždicové skupiny (napr. Médium, ktoré ostáva na
 * 3 stĺpcoch bez zmeny). Rozdiel oproti flexu: pri 7 kartách flex:1 na
 * poslednom (nedoplnenom) riadku roztiahne zvyšné 3 karty na 1/3 šírky
 * každú - grid s pevným `repeat(4, ...)` necháva aj neúplný riadok v
 * rovnakých 1/4 šírkach ako plný riadok (Figma node 493:5029). Cielené
 * cez `.wac-group--frame`/`.wac-group--mat` (field_type, vždy prítomné),
 * nie `.wac-group--card-layout-tile` (to zdieľa aj Médium). */
.wac-group--frame .wac-choices,
.wac-group--mat .wac-choices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Karta voľby - podľa Figma: 1,5px sivý obrys (gs-600), radius 12px, biela
 * plocha, zvolená len prehodí obrys na brand oranžovú (bg zostáva rovnaké
 * biele - Figma nemá tónovanú "zvolenú" plochu). */
.wac-choice-card {
	/* Rám/Pasparta (.wac-group--frame/.wac-group--mat) kladú tieto karty
	 * do CSS gridu s `repeat(4, minmax(0, 1fr))` - minmax(0, ...) rieši
	 * len samotný track, karta ako grid item by si bez tohto držala
	 * vlastné "auto" minimum (nezalomená šírka dlhého názvu), a na úzkom
	 * telefóne tak vytlačila celú stránku širšiu než 100vw. */
	min-width: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--wac-radius-md);
	border: 1.5px solid var(--wac-gray-600);
	background: var(--wac-bg);
	color: var(--wac-chip-text);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color var(--wac-transition), transform var(--wac-transition), background var(--wac-transition);
}

.wac-choice-card:hover {
	transform: translateY(-1px);
}

.wac-choice-card.is-selected {
	border-color: var(--wac-accent-selected);
	background: var(--wac-bg);
}

/* Kategórie (napr. rámové profily) - karty mimo zvolenej kategórie.
 * Zdvojená trieda kvôli špecifickosti - musí prebiť .wac-group--frame
 * .wac-choice-card a podobné variantové pravidlá bez ohľadu na poradie
 * v súbore. */
.wac-choice-card.wac-choice-card--category-hidden {
	display: none;
}

.wac-choice-card__thumb,
.wac-choice-card__swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

/* Image-select / frame variants: bigger swatch tiles instead of pills -
 * always a light card (never the dark chip look), the ring border is
 * what communicates "selected". Rovnaká dlaždica ako Médium/Rám/Pasparta v
 * Figma (rovnomerne rozdelené na šírku, pomer obrázka 118:117). */
.wac-group--image_select .wac-choice-card,
.wac-group--frame .wac-choice-card,
.wac-group--card-layout-tile .wac-choice-card {
	flex: 1 1 0;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 8px 8px 12px;
	border-radius: var(--wac-radius-md);
	width: auto;
	min-width: 100px;
}

.wac-group--image_select .wac-choice-card.is-selected,
.wac-group--frame .wac-choice-card.is-selected,
.wac-group--card-layout-tile .wac-choice-card.is-selected {
	background: var(--wac-bg);
	border-color: var(--wac-accent-selected);
}

.wac-group--image_select .wac-choice-card__thumb,
.wac-group--frame .wac-choice-card__thumb,
.wac-group--card-layout-tile .wac-choice-card__thumb,
.wac-group--card-layout-tile .wac-choice-card__swatch {
	width: 100%;
	height: auto;
	aspect-ratio: 118 / 117;
	/* Swatch is a circle by default (see .wac-choice-card__swatch above) -
	 * the tile layout needs it to fill the same top slot as an image thumb. */
	border-radius: var(--wac-radius-sm);
	border: 0.5px solid var(--wac-gray-300);
}

.wac-choice-card__thumb--empty {
	background-color: var(--wac-bg-subtle);
}

/* Admin-uploaded marker (napr. červené X) pre "Bez ..." možnosti - musí
 * ostať celé viditeľné, nie orezané/roztiahnuté ako fotka na pozadí. */
.wac-choice-card__thumb--placeholder {
	background-size: contain;
	background-repeat: no-repeat;
}

/* Bez min-width:0 by si label (flex item v .wac-choice-card) držal svoje
 * "auto" minimum = nezalomenú šírku textu, aj keď má white-space: normal -
 * karta aj jej rodičovský grid/flex sa síce správne zmenšia (viď min-width
 * na .wac-choice-card vyššie), ale samotný label by z nich na úzkom
 * telefóne vytŕčal von namiesto zalomenia. Platí pre VŠETKY varianty
 * (pill aj dlaždica), preto mimo nižších skupinovo-cielených selektorov. */
.wac-choice-card__label {
	min-width: 0;
}

.wac-group--image_select .wac-choice-card__label,
.wac-group--frame .wac-choice-card__label,
.wac-group--card-layout-tile .wac-choice-card__label {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: normal;
}

/* Generic small hint next to a field label (e.g. "krok 5 mm") - lighter
 * weight/size than the label itself so it reads as a footnote, not
 * competing for attention with the actual instruction. */
.wac-field__hint {
	font-weight: 400;
	font-size: 12px;
	color: var(--wac-text-muted);
}

/* Mat width sub-field */

.wac-mat-width {
	/* 12px - rovnaký rozostup ako medzi ostatnými prvkami kroku vo Figma
	 * (predtým 14px + fieldset border/padding pôsobili ako väčšia medzera,
	 * než má "šírka pasparty" byť bližšie pri výbere karty). */
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	transition: opacity var(--wac-transition);
}

.wac-mat-width.is-hidden {
	display: none;
}

.wac-mat-width__warning {
	flex-basis: 100%;
	margin: 4px 0 0;
	/* --wac-brand-700, nie ľubovoľná hex - drž sa palety definovanej vyššie. */
	color: var(--wac-brand-700);
	font-size: 13px;
}

.wac-mat-width label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wac-text);
}

/* .wac-mat-width-input samo osebe už nič nevizualizuje - vždy sa v šablóne
 * páruje s .wac-number-field__input (viď mat.php), ktoré dodáva vzhľad aj
 * fokus stav. Trieda ostáva len ako selector-hook pre JS. */

/* Tlmený drobný text pod pasparta náhľadom - nie samostatný "preview note"
 * štýl. Bližšie k šírke pasparty (8px, nie predošlých 10/14px zdedených z
 * .wac-configurator__preview-note). */
.wac-mat-note {
	margin: 8px 0 0;
	max-width: none;
	text-align: left;
	font-size: 14px;
	font-weight: 400;
	color: var(--wac-summary-text-muted);
	line-height: 1.5;
}

/* Dropdown / text / textarea groups */

.wac-group--dropdown,
.wac-group--text,
.wac-group--textarea {
	max-width: 480px;
}

/* Rovnaký vzhľad ako skutočné formulárové polia v checkoute (.input-text/
 * select/textarea v e-shop.css) - radius 12px, viditeľnejší hraničný
 * odtieň, tučné písmo, pri focuse oranžový obrys + jemný "ring" tieň. */
.wac-dropdown,
.wac-text-input,
.wac-textarea-input {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--wac-radius-md);
	border: 1px solid var(--wac-gray-500);
	background: var(--wac-bg);
	color: var(--wac-text);
	font-weight: 700;
	font-size: 15px;
	transition: border-color var(--wac-transition), box-shadow var(--wac-transition);
}

.wac-dropdown:focus,
.wac-text-input:focus,
.wac-textarea-input:focus {
	border-color: var(--wac-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--wac-brand-ring);
}

.wac-textarea-input {
	resize: vertical;
	min-height: 90px;
}

/* Size picker */

.wac-configurator__header {
	margin-bottom: 8px;
}

.wac-configurator__title {
	margin: 0 0 4px;
	font-size: 32px;
	/* 600, nie 700 - rovnaká váha ako wb-h1...wb-h5 v theme. */
	font-weight: 600;
	line-height: 1.15;
	color: var(--wac-text);
}

.wac-group--size {
	margin-bottom: 4px;
}

.wac-size-select {
	width: 100%;
	/* Rovnaké ako .wac-category-select ("Rám") - jedna zjednotená rodina
	 * selectov v celom konfigurátore. */
	padding: 12px 42px 12px 18px;
	/* !important: the surrounding theme's own global form-field focus
	 * style (e.g. Divi's input:focus rule) otherwise wins on :focus and
	 * flips this border black - it must stay the brand accent in every
	 * state, not just at rest. */
	border: 2px solid var(--wac-accent) !important;
	border-radius: var(--wac-radius-md);
	background-color: var(--wac-bg);
	color: var(--wac-text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f69f10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 15px;
}

.wac-size-select:focus {
	outline: none;
	box-shadow: none;
}

/* Vlastný rozmer / Iný pomer - rovnaká brand paleta ako .wac-size-select
 * (oranžový accent border, čierny text), aby oba stavy vizuálne patrili k
 * sebe namiesto pôsobenia ako samostatný "obyčajný" formulárový blok. */

.wac-custom-size {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.wac-custom-size[hidden] {
	display: none;
}

.wac-custom-size label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wac-text);
}

/* .wac-custom-size-input samo osebe už nič nevizualizuje - vždy sa v
 * šablóne páruje s .wac-number-field__input, ktoré dodáva vzhľad. Trieda
 * ostáva len ako selector-hook pre JS (querySelector/matches). */

.wac-other-ratio {
	margin-top: 14px;
	padding: 16px;
	border: 2px solid var(--wac-accent);
	border-radius: var(--wac-radius-md);
	background: var(--wac-brand-50);
}

.wac-other-ratio[hidden] {
	display: none;
}

.wac-other-ratio__select-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wac-text);
}

/* Rovnaká rodina ako .wac-size-select/.wac-category-select - zjednotený
 * radius + vlastný chevron, nie natívna šípka prehliadača. */
.wac-other-ratio-select {
	margin-top: 4px;
	width: 100%;
	padding: 10px 40px 10px 16px;
	border-radius: var(--wac-radius-md);
	border: 2px solid var(--wac-accent);
	background-color: var(--wac-bg);
	color: var(--wac-text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f69f10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}

.wac-other-ratio-select:focus {
	outline: none;
}

.wac-other-ratio__warning {
	margin: 14px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--wac-brand-300);
	border-radius: var(--wac-radius-sm);
	background: var(--wac-bg);
	color: var(--wac-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

/* "Iný rozmer" kontaktný box (atypické produkty) - recykluje .wac-other-ratio */

#wac-contact-panel p {
	margin: 0 0 12px;
	color: var(--wac-text);
	font-weight: 600;
}

.wac-contact-panel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 6px;
	background: var(--wac-cta-bg);
	color: var(--wac-cta-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--wac-transition), transform var(--wac-transition);
}

.wac-contact-panel__button:hover {
	background: var(--wac-cta-bg-hover);
	transform: translateY(-1px);
}

/* ---------- Summary / add to cart ---------- */

.wac-configurator__summary {
	margin-top: 0;
	padding: 24px;
	border-radius: var(--wac-radius-md);
	background: var(--wac-bg-subtle);
	color: var(--wac-summary-text);
	border: 2px dashed var(--wac-accent-selected);
}

/* Zhrnutie výberu ako riadok ikona+text položiek - presne podľa Figma
 * (node 493:5110): "[ikona] 40 × 40 cm", "[ikona] Papier saténový
 * samolepiaci", "[ikona] Bez rámu" ... vedľa seba, zalomí sa len ak sa
 * fyzicky nezmestí (flex-wrap), nie po jednej položke na riadok. */
.wac-summary-items {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 15px;
	margin: 0 0 18px;
}

.wac-summary-items:empty {
	display: none !important;
}

.wac-summary-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wac-gray-800);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
}

.wac-summary-item img {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.wac-configurator__summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.wac-quantity {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1.5px solid var(--wac-gray-950);
	border-radius: 999px;
	padding: 4px;
}

.wac-quantity__btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--wac-summary-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.wac-quantity__btn:hover {
	background: var(--wac-bg-subtle);
}

.wac-quantity__input {
	width: 36px;
	border: none;
	background: transparent;
	color: var(--wac-summary-text);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
}

.wac-price-wrap {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.wac-price {
	font-size: 31px;
	font-weight: 700;
	transition: opacity var(--wac-transition);
}

.wac-price__vat-note {
	font-size: 13px;
	font-weight: 400;
	color: var(--wac-text-muted);
}

/* Rovnaké tlačidlo ako wb-step__btn / #place_order - hnedá farba (viď
 * --wac-cta-bg), radius 6px, asymetrický vertikálny padding kvôli
 * optickému vycentrovaniu Oxanium písma, nie plná pilulka. */
/* [hidden] override - "Pokračovať"/"Odoslať žiadosť" sa v 2-krokovom
 * formulári prepínajú cez atribút hidden (viď initPhotoRequestWizard()),
 * ktorý by inak pevné "display: flex" nižšie prebilo (autorský štýl má
 * vždy prednosť pred UA pravidlom "[hidden] { display: none; }"). */
.wac-add-to-cart[hidden] {
	display: none;
}

.wac-add-to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 32px 12px;
	border-radius: 6px;
	border: none;
	background: var(--wac-cta-bg);
	color: var(--wac-cta-text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--wac-transition), transform var(--wac-transition), opacity var(--wac-transition);
}

.wac-add-to-cart:hover:not(:disabled) {
	background: var(--wac-cta-bg-hover);
	transform: translateY(-1px);
}

.wac-add-to-cart:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.wac-configurator__perks {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--wac-border);
}

.wac-configurator__perks li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--wac-summary-text-muted);
}

.wac-configurator__perks img {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* Rovnaký panel ako body .woocommerce-error v theme (reskin vo
 * global.css) - opatený box, nie holý červený riadok textu. */
.wac-configurator__error {
	grid-column: 1 / -1;
	margin: 0 0 4px;
	padding: 12px 16px;
	border-radius: var(--wac-radius-sm);
	background: rgba(179, 38, 30, 0.08);
	border: 1px solid #b3261e;
	color: #b3261e;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/* Zámerne oveľa výraznejšia ako bežná chybová/informačná hláška vyššie -
 * toto je jediné potvrdenie, že sa žiadosť naozaj odoslala (nejde cez
 * štandardný WooCommerce "objednávka prijatá" tok), zákazník musí mať
 * istotu na prvý pohľad, nie si to musieť prečítať v drobnom riadku. */
.wac-configurator__error--success {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	background: rgba(27, 130, 66, 0.08);
	border: 2px solid #1b8242;
	border-radius: var(--wac-radius-md);
	color: #1b8242;
	padding: 20px 24px;
	/* Žiadny max-width/veľké zvislé okraje - box teraz býva vnútri užšieho
	 * súhrnu (nad tlačidlom), nie na celej šírke stránky. */
	margin: 0 0 18px;
	text-align: left;
}

.wac-configurator__error--success svg {
	flex-shrink: 0;
	align-self: center;
	width: 32px;
	height: 32px;
}

.wac-configurator__error--success p {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

/* ---------- "Obraz z vašej fotografie" ---------- */

.wac-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Krok "Nahrajte fotografiu" (upload) nemá pod sebou deliacu čiaru - v
 * Figma nadväzuje priamo na krok "Vyberte tvar obrazu". Ostatné kroky
 * (.wac-step) dostávajú spodnú čiaru automaticky, viď vyššie. */

.wac-photo-ratio-card {
	cursor: pointer;
}

/* Natívny <input type="file"> nemá cez CSS spôsob, ako premenovať vlastný
 * text tlačidla prehliadača ("Choose file"/"Vybrať súbor" - lokalizovaný
 * prehliadačom, nie stránkou) - preto je vizuálne skrytý (nie display:none,
 * aby zostal dostupný z klávesnice/čítačky obrazovky) a namiesto neho slúži
 * <label for="wac-photo-input"> nižšie ako brandovaná "dropzone". */
.wac-photo-input-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Veľká prerušovaná "dropzone" karta - presne podľa Figma (node 493:4944):
 * centrovaná ikona, tučný oranžový CTA text + bežný text, pod tým tlmená
 * poznámka o povolených formátoch (jednotlivé formáty tučné). */
.wac-photo-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 24px;
	border: 2px dashed var(--wac-accent-selected);
	border-radius: var(--wac-radius-md);
	background: var(--wac-bg-subtle);
	text-align: center;
	cursor: pointer;
	transition: background var(--wac-transition), box-shadow var(--wac-transition);
}

/* Hover/focus stav - presne "Variant2" z Figma (node 556:773): teplé
 * krémové pozadie (bp-50) namiesto sivého + jemný vrhaný tieň
 * ("wb-shadow-S": offset -1/1, blur 4, #00000040). :focus-within reaguje aj
 * na klávesnicové zaostrenie skrytého <input>, nielen na myš. */
.wac-photo-dropzone:hover,
.wac-photo-dropzone:focus-within {
	background: var(--wac-brand-50);
	box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.25);
}

.wac-photo-dropzone:has(+ .wac-photo-input-native:focus-visible) {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 2px;
}

.wac-photo-dropzone__icon {
	flex-shrink: 0;
	width: 64px;
	height: auto;
}

.wac-photo-dropzone__cta {
	margin: 0;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wac-gray-950);
}

.wac-photo-dropzone__cta-accent {
	font-weight: 700;
	color: var(--wac-accent-selected);
}

.wac-photo-dropzone__hint {
	margin: 0;
	max-width: 460px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--wac-text-muted);
}

.wac-photo-dropzone__hint strong {
	font-weight: 700;
	color: var(--wac-text-muted);
}

.wac-photo-dropzone__filename {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--wac-text);
}

.wac-photo-dropzone__filename:empty {
	display: none;
}

/* Výber pomeru strán - segmentované tlačidlá s malou ikonou tvaru pomeru
 * (obyčajný orámovaný obdĺžnik/štvorec, žiadny obrázok netreba).
 *
 * Rovnomerné rozdelenie (flex:1) - 3 tlačidlá ostávajú vedľa seba v jednom
 * riadku aj na úzkych obrazovkách, ale text sa už nekráti "..." ani sa
 * nezmenšuje na nečitateľné rozmery - namiesto toho sa voľne zalomí na
 * viac riadkov (white-space: normal) a tlačidlo si podľa obsahu narastie
 * do výšky (žiadna pevná "height"), takže je vždy vidno celý text so
 * zachovaným paddingom. */
.wac-ratio-options {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin-top: 10px;
}

.wac-ratio-option {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 45px;
	padding: 10px 8px;
	border-radius: var(--wac-radius-md);
	border: 1.5px solid var(--wac-gray-600);
	background: var(--wac-bg-subtle);
	color: var(--wac-gray-950);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	cursor: pointer;
	transition: border-color var(--wac-transition), background var(--wac-transition);
}

.wac-ratio-option .wac-choice-card__label {
	overflow-wrap: break-word;
}

.wac-ratio-option.is-selected {
	border-color: var(--wac-accent-selected);
}

.wac-ratio-option:has(input:focus-visible) {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 2px;
}

.wac-ratio-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wac-ratio-option__icon {
	flex-shrink: 0;
	border: 2px solid var(--wac-gray-950);
	border-radius: 2px;
}

.wac-ratio-option__icon--1_1 {
	width: 21px;
	height: 21px;
}

.wac-ratio-option__icon--4_3 {
	width: 21px;
	height: 16px;
}

.wac-ratio-option__icon--3_4 {
	width: 16px;
	height: 21px;
}

.wac-ratio-option__icon--custom {
	width: 21px;
	height: 21px;
	border-style: dashed;
}

/* Číselné pole s vlastným stepperom (+/- šípky vpravo) - používa sa pre
 * vlastný rozmer (šírka/výška) aj šírku pasparty, presne podľa Figma. */
.wac-number-field {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 104px;
	padding: 4px 4px 4px 12px;
	border-radius: var(--wac-radius-md);
	border: 1.5px solid var(--wac-accent-selected);
	background: var(--wac-bg);
}

.wac-number-field__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--wac-gray-950);
	appearance: textfield;
	-moz-appearance: textfield;
}

.wac-number-field__input:focus {
	outline: none;
	box-shadow: none;
}

.wac-number-field__input::-webkit-outer-spin-button,
.wac-number-field__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wac-number-field__input:disabled {
	opacity: 0.5;
}

.wac-number-field__steppers {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-shrink: 0;
}

.wac-number-field__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 15px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--wac-gray-200);
	color: var(--wac-gray-700);
	cursor: pointer;
	transition: background var(--wac-transition);
}

.wac-number-field__step:hover {
	background: var(--wac-gray-300);
}

.wac-number-field__step:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.wac-number-field__step svg {
	width: 12px;
	height: 7px;
}

.wac-number-field__step--up svg {
	transform: rotate(180deg);
}

.wac-photo-rights {
	align-items: center;
	gap: 12px;
	margin-top: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

/* Vlastný vzhľad namiesto natívneho accent-color checkboxu - presne podľa
 * Figma checkbox komponentu (node 474:3074): nezaškrtnuté = priehľadná
 * plocha so sivým obrysom (gs-400), zaškrtnuté = plná oranžová (bp-500) s
 * bielou fajkou. appearance:none + vlastný ::after (miesto natívneho UI
 * checkboxu) - input ostáva skutočný <input type="checkbox"> kvôli
 * klávesnici/čítačke obrazovky a submitu formulára, len sa inak vykresľuje. */
.wac-photo-rights input[type="checkbox"] {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wac-gray-400);
	border-radius: 7px;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background var(--wac-transition), border-color var(--wac-transition);
}

.wac-photo-rights input[type="checkbox"]:checked {
	background: var(--wac-brand-500);
	border-color: var(--wac-brand-500);
}

.wac-photo-rights input[type="checkbox"]::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 12px;
	border: solid var(--wac-bg);
	border-width: 0 2px 2px 0;
	transform: rotate(40deg);
	opacity: 0;
}

.wac-photo-rights input[type="checkbox"]:checked::after {
	opacity: 1;
}

.wac-photo-rights input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 2px;
}

/* Karty pre spôsob doručenia - rovnaký vizuálny jazyk ako checkout tohto
 * obchodu (orámovaná karta, oranžový zvýraznený okraj + vyplnená "fajka"
 * pri zvolenej možnosti), zámerne VLASTNÁ trieda (nie zdieľané
 * .wac-choice-card) - tá má globálny delegovaný click handler viazaný na
 * skutočné skupiny možností (data-group-id), ktorý by inak preventDefault()
 * zablokoval natívne prepnutie rádio tlačidla (rovnaký problém, aký mal
 * pôvodne .wac-photo-ratio-card). Pod sebou (nie vedľa seba) - jednoduchšie
 * na mobile, kde by sa dve karty vedľa seba museli zmenšovať. */
.wac-photo-shipping-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wac-photo-shipping-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1.5px solid var(--wac-gray-600);
	border-radius: var(--wac-radius-md);
	cursor: pointer;
	transition: border-color var(--wac-transition), background var(--wac-transition);
}

.wac-photo-shipping-card:has(input:checked) {
	border-color: var(--wac-accent-selected);
	background: var(--wac-chip-bg-selected);
}

.wac-photo-shipping-card:has(input:focus-visible) {
	outline: 2px solid var(--wac-accent-selected);
	outline-offset: 2px;
}

.wac-photo-shipping-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Rovnaký vzhľad ako checkbox súhlasu ("Potvrdzujem, že mám právo...") -
 * .wac-photo-rights input[type="checkbox"] vyššie: 24×24px, 1px sivý obrys
 * (gs-400), radius 7px, zaškrtnuté = plná bp-500 s bielou fajkou v
 * rovnakom uhle. Tu je to `<span>` (nie natívny checkbox), lebo ide
 * o rádio karty s vlastným delegovaným click handlerom - vizuál musí byť
 * ale identický, nie len "podobný". */
.wac-photo-shipping-card__check {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 1px solid var(--wac-gray-400);
	border-radius: 7px;
	background: transparent;
	position: relative;
	transition: border-color var(--wac-transition), background var(--wac-transition);
}

.wac-photo-shipping-card:has(input:checked) .wac-photo-shipping-card__check {
	border-color: var(--wac-brand-500);
	background: var(--wac-brand-500);
}

.wac-photo-shipping-card:has(input:checked) .wac-photo-shipping-card__check::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 12px;
	border: solid var(--wac-bg);
	border-width: 0 2px 2px 0;
	transform: rotate(40deg);
}

.wac-photo-shipping-card__text {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wac-text);
}

.wac-photo-shipping-card__muted {
	color: var(--wac-text-muted);
	font-weight: 400;
}

.wac-photo-shipping-card__address {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 400;
	color: var(--wac-text-muted);
	line-height: 1.5;
}

#wac-shipping-price-note {
	font-weight: 700;
}

/* Zvýraznenie: teraz sa ešte neplatí - podľa Figma prerušovaný oranžový
 * rámik (rovnaká "dropzone" konvencia ako .wac-photo-dropzone), ikona a
 * text vedľa seba. */
.wac-photo-contact__note {
	/* !important na display/align-items - Divi (téma) má na moduly vlastné
	 * globálne resety, ktoré vedeli tento flex riadok prebiť a posunuli
	 * ikonu s textom vizuálne mimo stred ("divne posunuté dole"). */
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	margin: 0;
	padding: 24px;
	background: var(--wac-brand-50);
	border: 2px dashed var(--wac-accent-selected);
	border-radius: var(--wac-radius-md);
	color: var(--wac-gray-950);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.wac-photo-contact__note-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	align-self: center;
}

.wac-photo-contact__note-text {
	display: block;
}

/* Výrazné upozornenie medzi skupinami "Médium" a "Rám" (krok 2, "Vyberte
 * vyhotovenie") - plná farba (nie bodkovaný rámik ako .wac-photo-contact__note),
 * aby v rade kariet s možnosťami jasne vystúpilo. */
.wac-photo-kapa-note {
	margin: 4px 0 8px;
	padding: 16px 20px;
	background: var(--wac-accent-selected);
	border-radius: var(--wac-radius-md);
	color: var(--wac-accent-contrast);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.wac-photo-rights-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.wac-photo-input__error {
	margin-top: 8px;
	color: #b3261e;
	font-weight: 600;
	font-size: 13px;
}

/* Rovnaká rodina ako .wac-size-select/.wac-custom-size - fields.php trieda
 * súborov je zámerne oddelená (photo-request-size.php), aby sa nikdy
 * nestretla s existujúcimi delegovanými JS handlermi bežného size.php, ale
 * vizuál musí zostať identický, nie samostatný štýl navyše. */
.wac-photo-size-select {
	width: 100%;
	padding: 12px 42px 12px 18px;
	border: 2px solid var(--wac-accent) !important;
	border-radius: var(--wac-radius-md);
	background-color: var(--wac-bg);
	color: var(--wac-text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f69f10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 15px;
}

.wac-photo-size-select:focus {
	outline: none;
	box-shadow: none;
}

.wac-photo-custom-size {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.wac-photo-custom-size[hidden] {
	display: none;
}

.wac-photo-custom-size label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wac-text);
}

/* .wac-photo-custom-size-input samo osebe už nič nevizualizuje - vždy sa v
 * šablóne páruje s .wac-number-field__input, ktoré dodáva vzhľad. Trieda
 * ostáva len ako selector-hook pre JS. */

.wac-photo-size-panels [data-size-ratio-panel][hidden] {
	display: none;
}

/* Kontaktné údaje (meno/email/telefón) - jediné miesto vo frontende, ktoré
 * potrebuje bežný formulárový .wac-field/.wac-field-row vzor (rovnaké
 * názvy tried ako v admine, ale vlastný, frontendovo-brandovaný vzhľad -
 * admin.css sa sem nikdy nenačíta). */
.wac-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 10px;
}

.wac-field-row .wac-field {
	flex: 1 1 200px;
	min-width: 0;
}

.wac-field label {
	display: block;
	padding-left: 4px;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--wac-text);
}

.wac-field input[type="text"],
.wac-field input[type="email"],
.wac-field input[type="tel"] {
	width: 100%;
	/* Bez pevnej "height" - tá pri tesnom súčte s padding/border nechávala
	 * text/placeholder vizuálne posunutý vyššie, nie na strede poľa (líšilo
	 * sa to aj medzi prehliadačmi). Symetrický padding necháva box vertikálne
	 * centrovať sa prirodzene podľa výšky riadku textu. */
	padding: 10px 12px;
	border: 1.5px solid var(--wac-accent-selected) !important;
	border-radius: var(--wac-radius-md);
	background: var(--wac-bg);
	color: var(--wac-text);
	font-size: 18px;
	font-weight: 700;
}

.wac-field input::placeholder {
	color: var(--wac-gray-400);
	/* Menšie a jemnejšie ako skutočne zadaná hodnota (18px/700) - placeholder
	 * je len ukážka formátu, nemá pôsobiť rovnako "vyplnene" ako reálny údaj. */
	font-size: 14px;
	font-weight: 600;
}

.wac-field input:focus {
	outline: none;
	box-shadow: none;
}

.wac-field--inline {
	display: flex;
}

/* Inline validácia povinných polí (meno/e-mail/adresa/mesto/PSČ/súhlas/
 * fotka) - viď initPhotoRequestSubmitValidation() v configurator-v2.js.
 * Namiesto jedného spoločného červeného boxu na vrchu stránky sa chyba
 * ukáže PRIAMO PRI poli (červený okraj + text pod ním) a viewport na dané
 * miesto plynulo scrollne, nie na vrch. */
.wac-field-error {
	margin: 6px 0 0;
	color: #b3261e;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
}

.wac-field--invalid input[type="text"],
.wac-field--invalid input[type="email"] {
	border-color: #b3261e !important;
}

.wac-field--invalid.wac-photo-rights input[type="checkbox"] {
	border-color: #b3261e;
}

.wac-group--photo-upload.wac-field--invalid .wac-photo-dropzone {
	border-color: #b3261e;
	background: #fdecea;
}

/* ---------- Shop archive: scene thumbnail ---------- */

.wac-scene-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border-radius: var(--wac-radius-sm);
}

.wac-scene-thumb__art {
	position: absolute;
	object-fit: cover;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ---------- Cart + checkout: composited line-item thumbnail ---------- */

.wac-cart-thumb {
	display: block;
	width: 72px;
}

.wac-cart-thumb .wac-preview {
	width: 72px;
	max-width: none;
	box-shadow: none;
}

.wac-checkout-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wac-checkout-thumb {
	flex: 0 0 auto;
	display: block;
	width: 56px;
}

.wac-checkout-thumb .wac-preview {
	width: 56px;
	max-width: none;
	box-shadow: none;
}

.wac-checkout-item__info {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Category detail modal (napr. tabuľka profilov rámov) ---------- */

.wac-category-detail-modal:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.wac-category-detail-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

.wac-category-detail-modal__dialog {
	position: relative;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
}

.wac-category-detail-modal__image {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
}

.wac-category-detail-modal__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--wac-bg);
	color: var(--wac-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.wac-configurator__layout {
		grid-template-columns: minmax(0, 1fr); /* nie "1fr" - pretekalo za 100vw */
	}

	.wac-configurator__preview {
		position: static;
		/* Mobil: stĺpce sú pod sebou, celá stránka scrolluje spolu - vlastný
		 * scroll/max-height by tu len orezal obsah. */
		max-height: none;
		overflow-y: visible;
	}
}

/* Telefón - Rám aj Pasparta na užšom displeji prejdú zo 4 na 3 stĺpce
 * (dosky pri 4 stĺpcoch boli na šírku telefónu príliš stlačené). Desktop
 * (nad 600px) ostáva na pôvodných 4 - viď .wac-group--frame .wac-choices,
 * .wac-group--mat .wac-choices vyššie. */
@media (max-width: 600px) {
	.wac-group--frame .wac-choices,
	.wac-group--mat .wac-choices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Rovnaký dôvod ako vyššie, o krok ďalej - pri 3 stĺpcoch na naozaj úzkom
 * telefóne (do cca 420px) ostávalo na dlhší názov (napr. "Krémová
 * pasparta") tak málo miesta vedľa miniatúry, že sa label nemal kam
 * zalomiť a vytŕčal von z karty aj zo stránky. 2 stĺpce dajú každej karte
 * dosť miesta na 1-2 riadky textu. */
@media (max-width: 420px) {
	.wac-group--frame .wac-choices,
	.wac-group--mat .wac-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}