.photobook-wrap {
	/* align-self:stretch + width:100% (2026-07-23 élő hibajavítás) — a
	 * Betheme #Wrapper eleme display:flex, flex-direction:column,
	 * align-items:center a szülő szinten, ami a get_header()/get_footer()
	 * közé ékelt tartalmat (mint ezt a div-et) flex-itemként kezeli:
	 * enélkül a div a saját tartalom-méretére zsugorodik és align-items:
	 * center miatt középre igazítva, de NEM a max-width-ig kitöltve
	 * jelenik meg — innen a "teljesen össze van nyomva" hatás. Az
	 * align-self:stretch felülírja ezt csak erre az elemre, utána a
	 * max-width+margin:auto megint normálisan központoz egy teljes
	 * szélességű blokk-elemként.
	 */
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	font-family: inherit;
	color: #222;
}

/* A szerkesztő a teljes oldalt töltse ki (2026-07-23-i explicit kérés) —
   felülírja a fenti általános max-width-et csak erre az oldalra. */
.photobook-editor-wrap {
	max-width: none;
	padding-left: 24px;
	padding-right: 24px;
}

.photobook-status-wrap {
	text-align: center;
	padding-top: 80px;
}

.photobook-header,
.photobook-editor-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.photobook-back {
	text-decoration: none;
	color: #2f6fed;
	font-weight: 600;
}

.photobook-editor-topbar-actions {
	display: flex;
	gap: 8px;
}

/* Könyv elnevezése (2026-07-24-i explicit kérés) — visszafogott, "kattints
   az átíráshoz" jellegű mező: nincs látható keret nyugalmi állapotban,
   csak fókuszban/hoverben jelenik meg a finom szegély, hogy ne törje meg a
   topbar letisztultságát. border-radius a DESIGN_GUIDE 4-8px skálájából. */
.photobook-book-name-input {
	flex: 1 1 240px;
	max-width: 420px;
	text-align: center;
	border: 1px solid transparent;
	background: transparent;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 15px;
	font-weight: 600;
	color: #1d2327;
}

.photobook-book-name-input:hover {
	border-color: #dcdcde;
	background: #f7f7f7;
}

.photobook-book-name-input:focus {
	outline: none;
	border-color: #c3c4c7;
	background: #fff;
}

/* Asztali nézeten a "Kép-beállítások" konténer láthatatlan wrapper marad —
   a névmező + a 3 gomb pontosan úgy viselkedik, mint korábban (közvetlen
   flex-gyerekei a topbar-nak), a mobil összecsukás (l. media query lentebb)
   nem érinti a desktop elrendezést. */
.photobook-editor-topbar-collapsible {
	display: contents;
}

/* Jobbra igazított, közös csoport a 2 ikon-gombnak (2026-07-26-i
   pontosítás: "a két gomb kerüljön egymás mellé a jobb felső sarokba") —
   `margin-left:auto` tolja a csoportot a topbar jobb szélére, függetlenül
   attól, hogy a köztük lévő `.photobook-editor-topbar-collapsible` (l.
   lentebb) mennyi helyet foglal/hol tör sorba mobilon. */
.photobook-topbar-icon-group {
	display: flex;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Fülbe/topbar-ba illő, négyzetes ikon-gombok (2026-07-26-i explicit
   kérés: topbar-összecsukás + teljes képernyő) — a DESIGN_GUIDE "TILOS
   ovális gombok" szabálya miatt lekerekített NÉGYZET (width=height), nem
   pill/kör. Asztali nézeten a toggle-gomb elrejtve (l. mobil media query),
   a teljes képernyő gomb viszont mindenhol látszik.
   2026-07-26-i hibajavítás (élő teszten talált, teljesen üres/ikon
   nélküli gombok): a Betheme téma globális `button` resetje (kb.
   `padding: 13px 40px`, l. ugyanez a probléma a .photobook-preview-nav-nál
   fentebb) felülírta a szélességet/magasságot/paddingot, az SVG-t pedig
   0 szélességre lapította — mindkettőt explicit `!important`-tel kellett
   visszaállítani. */
.photobook-topbar-toggle-btn,
.photobook-fullscreen-btn {
	display: none;
	box-sizing: border-box;
	padding: 0 !important;
	width: 34px !important;
	height: 34px !important;
	align-items: center;
	justify-content: center;
	background: #eee;
	color: #222;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
}

.photobook-topbar-toggle-btn svg,
.photobook-fullscreen-btn svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
}

.photobook-fullscreen-btn {
	display: inline-flex;
}

.photobook-topbar-toggle-btn svg {
	transition: transform .15s ease;
}

.photobook-topbar-toggle-btn[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.photobook-fullscreen-icon-compress {
	display: none;
}

.photobook-fullscreen-btn[aria-pressed="true"] .photobook-fullscreen-icon-expand {
	display: none;
}

.photobook-fullscreen-btn[aria-pressed="true"] .photobook-fullscreen-icon-compress {
	display: block;
}

.photobook-fullscreen-btn[hidden] {
	display: none;
}

/* A Fullscreen API az elemet a normál elrendezésből kiemelve, a KÉPERNYŐ
   méretére nyújtja — a böngésző alap (fekete) hátterét fehérre váltjuk, és
   biztosítjuk, hogy a tartalom görgethető maradjon, ha magasabb, mint a
   képernyő. */
.photobook-editor-wrap:fullscreen,
.photobook-editor-wrap:-webkit-full-screen {
	background: #fff;
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	padding: 16px;
	box-sizing: border-box;
}

/* Egyszerű modal-overlay a formátum-váltáshoz (2026-07-24-i explicit
   kérés) — nem használ semmilyen külső dialógus-könyvtárat, csak egy
   teljes képernyős, sötétített háttér + középre igazított kártya. */
.photobook-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 24px;
}

.photobook-modal-overlay[hidden] {
	display: none;
}

.photobook-modal {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	max-width: 480px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
}

/* 2026-07-24-i explicit kérés: "Formátum módosítása... old meg, hogy
   kompakt nézete legyen" — a lapozható (kategória/anyag/méret) 3-lépéses
   szerkezet a 220px-es nagy kártyákkal csak egy szélesebb modálban fér el
   túlzott görgetés nélkül, mint az eredeti, egyetlen listás elrendezés. */
.photobook-modal--wide {
	max-width: 720px;
}

.photobook-modal--wide .photobook-wizard-steps {
	margin-bottom: 12px;
}

.photobook-modal h3 {
	margin-top: 0;
}

.photobook-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.photobook-modal-error {
	color: #c0392b;
	font-size: 13px;
}

.photobook-modal-error[hidden] {
	display: none;
}

.photobook-format-option.is-disabled,
.photobook-cover-option.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* "Minta" teljes képernyős lapozó (2026-07-24-i explicit kérés) — minden
   szerkesztő-vezérlő eltűnik, csak a lapozás + kilépés + megosztás marad.
   Vízszintesen ÉS függőlegesen is középre igazítva, a teljes ablakot
   kihasználva (sem a Betheme fejléc/lábléc, sem a szerkesztő sávjai nem
   látszanak — position:fixed, a dokumentum-folyam fölött). Ugyanez a
   markup/CSS szolgálja ki a bejelentkezés NÉLKÜLI, tokenes megosztott
   linket is (l. Front\EditorController render_public_preview()) — a
   köztük lévő egyetlen különbség, hogy ott nincs "Kilépés" gomb (nincs
   hova visszalépni). */
.photobook-preview-overlay {
	position: fixed;
	inset: 0;
	background: #1b1b1b;
	/* Nagyobb, mint a WordPress admin-sáv (#wpadminbar, z-index:99999) —
	   ha a fotós/admin bejelentkezve nézi a mintát, a sáv se lógjon át
	   rajta ("Teljes oldalt használja ki" — 2026-07-24-i explicit kérés). */
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.photobook-preview-overlay[hidden] {
	display: none;
}

.photobook-preview-topbar {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
}

.photobook-preview-topbar-btn {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	cursor: pointer;
	/* display:inline-block — a "Kilépés" mostantól <a> (nem <button>,
	   l. render_public_preview() 2026-07-27-i docblokkja), ami
	   alapértelmezetten display:inline, ezért explicit kell, hogy a
	   padding/háttér ugyanúgy nézzen ki, mint a "Megosztás" <button>-nél,
	   ÉS ne legyen aláhúzva/kék. */
	display: inline-block;
	text-decoration: none;
}

.photobook-preview-topbar-btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* Középre igazított cím a Minta fölött (2026-07-24-i explicit kérés):
   "{könyv neve} - Minta könyv". Önálló, abszolút pozicionált sáv — nem a
   topbar flex-sorába illesztve, hogy a bal/jobb gombok mellett mindig
   valóban középen maradjon, függetlenül a gombszövegek hosszától. */
.photobook-preview-title {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX( -50% );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 37px;
	z-index: 2;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

.photobook-preview-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 2200px;
	padding: 72px 96px;
	box-sizing: border-box;
}

.photobook-preview-card {
	position: absolute;
	inset: 0;
	margin: auto;
	width: -moz-max-content;
	width: max-content;
	height: -moz-max-content;
	height: max-content;
	max-width: 100%;
	max-height: 100%;
	backface-visibility: hidden;
	transition: transform 0.6s cubic-bezier( 0.45, 0.05, 0.15, 1 );
}

.photobook-preview-card .photobook-cover-unit,
.photobook-preview-card .photobook-spread-unit,
.photobook-preview-half .photobook-cover-unit,
.photobook-preview-half .photobook-spread-unit,
.photobook-preview-flip-face .photobook-cover-unit,
.photobook-preview-flip-face .photobook-spread-unit {
	border: none;
	padding: 0;
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.5 );
	background: #fff;
}

/* Valós lap-áthajtás (2026-07-24-i explicit kérés: "ne egyben forduljon
   át, hanem középen elválasztva csak a jobb/bal oldala, mintha tényleg
   egy lapot áthajtanának") — l. flipPreview()/renderHalfCardInto() a
   render_editor_script()/render_public_preview() JS-ében.
   .photobook-preview-half: a NEM forduló fél ideiglenes, fagyott
   pillanatképe (a lent már teljes egészében az ÚJ oldalpárt mutató
   previewCards fölött, hogy az még ne "ugorjon át" idő előtt).
   .photobook-preview-flip: a forduló fél, elülső (régi) + hátulsó (új,
   előre 180°-kal elforgatva) laptesttel — a szülő .photobook-preview-
   stage már eleve ad perspective-et. */
.photobook-preview-half {
	position: absolute;
	z-index: 2;
	overflow: hidden;
}

.photobook-preview-flip {
	position: absolute;
	z-index: 3;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier( 0.45, 0.05, 0.15, 1 );
}

.photobook-preview-flip-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
}

.photobook-preview-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	border: none;
	border-radius: 50%;
	/* box-sizing + padding:0 + !important a width/height-en: a Betheme
	   téma globális `button` resetje (var(--mfn-button-padding), kb.
	   0 40px) különben ovális alakúra nyújtja ezt a gombot (2026-07-24-i
	   explicit kérés: TILOS ovális gomb — l. DESIGN_GUIDE.md). Csak akkor
	   marad valódi KÖR, ha szélesség PONTOSAN egyenlő a magassággal. */
	box-sizing: border-box;
	padding: 0;
	width: 52px !important;
	height: 52px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.photobook-preview-nav:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.photobook-preview-nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.photobook-preview-nav-prev {
	left: 16px;
}

.photobook-preview-nav-next {
	right: 16px;
}

.photobook-preview-toast {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 255, 255, 255, 0.92 );
	color: #222;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.photobook-preview-toast.is-visible {
	opacity: 1;
}

.photobook-muted {
	color: #777;
	font-size: 14px;
}

.photobook-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
}

.photobook-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border: 1px solid #eee;
	border-radius: 8px;
}

.photobook-list-item-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.photobook-status {
	display: block;
	font-size: 13px;
	color: #777;
}

.photobook-status-locked {
	color: #2f8b2f;
	font-weight: 600;
}

.photobook-btn {
	background: #2f6fed;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.photobook-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.photobook-btn[hidden] {
	display: none;
}

.photobook-btn-secondary.is-active {
	background: #cfe8cf;
	color: #1f5c1f;
}

.photobook-btn-secondary {
	background: #eee;
	color: #222;
}

.photobook-btn-link {
	background: none;
	border: none;
	color: #2f6fed;
	cursor: pointer;
	font-size: 13px;
	padding: 4px 8px;
}

.photobook-format-list,
.photobook-cover-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
}

.photobook-format-option {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* 2026-07-24-i explicit kérés: "a méretösszehasonlító képeket tölsd fel a
   méretekhez borító képnek" — a méret-választó sorokon egy kis
   arányhű (object-fit:contain, NEM cover — az összehasonlító rajz
   arányai maguk hordozzák az információt) méret-kép. */
.photobook-format-option img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 4px;
	cursor: zoom-in;
	flex-shrink: 0;
}

/* 2026-07-24-i explicit kérés: "nagy borítókép jelenjen meg, és a rövid
   leírás a kép alatt... egységes méretű kártyákon" — a kategória (1.
   lépés) ÉS a borító-anyag (2. lépés) választó UGYANEZT a nagy, függőleges
   kártya-elrendezést kapja (csak a kategória kap leírást is a kép alatt). */
.photobook-cover-option {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	gap: 8px;
	cursor: pointer;
	width: 220px;
	min-height: 300px;
}

.photobook-cover-option:has( input:checked ) {
	border-color: #2f6fed;
	box-shadow: 0 0 0 2px rgba( 47, 111, 237, .25 );
}

.photobook-cover-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* 2026-07-24-i explicit kérés: "a kártyákon mindig fix méretet adj a
   képeknek! Legyen négyzetes elrendezésű és ha a kép más oldalarányú
   akkor zoomolj bele, hogy kitöltse" — a kép-terület MINDIG pontosan
   1:1 négyzet, MINDEN lépésnél (kategória/anyag/méret) egységesen
   object-fit: cover-rel kitöltve, eltérő oldalarányú képnél a felesleg
   levágva. FONTOS: `aspect-ratio: 1/1` kell `height: 220px` HELYETT —
   a `width: 100%` a szülő PADDOLT tartalom-dobozához igazodik (kb.
   192px a 14px paddinggel), egy fix 220px magassággal ez nem lett
   volna négyzet (192×220), csak véletlenül tűnt annak. A méret-
   összehasonlító rajzok időközben már eleve négyzet vászonra
   készülnek, így ezeknél nincs tényleges vágás. */
.photobook-cover-option img,
.photobook-cover-option-noimg {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	background: #f0f0f0;
}

.photobook-cover-option-name {
	font-weight: 600;
}

.photobook-cover-option-desc {
	font-size: 12px;
	color: #666;
	line-height: 1.4;
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.photobook-format-price {
	margin-left: auto;
	font-weight: 600;
}

.photobook-cover-option .photobook-format-price {
	margin-left: 0;
	margin-top: auto;
}

.photobook-cover-option img {
	cursor: zoom-in;
}

/* 2026-07-24-i explicit kérés: "szeretném ha a borító anyagokat tagolni
   tudnánk anyagok szerint egy kategórián belül" — ugyanaz a lekerekített
   négyzet gomb-minta, mint a matrica-/layout-kategória szűrőké (l.
   .photobook-sticker-cat-btn), NEM pill/ovális. */
.photobook-wizard-group-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 12px;
}

.photobook-wizard-group-btn {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 5px 12px;
	font-size: 12px;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.photobook-wizard-group-btn.is-active {
	background: #2f6fed;
	border-color: #2f6fed;
	color: #fff;
}

/* 2026-07-24-i explicit kérés: "ha nagyíthatóak lennének a képek" —
   egyszerű lightbox-overlay a kategória/borító-anyag kártyák képéhez. */
.photobook-zoom-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .85 );
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.photobook-zoom-overlay[hidden] {
	display: none;
}

.photobook-zoom-overlay img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 6px;
	object-fit: contain;
}

.photobook-zoom-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	border: none;
	background: rgba( 255, 255, 255, .15 );
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.photobook-price {
	font-size: 20px;
	font-weight: 700;
}

.photobook-price-line {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.photobook-info-wrap {
	position: relative;
	display: inline-flex;
}

.photobook-info-btn {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #999;
	background: #fff;
	color: #666;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.photobook-info-tooltip {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	margin-top: 6px;
	width: 220px;
	background: #333;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 6px;
	z-index: 20;
	text-align: left;
}

.photobook-info-tooltip[hidden] {
	display: none;
}

/* 2026-07-28-i explicit kérés: "ez nem egymás alatt jelenne meg, hanem
   slider szerűen 3 lépésből lehetne kiválasztani és oda vissza lépni" —
   4-lépéses (kategória/anyag/méret/elnevezés+összesítő) step-manager. */
.photobook-wizard-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

.photobook-wizard-step {
	padding: 6px 14px;
	border-radius: 6px;
	background: #eee;
	color: #666;
	font-size: 13px;
	font-weight: 600;
}

.photobook-wizard-step.is-active {
	background: #2f6fed;
	color: #fff;
}

/* Sticky Vissza/Tovább (2026-07-23, user kérése: "ha valaki felül
 * kiválasztja a borítót, nem lesz egyértelmű, hogy le kéne görgetni") —
 * ugyanaz a `position: sticky` minta, mint a matrica-/elrendezés-fül
 * kategória-szűrőinél (.photobook-sticker-cat-filter/.photobook-layout-
 * cat-filter), csak a lap ALJÁHOZ rögzítve: rövid panelnél (kevés
 * borító-opció) simán a tartalom alatt marad, hosszú listánál viszont a
 * viewport aljához "ragad", amint a görgetés elérné — sosem kell
 * lekeresni a gombot. Átlátszatlan háttér + felső árnyék, hogy a mögötte
 * elgörgő tartalom ne "átfolyó" hatást keltsen. */
.photobook-wizard-nav {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	position: sticky;
	bottom: 0;
	z-index: 3;
	background: #fff;
	padding: 12px 0;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

.photobook-wizard-summary p {
	margin: 4px 0;
}

.photobook-editor-body {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
}

/* Egy oszlop, teljes szélességben kitöltő képek (2026-07-23-i explicit
   kérés: "elég egy oszlop, de azt töltse ki teljesen egy kép") — a
   szélesség kb. a korábbi 2-oszlopos elrendezés teljes helyét foglalja
   el, hogy a fel nem használt képek jól felismerhetők legyenek
   drag-and-drop előtt. */
/* 2026-07-28-i explicit kérés ("saját kép feltöltése") óta a sticky/
   szélesség/max-height szabályok a WRAPPER-re kerültek (l. lentebb), hogy
   a feltöltés-gomb a kép-lista TETEJÉN, sosem elgörgetve maradjon —
   .photobook-sidebar maga csak a belső, saját overflow-y-t kapó lista. */
.photobook-sidebar-col {
	width: 280px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 80vh;
	position: sticky;
	top: 16px;
}

.photobook-sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Szürke, teljes szélességű gomb (2026-07-28-i explicit kérés: "Szürke
   gomb... Teljes szélességben") — szögletes/lekerekített, NEM ovális
   (l. [[feedback_no_oval_buttons]]). */
.photobook-upload-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #eee;
	color: #222;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	cursor: pointer;
	flex-shrink: 0;
}

.photobook-upload-btn:hover {
	background: #e2e2e2;
}

/* Vékony, kék folyamatjelző (2026-07-29-i explicit kérés) — csak
   feltöltés közben látszik, l. JS uploadNextFile(). */
.photobook-upload-progress {
	width: 100%;
	height: 3px;
	background: #e2e2e2;
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
}

.photobook-upload-progress-fill {
	height: 100%;
	width: 0%;
	background: #2f6fed;
}

.photobook-upload-status {
	font-size: 12px;
	color: #b02a2a;
	background: #fdeaea;
	border: 1px solid #f3c6c6;
	border-radius: 6px;
	padding: 8px 10px;
	flex-shrink: 0;
}

.photobook-sidebar-item {
	position: relative;
}

.photobook-sidebar-thumb {
	width: 100%;
	height: 210px;
	object-fit: cover;
	border-radius: 6px;
	cursor: grab;
	border: 1px solid #ddd;
}

/**
 * 2026-07-27-i VALÓS, SAJÁT HIBA-JAVÍTÁS: a `-webkit-user-drag:none` a
 * fenti `.photobook-sidebar-thumb`-on ELŐZŐLEG feltétel NÉLKÜL (minden
 * viewporton) szerepelt — ez a tulajdonság Chrome/Blink alatt IS
 * ténylegesen letiltja a natív HTML5 drag-and-drop INDÍTÁSÁT, teljesen
 * FÜGGETLENÜL a `draggable` attribútumtól (l. renderSidebar() JS-e,
 * ami MOST már mindig `true`-ra állítja) — ez törte el a DESKTOP
 * drag-and-drop-ot, amit a user jelzett ("sem húzni, sem kattintva
 * több képet hozzáadni nem tudok... húzás nem működik"). A védelem
 * (Android tableten talált "hiába húzom rá" hiba — a <img> elemek
 * natívan húzhatók/kimenthetők mobil böngészőkben, függetlenül a
 * `draggable`-től) csak ÉRINTÉS-ELSŐDLEGES eszközön indokolt — a
 * `(pointer: coarse)` media feature-be zárva MOST már NEM érinti a
 * desktop egeres/trackpados (akár érintőképernyős hibrid) gépeket,
 * ahol a valódi drag-and-drop-nak működnie KELL.
 */
@media (pointer: coarse) {
	.photobook-sidebar-thumb {
		-webkit-user-drag: none;
		-webkit-touch-callout: none;
		user-select: none;
	}
}

/* Saját kép törlése (2026-07-30-i explicit kérés: "NE használ ovális
   gombot... cseréld le pirosra a bal oldali menüben a képeknél") —
   lekerekített NÉGYZET, l. [[feedback_no_oval_buttons]]. Élő teszttel
   kiderült, hogy a Betheme globális `button` alapstílusa `min-width`-et
   ad minden gombra, ami a mi 26px width-ünket felülírva egy 80×26px-es,
   ténylegesen OVÁLIS alakot eredményezett — ugyanaz a csapda, mint a
   "Minta" lapozó nyíl-gombjainál (l. [[project_dev_kaloczi_wp_architecture]]
   Fázis 4 jegyzete) — ezért itt is explicit `!important`-tel kell
   felülírni. */
.photobook-sidebar-delete-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	padding: 0 !important;
	border-radius: 5px;
	border: none;
	background: rgba(214, 54, 56, 0.9);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.photobook-sidebar-delete-btn:hover {
	background: #d63638;
}

.photobook-sidebar-delete-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* 2026-07-24-i explicit kérés: ha minden kiválasztott kép már a könyvben
   van, a sidebar ne legyen üres — szürke helykitöltő "Nincs beszúrható
   kép" felirattal, l. EditorController.php renderSidebar(). */
.photobook-sidebar-empty {
	width: 100%;
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #ccc;
	color: #666;
	border-radius: 6px;
	border: 1px solid #bbb;
	font-size: 13px;
	padding: 12px;
}

/**
 * ---------- "Képek"/"Vendégkönyv" váltó a bal oldali sávban ----------
 * 2026-07-27-i explicit kérés: "a bal oldali képsávnál lenne egy képek és
 * egy vendégkönyv ikon, így lehetne váltani közöttük" — a meglévő
 * `.photobook-tab`/`is-active` mintát követi (szögletes/lekerekített, NEM
 * ovális, l. [[feedback_no_oval_buttons]]), csak itt egy 2-elemű,
 * összezárt sávként, a képek/matrica ikon-stílushoz igazítva.
 */
.photobook-sidebar-source-toggle {
	display: flex;
	flex-shrink: 0;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
}

.photobook-sidebar-source-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
	color: #666;
	border: none;
	padding: 8px 0;
	cursor: pointer;
}

/* Az ikon (és a benne lévő path-ok) SOSE lehessen a tényleges kattintás/
   koppintás célpontja — mindig a gombra magára landoljon az esemény,
   érintőképernyőn is (2026-07-27-i élő hiba: a user szerint a váltó
   gombok nem reagáltak). */
.photobook-sidebar-source-btn svg {
	pointer-events: none;
}

.photobook-sidebar-source-btn:not(:first-child) {
	border-left: 1px solid #ddd;
}

.photobook-sidebar-source-btn.is-active {
	background: #222;
	color: #fff;
}

.photobook-guestbook-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.photobook-guestbook-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 10px 12px;
	text-align: left;
	cursor: pointer;
}

.photobook-guestbook-item:hover {
	background: #f7f7f7;
	border-color: #ccc;
}

.photobook-guestbook-item-author {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #999;
}

.photobook-guestbook-item-text {
	font-size: 13px;
	line-height: 1.4;
	color: #222;
	white-space: pre-wrap;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* Egyszerre csak EGY oldal/oldalpár látható (2026-07-23-i explicit kérés)
   — ez kapja a rendelkezésre álló hely nagy részét. */
.photobook-active-unit {
	flex: 1 1 auto;
	min-width: 280px;
	/* Biztonsági háló a JS sizeActiveUnit()-je mellé (2026-07-23-i élő hiba:
	   a munkaterület túllógott a monitoron, csak legörgetve látszott az
	   alja) — a testvér .photobook-sidebar/.photobook-layout-picker
	   oszlopok már eddig is kaptak max-height+overflow-t, csak ez az
	   oszlop nem. Ha a JS-számítás bármiért mégis kicsit alábecsülné a
	   helyet, ez az oszlop kapjon saját görgetősávot ahelyett, hogy az
	   egész oldalt lejjebb tolná. */
	max-height: 80vh;
	overflow-y: auto;
}

.photobook-cover-unit,
.photobook-spread-unit {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 12px;
}

/* A nagy, aktív nézetben a borító/oldalpár a RENDELKEZÉSRE ÁLLÓ HELYET
   TELJES EGÉSZÉBEN kitölti (2026-07-23-i explicit kérés: "használjuk ki
   teljesen a teret") — a tényleges max-width-et JS számolja ki
   futásidőben (l. Front\EditorController render_editor_script()
   sizeActiveUnit()-je), ami a rendelkezésre álló SZÉLESSÉGET ÉS a
   viewport-magasságot is figyelembe veszi, hogy a lap se oldalra, se
   függőlegesen ne lógjon túl. Az itt megadott 100% csak a JS lefutása
   előtti/nélküli fallback. A filmstrip-thumbnailekben (lentebb) ugyanezek
   az osztályok sokkal kisebbre vannak felülírva. */
.photobook-active-unit .photobook-cover-unit,
.photobook-active-unit .photobook-spread-unit {
	max-width: 100%;
	margin: 0 auto;
}

.photobook-unit-title {
	font-weight: 600;
	margin-bottom: 8px;
	text-align: center;
}

/* "Kifutó" kapcsoló (2026-07-28-i explicit kérés, majd 2026-07-29-i
   pontosítás: "ne belül legyen kitöltve színnel, hanem a keret... az
   legyen zöld ami tényleg leesik, ne a kép közepe") — NEM egy beltéri
   %-os border-rel behúzott, belül tintázott doboz (a CSS border-width
   %-ban amúgy sem megbízható minden böngészőben), hanem 4 db, egyenként
   %-ban pozicionált "csík" (fent/lent/bal/jobb), amik EGYÜTT adják ki a
   kifutó-keretet — csak EZEK a csíkok (a ténylegesen levágásra kerülő
   szél) kapnak halványzöld kitöltést, középen (a látható, megmaradó
   tartalom fölött) semmi. */
.photobook-bleed-overlay {
	position: absolute;
	pointer-events: none;
	background: rgba(143, 217, 143, 0.55);
	z-index: 5;
}

.photobook-unit-canvas {
	position: relative;
	width: 100%;
	/* Fehér, nem szürke — a slotok közötti gutter (l. .photobook-slot
	   box-sizing:border-box + JS GUTTER_PX padding) ezen a háttéren át
	   látszik "fehér keretként" a képek között (2026-07-23-i explicit
	   kérés), az üres slot-placeholder csíkozása (#eee/#f7f7f7) pedig
	   ez ellen a fehér ellen marad jól látható. */
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
}

/* Felül (vagy alul) megjelenő filmszalag a könyv lapjairól (2026-07-23-i
   explicit kérés) — a már betöltött képekkel, üres slotokkal az üres
   lapokon. Nem interaktív (nincs drag/zoom/forgatás rajta), csak
   miniatűr + kattintható navigáció. */
.photobook-filmstrip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 8px 4px 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.photobook-filmstrip-thumb {
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
	text-align: center;
	opacity: 0.7;
}

.photobook-filmstrip-thumb:hover,
.photobook-filmstrip-thumb.is-active {
	opacity: 1;
}

/* Oldalpár-törlés a filmszalagon (2026-07-24-i explicit kérés: "az
   oldalra ráhúzott egérrel jelenjen meg a jobb felső sarokban" — a
   régi, az aktív nézet alatti szöveges "Oldalpár törlése" link helyett).
   Ugyanaz a szürke kör + fehér X, mint a képek .photobook-slot-remove
   gombja — csak hoverre látszik, a borítón sosincs (nem törölhető). */
.photobook-filmstrip-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	z-index: 4;
}

.photobook-filmstrip-thumb:hover .photobook-filmstrip-remove {
	opacity: 1;
	visibility: visible;
}

.photobook-filmstrip-thumb.is-active .photobook-cover-unit,
.photobook-filmstrip-thumb.is-active .photobook-spread-unit {
	border-color: #2f6fed;
	box-shadow: 0 0 0 1px #2f6fed;
}

.photobook-filmstrip-thumb .photobook-cover-unit {
	width: 50px;
	padding: 0;
	border-width: 1px;
}

.photobook-filmstrip-thumb .photobook-spread-unit {
	width: 100px;
	padding: 0;
	border-width: 1px;
}

.photobook-filmstrip-thumb .photobook-unit-canvas {
	border-radius: 2px;
}

.photobook-filmstrip-label {
	font-size: 11px;
	color: #777;
	margin-top: 2px;
}

/* A hajtás/gerinc vonala — csak oldalpároknál, a kép szabadon átívelhet
   rajta (2026-07-23-i explicit kérés: "középen egy vékony szaggatott
   csík jelölje a hajtást"). pointer-events:none, hogy sose blokkolja a
   drag-and-drop-ot vagy a slot-kattintásokat alatta. */
.photobook-fold-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed #999;
	pointer-events: none;
	z-index: 2;
}

.photobook-slot {
	position: absolute;
	overflow: hidden;
	/* box-sizing:border-box, hogy a JS-ből beállított gutter-padding
	   (l. renderUnitInto() GUTTER_PX-e) a MEGADOTT width/height-ból
	   vonódjon le, ne ahhoz adódjon hozzá — így a szomszédos slotok
	   x/y/w/h%-a (a LayoutCatalog geometriája) változatlan marad, csak
	   a slot belseje kap fehér keretet a szürke box körül. */
	box-sizing: border-box;
	/* Explicit rétegsorrend (2026-07-24-i explicit kérés: "a szöveg
	   mindig a kép fölött kerüljön") — a DOM-sorrend már eddig is ezt
	   adta (l. renderUnitInto()), de egy explicit z-index függetleníti
	   ezt bármilyen jövőbeli DOM-sorrend-változástól. */
	z-index: 1;
}

/* Kép-csere kijelölés (2026-07-24-i explicit kérés) — a "forrás" slot,
   amit a felhasználó a csere-ikonnal (akár a lapon lévő másikkal, akár a
   könyvtárból) kijelölt, amíg a cél (másik slot, vagy a sidebar egy képe)
   ki nem választódik. PIROS (2026-07-24-i follow-up: "a kék keret is
   lehetne piros") — ugyanaz a szín, mint a lenti "válassz másik képet"
   sáv, hogy a két elem egyértelműen összetartozzon. */
.photobook-slot.is-swap-source {
	outline: 3px solid #d63638;
	outline-offset: -3px;
	z-index: 5;
}

.photobook-slot-empty {
	background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f7f7f7 10px, #f7f7f7 20px);
	border: 1px dashed #ccc;
}

/* Előzéklap-egység zárolt (borító felőli) fele — a szerkeszthető felétől
   ELTÉRŐ csíkozással jelzi, hogy ez a rész szándékosan üres marad, a
   magyarázó szöveg (2026-07-27-i explicit kérés: "a felhívó üzenetet
   közvetlen arra a lapra tedd rá ami nem szerkeszthető") KÖZVETLENÜL ide
   kerül, nem a jobb oldali fül-panelre. pointer-events:none, hogy a
   canvasEl saját drop-kezelője alatta is működjön (l. renderUnitInto()
   docblokkja). Csak a szerkesztőben jelenik meg (options.showLockHint) —
   a publikus "Minta" nézet ezt sosem kapja, mert ott a valós, üres
   nyomtatott oldalt kell mutatni. */
.photobook-endpaper-lock {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10%;
	box-sizing: border-box;
	background: repeating-linear-gradient(-45deg, #f6f6f6, #f6f6f6 10px, #fbfbfb 10px, #fbfbfb 20px);
	pointer-events: none;
	z-index: 1;
}

.photobook-endpaper-lock-text {
	font-size: 12px;
	color: #999;
	line-height: 1.4;
}

/* A filmszalag-miniatűrökön a szöveg úgysem olvasható (l. renderUnitInto()
   options.interactive ága, ott nem is kerül bele span), csak a csíkozás
   marad — kisebb belső margóval, hogy a keskeny sávban ne törjön furán. */
.photobook-filmstrip-thumb .photobook-endpaper-lock {
	padding: 4%;
}

.photobook-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Szabad kép-méretezés/mozgatás/forgatás (2026-07-23-i explicit kérés) —
   az imgbox az "ablak" (overflow:hidden, a slot méretén), a benne lévő
   <img> mérete/eltolása/forgatása mindig JS-ből (inline style) érkezik,
   l. Front\EditorController render_editor_script()-jének
   renderImageInSlot()-ja. left:50%/top:50% + a JS translate(-50%,-50%)
   együtt centrálja az <img>-et, mielőtt a tényleges eltolás/forgatás
   ráépülne. */
.photobook-slot-imgbox {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: grab;
}

.photobook-slot-imgbox:active {
	cursor: grabbing;
}

.photobook-slot .photobook-slot-imgbox img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	height: auto;
	max-width: none;
	object-fit: fill;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* Forgatás/törlés gombok egy kis kluszterben, a slot jobb felső
   sarkában — MINDEGYIK tökéletes kör (2026-07-23-i explicit kérés: "a
   törlés gomb ne legyen ovális, kör alakot használjunk"): box-sizing:
   border-box + padding:0 + flex-centrált tartalom garantálja, hogy a
   megadott width/height ténylegesen egyenlő kör legyen, függetlenül a
   böngésző alapértelmezett gomb-paddingjétől. */
/* Csak az egérrel épp felette lévő slotnál látszik (2026-07-23-i explicit
   kérés: "mindig csak azon a képen jelenjen meg... a többinél legyen
   rejtve") — opacity+visibility (nem display:none), hogy a gombok
   tranzíció nélkül is azonnal kattinthatók legyenek, mihelyt látszanak,
   és hogy a fókusz (billentyűzet-navigáció) is elő tudja hozni őket. */
.photobook-slot-controls {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 152px;
	gap: 4px;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.photobook-slot:hover .photobook-slot-controls,
.photobook-slot:focus-within .photobook-slot-controls,
.photobook-free-el:hover .photobook-slot-controls,
.photobook-free-el.is-selected .photobook-slot-controls {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Kép-slot vezérlők, NÉGY sarokba rendezve (2026-07-24-i explicit kérés:
   "kezdjük el átrendezni a képek vezérlő ikonjait" — bal-fent: nagyítás/
   forgatás, jobb-fent: csere a könyvtárból + törlés, jobb-lent: csere a
   lapon lévő másikkal, bal-lent: tükrözés). Külön osztály a szöveg/
   matrica elemek MEGLÉVŐ .photobook-slot-controls klaszterétől (az
   változatlan marad), csak a kép-slotokra vonatkozik. */
.photobook-slot-corner {
	position: absolute;
	display: flex;
	gap: 4px;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.photobook-slot-corner-tl { top: 4px; left: 4px; }
.photobook-slot-corner-tr { top: 4px; right: 4px; }
.photobook-slot-corner-br { bottom: 4px; right: 4px; }
.photobook-slot-corner-bl { bottom: 4px; left: 4px; }

.photobook-slot:hover .photobook-slot-corner,
.photobook-slot:focus-within .photobook-slot-corner {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Szabadon pozícionálható elemek (Fázis 2: szöveg + matrica,
   2026-07-24-i explicit kérés) — a layout-slotoktól FÜGGETLENÜL, a
   .photobook-unit-canvas közvetlen gyermekeként, ugyanabban a
   százalékos x/y/w/h koordináta-rendszerben, mint a slotok. Húzható
   (mousedown → megosztott dragState, l. render_editor_script() JS-e),
   forgatható/törölhető a slotokéval azonos hover-gombokkal
   (.photobook-slot-controls újrafelhasználva). */
.photobook-free-el {
	position: absolute;
	box-sizing: border-box;
	cursor: grab;
	/* l. .photobook-slot z-index-jének kommentje — a szöveg/matrica
	   mindig a kép-slotok FÖLÖTT jelenjen meg (2026-07-24-i explicit
	   kérés). */
	z-index: 2;
}

.photobook-free-el.is-selected {
	outline: 2px dashed #2f6fed;
	outline-offset: 2px;
}

.photobook-text-content {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	white-space: pre-wrap;
	word-break: break-word;
	line-height: 1.25;
	user-select: none;
}

.photobook-sticker-el img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Szövegdoboz átméretező fogantyú (2026-07-24-i explicit kérés) — kis
   lekerekített négyzet a jobb-alsó sarokban (NEM kör/ovális, l.
   DESIGN_GUIDE.md "TILOS az ovális forma"), csak hoverben/kijelöléskor
   látszik, ugyanazzal a mintával, mint a .photobook-slot-controls. */
.photobook-text-resize-handle {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 2px solid #2f6fed;
	border-radius: 3px;
	cursor: nwse-resize;
	opacity: 0;
	visibility: hidden;
	box-sizing: border-box;
}

.photobook-free-el:hover .photobook-text-resize-handle,
.photobook-free-el.is-selected .photobook-text-resize-handle,
.photobook-slot:hover .photobook-text-resize-handle,
.photobook-slot:focus-within .photobook-text-resize-handle {
	opacity: 1;
	visibility: visible;
}

/* "Matrica" fül — a photobook_stickers admin-katalógus rácsa, kattintásra
   az aktív oldalra kerül az adott matrica (2026-07-24-i explicit kérés). */
/* Egy oszlop (2026-07-24-i explicit kérés: a 2-oszlopos rács nem fért ki
   rendesen a 180px-es jobb oldali sávban) — a matrica-elemek így teljes
   szélességben, jól látható méretben jelennek meg. */
.photobook-sticker-lib-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.photobook-sticker-lib-item {
	position: relative;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 6px;
	background: #fff;
	cursor: pointer;
	text-align: center;
}

/* Kedvenc-jelölő csillag (2026-07-25-i explicit kérés: "nem én akarom
   elmenteni [adminként], hanem az ügyfél tudja a szerkesztő felületen,
   hogy később könnyebben megtalálja őket") — PER-VIEWER állapot, az
   ügyfél saját maga állítja be a szerkesztőben, l.
   toggleStickerFavorite(). Szögletes/lekerekített, NEM kör/ovális gomb —
   l. DESIGN_GUIDE.md "TILOS az ovális forma". */
.photobook-sticker-lib-favorite-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	padding: 0;
	line-height: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #ccc;
	font-size: 13px;
	cursor: pointer;
}

.photobook-sticker-lib-favorite-btn.is-active {
	color: #fff;
	background: #dba617;
	border-color: #dba617;
}

.photobook-sticker-lib-item:hover {
	border-color: #2f6fed;
}

.photobook-sticker-lib-item img {
	width: 100%;
	height: 56px;
	object-fit: contain;
	display: block;
}

.photobook-sticker-lib-name {
	font-size: 11px;
	color: #777;
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "Matrica" fül kategória-szűrője (2026-07-24-i explicit kérés: pl.
   "Borító sablon", "Szív alak" szerinti szűrés) — a ténylegesen létező
   kategóriákból épül fel kliens-oldalon, l. EditorController.php
   renderStickerCategoryFilter(). Sticky (2026-07-26-i follow-up: "kértem,
   hogy matricáknál a kategóriák ne görgetődjenek el, fixen legyenek fent
   rögzítve" — ez a szabály korábban CSAK az admin Matricák oldal saját
   szűrőjére volt alkalmazva, az ügyfél-szerkesztő ezen a fülön eddig
   NEM volt sticky) — a szülő .photobook-tab-panel a saját görgető
   konténere (overflow-y:auto), ahhoz képest ragad a tetejéhez. */
.photobook-sticker-cat-filter {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px 0 10px;
}

.photobook-sticker-cat-btn {
	border: 1px solid #ddd;
	/* Lekerekített négyzet, NEM pill/ovális (l. DESIGN_GUIDE.md "TILOS
	   az ovális forma") — korábban border-radius:999px volt, ami egy
	   változó szélességű, fix magasságú gombon pontosan a tiltott
	   pill-alakot adta. */
	border-radius: 5px;
	padding: 4px 10px;
	font-size: 11px;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.photobook-sticker-cat-btn.is-active {
	background: #2f6fed;
	border-color: #2f6fed;
	color: #fff;
}

/* "Elrendezés" fül kategória-szűrője (2026-07-26-i explicit kérés:
   "szeretném ha a layoutok között is lennének kategóriák... Ugyan ezt
   kérem a layout kategóriáknál is [ti. sticky]") — ugyanaz a minta/
   stílus, mint a matrica-kategória-szűrőé. */
.photobook-layout-cat-filter {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px 0 10px;
}

.photobook-layout-cat-btn {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 4px 10px;
	font-size: 11px;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.photobook-layout-cat-btn.is-active {
	background: #2f6fed;
	border-color: #2f6fed;
	color: #fff;
}

/* "Szöveg" fül — vagy egy "+ Szöveg hozzáadása" gomb (nincs kijelölt
   szövegdoboz), vagy a kijelölt szövegdoboz stílus-szerkesztője. */
/* Szöveg-rétegek listája (2026-07-24-i explicit kérés) — az aktív
   oldalpár összes szövegdoboza, kattinthatóan. */
.photobook-text-layer-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 10px 0;
}

.photobook-text-layer-item {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 12px;
	color: #444;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.photobook-text-layer-item:hover {
	border-color: #bbb;
}

.photobook-text-layer-item.is-active {
	border-color: #2f6fed;
	color: #2f6fed;
	box-shadow: 0 0 0 1px #2f6fed;
}

.photobook-text-editor textarea {
	width: 100%;
	min-height: 90px;
	box-sizing: border-box;
	resize: vertical;
	font-family: inherit;
	margin-bottom: 10px;
}

.photobook-text-editor-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.photobook-text-editor-row label {
	font-size: 12px;
	color: #555;
	display: flex;
	align-items: center;
	gap: 4px;
}

.photobook-text-editor-row input[type="number"] {
	width: 56px;
}

/* Élő betűtípus-minta (2026-07-24-i explicit kérés: "jó lenne ha minta
   szöveget is mutatna amin látszik a felirat") — egy magyar pangram a
   kiválasztott fonttal renderelve, hogy a vásárló a saját szövege
   begépelése előtt is lássa, hogyan fest. */
.photobook-font-preview {
	font-size: 20px;
	line-height: 1.3;
	padding: 10px 12px;
	margin-bottom: 10px;
	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	word-break: break-word;
}

.photobook-align-buttons {
	display: flex;
	gap: 4px;
}

.photobook-align-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.photobook-align-btn.is-active {
	border-color: #2f6fed;
	color: #2f6fed;
}

.photobook-slot-remove,
.photobook-slot-rotate,
.photobook-slot-zoom,
.photobook-slot-mirror,
.photobook-slot-replace,
.photobook-slot-swap {
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Jobb oldali grafikus layout-választó (2026-07-23-i explicit kérés):
   fehér hátterű, szürke négyzetekkel jelölt stilizált rajzok minden, az
   aktív egységhez (borító vagy egy adott oldalpár) illő elrendezéshez. */
/* Saját, független görgetés (2026-07-24-i explicit kérés: "ne a könyv
   lapjával együtt gördüljön... olyan legyen mint a bal oldali kép
   választó") — ugyanaz a max-height+overflow-y:auto+sticky minta, mint
   a .photobook-sidebar-é, hogy sok elrendezés-variánsnál a lista saját
   magában görgessen, ne az egész oldalt nyújtsa meg. */
.photobook-layout-picker {
	width: 180px;
	flex-shrink: 0;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 16px;
}

.photobook-layout-picker h3 {
	font-size: 14px;
	margin: 0 0 12px;
}

/* 4-tagolású ikon-sor: Kép/Elrendezés/Szöveg/Matrica (2026-07-24-i
   explicit kérés) — MINDIG látszik, nem görgethető el, csak a panel-
   tartalom cserélődik alatta.
   2026-07-26-i pontosítás ("túl magas... kb az 1/4 mérete legyen, a
   felszabadult helyet a képeknek/elrendezésnek/szövegnek/matricáknak
   adjuk"): az `aspect-ratio:1/1` korábban NÉGYZETRE nyújtotta a
   gombokat (a szélesség kb. 87px volt 4 oszlopban egy 375px-es mobilon,
   tehát a gomb is kb. 87px MAGAS lett) — ehelyett most egy fix, alacsony
   magasság (40px, kb. a minimális megbízható érintési célméret), a
   szélesség marad flex:1-es, azaz széles-alacsony sáv lesz négyzet
   helyett. Ez asztali NÉZETEN IS érvényes (nem csak mobilon), mert ott is
   ugyanez a `.photobook-tab` osztály okozta a túl magas sávot. */
.photobook-tabbar {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
	flex-shrink: 0;
}

.photobook-tab {
	flex: 1 1 0;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #555;
	cursor: pointer;
	padding: 0;
}

.photobook-tab svg {
	width: 18px;
	height: 18px;
}

.photobook-tab:hover {
	border-color: #bbb;
}

.photobook-tab.is-active {
	border-color: #2f6fed;
	color: #2f6fed;
	box-shadow: 0 0 0 1px #2f6fed;
}

/* Minden panel (Elrendezés/Szöveg/Matrica) SAJÁT görgetést kap
   (2026-07-24-i explicit kérés: "ne a könyv lapjával együtt gördüljön...
   olyan legyen mint a bal oldali kép választó") — a tabbar felett fixen
   marad, csak a panel-tartalom görgethető. */
.photobook-tab-panel {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.photobook-tab-panel[hidden] {
	display: none;
}

.photobook-layout-option {
	position: relative;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 8px;
	margin-bottom: 10px;
	cursor: pointer;
	background: #fff;
}

.photobook-layout-option.is-active {
	border-color: #2f6fed;
	box-shadow: 0 0 0 1px #2f6fed;
}

/* Layout-kedvenc csillag (2026-07-26-i explicit kérés: "itt is legyen
   kedvencek jelölés") — ugyanaz a mintázat, mint a matrica-könyvtár
   csillaga (.photobook-sticker-lib-favorite-btn), szögletes/lekerekített,
   NEM kör/ovális — l. DESIGN_GUIDE.md "TILOS az ovális forma". */
.photobook-layout-favorite-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	padding: 0;
	line-height: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #ccc;
	font-size: 13px;
	cursor: pointer;
}

.photobook-layout-favorite-btn.is-active {
	color: #fff;
	background: #dba617;
	border-color: #dba617;
}

.photobook-layout-preview {
	position: relative;
	width: 100%;
	background: #fff;
	border: 1px solid #eee;
}

.photobook-layout-preview-rect {
	position: absolute;
	background: #ccc;
	border: 1px solid #bbb;
	box-sizing: border-box;
}

.photobook-layout-preview-fold {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed #999;
}

/* Admin-authored layout-sablonok (2026-07-24-i explicit kérés) szöveg/
   matrica alapértelmezésének jelzése a pici előnézetben. */
.photobook-layout-preview-text-hint {
	position: absolute;
	background: rgba(47, 111, 237, 0.35);
	border: 1px solid rgba(47, 111, 237, 0.6);
	box-sizing: border-box;
	pointer-events: none;
}

.photobook-layout-preview-sticker-hint {
	position: absolute;
	background: rgba(214, 54, 56, 0.35);
	border: 1px solid rgba(214, 54, 56, 0.6);
	border-radius: 3px;
	box-sizing: border-box;
	pointer-events: none;
}

.photobook-editor-footer {
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 16px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border-top: 1px solid #eee;
	margin-top: 24px;
}

/* Lebegő "válassz egy másik képet" sáv (2026-07-24-i explicit kérés:
   "mint a galériában a bundle termékek válogatásánál") — piros, a
   képernyő alján fixen; lekerekített TÉGLALAP, NEM pill/ovális forma
   (l. DESIGN_GUIDE.md "TILOS az ovális forma" — a szélesség itt sosem
   egyenlő a magassággal, ezért csak szerény 8px sugarú sarok engedett). */
.photobook-pick-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #d63638;
	color: #fff;
	padding: 12px 18px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.photobook-pick-bar[hidden] {
	display: none;
}

.photobook-pick-bar-label {
	font-size: 14px;
	font-weight: 600;
}

.photobook-pick-bar-cancel {
	box-sizing: border-box;
	background: #fff;
	color: #d63638;
	border: none;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* 2026-07-26-i explicit kérés ("galérián kívüli hozzáférés") — a
   regisztráció/belépés-választó kapu és a "van-e már galériád"
   közbeiktatott képernyő közös keretezése. NEM ovális gombok (l.
   feedback_no_oval_buttons memória) — a meglévő .photobook-btn/
   .photobook-btn-secondary/.photobook-btn-link osztályok már eleve
   szögletes/lekerekített-négyzet stílusúak, itt csak az elrendezés jön. */
/* 2026-07-26-i explicit kérés ("igazítsd a bejelentkezés képernyőt
   függőlegesen is középre") — a gate maga válik flex-konténerré, ami a
   TELJES tartalom-blokkot (.photobook-direct-gate-inner) középre igazítja
   egy nagyjából-viewport-magas területen belül; a belső blokk szélessége
   a .photobook-wrap már meglévő max-width:1100px-jét örökli, a flex
   csak függőlegesen mozgat. */
.photobook-direct-gate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 70vh túl szűknek bizonyult élő teszten (a két-oszlopos regisztráció/
	   bejelentkezés + social-login gomb tartalom ~930-1150px magas, egy
	   tipikus ~900px-es laptop-viewporton ez már majdnem kitöltötte a
	   70vh-t is, így a justify-content:center-nek gyakorlatilag nem maradt
	   hely) — 100vh-ra emelve, hogy amikor a tartalom RÖVIDEBB a
	   viewportnál, ténylegesen látható legyen a középre igazítás; ha a
	   tartalom magasabb (kis magasságú ablak/mobil), a flexbox
	   természetes módon fentről kezdi (nem vágja le, nem lóg ki). */
	min-height: 100vh;
}

.photobook-direct-gate-inner {
	width: 100%;
}

.photobook-direct-gate h1 {
	margin-bottom: 8px;
}

.photobook-direct-gate-columns {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.photobook-direct-gate-col {
	flex: 1 1 320px;
	min-width: 280px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 24px;
}

.photobook-direct-gate-col h2 {
	margin-top: 0;
}

/* 2026-07-26-i explicit kérés ("legyen google és facebook bejelentkezés/
   regisztrációs lehetőség is") — 1:1 átvéve a Project Engine core saját
   portal-login.css-éből (ugyanaz az admin_post_pe_social_login végpont,
   csak itt a wp-login.php helyett a fotókönyv belépési kapuján jelenik
   meg), hogy a két bejelentkezési felület vizuálisan egységes legyen.
   border-radius: 4px — szögletes, NEM ovális (l. feedback_no_oval_buttons). */
.photobook-social-login {
	margin-top: 24px;
	max-width: 480px;
}

.photobook-social-login-divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: #646970;
	font-size: 12px;
	margin: 4px 0 16px;
}

.photobook-social-login-divider::before,
.photobook-social-login-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid #dcdcde;
}

.photobook-social-login-divider span {
	padding: 0 10px;
}

.photobook-social-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	margin-bottom: 10px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.photobook-social-login-btn-google {
	background: #fff;
	color: #3c4043;
	border: 1px solid #dcdcde;
}

.photobook-social-login-btn-google:hover {
	background: #f8f8f8;
	color: #3c4043;
}

.photobook-social-login-btn-facebook {
	background: #1877f2;
	color: #fff;
	border: 1px solid #1877f2;
}

.photobook-social-login-btn-facebook:hover {
	background: #166fe0;
	color: #fff;
}

/* ==========================================================================
   2026-07-26-i explicit kérés — mobil nézet a szerkesztőhöz.
   "mobilon alulra tegyünk mindent, felül csak a fotókönyv mintája legyen.
   Alul oldalra scrollozva lehetne a képeket böngészni, a layoutot, a
   szöveg mezőket, és a matricákat... Elforgatott képernyőn az egész alsó
   sáv a bal oldalra költözne."

   A .photobook-sidebar-col-t (saját feltöltés + kép-lista) a JS
   (relocateSidebarForViewport(), l. render_editor_script()) fizikailag
   átmozgatja a "Kép" fül panel-konténerébe mobil nézetben — innen a 4.
   fül a meglévő 3-tagolású (Elrendezés/Szöveg/Matrica) rendszer mellett.
   A törésponthoz (899px) a szokásos tablet/telefon-határ igazodik.
   ========================================================================== */

/* --- Mindkét mobil tájolásra (portré ÉS fekvő) egyaránt vonatkozó
   szabályok: összecsukható topbar + egységes magasságú láblécgombok +
   kis, jobbra igazított ár (2026-07-26-i explicit kérés). --- */
@media (max-width: 899px) {
	.photobook-topbar-toggle-btn {
		display: inline-flex;
	}

	/* Alapból ÖSSZECSUKVA indul mobilon ("hogy minden elférjen") — a
	   toggle-gomb nyitja meg (l. JS), `.is-open` osztállyal. A `display:
	   contents` (desktop) helyett itt egy VALÓDI, önálló sorrá válik,
	   ami a topbar 2. sorába kerül (a back-link + a jobbra igazított
	   ikon-gomb-csoport sora után), teljes szélességben. */
	.photobook-editor-topbar-collapsible {
		display: none;
		flex-basis: 100%;
		/* order:1 — a `.photobook-topbar-icon-group` (DOM-ban utána
		   következik) így a back-linkkel egy soron marad, a 100%-os
		   flex-basis miatt a collapsible mindenképp saját (2.) sorra
		   kerül, függetlenül attól, hogy DOM-sorrendben előtte áll. */
		order: 1;
	}

	/* 2026-07-26-i pontosítás: "A Fotókönyv neve rész... lehet egy sima
	   szövegmező csík. Mellé kerülhet a Formátum módosítása, Kifutó és
	   Minta gombok" — EGY SORBAN (nem egymás alatt, ahogy korábban), a
	   `flex-wrap` csak akkor tör sort, ha a 375px-es szélesség tényleg
	   nem elég mindhez. */
	.photobook-editor-topbar-collapsible.is-open {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	/* A névmező VÉKONY csíkká válik (nem a korábbi, "négyzetesnek" ható
	   nagy belső paddinges doboz) — kisebb padding, szűkebb flex-basis,
	   hogy a 3 gombnak is jusson hely ugyanabban a sorban. */
	.photobook-editor-topbar-collapsible.is-open .photobook-book-name-input {
		flex: 1 1 140px;
		max-width: none;
		padding: 4px 8px;
		text-align: left;
	}

	.photobook-editor-topbar-actions {
		flex-wrap: wrap;
	}

	/* Egységes magasságú láblécgombok (2026-07-26-i explicit kérés) —
	   `align-items:stretch` (a flex alapértéke, itt explicit kiírva)
	   miatt mind a 3 gomb a legmagasabbra (a kétsoros "Véglegesítés és
	   kosárba tétel") nyúlik, JS-mérés nélkül. Az ár `order:-1`-gyel a
	   gombsor FÖLÉ kerül, jobbra igazítva (a footer `justify-content:
	   flex-end`-je miatt, mivel a gombsor `flex-basis:100%` új sorba
	   kényszeríti magát, az ár egyedül marad az 1. soron). */
	.photobook-editor-footer {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 6px;
	}

	.photobook-editor-footer-actions {
		order: 1;
		flex: 1 1 100%;
		display: flex;
		align-items: stretch;
		gap: 8px;
	}

	.photobook-editor-footer-actions .photobook-btn {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 8px 6px;
		font-size: 11px;
		line-height: 1.2;
	}

	.photobook-price {
		order: -1;
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 600;
	}
}

/* --- Álló (portré) mobil: fent a lap, lent az egységes, fülekkel váltható
   sáv, minden lista vízszintesen görgethető. --- */
@media (max-width: 899px) and (orientation: portrait) {
	.photobook-editor-body {
		flex-direction: column;
		gap: 12px;
	}

	.photobook-active-unit {
		order: 1;
		width: 100%;
		max-height: 52vh;
	}

	.photobook-layout-picker {
		order: 2;
		width: 100%;
		max-height: 40vh;
		position: static;
	}

	.photobook-sidebar-col {
		width: 100%;
		max-height: none;
		position: static;
		gap: 8px;
	}

	/* A négy böngészhető lista (kép/elrendezés/matrica/szöveg-réteg)
	   egységesen egyetlen, vízszintesen görgethető sorrá válik — "oldalra
	   scrollozva böngészni", ahogy a user kérte. */
	.photobook-sidebar,
	#photobook-layout-picker-options,
	.photobook-sticker-lib-grid,
	.photobook-text-layer-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 10px;
		-webkit-overflow-scrolling: touch;
	}

	.photobook-sidebar-item,
	.photobook-layout-option,
	.photobook-sticker-lib-item,
	.photobook-text-layer-item {
		flex: 0 0 auto;
	}

	.photobook-sidebar-thumb,
	.photobook-sidebar-empty {
		width: 120px;
		height: 120px;
	}

	.photobook-layout-option {
		width: 140px;
		margin-bottom: 0;
	}

	.photobook-sticker-lib-item {
		width: 90px;
	}

	.photobook-text-layer-item {
		width: 200px;
	}
}

/* --- Fekvő (tájkép) mobil: az EGÉSZ alsó sáv (a "Kép" fület is beleértve)
   a bal oldalra költözik, a lap a jobb oldali maradék helyet tölti ki —
   ilyenkor a listák a szokásos, függőleges elrendezésben maradnak (a
   keskeny, magas oszlopban ez illik jobban, mint egy vízszintes sor). --- */
@media (max-width: 899px) and (orientation: landscape) {
	.photobook-editor-body {
		flex-direction: row;
		align-items: stretch;
	}

	.photobook-layout-picker {
		order: 1;
		width: 240px;
		max-height: 100vh;
	}

	.photobook-sidebar-col {
		width: 100%;
		max-height: none;
		position: static;
	}

	.photobook-active-unit {
		order: 2;
		max-height: 100vh;
	}

	/* Fekvő mobilon a viewport TELJES magassága gyakran csak 360-430px
	   (2026-07-26-i élő teszten talált hiba: a fejléc/eszköztár/filmcsík
	   changtalan mérete miatt a vászonnak+láblécnek szinte semmi hely nem
	   maradt, a lábléc átfedte a vásznat) — itt a felette lévő "sallangot"
	   (formátum/kifutó/minta eszköztár, filmcsík, lap-cím) tömörítjük,
	   hogy a maradék hely a vászonnak és a láblécnek jusson. */
	.photobook-editor-topbar {
		margin-bottom: 6px;
	}

	.photobook-editor-topbar-actions .photobook-btn {
		padding: 4px 8px;
		font-size: 12px;
	}

	.photobook-filmstrip {
		padding: 4px 4px 6px;
		margin-bottom: 6px;
	}

	.photobook-filmstrip-thumb .photobook-cover-unit {
		width: 32px;
	}

	.photobook-filmstrip-thumb .photobook-spread-unit {
		width: 64px;
	}

	.photobook-filmstrip-label {
		font-size: 9px;
	}

	.photobook-unit-title {
		margin-bottom: 2px;
		font-size: 13px;
	}

	.photobook-editor-footer {
		padding: 6px 0;
		margin-top: 4px;
	}
}

/* A "Kép" fül panel-konténere (2026-07-26-i explicit kérés) — a JS ide
   mozgatja be a .photobook-sidebar-col-t mobil nézetben; asztali nézetben
   ez a konténer mindig üres marad (a sidebar-col a saját, önálló bal
   oszlop-pozíciójában van), ezért itt nincs szükség külön asztali
   szabályra. */
#photobook-tab-panel-image:not( [hidden] ) {
	display: flex;
	flex-direction: column;
}

/* (2026-07-26: az érintéses kép-húzás ghost-eleme megszűnt — l.
   EditorController.php "Android tableten talált hiba" docblokkja, a
   sidebar-képek behelyezése mostantól kizárólag koppintás/kattintás.) */

/* ==========================================================================
   2026-07-27-i explicit kérés: "szerintem mobilon tiltsuk le a
   szerkesztőt! Kizárólag a már szerkesztett könyvek mintáit lehessen
   megnézni... Tableten már mehessen." — a szerkesztő/wizard MINDEN kódja
   (JS/CSS/PHP) VÁLTOZATLANUL megmarad, csak ezzel a szabállyal van
   letiltva/eltakarva egy telefon-méretű viewporton, a
   `render_mobile_block_message()` (EditorController.php) üzenetére
   cserélve. A "telefon" vs "tablet" megkülönböztetés a KÉSZÜLÉK
   (`device-width`/`device-height`, azaz a fizikai képernyő) KISEBBIK
   dimenzióján alapul, NEM a viewport (`width`/`height`) méretén.

   2026-07-27-i élő hibajelzés (Galaxy Tab S5e): a korábbi `max-width`/
   `max-height` (viewport-alapú) változat FEKVŐ nézetben tévesen
   telefonnak jelölte a táblagépet — a böngésző saját kezelőfelülete
   (cím- és navigációs sáv) FEKVŐ tájolásban annyira lecsípi a
   VIEWPORT magasságát, hogy az a 768px-es küszöb alá esett, jóllehet a
   készülék fizikai képernyője (`device-height`) változatlanul
   tablet-méretű maradt. A `device-width`/`device-height` a böngésző
   kezelőfelületétől FÜGGETLEN, a fizikai képernyőt tükrözi — ez
   forgatás-FÜGGETLEN ÉS a böngésző-chrome által okozott viewport-
   zsugorodástól is védett: egy telefon fekvő nézetben is a (kisebb)
   fizikai magassága alapján telefon marad, egy tablet pedig bármelyik
   forgatásban, BÁRMENNYIT is csíp le a böngésző UI-ja a viewportból, a
   768px-es küszöb fölött marad.
   ========================================================================== */
.photobook-mobile-block-message {
	display: none;
	max-width: 480px;
	margin: 48px auto;
	padding: 32px 24px;
	text-align: center;
	background: #f7f7f7;
	border-radius: 10px;
}

.photobook-mobile-block-icon {
	color: #888;
	margin-bottom: 12px;
}

.photobook-mobile-block-message h2 {
	margin: 0 0 12px;
	font-size: 18px;
}

.photobook-mobile-block-message p {
	margin: 0 0 20px;
	color: #555;
}

@media (max-device-width: 767px), (max-device-height: 767px) {
	.photobook-mobile-block-message {
		display: block;
	}

	/* A szerkesztő (render_editor()) TELJES tartalma eltakarva — a
	   fenti "editor" variánsú üzenet jelenik meg helyette. */
	.photobook-editor-wrap {
		display: none;
	}

	/* A "Fotókönyveim" listán (render_landing()) az "Új fotókönyv"
	   wizard eltakarva a "wizard" variánsú üzenettel, a MEGLÉVŐ
	   könyvek listája viszont MARAD (hogy a "Minta könyv" linkek
	   elérhetők legyenek) — csak a SZERKESZTÉST indító gombok tűnnek
	   el soronként, a "Minta könyv" link és a státusz-felirat marad. */
	.photobook-new {
		display: none;
	}

	.photobook-delete-btn,
	.photobook-duplicate-btn,
	.photobook-reopen-btn,
	.photobook-continue-edit-btn {
		display: none;
	}
}