.jmz-display {
	--jmz-cols: 4;
	--jmz-gap: 10px;
	--jmz-radius: 4px;
	--jmz-card-bg: transparent;
	--jmz-cap-size: 12px;
	--jmz-cap2-size: 12px;
	--jmz-cap-weight: 600;
	--jmz-cap2-weight: normal;
	--jmz-cap-style: normal;
	--jmz-cap2-style: normal;
	margin: 1em 0;
	background: transparent;
}
.jmz-display.jmz-has-bg {
	background: var(--jmz-bg);
	padding: var(--jmz-gap);
	border-radius: var(--jmz-radius);
}
.jmz-grid {
	display: grid;
	grid-template-columns: repeat(var(--jmz-cols), 1fr);
	gap: var(--jmz-gap);
}
@media (max-width: 820px) {
	.jmz-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.jmz-card {
	margin: 0;
	position: relative;
	overflow: hidden;
	background: var(--jmz-card-bg);
	border-radius: var(--jmz-radius);
}
.jmz-card a {
	display: block;
	line-height: 0;
}
.jmz-card img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s;
}
.jmz-crop .jmz-card img {
	aspect-ratio: 1;
	object-fit: cover;
}
.jmz-card:hover img {
	transform: scale(1.03);
}

/* captions */
.jmz-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.6em 0.8em;
	line-height: 1.3;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}
.jmz-card figcaption .jmz-c1 {
	display: block;
	font-size: var(--jmz-cap-size);
	font-weight: var(--jmz-cap-weight);
	font-style: var(--jmz-cap-style);
	font-family: var(--jmz-cap-font, inherit);
	color: var(--jmz-cap-color, inherit);
}
.jmz-card figcaption .jmz-c2 {
	display: block;
	font-size: var(--jmz-cap2-size);
	font-weight: var(--jmz-cap2-weight);
	font-style: var(--jmz-cap2-style);
	font-family: var(--jmz-cap2-font, inherit);
	color: var(--jmz-cap2-color, inherit);
	opacity: 0.9;
}
.jmz-caplay-inline figcaption .jmz-c1 {
	display: inline;
}
.jmz-card:hover figcaption {
	opacity: 1;
}
.jmz-cap-none figcaption {
	display: none;
}
.jmz-cap-above .jmz-card,
.jmz-cap-below .jmz-card {
	overflow: visible;
}
.jmz-cap-above .jmz-card img {
	border-radius: var(--jmz-radius);
}
.jmz-cap-above figcaption {
	position: static;
	opacity: 1;
	background: none;
	padding: 0 0.1em 0.45em;
	color: inherit;
}
.jmz-cap-above figcaption .jmz-c1 {
	color: var(--jmz-cap-color, inherit);
}
.jmz-cap-above figcaption .jmz-c2 {
	color: var(--jmz-cap2-color, #666);
}
.jmz-cap-below .jmz-card {
	overflow: visible;
}
.jmz-cap-below .jmz-card img {
	border-radius: var(--jmz-radius);
}
.jmz-cap-below figcaption {
	position: static;
	opacity: 1;
	background: none;
	padding: 0.45em 0.1em 0.6em;
	color: inherit;
}
.jmz-cap-below figcaption .jmz-c1 {
	color: var(--jmz-cap-color, inherit);
}
.jmz-cap-below figcaption .jmz-c2 {
	color: var(--jmz-cap2-color, #666);
}
/* A card with its own background: the caption gets even 1em padding inside it, and the photo
   keeps only its top corners rounded so it sits flush with the card. */
.jmz-has-card.jmz-cap-below .jmz-card,
.jmz-has-card.jmz-cap-above .jmz-card {
	overflow: hidden;
}
.jmz-has-card.jmz-cap-below .jmz-card img,
.jmz-has-card.jmz-cap-above .jmz-card img {
	border-radius: 0;
}
.jmz-has-card.jmz-cap-below figcaption,
.jmz-has-card.jmz-cap-above figcaption {
	padding: 1em;
}

/* masonry */
.jmz-style-masonry .jmz-grid {
	display: block;
	column-count: var(--jmz-cols);
	column-gap: var(--jmz-gap);
}
.jmz-style-masonry .jmz-card {
	break-inside: avoid;
	margin-bottom: var(--jmz-gap);
}
.jmz-style-masonry .jmz-card img {
	aspect-ratio: auto;
}
@media (max-width: 820px) {
	.jmz-style-masonry .jmz-grid {
		column-count: 2;
	}
}
/* list — one or two rows across, photo as a thumbnail or as a wide banner */
.jmz-style-list .jmz-grid {
	grid-template-columns: repeat(var(--jmz-list-cols, 1), 1fr);
}
.jmz-style-list.jmz-list-2 {
	--jmz-list-cols: 2;
	--jmz-list-thumb: 160px;
}
.jmz-style-list .jmz-card {
	display: grid;
	grid-template-columns: var(--jmz-list-thumb, 220px) 1fr;
	gap: 1em;
	background: none;
	align-items: start;
}
/* The caption comes before the image in the DOM when it sits above, so the columns are
   assigned explicitly rather than left to source order. */
.jmz-style-list .jmz-card > a {
	order: 1;
}
.jmz-style-list .jmz-card > figcaption {
	order: 2;
}
/* Wide: text in the narrow column, photo filling the rest as a banner. Without a set ratio a
   portrait photo would be metres tall in a full-width column. */
.jmz-style-list.jmz-list-wide .jmz-card > a {
	order: 2;
}
.jmz-style-list.jmz-list-wide .jmz-card > figcaption {
	order: 1;
}
.jmz-style-list.jmz-list-wide .jmz-card img {
	aspect-ratio: var(--jmz-list-ratio, 16/9);
	object-fit: cover;
	height: auto;
}
@media (max-width: 820px) {
	.jmz-style-list.jmz-list-2 {
		--jmz-list-cols: 1;
		--jmz-list-thumb: 220px;
	}
}
.jmz-style-list .jmz-card img {
	aspect-ratio: auto;
	border-radius: var(--jmz-radius);
}
.jmz-style-list figcaption {
	position: static;
	opacity: 1;
	color: inherit;
	background: none;
	padding: 0;
	pointer-events: auto;
}
.jmz-empty {
	color: #888;
	font-style: italic;
}

/* multi-select download */

/* toolbar */
.jmz-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-bottom: 1em;
	font-size: 0.9em;
}
.jmz-toolbar input,
.jmz-toolbar select {
	padding: 0.4em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-width: 200px;
}
.jmz-toolbar button {
	padding: 0.45em 0.9em;
	border: 0;
	background: #222;
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
}
.jmz-toolbar .jmz-clear {
	color: #666;
	margin-left: 4px;
}
.jmz-toolbar .jmz-count {
	margin-left: auto;
	color: #888;
}
.jmz-tgl {
	display: flex;
	align-items: center;
	gap: 4px;
}
/* Active filters: any filter control holding a value is outlined, so a visitor can see at a glance
   what is narrowing the results. CSS-only (:has / :placeholder-shown), so it also tracks changes
   made before Apply and cannot go stale with a cached script. Sort controls are left alone: they
   always hold a value and never narrow anything. Themes can recolour via --jmz-active. */
.jmz-toolbar select[name^='pf[']:has(option:checked:not([value=''])),
.jmz-toolbar select[name='pk']:has(option:checked:not([value=''])),
.jmz-toolbar input[name^='pf[']:not(:placeholder-shown),
.jmz-toolbar input[name='ps']:not(:placeholder-shown) {
	border-color: var(--jmz-active, #7b2d8e);
	box-shadow: 0 0 0 1px var(--jmz-active, #7b2d8e);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}
/* A date input has no placeholder to test, so an applied one is flagged server-side. */
.jmz-toolbar .jmz-on {
	border-color: var(--jmz-active, #7b2d8e);
	box-shadow: 0 0 0 1px var(--jmz-active, #7b2d8e);
}
.jmz-pagination {
	margin: 1.5em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
}
.jmz-pagination .page-numbers {
	padding: 0.4em 0.8em;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}
.jmz-pagination .current {
	background: #222;
	color: #fff;
	border-color: #222;
}
/* archive/single */
.jmz-archive,
.jmz-single {
	max-width: 1300px;
	margin: 0 auto;
	padding: 1.5rem;
}
.jmz-title {
	margin: 0 0 0.5em;
}
.jmz-crumbs {
	font-size: 0.85em;
	color: #888;
	margin-bottom: 1em;
}
.jmz-crumbs a {
	color: inherit;
}
.jmz-single-layout {
	display: grid;
	grid-template-columns: auto minmax(260px, 1fr);
	gap: 2rem;
	align-items: start;
}
@media (max-width: 820px) {
	.jmz-single-layout {
		grid-template-columns: 1fr;
	}
}
.jmz-single-image a {
	display: block;
	line-height: 0;
}
.jmz-hero {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	cursor: zoom-in;
}
.jmz-prevnext {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
	margin-top: 0.8em;
	font-size: 0.85em;
}
.jmz-prevnext a {
	color: inherit;
	text-decoration: none;
	opacity: 0.7;
}
.jmz-prevnext a:hover {
	opacity: 1;
}
.jmz-excerpt {
	font-size: 1.05em;
	color: #555;
}
.jmz-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 1em 0;
}
.jmz-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4em 1em;
	margin: 1em 0;
	font-size: 0.95em;
}
.jmz-meta dt {
	color: #888;
	font-weight: normal;
}
.jmz-meta dd {
	margin: 0;
}
.jmz-meta a {
	color: inherit;
}
.jmz-dims {
	font-size: 0.8em;
	color: #aaa;
}
.jmz-related {
	margin-top: 3rem;
}
.jmz-related h2 {
	font-size: 1.2em;
	margin-bottom: 0.8em;
}
/* lightbox */
/* A closed lightbox stays in the page, so it must also stop taking clicks: opacity alone leaves an
   invisible full-screen layer swallowing every click on the page underneath. */
.jmz-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.2s,
		visibility 0s linear 0.2s;
}
.jmz-lb.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.2s,
		visibility 0s;
}
.jmz-lb img {
	max-width: 92vw;
	max-height: 82vh;
	object-fit: contain;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.jmz-lb-cap {
	color: #ddd;
	font-size: 0.95em;
	margin-top: 0.8em;
	max-width: 92vw;
	text-align: center;
	line-height: 1.4;
}
.jmz-lb-cap a {
	color: #fff;
	margin-left: 0.6em;
	font-size: 0.85em;
	opacity: 0.7;
}
.jmz-lb-count {
	position: absolute;
	top: 14px;
	left: 18px;
	color: #999;
	font-size: 0.85em;
}
.jmz-lb button {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 2.2em;
	line-height: 1;
	padding: 0.3em 0.5em;
	opacity: 0.7;
}
.jmz-lb button:hover {
	opacity: 1;
}
.jmz-lb-close {
	top: 8px;
	right: 12px;
}
.jmz-lb-prev {
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
}
.jmz-lb-next {
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
}

/* Elementor editor canvas: keep images inside their grid cell even before layout settles */
.elementor-editor-active .jmz-display img,
body.elementor-editor-preview .jmz-display img {
	max-width: 100% !important;
	height: auto !important;
}
.elementor-widget-jmzg_display .jmz-display {
	max-width: 100%;
}
.elementor-widget-jmzg_display .jmz-grid > .jmz-card {
	min-width: 0;
}
.elementor-widget-jmzg_display img {
	max-width: 100% !important;
	height: auto;
}

/* ---- video ---- */
.jmz-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	transition:
		background 0.2s,
		transform 0.2s;
}
.jmz-play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}
.jmz-card:hover .jmz-play {
	background: rgba(0, 0, 0, 0.75);
	transform: translate(-50%, -50%) scale(1.08);
}
.jmz-dur {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 3px;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}
.jmz-cap-below .jmz-dur,
.jmz-cap-above .jmz-dur {
	bottom: auto;
	top: 8px;
}
.jmz-noposter {
	display: block;
	position: relative;
	aspect-ratio: 16/9;
	background: #1d1d1f;
}
.jmz-card a {
	position: relative;
	display: block;
}

/* single item player */
.jmz-player {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	background: #000;
}
.jmz-embed {
	position: relative;
	padding-top: 56.25%;
	border-radius: 4px;
	overflow: hidden;
	background: #000;
}
.jmz-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* An embed has no size of its own (its height comes from padding), so in a layout whose image
   column sizes to its content (Classic, Catalog, Minimal) it collapsed to nothing. Give it one. */
.jmz-s-split .jmz-single-image .jmz-embed,
.jmz-s-split .jmz-single-image .jmz-player,
.jmz-s-hug .jmz-single-image .jmz-embed,
.jmz-s-hug .jmz-single-image .jmz-player {
	width: 640px;
	max-width: 100%;
}

/* lightbox video */
.jmz-lb video,
.jmz-lb .jmz-lb-embed {
	max-width: 92vw;
	max-height: 82vh;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
	background: #000;
}
.jmz-lb video {
	width: auto;
	height: auto;
}
.jmz-lb .jmz-lb-embed {
	width: min(92vw, 1280px);
	aspect-ratio: 16/9;
	border: 0;
}
.jmz-lb-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 92vw;
	max-height: 82vh;
}
.jmz-lb-stage img {
	max-width: 92vw;
	max-height: 82vh;
	object-fit: contain;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Single item layout shapes. Classic needs no rules: it is the base layout. Shapes used only by
   add-on layouts are styled by the add-on. */

/* --- Stacked: image full width, info underneath --- */
.jmz-s-stack .jmz-single-layout {
	display: block;
}
.jmz-s-stack .jmz-single-info {
	margin-top: 1.25rem;
}

/* --- Layout refinements --- */

/* Hug: the block is only as wide as the image, so the text sits right under it. */
.jmz-s-hug .jmz-single-layout {
	width: fit-content;
	min-width: min(340px, 100%);
	max-width: 100%;
	margin: 0 auto;
}
.jmz-s-hug .jmz-single-info {
	margin-top: 0.6rem;
	text-align: left;
}
.jmz-s-hug .jmz-title {
	margin-top: 0;
}