
/* v0.18.7: prevent uninitialized gallery flash before first layout. */
.kpdg-gallery:not(.kpdg-is-ready) {
	visibility:hidden;
}
.kpdg-gallery.kpdg-is-ready {
	visibility:visible;
}


.kpdg-gallery-block {
	width: 100%;
	max-width: 100%;
}

.kpdg-gallery {
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	overflow: visible;
}

.kpdg-gallery-items {
	width: 100%;
	max-width: 100%;
	isolation: isolate;
}

.kpdg-gallery-item {
	position: relative;
	z-index: 1;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
	padding: var(--kpdg-image-padding, 0);
	background: var(--kpdg-image-bg, #fff);
	border-width: var(--kpdg-border-width, 0);
	border-style: var(--kpdg-border-style, solid);
	border-color: var(--kpdg-border-color, #000);
	border-radius: var(--kpdg-radius, 0);
	transform-origin: center center;
}

.kpdg-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: inherit;
}

/* Justified: JS packs exact-ratio tiles into rows spanning 100%. */
.kpdg-layout-justified .kpdg-gallery-items,
.kpdg-layout-mosaic .kpdg-gallery-items {
	display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;
	gap:var(--kpdg-row-gap,10px) var(--kpdg-column-gap,10px);
	width:100%;overflow:visible;
}
.kpdg-layout-justified .kpdg-gallery-item,
.kpdg-layout-mosaic .kpdg-gallery-item { flex:0 0 auto;min-width:0; }
.kpdg-layout-justified .kpdg-gallery-item img,
.kpdg-layout-mosaic .kpdg-gallery-item img { width:100%;height:100%;object-fit:cover; }

/* Masonry is positioned by JS so horizontal and vertical gaps are exact. */
.kpdg-layout-masonry .kpdg-gallery-items { position:relative;width:100%; }
.kpdg-layout-masonry .kpdg-gallery-item { position:absolute;margin:0; }
.kpdg-layout-masonry .kpdg-gallery-item img { width:100%;height:auto; }

@media(max-width:1024px){
}
@media(max-width:600px){
}

/*
 * Zoom Out:
 * the thumbnail/card never changes size. The image starts enlarged and returns
 * to its base object-fit:cover scale on hover.
 */




/* Pagination */
.kpdg-pagination {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 28px;
	font-family: "Krona One", sans-serif;
	text-transform: uppercase;
}

.kpdg-number-pagination,
.kpdg-load-more-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.kpdg-page-status {
	margin: 0 0 12px;
	color: #000;
	font: inherit;
	font-size: 14px;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

.kpdg-pagination-controls {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.kpdg-page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.kpdg-page-button,
.kpdg-nav-button,
.kpdg-go-button,
.kpdg-load-more {
	appearance: none;
	box-sizing: border-box;
	min-width: 50px;
	height: 50px;
	padding: 0 16px;
	border: 2px solid #000;
	background: #000;
	color: #fff;
	font: inherit;
	font-size: 14px;
	line-height: 46px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.kpdg-page-button {
	width: 50px;
	padding: 0;
}

.kpdg-page-button.is-active {
	background: #fff;
	color: #000;
}

.kpdg-page-button:hover,
.kpdg-nav-button:hover:not(:disabled),
.kpdg-go-button:hover,
.kpdg-load-more:hover {
	background: #fff;
	color: #000;
}

.kpdg-nav-button:disabled {
	border-color: #8e8e8e;
	background: #8e8e8e;
	color: #fff;
	cursor: default;
	opacity: 1;
}

.kpdg-go-to-page {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 8px;
}

.kpdg-go-label {
	color: #000;
	font-size: 14px;
	white-space: nowrap;
}

.kpdg-go-input {
	box-sizing: border-box;
	width: 74px;
	height: 50px;
	padding: 0 10px;
	border: 2px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	font: inherit;
	font-size: 14px;
	text-align: center;
	-moz-appearance: textfield;
}

.kpdg-go-input::-webkit-outer-spin-button,
.kpdg-go-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Tablet: same navigation, proportionally smaller. */
@media (max-width: 900px) {
	.kpdg-pagination {
		margin-top: 24px;
	}

	.kpdg-pagination-controls,
	.kpdg-page-numbers {
		gap: 7px;
	}

	.kpdg-page-status {
		margin-bottom: 10px;
		font-size: 12px;
	}

	.kpdg-page-button,
	.kpdg-nav-button,
	.kpdg-go-button,
	.kpdg-load-more {
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
		border-width: 2px;
		font-size: 12px;
		line-height: 40px;
	}

	.kpdg-page-button {
		width: 44px;
		padding: 0;
	}

	.kpdg-go-to-page {
		gap: 7px;
		margin-left: 5px;
	}

	.kpdg-go-input {
		width: 64px;
		height: 44px;
		padding: 0 8px;
		font-size: 12px;
	}

	.kpdg-go-label {
		font-size: 12px;
	}
}

/* Mobile: reduce the complete control system further. */
@media (max-width: 600px) {
	.kpdg-pagination {
		margin-top: 20px;
	}

	.kpdg-pagination-controls,
	.kpdg-page-numbers {
		gap: 5px;
	}

	.kpdg-page-status {
		margin-bottom: 8px;
		font-size: 10px;
	}

	.kpdg-page-button,
	.kpdg-nav-button,
	.kpdg-go-button,
	.kpdg-load-more {
		min-width: 36px;
		height: 36px;
		padding: 0 7px;
		border-width: 2px;
		font-size: 10px;
		line-height: 33px;
	}

	.kpdg-page-button {
		width: 36px;
		padding: 0;
	}

	.kpdg-go-to-page {
		width: 100%;
		justify-content: center;
		gap: 5px;
		margin: 4px 0 0;
	}

	.kpdg-go-input {
		width: 54px;
		height: 36px;
		padding: 0 5px;
		border-width: 2px;
		font-size: 10px;
	}

	.kpdg-go-label {
		font-size: 10px;
	}
}

.kpdg-gallery-item.kpdg-hidden {
	display: none !important;
}

@media (max-width: 900px) {

	.kpdg-number-pagination,
	.kpdg-page-numbers {
		gap: 7px;
	}

	.kpdg-page-button,
	.kpdg-nav-button,
	.kpdg-go-button,
	.kpdg-load-more {
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
		font-size: 12px;
		line-height: 40px;
	}

	.kpdg-go-input {
		width: 64px;
		height: 44px;
	}
}

@media (max-width: 600px) {

	.kpdg-go-to-page {
		width: 100%;
		justify-content: center;
		margin: 4px 0 0;
	}
}

.kpdg-layout-justified .kpdg-gallery-items,
.kpdg-layout-mosaic .kpdg-gallery-items,
.kpdg-layout-masonry .kpdg-gallery-items{
	display:block !important;
	position:relative !important;
	width:100% !important;
}
.kpdg-layout-justified .kpdg-gallery-item,
.kpdg-layout-mosaic .kpdg-gallery-item,
.kpdg-layout-masonry .kpdg-gallery-item{
	position:absolute;
	box-sizing:border-box;
}
.kpdg-layout-justified .kpdg-gallery-item img,
.kpdg-layout-mosaic .kpdg-gallery-item img{
	width:100% !important;height:100% !important;object-fit:cover !important;
}
.kpdg-layout-masonry .kpdg-gallery-item img{
	width:100% !important;height:auto !important;object-fit:contain !important;
}


/* v0.11.1 — exact Justified boxes, including portrait ratios */
/* v0.11.3 — Fixed / Justified hardening */
/* v0.11.4 — Justified card ratio is authoritative */
/* v0.12.1 — smoother Load More */
.kpdg-gallery-items {
}





/* Keep pagination borders strong on every breakpoint. */
@media (max-width: 900px) {
	.kpdg-page-button,
	.kpdg-nav-button,
	.kpdg-go-button,
	.kpdg-load-more,
	.kpdg-go-input {
		border-width: 2px !important;
	}
}

@media (max-width: 600px) {
}

/* Smooth numbered pagination and Load More container growth. */
.kpdg-gallery-items {
}





/* Zoom Out affects only the actual image; frame/background/padding remain fixed. */






/* Card geometry is always measured as the full outer box. */
.kpdg-gallery-item {
	box-sizing: border-box;
}


/* v0.14.2 — dedicated image viewport: frame never participates in Zoom Out. */
.kpdg-gallery-item { overflow: visible; }
.kpdg-image-viewport {
	display:block; width:100%; height:100%; min-width:0; min-height:0;
	overflow:hidden; box-sizing:border-box;
}
.kpdg-image-viewport > img {
	display:block; width:100%; height:100%; max-width:none; box-sizing:border-box;
}

/* Unified Load More: fade in while falling gently into position. */



/* Expansion happens below the current viewport; never browser-reanchor it. */
.kpdg-gallery,.kpdg-gallery-items { overflow-anchor:none; }
.kpdg-gallery-items { }



.kpdg-gallery-items {
	overflow: hidden;
	overflow-anchor: none;
}

/* Items waiting for a later Load More remain in layout, but invisible. */
.kpdg-gallery-item.kpdg-load-pending {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
}

/* Every newly revealed card uses exactly the same animation. */




/* The gallery itself must never trigger browser scroll anchoring. */
.kpdg-gallery,
.kpdg-gallery-block {
	overflow-anchor: none;
}


/* Cards may visually grow above/below/sideways on hover. */
.kpdg-gallery-item {
	position: relative;
	overflow: visible;
	z-index: 1;
}

/* Zoom In must never be clipped by the card itself. */




/*
 * The inner image viewport owns the clipping of the bitmap only.
 * This keeps zoom effects inside the image area while letting the card itself
 * rise above neighbouring rows/cards.
 */
.kpdg-image-viewport {
	overflow: hidden;
}

/*
 * Rounded geometry:
 * the outer card keeps its configured radius;
 * the image viewport and the image inherit a matching inner rounding
 * so a padded rounded frame never contains a square-cornered photo.
 */
.kpdg-gallery-item {
	border-radius: var(--kpdg-radius, 0px);
}

.kpdg-gallery-item > .kpdg-image-viewport {
	border-radius: inherit;
}

.kpdg-gallery-item > .kpdg-image-viewport > img {
	border-radius: inherit;
}

/*
 * When padding exists, the inner photo radius should visually follow the
 * same rounded language as the outer frame instead of remaining square.
 * Clipping is handled by the viewport so the bitmap conforms to it exactly.
 */
.kpdg-gallery-item > .kpdg-image-viewport {
}

/*
 * Generic Load More still controls vertical reveal/height.
 * Do not clip individual cards or rows; only the gallery-items container
 * controls the visible gallery height.
 */


/* During hover, allow the active zoomed card to render above sibling rows. */



/*
 * The gallery width must remain fixed.
 * Never let hover zoom create horizontal overflow or scrollbars.
 */


/*
 * Vertical visibility remains controlled by the generic Load More system.
 * Do not let hover change the measured layout width/height.
 */
.kpdg-gallery-items {
	position: relative;
}

/*
 * Hover zoom is visual only:
 * the card keeps its normal layout box;
 * the transformed visual rises above neighbours with z-index.
 */




/*
 * Individual cards may paint beyond their own box, but the gallery width
 * remains clipped to its normal bounds so no horizontal scrollbar appears.
 */


/*
 * Override the v0.15.1 :has overflow rule completely.
 */


/*
 * Keep the inner image viewport responsible only for bitmap clipping.
 * Rounded corners and image geometry stay intact.
 */
.kpdg-image-viewport {
	overflow: hidden;
}


/*
 * The REAL card remains inside its normal layout box.
 * Do not scale it: this avoids all clipping/overflow/scrollbar problems.
 */


/*
 * The visual clone lives directly under <body>, outside every gallery wrapper.
 * Therefore it cannot be clipped by Load More, rows, Masonry, theme wrappers,
 * or horizontal gallery bounds.
 */


/*
 * IMPORTANT: the shadow uses the exact Gallery Styles hover settings.
 * No hard-coded shadow values here.
 */


/*
 * The clone must preserve rounded frame + rounded inner image exactly.
 */




/*
 * Never generate a horizontal scrollbar because of Hover Zoom.
 * The zoomed visual clone is fixed-position and does not contribute to
 * document/layout overflow.
 */
.kpdg-gallery,
.kpdg-gallery-block,
.kpdg-gallery-items {
	max-width: 100%;
}

/*
 * Permanent Image Appearance shadow: keep it on the outer card.
 * Do not let hover overwrite it on the real source card.
 */




.kpdg-gallery-item.kpdg-load-pending {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.kpdg-gallery-item.kpdg-entry-prep {
	opacity: 0;
	transform: translateY(-14px);
	will-change: opacity, transform;
}

.kpdg-gallery-item.kpdg-entry-prep.kpdg-entry-visible {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity .56s ease,
		transform .64s cubic-bezier(.22,.61,.36,1);
}

.kpdg-gallery-item.kpdg-load-pending {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}


/* v0.16.18 — Fixed geometry is owned only by JS. */
.kpdg-gallery.kpdg-layout-fixed,
.kpdg-gallery.kpdg-layout-fixed .kpdg-gallery-items {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
}
.kpdg-gallery.kpdg-layout-fixed .kpdg-gallery-item {
	max-width: none !important;
	max-height: none !important;
}

/* Image Appearance shadow: normal state only. */


/* Load More owns only gallery height animation. */
.kpdg-gallery-items {
	transition: height .52s cubic-bezier(.22,.61,.36,1);
	will-change: height;
}

.kpdg-gallery-items.kpdg-loadmore-no-transition {
	transition: none !important;
}

/* Image Appearance box shadow = normal state only. */
.kpdg-gallery .kpdg-gallery-item > .kpdg-image-viewport,
.kpdg-gallery .kpdg-gallery-item > .kpdg-image-viewport > img {
	box-shadow: none !important;
	filter: none !important;
}


/* Fade */
.kpdg-hover-fade .kpdg-gallery-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: var(--kpdg-hover-overlay-color,#000);
	opacity: 0;
	border-radius: inherit;
	transition: opacity var(--kpdg-transition,250ms) cubic-bezier(.22,.61,.36,1);
}

.kpdg-hover-fade .kpdg-gallery-item:hover::after {
	opacity: var(--kpdg-hover-overlay-opacity,.30);
}

/* Border */
.kpdg-hover-border .kpdg-gallery-item {
	transition:
		border-color var(--kpdg-transition,250ms) cubic-bezier(.22,.61,.36,1),
		background-color var(--kpdg-transition,250ms) cubic-bezier(.22,.61,.36,1);
}

.kpdg-hover-border .kpdg-gallery-item:hover {
	border-color: var(--kpdg-hover-border-color,#fff);
	background-color: var(--kpdg-hover-background-color,#fff);
}

/* Zoom Out */
.kpdg-hover-zoom-out .kpdg-image-viewport > img {
	transform: scale(var(--kpdg-hover-zoom-out-scale,1.10));
	transform-origin: center center;
	transition: transform var(--kpdg-transition,250ms) cubic-bezier(.22,.61,.36,1);
}

.kpdg-hover-zoom-out .kpdg-gallery-item:hover .kpdg-image-viewport > img {
	transform: scale(1);
}


/* Base gallery-items overflow: one rule only. */
.kpdg-gallery-items {
	overflow: visible;
}

/* Image Appearance shadow: normal state only. */
.kpdg-gallery:not(.kpdg-has-shadow) .kpdg-gallery-item {
	box-shadow: none !important;
	filter: none !important;
}

.kpdg-gallery.kpdg-has-shadow .kpdg-gallery-item {
	box-shadow: var(--kpdg-box-shadow, none) !important;
	filter: none !important;
}

/*
 * DIRECT ZOOM:
 * The real rendered card scales in place.
 * No clone, no extra box, no recalculated dimensions.
 * Border/padding/radius scale together because they already belong to the card.
 */
.kpdg-hover-zoom .kpdg-gallery-item {
	transform: scale(1);
	transform-origin: center center;
	transition:
		transform var(--kpdg-transition,250ms) cubic-bezier(.22,.61,.36,1),
		box-shadow var(--kpdg-transition,250ms) cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}

.kpdg-hover-zoom .kpdg-gallery-item:hover {
	transform: scale(var(--kpdg-hover-scale,1.04));
	box-shadow: var(--kpdg-hover-shadow,none) !important;
	z-index: 20 !important;
}

/* Keep the viewport clipping only the image itself to the card radius. */
.kpdg-hover-zoom .kpdg-gallery-item > .kpdg-image-viewport {
	overflow: hidden !important;
}

/* Normal Image Appearance shadow must not stack with Zoom shadow on hover. */
.kpdg-hover-zoom.kpdg-has-shadow .kpdg-gallery-item:hover {
	box-shadow: var(--kpdg-hover-shadow,none) !important;
}


/* =========================================================
   v0.18.1 — KPDaily Lightbox
   ========================================================= */

.kpdg-gallery[data-kpdg-lightbox-style] .kpdg-gallery-item,
.kpdg-gallery[data-kpdg-lightbox-style] .kpdg-image-viewport,
.kpdg-gallery[data-kpdg-lightbox-style] .kpdg-image-viewport img { cursor:pointer; }

.kpdg-lightbox-overlay {
	position:fixed;
	inset:0;
	z-index:2147483000;
	display:block;
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	box-sizing:border-box;
	background:var(--kpdg-lb-overlay-bg,rgba(255,255,255,.2));
	transition:opacity .30s ease,visibility 0s linear .30s;
	overscroll-behavior:contain;
}
.kpdg-lightbox-overlay.is-mounted {
	visibility:visible;
	transition:opacity .30s ease;
}
.kpdg-lightbox-overlay.is-open {
	opacity:1;
	pointer-events:auto;
}
body.kpdg-lightbox-scroll-locked { overscroll-behavior:none; }

.kpdg-lightbox-shell {
	position:absolute;
	inset:var(--kpdg-lb-outer-margin,50px);
	display:flex;
	flex-direction:column;
	min-width:0;
	min-height:0;
	overflow:hidden;
	box-sizing:border-box;
	border-radius:var(--kpdg-lb-window-radius,0px);
	box-shadow:var(--kpdg-lb-shadow,0 0 50px 20px rgba(0,0,0,.4));
	background:var(--kpdg-lb-display-bg,#fff);
	transform:scale(.988);
	opacity:.96;
	transition:transform .30s cubic-bezier(.22,.61,.36,1),opacity .30s ease;
}
.kpdg-lightbox-overlay.is-open .kpdg-lightbox-shell {
	transform:scale(1);
	opacity:1;
}

.kpdg-lightbox-display {
	position:relative;
	flex:1 1 auto;
	min-width:0;
	min-height:0;
	overflow:hidden;
	background:var(--kpdg-lb-display-bg,#fff);
	border-radius:var(--kpdg-lb-window-radius,0px) var(--kpdg-lb-window-radius,0px) 0 0;
}
.kpdg-lightbox-stage {
	position:absolute;
	inset:0;
	overflow:hidden;
	box-sizing:border-box;
	padding:var(--kpdg-lb-image-margin,20px);
	cursor:default;
	touch-action:none;
}
.kpdg-lightbox-stage.is-zoom-in {
	cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='7' fill='white' stroke='black' stroke-width='2'/%3E%3Cpath d='M18.5 18.5L27 27M13 9v8M9 13h8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 15 15,zoom-in;
}
.kpdg-lightbox-stage.is-zoom-out {
	cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='7' fill='white' stroke='black' stroke-width='2'/%3E%3Cpath d='M18.5 18.5L27 27M9 13h8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 15 15,zoom-out;
}

.kpdg-lightbox-image-layer {
	position:absolute;
	inset:var(--kpdg-lb-image-margin,20px);
	overflow:hidden;
}
.kpdg-lightbox-fit-image,
.kpdg-lightbox-full-image,
.kpdg-lightbox-nav-image {
	display:block;
	position:absolute;
	user-select:none;
	-webkit-user-drag:none;
	object-fit:contain;
	will-change:transform,opacity,left,top,width,height;
}
.kpdg-lightbox-fit-image {
	left:50%;
	top:50%;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	transform:translate(-50%,-50%) scale(1);
	opacity:1;
	z-index:1;
	transition:none;
}
.kpdg-lightbox-fit-image.leave-left,
.kpdg-lightbox-fit-image.leave-right {
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}
.kpdg-lightbox-full-image {
	left:0;
	top:0;
	max-width:none;
	max-height:none;
	opacity:0;
	z-index:2;
	pointer-events:none;
	transform-origin:center center;
}
.kpdg-lightbox-full-image.is-visible {
	pointer-events:auto;
}
.kpdg-lightbox-image-layer.is-zoom-transitioning .kpdg-lightbox-fit-image,
.kpdg-lightbox-image-layer.is-zoom-transitioning .kpdg-lightbox-full-image {
	transition:none;
}
.kpdg-lightbox-nav-image {
	left:50%;
	top:50%;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	opacity:0;
	z-index:3;
	pointer-events:none;
	transition:none;
}
.kpdg-lightbox-nav-image.from-left,
.kpdg-lightbox-nav-image.from-right,
.kpdg-lightbox-nav-image.is-entering {
	opacity:0;
	transform:translate(-50%,-50%);
}

.kpdg-lightbox-display-nav,
.kpdg-lightbox-close,
.kpdg-lightbox-film-nav,
.kpdg-lightbox-thumb {
	appearance:none;
	-webkit-appearance:none;
	box-shadow:none;
	text-decoration:none;
	box-sizing:border-box;
	transition:
		opacity .20s ease,
		transform .20s ease,
		background-color .20s ease,
		color .20s ease,
		border-color .20s ease,
		border-radius .20s ease,
		padding .20s ease;
}
.kpdg-lightbox-display-nav,
.kpdg-lightbox-close,
.kpdg-lightbox-film-nav {
	border:0;
	cursor:pointer;
}
.kpdg-lightbox-display-nav svg,
.kpdg-lightbox-close svg,
.kpdg-lightbox-film-nav svg {
	display:block;
	width:24px;
	height:24px;
	fill:none;
	stroke:currentColor;
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.kpdg-lightbox-display-nav::after,
.kpdg-lightbox-close::after,
.kpdg-lightbox-film-nav::after {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	box-sizing:border-box;
	border-width:0;
	border-color:transparent;
	border-radius:inherit;
}
.kpdg-lightbox-display-nav {
	position:absolute;
	top:50%;
	z-index:5;
	transform:translateY(-50%);
	padding:var(--kpdg-lb-display-nav-padding-v,10px) var(--kpdg-lb-display-nav-padding-h,14px);
	border-radius:var(--kpdg-lb-display-nav-radius,0px);
	background:var(--kpdg-lb-display-nav-bg,#000);
	color:var(--kpdg-lb-display-nav-icon,#fff);
}
.kpdg-lightbox-display-nav:active { transform:translateY(-50%) scale(.94); }
.kpdg-lightbox-display-nav:not(:disabled):hover {
	background:var(--kpdg-lb-display-nav-hover-bg,#fff);
	color:var(--kpdg-lb-display-nav-hover-icon,#000);
}
.kpdg-lightbox-display-nav:not(:disabled):hover::after {
	border-width:var(--kpdg-lb-display-nav-hover-border-width,2px);
	border-style:var(--kpdg-lb-display-nav-hover-border-style,solid);
	border-color:var(--kpdg-lb-display-nav-hover-border-color,#000);
}
.kpdg-lightbox-display-nav:disabled {
	opacity:1;
	background:var(--kpdg-lb-display-nav-inactive-bg,#fff);
	color:var(--kpdg-lb-display-nav-inactive-icon,#000);
	cursor:default;
}
.kpdg-lightbox-display-nav:disabled::after {
	border-width:var(--kpdg-lb-display-nav-inactive-border-width,2px);
	border-style:var(--kpdg-lb-display-nav-inactive-border-style,solid);
	border-color:var(--kpdg-lb-display-nav-inactive-border-color,#000);
}
.kpdg-lightbox-prev { left:var(--kpdg-lb-display-nav-margin,15px); }
.kpdg-lightbox-next { right:var(--kpdg-lb-display-nav-margin,15px); }

.kpdg-lightbox-close {
	position:absolute;
	top:var(--kpdg-lb-close-margin,15px);
	right:var(--kpdg-lb-close-margin,15px);
	z-index:7;
	padding:var(--kpdg-lb-close-padding-v,10px) var(--kpdg-lb-close-padding-h,14px);
	border-radius:var(--kpdg-lb-close-radius,0px);
	background:var(--kpdg-lb-close-bg,#000);
	color:var(--kpdg-lb-close-icon,#fff);
}
.kpdg-lightbox-close:active { transform:scale(.94); }
.kpdg-lightbox-close:hover {
	background:var(--kpdg-lb-close-hover-bg,#fff);
	color:var(--kpdg-lb-close-hover-icon,#000);
}
.kpdg-lightbox-close:hover::after {
	border-width:var(--kpdg-lb-close-hover-border-width,2px);
	border-style:var(--kpdg-lb-close-hover-border-style,solid);
	border-color:var(--kpdg-lb-close-hover-border-color,#000);
}

.kpdg-lightbox-filmstrip {
	position:relative;
	flex:0 0 var(--kpdg-lb-filmstrip-height,140px);
	height:var(--kpdg-lb-filmstrip-height,140px);
	min-height:0;
	overflow:hidden;
	padding-top:var(--kpdg-lb-filmstrip-padding-v,10px);
	padding-bottom:var(--kpdg-lb-filmstrip-padding-v,10px);
	box-sizing:border-box;
	background:var(--kpdg-lb-filmstrip-bg,#000);
	border-radius:0 0 var(--kpdg-lb-window-radius,0px) var(--kpdg-lb-window-radius,0px);
}
.kpdg-lightbox-film-viewport {
	position:absolute;
	inset:0;
	overflow:hidden;
	touch-action:none;
}
.kpdg-lightbox-film-track {
	position:absolute;
	left:0;
	top:50%;
	display:flex;
	align-items:center;
	gap:var(--kpdg-lb-thumb-gap,10px);
	width:max-content;
	transform:translate3d(0,-50%,0);
	transition:transform .26s cubic-bezier(.22,.61,.36,1);
	will-change:transform;
}
.kpdg-lightbox-film-track.is-no-transition { transition:none !important; }
.kpdg-lightbox-film-slot {
	flex:0 0 var(--kpdg-lb-thumb-slot-width,var(--kpdg-lb-thumb-content-width,100px));
	display:flex;
	align-items:center;
	justify-content:center;
	width:var(--kpdg-lb-thumb-slot-width,var(--kpdg-lb-thumb-content-width,100px));
	min-width:var(--kpdg-lb-thumb-slot-width,var(--kpdg-lb-thumb-content-width,100px));
	height:100%;
}
.kpdg-lightbox-thumb {
	display:block;
	flex:0 0 auto;
	width:var(--kpdg-lb-thumb-content-width,100px);
	height:var(--kpdg-lb-thumb-height,100px);
	padding:var(--kpdg-lb-thumb-padding,0px);
	border-width:var(--kpdg-lb-thumb-border-width,0px);
	border-style:var(--kpdg-lb-thumb-border-style,solid);
	border-color:var(--kpdg-lb-thumb-border-color,#fff);
	border-radius:var(--kpdg-lb-thumb-radius,0px);
	overflow:hidden;
	background:var(--kpdg-lb-thumb-bg,#000);
	opacity:var(--kpdg-lb-thumb-opacity,.72);
	box-sizing:content-box;
	cursor:pointer;
}
.kpdg-lightbox-thumb:not(.is-current):hover {
	padding:var(--kpdg-lb-thumb-hover-padding,0px);
	border-width:var(--kpdg-lb-thumb-hover-border-width,0px);
	border-style:var(--kpdg-lb-thumb-hover-border-style,solid);
	border-color:var(--kpdg-lb-thumb-hover-border-color,#fff);
	border-radius:var(--kpdg-lb-thumb-hover-radius,0px);
	background:var(--kpdg-lb-thumb-hover-bg,#000);
	opacity:var(--kpdg-lb-thumb-hover-opacity,1);
}
.kpdg-lightbox-thumb.is-current,
.kpdg-lightbox-thumb.is-current:hover {
	height:var(--kpdg-lb-thumb-selected-height,120px);
	padding:var(--kpdg-lb-thumb-selected-padding,0px);
	border-width:var(--kpdg-lb-thumb-selected-border-width,0px);
	border-style:var(--kpdg-lb-thumb-selected-border-style,solid);
	border-color:var(--kpdg-lb-thumb-selected-border-color,#fff);
	border-radius:var(--kpdg-lb-thumb-selected-radius,0px);
	background:var(--kpdg-lb-thumb-selected-bg,#000);
	opacity:var(--kpdg-lb-thumb-selected-opacity,1);
}
.kpdg-lightbox-thumb img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:inherit;
}
.kpdg-lightbox-film-nav {
	position:absolute;
	top:50%;
	z-index:8;
	transform:translateY(-50%);
	margin:0;
	padding:var(--kpdg-lb-film-nav-padding-v,10px) var(--kpdg-lb-film-nav-padding-h,14px);
	border-radius:var(--kpdg-lb-film-nav-radius,0px);
	background:var(--kpdg-lb-film-nav-bg,#fff);
	color:var(--kpdg-lb-film-nav-icon,#000);
}
.kpdg-lightbox-film-prev { left:var(--kpdg-lb-film-nav-margin,12px); }
.kpdg-lightbox-film-next { right:var(--kpdg-lb-film-nav-margin,12px); }
.kpdg-lightbox-film-nav:active { transform:translateY(-50%) scale(.94); }
.kpdg-lightbox-film-nav:not(:disabled):hover {
	background:var(--kpdg-lb-film-nav-hover-bg,#fff);
	color:var(--kpdg-lb-film-nav-hover-icon,#000);
}
.kpdg-lightbox-film-nav:not(:disabled):hover::after {
	border-width:var(--kpdg-lb-film-nav-hover-border-width,2px);
	border-style:var(--kpdg-lb-film-nav-hover-border-style,solid);
	border-color:var(--kpdg-lb-film-nav-hover-border-color,#000);
}
.kpdg-lightbox-film-nav:disabled {
	opacity:1;
	background:var(--kpdg-lb-film-nav-inactive-bg,#fff);
	color:var(--kpdg-lb-film-nav-inactive-icon,#000);
	cursor:default;
}
.kpdg-lightbox-film-nav:disabled::after {
	border-width:var(--kpdg-lb-film-nav-inactive-border-width,2px);
	border-style:var(--kpdg-lb-film-nav-inactive-border-style,solid);
	border-color:var(--kpdg-lb-film-nav-inactive-border-color,#000);
}

@media (max-width:782px) {
	.kpdg-lightbox-shell { inset:min(var(--kpdg-lb-outer-margin,50px),20px); }
	.kpdg-lightbox-film-slot { max-width:45vw; }
	.kpdg-lightbox-display-nav svg,
	.kpdg-lightbox-close svg,
	.kpdg-lightbox-film-nav svg { width:20px; height:20px; }
}
@media (prefers-reduced-motion:reduce) {
	.kpdg-lightbox-overlay,
	.kpdg-lightbox-shell,
	.kpdg-lightbox-fit-image,
	.kpdg-lightbox-full-image,
	.kpdg-lightbox-nav-image,
	.kpdg-lightbox-film-track,
	.kpdg-lightbox-display-nav,
	.kpdg-lightbox-close,
	.kpdg-lightbox-film-nav,
	.kpdg-lightbox-thumb { transition-duration:.01ms !important; }
}


/* v0.18.6: Display transitions intentionally disabled. */
.kpdg-lightbox-display,
.kpdg-lightbox-stage,
.kpdg-lightbox-image-layer,
.kpdg-lightbox-fit-image,
.kpdg-lightbox-full-image,
.kpdg-lightbox-nav-image,
.kpdg-lightbox-display-nav,
.kpdg-lightbox-close {
	transition:none !important;
	animation:none !important;
}
.kpdg-lightbox-display-nav:active {
	transform:translateY(-50%) !important;
}
.kpdg-lightbox-close:active {
	transform:none !important;
}

/* v0.18.57: non-blocking loader for uncached Lightbox display/full-resolution media. */
.kpdg-lightbox-loader {
	position:absolute;
	left:50%;
	top:50%;
	width:30px;
	height:30px;
	margin:-15px 0 0 -15px;
	box-sizing:border-box;
	border:2px solid rgba(127,127,127,.28);
	border-top-color:currentColor;
	border-radius:50%;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	z-index:6;
	color:#111;
}
.kpdg-lightbox-loader.is-visible {
	opacity:1;
	visibility:visible;
	animation:kpdg-lightbox-loader-spin .7s linear infinite !important;
}
@keyframes kpdg-lightbox-loader-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
	.kpdg-lightbox-loader.is-visible { animation-duration:1.4s !important; }
}
