.gallery-wrap {
	max-width: 1680px;
	margin: 0 auto;
	padding: 40px 32px 24px;
	color: #1d2327;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Sibling of .gallery-wrap (2026-07-24), not nested in it — the masonry
 * grid needs to run near-full-width (2.5% empty margin each side — halved
 * from an original 5% per explicit follow-up request, not the 1680px
 * reading-column cap the header/status pages still use), so it gets its
 * own unconstrained wrapper instead of inheriting gallery-wrap's
 * max-width. */
.gallery-content {
	width: 100%;
	padding: 0 2.5vw 100px;
	box-sizing: border-box;
	color: #1d2327;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gallery-status-wrap {
	max-width: 480px;
	text-align: center;
	padding-top: 100px;
}

/* "Összes kép letöltése" banner (2026-07-17 explicit request: "piros
 * hátterű elnyújtott gombot olyan kerekítéssel mint a kör ikonok. Benne
 * fehér felirat") — a loud, simple stadium-shaped pill, deliberately
 * bolder than every other button on this page so a "just buy it all"
 * shortcut is impossible to miss. */
.gallery-full-album-banner {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 20px auto;
	padding: 16px 24px;
	border: none;
	border-radius: 999px;
	background: #d63638;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

.gallery-full-album-banner:hover {
	background: #b32d2f;
}

/* Compact icon-row variant (2026-07-24, explicit follow-up: "nem ott és
 * nem ennyire nagyban... Tedd a jobb oldali fenti ikonok mellé és legyen
 * sokkal rövidebb") — same red pill, but sized to sit inline with the
 * 36px round icon buttons instead of spanning the page as its own block. */
.gallery-full-album-banner-compact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: none;
	height: 36px;
	margin: 0;
	padding: 0 16px;
	font-size: 13px;
	white-space: nowrap;
}

/* Large full-width cover photo (2026-07-24, Pic-Time-style) — sits above
 * .gallery-wrap entirely (not inset in its max-width), so it can run
 * edge to edge while the name/date/nav below stay in the readable
 * max-width column.
 *
 * No max-height cap here (2026-08-07 fix, removed an old `max-height:
 * 80vh` — explicit request: "a fejezetek már ne látszódjanak az
 * oldalbetöltéskor... ami [a fejléc] alatt van már legyenek takarva és
 * csak görgetéskor jöjjenek fel"). sizeCover() in render_gallery() already
 * sizes this element to exactly (viewport height − header height), so
 * cover+header together fill the screen and the chapter-nav/grid below
 * start below the fold by construction — the old 80vh cap was clipping
 * that JS-computed height short on any viewport taller than ~ header
 * height / 0.2, leaving slack that pulled the chapter nav and the start
 * of the image grid into view on load. */
.gallery-cover {
	width: 100%;
	overflow: hidden;
	background: #f7f7f7;
}

/* 2026-07-31 fix ("telefonon a cover photo alatt rengeteg üres szürke
 * hely marad") — Betheme's own reset stylesheet ships
 * `img:not([src$=".svg"]) { max-width:100%; height:auto; }`, which has
 * the EXACT same specificity as this rule (one class + one type
 * selector each) and, depending on enqueue order, can win the cascade —
 * confirmed live: the cover img was rendering at height:auto (its own
 * intrinsic aspect ratio, e.g. 250px on a 375px-wide phone) instead of
 * height:100% of its JS-sized container (e.g. 654px), leaving ~400px of
 * bare .gallery-cover background below it. !important guarantees this
 * plugin's own component always wins that fight regardless of theme
 * load order. object-position now comes from each project's stored
 * focal point (2026-07-31, "focal point beállítás") — set via a
 * `--gallery-cover-focal-x/-y` custom property (see the inline style on
 * .gallery-cover itself in GalleryPageController::render_gallery()),
 * defaulting to center when a project has no focal point saved yet. */
.gallery-cover img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: var(--gallery-cover-focal-x, 50%) var(--gallery-cover-focal-y, 50%);
	display: block;
}

/* Grid (not flex) so the logo column can sit truly centered independent
 * of how wide the title/menu columns end up — a 2-item flex row has no
 * way to center a 3rd item between them. grid-template-areas (rather than
 * plain grid-template-columns) so the SAME three DOM children can be
 * reflowed into a completely different arrangement at the mobile
 * breakpoint below (title/logo/menu in one row on desktop, logo above a
 * sticky name+hamburger row on mobile) without duplicating any markup. */
/* Sticky (2026-07-16 explicit request: "A galéria neve a menüsor mindig
 * látszódjon") — desktop only, overridden back to position:static inside
 * the mobile breakpoint below, where .gallery-header-title already has its
 * OWN, narrower sticky treatment (just the name+hamburger row, not the
 * logo) that predates this change and must keep working unchanged.
 * .gallery-chapter-nav (also sticky, in a separate wrapper further down
 * the page) gets its own `top` offset set in JS to this header's real
 * rendered height, so the two stack cleanly instead of overlapping — see
 * refreshLayout() in render_gallery(). z-index kept above the chapter
 * nav's own 10 so any sub-pixel rounding still resolves in the header's
 * favor rather than a 1px flicker of both fighting for the same row. */
/* Full-bleed sticky shell (2026-07-16 follow-up) — .gallery-header ITSELF
 * now spans the whole viewport width so its white background has no gaps
 * at either edge once stuck (a max-width+margin:auto box only paints white
 * across its OWN centered column, leaving the grid images scrolling
 * underneath visible through the leftover space on both sides at any
 * viewport wider than the 1680px reading column — found live via
 * screenshot). The reading-column width/centering that used to live
 * directly on this element moved to the new .gallery-header-inner child
 * instead — same two-step "outer bleeds full-width, inner re-applies the
 * cap" pattern already used by .gallery-content/.gallery-chapter-nav. */
.gallery-header {
	position: sticky;
	top: 0;
	z-index: 11;
	background: #fff;
	padding-top: 40px;
	margin-bottom: 24px;
	/* No transition here (2026-07-16 follow-up: removed) — animating
	 * padding meant the header's OWN rendered height changed continuously
	 * across several frames every time .is-stuck toggled, and the
	 * ResizeObserver watching this element (see refreshLayout() in
	 * render_gallery()) re-measured and repositioned the chapter-nav below
	 * it on EVERY one of those intermediate frames — several rapid,
	 * slightly-different repositionings in a row read as a visible
	 * flicker/vibration of the header and the sticky nav under it (2026-07-16
	 * explicit report: "zizeg, remeg... vibrál"). Snapping instantly avoids
	 * the whole cascade — see also the synchronous (non-debounced)
	 * realignment call added right where .is-stuck itself gets toggled. */
}

/* Cover-flush variant — replaces the default 40px top padding above with a
 * fixed, deliberate 20px gap under the cover photo; see sizeCover()'s own
 * docblock for why this exact number has to stay in sync with it. */
.gallery-header.gallery-wrap-flush {
	padding-top: 20px;
}

/* Compressed while actually pinned to the viewport's top edge (2026-07-16
 * explicit request: "Picit össze lehetne nyomni a sticky headert... a
 * dátum eltűnhet" — but ONLY once stuck; normal in-flow spacing must stay
 * exactly as-is). .is-stuck is toggled by an IntersectionObserver watching
 * a zero-height sentinel placed immediately before this element — see
 * render_gallery()'s own script for why a sentinel is needed at all
 * (position:sticky has no native "is it currently stuck" CSS selector in
 * stable browsers). The chapter-nav below needs no separate adjustment:
 * its own `top` offset is already re-measured off this element's REAL
 * rendered height on every resize (refreshLayout()'s ResizeObserver), so
 * it naturally slides up to match once this shrinks. */
.gallery-header.is-stuck {
	padding-top: 6px;
	padding-bottom: 6px;
}

.gallery-header.is-stuck .gallery-date {
	display: none;
}

/* Further compression while stuck (2026-07-16 follow-up: "Nyomd még össze
 * legalább 20-30 px-el") — shrinks the name/logo, the two tallest columns
 * in the row, on top of the padding cut above and the date already being
 * hidden. Icon buttons stay full-size (36px) — those are tap targets, not
 * just decoration, so shrinking them trades usability for a few more
 * pixels that the name/logo cuts already cover. */
.gallery-header.is-stuck .gallery-header-title h1 {
	font-size: 18px;
}

.gallery-header.is-stuck .gallery-header-title {
	padding-bottom: 0;
}

.gallery-header.is-stuck .gallery-header-logo img {
	max-height: 28px;
}

/* Zero-height marker the IntersectionObserver above watches — see its own
 * docblock in render_gallery() for why a sentinel is needed at all. */
.gallery-header-sentinel {
	height: 0;
}

.gallery-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "title logo menu";
	align-items: center;
	gap: 16px;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

.gallery-header-title {
	grid-area: title;
	justify-self: start;
	/* Bottom-anchored (not the row's default vertical centering) so the
	 * date sits with deliberate ~10px breathing room above the header's
	 * own bottom edge, rather than floating mid-row. */
	align-self: end;
	padding-bottom: 10px;
}

.gallery-header-title h1 {
	font-size: 40px;
	font-weight: 600;
	margin: 0;
	line-height: 1.15;
}

.gallery-date {
	margin: 6px 0 0;
	font-size: 15px;
	color: #767c82;
	letter-spacing: 0.02em;
}

/* The theme's own logo markup (an <a class="logo-wrapper">) is moved in
 * here via JS at render time — see GalleryPageController::render_gallery().
 * Its native CSS is scoped to #mfn-header-template (now hidden), so size
 * has to be re-declared standalone here. */
.gallery-header-logo {
	grid-area: logo;
	justify-self: center;
	display: flex;
	align-items: center;
}

.gallery-header-logo img {
	max-height: 60px;
	width: auto;
	display: block;
}

.gallery-header-menu {
	grid-area: menu;
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 10px;
	position: relative;
}

/* Shared small circular button look for the heart-filter toggle, the
 * download-menu summary, and the cart placeholder (2026-07-24) — replaces
 * the old text "Csak a kedvencek" checkbox with the same icon language
 * used per-thumbnail. box-sizing+flex-shrink:0 pin it to an exact circle
 * regardless of container width (a flex child shrinks by default, which
 * is what was actually turning these into ovals, not the border-radius
 * itself) — monochrome only (2026-07-24: no colored icons anywhere in
 * the gallery), so "active" states use a solid dark fill instead of a
 * brand color. */
.gallery-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	/* The active theme applies its own default padding (13px 40px) to
	 * every plain <button> site-wide, which this class never overrode —
	 * with a fixed width smaller than that padding, the box couldn't
	 * shrink to it (box-sizing:border-box can't go below content's
	 * minimum), so it grew sideways into an oval instead of the intended
	 * circle (found 2026-07-24). Reset to 0 explicitly rather than
	 * relying on there being no competing rule. */
	padding: 0;
	margin: 0;
	border: 1px solid #d5d5d5;
	border-radius: 50%;
	background: #fff;
	color: #1d2327;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}

summary.gallery-icon-btn {
	list-style: none;
}

summary.gallery-icon-btn::-webkit-details-marker {
	display: none;
}

summary.gallery-icon-btn::marker {
	content: '';
	display: none;
}

.gallery-favorites-filter.is-active,
.gallery-favorites-filter[aria-pressed="true"],
.gallery-flags-filter.is-active,
.gallery-flags-filter[aria-pressed="true"],
#gallery-selection-toggle.is-active,
#gallery-selection-toggle[aria-pressed="true"] {
	color: #fff;
	background: #1d2327;
	border-color: #1d2327;
}

/* Favorite/flag-count badge (2026-07-24, revised same day) — only rendered
 * server-side when the count is > 0. Originally a child of the round
 * .gallery-icon-btn itself, positioned via a negative offset — but the
 * button's own circular clipping (border-radius:50% combined with this
 * theme's overflow behavior on <button>) cut most of it off, leaving only
 * a sliver of the bottom-left corner visible. Fixed by lifting the badge
 * OUT of the button entirely: both now live as siblings inside a small
 * .gallery-icon-wrap, so the badge is never inside anything that could
 * clip it. */
.gallery-icon-wrap {
	position: relative;
	display: inline-flex;
}

.gallery-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	box-sizing: border-box;
	border: 1.5px solid #fff;
	border-radius: 8px;
	background: #1d2327;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	text-align: center;
	pointer-events: none;
}

/* Running cart total under the header cart icon (2026-07-16 explicit
 * request: "jó lenne ha a jobb felső kosár ikon alatt megjelenne a
 * vásárlási összeg is"). Absolutely positioned (2026-07-16 follow-up:
 * "A kosár ikon maradjon egy vonalba a többi ikonnal") — an earlier
 * version made .gallery-cart-icon-wrap a column flex (icon stacked above
 * the total text), which grew the WRAPPER taller than its sibling icon-
 * wraps; since .gallery-header-menu centers each wrap as a whole (not the
 * icon within it), the cart icon itself then sat visibly higher than the
 * heart/flag/download icons instead of level with them. Positioning the
 * total OUTSIDE normal flow (relative to .gallery-icon-wrap, already
 * position:relative) leaves the wrap's own box exactly the same size as
 * any other icon-wrap — the icon lines up with its siblings again — while
 * the total still visually renders directly below it. */
.gallery-cart-total {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 4px;
	font-size: 11px;
	color: #50575e;
	white-space: nowrap;
}

.gallery-header.is-stuck .gallery-cart-total {
	display: none;
}

/* Landing bounce (2026-07-17) — a brief pulse on the cart icon right as
 * the flying photo clone "arrives" (see flyToCart()'s is-landing class
 * toggle), so the animation has a satisfying endpoint instead of just
 * fading into nothing. */
@keyframes gallery-cart-landing-bounce {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.gallery-cart-icon-wrap.is-landing .gallery-icon-btn {
	animation: gallery-cart-landing-bounce 0.3s ease;
}

/* Icon tooltips (2026-07-24) — a small thin-lettered label above whichever
 * top-right icon is hovered, driven by each button's own data-tooltip
 * attribute rather than the browser's native (slow, unstyled) [title]
 * tooltip. */
.gallery-icon-btn[data-tooltip] {
	position: relative;
	/* A téma globális button-resetje (Betheme be.min.css) minden <button>
	 * elemre overflow:hidden-et tesz (specificitásban ez a szabály simán
	 * felülírja, mert a miénk 2 osztály-szintű szelektor, az övé csak egy
	 * plain "button" típus-szelektor) — enélkül a lenti ::after tooltip
	 * (ami a gomb doboza FÖLÉ lóg ki, bottom:calc(100% + 8px)) le lett
	 * vágva minden <button>-alapú ikonnál, csak a <a>-tag kosár-linknél
	 * (aminek nincs ilyen téma-reset overflow-ja) jelent meg helyesen —
	 * pontosan ez volt a user által jelzett "csak a kosárnál működik"
	 * tünet (2026-07-21, élőben megerősítve getComputedStyle-lal). */
	overflow: visible;
}

.gallery-icon-btn[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: #1d2327;
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
	padding: 4px 8px;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 20;
}

.gallery-icon-btn[data-tooltip]:hover::after,
.gallery-icon-btn[data-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* List-filter dropdown (2026-07-24) — anchored under the top-menu flag
 * icon via .gallery-icon-wrap's own position:relative, no JS positioning
 * needed (unlike the per-thumb flag popover, which has to follow whichever
 * image was clicked) since this one always opens from the same fixed
 * button. */
.gallery-list-filter-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 100002;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	padding: 6px;
	min-width: 160px;
	display: flex;
	flex-direction: column;
}

.gallery-list-filter-dropdown[hidden] {
	display: none;
}

.gallery-list-filter-option {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: none;
	border-radius: 4px;
	padding: 7px 8px;
	font-size: 13px;
	color: #1d2327;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.gallery-list-filter-option:hover {
	background: #f4f4f4;
}

.gallery-list-filter-option.is-active {
	background: #1d2327;
	color: #fff;
}

.gallery-list-filter-count {
	color: #8a8f98;
	font-size: 12px;
}

.gallery-list-filter-option.is-active .gallery-list-filter-count {
	color: #d5d5d5;
}

.gallery-cart-placeholder {
	cursor: default;
}

/* Download picker (2026-07-24) — a checkbox list of chapters so several
 * can be bundled into one ZIP, styled the same way as the Store plugin's
 * cart drawer: a light-gray, centered popup with a solid dark confirm
 * button below the list. */
.gallery-download-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.gallery-download-overlay[hidden] {
	display: none;
}

.gallery-download-box {
	position: relative;
	background: #f4f4f4;
	border-radius: 10px;
	padding: 32px 28px 24px;
	max-width: 320px;
	width: 100%;
	text-align: center;
}

.gallery-download-box h3 {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
}

.gallery-download-close {
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #50575e;
	cursor: pointer;
}

.gallery-download-checklist {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	text-align: left;
}

.gallery-download-checklist li {
	padding: 6px 0;
}

.gallery-download-checklist label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #1d2327;
	cursor: pointer;
}

.gallery-download-confirm {
	width: 100%;
}

/* Selection-quota panel (2026-07-16, restructured 2026-07-17 into tagged
 * rows instead of one run-on sentence) — replaces the checklist above for a
 * restricted project; shares the same box. */
.gallery-download-quota-summary {
	margin: 0 0 12px;
	text-align: left;
	background: #fff;
	border-radius: 8px;
	padding: 4px 14px;
}

.gallery-download-quota-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	color: #1d2327;
}

.gallery-download-quota-row + .gallery-download-quota-row {
	border-top: 1px solid #e2e2e2;
}

.gallery-download-quota-note {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.5;
	color: #50575e;
}

#gallery-download-quota-action {
	width: 100%;
}

/* Explanatory line above the restyled full-album button (2026-07-24) —
 * same muted-text treatment as the note above it. */
.gallery-download-quota-alt-text {
	margin: 16px 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #50575e;
}

/* Restyled to match the wizard's squared .gallery-btn shape (2026-07-24)
 * instead of the stadium-pill .gallery-full-album-banner look; recolored
 * blue to match the product-picker's open-category highlight (2026-07-31,
 * explicit request: "ugyan olyan kék mint a Termék hozzáadásánál a
 * kijelölt kategória háttere"). */
.gallery-download-full-album-inline {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

/* Compound selector (not just .gallery-btn-blue) so this reliably beats
 * the later .gallery-btn base-color rule regardless of source order —
 * .gallery-btn-red previously lost this exact fight silently (same
 * specificity, .gallery-btn simply came later in the file), rendering
 * "red" buttons black; kept as a compound selector here to not repeat it. */
.gallery-btn.gallery-btn-blue {
	background: #4169e1;
}

.gallery-btn.gallery-btn-blue:hover {
	background: #2f4fc0;
}

/* White variant (2026-08-01 explicit request: "a kosárba gomb formai
 * világával megegyező, de fehér színű") — same .gallery-btn shape as
 * "Kosárba", just white with a border so it doesn't disappear against the
 * bundle-component row's own pale background. */
.gallery-btn.gallery-btn-white {
	background: #fff;
	color: #1d2327;
	border: 1px solid #c3c4c7;
}

.gallery-btn.gallery-btn-white:hover {
	background: #f0f0f1;
}

/* Persistent "selected for download" state (2026-07-16) — same monochrome
 * solid-fill treatment as is-favorite/is-flagged/is-in-cart, so a photo
 * already in the download selection stays visibly marked without hover. */
.gallery-thumb-download.is-selected,
.gallery-lightbox-download.is-selected {
	opacity: 1;
	visibility: visible;
	background: #1d2327;
	color: #fff;
}

/* 2026-07-31: the thumb (not lightbox) version also needs the width/
 * margin restored — see the flush-right collapse rules further down —
 * otherwise a download-selected thumb icon would stay logically "visible"
 * but zero-width, i.e. invisible anyway. */
.gallery-thumb-download.is-selected {
	width: 32px;
	margin-left: 6px;
	pointer-events: auto;
}

/* Flag popover (2026-07-24) — a small anchored card (not a full-screen
 * overlay like the download picker) positioned via JS next to whichever
 * thumb's flag icon was clicked (see the inline script's
 * position:absolute + scrollX/scrollY math), listing the project's lists
 * as checkboxes plus a "create new list" mini-form. */
.gallery-flag-popover {
	position: absolute;
	z-index: 100002;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	padding: 12px 14px;
	min-width: 200px;
	max-width: 260px;
}

.gallery-flag-popover[hidden] {
	display: none;
}

.gallery-flag-popover-lists {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.gallery-flag-popover-lists label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #1d2327;
	cursor: pointer;
}

.gallery-flag-popover-new {
	display: flex;
	gap: 6px;
	border-top: 1px solid #ececec;
	padding-top: 10px;
}

.gallery-flag-popover-new input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
}

.gallery-flag-popover-new button {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: #1d2327;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

/* Per-image note thread (2026-07-24) — same full-screen-overlay pattern as
 * the guest-email prompt/download picker, but taller (a scrollable message
 * list plus a textarea), since it can hold an open-ended back-and-forth
 * rather than a single choice. */
.gallery-note-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.gallery-note-overlay[hidden] {
	display: none;
}

.gallery-note-box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 28px 24px 20px;
	max-width: 420px;
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.gallery-note-box h3 {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Rokon/barát meghívó-link popup (2026-07-23) — a .gallery-note-overlay/
 * .gallery-note-box shellt hasznosítja újra, csak ez a két, sajátos
 * elrendezésű rész (link+másolás sor, figyelmeztető szöveg) új. */
.gallery-invite-link-row {
	display: flex;
	gap: 8px;
	margin: 4px 0 14px;
}

.gallery-invite-link-row input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	font-size: 13px;
	color: #1d2327;
	background: #f6f7f7;
}

.gallery-invite-warning {
	margin: 0;
	padding: 10px 12px;
	background: #fef8e7;
	border: 1px solid #f0dfa0;
	border-radius: 6px;
	font-size: 13px;
	color: #6b5b1a;
}

/* Ügyfél-oldali jogosultság-panel (2026-07-28, "full screen világos szürke
 * hátteres felület jöjjön be, mint a kosár") — a .gallery-note-overlay-tól
 * eltérően NEM egy kis középre igazított doboz, hanem a teljes viewportot
 * kitöltő, világos szürke felület, a kosár oldal (.gallery-cart-wrap)
 * hangulatát idézve, de overlay-ként (nem külön URL-en). */
.gallery-permissions-overlay {
	position: fixed;
	inset: 0;
	background: #f0f0f1;
	z-index: 100005;
	overflow-y: auto;
	padding: 32px 20px 60px;
	box-sizing: border-box;
	/* SZÁNDÉKOSAN nem flex/align-items:center (2026-07-28-i user-jelzés,
	 * Mac-en: "kilóg az ablak teteje a kijelzőről és nem látom a bezár
	 * gombot") — align-items:center egy overflow:auto flex konténeren a
	 * FELÜLI túlcsordulást levágja (nem görgethető oda vissza), csak az
	 * alsó irányba enged scrollozni. Sima blokk-elrendezés helyette: a
	 * doboz mindig a konténer TETEJÉHEZ igazodik (a fenti padding adja a
	 * légteret, ha kifér), és ha magasabb a viewportnál, a TELJES tartalom
	 * (a bezárás gombot is beleértve) simán elérhető görgetéssel. */
}

.gallery-permissions-overlay[hidden] {
	display: none;
}

.gallery-permissions-box {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
	padding: 28px 28px 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.gallery-permissions-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.gallery-permissions-header h2 {
	margin: 0;
	font-size: 22px;
}

.gallery-permissions-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #50575e;
	padding: 4px 8px;
}

.gallery-permissions-close:hover {
	color: #1d2327;
}

.gallery-permissions-box h3 {
	margin: 24px 0 10px;
	font-size: 16px;
}

.gallery-permissions-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 14px;
}

.gallery-permissions-table th,
.gallery-permissions-table td {
	padding: 8px 10px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	font-size: 13px;
}

.gallery-permissions-table thead th {
	background: #f6f7f7;
	font-weight: 600;
	vertical-align: top;
}

.gallery-permissions-table td:not(:first-child),
.gallery-permissions-table th:not(:first-child) {
	text-align: center;
}

/* A meghívó-link a Meghívottak oszlop fejlécében jelenik meg (2026-07-28,
 * "az általuk kimásolható link legyen a meghívottak nevű oszlop") — kis,
 * önálló sor a szerepkör-cím alatt, hogy egyértelmű legyen, melyik
 * szerepkörhöz tartozik. A nyers URL-t magát NEM írjuk ki (2026-07-28-i
 * user-kérés) — csak egy zöld "Meghívó link másolása" gomb látszik, a
 * tényleges érték egy vizuálisan elrejtett inputban marad (nem
 * display:none, hogy az .select()-es vágólap-fallback működőképes
 * maradjon Clipboard API nélküli böngészőkben is). */
.gallery-permissions-invite-link {
	display: flex;
	justify-content: center;
	margin-top: 8px;
	font-weight: 400;
}

.gallery-permissions-invite-link-input-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gallery-permissions-invite-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #2e7d32;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

.gallery-permissions-invite-copy-btn:hover {
	background: #276e2b;
}

.gallery-btn-small {
	padding: 6px 10px !important;
	font-size: 12px !important;
}

.gallery-permissions-save-all-row {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

.gallery-permissions-status {
	margin-left: 8px;
	font-size: 12px;
	color: #50575e;
}

/* Info tooltip button (2026-07-16) — reuses the same data-tooltip pattern
 * as the top-right icon row's own tooltips (see .gallery-icon-btn[data-
 * tooltip]), just a smaller, plain black circle with a white "i" instead
 * of an action icon. */
.gallery-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #1d2327;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	font-family: Georgia, 'Times New Roman', serif;
	cursor: help;
	position: relative;
}

.gallery-info-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 220px;
	white-space: normal;
	background: #1d2327;
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 20;
}

.gallery-info-btn:hover::after,
.gallery-info-btn:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

.gallery-note-close {
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #50575e;
	cursor: pointer;
}

.gallery-note-list {
	overflow-y: auto;
	max-height: 40vh;
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gallery-note-item {
	background: #f4f4f4;
	border-radius: 8px;
	padding: 8px 12px;
}

/* The photographer's own notes get a CLEARLY distinct background
 * (2026-07-16: made more visually distinct than the earlier near-identical
 * gray-on-gray — explicit request) — a small, deliberate deviation from
 * the gallery's otherwise-monochrome icon language, since a two-party
 * message thread genuinely benefits from an at-a-glance "who wrote this"
 * cue the way a chat UI would. */
.gallery-note-item--admin {
	background: #dce8f7;
}

.gallery-note-item-meta {
	font-size: 11px;
	color: #8a8f98;
	margin-bottom: 3px;
}

.gallery-note-item-body {
	font-size: 13px;
	color: #1d2327;
	white-space: pre-wrap;
	word-break: break-word;
}

.gallery-note-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gallery-note-form textarea,
.gallery-note-form input[type="text"],
.gallery-note-form button[type="submit"] {
	width: 100%;
	box-sizing: border-box;
}

.gallery-note-form textarea {
	resize: vertical;
	min-height: 60px;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
}

.gallery-note-form input[type="text"] {
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
}

/* Chapter nav strip — one horizontal line of links jumping to each
 * chapter's own section anchor further down the page. Lives inside
 * .gallery-content (2026-07-24, moved out of .gallery-wrap) so it can
 * bleed edge-to-edge to match the full-width masonry grid below it
 * instead of being capped at .gallery-wrap's 1680px reading column — the
 * negative margin cancels .gallery-content's own 2.5vw padding for the
 * bar itself, while its own matching padding keeps the LINKS visually
 * inset to the same margin as the grid.
 *
 * Visible immediately on load again (2026-07-24 follow-up request
 * reversed the earlier "hidden until scrolled past the cover" behavior —
 * the .is-visible class this used to need is no longer applied/required,
 * left harmless if still present anywhere), and still pinned to the top
 * of the viewport once scrolled past.
 */
.gallery-chapter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	padding: 18px 2.5vw;
	margin: 0 -2.5vw 8px;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 10;
}

.gallery-chapter-nav.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Single-section galleries (2026-07-24) — the nav would otherwise show
 * just one link repeating the section's own already-visible title.
 * visibility:hidden (not display:none) so it still occupies its normal
 * box, keeping the gap between the header and the centered chapter title
 * identical to when the nav genuinely renders. */
.gallery-chapter-nav-invisible {
	visibility: hidden;
	pointer-events: none;
}

.gallery-chapter-nav a {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #50575e;
	text-decoration: none;
}

.gallery-chapter-nav a:hover {
	color: #1d2327;
	text-decoration: underline;
}

.gallery-chapter-title {
	font-size: 24px;
	font-weight: 600;
	margin: 40px 0 16px;
	color: #1d2327;
	text-align: center;
	scroll-margin-top: 24px;
}

/*
 * Per-chapter filter chips (2026-07-28 — Selfie box capture-mode filter,
 * Vendégkönyv name filter) — rendered by sibling plugins into the
 * gallery_chapter_filter_bar action, right below a chapter's title. A
 * modest rounded-RECTANGLE border only (8px), never a pill/oval — this
 * project's hard "no oval buttons" rule; a chip's width naturally varies
 * with its label length, so it can never read as the allowed circle
 * (width===height) shape either, it's specifically the rounded-rectangle
 * the rule also permits.
 */
.gallery-chapter-filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 16px;
}

.gallery-filter-chip {
	appearance: none;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.2;
	padding: 6px 14px;
	cursor: pointer;
}

.gallery-filter-chip:hover {
	border-color: #8c8f94;
}

.gallery-filter-chip.is-active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

/*
 * Pic-Time-style masonry (2026-07-24): CSS multi-column layout rather than
 * a fixed grid — about 3 large portrait photos side by side at desktop
 * width, each keeping its own natural aspect ratio (no square cropping),
 * flowing into whichever column is currently shortest. break-inside:avoid
 * keeps a photo from being split across two columns; the bottom margin
 * (not a grid/column gap) is what actually produces the vertical spacing,
 * since column-gap only affects the horizontal gutters between columns.
 */
.gallery-grid {
	column-count: 3;
	column-gap: 10px;
}

.gallery-video-section {
	background: #f0f0f1;
	border-radius: 8px;
	padding: 16px;
	margin-top: 16px;
}

/*
 * Flexbox, NEM a fotó-rács CSS multi-column mintája (2026-07-21, "a videót
 * a galériában igazítsd a víszintes tengely mentén középre") — a
 * column-count alapú elrendezés a bal szélső oszlopba tölti az elemeket,
 * ami 1-2 videónál (a jellemző eset) vizuálisan balra tolva jelent meg,
 * sosem középre. A flex + justify-content:center egy videónál is, többnél
 * is középre rendezi a csoportot.
 */
.gallery-video-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/*
 * 2026-07-21, user kérése: "legyen ugyanolyan magas, mint a galériában a
 * fekvő képek" — a korábbi 480px-es max-width sokkal keskenyebbre (és ezzel
 * 16:9 arány mellett sokkal alacsonyabbra) fogta a videót, mint a
 * .gallery-content teli szélességű (nincs saját max-width, csak 2.5vw
 * oldalpadding) fotó-rácsban megjelenő fekvő képek. A teljes szélesség
 * (max-width megszüntetve) viszont a user visszajelzése szerint már túl
 * nagy volt — 960px a középút a két végpont (480px / teljes szélesség)
 * között.
 */
.gallery-video-item {
	position: relative;
	display: block;
	width: 100%;
	max-width: 960px;
	flex: 1 1 700px;
	padding: 0;
	border: none;
	background: #000;
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
}

.gallery-video-item img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.85;
}

.gallery-video-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
	color: #fff;
	text-shadow: 0 0 6px rgba(0, 0, 0, .6);
	pointer-events: none;
}

.gallery-video-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 8px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .75));
	color: #fff;
	font-size: 12px;
	text-align: left;
}

.gallery-slideshow-overlay {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-slideshow-overlay[hidden] {
	display: none;
}

.gallery-slideshow-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.35s ease;
}

.gallery-slideshow-img.is-fading {
	opacity: 0;
}

.gallery-slideshow-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	color: #fff;
	font-size: 13px;
}

/* Kör alakú vezérlőgombok (2026-07-21, "a szöveges gombok borzasztóak
 * voltak") — lejátszás/szünet, sebesség (3 fokozat) és némítás/hangszóró,
 * mind fehér, félig áttetsző kör, sötét diavetítés-háttéren. */
.gallery-slideshow-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gallery-slideshow-icon-btn:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* 2026-07-21 — a user szerint a 3 külön kör "sebesség" gomb nem
 * tetszett; helyette EGY elnyújtott pirula-alakú egységben ül a 3
 * fokozat, szöveges ×0,5 / ×1 / ×2 felirattal (nem ikonnal). A
 * .gallery-icon-btn class-t a gombok megtartják a tooltip miatt
 * (.gallery-icon-btn[data-tooltip]::after), a kör-alakot viszont ez a
 * blokk írja felül szegmens-kinézetre. */
.gallery-slideshow-speed-group {
	display: inline-flex;
	align-items: center;
	height: 44px;
	box-sizing: border-box;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.12);
}

.gallery-slideshow-speed-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 100%;
	min-width: 40px;
	padding: 0 12px;
	margin: 0;
	border: none;
	border-radius: 18px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gallery-slideshow-speed-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.gallery-slideshow-speed-btn.is-active {
	background: #fff;
	color: #1d2327;
}

.gallery-video-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.gallery-video-lightbox-overlay[hidden] {
	display: none;
}

.gallery-video-lightbox-frame-wrap {
	position: relative;
	width: 100%;
	max-width: 1600px;
	aspect-ratio: 16 / 9;
	margin: auto;
}

@media (max-width: 782px) {
	.gallery-video-lightbox-overlay {
		padding: 16px;
	}
}

.gallery-video-lightbox-frame-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.gallery-thumb-wrap {
	position: relative;
	break-inside: avoid;
	margin-bottom: 10px;
	overflow: hidden;
	background: #f7f7f7;
	line-height: 0;
}

/* Kosárba tett darabszám a rács-nézetben (2026-07-27 explicit kérés) —
   SZÁNDÉKOSAN a .gallery-thumb-cart gombon KÍVÜL, saját abszolút
   pozícióval a bal alsó sarokban (a kosár-ikon a jobb felsőben van) — a
   kerek ikon-gombokon lévő overflow:hidden levágná, ha a gombon belül
   próbálnánk elhelyezni. Mindig hidden, amíg a JS (refreshThumbCartState())
   0 fölé nem állítja a darabszámot. */
.gallery-thumb-cart-qty-badge {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 2;
	background: #2e7d32;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	min-width: 18px;
	padding: 4px 5px;
	border-radius: 3px;
	text-align: center;
}

.gallery-thumb {
	width: 100%;
	height: auto;
	display: block;
	cursor: pointer;
	transition: transform 0.3s ease;
}

/* Bumeráng-jelvény (2026-07-28, selfie-box Boomerang fotók) — a rács-nézet mindig
   statikus első-kockát mutat (l. WatermarkService), ez az egyetlen jelzés a
   vendégnek, hogy a kép ténylegesen animált és nagyítva le is fog játszódni.
   Top-right már foglalt (.gallery-thumb-controls), bottom-left is (kosár-
   darabszám), ezért top-left. Mindig látható, nem hover-függő (informatív, nem
   akció) és pointer-events:none, hogy ne zavarja a kép kattintását/kijelölését. */
.gallery-thumb-gif-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 3px;
	background: rgba(29, 35, 39, 0.75);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 3px;
	letter-spacing: 0.03em;
	pointer-events: none;
}

.gallery-thumb:hover {
	transform: scale(1.04);
}

/* Per-thumbnail heart/flag/hide/download row (2026-07-24 revision) — each
 * icon is now individually hover-controlled (not the container as a whole),
 * so an active heart or flag can stay visible even without hovering while
 * hide/download (and an INACTIVE heart/flag) stay hidden until hover —
 * see the .is-favorite/.is-flagged overrides below. opacity+visibility
 * (not display:none) avoids layout shift and keeps keyboard-focus access. */
.gallery-thumb-controls {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
}

/* Collapsed-by-default layout (2026-07-31, "az üres ikonok helyére
 * tolódjanak el jobbra") — width+margin (not just opacity) collapse to 0
 * for every inactive icon, so an active heart/flag/etc. actually shifts
 * flush to the container's right edge instead of leaving a gap where a
 * hidden icon used to sit. gap was moved from the container onto each
 * button as margin-left so it can collapse per-icon too (a shared flex
 * `gap` would still render between zero-width siblings). Hovering the
 * thumb (below) animates every icon's width/margin back to full, which is
 * what actually reflows them all back out to their normal spaced row. */
.gallery-thumb-heart,
.gallery-thumb-flag,
.gallery-thumb-note,
.gallery-thumb-hide,
.gallery-thumb-download,
.gallery-thumb-cart,
.gallery-thumb-share,
.gallery-thumb-photobook {
	opacity: 0;
	visibility: hidden;
	width: 0;
	margin-left: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, width 0.2s ease, margin-left 0.2s ease;
}

.gallery-thumb-wrap:hover .gallery-thumb-heart,
.gallery-thumb-wrap:hover .gallery-thumb-flag,
.gallery-thumb-wrap:hover .gallery-thumb-note,
.gallery-thumb-wrap:hover .gallery-thumb-hide,
.gallery-thumb-wrap:hover .gallery-thumb-download,
.gallery-thumb-wrap:hover .gallery-thumb-cart,
.gallery-thumb-wrap:hover .gallery-thumb-share,
.gallery-thumb-wrap:hover .gallery-thumb-photobook,
.gallery-thumb-controls:focus-within .gallery-thumb-heart,
.gallery-thumb-controls:focus-within .gallery-thumb-flag,
.gallery-thumb-controls:focus-within .gallery-thumb-note,
.gallery-thumb-controls:focus-within .gallery-thumb-hide,
.gallery-thumb-controls:focus-within .gallery-thumb-download,
.gallery-thumb-controls:focus-within .gallery-thumb-cart,
.gallery-thumb-controls:focus-within .gallery-thumb-share,
.gallery-thumb-controls:focus-within .gallery-thumb-photobook,
.gallery-thumb-share.is-menu-open {
	opacity: 1;
	visibility: visible;
	width: 32px;
	margin-left: 6px;
	pointer-events: auto;
}

/* Only the ACTIVE state stays visible without hover — never hide/download,
 * and never an inactive heart/flag/note (2026-07-24 explicit request). A
 * noted photo staying visible mirrors the same "something's here" signal
 * as a favorited/flagged one, so feedback already left on a photo is
 * never accidentally missed at a glance. Also at full width/margin (not
 * just opacity) so it sits in the normal row instead of the collapsed
 * flush-right cluster even without hovering. */
.gallery-thumb-heart.is-favorite,
.gallery-thumb-flag.is-flagged,
.gallery-thumb-note.has-notes,
.gallery-thumb-cart.is-in-cart,
.gallery-thumb-photobook.is-picked {
	opacity: 1;
	visibility: visible;
	width: 32px;
	margin-left: 6px;
	pointer-events: auto;
}

/* Bulk-selection badge (2026-07-24) — top-left circle checkbox, only
 * shown once selection mode is switched on via #gallery-selection-toggle
 * (body.gallery-selection-mode), so it never competes visually with the
 * top-right hover controls. */
.gallery-selection-badge {
	display: none;
	position: absolute;
	top: 8px;
	left: 8px;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(29, 35, 39, 0.35);
	cursor: pointer;
	z-index: 5;
}

body.gallery-selection-mode .gallery-selection-badge {
	display: block;
}

.gallery-thumb-wrap.is-selected .gallery-selection-badge {
	background: #1d2327;
	border-color: #1d2327;
}

.gallery-thumb-wrap.is-selected .gallery-selection-badge::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.gallery-thumb-wrap.is-selected {
	outline: 3px solid #1d2327;
	outline-offset: -3px;
}

body.gallery-selection-mode .gallery-thumb {
	cursor: pointer;
}

/* Hides the heart/flag/note/download/cart icon row on every thumb while
 * bundle-component picking is active (2026-08-01 explicit request: "ez
 * zavaró lehet" — desktop and mobile both). !important since
 * .gallery-thumb-controls's own display:flex and the mobile
 * .gallery-thumb-controls-visible override both need to lose regardless
 * of specificity/source order. */
body.gallery-bundle-picking-active .gallery-thumb-controls {
	display: none !important;
}

/* 2026-07-27 explicit kérés kiegészítés ("A bundle termék kiválasztása
   közben a kép bal alsó sarkában lévő zöld badge is tűnjön el") — a
   kosár-darabszám badge a .gallery-thumb-controls-en KÍVÜL él (l. a
   markup docblokkját, overflow:hidden miatt), ezért a fenti szabály nem
   fedte le; itt külön el kell rejteni ugyanabban a módban. */
body.gallery-bundle-picking-active .gallery-thumb-cart-qty-badge {
	display: none !important;
}

/* Bundle component photo picking (2026-07-24, "kombinált csomagok") — a
 * distinct red frame (vs. the dark "is-selected"/bulk-mode outline above)
 * so it reads as "assigned to THIS product in the bundle", not the regular
 * bulk selection. inset box-shadow instead of outline (2026-08-01, "Telefonon
 * nem is jelenik meg a jelölés") — outline-offset:-Npx wasn't rendering
 * reliably on mobile browsers; an inset shadow always paints inside the
 * thumb's own edge and isn't subject to that. Much thicker too (8px, was
 * 3px) so it's unmistakable at a glance. */
.gallery-thumb-wrap.is-bundle-selected {
	box-shadow: inset 0 0 0 8px #d63638;
}

/* Per-photo copy-count chip while bundle-component picking is active
 * (2026-08-01, "egy képből több darabot is ugyanahhoz a tételhez adnak") —
 * purely informational; click anywhere else on the thumb to add another
 * copy. Removal is the separate trash-icon circle right next to it (see
 * .gallery-thumb-bundle-remove-btn below and updateThumbBundleBadge()'s
 * own docblock for why a plain click on the count alone wasn't a clear
 * enough "tap to remove" cue). */
.gallery-thumb-bundle-qty-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #d63638;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	border-radius: 10px;
}

/* Dedicated "remove one copy" trash-can circle (2026-08-01 explicit
 * request) — sits immediately right of the qty chip above. */
.gallery-thumb-bundle-remove-btn {
	position: absolute;
	top: 6px;
	left: 34px;
	z-index: 2;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #d63638;
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

/* Bigger touch targets on mobile (2026-08-01 explicit request: "a bal
 * felső sarokban lévő x1 jelölő kör is lehet nagyobb telefonon... legyen
 * akkora mint a jobb oldali kör ikonok") — matches the 32px size the
 * favorite/flag/note/download/cart circles already use on mobile. */
@media (max-width: 640px) {
	.gallery-thumb-bundle-qty-badge {
		min-width: 32px;
		height: 32px;
		font-size: 14px;
		border-radius: 16px;
	}

	.gallery-thumb-bundle-remove-btn {
		width: 32px;
		height: 32px;
		left: 44px;
	}

	.gallery-thumb-bundle-remove-btn svg {
		width: 14px;
		height: 14px;
	}
}

/* Explicit "Kiválasztás" tap target, bottom-left, while bundle picking is
 * active (2026-08-01, "Telefonon lehet jobb lenne egy olyan szelekció mint
 * a Kiválasztás gomb") — mobile-only (the border + qty chip are clear
 * enough with a mouse); does the exact same increment as tapping the
 * thumb itself. */
.gallery-thumb-bundle-select-btn {
	display: none;
	position: absolute;
	bottom: 6px;
	left: 6px;
	z-index: 2;
	padding: 5px 10px;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

@media (max-width: 640px) {
	/* 2x bigger (2026-08-01 follow-up: "túl kicsi. legyen 2x nagyobb") —
	 * was padding:5px 10px/font-size:11px. */
	.gallery-thumb-bundle-select-btn {
		display: block;
		padding: 10px 20px;
		font-size: 22px;
	}
}

/* Floating "pick photos for this bundle component" bar (2026-07-24) —
 * same fixed-bottom pill treatment as .gallery-bulk-bar, shown instead of
 * (never alongside) the product picker while a bundle component's photos
 * are being chosen straight from the grid. */
.gallery-bundle-pick-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100003;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #d63638;
	color: #fff;
	padding: 12px 18px;
	border-radius: 40px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Piros → zöld váltás, amint a szükséges képszám teljesült (2026-07-27
   explicit kérés) — ugyanaz a zöld, mint a picker-kártya .is-complete
   állapotánál (l. .gallery-product-picker-bundle-component.is-complete
   háttere / a check-ikon színe), csak itt a lebegő sávra alkalmazva,
   amíg a kiválasztás zajlik (l. refreshBundlePickLabel() az inline
   scriptben). */
.gallery-bundle-pick-bar.is-complete {
	background: #2e7d32;
}

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

.gallery-bundle-pick-label {
	font-size: 13px;
	white-space: nowrap;
}

.gallery-product-picker-bundle-components {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
}

/* Vertical, equal-width rows (2026-08-01 explicit request) — name / variation
 * + qty / full-width button, replacing the earlier single side-by-side row. */
.gallery-product-picker-bundle-component {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	/* A touch lighter than the open-category highlight (#eaf1ff) —
	 * 2026-08-01 explicit request, replacing the earlier plain grey. */
	background: #f3f8ff;
	border-radius: 8px;
}

.gallery-product-picker-bundle-component-name {
	font-size: 13px;
	font-weight: 600;
}

.gallery-product-picker-bundle-component-row2 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: #50575e;
}

.gallery-product-picker-bundle-component-variation {
	text-align: left;
}

.gallery-product-picker-bundle-component-count {
	text-align: right;
	white-space: nowrap;
}

.gallery-product-picker-bundle-component-picked {
	color: #1d2327;
}

/*
 * 2026-07-21, user kérése: "amelyiknél az összes kép ki lett választva,
 * annak legyen zöld pipája és halványzöld háttere" — a JS
 * refreshBundleComponentRow() kapcsolja be az .is-complete osztályt, amint
 * picked >= a data-component-qty-ban tárolt szükséges darabszám.
 */
.gallery-product-picker-bundle-component.is-complete {
	background: #eaf7ed;
}

.gallery-product-picker-bundle-component-check {
	display: none;
	position: relative;
	width: 14px;
	height: 14px;
	margin-right: 4px;
	border-radius: 50%;
	background: #2e7d32;
	vertical-align: middle;
}

.gallery-product-picker-bundle-component.is-complete .gallery-product-picker-bundle-component-check {
	display: inline-block;
}

.gallery-product-picker-bundle-component-check::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 2px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.gallery-product-picker-bundle-component-pick {
	width: 100%;
}

@media (max-width: 640px) {
	/* Compound selector so this reliably beats the later, equal-specificity
	 * .gallery-btn base padding/font-size rule regardless of source order
	 * — same class of bug as the .gallery-btn-blue/.gallery-btn-white
	 * fixes above. */
	.gallery-btn.gallery-product-picker-bundle-component-pick {
		padding: 14px 20px;
		font-size: 16px;
	}
}

/* Floating bulk-action bar (2026-07-24) — appears once at least one photo
 * is selected, fixed to the bottom of the viewport so it stays reachable
 * regardless of scroll position. */
.gallery-bulk-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100003;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #1d2327;
	color: #fff;
	padding: 12px 18px;
	border-radius: 40px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.gallery-bulk-bar[hidden] {
	display: none;
}

.gallery-bulk-count {
	font-size: 13px;
	white-space: nowrap;
}

.gallery-bulk-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: #1d2327;
	border: none;
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.gallery-bulk-action:hover {
	background: #e7e7e7;
}

/* Ikon mindig a markupban, de csak az egyik látszik (2026-07-19) — lásd
 * render_gallery() saját megjegyzését a bulk-bar gombjainál. Asztali
 * nézeten a felirat marad (olvashatóbb, van hely), telefonon az ikon vált
 * be, hogy a sáv szélessége a keskeny viewportba is beférjen. */
.gallery-bulk-action-icon {
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

@media (max-width: 640px) {
	/* Fixed + center-transform sáv szélessége eddig korlátlan volt — 4
	 * szöveges gomb + számláló + bezáró könnyen szélesebb lett, mint egy
	 * telefon viewport, ezért a sáv szélei a képernyőn (és a képen) kívülre
	 * kerültek. Az ikon-only gombok már önmagukban is beférnek, a
	 * max-width+overflow pedig biztonsági háló marad, ha mégsem. */
	.gallery-bulk-bar {
		max-width: calc(100vw - 24px);
		overflow-x: auto;
		gap: 8px;
		padding: 10px 14px;
	}

	.gallery-bulk-action-icon {
		display: inline-flex;
		width: 16px;
		height: 16px;
	}

	.gallery-bulk-action-label {
		display: none;
	}

	.gallery-bulk-action {
		padding: 8px 12px;
	}
}

.gallery-bulk-cancel {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* "Termék hozzáadása" slide-out (2026-07-16, Shop-integráció 4. szakasz). */
.gallery-product-picker-overlay {
	position: fixed;
	inset: 0;
	z-index: 100004;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: flex-end;
}

.gallery-product-picker-overlay[hidden] {
	display: none;
}

/* Flex column so the footer (total + "Ugrás a kosárhoz") can stay pinned
 * to the very bottom (2026-07-16 explicit request: "legyen teljesen az
 * aljára igazítva") regardless of how long the product list is — only
 * .gallery-product-picker-list itself scrolls (see below), the header
 * (photo preview, close button) and footer both stay fixed in place. */
.gallery-product-picker-panel {
	position: relative;
	width: 380px;
	max-width: 90vw;
	height: 100%;
	background: #fff;
	padding: 24px 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.gallery-product-picker-list {
	flex: 1;
	overflow-y: auto;
}

.gallery-product-picker-panel h3 {
	margin: 0 0 4px;
	font-size: 20px;
}

.gallery-product-picker-subtitle {
	margin: 0 0 16px;
	color: #767c82;
	font-size: 13px;
}

/* Photo preview (2026-07-16) — a single real thumbnail, or a small fanned
 * stack for a bulk pick (see renderPickerPhotos() in the inline script).
 * Empty (no photo yet) collapses to zero height via :empty. */
.gallery-product-picker-photos {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.gallery-product-picker-photos:empty {
	display: none;
}

.gallery-product-picker-photos img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	display: block;
}

.gallery-product-picker-photos.is-stack {
	position: relative;
	height: 90px;
}

.gallery-product-picker-photos.is-stack img {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -45px;
}

/* Footer (2026-07-16) — running total + "Ugrás a kosárhoz", sits at the
 * bottom of the (scrolling) panel content, not fixed/sticky — same "plain
 * flow" treatment as the rest of this panel. */
.gallery-product-picker-footer {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #ececec;
}

.gallery-product-picker-footer-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
	font-size: 14px;
}

.gallery-product-picker-footer-total strong {
	font-size: 18px;
}

.gallery-product-picker-goto-cart {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px;
}

/* Add-to-cart confirmation toast (2026-07-16 explicit request: "jelenjen
 * meg egy világos kék héátterű szöveg, hogy a terméket hozzáadtuk a
 * kosarához") — shown briefly after Kosárba, panel stays open (see
 * showPickerToast() in the inline script). */
.gallery-product-picker-toast {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 6px;
	background: #eaf1ff;
	color: #1d2327;
	font-size: 13px;
	text-align: center;
}

.gallery-product-picker-toast[hidden] {
	display: none;
}

.gallery-product-picker-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #1d2327;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* Category accordion (2026-07-16) — one level up from the existing
 * per-product item accordion below; opening a category closes every other
 * one (see the JS), while products WITHIN the open category keep their own
 * independent toggle behaviour. */
.gallery-product-picker-category {
	border: 1px solid #dcdcde;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}

.gallery-product-picker-category-header {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px;
	border: none;
	background: #f7f7f7;
	cursor: pointer;
	text-align: left;
}

.gallery-product-picker-category-header img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
}

.gallery-product-picker-category-name {
	font-size: 14px;
	font-weight: 700;
}

.gallery-product-picker-category-body {
	padding: 10px;
}

/* Currently-open category highlight (2026-07-16 explicit request: "legyen
 * királykék színű, a termék neve körüli háttér pedig világosabb kék, hogy
 * jól elkülönüljön a többi terméktől") — royal blue on the category's own
 * header, a lighter blue behind each product's name row within it, so the
 * open category reads as a distinct highlighted block against the rest of
 * the (collapsed, neutral-grey) list. */
.gallery-product-picker-category.is-open .gallery-product-picker-category-header {
	background: #4169e1;
	color: #fff;
}

/* Whole card, not just the name row (2026-07-16 follow-up: "vidd át a
 * mennyiség és kosárba gombok hátterére is, hogy egységes kék legyen a
 * terméket körbe vevő box") — the item header AND body share the same
 * light-blue box so the qty/confirm row reads as part of the same
 * highlighted card, not a separate white strip underneath it. */
.gallery-product-picker-category.is-open .gallery-product-picker-item {
	background: #eaf1ff;
}

.gallery-product-picker-category.is-open .gallery-product-picker-item-header {
	background: transparent;
}

/* Alkategória szint (2026-07-26 explicit kérés, kétszintű kategóriák,
   pl. "Vászonképek" alatt "Hagyományos formák"/"Különleges formák") —
   ugyanaz a fejléc/törzs/accordion minta, mint a fenti fő kategóriánál,
   kicsit behúzva (margin-left) és halványabb fejléc-háttérrel, hogy
   vizuálisan a fő kategórián BELÜLI szintként olvasódjon. */
.gallery-product-picker-subcategory {
	border: 1px solid #dcdcde;
	border-radius: 6px;
	margin: 0 0 10px 14px;
	overflow: hidden;
}

.gallery-product-picker-subcategory-header {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	background: #fbfbfb;
	cursor: pointer;
	text-align: left;
}

.gallery-product-picker-subcategory-header img {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
}

.gallery-product-picker-subcategory-name {
	font-size: 13px;
	font-weight: 700;
}

.gallery-product-picker-subcategory-body {
	padding: 10px 0 0;
}

.gallery-product-picker-subcategory.is-open .gallery-product-picker-subcategory-header {
	background: #4169e1;
	color: #fff;
}

.gallery-product-picker-subcategory.is-open .gallery-product-picker-item {
	background: #eaf1ff;
}

.gallery-product-picker-subcategory.is-open .gallery-product-picker-item-header {
	background: transparent;
}

.gallery-product-picker-item {
	border: 1px solid #ececec;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
}

.gallery-product-picker-item-header {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px;
	border: none;
	background: #fff;
	cursor: pointer;
	text-align: left;
}

.gallery-product-picker-item-header img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.gallery-product-picker-item-thumb {
	cursor: zoom-in;
}

/* Plain full-size overlay (2026-07-31) — separate from the main gallery's
 * chaptered lightbox, since these are single product photos. */
.gallery-product-picker-zoom-overlay {
	position: fixed;
	inset: 0;
	z-index: 100005;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	padding: 40px;
	box-sizing: border-box;
}

/* An unconditional `display: flex` above beats the UA [hidden] default
 * the same way .gallery-btn's did (see that rule's own comment) — this
 * keeps the overlay actually hidden until JS clears the attribute. */
.gallery-product-picker-zoom-overlay[hidden] {
	display: none !important;
}

.gallery-product-picker-zoom-overlay img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

.gallery-product-picker-zoom-close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.gallery-product-picker-item-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
}

.gallery-product-picker-item-price {
	font-size: 13px;
	color: #50575e;
	white-space: nowrap;
}

.gallery-product-picker-item-price-old {
	font-size: 12px;
	color: #8a8f98;
	text-decoration: line-through;
	white-space: nowrap;
}

.gallery-product-picker-item-badge {
	background: #d63638;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Kosárba tett darabszám — zöld négyzetes jelző (2026-07-26 explicit
   kérés), termék-, alkategória- és kategória-sorban egyaránt. A .gallery-
   product-picker-item-name-en lévő flex:1 önmagában a sor jobb szélére
   tolja az utána következő elemeket. */
.gallery-product-picker-item-cart-badge,
.gallery-product-picker-subcategory-cart-badge,
.gallery-product-picker-category-cart-badge {
	background: #2e7d32;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	min-width: 18px;
	padding: 4px 5px;
	border-radius: 3px;
	text-align: center;
	white-space: nowrap;
	flex-shrink: 0;
}

/* 2026-07-27 javítás (user jelzés: "most a kategória neve és az ikon
   balra rendeződik ha van kiválasztott termék. Maradjon középen!") — a
   kategória/alkategória fejléc-gombok középre igazítását a TÉMA saját,
   minden <button>-re vonatkozó justify-content:center szabálya adja (ezt
   a mi CSS-ünk sosem írta felül explicit módon). A badge korábbi
   margin-left:auto-ja flex-elemként vett részt a sorban, és a
   margin:auto flex-tengelyen mindig felülírja a justify-content-et — ez
   tolta balra az ikon+név csoportot, amint megjelent egy badge. A
   javítás: a badge-et KIVESSZÜK a flex-sorból (position:absolute a
   fejléc jobb szélén, position:relative a fejlécen), így a téma
   középre-igazítása az ikon+név csoporton érintetlen marad, a badge
   pedig önállóan lebeg a jobb szélen. */
.gallery-product-picker-category-header,
.gallery-product-picker-subcategory-header {
	position: relative;
}

.gallery-product-picker-subcategory-cart-badge,
.gallery-product-picker-category-cart-badge {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.gallery-product-picker-item-body {
	padding: 0 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gallery-product-picker-item-body[hidden] {
	display: none;
}

.gallery-product-picker-group-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
}

.gallery-product-picker-group-select {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 6px 8px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
}

/* Quantity + "Kosárba" on one row (2026-07-16 explicit request: "A
 * mennyiség kerüljön egy vonalba a kosárba gombbal és egyeztesd a
 * méreteiket. Magasság azonos. A mennyiség gomb lehet rövidebb mint a
 * kosárba.") — both given the SAME explicit height/box-sizing so they
 * align exactly regardless of each control's own default metrics (a
 * <button> and a <input type=number> don't share a natural height
 * otherwise), with the qty field deliberately narrower since it only
 * ever holds a short number. */
.gallery-product-picker-qty-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.gallery-product-picker-qty-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
	white-space: nowrap;
}

/* Two-class specificity is deliberate — the theme (Betheme) applies its
 * own width:230px to every native input[type=number] at equal (0,1,0)
 * specificity to a plain ".gallery-product-picker-qty" rule, and wins the
 * tie by cascade order. Qualifying with the row wrapper bumps this to
 * (0,2,0) so it wins regardless of stylesheet order — same class of bug
 * as the theme-padding-on-buttons issue documented in this plugin's own
 * memory notes. */
.gallery-product-picker-qty-row .gallery-product-picker-qty {
	width: 56px;
	height: 38px;
	margin: 0;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
}

.gallery-product-picker-qty-row .gallery-product-picker-confirm {
	height: 38px;
	box-sizing: border-box;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
}

/* "ha a digitális összes kép letöltése termék a kosárban van, utólag se
 * lehessen hozzáadni a kiválasztott kép letöltését" (2026-07-22) — a
 * gallery-btn:disabled szabály (lentebb) már gondoskodik a letiltott
 * "Kosárba" gomb kinézetéről, ez csak a hozzá tartozó rövid
 * tájékoztató-szöveg stílusa. */
.gallery-product-picker-package-conflict-note {
	margin: 0 0 10px;
	padding: 8px 10px;
	background: #fdf2f2;
	border: 1px solid #f1c6c6;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #8a2a2a;
}

.gallery-thumb-controls-visible {
	position: static;
	opacity: 1;
	visibility: visible;
	margin-top: 6px;
	justify-content: center;
}

.gallery-thumb-heart,
.gallery-thumb-flag,
.gallery-thumb-note,
.gallery-thumb-hide,
.gallery-thumb-download,
.gallery-thumb-cart,
.gallery-thumb-share,
.gallery-thumb-photobook {
	/* width is NOT set here (2026-07-31 fix) — it's owned entirely by the
	 * collapsed/hover/active state rules above (0 vs 32px). This rule used
	 * to also set width:32px unconditionally, which — same specificity,
	 * later in the file — always won the cascade over the collapsed
	 * state's width:0, so icons never actually shrank; only their 6px
	 * margin-left was animating, which read as "barely moves". */
	height: 32px;
	flex-shrink: 0;
	box-sizing: border-box;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #1d2327;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	overflow: hidden;
}

/* Monochrome only (2026-07-24: no colored icons anywhere in the
 * gallery) — an active favorite/flag/note is a solid dark fill, not a
 * brand color. */
.gallery-thumb-heart.is-favorite,
.gallery-thumb-flag.is-flagged,
.gallery-thumb-note.has-notes,
.gallery-thumb-cart.is-in-cart,
.gallery-thumb-photobook.is-picked {
	background: #1d2327;
	color: #fff;
}

/* Share flyout (2026-08-09) — a plain white card of text rows, positioned
 * to line up right under the icon row (8px controls offset + 32px icon
 * height + 4px gap). Lives as a sibling of .gallery-thumb-controls inside
 * .gallery-thumb-wrap (already position:relative), not nested inside the
 * button itself, so it isn't swept up by the icon-collapse width/opacity
 * rules above. */
.gallery-share-menu {
	position: absolute;
	top: 44px;
	right: 8px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 160px;
	padding: 6px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.gallery-share-menu[hidden] {
	display: none;
}

.gallery-share-menu button {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: none;
	background: none;
	border-radius: 6px;
	font-size: 13px;
	color: #1d2327;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.gallery-share-menu button:hover {
	background: #f2f2f2;
}

/* Lightbox variant — 2026-07-20 óta a share gomb ismét a felső ikonsor "3
 * pötty" menüjében lakik (l. .gallery-lightbox-more-menu), ezért ez a
 * flyout is onnan, lefelé nyílik, nem alulról felfelé. */
.gallery-lightbox-share-menu {
	top: 60px;
	bottom: auto;
	right: 24px;
}

/* "3 pötty" gyűjtő-menü (2026-07-19, majd 2026-07-20 explicit visszakérés:
 * "inkább tegyük fel ismét a jobb felső sarokba a többi közé... A kosár
 * legyen a legszélső") — a felső ikonsor (.gallery-lightbox-controls) egyik
 * flex-eleme, a letöltés és a kosár gomb között, l. render_gallery() saját
 * megjegyzését a markupnál. position:relative (nem absolute), hogy a saját
 * dropdown-menüje ehhez, ne a lightbox egészéhez horgonyozzon. */
.gallery-lightbox-more-wrap {
	position: relative;
}

.gallery-lightbox-more {
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gallery-lightbox-more-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 170px;
	padding: 6px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.gallery-lightbox-more-menu[hidden] {
	display: none;
}

.gallery-lightbox-more-menu button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: none;
	background: none;
	border-radius: 6px;
	font-size: 13px;
	color: #1d2327;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.gallery-lightbox-more-menu button:hover {
	background: #f2f2f2;
}

/* A dropdownba költözés után a .gallery-lightbox-note.has-notes régi
 * fehér-a-sötét-körön szabálya (l. feljebb) itt láthatatlan lenne (fehér
 * gomb fehér menü hátterén) — halvány kék highlighttal jelezzük helyette,
 * hogy ehhez a fotóhoz már van megjegyzés. */
.gallery-lightbox-more-menu .gallery-lightbox-note.has-notes {
	background: #eaf1ff;
	color: #1d2327;
}

.gallery-thumb-restore {
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.gallery-hidden-title {
	color: #8a8f98;
}

.gallery-grid-hidden .gallery-thumb {
	opacity: 0.55;
}

.gallery-empty {
	color: #646970;
	padding: 40px 0;
}

.gallery-password-form {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 20px;
}

.gallery-password-form input[type="password"] {
	padding: 10px 14px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 14px;
	width: 220px;
}

.gallery-password-error {
	color: #d63638;
	font-size: 14px;
}

/* Feltételek-gate (2026-07-19) — a jelszó-gate mintáját folytatja, csak a
 * form helyén egy tetszőleges hosszúságú, admin-szerkesztett szöveg jelenik
 * meg (a feltétel-sablon body-ja), balra zárva és korlátozott szélességgel,
 * hogy hosszabb szövegnél is olvasható maradjon, nem a password-gate
 * középre-igazított, egysoros elrendezését követi. */
.gallery-consent-gate {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.gallery-consent-body {
	margin: 20px 0;
	line-height: 1.6;
	color: #3c434a;
}

.gallery-consent-form {
	text-align: center;
	margin-top: 24px;
}

.gallery-btn {
	background: #1d2327;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
}

.gallery-btn:hover {
	background: #2c3338;
}

.gallery-btn:disabled {
	background: #c3c4c7;
	/* Plain #3c434a still read as too light (2026-08-01 follow-up) — the
	 * browser's own native dimming of disabled controls fades whatever
	 * color is set, so pure black + forcing opacity back to 1 is what
	 * actually reads as legible against the grey background. */
	color: #000 !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

.gallery-btn:disabled:hover {
	background: #c3c4c7;
}

/* The theme's own button reset sets `display` on every <button>, which
 * (being an author-origin rule) outranks the UA [hidden] default
 * regardless of specificity — without this, a hidden .gallery-btn still
 * renders. Forces every hidden gallery button to actually disappear. */
.gallery-btn[hidden] {
	display: none !important;
}

/* A guest identifying themselves before their first favorite-click
 * (2026-07-24) — deliberately a lighter/smaller overlay than the
 * lightbox (z-index just above it so it can appear ON TOP of an open
 * lightbox too, since the lightbox's own heart button can trigger it). */
.gallery-guest-email-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.gallery-guest-email-overlay[hidden] {
	display: none;
}

.gallery-guest-email-box {
	background: #fff;
	border-radius: 8px;
	padding: 28px 32px;
	max-width: 360px;
	text-align: center;
}

.gallery-guest-email-box p {
	margin: 0 0 4px;
	font-size: 15px;
}

.gallery-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.gallery-lightbox-overlay[hidden] {
	display: none;
}

#gallery-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.gallery-lightbox-close {
	position: absolute;
	top: 16px;
	right: 24px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	/* 2026-07-27 explicit kérés ("a teljes nézet bezárás gombja a kinyíló
	   terméklista alá kerül... hozd feljebb, hogy ne tűnjön el") —
	   ugyanaz a réteg-probléma, mint a fenti .gallery-lightbox-controls
	   ikon-soré: a bezárás gombnak sosem volt saját z-indexe, tehát a
	   .gallery-lightbox-orders panel (z-index:5) alá csúszhatott. Azonos
	   szintre került az ikon-sorral (z-index:10), hogy mindig felül
	   maradjon. Ez a szabály 3 különböző lightboxban (fotó/videó/
	   diavetítés) is megosztott class, de csak a fotó-lightboxnak van
	   versengő panelje — a másik kettőt nem érinti hátrányosan. */
	z-index: 10;
}

/* Diavetítés-indító a teljes képernyős (egy-kép) lightboxban is
 * (2026-07-21 kérés) — a bezárás gombbal tükrözve, bal felső sarokban.
 * A szelektor KÉT osztályt ad meg (.gallery-icon-btn.gallery-lightbox-
 * slideshow-toggle), mert az egyetlen osztályos verziót felülírta a
 * .gallery-icon-btn[data-tooltip] szabály (2 "osztály-szintű" szelektor,
 * position:relative — a tooltip ::after-nek kell), ami specificitásban
 * megelőzte, és a gomb középre (position:relative, statikus flow) csúszott
 * a bal felső sarok helyett (élőben találva 2026-07-21). */
.gallery-icon-btn.gallery-lightbox-slideshow-toggle {
	position: absolute;
	top: 16px;
	left: 24px;
	z-index: 1;
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.gallery-icon-btn.gallery-lightbox-slideshow-toggle:hover {
	background: rgba(255, 255, 255, 0.28);
}

.gallery-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #fff;
	font-size: 56px;
	line-height: 1;
	cursor: pointer;
	padding: 0 16px;
}

.gallery-lightbox-prev {
	left: 8px;
}

.gallery-lightbox-next {
	right: 8px;
}

/* Same icon set as the per-thumb controls, top-right corner (2026-07-24
 * request) — replaces the earlier single bottom-center heart. Positioned
 * to the LEFT of the close (×) button rather than overlapping it. */
.gallery-lightbox-controls {
	position: absolute;
	top: 16px;
	right: 70px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	max-width: calc(100% - 90px);
	/* 2026-07-27 pontosítás (user kérés: "a kinyíló terméklista menü
	   kerüljön a fotó jobb felső sarkában megjelenő ikonok alá, de a
	   fénykép fölé! Így minden ikon látszani fog") — az ikon-sor
	   (szív/zászló/jegyzet/kosár stb.) MINDIG a legfelső réteg kell
	   legyen, magasabb z-index-szel, mint a lentebbi
	   .gallery-lightbox-orders panel (z-index:5) — anélkül az ikon-sor
	   z-index:auto volt, tehát a panel (explicit z-index-szel) fölé
	   kerülhetett, amikor nyitva volt. */
	z-index: 10;
}

/* :not(.gallery-lightbox-cart-wrap) — 2026-07-27 javítás (l. lentebb a
   wrap docblokkját): a kosár-gomb badge-e miatt bevezetett wrap-konténer
   NEM kaphatja meg ezt a kör-alakú/félig-átlátszó gomb-kinézetet, mert ő
   maga nem gomb, csak egy pozicionáló doboz — a benne lévő tényleges
   gomb ugyanezt a kinézetet külön, saját szabályban kapja meg
   (.gallery-lightbox-cart-wrap .gallery-lightbox-cart). */
.gallery-lightbox-controls > *:not(.gallery-lightbox-cart-wrap) {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.gallery-lightbox-heart {
	font-size: 20px;
}

.gallery-lightbox-heart.is-favorite,
.gallery-lightbox-flag.is-flagged,
.gallery-lightbox-note.has-notes,
.gallery-lightbox-cart.is-in-cart {
	color: #1d2327;
	background: #fff;
}

/* Kosárba tett darabszám a lightboxban — javítva 2026-07-27 (user jelzés:
   "a kosár ikon jobb alsó sarkában nem látszik a badge. A kör alakon
   kívüli rész ki van maszkolva") — a badge korábban a KEREK gomb gyereke
   volt, ami levágta a doboz-határon kívülre lógó részét. A badge most a
   gomb MELLETT, egy külön wrap-konténerben él (l. a markupot
   GalleryPageController.php-ban) — a wrap kapja meg a 36×36-os
   helyfoglalást (amit eddig maga a gomb viselt a fenti közös szabályból),
   a gomb pedig a wrap-en BELÜL tölti ki a teljes teret, változatlan
   kör-kinézettel. */
.gallery-lightbox-cart-wrap {
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.gallery-lightbox-cart-wrap .gallery-lightbox-cart {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.gallery-lightbox-cart-wrap .gallery-thumb-cart-qty-badge {
	position: absolute;
	bottom: -6px;
	right: -6px;
}

/* Order panel (2026-07-16, revised same day — "nem a darabszámot akartam
 * elrejteni, hanem a... jobbra kiúsztatni, hogy pl. telefonon ne takarja
 * ki telibe a kép felét") — a fixed right-side sidebar inside the
 * fullscreen lightbox listing which product(s)/qty already cover the
 * currently open photo. The panel itself slides fully off to the right
 * when collapsed (transform, not display:none, so the slide animates),
 * leaving only the small always-visible tab in view. */
/* 2026-07-27 explicit kérés ("A kinyíló terméklista fekete háttere
   legyen") — a korábbi rgba(20,20,20,.92) sötétszürke helyett tiszta
   fekete. */
.gallery-lightbox-orders {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 260px;
	max-width: 80vw;
	background: rgba(0, 0, 0, 0.92);
	color: #fff;
	padding: 70px 20px 20px;
	box-sizing: border-box;
	overflow-y: auto;
	transition: transform 0.25s ease;
	/* 2026-07-27 javítás (user jelzés: "a jobb felső sarokban lévő kör
	   alakú kosár ikonhoz tartozó zöld badge feljebb van rétegben mint a
	   kinyíló termék lista... vidd hátrébb a rétegek között") — a badge
	   (.gallery-thumb-cart-qty-badge) explicit z-index:2-t visel, ami
	   pozicionált elemek közt MINDIG megelőzi a z-index:auto elemeket
	   (mint amilyen ez a panel volt eddig), FÜGGETLENÜL a DOM-
	   sorrendtől — ezért lebegett a badge "a semmiben" a panel fölött.
	   Explicit, a badge-énél magasabb z-index kell ide (és a tab-ra is
	   lentebb), hogy a panel tényleg eltakarja a badge-et, amikor nyitva
	   van. */
	z-index: 5;
}

.gallery-lightbox-orders[hidden] {
	display: none;
}

.gallery-lightbox-orders.is-collapsed {
	transform: translateX(100%);
}

.gallery-lightbox-orders h4 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
}

/* Pull-tab (2026-07-16) — stays put at the right edge regardless of the
 * panel's own collapsed state, so there's always a way back in. Same
 * monochrome circular-icon treatment as the other lightbox controls. */
.gallery-lightbox-orders-tab {
	position: absolute;
	top: 70px;
	right: 280px;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: right 0.25s ease;
	/* Ugyanaz a réteg-javítás, mint a panelnél fentebb — a tab is a
	   kosár-badge (z-index:2) fölé kerül. */
	z-index: 5;
}

.gallery-lightbox-orders-tab[hidden] {
	display: none;
}

.gallery-lightbox-orders-tab.is-collapsed {
	right: 16px;
	background: #2271b1;
}

/* Icon swap (2026-08-19) — OPEN shows the "push away" right-arrow,
 * COLLAPSED shows a left-arrow on a blue background ("tap to bring it
 * back"); see the markup's own docblock in
 * GalleryPageController::render_gallery(). */
.gallery-lightbox-orders-tab-icon-open,
.gallery-lightbox-orders-tab-icon-collapsed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gallery-lightbox-orders-tab-icon-collapsed {
	display: none;
}

.gallery-lightbox-orders-tab.is-collapsed .gallery-lightbox-orders-tab-icon-open {
	display: none;
}

.gallery-lightbox-orders-tab.is-collapsed .gallery-lightbox-orders-tab-icon-collapsed {
	display: inline-flex;
}

/* 2026-07-27 explicit kérés ("a termék neveket... egy sorba írja ki") —
   a terméknév a SAJÁT, teljes szélességű sorát kapja (nem szorul össze a
   darabszámmal/törlés-gombbal egy vízszintes sorban), a darabszám+törlés
   pedig alatta, egy második sorban. */
.gallery-lightbox-orders-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.gallery-lightbox-orders-name {
	font-size: 13px;
	font-weight: 600;
}

.gallery-lightbox-orders-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
}

/* Zöld négyzetes darabszám-jelző (2026-07-27 explicit kérés: "A darabnál
   itt is használd a zöld badge megjelenést") — ugyanaz a szín/méret,
   mint a rács-nézetbeli/picker-beli kosár-darabszám badge-eknél
   (#2e7d32). */
.gallery-lightbox-orders-qty {
	background: #2e7d32;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Szögletes, halványpiros törlés-gomb (2026-07-27 explicit kérés: "A
   törlés legyen halványpiros hátterű") — a korábbi kör alakú, áttetsző
   fehér gomb helyett, ugyanaz a szín-pár, mint a kosár-oldal
   .gallery-cart-line-remove gombjánál. */
.gallery-lightbox-orders-remove {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid #f3b4b4;
	border-radius: 4px;
	background: #fdecec;
	color: #d63638;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* Fallback cover sizing for the brief moment before the inline script's
 * sizeCover() runs (it always overrides via inline style once it does —
 * see render_gallery()'s script) — not load-bearing, just avoids an
 * unsized flash. */
.gallery-cover {
	height: 60vh;
}

.gallery-header-hamburger,
.gallery-header-drawer {
	display: none;
}

@media (max-width: 1100px) {
	.gallery-grid {
		column-count: 2;
		column-gap: 7px;
	}

	.gallery-thumb-wrap {
		margin-bottom: 7px;
	}
}

@media (max-width: 640px) {
	.gallery-wrap {
		padding: 24px 16px 16px;
	}

	.gallery-cover {
		height: 100vh;
	}

	.gallery-chapter-nav {
		gap: 4px 18px;
	}

	.gallery-grid {
		column-count: 1;
	}

	.gallery-lightbox-nav {
		font-size: 40px;
	}

	/* Mobile header regrouping (2026-07-24, revised same day): SAME three
	 * DOM children as desktop (title/logo/menu), reflowed via
	 * grid-template-areas — logo becomes its own row that scrolls away
	 * normally, while the name+date+hamburger row (.gallery-header-title)
	 * gets its OWN sticky positioning below (explicit request: "A
	 * telefonos menü gomb és a galéria név legyen sticky" — the logo is
	 * NOT part of that). The top-right icon controls and the chapter-nav
	 * links physically relocate into the drawer via the inline script (a
	 * plain grid-area reassignment can't move an element into a nested
	 * drawer, only reposition it within this same grid) — see the
	 * mobile-drawer script block in render_gallery(). */
	.gallery-header {
		padding-top: 12px;
		/* Not sticky as a whole here — the logo row above still scrolls
		 * away normally, only .gallery-header-title's own sticky (below)
		 * applies at this breakpoint. */
		position: static;
		background: none;
	}

	.gallery-header-inner {
		grid-template-columns: 1fr;
		grid-template-areas: "logo" "namebar";
		gap: 0;
		max-width: none;
		padding: 0 16px;
		margin: 0 -16px 16px;
	}

	.gallery-header-logo {
		justify-self: center;
	}

	.gallery-header-title {
		grid-area: namebar;
		/* Desktop's justify-self:start makes this grid item shrink to its
		 * own content width — harmless there (align-self:end is what
		 * matters), but at mobile it would leave the hamburger sitting
		 * right next to the name instead of pushed to the screen's right
		 * edge by justify-content:space-between below, since that only has
		 * an effect once the flex container itself spans the full row.
		 * (grid-area/justify-self/align-self are now dead weight once the
		 * relocation below moves this OUT of the grid entirely, but harmless
		 * to leave — a fresh page load briefly renders it inside .gallery-
		 * header, before the relocation script runs, where they still
		 * apply.) */
		justify-self: stretch;
		align-self: auto;
		position: sticky;
		top: 0;
		z-index: 15;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px 12px;
		/* Cancels .gallery-content's own 2.5vw side padding (2026-07-16) —
		 * this element is relocated to be a DIRECT child of .gallery-content
		 * at this breakpoint (JS, see applyDrawerLayout()'s own docblock),
		 * same "own padding for a genuine inset + negative margin to cancel
		 * the parent's" two-step .gallery-chapter-nav already uses for the
		 * identical reason. Was a flat -16px back when this lived inside
		 * .gallery-header, which had its own flat 16px side padding instead. */
		margin: 0 -2.5vw;
	}

	.gallery-header-name-date {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.gallery-header-title h1 {
		font-size: 20px;
	}

	.gallery-date {
		margin: 3px 0 0;
		font-size: 12px;
	}

	.gallery-header-menu {
		display: none;
	}

	/* No circle (2026-07-24 explicit request: "Nem kell köré kör alak.
	 * csak a vonalak.") — just the hamburger lines, aligned level with the
	 * gallery name via the title row's own align-items:flex-start. */
	.gallery-header-hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: auto;
		height: auto;
		padding: 4px 2px;
		margin: 0;
		border: none;
		border-radius: 0;
		background: none;
		color: #1d2327;
		cursor: pointer;
		flex-shrink: 0;
	}

	.gallery-header-drawer {
		position: fixed;
		inset: 0;
		z-index: 100002;
		background: rgba(0, 0, 0, 0.4);
		align-items: flex-start;
		justify-content: flex-end;
	}

	.gallery-header-drawer[hidden] {
		display: none;
	}

	.gallery-header-drawer.is-open {
		display: flex;
	}

	.gallery-header-drawer-panel {
		background: #fff;
		width: 260px;
		max-width: 80vw;
		height: 100%;
		padding: 20px;
		overflow-y: auto;
	}

	/* Icons in one row at the top of the drawer (2026-07-24), rather than
	 * the earlier stacked/left-aligned list. */
	.gallery-header-drawer .gallery-header-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
		position: static;
	}

	/* Chapters fully centered below the icon row, bigger labels with more
	 * breathing room between them (2026-07-24 explicit request). */
	.gallery-header-drawer .gallery-chapter-nav {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 20px;
		padding: 0;
		margin: 24px 0 0;
		border: none;
		border-top: 1px solid #ececec;
		padding-top: 20px;
	}

	.gallery-header-drawer .gallery-chapter-nav a {
		font-size: 16px;
	}

	/* Inside the drawer the visibility:hidden spacing trick no longer
	 * applies (nothing above it needs a preserved gap once relocated into
	 * a static, opt-in menu) — plain display:none is simpler/correct here. */
	.gallery-header-drawer .gallery-chapter-nav-invisible {
		display: none;
	}
}

/* Portfólió oldal (2026-07-23, pic-time mintájára) — lásd
 * Gallery\Gallery\PortfolioController. */
.gallery-portfolio-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 32px 100px;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.gallery-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 0 0 40px;
}

.gallery-portfolio-filter-btn {
	background: none;
	border: none;
	padding: 4px 2px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8a8f98;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.gallery-portfolio-filter-btn.is-active {
	color: #1d2327;
	border-bottom-color: #1d2327;
}

.gallery-portfolio-empty {
	text-align: center;
	color: #8a8f98;
}

.gallery-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}

.gallery-portfolio-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.gallery-portfolio-card[hidden] {
	display: none;
}

.gallery-portfolio-card-img-wrap {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: #f0f0f1;
	overflow: hidden;
	border-radius: 4px;
}

/* Zárt galéria jelvény + hover-lakat (2026-07-23, user kérése) — a
 * sarok-jelvény MINDIG látszik (nem kell rákattintani, hogy a látogató
 * megtudja, ez a galéria zárt), a nagy lakat csak hoverre jelenik meg,
 * a kép közepén. */
.gallery-portfolio-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: rgba(29, 35, 39, 0.85);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 4px;
}

.gallery-portfolio-card-lock-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, 0);
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.gallery-portfolio-card:hover .gallery-portfolio-card-lock-overlay {
	opacity: 1;
	background: rgba(0, 0, 0, 0.35);
}

/* Focal point (2026-07-23) — ugyanaz a --gallery-cover-focal-x/-y
 * egyéni tulajdonság-pár, amit a galéria-oldal saját borítója (.gallery-cover
 * img, l. fent) is használ, a PortfolioController inline style-jából
 * kitöltve projektenként. */
.gallery-portfolio-card-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: var(--gallery-cover-focal-x, 50%) var(--gallery-cover-focal-y, 50%);
	display: block;
	transition: transform 0.3s ease;
}

.gallery-portfolio-card:hover .gallery-portfolio-card-img {
	transform: scale(1.03);
}

.gallery-portfolio-card-name {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
}

@media (max-width: 600px) {
	.gallery-portfolio-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px;
	}
}

/* Kosár/checkout oldal (2026-07-16, Shop-integráció 4. szakasz) — lásd
 * Gallery\Gallery\CartController. Ugyanazt a "gallery-wrap" jellegű,
 * középre igazított, 900px-es olvasó-oszlopot használja, mint a többi
 * önálló galéria-oldal (jelszó/státusz képernyők). */
.gallery-cart-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 32px 100px;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Vertical centering (2026-07-24 explicit request) — the header +
	 * cart/wizard content centers as one block when it's shorter than the
	 * viewport, instead of always hugging the top. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.gallery-cart-header {
	margin-bottom: 24px;
}

.gallery-cart-back {
	display: inline-block;
	margin-bottom: 8px;
	color: #767c82;
	font-size: 13px;
	text-decoration: none;
}

.gallery-cart-back:hover {
	text-decoration: underline;
}

.gallery-cart-header h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 600;
}

.gallery-cart-empty {
	text-align: center;
	padding: 60px 0;
	color: #767c82;
}

/* "Kosár törlése" gomb (2026-07-27 explicit kérés) — jobbra igazítva a
 * tételek listája felett, halványpiros (destruktív, de nem hivalkodó)
 * stílus, ugyanaz a szín-pár, mint az egyes sorok/lightbox törlés-
 * gombjainál. */
.gallery-cart-clear-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.gallery-cart-clear {
	padding: 6px 12px;
	border: 1px solid #f3b4b4;
	border-radius: 4px;
	background: #fdecec;
	color: #d63638;
	font-size: 13px;
	cursor: pointer;
}

.gallery-cart-line {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid #ececec;
}

/* Egy fotós soroknál NAGYOBB, több fotós (bundle / halmozott mennyiség)
   soroknál KISEBB bélyegkép marad (2026-07-27 explicit pontosítás: "A
   kosárban ahol egy kép van ott legyen nagyobb a miniatűr! Ahol több
   kép (bundle), vagy egy képből több mennyiség, ott maradhat a kisebb
   méret") — az egy-fotós eset (nincs .is-stack) a nagyobb (100px) méretet
   kapja, a fényképkupac (.is-stack, lásd lentebb) az eredeti, kisebb
   (44px) méretet tartja meg. */
.gallery-cart-line-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 104px;
	flex-shrink: 0;
}

.gallery-cart-line-thumbs img {
	/* A téma be.min.css-e egy img:not([src$=".svg"]) szabállyal
	   height:auto-t ír elő, ugyanolyan specificitással, mint ez a sor,
	   és a DOM-sorrendben KÉSŐBB tölt be, tehát felülírná a fix
	   magasságot !important nélkül (l. .gallery-cart-field-row input
	   hasonló fix okát fentebb, ugyanez a "szerző-eredetű stílus mindent
	   felülír" probléma). */
	width: 100px !important;
	height: 100px !important;
	object-fit: cover;
	border-radius: 4px;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.gallery-cart-line-thumbs-more {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f1;
	border-radius: 4px;
	font-size: 12px;
	color: #50575e;
}

/* Fényképkupac több fotós soroknál (2026-07-27 explicit kérés: "Ahol több
   kép van, ott legyenek egymásra szórva mint a termék hozzáadása
   felületen") — ugyanaz a random elforgatás/eltolás minta, mint
   .gallery-product-picker-photos.is-stack-nél (l. renderPickerPhotos() a
   GalleryPageController.php inline scriptjében), csak balra igazítva (a
   kosár-sor balról jobbra folyó elrendezéséhez), nem középre, mint a
   picker előnézeténél. A tényleges rotate()/translate() JS-ből, inline
   style-ként érkezik soronként (CartController.php). Az eredeti, kisebb
   44px méretet tartja meg (l. fentebb) — csak az EGY fotós eset nőtt. */
.gallery-cart-line-thumbs.is-stack {
	position: relative;
	height: 44px;
	width: 90px;
	flex-wrap: nowrap;
}

.gallery-cart-line-thumbs.is-stack img {
	width: 44px !important;
	height: 44px !important;
	position: absolute;
	top: 0;
	left: 0;
}

.gallery-cart-line-thumbs.is-stack .gallery-cart-line-thumbs-more {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 0;
}

.gallery-cart-line-info {
	flex: 1;
}

.gallery-cart-line-name {
	font-weight: 600;
	margin-bottom: 4px;
}

.gallery-cart-line-options {
	font-size: 13px;
	color: #767c82;
	margin-bottom: 6px;
}

/* "Csomag tartalma" a kosár oldalon (2026-08-01 explicit request) — egy
 * sor komponensenként, ugyanaz a label/érték szemlélet, mint a Store
 * terméklap saját "Csomag tartalma" listája. */
.gallery-cart-line-bundle-contents {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	color: #767c82;
}

.gallery-cart-line-bundle-contents li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 0;
}

/* Mennyiség + ár + törlés EGYBEN, egyetlen összefüggő sávként (2026-07-27
   explicit kérés: "Ez a 3 legyen egybe") — mindhárom szegmens azonos
   magasságú (l. --gallery-cart-line-meta-height lentebb), egymáshoz
   simuló szegélyekkel (margin-left:-1px kollapszálja az egymást érintő
   1px szegélyeket egyetlen vonallá). A kerekítést a :first-child/
   :last-child szabja meg, NEM a konkrét elem-típus — ez azért fontos,
   mert a mennyiség-mező csomag-soroknál nincs jelen (l.
   CartController.php isEditableQty), ilyenkor az ár-doboz lesz az első
   szegmens, és neki kell a bal oldali kerekítés. */
.gallery-cart-line-meta {
	display: flex;
	align-items: stretch;
}

.gallery-cart-line-meta > * {
	height: 36px;
	box-sizing: border-box;
	margin-left: -1px;
	border-radius: 0;
}

.gallery-cart-line-meta > *:first-child {
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.gallery-cart-line-meta > *:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.gallery-cart-line-price {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid #dcdcde;
	background: #f0f0f1;
	font-size: 13px;
	white-space: nowrap;
}

/* Szerkeszthető mennyiség (2026-07-27 explicit kérés, kiterjesztve a
   bundle-sorokra is: "A bundle terméknél is lehessen mennyiséget
   szerkeszteni... a bundle komplett mennyiségét") — csak a csomag-
   soroknál (lineIsPackage()) nincs jelen, l. CartController.php
   isEditableQty változóját. Rövidebb, mint az első verzió ("A mennyiség
   szerkesztő lehet rövidebb. Most túl hosszú" — 52px→40px), a natív
   szám-input fel/le nyilai levéve a tisztább, szögletes hatásért. */
.gallery-cart-line-qty-input {
	/* Ugyanaz a téma-felülírási probléma, mint a .gallery-cart-field-row
	   input-nál fentebb (a téma 230px fix szélességet ír elő minden sima
	   text/number inputra) — !important nélkül a kis mennyiség-mező a
	   teljes szélességre nyúlna. */
	width: 40px !important;
	padding: 4px;
	border: 1px solid #1d2327;
	background: #fff;
	font-size: 14px;
	text-align: center;
	-moz-appearance: textfield;
}

.gallery-cart-line-qty-input::-webkit-inner-spin-button,
.gallery-cart-line-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* "Az akciós ár megjelenítése a kosárban legyen piros. Mutassa az eredeti
   árat is." (2026-07-19) — ugyanaz a szín-pár, mint a Store [store_shop]
   saját katalógus/kosár akciós-ár jelölése (pe-shop-price-original/-sale). */
.gallery-cart-line-price-original {
	color: #8a8f98;
	text-decoration: line-through;
	font-size: 0.9em;
}

.gallery-cart-line-price-sale {
	color: #d63638;
}

/* Szögletes, halvány piros törlés-gomb (2026-07-27 explicit kérés: "A
   törlés gombot pedig szintén szögletes halvány piros gombra tegyed,
   ugyan azzal a magassággal az ár mellé") — a korábbi kör alakú
   változat helyett, azonos magassággal a mennyiség/ár szegmensekkel. */
.gallery-cart-line-remove {
	width: 36px;
	padding: 0;
	border: 1px solid #f3b4b4;
	background: #fdecec;
	color: #d63638;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.gallery-cart-coupon-box {
	margin: 16px 0;
	padding: 16px;
	border: 1px solid #dcdfe4;
	border-radius: 6px;
}

.gallery-cart-coupon-box label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
	margin-bottom: 8px;
}

.gallery-cart-coupon-row {
	display: flex;
	gap: 8px;
}

.gallery-cart-coupon-row input[type="text"] {
	flex: 1;
}

.gallery-cart-coupon-row .gallery-btn {
	padding: 8px 16px;
}

.gallery-cart-coupon-message {
	font-size: 13px;
	margin: 8px 0 0;
}

.gallery-cart-coupon-message--success {
	color: #00a32a;
}

.gallery-cart-coupon-message--error {
	color: #d63638;
}

.gallery-cart-totals {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 2px solid #1d2327;
}

.gallery-cart-total-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 14px;
}

.gallery-cart-total-row--grand {
	font-size: 18px;
	font-weight: 600;
	margin-top: 6px;
}

#gallery-checkout-form h3 {
	margin: 28px 0 12px;
	font-size: 16px;
}

.gallery-cart-field-row {
	display: block;
}

.gallery-cart-field-row label,
.gallery-cart-field-full {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
	margin-bottom: 16px;
}

.gallery-cart-field-row input,
.gallery-cart-field-full input,
.gallery-cart-field-full textarea {
	display: block;
	/* The theme's own form-field styling sets a fixed width (230px) on
	 * plain text inputs — same author-origin-beats-everything issue as
	 * the .gallery-btn[hidden] fix above, just via a fixed px value
	 * instead of `display`. !important is the reliable fix here since
	 * this rule already has the highest specificity we control. */
	width: 100% !important;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}

.gallery-cart-field-full textarea {
	min-height: 70px;
	resize: vertical;
}

.gallery-cart-delivery-methods {
	margin-bottom: 12px;
}

.gallery-cart-radio-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
}

.gallery-cart-checkbox-label {
	display: block;
	margin: 16px 0;
	font-size: 13px;
}

/* Gyártási tájékoztató (2026-07-23) — JS-ből kap `hidden`-t, ha a kosárban
 * nincs egyedi gyártású fizikai tétel, l. CartController render_cart()/
 * render_cart_script() docblockjait. */
.gallery-manufacturing-disclaimer {
	margin: 20px 0;
	padding: 16px 18px;
	background: #fff8e5;
	border: 1px solid #f0c36d;
	border-radius: 8px;
}

.gallery-manufacturing-disclaimer-text {
	font-size: 13px;
	line-height: 1.5;
}

.gallery-manufacturing-disclaimer-text p:last-child {
	margin-bottom: 0;
}

.gallery-manufacturing-disclaimer .gallery-cart-checkbox-label {
	margin: 8px 0 0;
	font-weight: 600;
}

.gallery-cart-submit {
	width: 100%;
}

.gallery-cart-order-btn {
	display: block;
	width: 100%;
	margin: 20px 0;
	padding: 14px 20px;
	font-size: 16px;
}

.gallery-cart-thanks {
	text-align: center;
	padding: 60px 0;
}

/* Delivery-method section on the CART view itself (2026-07-24 explicit
 * request: "A képek alatt jelenjen meg a szállítási mód választás, hogy
 * egyből be tudja jelölni az ügyfél") — sits right under the photo lines,
 * before the totals/order button, not tucked inside the checkout form. */
.gallery-cart-delivery-section {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 1px solid #ececec;
}

.gallery-cart-delivery-section h3 {
	margin: 0 0 12px;
	font-size: 16px;
}

/* Multi-step checkout wizard (2026-07-24) — swaps IN PLACE of the cart
 * view (see render_cart_script()'s openCheckoutWizard()), never revealed
 * as an accordion below it. */
/* Narrow, centered form column (2026-07-31 explicit request: "ne balra
 * legyen igazítva... a harmadára össze lehet tolni") — the wizard's own
 * fields/nav buttons share this narrower width instead of stretching to
 * the full .gallery-cart-wrap column, and margin:auto centers it on the
 * page rather than hugging the left edge. */
#gallery-checkout-wizard {
	max-width: 400px;
	margin: 0 auto;
}

.gallery-wizard-step-indicator {
	margin: 0 0 16px;
	font-size: 13px;
	color: #767c82;
	text-align: center;
}

.gallery-wizard-step h3:first-child {
	margin-top: 0;
}

.gallery-wizard-summary p {
	margin: 6px 0;
	font-size: 14px;
	text-align: left;
}

.gallery-wizard-summary p strong {
	display: inline-block;
	min-width: 140px;
}

.gallery-wizard-nav {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.gallery-wizard-nav .gallery-btn {
	flex: 1;
}


.gallery-btn-secondary {
	background: #fff;
	color: #1d2327;
	border: 1px solid #c3c4c7;
}

.gallery-btn-secondary:hover {
	background: #f0f0f1;
}

/* The standalone share landing page (Gallery\ShareController) is no longer
 * styled from here (2026-08-12) — it's a fully self-contained HTML
 * document with its own inline <style>, deliberately not loading this
 * stylesheet (or any theme/plugin assets) at all, so a shared social link
 * never risks pulling in the theme's header/slider/footer. */