/* Konfigurátor — a téma tokenjeire épül (dizájnrendszer), tartalék értékekkel. */
.mik-config {
	--mik-red: var(--red-500, #ED1C24);
	--mik-ink: var(--ink-900, #161314);
	--mik-muted: var(--text-secondary, #6B6460);
	--mik-line: var(--border-default, #DCD5CE);
	--mik-subtle: var(--border-subtle, #EAE4DE);
	--mik-paper2: var(--paper-2, #F3EEE8);
	--mik-ease: var(--ease-out, cubic-bezier(.22, .61, .36, 1));
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 48px;
	align-items: start;
	font-family: var(--font-ui, Poppins, system-ui, sans-serif);
	color: var(--mik-ink);
}
.mik-ic { flex: none; }

/* ---------- előnézet ---------- */
/* Nagy, doboz nélküli előnézet az oldal papírszínű hátterén; a bal hasáb a képernyőn marad, a szerkesztő görög. */
.mik-config__stage-col { position: sticky; top: calc(var(--header-height, 72px) + 16px); display: flex; flex-direction: column; gap: 10px; }
.mik-stage { position: relative; background: transparent; }
.mik-stage__inner { height: calc(100vh - var(--header-height, 72px) - 150px); min-height: 520px; max-height: 1100px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mik-walls { display: none !important; }
.mik-stage__zoom { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.mik-iconbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--mik-line); background: #fff; color: var(--mik-ink); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast, 120ms); }
.mik-iconbtn:hover { background: var(--mik-paper2); }

.mik-poster { position: relative; background: #fff; box-shadow: var(--shadow-frame, 0 1px 2px rgba(22,19,20,.18), 0 12px 28px rgba(22,19,20,.16), 0 28px 60px rgba(22,19,20,.10)); transition: width var(--dur-slow, 360ms) var(--mik-ease), height var(--dur-slow, 360ms) var(--mik-ease); }
.mik-poster__canvas { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mik-poster .mik-map-slot, .mik-poster .mik-map-slot.maplibregl-map { position: absolute; z-index: 1; background: #ECE9E3; }
.mik-map-slot .maplibregl-canvas { outline: none; }
.mik-map-slot .maplibregl-cooperative-gesture-screen { font-family: inherit; font-size: 13px; z-index: 5; }
.mik-pin { pointer-events: none; }

.mik-stage__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mik-walls { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--mik-muted); }
.mik-walls span { margin-right: 4px; }
.mik-wall { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 1px solid var(--mik-line); cursor: pointer; padding: 0; }
.mik-wall[aria-pressed="true"] { border-color: var(--mik-ink); box-shadow: inset 0 0 0 2px #fff; }
.mik-stage__note { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-muted, #948C86); }

.mik-gallery { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; box-sizing: border-box; }
.mik-gallery__main { max-width: 78%; max-height: 82%; object-fit: contain; box-shadow: var(--shadow-frame, 0 12px 28px rgba(22,19,20,.16)); }
.mik-gallery__thumbs { display: flex; gap: 8px; }
.mik-gallery__thumbs button { width: 52px; height: 52px; padding: 0; border: 1px solid var(--mik-line); border-radius: var(--radius-sm, 6px); overflow: hidden; cursor: pointer; background: #fff; }
.mik-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- panel ---------- */
.mik-panel { display: flex; flex-direction: column; gap: 0; margin: 0; }
.mik-sec { padding: 26px 0; border-top: 1px solid var(--mik-subtle); }
.mik-sec__title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.mik-sec__title span { font-family: var(--font-serif, 'Instrument Serif', Georgia, serif); font-weight: 400; font-size: 20px; color: var(--mik-red); }
.mik-sec__body { display: flex; flex-direction: column; gap: 16px; }
.mik-sub { font-size: 13px; font-weight: 500; margin-top: 4px; }
.mik-sub em { font-style: normal; font-weight: 400; color: var(--mik-muted); margin-left: 6px; }
.mik-group + .mik-group { padding-top: 16px; border-top: 1px dashed var(--mik-line); }
.mik-group { display: flex; flex-direction: column; gap: 12px; }
.mik-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.mik-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mik-chip { min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill, 999px); border: 1.5px solid var(--mik-line); background: #fff; color: var(--mik-ink); font: 500 14px/1 var(--font-ui, Poppins, sans-serif); cursor: pointer; transition: all var(--dur-fast, 120ms) var(--mik-ease); }
.mik-chip:hover { border-color: var(--mik-ink); }
.mik-chip[aria-pressed="true"] { background: var(--mik-ink); border-color: var(--mik-ink); color: #fff; }

.mik-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mik-swatch { flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 3px; border: 1.5px solid transparent; background: transparent; cursor: pointer; position: relative; }
.mik-swatch::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.mik-swatch[data-none]::before { background: repeating-linear-gradient(135deg, #fff 0 5px, var(--ink-100, #EAE4DE) 5px 6px); }
.mik-swatch[aria-pressed="true"] { border-color: var(--mik-ink); }

.mik-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.mik-size { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 9px 14px; border-radius: var(--radius-md, 10px); border: 1.5px solid var(--mik-line); background: #fff; color: var(--mik-ink); font: 500 14px/1.3 var(--font-ui, Poppins, sans-serif); cursor: pointer; text-align: left; }
.mik-size small { font-size: 12px; font-weight: 400; opacity: .7; font-variant-numeric: tabular-nums; }
.mik-size i { position: absolute; top: -8px; right: 8px; font: 600 10px/1 var(--font-ui, Poppins, sans-serif); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--mik-red); color: #fff; }
.mik-size:hover { border-color: var(--mik-ink); }
.mik-size[aria-pressed="true"] { background: var(--mik-ink); border-color: var(--mik-ink); color: #fff; }

.mik-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mik-field__label { font-size: 13px; font-weight: 500; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mik-field__label small { font-weight: 400; font-size: 12px; color: var(--text-muted, #948C86); }
.mik-config .mik-field input, .mik-config .mik-field textarea, .mik-config .mik-search input {
	width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border: 1px solid var(--mik-line); border-radius: var(--radius-md, 10px);
	background: #fff; color: var(--mik-ink); font: 400 15px/1.4 var(--font-ui, Poppins, sans-serif); transition: border-color var(--dur-fast, 120ms), box-shadow var(--dur-fast, 120ms);
}
.mik-field textarea { resize: vertical; }
.mik-config .mik-field input:focus, .mik-config .mik-field textarea:focus, .mik-config .mik-search input:focus { outline: none; border-color: var(--mik-ink); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(237, 28, 36, .22)); }
.mik-place { position: relative; display: flex; flex-direction: column; gap: 12px; }
.mik-search { position: relative; display: block; }
.mik-search .mik-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mik-muted); pointer-events: none; }
.mik-config .mik-search input { padding-left: 42px; }
.mik-search__results { position: absolute; z-index: 10; top: 74px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--mik-line); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-lg, 0 16px 40px rgba(22,19,20,.10)); max-height: 300px; overflow: auto; }
.mik-search__results li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.mik-search__results li .mik-ic { margin-top: 2px; color: var(--mik-red); }
.mik-search__results li:hover { background: var(--mik-paper2); }
.mik-search__results li.is-empty { color: var(--mik-muted); cursor: default; }
.mik-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.mik-switch, .mik-check { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; user-select: none; }
.mik-switch input, .mik-check input { position: absolute; opacity: 0; pointer-events: none; }
.mik-switch span { width: 40px; height: 24px; border-radius: 999px; background: var(--ink-200, #DCD5CE); position: relative; transition: background var(--dur-base, 200ms); flex: none; }
.mik-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--dur-base, 200ms) var(--mik-ease); box-shadow: var(--shadow-sm, 0 1px 2px rgba(22,19,20,.06)); }
.mik-switch input:checked + span { background: var(--mik-ink); }
.mik-switch input:checked + span::after { transform: translateX(16px); }
.mik-check span { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--ink-300, #BFB7B0); flex: none; display: grid; place-items: center; }
.mik-check input:checked + span { background: var(--mik-ink); border-color: var(--mik-ink); }
.mik-check input:checked + span::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.mik-check em { margin-left: auto; font-style: normal; color: var(--mik-muted); font-variant-numeric: tabular-nums; }
.mik-switch input:focus-visible + span, .mik-check input:focus-visible + span { box-shadow: var(--shadow-focus, 0 0 0 3px rgba(237, 28, 36, .22)); }

.mik-drop { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1.5px dashed var(--ink-300, #BFB7B0); border-radius: var(--radius-lg, 16px); background: #fff; cursor: pointer; color: var(--mik-red); transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms); }
.mik-drop:hover { border-color: var(--mik-ink); background: var(--paper, #FAF7F3); }
.mik-drop span { display: flex; flex-direction: column; gap: 2px; color: var(--mik-ink); font-size: 14px; }
.mik-drop small { color: var(--mik-muted); font-size: 12px; }
.mik-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mik-photos:empty { display: none; }
.mik-photo { position: relative; margin: 0; border-radius: var(--radius-md, 10px); overflow: hidden; background: var(--mik-paper2); }
.mik-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mik-photo figcaption { font-size: 11px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mik-photo.is-uploading img { opacity: .5; }
.mik-photo.is-error figcaption { color: var(--status-error, #A80F15); white-space: normal; }
.mik-photo button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); display: grid; place-items: center; cursor: pointer; }

/* ---------- vásárlás ---------- */
.mik-buy { display: flex; gap: 12px; align-items: center; padding-top: 26px; border-top: 1px solid var(--mik-subtle); }
.mik-qty { display: flex; align-items: center; height: 52px; border: 1.5px solid var(--mik-line); border-radius: 999px; }
.mik-qty button { width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--mik-ink); border-radius: 999px; }
.mik-qty output { min-width: 20px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.mik-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; border-radius: 999px; font: 500 15px/1 var(--font-ui, Poppins, sans-serif); cursor: pointer; transition: background var(--dur-fast, 120ms) var(--mik-ease), transform var(--dur-fast, 120ms); white-space: nowrap; text-decoration: none; }
.mik-btn--lg { height: 52px; padding: 0 28px; }
.mik-btn--primary { background: var(--mik-red); color: #fff; }
.mik-btn--primary:hover { background: var(--red-600, #D0141B); }
.mik-btn--primary:active { transform: scale(.98); background: var(--red-700, #A80F15); }
.mik-btn:disabled { background: var(--ink-100, #EAE4DE); color: var(--text-muted, #948C86); cursor: not-allowed; }
.mik-buy__btn { flex: 1; font-variant-numeric: tabular-nums; }
.mik-buy__note { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 13px; color: var(--mik-muted); }
.mik-errors { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-md, 10px); background: var(--status-error-bg, #FEF3F3); color: var(--status-error, #A80F15); font-size: 14px; }
.mik-errors p { display: flex; gap: 8px; align-items: center; margin: 4px 0; }

@media (max-width: 960px) {
	.mik-config { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.mik-stage__note { white-space: normal; }
	/* Telefonon a kép fent marad: nagyban indul, a beállításoknál kisebb sávra vált. */
	.mik-config__stage-col { position: sticky; top: var(--header-height, 64px); z-index: 6; background: var(--surface-page, #FAF7F3); padding-bottom: 6px; box-shadow: 0 10px 14px -12px rgba(22, 19, 20, .25); }
	/* A kép nagy méretben készül, kicsiben csak lekicsinyítjük (nincs újrarajzolás → azonnali, akadásmentes). */
	.mik-stage { --mik-full: max(320px, min(62vh, 120vw)); height: var(--mik-full); overflow: hidden; transition: height 220ms var(--mik-ease); }
	.mik-stage__inner { height: var(--mik-full); min-height: 0; max-height: none; transform-origin: 50% 0; transition: transform 220ms var(--mik-ease); }
	.mik-config__stage-col.is-compact .mik-stage { height: calc(var(--mik-full) * .56); cursor: pointer; }
	.mik-config__stage-col.is-compact .mik-stage__inner { transform: scale(.56); }
	/* Kicsiben csak előnézet: a térkép nem húzható (koppintásra a nagy nézet jön vissza). */
	.mik-config__stage-col.is-compact .mik-map-slot { pointer-events: none; }
	.mik-config__stage-col.is-compact .mik-stage__zoom { display: none; }
	.mik-config .mik-field input, .mik-config .mik-field textarea, .mik-config .mik-field select { min-width: 0; max-width: 100%; box-sizing: border-box; }
	.mik-config input[type="date"] { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; display: block; }
	.mik-row > * { min-width: 0; }
	/* A kicsinyítéskor a böngésző ne görgessen vissza (különben a kép újra nagyra váltana). */
	html:has(.mik-config) { overflow-anchor: none; }
	.mik-config__stage-col.is-compact .mik-stage__bar, .mik-config__stage-col.is-compact .mik-scenes { display: none; }
	.mik-config__stage-col.is-compact .mik-stage__zoom { top: 8px; right: 8px; }
	.mik-config__stage-col.is-compact .mik-maphint { display: none; }
	.mik-poster { --fw: 8px; }
}
@media (max-width: 520px) {
	.mik-row, .mik-kids { grid-template-columns: 1fr; }
	.mik-buy { position: sticky; bottom: 0; background: var(--surface-page, #FAF7F3); padding-bottom: 12px; z-index: 5; }
}

/* időcsúszka */
.mik-time output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mik-red); }
.mik-time input[type="range"] { width: 100%; accent-color: var(--mik-ink); height: 44px; }
.mik-config .mik-time input[type="range"] { border: 0; padding: 0; min-height: 0; box-shadow: none; background: transparent; }

/* útvonal-állomások */
.mik-stop__head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.mik-stop__tools { display: flex; gap: 4px; }
.mik-stop__tools .mik-iconbtn { width: 32px; height: 32px; }
.mik-stop__tools .mik-iconbtn:disabled { opacity: .35; cursor: default; }
.mik-stop-add { height: 44px; padding: 0 18px; border: 1.5px dashed var(--ink-300, #BFB7B0); background: #fff; color: var(--mik-ink); align-self: flex-start; }
.mik-stop-add:hover { border-color: var(--mik-ink); }

/* különleges kérés */
.mik-special { border: 1px solid var(--mik-line); border-radius: var(--radius-lg, 16px); background: #fff; padding: 0 16px; }
.mik-special summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 14px 0; cursor: pointer; color: var(--mik-red); }
.mik-special summary::-webkit-details-marker { display: none; }
.mik-special summary span { display: flex; flex-direction: column; color: var(--mik-ink); font-size: 14px; }
.mik-special summary small { color: var(--mik-muted); font-size: 13px; }
.mik-special[open] { padding-bottom: 14px; }
.mik-special__note { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 12px; color: var(--mik-muted); }
/* visszaolvasás, ékezetjavaslat */
.mik-readback { font-size: 12px; color: var(--mik-muted); min-height: 1em; }
.mik-hint { font-size: 13px; color: var(--status-warning, #A8660B); }
.mik-place__tip { margin: 6px 0 0; line-height: 1.4; }
.mik-place__tip.is-soft { color: var(--fg-muted, #6B6460); }
.mik-hint button, .mik-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--mik-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* „Minden stimmel?” */
.mik-errors--warn { background: var(--status-warning-bg, #FBF2E3); color: var(--mik-ink); }
.mik-errors--warn > strong { display: block; font-family: var(--font-serif, Georgia, serif); font-weight: 400; font-size: 22px; margin-bottom: 6px; }
.mik-errors--warn p { align-items: flex-start !important; color: var(--status-warning, #A8660B); }
.mik-errors--warn p span { color: var(--mik-ink); }
.mik-errors--warn p.is-strong { color: var(--status-error, #A80F15); }
.mik-errors__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.mik-errors__actions .mik-btn { height: 44px; padding: 0 20px; }
.mik-btn--ghost { background: transparent; color: var(--mik-ink); border-color: var(--mik-line); }
.mik-btn--ghost:hover { border-color: var(--mik-ink); }

/* határidők */
.mik-buy__note strong { font-weight: 600; color: var(--mik-ink); }
.mik-event { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-md, 10px); background: var(--red-50, #FEF3F3); color: var(--red-700, #A80F15); font-size: 13px; }
.mik-event span { color: var(--mik-ink); }
.mik-event--late { background: var(--status-warning-bg, #FBF2E3); color: var(--status-warning, #A8660B); }

/* keret: valódi profil, belső élárnyék (mélység a képen), fehérnél halvány kontúr */
.mik-poster { --fw: 14px; }
.mik-poster[data-frame="black"], .mik-poster[data-frame="white"] { box-shadow: none; }
.mik-poster[data-frame="black"]::after, .mik-poster[data-frame="white"]::after {
	content: ""; position: absolute; inset: calc(-1 * var(--fw)); z-index: 4; pointer-events: none;
	border: var(--fw) solid;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .14),
		inset 0 3px 9px rgba(0, 0, 0, .22),
		inset 0 -1px 3px rgba(0, 0, 0, .08),
		0 1px 2px rgba(22, 19, 20, .22), 0 12px 28px rgba(22, 19, 20, .20), 0 28px 60px rgba(22, 19, 20, .12);
}
.mik-poster[data-frame="black"]::after { border-image: linear-gradient(135deg, #34302d 0%, #1b1918 45%, #0f0e0d 100%) 1; }
.mik-poster[data-frame="white"]::after {
	border-image: linear-gradient(135deg, #ffffff 0%, #f6f4f1 55%, #e7e3de 100%) 1;
	outline: 1px solid rgba(22, 19, 20, .16);
}

/* szatén szalag masnival (csomagolás-előnézet) */
.mik-ribbon { position: absolute; inset: calc(-1 * var(--fw) - 1px); z-index: 5; pointer-events: none; container-type: size; opacity: 0; transform: scale(1.02); transition: opacity var(--dur-slow, 360ms) var(--mik-ease), transform var(--dur-slow, 360ms) var(--mik-ease); }
.mik-ribbon.is-on { opacity: 1; transform: none; }
.mik-poster[data-frame="none"] .mik-ribbon { inset: -1px; }
.mik-ribbon__v, .mik-ribbon__h { position: absolute; box-shadow: 0 1px 4px rgba(60, 0, 4, .35); }
.mik-ribbon__v { top: 0; bottom: 0; left: 68%; width: 5.2cqw; background: linear-gradient(90deg, #8f0b13, #d81b24 22%, #ff6b70 46%, #e3262f 58%, #a80f15 85%, #7e0b10); }
.mik-ribbon__h { left: 0; right: 0; top: 60%; height: 5.2cqw; background: linear-gradient(180deg, #8f0b13, #d81b24 22%, #ff6b70 46%, #e3262f 58%, #a80f15 85%, #7e0b10); }
.mik-ribbon__bow { position: absolute; left: calc(68% + 2.6cqw); top: calc(60% + 2.6cqw); width: 34cqw; height: auto; transform: translate(-50%, -47%); filter: drop-shadow(0 3px 5px rgba(40, 0, 3, .35)); }

/* térkép-súgó */
.mik-maphint { position: absolute; left: 16px; top: 16px; right: 64px; z-index: 6; display: flex; gap: 10px; align-items: flex-start; max-width: 340px; padding: 10px 14px; border-radius: var(--radius-md, 10px); background: rgba(22, 19, 20, .86); color: #fff; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-md, 0 4px 16px rgba(22,19,20,.07)); transition: opacity var(--dur-slow, 360ms), transform var(--dur-slow, 360ms); pointer-events: none; }
.mik-maphint strong { font-weight: 600; }
.mik-maphint .mik-ic { flex: none; margin-top: 1px; color: var(--red-300, #F48A8D); }
.mik-maphint.is-gone { opacity: 0; transform: translateY(-6px); }

/* virágválasztó */
.mik-flowers { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.mik-flower { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1.5px solid var(--mik-line); border-radius: var(--radius-md, 10px); background: #fff; cursor: pointer; font: 500 12px var(--font-ui, Poppins, sans-serif); color: var(--mik-ink); }
.mik-flower img { width: 100%; height: 44px; object-fit: contain; }
.mik-flower[aria-pressed="true"] { border-color: var(--mik-ink); box-shadow: inset 0 0 0 1px var(--mik-ink); }

/* Mobilon lebegő „Előnézet” / „Vissza a beállításokhoz” gomb (configurator.js → initPeek). */
.mik-stage { scroll-margin-top: 84px; }
.mik-peek { position: fixed; left: 50%; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--mik-ink, #161314); color: #fff; font: 600 15px/1 var(--font-sans, 'Josefin Sans', sans-serif); letter-spacing: .01em; box-shadow: 0 10px 28px rgba(22, 19, 20, .28); cursor: pointer; animation: mik-peek-in var(--dur-base, 240ms) var(--mik-ease, ease) both; }
.mik-peek[hidden] { display: none; }
.mik-peek svg { flex: none; }
.mik-peek:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(237, 28, 36, .35), 0 10px 28px rgba(22, 19, 20, .28); }
@keyframes mik-peek-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .mik-peek { animation: none; } }

.mik-listrow .mik-stop__head strong { font-size: 13px; }


/* „Így mutat a falon” — valódi szobafotók a termékkel, nagyítható */
.mik-scenes { margin-top: 18px; }
.mik-scenes__title { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--text-muted, #948C86); letter-spacing: .02em; }
.mik-scenes__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mik-scenes__item { padding: 0; border: 0; border-radius: var(--radius-md, 10px); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--paper-2, #F1ECE6); }
.mik-scenes__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, 360ms) var(--mik-ease, ease); }
.mik-scenes__item:hover img { transform: scale(1.04); }
.mik-lightbox { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
.mik-lightbox::backdrop { background: rgba(22, 19, 20, .82); }
.mik-lightbox img { display: block; max-width: min(1200px, 94vw); max-height: 92vh; border-radius: 12px; }
.mik-lightbox__close, .mik-lightbox__nav { position: absolute; border: 0; background: rgba(255, 255, 255, .92); color: #161314; border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; font: 400 28px/1 sans-serif; }
.mik-lightbox__close { top: -14px; right: -14px; }
.mik-lightbox__nav { top: 50%; transform: translateY(-50%); }
.mik-lightbox__nav[data-step="-1"] { left: 12px; }
.mik-lightbox__nav[data-step="1"] { right: 12px; }
/* Asztali nézetben az előnézet, a falszín-sor és a falfotók együtt kiférnek a képernyőre (a hasáb „ragad”). */
@media (min-width: 961px) {
	.mik-config__stage-col:has(.mik-scenes) .mik-stage__inner { height: clamp(380px, calc(100vh - 380px), 620px); min-height: 0; }
	.mik-scenes { margin-top: 2px; }
	.mik-scenes__row { grid-template-columns: repeat(3, 1fr); }
	.mik-scenes__item { aspect-ratio: 3 / 2; }
}

/* ---------- Szerkesztési útmutató (az előnézet alatt + „Így szerkeszd” párbeszédablak) ---------- */
.mik-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mik-help__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md, 10px); background: #fff; border: 1px solid var(--mik-subtle); font-size: 12.5px; line-height: 1.35; color: var(--mik-muted); }
.mik-help__item > .mik-ic { color: var(--mik-red); margin-top: 1px; }
.mik-help__item strong { display: block; color: var(--mik-ink); font-weight: 600; font-size: 13px; margin-bottom: 1px; }
.mik-only-mob { display: none; }
.mik-stage__bar .mik-stage__note { display: none; }
.mik-helpbtn { position: absolute; left: 12px; top: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--mik-ink); color: #fff; font: 600 13px/1 var(--font-ui, Poppins, sans-serif); cursor: pointer; box-shadow: 0 6px 18px rgba(22, 19, 20, .2); }
.mik-helpbtn:hover { background: #000; }
.mik-maphint { display: none !important; }
.mik-helpdlg { border: 0; padding: 0; background: transparent; max-width: min(560px, 92vw); }
.mik-helpdlg::backdrop { background: rgba(22, 19, 20, .55); }
.mik-helpdlg__box { position: relative; background: var(--surface-page, #FAF7F3); border-radius: 18px; padding: 28px 28px 24px; font-family: var(--font-ui, Poppins, sans-serif); color: var(--mik-ink); box-shadow: 0 24px 60px rgba(22, 19, 20, .3); }
.mik-helpdlg h2 { margin: 0 0 16px; font-family: var(--font-serif, 'Instrument Serif', serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.mik-helpdlg ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mik-helpdlg li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--mik-muted); }
.mik-helpdlg li > .mik-ic { color: var(--mik-red); flex: none; margin-top: 2px; }
.mik-helpdlg li strong { color: var(--mik-ink); }
.mik-helpdlg__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--mik-ink); }
@media (max-width: 960px) {
	.mik-only-desk { display: none; }
	.mik-only-mob { display: inline; }
	.mik-help { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.mik-help__item { padding: 8px 10px; font-size: 12px; }
	.mik-config__stage-col.is-compact .mik-help { display: none; }
	.mik-config__stage-col.is-compact .mik-helpbtn { top: 8px; left: 8px; padding: 6px 10px; font-size: 12px; }
}
.mik-helpdlg .mik-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--red-500, #ED1C24); color: #fff; font: 600 15px/1 var(--font-ui, Poppins, sans-serif); cursor: pointer; }
.mik-helpdlg .mik-btn:hover { background: var(--red-600, #C8141B); }

/* ---------- Mobil (2026-10): eszközsor a kép alatt, vékony ragadós csík, teljes képernyős előnézet, lépések ---------- */
.mik-tools, .mik-steps, .mik-stage__expand, .mik-stage__done, .mik-stepbar__back, .mik-stepbar__next { display: none; }
html.mik-noscroll, html.mik-noscroll body { overflow: hidden; }
@media (max-width: 960px) {
	/* A négy súgókártya helyett egy sor: tipp + „Így szerkeszd” + nagyítás. A lebegő gombok nem takarják a képet. */
	.mik-help, .mik-helpbtn, .mik-stage__zoom, .mik-stage__bar { display: none !important; }
	.mik-tools { display: flex; align-items: center; gap: 10px; padding: 8px 2px 4px; min-height: 44px; }
	.mik-tools__tip { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; font-size: 12.5px; line-height: 1.3; color: var(--mik-muted); }
	.mik-tools__tip .mik-ic { display: none; }
	.mik-config.is-touched .mik-tools__tip { visibility: hidden; }
	.mik-tools__help { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border: 1px solid var(--mik-line); border-radius: 999px; background: #fff; color: var(--mik-ink); font: 600 12.5px/1 var(--font-ui, Poppins, sans-serif); cursor: pointer; }
	.mik-tools__zoom { flex: none; display: flex; gap: 6px; }
	.mik-tools__zoom[hidden] { display: none; }
	.mik-tools .mik-iconbtn { width: 38px; height: 38px; }

	/* Nagy nézet: a poszter kitölti a helyet, nincs doboz körülötte. */
	.mik-config__stage-col { padding-bottom: 0; box-shadow: none; }
	.mik-stage { --mik-full: max(290px, min(48vh, 108vw)); }
	/* A kép széle levágná a nagy árnyékot (éles szélű „doboz” látszana): mobilon kisebb árnyék. */
	.mik-poster { box-shadow: 0 1px 2px rgba(22, 19, 20, .18), 0 6px 14px rgba(22, 19, 20, .16); }
	.mik-poster[data-frame="black"]::after, .mik-poster[data-frame="white"]::after {
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), inset 0 3px 9px rgba(0, 0, 0, .22), inset 0 -1px 3px rgba(0, 0, 0, .08),
			0 1px 2px rgba(22, 19, 20, .22), 0 6px 12px rgba(22, 19, 20, .18);
	}

	/* Görgetés közben: vékony csík, a poszter a csík teljes magasságában. */
	.mik-config__stage-col.is-compact { box-shadow: 0 1px 0 var(--mik-subtle), 0 10px 16px -14px rgba(22, 19, 20, .35); }
	.mik-config__stage-col.is-compact .mik-stage { height: var(--mik-strip, 200px); }
	.mik-config__stage-col.is-compact .mik-stage__inner { transform: scale(var(--mik-k, .4)); }
	.mik-config__stage-col.is-compact .mik-tools { display: none; }
	.mik-config__stage-col.is-compact .mik-stage__expand { display: inline-flex; position: absolute; right: 10px; bottom: 10px; z-index: 4; align-items: center; gap: 5px; padding: 7px 11px; border: 0; border-radius: 999px; background: rgba(22, 19, 20, .78); color: #fff; font: 600 12px/1 var(--font-ui, Poppins, sans-serif); cursor: pointer; }

	/* Teljes képernyős előnézet: itt a térkép húzható, nagyítható. */
	.mik-config__stage-col.is-full { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--surface-page, #FAF7F3); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); box-shadow: none; }
	.mik-config__stage-col.is-full .mik-stage { --mik-full: calc(100dvh - 110px); height: var(--mik-full); cursor: default; }
	.mik-config__stage-col.is-full .mik-stage__inner { transform: none; }
	.mik-config__stage-col.is-full .mik-map-slot { pointer-events: auto; }
	.mik-config__stage-col.is-full .mik-tools { display: flex; }
	.mik-config__stage-col.is-full .mik-stage__expand, .mik-config__stage-col.is-full .mik-scenes { display: none; }
	.mik-config__stage-col.is-full .mik-stage__done { display: inline-flex; position: absolute; top: 0; right: 0; z-index: 5; height: 40px; padding: 0 20px; }

	/* Lépések: egyszerre egy szakasz. */
	.mik-config.is-steps .mik-steps { display: block; margin: 4px -16px 6px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
	.mik-config.is-steps .mik-steps::-webkit-scrollbar { display: none; }
	.mik-steps__list { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 6px; }
	.mik-steps__list button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 5px; border: 1px solid var(--mik-line); border-radius: 999px; background: #fff; color: var(--mik-muted); font: 500 13px/1 var(--font-ui, Poppins, sans-serif); white-space: nowrap; cursor: pointer; }
	.mik-steps__list b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mik-paper2); color: var(--mik-ink); font-size: 12px; font-weight: 600; }
	.mik-steps__list button[aria-current="step"] { border-color: var(--mik-ink); color: var(--mik-ink); font-weight: 600; }
	.mik-steps__list button[aria-current="step"] b { background: var(--mik-ink); color: #fff; }
	.mik-steps__list button.is-done b { background: var(--green-600, #1E7A4F); color: #fff; }
	.mik-config.is-steps .mik-sec { display: none; }
	.mik-config.is-steps .mik-sec.is-active { display: block; border-top: 0; padding-top: 14px; }

	/* Alsó sáv: „‹” vissza + „Tovább: …” (ár), az utolsó lépésben mennyiség + kosár. */
	.mik-buy { position: sticky; bottom: 0; z-index: 5; background: var(--surface-page, #FAF7F3); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); gap: 10px; box-shadow: 0 -10px 16px -14px rgba(22, 19, 20, .3); }
	.mik-config.is-steps .mik-buy:not(.is-last) .mik-qty, .mik-config.is-steps .mik-buy:not(.is-last) .mik-buy__btn { display: none; }
	.mik-config.is-steps .mik-stepbar__back:not([hidden]) { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1.5px solid var(--mik-line); border-radius: 50%; background: #fff; color: var(--mik-ink); cursor: pointer; }
	.mik-config.is-steps .mik-stepbar__next:not([hidden]) { display: inline-flex; flex: 1; flex-direction: column; gap: 3px; height: 56px; padding: 0 18px; }
	.mik-stepbar__label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
	.mik-stepbar__price { font-size: 12px; font-weight: 400; opacity: .85; font-variant-numeric: tabular-nums; }
	.mik-config.is-steps .mik-buy.is-last .mik-qty { flex: none; height: 52px; }
	.mik-config.is-steps .mik-buy.is-last .mik-qty button { width: 34px; }
	.mik-config.is-steps .mik-buy.is-last .mik-buy__btn { min-width: 0; padding: 0 14px; font-size: 14.5px; }
	/* A szakasz címe a lépésgombon már látszik. */
	.mik-config.is-steps .mik-sec__title { display: none; }
	/* Rövid lépésnél is alul legyen a sáv: a lépés kitölti a csík és a sáv közti helyet. */
	.mik-config.is-steps .mik-sec.is-active { min-height: max(32vh, calc(100svh - var(--mik-strip, 200px) - 260px)); }
}

/* Szerveroldali váz (a konfigurátor betöltéséig): a minta képe a helyén, kerettel. */
.mik-ssr__poster { display: block; max-width: 88%; max-height: 92%; box-shadow: 0 1px 2px rgba(22,19,20,.18), 0 12px 28px rgba(22,19,20,.16); background: #fff; line-height: 0; }
.mik-ssr__poster img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - var(--header-height, 72px) - 220px); }
.mik-ssr__poster--black { border: 14px solid #1B1918; border-color: #34302D #1B1918 #0F0E0D #252220; }
@media (max-width: 960px) {
	.mik-ssr__poster img { max-height: calc(var(--mik-full, 48vh) - 30px); }
	.mik-ssr .mik-stage { height: auto; }
	.mik-ssr .mik-stage__inner { height: max(290px, min(48vh, 108vw)); }
	.mik-ssr__poster--black { border-width: 8px; }
}