/**
 * BeArt Obrazy na mieru — štýly konfigurátora.
 *
 * Ručne písané CSS, žiadny build krok. Farby siahajú na dizajnové tokeny
 * témy BeArt (--beart-*) s pevným fallbackom, aby plugin fungoval vizuálne
 * prijateľne aj pod cudzou témou.
 *
 * Pozor na názvy tried: zámerne sa NEZHODUJú s pôvodnými, teraz zálohovými
 * triedami `.beart-canvas-config`, `.beart-canvas-option`, `.beart-canvas-
 * field`, `.beart-canvas-summary`, `.beart-canvas-note`, `.beart-canvas-
 * error` z motívu (assets/css/woocommerce.css) — tie sú tam nescopované
 * (bez rodičovského selektora) a keby sme ich použili znova, štýly zálohy
 * by sa nechcene miešali so štýlmi pluginu pri súčasnom behu oboch.
 *
 * @package Beart_Canvas
 */

/* --------------------------------------------------------------------------
   Koreň a rozloženie
   -------------------------------------------------------------------------- */

/*
 * Rozloženie sa riadi šírkou samotného konfigurátora (container queries),
 * nie šírkou okna prehliadača. Na stránke produktu WooCommerce vykresľuje
 * `.beart-canvas-configurator` do úzkeho stĺpca `.summary.entry-summary`
 * (nie na celú šírku okna) — media query naviazaná na viewport by teda
 * dvojstĺpcový grid spustila aj vtedy, keď má konfigurátor v skutočnosti
 * len pár stovák pixelov, a layout by sa rozpadol. `container-type:
 * inline-size` mení `.beart-canvas-configurator` na dopytovací kontajner
 * pre jeho vlastných potomkov (aj pre seba — vlastná šírka orámovania sa
 * dopytom nemení, mení sa len padding vnútri nej, takže to nie je kruhová
 * závislosť).
 */
.beart-canvas-configurator {
	--beart-canvas-warn: #b45309;
	container: beart-canvas / inline-size;
	box-sizing: border-box;
	margin: 0 0 2rem;
	padding: 1.75rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 12px;
	background: var( --beart-surface-raised, #fafafa );
	color: var( --beart-text, #111 );
	font-family: inherit;
}

.beart-canvas-configurator *,
.beart-canvas-configurator *::before,
.beart-canvas-configurator *::after {
	box-sizing: border-box;
}

/*
 * Atribút `hidden` musí fungovať aj napriek vlastným `display` pravidlám.
 * Autorský štýl (napr. `display: flex` na placeholderi náhľadu alebo
 * globálne `img { display: block }` v téme) inak prebijie UA pravidlo
 * `[hidden] { display: none }` a placeholder tak celou plochou prekrýval
 * nahranú fotografiu na 3D stene — náhľad pôsobil ako rozbitý, hoci bol
 * fotku pod ním správne vykreslený.
 */
.beart-canvas-configurator [hidden] {
	display: none;
}

.beart-canvas-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.beart-canvas-steps {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	min-width: 0;
}

/* Dva stĺpce majú zmysel až od cca 700 px šírky SAMOTNÉHO konfigurátora —
   na produkte v úzkom `.summary` stĺpci teda ostáva jeden stĺpec, aj keď
   je okno prehliadača široké. */
@container beart-canvas ( min-width: 700px ) {

	/*
	 * Živý náhľad je vľavo a je dominantný — na pravej strane je upload
	 * fotografie a ostatné voľby. Náhľad dostáva šírku cez fr jednotku,
	 * voľby majú rozumný strop, aby sa dlaždice formátov nelámali.
	 */
	.beart-canvas-columns {
		grid-template-columns: minmax( 0, 1.2fr ) minmax( 380px, 560px );
		align-items: start;
	}

	.beart-canvas-preview {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 1rem;
	}

	.beart-canvas-steps {
		grid-column: 2;
		grid-row: 1;
	}
}

.beart-canvas-block-heading {
	margin: 0 0 1.25rem;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-block-notice {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px dashed var( --beart-border, #ccc );
	border-radius: 8px;
	color: var( --beart-muted, #666 );
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Kroky — spoločné
   -------------------------------------------------------------------------- */

.beart-canvas-step,
.beart-canvas-group {
	margin: 0;
	padding: 0;
	border: 0;
}

.beart-canvas-step-title {
	margin: 0 0 0.9rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-hint {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.85rem 0 0;
	font-size: 0.88rem;
	color: var( --beart-on-surface-soft, #333 );
	cursor: pointer;
}

.beart-canvas-check input {
	width: 18px;
	height: 18px;
	accent-color: var( --beart-accent, #6d3be4 );
}

/* --------------------------------------------------------------------------
   1. Fotografia — dropzone, progres, kvalita
   -------------------------------------------------------------------------- */

.beart-canvas-dropzone {
	position: relative;
	padding: 0.85rem 1rem;
	border: 2px dashed var( --beart-border-hover, #bbb );
	border-radius: 12px;
	background: var( --beart-surface, #fff );
	transition: border-color 0.2s, background-color 0.2s, padding 0.2s;
}

.beart-canvas-dropzone.is-dragging {
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-veil, rgba( 109, 59, 228, 0.06 ) );
}

/* Po úspešnom nahratí sa zóna scvrkne — fotografiu už vidno v náhľade. */
.beart-canvas-dropzone.is-loaded {
	padding: 0.5rem 1rem;
	border-style: solid;
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-veil, rgba( 109, 59, 228, 0.06 ) );
}

.beart-canvas-dropzone-label {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	cursor: pointer;
}

.beart-canvas-dropzone-icon {
	font-size: 1.3rem;
	line-height: 1;
}

.beart-canvas-dropzone-text {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	color: var( --beart-on-surface-strong, #111 );
}

/*
 * Natívne pole na výber súboru je vizuálne skryté, no ostáva v toku
 * dokumentu — display:none alebo visibility:hidden by ho vyradili
 * z poradia tabulátora a zóna by sa nedala ovládať klávesnicou.
 * Otvára ho <label for="…">, ktorým je celá plocha zóny.
 */
.beart-canvas-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Fokus z neviditeľného poľa sa prenesie na viditeľnú zónu. */
.beart-canvas-dropzone:has( .beart-canvas-file-input:focus-visible ) {
	outline: 2px solid var( --beart-accent, #7c3aed );
	outline-offset: 3px;
}

.beart-canvas-progress {
	height: 6px;
	margin-top: 0.9rem;
	border-radius: 999px;
	background: var( --beart-surface-inset, #eee );
	overflow: hidden;
}

.beart-canvas-progress-bar {
	height: 100%;
	width: 0%;
	background: var( --beart-gradient-brand, linear-gradient( 135deg, #f6c6ee, #8b5cf6 ) );
	transition: width 0.15s linear;
}

.beart-canvas-upload-name {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	color: var( --beart-on-surface-muted, #666 );
	word-break: break-all;
}

.beart-canvas-upload-error {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --beart-signal-alert, #c2185b );
}

.beart-canvas-quality {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var( --beart-line-dashed, #ddd );
}

.beart-canvas-quality-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
}

.beart-canvas-quality-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --beart-signal-ok, #1f7a4d );
}

.beart-canvas-quality.is-good .beart-canvas-quality-dot,
.beart-canvas-quality.is-excellent .beart-canvas-quality-dot {
	background: var( --beart-signal-ok, #1f7a4d );
}

.beart-canvas-quality.is-borderline .beart-canvas-quality-dot {
	background: var( --beart-canvas-warn, #b45309 );
}

.beart-canvas-quality.is-insufficient .beart-canvas-quality-dot {
	background: var( --beart-signal-alert, #c2185b );
}

.beart-canvas-quality.is-borderline .beart-canvas-quality-line strong {
	color: var( --beart-canvas-warn, #b45309 );
}

.beart-canvas-quality.is-insufficient .beart-canvas-quality-line strong {
	color: var( --beart-signal-alert, #c2185b );
}

.beart-canvas-quality-max {
	margin: 0;
	font-size: 0.8rem;
	color: var( --beart-on-surface-muted, #666 );
}

/* Voľby pri slabej kvalite: AI zväčšenie (odporúčané) a „vytlačiť aj tak". */
.beart-canvas-quality-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 0.65rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var( --beart-line, #e4e4e4 );
	border-radius: 8px;
	font-size: 0.85rem;
	cursor: pointer;
}

.beart-canvas-quality-option[hidden] {
	display: none;
}

.beart-canvas-quality-option > span {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.beart-canvas-quality-option small {
	font-size: 0.78rem;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-quality-option input {
	flex: 0 0 auto;
	margin-top: 0.2rem;
}

.beart-canvas-quality-upscale {
	border-color: var( --beart-accent, #6d3be4 );
	background: color-mix( in srgb, var( --beart-accent, #6d3be4 ) 6%, transparent );
}

.beart-canvas-quality-upscale input {
	accent-color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-quality-price {
	color: var( --beart-accent, #6d3be4 );
	white-space: nowrap;
}

.beart-canvas-quality-ack {
	border-color: var( --beart-signal-alert, #c2185b );
	background: rgba( 194, 24, 91, 0.06 );
}

.beart-canvas-quality-ack input {
	accent-color: var( --beart-signal-alert, #c2185b );
}

/* --------------------------------------------------------------------------
   2. Rozmer — dlaždice formátov, orientácia, vlastný rozmer
   -------------------------------------------------------------------------- */

/* Mobile-first: 2 dlaždice na riadok v najužšom kontajneri, viac pribúda
   s rastúcou šírkou konfigurátora — pozri @container nižšie. */
.beart-canvas-format-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.5rem;
	margin-bottom: 1rem;
}

@container beart-canvas ( min-width: 380px ) {

	.beart-canvas-format-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@container beart-canvas ( min-width: 560px ) {

	.beart-canvas-format-grid {
		grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) );
	}
}

.beart-canvas-format-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 0.4rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 8px;
	background: var( --beart-surface, #fff );
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.beart-canvas-format-tile:hover {
	border-color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-format-tile input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.beart-canvas-format-tile:has( input:checked ) {
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-veil, rgba( 109, 59, 228, 0.06 ) );
	color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-format-tile:has( input:focus-visible ) {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

.beart-canvas-orientation {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.beart-canvas-orientation-btn {
	flex: 1 1 auto;
	padding: 0.55rem 0.75rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 999px;
	background: var( --beart-surface, #fff );
	color: var( --beart-on-surface-soft, #333 );
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.beart-canvas-orientation-btn.is-active {
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-accent, #6d3be4 );
	color: var( --beart-accent-ink, #fff );
}

.beart-canvas-orientation-btn:focus-visible,
.beart-canvas-format-tile:focus-within,
.beart-canvas-choice:focus-within {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

/* Mobile-first: šírka a výška pod sebou v najužšom kontajneri, vedľa seba
   od 360 px šírky konfigurátora — pozri @container nižšie. */
.beart-canvas-dims {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@container beart-canvas ( min-width: 360px ) {

	.beart-canvas-dims {
		grid-template-columns: 1fr 1fr;
	}
}

.beart-canvas-input {
	margin: 0;
}

.beart-canvas-input label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-input input {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 8px;
	background: var( --beart-surface, #fff );
	color: var( --beart-on-surface-strong, #111 );
	font-family: inherit;
	font-size: 1rem;
}

.beart-canvas-input input:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   3.–4. Voľby — plátno, rám, okraje, úprava, doplnky
   -------------------------------------------------------------------------- */

.beart-canvas-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.1rem;
}

.beart-canvas-choices:last-child {
	margin-bottom: 0;
}

/* Prepínač — segmentované „pills“ pre jednoznačnú voľbu (radio). */
.beart-canvas-choice {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.beart-canvas-choice--radio {
	flex: 1 1 auto;
	justify-content: center;
	padding: 0.6rem 0.9rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 999px;
	background: var( --beart-surface, #fff );
	text-align: center;
	transition: border-color 0.18s, background-color 0.18s, color 0.18s;
}

.beart-canvas-choice--radio:hover {
	border-color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-choice--radio:has( input:checked ) {
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-accent, #6d3be4 );
}

.beart-canvas-choice--radio:focus-within {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

/* Prepínač — iOS-style switch pre doplnky (checkbox). */
.beart-canvas-choice--switch {
	flex: 1 1 100%;
	gap: 0.85rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 12px;
	background: var( --beart-surface, #fff );
	transition: border-color 0.18s, background-color 0.18s;
}

.beart-canvas-choice--switch:hover {
	border-color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-choice--switch:has( input:checked ) {
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-veil, rgba( 109, 59, 228, 0.06 ) );
}

.beart-canvas-choice--switch:focus-within {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

/* Natívny input je vizuálne skrytý, ostáva v toku pre a11y aj odoslanie. */
.beart-canvas-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.beart-canvas-choice-body {
	flex: 1 1 auto;
	min-width: 0;
}

.beart-canvas-choice-name {
	font-weight: 700;
	font-size: 0.9rem;
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-choice--radio:has( input:checked ) .beart-canvas-choice-name {
	color: var( --beart-accent-ink, #fff );
}

/* Vizuálny track + thumb prepínača. */
.beart-canvas-switch {
	flex: 0 0 auto;
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var( --beart-surface-inset, #ddd );
	transition: background-color 0.18s;
}

.beart-canvas-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --beart-white, #fff );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transform: translateX( 0 );
	transition: transform 0.18s;
}

.beart-canvas-choice--switch:has( input:checked ) .beart-canvas-switch {
	background: var( --beart-accent, #6d3be4 );
}

.beart-canvas-choice--switch:has( input:checked ) .beart-canvas-switch::after {
	transform: translateX( 18px );
}

/* --------------------------------------------------------------------------
   5. Zhrnutie
   -------------------------------------------------------------------------- */

.beart-canvas-recap {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 14px;
	background:
		linear-gradient( 180deg, var( --beart-veil, rgba( 109, 59, 228, 0.05 ) ), transparent 42% ),
		var( --beart-surface-raised, #fafafa );
}

/* Chip s rozmermi — jediný „výrobný" údaj, ktorý zákazník vidí. */
.beart-canvas-recap-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	background: var( --beart-surface, #fff );
	font-size: 0.9rem;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-recap-size strong {
	font-size: 1.05rem;
	font-weight: 800;
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-recap-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-size: 0.92rem;
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-recap-row--qty input {
	width: 5rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 8px;
	background: var( --beart-surface, #fff );
	color: var( --beart-on-surface-strong, #111 );
	font-family: inherit;
}

.beart-canvas-recap-row--total {
	padding-top: 0.85rem;
	border-top: 1px dashed var( --beart-border, #ddd );
}

.beart-canvas-recap-row--total strong {
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

/* Suma s DPH — menšia, tlmená, hneď pod hlavnou sumou bez DPH. */
.beart-canvas-recap-row--tax {
	margin-top: -0.35rem;
	font-size: 0.9rem;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-recap-row--tax[hidden] {
	display: none;
}

.beart-canvas-recap-row--tax [data-beart-canvas-total-tax] {
	font-weight: 700;
	color: var( --beart-on-surface-soft, #333 );
}

.beart-canvas-alert {
	margin: 0.75rem 0 0;
	padding: 0.65rem 0.85rem;
	border-radius: 8px;
	background: rgba( 194, 24, 91, 0.08 );
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --beart-signal-alert, #c2185b );
}

.beart-canvas-configurator.is-invalid .beart-canvas-input input {
	border-color: var( --beart-signal-alert, #c2185b );
}

.beart-canvas-submit {
	margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Živý náhľad — CSS 3D rám a orez
   -------------------------------------------------------------------------- */

.beart-canvas-preview {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* Živý sumár pod náhľadom — kvalita + jedna koncová cena. */
.beart-canvas-live {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* Kvalita pod 3D náhľadom — karta so stavom (farebný pruh vľavo). */
.beart-canvas-preview > .beart-canvas-quality {
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var( --beart-line, #e4e4e4 );
	border-left: 4px solid var( --beart-signal-ok, #1f7a4d );
	border-radius: 8px;
	background: var( --beart-surface, #fff );
}

.beart-canvas-preview > .beart-canvas-quality.is-borderline {
	border-left-color: var( --beart-canvas-warn, #b45309 );
}

.beart-canvas-preview > .beart-canvas-quality.is-insufficient {
	border-left-color: var( --beart-signal-alert, #c2185b );
}

.beart-canvas-frame3d {
	/*
	 * „Stena", na ktorej obraz visí — jemne osvetlená plocha dáva
	 * tieňu kam padnúť a náhľad pôsobí ako produktová fotka, nie
	 * ako plochý obdĺžnik na bielej stránke.
	 */
	--beart-canvas-wall: #ebe8e3;
	--beart-canvas-wall-light: rgba( 255, 255, 255, 0.7 );
	perspective: 1600px;
	perspective-origin: 50% 40%;
	/* Tenšia „stena“ — obraz má byť dominantný, nie malý v strede plochy. */
	padding: clamp( 1rem, 3%, 2rem ) clamp( 1rem, 4%, 2.25rem ) clamp( 1.5rem, 4.5%, 2.5rem );
	border-radius: 10px;
	background:
		radial-gradient( ellipse 80% 70% at 35% 25%, var( --beart-canvas-wall-light ), transparent 70% ),
		linear-gradient( 180deg, var( --beart-canvas-wall ) 0%, color-mix( in srgb, var( --beart-canvas-wall ) 88%, #000 ) 100% );
}

:root[data-theme="dark"] .beart-canvas-frame3d {
	--beart-canvas-wall: #2a2830;
	--beart-canvas-wall-light: rgba( 255, 255, 255, 0.08 );
}

/*
 * Plátno je fyzický predmet a v realite je biele — v tmavom režime
 * stmavne len stena okolo neho. Čelo, placeholder a bočnice (bez fotky)
 * si preto nechajú svetlé roly zo svetlého režimu.
 */
:root[data-theme="dark"] .beart-canvas-frame3d-inner {
	--beart-surface-inset: var( --beart-paper-100, #f7f4fd );
	--beart-surface-media: var( --beart-paper-150, #f0eafb );
	--beart-on-surface-muted: var( --beart-slate-500, #57525f );
}

/*
 * Klasický 3D náhľad — náklon, aby bolo vidno hĺbku blindrámu
 * a okraje obrazu. Fotografia je na čelnej (pohľadovej) stene, bočnice
 * sa prifarbia podľa zvoleného okraja (potlač / zrkadlo / biele / čierne).
 *
 * Veľkosť steny rastie s pomerom strán (šírka = 220 px + 260 px × pomer),
 * pričom tretí výraz v min() drží výšku stopy do 620 px aj pri extrémnych
 * pomeroch (úzky na výšku). Náhľad je tak dominantný, ale nikdy sa
 * nerozpadne do neprezretelnej dĺžky.
 */
.beart-canvas-frame3d-inner {
	position: relative;
	transform-style: preserve-3d;
	/* Pohľad mierne sprava zhora — vidno pravú aj spodnú bočnicu. */
	transform: rotateY( -24deg ) rotateX( 4deg );
	max-width: min(
		100%,
		calc( 240px + var( --beart-canvas-ratio, 1 ) * 340px ),
		calc( 640px * var( --beart-canvas-ratio, 1 ) )
	);
	margin: 0 auto;
}

/*
 * Tieň na stene: zadná rovina obrazu (v hĺbke blindrámu) vrhá mäkký tieň
 * doprava dole — svetlo prichádza zľava zhora. Tieň je na zadnej rovine,
 * nie na čele, aby nestmavoval bočnice. Statický náklon nie je animácia,
 * preto platí aj pri prefers-reduced-motion.
 */
.beart-canvas-frame3d-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateZ( calc( var( --beart-canvas-depth-px, 0px ) * -1 - 1px ) );
	border-radius: 2px;
	box-shadow:
		18px 26px 38px -8px rgba( 20, 16, 12, 0.38 ),
		4px 6px 10px rgba( 20, 16, 12, 0.2 );
	pointer-events: none;
}

.beart-canvas-face {
	position: absolute;
	inset: 0;
	background: var( --beart-surface-media, #e3e3e3 );
}

.beart-canvas-face--front {
	position: relative;
	inset: auto;
	width: 100%;
	aspect-ratio: var( --beart-canvas-ratio, 1 );
	transform: translateZ( 0.5px );
	overflow: hidden;
	/* Ťahanie fotky nesmie začať výber textu ani natívny drag obrázka. */
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
	touch-action: none;
}

/*
 * Svetlo na čele: jemný lesk zľava zhora a doznievanie doprava dole +
 * sotva viditeľná väzba plátna. Nad fotkou, ale bez pointer eventov.
 */
.beart-canvas-face--front::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient( 125deg, rgba( 255, 255, 255, 0.16 ) 0%, rgba( 255, 255, 255, 0 ) 38%, rgba( 0, 0, 0, 0 ) 62%, rgba( 0, 0, 0, 0.1 ) 100% ),
		repeating-linear-gradient( 0deg, rgba( 0, 0, 0, 0.018 ) 0 1px, transparent 1px 3px ),
		repeating-linear-gradient( 90deg, rgba( 0, 0, 0, 0.018 ) 0 1px, transparent 1px 3px );
}

.beart-canvas-face--front:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 3px;
}

.beart-canvas-face--front.is-dragging {
	cursor: grabbing;
}

/*
 * Pozor na špecificitu: WooCommerce servíruje globálne pravidlo
 * `.woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }`
 * (špecificita 0,1,1), ktoré jednoduchému `.beart-canvas-crop-img` (0,1,0)
 * vzalo výšku — fotografia sa potom na čelnej stene 3D rámu zobrazila len
 * v pásiku podľa vlastného pomeru strán a náhľad pôsobil rozbitý. Zosilnený
 * selektor (0,2,0) ho spoľahlivo prebíha.
 */
.beart-canvas-face--front .beart-canvas-crop-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Rozmer aj posun nastavuje canvas.js (updateCropWindow) podľa okna orezu. */
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: 0 0;
	transition: transform 0.15s ease-out;
}

/*
 * Počas ťahania (stena aj mapa) ide fotka za kurzorom bez oneskorenia
 * a na vlastnej GPU vrstve — mení sa len transform, bitmapa sa
 * neprekresľuje (will-change len počas ťahu, nech vrstva nevisí v pamäti).
 */
.beart-canvas-configurator.is-cropping .beart-canvas-face--front .beart-canvas-crop-img {
	transition: none;
	will-change: transform;
}

@media ( prefers-reduced-motion: reduce ) {

	.beart-canvas-face--front .beart-canvas-crop-img {
		transition: none;
	}
}

.beart-canvas-face-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 1rem;
	text-align: center;
	font-size: 0.78rem;
	color: var( --beart-on-surface-muted, #777 );
	background: var( --beart-surface-inset, #eee );
}

.beart-canvas-face-placeholder span:first-child {
	font-size: 1.6rem;
}

/*
 * Bočnice: pri okraji „potlač“ a „zrkadlo“ dostanú pruh z fotografie
 * (presne ako pri skutočnej výrobe sa plátno omotá okolo rámu), biely
 * a čierny okraj zostávajú jednofarebné. `background-image` nastavuje
 * JS podľa nahranej fotografie (data URL náhľadu alebo admin-post URL).
 */
.beart-canvas-face--right {
	/* −1 px: bočnica zasahuje pod hranu čela, aby cez spoj nepresvitala stena. */
	left: calc( 100% - 1px );
	top: 0;
	width: var( --beart-canvas-depth-px, 0px );
	height: 100%;
	transform-origin: left center;
	transform: rotateY( 90deg );
	background: var( --beart-surface-media, #d8d8d8 );
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right center;
	overflow: hidden;
}

.beart-canvas-face--bottom {
	left: 0;
	top: calc( 100% - 1px );
	width: 100%;
	height: var( --beart-canvas-depth-px, 0px );
	transform-origin: top center;
	transform: rotateX( -90deg );
	background: var( --beart-surface-media, #cfcfcf );
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	overflow: hidden;
}

/*
 * Tieňovanie bočníc — odvrátené od svetla: pravá je v polotieni,
 * spodná tmavšia. Prekrytie funguje nad fotkou aj nad farbou okraja.
 */
.beart-canvas-face--right::after,
.beart-canvas-face--bottom::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.beart-canvas-face--right::after {
	background: linear-gradient( 90deg, rgba( 0, 0, 0, 0.14 ), rgba( 0, 0, 0, 0.3 ) );
}

.beart-canvas-face--bottom::after {
	background: linear-gradient( 180deg, rgba( 0, 0, 0, 0.3 ), rgba( 0, 0, 0, 0.45 ) );
}

/*
 * Zrkadlo sa prevracia NA MIESTE: scale(-1) okolo ľavej/hornej hrany
 * (transform-origin) by bočnicu vyklopil pred plátno, preto ju posun
 * o hĺbku vráti späť do pásu za hranou čela.
 */
.beart-canvas-face--right.is-edge-mirror {
	transform: rotateY( 90deg ) translateX( var( --beart-canvas-depth-px, 0px ) ) scaleX( -1 );
}

.beart-canvas-face--bottom.is-edge-mirror {
	transform: rotateX( -90deg ) translateY( var( --beart-canvas-depth-px, 0px ) ) scaleY( -1 );
}

/* Prevrátená bočnica prevráti aj tieňovanie — vrátime mu smer od hrany. */
.beart-canvas-face--right.is-edge-mirror::after {
	background: linear-gradient( 270deg, rgba( 0, 0, 0, 0.14 ), rgba( 0, 0, 0, 0.3 ) );
}

.beart-canvas-face--bottom.is-edge-mirror::after {
	background: linear-gradient( 0deg, rgba( 0, 0, 0, 0.3 ), rgba( 0, 0, 0, 0.45 ) );
}

.beart-canvas-face--right.is-edge-white,
.beart-canvas-face--bottom.is-edge-white {
	background: var( --beart-white, #fff );
}

.beart-canvas-face--right.is-edge-black,
.beart-canvas-face--bottom.is-edge-black {
	background: #000;
}

.beart-canvas-zoom {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	font-size: 0.8rem;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-zoom-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.beart-canvas-zoom-row label {
	flex: 0 0 auto;
	font-weight: 700;
}

/*
 * Posuvník priblíženia s dvoma zónami: vľavo od 100 % oddialenie (ružová),
 * vpravo priblíženie (fialová). Od značky 100 % k bežcu sa zóna vyplní
 * sýtou farbou, zvyšok ostáva svetlý. Polohy počíta canvas.js ako zlomky
 * (--beart-zoom-mark, --beart-zoom-pos); stred bežca sa pohybuje v rozsahu
 * [½ bežca, šírka − ½ bežca], preto calc s --beart-zoom-thumb.
 */
.beart-canvas-zoom-row {
	--beart-zoom-thumb: 20px;
	--beart-zoom-out: #d64bb0;
	/* Text v ružovej zóne tmavší — kontrast ≥ 4,5 : 1 na svetlom pozadí (WCAG AA). */
	--beart-zoom-out-text: #a8287f;
	--beart-zoom-out-soft: #f6d3ec;
	--beart-zoom-in: var( --beart-accent, #6d3be4 );
	--beart-zoom-in-soft: color-mix( in srgb, var( --beart-accent, #6d3be4 ) 22%, #fff );
	--beart-zoom-m: calc( var( --beart-zoom-thumb ) / 2 + ( 100% - var( --beart-zoom-thumb ) ) * var( --beart-zoom-mark, 0.3333 ) );
	--beart-zoom-p: calc( var( --beart-zoom-thumb ) / 2 + ( 100% - var( --beart-zoom-thumb ) ) * var( --beart-zoom-pos, 0.3333 ) );
}

.beart-canvas-zoom-track {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	/* Popisky stupnice sa riadia šírkou dráhy, nie okna. */
	container: beart-canvas-zoom / inline-size;
}

/*
 * Na úzkej dráhe sa „− oddialiť" a „100 %" prekrývali (značka 100 % je
 * v tretine dráhy). Pod 340 px ostanú len znamienka − a +.
 */
@container beart-canvas-zoom ( max-width: 340px ) {

	.beart-canvas-zoom-word {
		display: none;
	}

	.beart-canvas-zoom-scale {
		font-size: 0.85rem;
	}
}

/* Dotykové displeje: väčší bežec posuvníka. */
@media ( pointer: coarse ) {

	.beart-canvas-zoom-row {
		--beart-zoom-thumb: 28px;
	}

	.beart-canvas-zoom-row input[type="range"] {
		margin: 0.75rem 0;
	}

	.beart-canvas-zoom-track::before {
		top: calc( 0.75rem - 5px );
	}
}

.beart-canvas-zoom-track datalist {
	display: none;
}

.beart-canvas-zoom-row input[type="range"] {
	/* Nad značkou 100 % — značka presahuje dráhu, bežec ju prekryje. */
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 8px;
	margin: 0.4rem 0;
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background: linear-gradient( 90deg, var( --beart-zoom-out-soft ) 0 var( --beart-zoom-m ), var( --beart-zoom-in-soft ) var( --beart-zoom-m ) 100% );
}

.beart-canvas-zoom-row.is-out input[type="range"] {
	background: linear-gradient(
		90deg,
		var( --beart-zoom-out-soft ) 0 var( --beart-zoom-p ),
		var( --beart-zoom-out ) var( --beart-zoom-p ) var( --beart-zoom-m ),
		var( --beart-zoom-in-soft ) var( --beart-zoom-m ) 100%
	);
}

.beart-canvas-zoom-row.is-in input[type="range"] {
	background: linear-gradient(
		90deg,
		var( --beart-zoom-out-soft ) 0 var( --beart-zoom-m ),
		var( --beart-zoom-in ) var( --beart-zoom-m ) var( --beart-zoom-p ),
		var( --beart-zoom-in-soft ) var( --beart-zoom-p ) 100%
	);
}

.beart-canvas-zoom-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var( --beart-zoom-thumb );
	height: var( --beart-zoom-thumb );
	border: 3px solid var( --beart-white, #fff );
	border-radius: 50%;
	background: var( --beart-on-surface, #111 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
}

.beart-canvas-zoom-row input[type="range"]::-moz-range-thumb {
	width: var( --beart-zoom-thumb );
	height: var( --beart-zoom-thumb );
	box-sizing: border-box;
	border: 3px solid var( --beart-white, #fff );
	border-radius: 50%;
	background: var( --beart-on-surface, #111 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
}

.beart-canvas-zoom-row input[type="range"]::-moz-range-track {
	background: transparent;
}

.beart-canvas-zoom-row.is-out input[type="range"]::-webkit-slider-thumb {
	background: var( --beart-zoom-out );
}

.beart-canvas-zoom-row.is-out input[type="range"]::-moz-range-thumb {
	background: var( --beart-zoom-out );
}

.beart-canvas-zoom-row.is-in input[type="range"]::-webkit-slider-thumb {
	background: var( --beart-zoom-in );
}

.beart-canvas-zoom-row.is-in input[type="range"]::-moz-range-thumb {
	background: var( --beart-zoom-in );
}

.beart-canvas-zoom-row input[type="range"]:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 4px;
}

/* Značka normálnej veľkosti (100 %) na dráhe. */
.beart-canvas-zoom-track::before {
	content: "";
	position: absolute;
	top: calc( 0.4rem - 5px );
	left: var( --beart-zoom-m );
	width: 2px;
	height: 18px;
	margin-left: -1px;
	border-radius: 1px;
	background: var( --beart-on-surface, #111 );
	opacity: 0.55;
	pointer-events: none;
}

/* Stupnica pod dráhou: − oddialiť | 100 % | priblížiť + */
.beart-canvas-zoom-scale {
	position: relative;
	height: 1.1em;
	font-size: 0.7rem;
	line-height: 1.1;
	font-weight: 600;
}

.beart-canvas-zoom-scale span {
	position: absolute;
	top: 0;
	white-space: nowrap;
}

.beart-canvas-zoom-scale-out {
	left: 0;
	color: var( --beart-zoom-out-text );
}

.beart-canvas-zoom-scale-normal {
	left: var( --beart-zoom-m );
	transform: translateX( -50% );
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-zoom-scale-in {
	right: 0;
	color: var( --beart-zoom-in );
}

.beart-canvas-zoom-row.is-out output {
	color: var( --beart-zoom-out-text );
}

.beart-canvas-zoom-row.is-in output {
	color: var( --beart-zoom-in );
}

/* Hodnota priblíženia — pevná šírka, aby posuvník pri zmene čísla neposkakoval. */
.beart-canvas-zoom-row output {
	flex: 0 0 3.6em;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --beart-on-surface, #111 );
}

/* Okraje a pozadie pod mapou orezu — kompaktnejšie než v krokoch vpravo. */
.beart-canvas-zoom .beart-canvas-group {
	margin: 0;
	padding: 0;
	border: 0;
}

.beart-canvas-zoom .beart-canvas-choices {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Mapa orezu — prehľad celej fotografie s vyznačenou tlačovou oblasťou.
   Zákazník tak jasne vidí, KTORÁ časť fotografie sa dostane na obraz.
   Rám mapy drží pomer strán fotografie (JS nastavuje
   --beart-canvas-map-ratio), obrázok ho teda vyplní presne a percentá
   rámčeka sedia na skutočné súradnice.
   -------------------------------------------------------------------------- */

.beart-canvas-cropmap {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.beart-canvas-cropmap-frame {
	position: relative;
	/*
	 * Najviac 230 × 230 px pri zachovanom pomere strán: šírka sa obmedzí aj
	 * výškou (230 px × pomer), inak by vysoký „svet" pri zmenšení
	 * rozbil aspect-ratio a percentá rámčeka by nesedeli.
	 */
	width: min( 100%, 230px, calc( 230px * var( --beart-canvas-map-ratio, 1.5 ) ) );
	aspect-ratio: var( --beart-canvas-map-ratio, 1.5 );
	margin-inline: auto;
	border-radius: 5px;
	cursor: grab;
	/* Ťahanie rámovčeka nesmie scrollovať stránku (dotykové displeje). */
	touch-action: none;
	overflow: hidden;
	background: var( --beart-surface-inset, #eee );
}

.beart-canvas-cropmap-img {
	/* Poloha a rozmer podľa „sveta" mapy — nastavuje canvas.js (updateCropMap). */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	/* Pointer eventy vybavuje rámec mapy, obrázok ich nesmie „zjesť" natívnym drag-om. */
	pointer-events: none;
}

/*
 * Rámček tlačovej oblasti: biely lem + akcentová linka, okolo neho
 * jemné stmavenie zvyšku fotografie (rozsvieti presne to, čo sa tlačí).
 */
.beart-canvas-cropmap-rect {
	position: absolute;
	border: 2px solid var( --beart-white, #fff );
	outline: 2px solid var( --beart-accent, #6d3be4 );
	box-shadow: 0 0 0 2000px rgba( 9, 7, 15, 0.45 );
	pointer-events: none;
}

/* Počas ťahania rámovčeka v mape orezu. */
.beart-canvas-cropmap-frame.is-dragging {
	cursor: grabbing;
}

.beart-canvas-cropmap-caption {
	margin: 0;
	font-size: 0.76rem;
	line-height: 1.45;
	text-align: center;
	color: var( --beart-on-surface-muted, #777 );
}

/* --------------------------------------------------------------------------
   Úzky displej. Pozor: container query nevie štýlovať samotný kontajner
   (.beart-canvas-configurator), preto padding rieši media query.
   -------------------------------------------------------------------------- */

@media ( max-width: 699px ) {

	.beart-canvas-configurator {
		padding: 1rem;
		border-radius: 10px;
	}
}

/* --------------------------------------------------------------------------
   Mobilný sprievodca (.is-wizard — zapína canvas.js pod 700 px okna)

   Obaly náhľadu, krokov a priblíženia sa „rozpustia" (display: contents),
   ich deti sa stanú položkami jedného stĺpca a poradie určuje `order`:
   kroky → prilepený náhľad → aktívny krok s jeho nástrojmi. Skryté kroky
   ostávajú v DOM aj vo formulári, len sa nezobrazia.
   -------------------------------------------------------------------------- */

.beart-canvas-configurator.is-wizard .beart-canvas-columns {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.beart-canvas-configurator.is-wizard .beart-canvas-preview,
.beart-canvas-configurator.is-wizard .beart-canvas-steps,
.beart-canvas-configurator.is-wizard .beart-canvas-zoom {
	display: contents;
}

.is-wizard .beart-canvas-stepper { order: 0; }
/* Sprievodca zapnutý už v HTML (inline skript) — krokovník nečaká na canvas.js. */
.is-wizard .beart-canvas-stepper[hidden] { display: block; }
.is-wizard .beart-canvas-frame3d { order: 1; }
/* Kvalita pod obsahom kroku — tlačidlo nahrávania a voľby ostávajú hore. */
.is-wizard[data-beart-canvas-current="1"] .beart-canvas-preview > .beart-canvas-quality { order: 14; }
.is-wizard[data-beart-canvas-current="2"] .beart-canvas-preview > .beart-canvas-quality { order: 21; }
.is-wizard [data-beart-canvas-step="1"] { order: 10; }
.is-wizard .beart-canvas-zoom-row { order: 11; }
.is-wizard .beart-canvas-cropmap { order: 12; }
.is-wizard .beart-canvas-bg { order: 13; }
.is-wizard [data-beart-canvas-step="2"] { order: 20; }
.is-wizard [data-beart-canvas-step="3"] { order: 30; }
.is-wizard .beart-canvas-zoom > .beart-canvas-edges { order: 31; }
.is-wizard [data-beart-canvas-step="4"] { order: 40; }
.is-wizard .beart-canvas-live { order: 41; }

/* Vždy len aktívny krok a nástroje, ktoré k nemu patria. */
.is-wizard [data-beart-canvas-step]:not( .is-current ),
.is-wizard:not( [data-beart-canvas-current="1"] ) .beart-canvas-zoom-row,
.is-wizard:not( [data-beart-canvas-current="1"] ) .beart-canvas-cropmap,
.is-wizard:not( [data-beart-canvas-current="1"] ) .beart-canvas-bg,
.is-wizard:not( [data-beart-canvas-current="3"] ) .beart-canvas-zoom > .beart-canvas-edges,
.is-wizard:not( [data-beart-canvas-current="4"] ) .beart-canvas-live,
.is-wizard[data-beart-canvas-current="3"] .beart-canvas-preview > .beart-canvas-quality,
.is-wizard[data-beart-canvas-current="4"] .beart-canvas-preview > .beart-canvas-quality,
.is-wizard:not( .is-has-photo ) .beart-canvas-frame3d,
.is-wizard:not( .is-has-photo ) .beart-canvas-zoom-row {
	display: none;
}

/* Nadpis kroku dostáva fokus po prechode — bez rámčeka pri myši/prste. */
.beart-canvas-step-title:focus {
	outline: none;
}

.beart-canvas-step-title:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 3px;
}

/* Fotka prvá: bez nahratej fotky je nahrávanie veľké a v strede. */
.is-wizard:not( .is-has-photo ) .beart-canvas-dropzone {
	padding: 2rem 1rem;
}

.is-wizard:not( .is-has-photo ) .beart-canvas-dropzone-label {
	flex-direction: column;
	text-align: center;
}

.is-wizard:not( .is-has-photo ) .beart-canvas-dropzone-icon {
	font-size: 2rem;
}

/*
 * Prilepený náhľad: výška čela je obmedzená na ~30 % výšky okna, aby pod
 * ním ostal priestor na voľby. Šírka = výška × pomer strán obrazu.
 */
.is-wizard .beart-canvas-frame3d {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 0.6rem 0.75rem 0.9rem;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 6px 12px -8px rgba( 0, 0, 0, 0.35 );
}

.is-wizard .beart-canvas-frame3d-inner {
	/* Obraz do ~30 % výšky okna (pri 22 % mal obraz na výšku na mobile ~120 px na šírku). */
	max-width: min( 100%, calc( var( --beart-canvas-ratio, 1 ) * 30vh ) );
	max-width: min( 100%, calc( var( --beart-canvas-ratio, 1 ) * 30svh ) );
}

/* Posuvník priblíženia na celú šírku pod popisom a hodnotou. */
.is-wizard .beart-canvas-zoom-row {
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var( --beart-on-surface-muted, #666 );
}

.is-wizard .beart-canvas-zoom-row output {
	margin-left: auto;
}

.is-wizard .beart-canvas-zoom-track {
	order: 3;
	flex-basis: 100%;
}

/* Dotykové plochy ≥ 44 px. */
.is-wizard .beart-canvas-choice--radio,
.is-wizard .beart-canvas-format-tile,
.is-wizard .beart-canvas-orientation-btn,
.is-wizard .beart-canvas-choice--switch {
	min-height: 44px;
}

.is-wizard .beart-canvas-recap-row--qty input {
	min-height: 44px;
	font-size: 1rem;
}

/* Súčet ukazuje lišta — v zhrnutí posledného kroku by bol dvakrát. */
.is-wizard .beart-canvas-recap-row--total,
.is-wizard .beart-canvas-recap-row--tax {
	display: none;
}

/* Samostatný formulár (blok): odosiela sa z lišty. */
.is-wizard .beart-canvas-submit {
	display: none;
}

/* Formulár produktu: tlačidlo WooCommerce nahrádza lišta, množstvo je až v poslednom kroku. */
form.beart-canvas-has-wizard {
	padding-bottom: 4.5rem;
}

form.beart-canvas-has-wizard > .single_add_to_cart_button,
form.beart-canvas-has-wizard:not( .beart-canvas-last-step ) > .quantity {
	display: none;
}

/* Navigácia krokov. */
.beart-canvas-stepper ol {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.beart-canvas-stepper li {
	margin: 0;
	padding: 0;
}

.beart-canvas-stepper-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	width: 100%;
	min-height: 44px;
	padding: 0.35rem 0.2rem;
	border: 0;
	border-bottom: 2px solid var( --beart-border, #ddd );
	background: none;
	color: var( --beart-on-surface-muted, #666 );
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	cursor: pointer;
}

.beart-canvas-stepper-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.beart-canvas-stepper-btn.is-done {
	border-bottom-color: var( --beart-accent, #6d3be4 );
	color: var( --beart-on-surface-strong, #111 );
}

/* Text aktívneho kroku v silnej farbe — akcent na 12 px písme nedáva v tmavom režime kontrast 4,5 : 1. */
.beart-canvas-stepper-btn[aria-current="step"] {
	border-bottom-color: var( --beart-accent, #6d3be4 );
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-stepper-btn[aria-current="step"] .beart-canvas-stepper-num {
	border-color: var( --beart-accent, #6d3be4 );
	background: var( --beart-accent, #6d3be4 );
	color: var( --beart-accent-ink, #fff );
}

.beart-canvas-stepper-btn:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

/* Spodná lišta — cena a Ďalej / Do košíka. Len kým je konfigurátor na obrazovke. */
.beart-canvas-bar {
	position: fixed;
	right: 0;
	bottom: var( --bcc-banner-h, 0px );
	left: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem calc( 0.6rem + env( safe-area-inset-bottom, 0px ) );
	border-top: 1px solid var( --beart-border, #ddd );
	background: var( --beart-surface, #fff );
	box-shadow: 0 -6px 18px -10px rgba( 0, 0, 0, 0.35 );
	transform: translateY( 110% );
	transition: transform 0.2s ease-out;
}

.beart-canvas-configurator.is-in-view .beart-canvas-bar {
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {

	.beart-canvas-bar {
		transition: none;
	}
}

.beart-canvas-bar-back {
	flex: 0 0 44px;
	height: 44px;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 999px;
	background: var( --beart-surface, #fff );
	color: var( --beart-on-surface-strong, #111 );
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

/* Počítač: bez sprievodcu nie je kam ísť späť; obsah lišty v šírke stránky. */
.beart-canvas-configurator:not( .is-wizard ) .beart-canvas-bar-back {
	display: none;
}

.beart-canvas-configurator:not( .is-wizard ) .beart-canvas-bar {
	padding-inline: max( 1rem, calc( ( 100vw - 1240px ) / 2 ) );
}

.beart-canvas-bar-back:disabled {
	opacity: 0.35;
	cursor: default;
}

.beart-canvas-bar-price {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	line-height: 1.2;
}

.beart-canvas-bar-label,
.beart-canvas-bar-tax {
	font-size: 0.72rem;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-bar-price strong {
	font-size: 1.15rem;
	font-weight: 900;
	color: var( --beart-on-surface-strong, #111 );
	font-variant-numeric: tabular-nums;
}

.beart-canvas-bar-next {
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
	padding: 0.6rem 1.1rem;
	white-space: nowrap;
}

.beart-canvas-bar-back:focus-visible,
.beart-canvas-bar-next:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Cena až po nahratí fotky a výbere rozmeru — predvolený rozmer si zákazník
   nevybral a jeho cena (napr. 60 × 90 = 42,68 €) odrádzala malé rozpočty.
   `is-price-ready` nastaví JS (fotka + vlastná voľba v kroku Rozmer); bez JS
   (.is-js chýba) je cena viditeľná vždy.
   -------------------------------------------------------------------------- */
.beart-canvas-price-pending,
.beart-canvas-bar-pending {
	display: none;
}

.beart-canvas-configurator.is-js:not( .is-has-photo ) .beart-canvas-price-pending.beart-canvas-pending-photo,
.beart-canvas-configurator.is-js.is-has-photo:not( .is-price-ready ) .beart-canvas-price-pending.beart-canvas-pending-size {
	display: block;
	margin: 0.25rem 0 0;
	font-size: 0.95rem;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-configurator.is-js:not( .is-has-photo ) .beart-canvas-bar-pending.beart-canvas-pending-photo,
.beart-canvas-configurator.is-js.is-has-photo:not( .is-price-ready ) .beart-canvas-bar-pending.beart-canvas-pending-size {
	display: block;
	max-width: 12rem;
	font-size: clamp( 0.74rem, 0.55rem + 0.9vw, 0.85rem );
	font-weight: 600;
	line-height: 1.25;
	color: var( --beart-on-surface-muted, #666 );
}

.beart-canvas-configurator.is-js:not( .is-price-ready ) .beart-canvas-recap-row--total,
.beart-canvas-configurator.is-js:not( .is-price-ready ) .beart-canvas-recap-row--tax,
.beart-canvas-configurator.is-js:not( .is-price-ready ) .beart-canvas-bar-label,
.beart-canvas-configurator.is-js:not( .is-price-ready ) .beart-canvas-bar-price strong,
.beart-canvas-configurator.is-js:not( .is-price-ready ) .beart-canvas-bar-tax {
	display: none;
}

/* --------------------------------------------------------------------------
   Vzorkovník — fotka výrezu materiálu pri voľbe plátna
   Štvorec (tlačidlo) je súrodenec <label>, nie jeho potomok: klik otvorí
   väčšiu fotku a voľbu nevyberie. Bez fotky sa obal nevypíše vôbec.
   -------------------------------------------------------------------------- */

.beart-canvas-choice-item {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.beart-canvas-choice-item > .beart-canvas-choice--radio {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-height: calc( 48px + 0.9rem );
	padding-left: calc( 48px + 1.25rem );
	border-radius: 12px;
	text-align: left;
}

.beart-canvas-swatch {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc( 0.45rem + 1px );
	z-index: 1;
	width: 48px;
	height: 48px;
	margin: auto 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var( --beart-border-hover, #bbb );
	border-radius: 8px;
	background: var( --beart-surface-media, #eee );
	cursor: zoom-in;
}

.beart-canvas-swatch:hover {
	border-color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-swatch:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

/* Výrez vzorky v mierke 1 : 1 — štruktúra materiálu ostane čitateľná. */
.beart-canvas-swatch-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: none;
	object-position: center;
}

.beart-canvas-photo-dialog {
	width: min( 100% - 1.5rem, 720px );
	max-width: none;
	max-height: min( 92vh, 60rem );
	max-height: min( 92svh, 60rem );
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var( --beart-border-hover, #bbb );
	border-radius: 16px;
	background: var( --beart-surface, #fff );
	color: var( --beart-text, #111 );
	box-shadow: var( --beart-shadow-panel, 0 40px 80px rgba( 0, 0, 0, 0.25 ) );
}

.beart-canvas-photo-dialog[open] {
	animation: beart-canvas-photo-in 0.2s ease-out;
}

.beart-canvas-photo-dialog::backdrop {
	background: color-mix( in srgb, var( --beart-night-950, #0b0913 ) 55%, transparent );
}

.beart-canvas-photo-dialog[open]::backdrop {
	animation: beart-canvas-photo-fade 0.2s ease-out;
}

@keyframes beart-canvas-photo-in {
	from {
		opacity: 0;
		transform: translateY( 10px ) scale( 0.98 );
	}
}

@keyframes beart-canvas-photo-fade {
	from {
		opacity: 0;
	}
}

.beart-canvas-photo-dialog-inner {
	position: relative;
	padding: clamp( 0.75rem, 0.5rem + 1vw, 1.25rem );
}

.beart-canvas-photo-dialog-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	max-height: 70svh;
	border: 1px solid var( --beart-border, #ddd );
	border-radius: 10px;
	background: var( --beart-surface-media, #eee );
	object-fit: contain;
}

.beart-canvas-photo-dialog-close {
	position: absolute;
	top: calc( clamp( 0.75rem, 0.5rem + 1vw, 1.25rem ) + 0.5rem );
	right: calc( clamp( 0.75rem, 0.5rem + 1vw, 1.25rem ) + 0.5rem );
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var( --beart-border-hover, #bbb );
	border-radius: 999px;
	background: var( --beart-surface, #fff );
	color: var( --beart-on-surface-strong, #111 );
	cursor: pointer;
}

.beart-canvas-photo-dialog-close:hover {
	border-color: var( --beart-accent, #6d3be4 );
}

.beart-canvas-photo-dialog-close:focus-visible {
	outline: 2px solid var( --beart-accent, #6d3be4 );
	outline-offset: 2px;
}

.beart-canvas-photo-dialog-title {
	margin: 0.85rem 0 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: var( --beart-on-surface-strong, #111 );
}

.beart-canvas-photo-dialog-desc {
	margin: 0.3rem 0 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var( --beart-on-surface-soft, #333 );
}

@media ( prefers-reduced-motion: reduce ) {

	.beart-canvas-photo-dialog[open],
	.beart-canvas-photo-dialog[open]::backdrop {
		animation: none;
	}
}